/* ═══════════════════════════════════════════════════════════════════════
   Mognota hub — "Arcade Tiles" game cards
   Loaded by index.html AFTER its inline <style>, so these rules win.

   Only the look changes. Every card keeps its original markup and its
   original buttons (Quick Play / Play a Bot / Custom), so all game-launch
   code, game-config.js (order / lock / hide) and the matchmaking flow work
   exactly as before.

   • Mouse devices  → compact art tile; the buttons slide in on hover.
   • Touch devices  → tap a tile to open a bottom sheet (class .is-open,
                      added by hub-tiles.js) holding the full details + buttons.
   Light/dark colours come from the page variables (see theme.css).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --tile-radius:24px;
  --sheet-bg:#16171d;
  --sheet-handle:rgba(255,255,255,.25);
  --sheet-close-bg:rgba(255,255,255,.08);
  --chip-bg:rgba(255,255,255,.07);
  --chip-fg:#9aa6c4;
  --chip-on-bg:#ffffff;
  --chip-on-fg:#0a0a0d;
  --chip-shadow:none;
}

/* ── Grid ─────────────────────────────────────────────── */
.games-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr));
  gap:16px;
}
@media(max-width:600px){
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* ── Category chips (injected by hub-tiles.js) ─────────── */
.gc-filter{
  display:flex;gap:8px;margin:-6px 0 18px;padding:2px 2px 4px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.gc-filter::-webkit-scrollbar{display:none}
@media(max-width:600px){.gc-filter{margin:-6px 0 14px}}
.gc-chip{
  flex:0 0 auto;border:none;cursor:pointer;
  padding:9px 18px;border-radius:99px;
  font-family:Inter,sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;
  background:var(--chip-bg);color:var(--chip-fg);box-shadow:var(--chip-shadow);
  transition:background .15s,color .15s,transform .1s;white-space:nowrap;
}
.gc-chip:hover{filter:brightness(1.12)}
.gc-chip:active{transform:translateY(1px)}
.gc-chip.on{background:var(--chip-on-bg);color:var(--chip-on-fg)}
.game-card.gc-filtered-out{display:none!important}

/* ── Tile ─────────────────────────────────────────────── */
.games-grid .game-card{
  --t1:#334155;--t2:#0f172a;
  background:linear-gradient(160deg,var(--t1),var(--t2));
  border:none;border-radius:var(--tile-radius);
  min-height:250px;justify-content:flex-end;
  color:#fff;isolation:isolate;
  box-shadow:0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .22s,box-shadow .22s;
  -webkit-user-select:none;user-select:none;
}
@media(max-width:600px){
  .games-grid .game-card{min-height:196px;border-radius:22px}
  /* the 1v1 chip is the common case — drop it from tiny tiles (it is still in the sheet) */
  .game-card:not(.is-open) .tag[data-k="1v1"]{display:none}
}
.games-grid .game-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(0,0,0,.5),0 0 0 2px rgba(255,182,39,.85);
  border-color:transparent;
}
.games-grid .game-card:focus{outline:none}
.games-grid .game-card:focus-visible{box-shadow:0 0 0 3px #ffb627,0 12px 26px rgba(0,0,0,.4)}

/* per-game colours */
.game-card[data-game="carrom"]{--t1:#c9791d;--t2:#4a2508}
.game-card[data-game="lexarena2"]{--t1:#2f6bff;--t2:#0b1b52}
.game-card[data-game="classicChess"]{--t1:#7a4dff;--t2:#1c1050}
.game-card[data-game="anagram2p"]{--t1:#0ea5e9;--t2:#082f49}
.game-card[data-game="schulte"]{--t1:#0f766e;--t2:#042f2e}
.game-card[data-game="memoryMatch"]{--t1:#65a30d;--t2:#1a2e05}
.game-card[data-game="gk2p"]{--t1:#b45309;--t2:#451a03}
.game-card[data-game="mazeFull"]{--t1:#a16207;--t2:#2a1a05}
.game-card[data-game="mazeFog"]{--t1:#4338ca;--t2:#0b0b24}
.game-card[data-game="checkpointChase"]{--t1:#15803d;--t2:#052e16}
.game-card[data-game="slingPuck"]{--t1:#65a30d;--t2:#1a2e05}
.game-card[data-game="football"]{--t1:#059669;--t2:#022c22}
.game-card[data-game="flickFootball"]{--t1:#0891b2;--t2:#083344}
.game-card[data-game="slingFootball"]{--t1:#ea580c;--t2:#431407}
.game-card[data-game="penFight"]{--t1:#e11d48;--t2:#4c0519}
.game-card[data-game="physicsSprint"]{--t1:#0284c7;--t2:#082f49}
.game-card[data-game="biologySprint"]{--t1:#16a34a;--t2:#052e16}
.game-card[data-game="chemistrySprint"]{--t1:#7c3aed;--t2:#2e1065}
.game-card[data-game="mathSprint"]{--t1:#db2777;--t2:#500724}
.game-card[data-game="cityExplorer"]{--t1:#eab308;--t2:#422006}
.game-card[data-game="cubeRace"]{--t1:#c026d3;--t2:#4a044e}
.game-card[data-game="bee"]{--t1:#eab308;--t2:#713f12}
.game-card[data-game="chess"]{--t1:#be185d;--t2:#500724}
.game-card[data-game="chaturaji"]{--t1:#ea580c;--t2:#431407}
.game-card[data-game="ling2p"]{--t1:#059669;--t2:#022c22}
.game-card[data-game="sudoku"]{--t1:#4f46e5;--t2:#1e1b4b}
.game-card[data-game="sudokuTeam"]{--t1:#a21caf;--t2:#4a044e}
.game-card[data-game="linguistics"]{--t1:#ca8a04;--t2:#422006}
.game-card[data-game="gk4p"]{--t1:#6d28d9;--t2:#2e1065}
.game-card[data-game="ling4p"]{--t1:#0284c7;--t2:#0c4a6e}
.game-card[data-game="philosophy"]{--t1:#b91c1c;--t2:#450a0a}
.game-card[data-game="shogi"]{--t1:#92400e;--t2:#3b1a06}
.game-card[data-game="checkers"]{--t1:#e11d48;--t2:#4c0519}
.game-card[data-game="ludo"]{--t1:#1d4ed8;--t2:#172554}
.game-card[data-game="backgammon"]{--t1:#166534;--t2:#052e16}

/* ── Art (the old line icon stays in the DOM as the fallback) ── */
.games-grid .game-card-banner{
  position:absolute;inset:0;height:auto;background:none;
  display:block;font-size:0;overflow:hidden;pointer-events:none;
}
.games-grid .game-card-banner::before,
.games-grid .game-card-banner::after{display:none}
.games-grid .game-card-banner span{
  position:absolute;top:15%;left:50%;
  width:clamp(74px,46%,120px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  transform:translateX(-50%) rotate(-5deg);
  background:center/contain no-repeat;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));
  transition:transform .25s;
}
.games-grid .game-card-banner span svg{width:68%;height:68%;color:rgba(255,255,255,.92)}
.games-grid .game-card:hover .game-card-banner span{transform:translateX(-50%) rotate(-5deg) scale(1.06)}

.game-card[data-game="carrom"] .game-card-banner span{background-image:url(/assets/art/carrom.svg)}
.game-card[data-game="lexarena2"] .game-card-banner span{background-image:url(/assets/art/lex.svg)}
.game-card[data-game="classicChess"] .game-card-banner span{background-image:url(/assets/art/crown.svg)}
.game-card[data-game="anagram2p"] .game-card-banner span{background-image:url(/assets/art/anagram.svg)}
.game-card[data-game="schulte"] .game-card-banner span{background-image:url(/assets/art/schulte.svg)}
.game-card[data-game="memoryMatch"] .game-card-banner span{background-image:url(/assets/art/memory.svg)}
.game-card[data-game="gk2p"] .game-card-banner span{background-image:url(/assets/art/quiz.svg)}
.game-card[data-game="mazeFull"] .game-card-banner span{background-image:url(/assets/art/maze.svg)}
.game-card[data-game="mazeFog"] .game-card-banner span{background-image:url(/assets/art/mazefog.svg)}
.game-card[data-game="checkpointChase"] .game-card-banner span{background-image:url(/assets/art/chase.svg)}
.game-card[data-game="slingPuck"] .game-card-banner span{background-image:url(/assets/art/slingpuck.svg)}
.game-card[data-game="football"] .game-card-banner span{background-image:url(/assets/art/football.svg)}
.game-card[data-game="flickFootball"] .game-card-banner span{background-image:url(/assets/art/flick-football.svg)}
.game-card[data-game="slingFootball"] .game-card-banner span{background-image:url(/assets/art/sling-football.svg)}
.game-card[data-game="penFight"] .game-card-banner span{background-image:url(/assets/art/pen-fight.svg)}
.game-card[data-game="physicsSprint"] .game-card-banner span{background-image:url(/assets/art/physics-sprint.svg)}
.game-card[data-game="biologySprint"] .game-card-banner span{background-image:url(/assets/art/biology-sprint.svg)}
.game-card[data-game="chemistrySprint"] .game-card-banner span{background-image:url(/assets/art/chemistry-sprint.svg)}
.game-card[data-game="mathSprint"] .game-card-banner span{background-image:url(/assets/art/math-sprint.svg)}
.game-card[data-game="cityExplorer"] .game-card-banner span{background-image:url(/assets/art/city-explorer.svg)}
.game-card[data-game="cubeRace"] .game-card-banner span{background-image:url(/assets/art/cube-race.svg)}
.game-card[data-game="bee"] .game-card-banner span{background-image:url(/assets/art/bee.svg)}
.game-card[data-game="chess"] .game-card-banner span{background-image:url(/assets/art/chess4.svg)}
.game-card[data-game="chaturaji"] .game-card-banner span{background-image:url(/assets/art/chaturaji.svg)}
.game-card[data-game="ling2p"] .game-card-banner span{background-image:url(/assets/art/letters.svg)}
.game-card[data-game="sudoku"] .game-card-banner span{background-image:url(/assets/art/sudoku.svg)}
.game-card[data-game="sudokuTeam"] .game-card-banner span{background-image:url(/assets/art/sudoku-team.svg)}
.game-card[data-game="linguistics"] .game-card-banner span{background-image:url(/assets/art/book.svg)}
.game-card[data-game="gk4p"] .game-card-banner span{background-image:url(/assets/art/quiz4.svg)}
.game-card[data-game="ling4p"] .game-card-banner span{background-image:url(/assets/art/letters4.svg)}
.game-card[data-game="philosophy"] .game-card-banner span{background-image:url(/assets/art/thought.svg)}
.game-card[data-game="shogi"] .game-card-banner span{background-image:url(/assets/art/shogi.svg)}
.game-card[data-game="checkers"] .game-card-banner span{background-image:url(/assets/art/checkers.svg)}
.game-card[data-game="ludo"] .game-card-banner span{background-image:url(/assets/art/ludo.svg)}
.game-card[data-game="backgammon"] .game-card-banner span{background-image:url(/assets/art/backgammon.svg)}
/* hide the fallback icon once real art is showing (the icon has an inline display style, hence !important) */
.game-card[data-game="carrom"] .game-card-banner span svg,
.game-card[data-game="lexarena2"] .game-card-banner span svg,
.game-card[data-game="classicChess"] .game-card-banner span svg,
.game-card[data-game="anagram2p"] .game-card-banner span svg,
.game-card[data-game="schulte"] .game-card-banner span svg,
.game-card[data-game="memoryMatch"] .game-card-banner span svg,
.game-card[data-game="gk2p"] .game-card-banner span svg,
.game-card[data-game="mazeFull"] .game-card-banner span svg,
.game-card[data-game="mazeFog"] .game-card-banner span svg,
.game-card[data-game="checkpointChase"] .game-card-banner span svg,
.game-card[data-game="slingPuck"] .game-card-banner span svg,
.game-card[data-game="football"] .game-card-banner span svg,
.game-card[data-game="flickFootball"] .game-card-banner span svg,
.game-card[data-game="slingFootball"] .game-card-banner span svg,
.game-card[data-game="penFight"] .game-card-banner span svg,
.game-card[data-game="physicsSprint"] .game-card-banner span svg,
.game-card[data-game="biologySprint"] .game-card-banner span svg,
.game-card[data-game="chemistrySprint"] .game-card-banner span svg,
.game-card[data-game="mathSprint"] .game-card-banner span svg,
.game-card[data-game="cityExplorer"] .game-card-banner span svg,
.game-card[data-game="cubeRace"] .game-card-banner span svg,
.game-card[data-game="bee"] .game-card-banner span svg,
.game-card[data-game="chess"] .game-card-banner span svg,
.game-card[data-game="chaturaji"] .game-card-banner span svg,
.game-card[data-game="ling2p"] .game-card-banner span svg,
.game-card[data-game="sudoku"] .game-card-banner span svg,
.game-card[data-game="sudokuTeam"] .game-card-banner span svg,
.game-card[data-game="linguistics"] .game-card-banner span svg,
.game-card[data-game="gk4p"] .game-card-banner span svg,
.game-card[data-game="ling4p"] .game-card-banner span svg,
.game-card[data-game="philosophy"] .game-card-banner span svg,
.game-card[data-game="shogi"] .game-card-banner span svg,
.game-card[data-game="checkers"] .game-card-banner span svg,
.game-card[data-game="ludo"] .game-card-banner span svg,
.game-card[data-game="backgammon"] .game-card-banner span svg{display:none!important}

/* ── Tile text (title + tags at the bottom, XP chip top-right) ── */
.games-grid .game-card-body{
  display:block;position:static;flex:0 0 auto;padding:12px 14px 14px;z-index:2;
}
.games-grid .game-card-title{
  font-size:clamp(14px,1.35vw,17px);font-weight:900;letter-spacing:.02em;line-height:1.2;
  color:#fff;margin:0 0 7px;text-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:transform .2s;
}
.games-grid .game-card-desc{display:none}
.games-grid .game-card-tags{
  flex-wrap:wrap;gap:4px 5px;margin:0;transition:opacity .15s;
}
.game-card:not(.is-open) .game-card-tags .tag{
  flex:0 0 auto;background:rgba(0,0,0,.32);border:none;color:rgba(255,255,255,.9);
  font-size:9px;padding:3px 8px;
}
.games-grid .game-card-rewards{
  position:static;margin:0;padding:0;border:0;display:block;
}
.game-card:not(.is-open) .gcr-xp-row{
  position:absolute;top:12px;right:12px;display:flex;gap:4px;z-index:3;
}
.game-card:not(.is-open) .gcr-loss,
.game-card:not(.is-open) .gcr-speed,
.game-card:not(.is-open) .gcr-info-row{display:none}
.game-card:not(.is-open) .gcr-win{
  background:rgba(0,0,0,.38);border:none;color:#fff;font-weight:800;font-size:9.5px;padding:4px 9px;
}
.games-grid .gc-live{margin-bottom:6px}

/* buttons are hidden on the tile itself … */
.game-card:not(.is-open) .game-card-actions,
.game-card:not(.is-open) .game-card-secondary{display:none}

/* hover (mouse): just lift + ring on the tile — the details open on click */
.game-card:not(.is-open) .btn-quick{padding:10px 12px}
.game-card:not(.is-open) .btn-bot,
.game-card:not(.is-open) .btn-join{padding:7px 8px}
/* secondary buttons sit on a coloured tile, so give them a solid dark base */
.game-card:not(.is-open) .btn-join{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.2);color:#fff}
.game-card:not(.is-open) .btn-bot{background:rgba(6,40,24,.78);border-color:rgba(80,200,140,.5);color:#9bf0be}

/* touch: a little press feedback */
@media (hover:none),(pointer:coarse){
  .games-grid .game-card:active{transform:scale(.98)}
  .games-grid .game-card:hover{transform:none;box-shadow:0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2)}
}

/* ── Bottom sheet (touch) ─────────────────────────────── */
#gc-backdrop{
  position:fixed;inset:0;z-index:1100;
  background:rgba(2,5,14,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
#gc-backdrop.open{opacity:1;pointer-events:auto}
html.gc-sheet-open,html.gc-sheet-open body{overflow:hidden}

.games-grid .game-card.is-open{
  position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1200;
  width:min(560px,100%);margin:0 auto;max-height:88vh;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:16px;align-content:start;
  padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));
  border-radius:28px 28px 0 0;
  background:var(--sheet-bg);color:var(--text);
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
  transform:none;cursor:default;
  animation:gcSheetIn .26s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes gcSheetIn{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.game-card.is-open::before{
  content:'';grid-column:1/-1;justify-self:center;
  width:44px;height:5px;border-radius:3px;background:var(--sheet-handle);margin:0 0 16px;
}
.game-card.is-open .gc-sheet-close{
  position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--sheet-close-bg);color:var(--text);font-size:18px;line-height:1;
}
.gc-sheet-close{display:none}
.games-grid .game-card.is-open .game-card-banner{
  position:relative;inset:auto;grid-column:1;grid-row:2 / span 2;
  width:92px;height:92px;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,var(--t1),var(--t2));
}
.games-grid .game-card.is-open .game-card-banner span{
  top:9%;left:9%;width:82%;transform:rotate(-5deg);
}
.games-grid .game-card.is-open .game-card-body{display:contents}
.games-grid .game-card.is-open .game-card-title{
  grid-column:2;grid-row:2;align-self:end;font-size:24px;letter-spacing:.01em;margin:0;
  color:var(--text);text-shadow:none;transform:none;padding-right:34px;
}
.games-grid .game-card.is-open .game-card-desc{
  display:block;grid-column:2;grid-row:3;align-self:start;margin:4px 0 0;
  font-size:13.5px;line-height:1.45;color:var(--text-dim);
}
.games-grid .game-card.is-open .gc-live{grid-column:1/-1}
.games-grid .game-card.is-open .game-card-tags{
  grid-column:1/-1;margin:16px 0 14px;flex-wrap:wrap;overflow:visible;opacity:1;
}
.games-grid .game-card.is-open .game-card-rewards{grid-column:1/-1;margin-bottom:14px;padding-top:12px;border-top:1px solid var(--border)}
.games-grid .game-card.is-open .game-card-actions{grid-column:1/-1;margin:0}
.games-grid .game-card.is-open .game-card-secondary{grid-column:1/-1;margin-top:10px;gap:10px}
.game-card.is-open .btn-quick{padding:16px 12px;font-size:14px;border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 5px 0 #8a6200,0 10px 22px rgba(212,160,23,.28);margin-bottom:5px}
.game-card.is-open .btn-quick:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 #8a6200}
.game-card.is-open .btn-bot,
.game-card.is-open .btn-join{padding:14px 8px;font-size:11.5px;border-radius:12px}

/* ═════════════ Light theme (Settings → Appearance → Light) ═════════════ */
html[data-theme="light"]{
  --sheet-bg:#ffffff;
  --sheet-handle:#d5dae8;
  --sheet-close-bg:#eef1f8;
  --chip-bg:#ffffff;
  --chip-fg:#5b6580;
  --chip-on-bg:#14182b;
  --chip-on-fg:#ffffff;
  --chip-shadow:0 1px 4px rgba(30,40,80,.1);
}
html[data-theme="light"] #gc-backdrop{background:rgba(20,24,43,.42)}
html[data-theme="light"] .games-grid .game-card{
  box-shadow:0 12px 24px rgba(30,40,80,.22),inset 0 1px 0 rgba(255,255,255,.3);
}
html[data-theme="light"] .games-grid .game-card:hover{
  box-shadow:0 18px 36px rgba(30,40,80,.3),0 0 0 2px rgba(245,158,11,.95);
}
html[data-theme="light"] .games-grid .game-card.is-open{box-shadow:0 -20px 60px rgba(20,24,43,.3)}
/* tags / pills inside the sheet need darker ink on white */
html[data-theme="light"] .game-card.is-open .tag-team{background-color:rgba(41,121,255,.1);border-color:rgba(41,121,255,.3);color:#1d4ed8}
html[data-theme="light"] .game-card.is-open .tag-live{background-color:rgba(244,124,0,.12);border-color:rgba(244,124,0,.35);color:#c2410c}
html[data-theme="light"] .game-card.is-open .tag-words{background-color:rgba(147,51,234,.1);border-color:rgba(147,51,234,.3);color:#7e22ce}
html[data-theme="light"] .game-card.is-open .tag-logic{background-color:rgba(0,160,70,.1);border-color:rgba(0,160,70,.3);color:#15803d}
html[data-theme="light"] .game-card.is-open .tag-strategy{background-color:rgba(30,40,80,.06);border-color:rgba(30,40,80,.18);color:#475569}
html[data-theme="light"] .game-card.is-open .tag-ffa{background-color:rgba(202,138,4,.12);border-color:rgba(202,138,4,.35);color:#a16207}
html[data-theme="light"] .game-card.is-open .gcr-win{color:#15803d;background-color:rgba(0,160,70,.1);border-color:rgba(0,160,70,.28)}
html[data-theme="light"] .game-card.is-open .gcr-loss{color:#c2410c;background-color:rgba(244,124,0,.1);border-color:rgba(244,124,0,.28)}
html[data-theme="light"] .game-card.is-open .gcr-speed{color:#a16207;background-color:rgba(212,160,23,.12);border-color:rgba(212,160,23,.3)}
html[data-theme="light"] .game-card.is-open .gcr-value{color:#3b4158}
html[data-theme="light"] .game-card.is-open .gc-live{color:#15803d}
html[data-theme="light"] .game-card.is-open .btn-join{background:#eef1f8;border-color:rgba(30,40,80,.14);color:var(--text);box-shadow:none}
html[data-theme="light"] .game-card.is-open .btn-bot{background:rgba(34,150,90,.12);border-color:rgba(34,150,90,.4);color:#15803d;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .games-grid .game-card,.game-card-banner span,.games-grid .game-card.is-open{transition:none;animation:none}
}

/* ── Locked tiles (admin layout, game-config.js) ───────────
   game-config.js dims the card's children with a CSS filter, which would make
   the absolutely-positioned XP chip jump to the wrong corner — a locked game
   doesn't need it, so just hide it. */
.game-card.gc-locked .gcr-xp-row{display:none}
.game-card.gc-locked .gc-lock{border-radius:inherit;background:rgba(7,10,18,.62)}


/* ── Mouse devices: the detail card is a centred popup instead of a bottom sheet ── */
@media (hover:hover) and (pointer:fine){
  .games-grid .game-card.is-open{
    inset:0;margin:auto;height:fit-content;width:min(540px,92vw);max-height:90vh;
    border-radius:28px;padding:26px 28px 28px;
    box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);
    animation:gcPopIn .22s cubic-bezier(.2,.8,.3,1) both;
  }
  .game-card.is-open::before{display:none}
  .game-card.is-open .gc-sheet-close{top:16px;right:18px}
  .game-card.is-open .gc-sheet-close:hover{filter:brightness(1.2)}
  .games-grid .game-card.is-open .game-card-banner{width:104px;height:104px}
  .games-grid .game-card.is-open .game-card-title{font-size:28px}
  .games-grid .game-card.is-open .game-card-desc{font-size:14.5px}
  .games-grid .game-card.is-open{grid-template-columns:104px minmax(0,1fr)}
  /* no drag handle in row 1 here, so move the header rows up */
  .games-grid .game-card.is-open .game-card-banner{grid-row:1 / span 2}
  .games-grid .game-card.is-open .game-card-title{grid-row:1}
  .games-grid .game-card.is-open .game-card-desc{grid-row:2}
  .games-grid .game-card.is-open .game-card-tags{margin:20px 0 14px}
}
@keyframes gcPopIn{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
html[data-theme="light"] .games-grid .game-card.is-open{box-shadow:0 30px 80px rgba(20,24,43,.4)}

/* ═══════════════════════════════════════════════════════════════════════
   Detail card — stat boxes + soft action buttons (phone sheet & desktop popup)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --stat-bg:rgba(255,255,255,.06);
  --stat-label:#8d99b8;
  --soft-btn-bg:rgba(255,255,255,.08);
  --soft-btn-fg:var(--text);
}
html[data-theme="light"]{
  --stat-bg:#f2f4fa;
  --stat-label:#6b7490;
  --soft-btn-bg:#eef1f8;
}

/* generated stat boxes: only inside the open card */
.gc-stats{display:none}
.game-card.is-open .gc-stats{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:2px;
}
.game-card.is-open .gcr-xp-row,
.game-card.is-open .gcr-info-row{display:none}
.game-card.is-open .game-card-rewards{border-top:0;padding-top:0}
.gc-stat{
  background:var(--stat-bg);border-radius:16px;padding:12px 13px;min-width:0;
  display:flex;flex-direction:column;gap:3px;
}
.gc-stat-l{font-family:Inter,sans-serif;font-size:12px;font-weight:600;color:var(--stat-label);letter-spacing:0;text-transform:none}
.gc-stat-v{font-family:Inter,sans-serif;font-size:17px;font-weight:900;color:var(--text);line-height:1.2}
.gc-s-trains .gc-stat-v,.gc-s-builds .gc-stat-v{font-size:13.5px;font-weight:800;line-height:1.3}
/* phone sheet: Win · Loss · Trains (like the mockup) — Trains shows its first two skills */
.gc-s-win,.gc-s-loss,.gc-s-trains{grid-column:span 2}
.gc-s-speed,.gc-s-builds{display:none}
.gc-v-full{display:none}
/* the box colour hints */
.gc-s-win .gc-stat-v{color:#16a34a}
.gc-s-loss .gc-stat-v{color:#ea580c}
html:not([data-theme="light"]) .gc-s-win .gc-stat-v{color:#4ade80}
html:not([data-theme="light"]) .gc-s-loss .gc-stat-v{color:#fb923c}

/* Play a Bot + Custom: equal soft buttons with icons (replaces the green bot button) */
.game-card.is-open .game-card-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.game-card.is-open .btn-bot,
.game-card.is-open .btn-join{
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:54px;padding:0 12px;border-radius:16px;
  background:var(--soft-btn-bg);border:0;box-shadow:none;
  color:var(--soft-btn-fg);
  font-family:Inter,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;
  transition:filter .15s,transform .1s;
}
.game-card.is-open .btn-bot:hover,
.game-card.is-open .btn-join:hover{filter:brightness(1.12);background:var(--soft-btn-bg)}
.game-card.is-open .btn-bot:active,
.game-card.is-open .btn-join:active{transform:translateY(1px)}
.game-card.is-open .btn-bot img{display:none}
.game-card.is-open .btn-bot::before,
.game-card.is-open .btn-join::before{
  content:'';flex:none;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.game-card.is-open .btn-bot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 4v4M9 13v2M15 13v2'/%3E%3C/svg%3E")}
.game-card.is-open .btn-join{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3C/svg%3E")}
/* light theme: undo the earlier green/grey overrides for these two */
html[data-theme="light"] .game-card.is-open .btn-bot,
html[data-theme="light"] .game-card.is-open .btn-join{background:var(--soft-btn-bg);color:var(--text);border:0}

/* ── Desktop popup: wider, with the extra detail ── */
@media (hover:hover) and (pointer:fine){
  .games-grid .game-card.is-open{width:min(620px,92vw)}
  .game-card.is-open .gc-stats{gap:12px}
  /* Win · Loss · Speed bonus on the first row, Trains · Builds (full lists) on the second */
  .gc-s-win,.gc-s-loss,.gc-s-speed{display:flex;grid-column:span 2}
  .gc-s-trains,.gc-s-builds{display:flex;grid-column:span 3}
  .gc-s-trains .gc-v-short,.gc-s-builds .gc-v-short{display:none}
  .gc-s-trains .gc-v-full,.gc-s-builds .gc-v-full{display:inline}
  .gc-stat{padding:14px 16px}
  .gc-stat-v{font-size:19px}
  .gc-s-trains .gc-stat-v,.gc-s-builds .gc-stat-v{font-size:14px}
  /* when a game has no speed bonus, Win and Loss share the row */
  .game-card.is-open .gc-stats:not(:has(.gc-s-speed)) .gc-s-win,
  .game-card.is-open .gc-stats:not(:has(.gc-s-speed)) .gc-s-loss{grid-column:span 3}
}

/* ═══════════════════════════════════════════════════════════════════════
   XP info is hidden for now (tile chips + Win / Loss / Speed-bonus boxes).
   The XP text is still in index.html and the boxes are still built by
   hub-tiles.js — to bring it all back, delete this whole block.
   ═══════════════════════════════════════════════════════════════════════ */
.game-card .gcr-xp-row{display:none!important}
.gc-s-win,.gc-s-loss,.gc-s-speed{display:none!important}
/* Trains / Builds take the room the XP boxes left */
.gc-s-trains{grid-column:1 / -1}
@media (hover:hover) and (pointer:fine){
  .gc-s-trains,.gc-s-builds{grid-column:span 3}
}

/* ══ Log in / Sign up — easy to find for new visitors ═══════════════════ */
/* header buttons: real pills, bold, comfortably tappable */
html body .nav-auth-btns{gap:10px}
html body .nav-login-btn,html body .nav-signup-btn{
  height:40px;padding:0 22px;border-radius:999px;font:800 13px Inter,sans-serif;letter-spacing:.01em;white-space:nowrap;
}
html body .nav-login-btn{background:rgba(127,140,171,.16);border:0;color:var(--text)}
html body .nav-login-btn:hover{background:rgba(127,140,171,.28);color:var(--text)}
html body .nav-signup-btn{background:#d4a017;border:0;color:#0a0a0d;box-shadow:0 6px 16px rgba(212,160,23,.35)}
html body .nav-signup-btn:hover{background:#e8b52a;box-shadow:0 8px 20px rgba(212,160,23,.45)}
@media(max-width:640px){
  html body .nav-auth-btns{gap:6px}
  html body .nav-login-btn,html body .nav-signup-btn{height:36px;padding:0 14px;font-size:12.5px}
}

/* welcome card for guests (top of the game list) */
.guest-cta{
  position:relative;display:flex;align-items:center;gap:16px;margin:0 0 22px;padding:16px 52px 16px 16px;border-radius:24px;
  background:linear-gradient(150deg,#7a4dff,#1c1050);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(28,16,80,.35);
  color:#fff;overflow:hidden;
}
.guest-cta::after{ /* soft glow in the corner */
  content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
}
.guest-cta-art{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.guest-cta-art svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.guest-cta-txt{flex:1;min-width:0}
.guest-cta-title{font:900 18px/1.2 Inter,sans-serif;color:#fff}
.guest-cta-sub{margin-top:4px;font:600 13px/1.45 Inter,sans-serif;color:rgba(255,255,255,.82)}
.guest-cta-sub b{color:#fff;font-weight:800}
.guest-cta-btns{flex:none;display:flex;gap:10px;position:relative;z-index:1}
.guest-cta-signup,.guest-cta-login{height:44px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;font:800 14px Inter,sans-serif;white-space:nowrap}
.guest-cta-signup{background:#d4a017;color:#0a0a0d;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.guest-cta-signup:hover{background:#e8b52a}
.guest-cta-login{background:rgba(255,255,255,.16);color:#fff}
.guest-cta-login:hover{background:rgba(255,255,255,.28)}
.guest-cta-x{position:absolute;top:10px;right:10px;width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.guest-cta-x:hover{background:rgba(255,255,255,.26)}
.guest-cta-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media(max-width:640px){
  .guest-cta{flex-wrap:wrap;gap:12px;margin:0 0 16px;padding:14px 46px 14px 14px;border-radius:22px}
  .guest-cta-art{width:44px;height:44px}.guest-cta-art svg{width:22px;height:22px}
  .guest-cta-title{font-size:16px}.guest-cta-sub{font-size:12.5px}
  .guest-cta-btns{flex:1 1 100%}
  .guest-cta-signup,.guest-cta-login{flex:1;height:42px;padding:0 12px}
}

/* City Explorer is a solo game: no invite / share-to-play link exists for it */
.game-card[data-game="cityExplorer"] .gc-share{display:none!important}
/* the Play button of a solo game needs no login, so it never shows the Quick Play "loading" spinner */
.btn-solo.is-loading{opacity:1;cursor:pointer}
.btn-solo.is-loading::before{display:none!important}