@@ Line 652: / Line 652: @@
-/* === Layout === */
+/* Main page CSS */
+/* === Main Page Layout (scoped) === */
+.mainpage-wrapper .main-banner {
+    text-align: center;
+}
+.mainpage-wrapper .search-area {
+    border-radius: var(--border-radius-base);
+    cursor: pointer;
+    transition: background 0.2s ease;
+    text-align: center;
+}
+.mainpage-wrapper .search-area:hover {
+  background: var(--color-surface-3);
+}
+.mainpage-wrapper .intro-text {
+    text-align: center;
+}
+.mainpage-wrapper .info-row {
+    display: flex;
+    gap: 1em;
+    margin: 1em;
+}
+.mainpage-wrapper .info-box {
+  flex: 1 1 32%;
+  display: flex;
+  flex-direction: column;
+  margin: 0 !important;
+}
+.mainpage-wrapper pre{
+  white-space: pre-wrap;   /* wrap long lines */
+  word-wrap: break-word;   /* break long words if needed */
+  min-width:250px;
+}
+.mainpage-wrapper .info-box,.about-box,.intro-text,.search-area{
+	color: var(--color-emphasized);
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+    overflow: auto;
+    border-radius: var(--border-radius-large);
+    padding: 1em;
+    margin: 1em;
+}
+/* The banner box */
 .main-banner {
-  text-align: center;
+    position: relative;
-  padding: 1em;
+    height: 450px;
-  background-color: #333;
+    max-width: 2440px;          /* stop growing beyond image width */
-  color: red;
+    margin: 1em auto;           /* centre the container */
+    overflow: hidden;           /* crop sides */
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+    border-radius: var(--border-radius-large);
+    color: var(--color-emphasized);
+    padding: 0;
+}
+/* centre ANY img inside (not just mw-file-element) */
+.main-banner img {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100%;
+    width: auto;
+    max-width: none;
 }
-.banner-title {
-  font-size: 2em;
+.main-banner > a { display:block; height:100%; }
-  margin-top: 0.5em;
+.mainpage-wrapper .lower-row {
+	display: flex;
+    gap: 1em;
+    margin: 1em;
 }
-.search-area {
+.mainpage-wrapper .about-box {
-  text-align: center;
+    flex: 1 1 31.3%;
-  background: #222;
+    margin: 0 !important;
-  padding: 0.5em;
-  margin-top: 1em;
-  color: white;
 }
-.intro-text {
+.mainpage-wrapper .link-grid {
-  max-width: 800px;
+    display: flex;
-  margin: 1em auto;
+    flex-wrap: wrap;
-  text-align: center;
+    gap: 0.5em;
-  color: white;
+    flex: 1 1 65%;
+    justify-content: center;
 }
-/* Info Boxes Row */
+.mainpage-wrapper .link-tile {
-.info-row {
+	width: 200px;
-  display: flex;
+    height: 200px;
-  flex-wrap: wrap;
+    display: flex;
-  justify-content: space-between;
+    align-items: center;
-  gap: 1em;
+    justify-content: center;
-  margin: 2em auto;
+    text-align: center;
-  max-width: 1000px;
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
 }
-.info-box {
-   flex: 1 1 300px;
+.mainpage-wrapper .link-tile {
-   background: #444;
+   position: relative;
-   color: white;
+  width: 200px;
-   padding: 1em;
+  height: 200px;
+   overflow: hidden;
+   background: var(--color-surface-2);
+   border: var(--border-width-base) solid var(--border-color-base);
 }
-/* Lower section */
+.mainpage-wrapper .tile-inner {
-.lower-row {
+   width: 100%;
-   display: flex;
+   height: 100%;
-  flex-wrap: wrap-reverse;
+   position: relative;
-  justify-content: space-between;
-   margin: 2em auto;
-  max-width: 1000px;
-   gap: 2em;
 }
-/* About box should appear first on small screens */
+.mainpage-wrapper .tile-inner img {
-.about-box {
+   width: 100%;
-   flex: 1 1 250px;
+   height: 100%;
-   background: #333;
+   object-fit: cover;
-   color: white;
+   display: block;
-   padding: 1em;
-  order: -1; /* Makes it appear first when wrapped */
 }
-/* Grid of links */
+.mainpage-wrapper .tile-label {
-.link-grid {
+   position: absolute;
-   flex: 3 1 600px;
+  bottom: 0;
-   display: flex;
+  left: 0;
-   flex-wrap: wrap;
+   right: 0;
-   gap: 1em;
+   background: rgba(0, 0, 0, 0.6);
+  text-align: center;
+   padding: 0.3em;
+  font-weight: bold;
+  font-size: 1em;
 }
-.link-tile {
-  flex: 1 1 120px;
+.mainpage-wrapper .tile-label a {
-  background: #222;
    color: white;
-   padding: 1em;
+   text-decoration: none;
-  text-align: center;
+}
-   min-width: 100px;
+.mainpage-wrapper .tile-label a:hover {
+   text-decoration: underline;
 }
-/* === Responsive tweaks === */
+/* === Mobile responsiveness === */
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
-   .info-row {
+   .mainpage-wrapper .info-row {
      flex-direction: column;
    }
-   .info-box {
+   .mainpage-wrapper .info-box {
      flex: 1 1 auto;
    }
-   .lower-row {
+   .mainpage-wrapper .lower-row {
      flex-direction: column;
    }
+}
+.github-badge-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1em;
+}
+.github-badge-title {
+  white-space: nowrap;
+}
+/* Light mode (default) */
+.patreon-logo-dark {
+  display: none;
+}
+.patreon-logo-light {
+  display: inline;
+}
+/* Dark mode (activated via root class) */
+:root.skin-theme-clientpref-night .patreon-logo-light {
+  display: none;
+}
+:root.skin-theme-clientpref-night .patreon-logo-dark {
+  display: inline;
 }