/* Quokka Games — shared portal shell, home, and game pages.
   Two themes (see DESIGN.md):
   - dark  (html[data-theme="dark"]): the CrazyGames-style shell — fixed
     header, icon rail, 16:9 cover rows. These are the unprefixed rules below.
   - light (html[data-theme="light"], the default): the Supergames/Poki-style
     square-tile mosaic. Its overrides live in the block at the end of the file,
     all prefixed with :root[data-theme="light"]. */

:root {
  color-scheme: dark;
  --bg: #0c0d14;
  --surface: #1a1b28;
  --surface-2: #212233;
  --surface-3: #2a2b3d;
  --input: #373952;
  --accent: #6842ff;
  --accent-hover: #7b5bff;
  --accent-soft: rgba(104, 66, 255, 0.18);
  --text: #ffffff;
  --muted: #aaadbe;
  --line: #262739;
  --header-h: 60px;
  --rail-w: 60px;
  --drawer-w: 240px;
  --radius: 12px;
  --gap: 10px;
  --font:
    "Nunito", "Nunito Fallback", ui-rounded, "SF Pro Rounded", system-ui,
    -apple-system, "Segoe UI", sans-serif;
}

/* Nunito loads with display=swap. Until it arrives, text renders in Arial Bold
   scaled per weight to Nunito's advance widths and vertical metrics, so the
   swap does not rewrap text (e.g. the "Continue playing" chips) and shift the
   page. size-adjust = Nunito width / Arial Bold width for the same text;
   ascent/descent = Nunito's 1011/353 per 1000 em, divided by size-adjust. */
@font-face {
  font-family: "Nunito Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 95.11%;
  ascent-override: 106.30%;
  descent-override: 37.11%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Nunito Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 97.01%;
  ascent-override: 104.22%;
  descent-override: 36.39%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Nunito Fallback";
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.09%;
  ascent-override: 102.03%;
  descent-override: 35.62%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Nunito Fallback";
  font-weight: 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.25%;
  ascent-override: 99.85%;
  descent-override: 34.86%;
  line-gap-override: 0%;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 30px;
  background: var(--accent);
  font-weight: 800;
}

.skip-link:focus {
  top: 10px;
}

.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

/* ---------- Header ---------- */

.portal-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr minmax(200px, 460px) 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 10px;
  background: var(--surface);
}

.portal-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.menu-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.menu-toggle:hover {
  background: var(--surface-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 15px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 20px;
  font-weight: 900;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.brand-word b {
  color: #b9a6ff;
}

.search-wrap {
  position: relative;
  display: block;
}

.search-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 20px;
  border: 2px solid transparent;
  border-radius: 30px;
  background: var(--input);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.15s;
}

.search-wrap input::placeholder {
  color: var(--muted);
}

.search-wrap input:focus {
  border-color: var(--accent);
}

.search-wrap input::-webkit-search-cancel-button {
  display: none;
}

.search-wrap .icon {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 30px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

.pill-button:hover {
  background: var(--accent-hover);
}

.pill-button.ghost {
  background: var(--surface-3);
}

.pill-button.ghost:hover {
  background: var(--input);
}

.round-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  cursor: pointer;
}

.round-button:hover {
  background: var(--input);
}

/* ---------- Sidebar rail / drawer ---------- */

.category-sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  z-index: 30;
  width: var(--drawer-w);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0 16px;
  background: var(--bg);
  scrollbar-width: none;
  transition: width 0.18s ease;
}

.category-sidebar::-webkit-scrollbar {
  display: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 40px;
  padding: 0 19px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.nav-item .icon {
  color: #d9dbe7;
}

.nav-item:hover {
  background: var(--surface);
}

.nav-item.active,
.nav-item[aria-pressed="true"] {
  background: var(--accent-soft);
}

.nav-item.active::before,
.nav-item[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.nav-item.active .icon,
.nav-item[aria-pressed="true"] .icon {
  color: #b9a6ff;
}

.nav-divider {
  height: 1px;
  margin: 8px 12px;
  background: var(--line);
}

.sidebar-label {
  margin: 10px 0 4px;
  padding: 0 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.sidebar-bottom {
  display: grid;
  gap: 2px;
  padding: 8px 20px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.sidebar-bottom a:hover {
  color: var(--text);
}

.sidebar-bottom small {
  font-size: 12px;
  opacity: 0.8;
}

/* Collapsed desktop rail: icons only, labels as hover tooltips. */
body.sidebar-collapsed .category-sidebar {
  width: var(--rail-w);
}

body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-label,
body.sidebar-collapsed .sidebar-bottom {
  display: none;
}

body.sidebar-collapsed .nav-divider {
  margin: 8px 10px;
}

.category-sidebar .nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-shell {
  padding-top: var(--header-h);
  padding-left: var(--drawer-w);
  transition: padding-left 0.18s ease;
}

body.sidebar-collapsed .portal-shell {
  padding-left: var(--rail-w);
}

.drawer-scrim {
  display: none;
}

/* ---------- Home ---------- */

.portal-main {
  width: 100%;
  max-width: 1880px;
  padding: 16px 24px 0;
}

.portal-section {
  margin-bottom: 26px;
}

.row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.row-heading h1,
.row-heading h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
}

.row-heading h1 .count,
.row-heading h2 .count {
  margin-left: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.text-link,
.text-button {
  border: 0;
  background: none;
  color: #b9a6ff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.text-link:hover,
.text-button:hover {
  color: #fff;
}

/* Collection tiles (CrazyGames "Train your brain / 5-minute fun" row) */
.tile-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: 26px;
}

.collection-tile {
  position: relative;
  height: 84px;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tile-bg, var(--surface));
  color: var(--tile-fg, #fff);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.15s,
    filter 0.15s;
}

.collection-tile img {
  position: absolute;
  right: 6px;
  top: 4px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s;
}

.collection-tile:hover {
  filter: brightness(1.12);
}

.collection-tile:hover img {
  transform: scale(1.1) rotate(-6deg);
}

.tile-quick {
  --tile-bg: linear-gradient(135deg, #3b2a14, #1f1b2a 70%);
  --tile-fg: #ffc861;
}
.tile-puzzle {
  --tile-bg: linear-gradient(135deg, #3d1633, #1f1b2a 70%);
  --tile-fg: #ff7ccf;
}
.tile-card {
  --tile-bg: linear-gradient(135deg, #123626, #1a1f26 70%);
  --tile-fg: #6fe3a4;
}
.tile-arcade {
  --tile-bg: linear-gradient(135deg, #10323a, #1a1f2a 70%);
  --tile-fg: #62e2f2;
}
.tile-word {
  --tile-bg: linear-gradient(135deg, #2a1c4d, #1d1b2e 70%);
  --tile-fg: #c1adff;
}

/* Game cards */
.game-card {
  position: relative;
  min-width: 0;
}

.game-card-link {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.game-art,
.cover-art {
  aspect-ratio: 16 / 9;
  height: 100%;
}

.game-art img,
.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card-title {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 26px 12px 9px;
  background: linear-gradient(transparent, rgba(8, 8, 14, 0.92));
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.18s,
    transform 0.18s;
}

.game-card-link:hover,
.game-card-link:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 0 0 2px var(--accent);
}

.game-card-link:hover .game-card-title,
.game-card-link:focus-visible .game-card-title {
  opacity: 1;
  transform: none;
}

/* "Top games" mosaic: first card spans 2×2, like the CrazyGames top row. */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--gap);
}

/* The header and the heading also live in the grid (light theme mosaic);
   in the dark theme the header is fixed and the heading spans the row. */
.game-grid > .row-heading {
  grid-column: 1 / -1;
  margin: 0 0 calc(10px - var(--gap));
}

.game-grid > .game-card:first-of-type:not([hidden]) {
  grid-column: span 2;
  grid-row: span 2;
}

.game-grid > .game-card:first-of-type .game-art {
  aspect-ratio: auto;
}

body.is-filtering .game-grid > .game-card:first-of-type {
  grid-column: auto;
  grid-row: auto;
}

body.is-filtering .game-grid > .game-card:first-of-type .game-art {
  aspect-ratio: 16 / 9;
}

body.is-filtering .browse-only {
  display: none;
}

.empty-state {
  margin: 8px 0 0;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}

/* Horizontal carousel rows */
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--gap)) / 4);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0 6px;
  margin-top: -4px;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel > * {
  scroll-snap-align: start;
}

.carousel .game-card-link .game-card-title {
  font-size: 14px;
}

/* Continue playing */
.recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px 0 4px;
  border-radius: 12px;
  background: var(--surface);
  font-weight: 800;
}

.recent-chip img {
  width: 64px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.recent-chip:hover {
  background: var(--surface-3);
}

/* About + footer */
.portal-about {
  margin: 30px 0 0;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: var(--surface);
}

.portal-about h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 900;
}

.portal-about h3 {
  margin: 18px 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.portal-about p {
  margin: 0 0 8px;
  max-width: 900px;
  color: var(--muted);
  font-size: 15px;
}

.portal-about a {
  color: #b9a6ff;
}

.portal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 0 32px;
  color: var(--muted);
  font-size: 13px;
}

.portal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.portal-footer a:hover {
  color: #fff;
}

.collection-tile[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--tile-fg);
}

.row-heading > div {
  min-width: 0;
}

.row-subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ff3d6e;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Category, New, and Originals listing pages (CrazyGames /c/<genre>) */
.listing-header .breadcrumbs {
  grid-column: 1 / -1;
  margin: 4px 0 -2px;
}

.listing-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: end;
  margin-bottom: 18px;
}

.listing-grid > .listing-header {
  grid-column: 1 / -1;
  margin-bottom: calc(18px - var(--gap));
}

.listing-header h1 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

.listing-description {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.listing-description p {
  margin: 0;
  max-width: 980px;
  color: var(--muted);
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-description p.expanded {
  display: block;
}

.listing-description .text-link {
  flex: 0 0 auto;
  padding: 0;
}

.sort-select select {
  height: 40px;
  padding: 0 38px 0 14px;
  border: 2px solid var(--surface-3);
  border-radius: 10px;
  background: var(--bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  appearance: none;
  cursor: pointer;
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
  margin-bottom: 24px;
}

.listing-faq {
  margin-top: 8px;
}

.footer-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.footer-genres a {
  padding: 6px 14px;
  border-radius: 30px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}

.footer-genres a:hover {
  background: var(--surface-3);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* ---------- Game page ---------- */

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  max-width: 1600px;
  padding: 16px 20px 0;
}

.game-column {
  min-width: 0;
}

.player-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(ellipse at 50% 120%, #2b1f5c 0%, #0f1020 60%);
}

.player-frame iframe {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 520px;
  border: 0;
  background: transparent;
}

.game-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 12px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}

.game-bar-thumb {
  width: 64px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

.game-bar-title {
  min-width: 0;
  flex: 1;
}

.game-bar-title b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 900;
}

.game-bar-title small {
  color: var(--muted);
  font-size: 12px;
}

.game-actions {
  display: flex;
  gap: 8px;
}

.share-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.share-status:empty {
  display: none;
}

/* End-of-game "Play next" strip (game-page.js): replaces the tagline in the
   game bar after a game over / level complete. It lives inside the bar, so it
   never covers the game or the ad slot. Both themes use the same tokens. */
.game-bar.showing-next .game-bar-title,
.next-strip[hidden],
.next-strip-game[hidden] {
  display: none;
}

.next-strip {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  animation: next-strip-in 0.25s ease-out;
}

.next-strip-label {
  flex: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.next-strip-list {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.next-strip-game {
  display: flex;
  flex: 0 1 190px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 8px 3px 3px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.next-strip-game:hover,
.next-strip-game:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

.next-strip-game img {
  flex: none;
  width: 64px;
  height: 36px;
  border-radius: 7px;
  object-fit: cover;
}

.next-strip-game span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-strip-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.next-strip-close:hover {
  color: var(--text);
}

@keyframes next-strip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .next-strip {
    animation: none;
  }
}

/* Narrow bars: covers only; the title stays in the link's title/label. */
@media (max-width: 900px) {
  .next-strip-game {
    flex: 0 1 auto;
    padding: 3px;
  }
  .next-strip-game span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .game-bar.showing-next .game-actions {
    display: none;
  }
}

@media (max-width: 420px) {
  .next-strip-label {
    display: none;
  }
}

.game-details {
  margin-top: 16px;
  padding: 20px 24px 24px;
  border-radius: var(--radius);
  background: var(--surface);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.breadcrumbs a {
  color: #b9a6ff;
}

.breadcrumbs a:hover {
  color: #fff;
}

.game-details h1 {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
}

.game-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  margin: 0 0 18px;
  font-size: 14px;
}

.game-facts dt {
  color: var(--muted);
  font-weight: 700;
}

.game-facts dd {
  margin: 0;
  font-weight: 800;
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.game-tags a,
.game-tags span {
  padding: 6px 14px;
  border-radius: 30px;
  background: var(--surface-3);
  font-size: 13px;
  font-weight: 800;
}

.game-tags a:hover {
  background: var(--input);
}

.game-copy p {
  margin: 0 0 12px;
  max-width: 820px;
  color: #d4d6e2;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.game-copy h2 {
  margin: 20px 0 6px;
  font-size: 17px;
  font-weight: 900;
}

/* Player guide: tips list and FAQ (theme tokens, so both themes). */
.game-tips {
  max-width: 820px;
  margin: 0 0 12px;
  padding-left: 22px;
  color: var(--copy, #d4d6e2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.game-tips li + li {
  margin-top: 6px;
}

.game-tips li::marker {
  color: var(--accent);
}

.game-faq h3 {
  margin: 14px 0 4px;
  font-size: 15px;
  font-weight: 900;
}

.game-credit {
  color: var(--muted) !important;
  font-size: 13px !important;
}

.game-credit a {
  color: #b9a6ff;
}

.game-ad {
  margin: 24px 0 0;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 120px;
}

/* Fallback network banner (site/games/ad-slots.js). */
.game-ad iframe[data-quokka-fallback] {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
}

.game-ad > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* Desktop side rails: vertical ad units beside the player on wide screens.
   Hidden below the breakpoint (ad-slots.js only requests a rendered slot).
   Each unit stays at least 150px from the game frame, per the AdSense
   guidance for ads next to games. */
.side-rail {
  display: none;
}

.side-rail-inner {
  width: 160px;
  min-height: 620px;
  padding: 8px 0 0;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.side-rail-inner > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-rail .adsbygoogle {
  width: 160px;
  min-height: 600px;
  margin: 0 auto;
}

/* Dark: rail | 150px clearance | player column | play next | rail. */
@media (min-width: 1800px) {
  :root:not([data-theme="light"]) .game-layout {
    grid-template-columns: 160px minmax(0, 1fr) 320px 160px;
    max-width: none;
  }
  :root:not([data-theme="light"]) .game-column {
    grid-column: 2;
    grid-row: 1;
    margin-left: 134px;
  }
  :root:not([data-theme="light"]) .play-next {
    grid-column: 3;
    grid-row: 1;
  }
  :root:not([data-theme="light"]) .side-rail {
    display: block;
    grid-row: 1;
    align-self: start;
  }
  :root:not([data-theme="light"]) .side-rail-left {
    grid-column: 1;
  }
  :root:not([data-theme="light"]) .side-rail-right {
    grid-column: 4;
  }
}

.play-next h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
}

.play-next-list {
  display: grid;
  gap: var(--gap);
}

/* Every other game is listed for the light mosaic; the dark column shows 8. */
.play-next-list > .game-card:nth-child(n + 9) {
  display: none;
}

/* Theme toggle (sun in dark, moon in light) and light-only category tiles. */
.theme-toggle .icon-moon,
.category-tiles {
  display: none;
}

.play-next .game-card-title {
  opacity: 1;
  transform: none;
  font-size: 14px;
}

/* Developer page */
.developer-panel {
  max-width: 880px;
  margin: 24px auto 0;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface);
}

.developer-panel h1 {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
}

.developer-panel h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
}

.developer-panel p,
.developer-panel li {
  color: #d4d6e2;
  font-size: 15px;
  line-height: 1.6;
}

.intake-status {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.intake-status p {
  margin: 4px 0 0;
}

.status-dot {
  flex: 0 0 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: #ffc861;
}

.developer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0 20px;
}

.developer-columns article {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.developer-columns ul {
  margin: 0;
  padding-left: 18px;
}

.developer-footnote {
  color: var(--muted) !important;
  font-size: 13px !important;
}

/* ---------- Responsive ---------- */

@media (min-width: 1700px) {
  .game-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .carousel {
    grid-auto-columns: calc((100% - 5 * var(--gap)) / 6);
  }
}

@media (max-width: 1200px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
  .carousel {
    grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  }
}

@media (max-width: 1000px) {
  .tile-row {
    grid-template-columns: repeat(5, 200px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tile-row::-webkit-scrollbar {
    display: none;
  }
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .play-next-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --gap: 8px;
    --radius: 10px;
  }

  .portal-header {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 0 8px 0 4px;
  }

  .brand-word {
    display: none;
  }

  .search-wrap input {
    font-size: 15px;
    padding-left: 16px;
  }

  .header-actions .pill-button {
    display: none;
  }

  /* Drawer overlays the page on phones; the rail is hidden until opened. */
  .category-sidebar {
    width: var(--drawer-w);
    transform: translateX(0);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.5);
  }

  body.sidebar-collapsed .category-sidebar {
    width: var(--drawer-w);
    transform: translateX(-100%);
    box-shadow: none;
  }

  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .sidebar-label {
    display: revert;
  }

  body.sidebar-collapsed .sidebar-bottom {
    display: grid;
  }

  body:not(.sidebar-collapsed) .drawer-scrim {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.55);
  }

  .portal-shell,
  body.sidebar-collapsed .portal-shell {
    padding-left: 0;
  }

  .portal-main {
    padding: 12px 12px 0;
  }

  .tile-row {
    grid-template-columns: repeat(5, 150px);
    margin-bottom: 20px;
  }

  .collection-tile {
    height: 70px;
    font-size: 13px;
  }

  .collection-tile img {
    width: 48px;
    height: 48px;
  }

  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-card-title {
    opacity: 1;
    transform: none;
    padding: 20px 8px 6px;
    font-size: 12px;
  }

  .carousel {
    grid-auto-columns: 42%;
  }

  .listing-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .listing-header h1 {
    font-size: 22px;
  }

  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-layout {
    padding: 0;
    gap: 12px;
  }

  .player-frame {
    border-radius: 0;
  }

  .player-frame iframe {
    height: 78vh;
    min-height: 480px;
  }

  .game-bar {
    border-radius: 0;
  }

  .game-bar-thumb {
    display: none;
  }

  .game-details {
    margin: 12px 12px 0;
    padding: 16px;
  }

  .game-ad {
    margin: 16px 12px 0;
  }

  .play-next {
    padding: 0 12px;
  }

  .developer-panel {
    margin: 12px;
    padding: 20px;
  }

  .developer-columns {
    grid-template-columns: 1fr;
  }

  .portal-about {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  .game-card-link:hover,
  .game-card-link:focus-visible {
    transform: none;
  }
}

/* =====================================================================
   Light theme — Supergames / Poki-style square-tile mosaic (default).
   Measured benchmark values and the reasoning are in DESIGN.md.
   Every rule is prefixed with :root[data-theme="light"] so it outranks
   the dark rules above (including their media queries).
   ===================================================================== */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #2a96e9;
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e8eef7;
  --input: #eef2f9;
  --accent: #6842ff;
  --accent-hover: #5a33f5;
  --accent-soft: rgba(104, 66, 255, 0.1);
  --text: #182033;
  --muted: #5d6679;
  --line: #e3e8f0;
  --ink: #0b1f3a; /* text set directly on the sky background */
  --link: #5a33f5;
  --copy: #3b4458;
  --pad: 14px;
  --gap: 12px;
  --cols: 3;
  --tile-radius: 16px;
  --tile-shadow: 0 6px 10px rgba(6, 45, 97, 0.3);
  --tile-shadow-hover: 0 10px 18px rgba(6, 45, 97, 0.38);
  --bar-h: 64px;
}

/* Tile size: the mosaic always fills the width exactly, --cols squares per
   row. .portal-shell is the size container (light only: in the dark theme it
   holds the fixed header, which containment would pin to the page). */
:root[data-theme="light"] .portal-shell {
  container: portal / inline-size;
  padding: 0;
}

:root[data-theme="light"] .portal-shell > * {
  --tile: calc(
    (100cqw - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols)
  );
}

@container portal (min-width: 488px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 4;
  }
}
@container portal (min-width: 604px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 5;
  }
}
@container portal (min-width: 720px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 6;
    --pad: 20px;
    --gap: 16px;
    --tile-radius: 18px;
  }
}
@container portal (min-width: 836px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 7;
  }
}
@container portal (min-width: 952px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 8;
  }
}
@container portal (min-width: 1068px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 9;
  }
}
@container portal (min-width: 1184px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 10;
  }
}
@container portal (min-width: 1300px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 11;
  }
}
@container portal (min-width: 1416px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 12;
  }
}
@container portal (min-width: 1532px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 13;
  }
}
@container portal (min-width: 1648px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 14;
  }
}
@container portal (min-width: 1764px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 15;
  }
}
@container portal (min-width: 1880px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 16;
  }
}
@container portal (min-width: 1996px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 17;
  }
}
@container portal (min-width: 2112px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 18;
  }
}
@container portal (min-width: 2228px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 19;
  }
}
@container portal (min-width: 2344px) {
  :root[data-theme="light"] .portal-shell > * {
    --cols: 20;
  }
}

/* ---------- Page ---------- */

:root[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="light"] .skip-link {
  color: #fff;
}

:root[data-theme="light"] .portal-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: none;
  padding: var(--pad);
}

:root[data-theme="light"] .portal-main > * {
  margin: 0;
}

/* Shared square mosaic: home grid, listing grid, game page. */
:root[data-theme="light"] .game-grid,
:root[data-theme="light"] .listing-grid,
:root[data-theme="light"] .game-layout {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--tile), auto);
  grid-auto-flow: dense;
  gap: var(--gap);
  margin: 0;
}

/* ---------- Header: the logo + search tile at the top-left of the grid ---------- */

:root[data-theme="light"] .portal-header {
  position: relative;
  inset: auto;
  z-index: 3;
  grid-column: 1 / span 2;
  grid-row: 1;
  height: auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: space-between;
  gap: 6px 4px;
  padding: 10px 10px 12px;
  border-radius: var(--tile-radius);
  background: var(--surface);
  box-shadow: var(--tile-shadow);
  overflow: hidden;
}

/* Pages without a mosaic (developers) keep the same 2×1 tile size. */
:root[data-theme="light"] .portal-main > .portal-header {
  width: calc(2 * var(--tile) + var(--gap));
  height: var(--tile);
}

:root[data-theme="light"] .portal-identity {
  grid-column: 1;
  grid-row: 1;
  gap: 2px;
}

:root[data-theme="light"] .menu-toggle {
  width: 34px;
  height: 34px;
  color: var(--text);
}

:root[data-theme="light"] .menu-toggle:hover {
  background: var(--surface-3);
}

:root[data-theme="light"] .brand {
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}

:root[data-theme="light"] .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
}

:root[data-theme="light"] .brand-word {
  display: block;
}

:root[data-theme="light"] .brand-word b {
  color: var(--accent);
}

:root[data-theme="light"] .header-actions {
  grid-column: 2;
  grid-row: 1;
  gap: 0;
}

:root[data-theme="light"] .header-actions .pill-button {
  display: none;
}

:root[data-theme="light"] .round-button {
  background: var(--surface-3);
  color: var(--text);
}

:root[data-theme="light"] .round-button:hover {
  background: #dfe6f2;
}

:root[data-theme="light"] .theme-toggle {
  width: 34px;
  height: 34px;
}

:root[data-theme="light"] .theme-toggle .icon {
  width: 19px;
  height: 19px;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .search-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

:root[data-theme="light"] .search-wrap input {
  height: 36px;
  padding: 0 34px 0 14px;
  background: var(--input);
  font-size: 15px;
  text-overflow: ellipsis;
}

:root[data-theme="light"] .search-wrap .icon {
  right: 11px;
  width: 18px;
  height: 18px;
}

/* ---------- Drawer: always an overlay in the light theme ---------- */

:root[data-theme="light"] .category-sidebar,
:root[data-theme="light"] body.sidebar-collapsed .category-sidebar {
  top: 0;
  z-index: 60;
  width: var(--drawer-w);
  padding-top: 14px;
  background: var(--surface);
  box-shadow: 8px 0 30px rgba(6, 45, 97, 0.3);
  transform: none;
  visibility: visible;
  transition:
    transform 0.2s ease,
    visibility 0s;
}

:root[data-theme="light"] body.sidebar-collapsed .category-sidebar {
  transform: translateX(-105%);
  visibility: hidden;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}

:root[data-theme="light"] body.sidebar-collapsed .nav-label,
:root[data-theme="light"] body.sidebar-collapsed .sidebar-label {
  display: revert;
}

:root[data-theme="light"] body.sidebar-collapsed .sidebar-bottom {
  display: grid;
}

:root[data-theme="light"] .nav-item {
  color: var(--text);
}

:root[data-theme="light"] .nav-item .icon {
  color: var(--muted);
}

:root[data-theme="light"] .nav-item:hover {
  background: var(--surface-2);
}

:root[data-theme="light"] .nav-item.active .icon,
:root[data-theme="light"] .nav-item[aria-pressed="true"] .icon {
  color: var(--accent);
}

:root[data-theme="light"] .sidebar-bottom a:hover {
  color: var(--text);
}

:root[data-theme="light"] body:not(.sidebar-collapsed) .drawer-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(8, 24, 48, 0.45);
}

/* ---------- Tiles ---------- */

:root[data-theme="light"] .game-card {
  min-width: 0;
  min-height: 0;
}

:root[data-theme="light"] .game-card:hover,
:root[data-theme="light"] .game-card:focus-within {
  z-index: 2;
}

:root[data-theme="light"] .game-card-link {
  height: 100%;
  border-radius: var(--tile-radius);
  background: var(--surface-3);
  box-shadow: var(--tile-shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

:root[data-theme="light"] .game-card-link:hover,
:root[data-theme="light"] .game-card-link:focus-visible {
  transform: scale(1.06);
  box-shadow: var(--tile-shadow-hover);
}

:root[data-theme="light"] .game-card-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* 16:9 covers are cropped to squares; big tiles use the same artwork. */
:root[data-theme="light"] .game-art,
:root[data-theme="light"] .cover-art,
:root[data-theme="light"] .game-grid > .game-card:first-of-type .game-art {
  aspect-ratio: auto;
  height: 100%;
}

:root[data-theme="light"] .game-card-title,
:root[data-theme="light"] .play-next .game-card-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 55%;
  padding: 8px 8px 9px;
  background: linear-gradient(transparent, rgba(5, 12, 30, 0.82));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(35%);
}

:root[data-theme="light"] .game-card-link:hover .game-card-title,
:root[data-theme="light"] .game-card-link:focus-visible .game-card-title {
  opacity: 1;
  transform: none;
}

:root[data-theme="light"] .tile-lg .game-card-title,
:root[data-theme="light"] .tile-xl .game-card-title {
  min-height: 35%;
  padding: 12px 14px 16px;
  font-size: 20px;
}

:root[data-theme="light"] .card-badge {
  top: 8px;
  left: 0;
  padding: 2px 7px 2px 6px;
  border-radius: 0 9px 9px 0;
  background: #fff;
  color: var(--accent);
  font-size: 9px;
  box-shadow: 1px 2px 4px rgba(6, 45, 97, 0.28);
}

/* Featured tiles (catalog positions chosen in build-games-portal.mjs). */
:root[data-theme="light"] .game-card.tile-lg,
:root[data-theme="light"] .game-grid > .game-card.tile-lg:first-of-type,
:root[data-theme="light"] .game-card.tile-xl {
  grid-column: span 2;
  grid-row: span 2;
}

@container portal (min-width: 720px) {
  :root[data-theme="light"] .game-card.tile-xl {
    grid-column: span 3;
    grid-row: span 3;
  }
}

/* The dark theme's first-card 2×2 rule does not apply to the mosaic. */
:root[data-theme="light"]
  .game-grid
  > .game-card:first-of-type:not(.tile-lg):not(.tile-xl) {
  grid-column: auto;
  grid-row: auto;
}

/* ---------- Home ---------- */

:root[data-theme="light"] .home-row {
  display: none;
}

:root[data-theme="light"] #games {
  order: 0;
}

/* Heading: read by assistive tech; shown as a title tile while filtering. */
:root[data-theme="light"] body:not(.is-filtering) .game-grid > .row-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:root[data-theme="light"] body.is-filtering .game-grid > .row-heading {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: var(--tile-radius);
  background: var(--surface);
  box-shadow: var(--tile-shadow);
}

@container portal (min-width: 720px) {
  :root[data-theme="light"] body.is-filtering .game-grid > .row-heading {
    grid-column: 3 / span 4;
    grid-row: 1;
  }
}

:root[data-theme="light"] .row-heading h1 {
  font-size: 20px;
}

:root[data-theme="light"] .empty-state {
  box-shadow: var(--tile-shadow);
}

:root[data-theme="light"] .text-link,
:root[data-theme="light"] .text-button {
  padding: 0;
  color: var(--link);
}

:root[data-theme="light"] .text-link:hover,
:root[data-theme="light"] .text-button:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Continue playing: a slim white strip above the mosaic (history only). */
:root[data-theme="light"] #recent {
  padding: 10px 14px 12px;
  border-radius: var(--tile-radius);
  background: var(--surface);
  box-shadow: var(--tile-shadow);
}

:root[data-theme="light"] #recent .row-heading {
  margin-bottom: 8px;
}

:root[data-theme="light"] #recent h2 {
  font-size: 16px;
}

:root[data-theme="light"] .recent-chip {
  background: var(--surface-2);
}

:root[data-theme="light"] .recent-chip:hover {
  background: var(--surface-3);
}

/* Collection shortcuts and category tiles: 2×1 white tiles after the mosaic. */
:root[data-theme="light"] .tile-row,
:root[data-theme="light"] .category-tiles {
  order: 1;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(2 * var(--tile) + var(--gap)), 1fr)
  );
  grid-auto-rows: var(--tile);
  gap: var(--gap);
  overflow: visible;
}

/* The collection row comes before the mosaic in the markup (the dark theme
   shows it on top) but is ordered after it here. Keep it out of the layout
   until the parser is past #games, or a paint of the partly loaded page shows
   it on top and the arriving mosaic shoves it down (a layout shift). */
:root[data-theme="light"] .portal-main:not(:has(> #games ~ *)) > .tile-row {
  display: none;
}

/* Phones: two compact tiles per row instead of one oversized tile. */
@container portal (max-width: 719px) {
  :root[data-theme="light"] .tile-row,
  :root[data-theme="light"] .category-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 72px;
  }
  :root[data-theme="light"] .collection-tile,
  :root[data-theme="light"] .category-tile {
    gap: 8px;
    padding: 8px 8px 8px 8px;
    font-size: 12px;
    letter-spacing: 0;
  }
  :root[data-theme="light"] .category-tile-text b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :root[data-theme="light"] .collection-tile img,
  :root[data-theme="light"] .category-tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  :root[data-theme="light"] .category-tile-text small {
    font-size: 11px;
  }
}

:root[data-theme="light"] body.is-filtering .tile-row,
:root[data-theme="light"] body.is-filtering .category-tiles {
  display: none;
}

:root[data-theme="light"] .collection-tile,
:root[data-theme="light"] .category-tile {
  height: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: var(--tile-radius);
  background: var(--surface);
  box-shadow: var(--tile-shadow);
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

:root[data-theme="light"] .collection-tile:hover,
:root[data-theme="light"] .category-tile:hover,
:root[data-theme="light"] .category-tile:focus-visible {
  filter: none;
  transform: scale(1.04);
  box-shadow: var(--tile-shadow-hover);
}

:root[data-theme="light"] .collection-tile[aria-pressed="true"] {
  box-shadow:
    var(--tile-shadow),
    inset 0 0 0 3px var(--accent);
}

:root[data-theme="light"] .collection-tile img {
  position: static;
  flex: 0 0 auto;
  width: calc(var(--tile) - 24px);
  height: calc(var(--tile) - 24px);
  max-width: 76px;
  max-height: 76px;
  border-radius: 14px;
  background: var(--surface-2);
  filter: drop-shadow(0 3px 5px rgba(6, 45, 97, 0.2));
}

:root[data-theme="light"] .category-tile-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: min(calc(var(--tile) - 24px), 76px);
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    var(--cat, #8a6bff),
    var(--cat-2, #5a31f4)
  );
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .category-tile-icon .icon {
  width: 46%;
  height: 46%;
}

:root[data-theme="light"] .category-tile-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

:root[data-theme="light"] .category-tile-text small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.cat-new {
  --cat: #ffb020;
  --cat-2: #ff7a1a;
}
.cat-originals {
  --cat: #ff6fa8;
  --cat-2: #e8386f;
}
.cat-action {
  --cat: #ff7a45;
  --cat-2: #e5402b;
}
.cat-adventure {
  --cat: #4fc98a;
  --cat-2: #1f9a64;
}
.cat-arcade {
  --cat: #ffc233;
  --cat-2: #f08a00;
}
.cat-board {
  --cat: #a77bff;
  --cat-2: #6b3df0;
}
.cat-card {
  --cat: #3ecf8e;
  --cat-2: #129b62;
}
.cat-clicker {
  --cat: #ff8fc7;
  --cat-2: #de4b93;
}
.cat-driving {
  --cat: #5aa7ff;
  --cat-2: #2764e0;
}
.cat-io {
  --cat: #39d3d3;
  --cat-2: #0f9aa8;
}
.cat-puzzle {
  --cat: #ff6fb1;
  --cat-2: #c93c96;
}
.cat-rpg {
  --cat: #b08a5a;
  --cat-2: #7a5530;
}
.cat-shooting {
  --cat: #ff5d5d;
  --cat-2: #c42b3c;
}
.cat-simulation {
  --cat: #8bd44a;
  --cat-2: #4b9f1e;
}
.cat-sports {
  --cat: #3fb4ff;
  --cat-2: #1a72d6;
}
.cat-strategy {
  --cat: #8f96ad;
  --cat-2: #545c78;
}
.cat-trivia {
  --cat: #7c8cff;
  --cat-2: #4a55e0;
}
.cat-word {
  --cat: #22c1c3;
  --cat-2: #11808f;
}

/* About / FAQ / developer panels: white rounded text cards. */
:root[data-theme="light"] .portal-about,
:root[data-theme="light"] .developer-panel,
:root[data-theme="light"] .game-details {
  order: 2;
  border-radius: calc(var(--tile-radius) + 2px);
  background: var(--surface);
  box-shadow: var(--tile-shadow);
}

:root[data-theme="light"] .portal-about p,
:root[data-theme="light"] .developer-panel p,
:root[data-theme="light"] .developer-panel li,
:root[data-theme="light"] .game-copy p {
  color: var(--copy);
}

:root[data-theme="light"] .portal-about a,
:root[data-theme="light"] .game-credit a,
:root[data-theme="light"] .breadcrumbs a {
  color: var(--link);
}

:root[data-theme="light"] .breadcrumbs a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

:root[data-theme="light"] .developer-panel {
  order: 0;
  max-width: none;
}

:root[data-theme="light"] .developer-panel h1 {
  font-size: 28px;
}

:root[data-theme="light"] .developer-footnote,
:root[data-theme="light"] .game-credit {
  color: var(--muted) !important;
}

/* Footer: navy on sky for contrast; genre links already live in the tiles. */
:root[data-theme="light"] .portal-footer {
  order: 3;
  padding: 6px 4px 18px;
  color: var(--ink);
  font-weight: 700;
}

:root[data-theme="light"] .portal-footer a:hover {
  color: #fff;
}

:root[data-theme="light"] .footer-genres {
  display: none;
}

/* ---------- Category / New / Originals listing ---------- */

:root[data-theme="light"] .listing-grid > .listing-header {
  grid-column: 1 / -1;
  grid-row: 2 / span 2;
  align-content: center;
  gap: 6px 12px;
  margin: 0;
  padding: 12px 18px;
  border-radius: var(--tile-radius);
  background: var(--surface);
  box-shadow: var(--tile-shadow);
  overflow: auto;
}

@container portal (min-width: 720px) {
  :root[data-theme="light"] .listing-grid > .listing-header {
    grid-column: 3 / span 4;
    grid-row: 1 / span 2;
  }
}

:root[data-theme="light"] .listing-header .breadcrumbs {
  margin: 0;
}

:root[data-theme="light"] .listing-header h1 {
  font-size: 26px;
}

:root[data-theme="light"] .listing-description {
  grid-column: 1 / -1;
}

:root[data-theme="light"] .listing-description p {
  -webkit-line-clamp: 2;
  color: var(--copy);
  font-size: 14px;
}

:root[data-theme="light"] .sort-select {
  grid-column: 1 / -1;
  justify-self: start;
}

:root[data-theme="light"] .sort-select select {
  height: 36px;
  border-color: var(--line);
  background: var(--input)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23182033' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--text);
  font-size: 14px;
}

/* ---------- Game page: the frame sits inside the mosaic ---------- */

/* Stacked (phones/tablets): header row, then the full-width player.
   Wide: the player spans --player-cols columns from --player-col, tiles fill
   the columns on both sides; the ad sits one tile row below the player. */
:root[data-theme="light"] .game-layout {
  --player-col: 1;
  --player-cols: var(--cols);
  --player-row: 2;
  --player-rows: 5;
  max-width: none;
  padding: var(--pad);
}

@media (min-height: 700px) {
  @container portal (min-width: 720px) {
    :root[data-theme="light"] .game-layout {
      --player-rows: 6;
    }
  }
}
@media (max-height: 640px) {
  :root[data-theme="light"] .game-layout {
    --player-rows: 4;
  }
}
@media (min-height: 1040px) {
  :root[data-theme="light"] .game-layout {
    --player-rows: 7;
  }
}

@container portal (min-width: 1068px) {
  :root[data-theme="light"] .game-layout {
    --player-col: 3;
    --player-cols: 7;
    --player-row: 1;
  }
}
@container portal (min-width: 1416px) {
  :root[data-theme="light"] .game-layout {
    --player-cols: 8;
  }
}
@container portal (min-width: 1532px) {
  :root[data-theme="light"] .game-layout {
    --player-cols: 9;
  }
}
@container portal (min-width: 1648px) {
  :root[data-theme="light"] .game-layout {
    --player-cols: 10;
  }
}
@container portal (min-width: 1764px) {
  :root[data-theme="light"] .game-layout {
    --player-col: 4;
    --player-cols: 9;
  }
}
@container portal (min-width: 1880px) {
  :root[data-theme="light"] .game-layout {
    --player-cols: 10;
  }
}
@container portal (min-width: 1996px) {
  :root[data-theme="light"] .game-layout {
    --player-cols: 11;
  }
}
@container portal (min-width: 2112px) {
  :root[data-theme="light"] .game-layout {
    --player-col: 5;
    --player-cols: 10;
  }
}

:root[data-theme="light"] .game-column,
:root[data-theme="light"] .play-next,
:root[data-theme="light"] .play-next-list {
  display: contents;
}

:root[data-theme="light"] .play-next-list > .game-card:nth-child(n + 9) {
  display: block;
}

:root[data-theme="light"] .play-next h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:root[data-theme="light"] .player-section {
  grid-column: var(--player-col) / span var(--player-cols);
  grid-row: var(--player-row) / span var(--player-span, var(--player-rows));
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--tile-radius);
  background: var(--surface);
  box-shadow: var(--tile-shadow);
}

:root[data-theme="light"] .player-frame {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--tile-radius) var(--tile-radius) 0 0;
}

/* Until the game bar is parsed, keep its space, so a paint of the partly
   loaded page shows the frame where it ends up. */
:root[data-theme="light"] .player-section:not(:has(> .game-bar)) > .player-frame {
  margin-bottom: var(--bar-h);
}

:root[data-theme="light"] .player-frame iframe {
  height: calc(
    var(--player-rows) * var(--tile) + (var(--player-rows) - 1) * var(--gap) -
      var(--bar-h)
  );
  min-height: 0;
}

:root[data-theme="light"] .game-bar {
  height: var(--bar-h);
  min-height: 0;
  padding: 0 12px 0 10px;
  border-radius: 0 0 var(--tile-radius) var(--tile-radius);
  background: var(--surface);
}

:root[data-theme="light"] .game-bar-thumb {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(6, 45, 97, 0.25);
}

:root[data-theme="light"] .game-bar-title b {
  color: var(--accent);
  font-size: 21px;
  line-height: 1.15;
}

:root[data-theme="light"] .game-bar-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="light"] .share-status {
  margin: 0;
  padding: 0 14px 10px;
}

/* Ad space under the frame (Supergames puts a 728×90 unit there). The row of
   tiles between the player and this slot keeps it ≥150px below the frame. */
:root[data-theme="light"] .game-ad {
  grid-column: var(--player-col) / span var(--player-cols);
  grid-row: calc(
      var(--player-row) + var(--player-span, var(--player-rows)) + 1
    ) /
    span 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: var(--tile-radius);
  background: rgba(255, 255, 255, 0.16);
}

:root[data-theme="light"] .game-ad > span {
  position: absolute;
  top: 6px;
  left: 10px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 9px;
}

:root[data-theme="light"] .game-ad .adsbygoogle {
  width: 100%;
  max-width: 970px;
}

/* Light: each rail takes two tile columns, with one tile column between it
   and the player (so the unit is 150px+ from the frame). From 1764px the
   mosaic leaves at least three columns on each side of the player. */
@container portal (min-width: 1764px) {
  :root[data-theme="light"] .side-rail {
    display: flex;
    grid-row: var(--player-row) / span var(--player-rows);
    justify-content: center;
    min-width: 0;
  }
  /* The header card holds the top-left corner, so the left rail starts one
     tile row lower. */
  :root[data-theme="light"] .side-rail-left {
    grid-column: calc(var(--player-col) - 3) / span 2;
    grid-row: calc(var(--player-row) + 1) / span var(--player-rows);
  }
  :root[data-theme="light"] .side-rail-right {
    grid-column: calc(var(--player-col) + var(--player-cols) + 1) / span 2;
  }
  :root[data-theme="light"] .side-rail-inner {
    height: 100%;
    min-height: 0;
    width: 100%;
    border-radius: var(--tile-radius);
    background: rgba(255, 255, 255, 0.16);
  }
  :root[data-theme="light"] .side-rail-inner > span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 9px;
  }
}

:root[data-theme="light"] .game-details {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 26px 24px;
}

:root[data-theme="light"] .game-details h1 {
  color: var(--text);
}

:root[data-theme="light"] .game-layout + .portal-main {
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .game-card-link:hover,
  :root[data-theme="light"] .game-card-link:focus-visible,
  :root[data-theme="light"] .collection-tile:hover,
  :root[data-theme="light"] .category-tile:hover {
    transform: none;
  }
}

.sound-button .icon-sound-off,
.sound-button[aria-pressed="true"] .icon-sound-on {
  display: none;
}
.sound-button[aria-pressed="true"] .icon-sound-off {
  display: block;
}