/* ============================================================
   IndicannGames — shared site styles
   Surface: Explore (home = game catalog), Operate (game pages),
   Configure (account). One dark-green system, green + gold accents.
   ============================================================ */

:root {
  --bg: #0a0f0b;
  --bg-soft: #0d140e;
  --surface: #111a13;
  --surface-2: #17241a;
  --border: #22352a;
  --border-strong: #33513c;
  --ink: #ecf4ea;
  --muted: #9fb4a1;
  --faint: #6d8272;
  --green: #4ade80;
  --green-deep: #1d9e4d;
  --gold: #fbbf24;
  --purple: #a78bfa;
  --red: #f87171;
  --radius: 14px;
  --radius-sm: 9px;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(74, 222, 128, 0.07), transparent 65%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

::selection { background: rgba(74, 222, 128, 0.3); }

a { color: var(--green); }

h1, h2, h3 { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* ---------- nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 22px;
  min-height: 64px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 16.5px;
  letter-spacing: 0.01em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.brand svg { width: 25px; height: 25px; color: var(--green); flex: none; }
.brand em { font-style: normal; color: var(--green); }

.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  padding: 8px 12px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
  font-weight: 500; font-size: 14.5px;
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.active { color: var(--green); }

.nav-user { display: flex; align-items: center; gap: 10px; }
.user-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 5px 12px 5px 8px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: var(--surface);
}
.user-chip svg { width: 14px; height: 14px; color: var(--green); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1.2 var(--font-body);
  color: #07130a; background: var(--green);
  border: 1px solid transparent; border-radius: 10px;
  padding: 11px 20px; cursor: pointer; text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.btn:hover { background: #6ce99a; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--faint); }
.btn-gold { background: var(--gold); color: #201503; }
.btn-gold:hover { background: #fcd34d; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 8px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* fullscreen toggle — a small icon-only button floating over the game
   stage on every game page, bottom-right. It lives inside the stage
   (never in a nav link) so it stays visible while the stage is
   fullscreen, and a click can't trigger navigation. */
.fs-toggle {
  position: absolute; bottom: 10px; right: 10px; z-index: 999;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: #e6edf7; background: rgba(7, 11, 8, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%;
  backdrop-filter: blur(6px);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fs-toggle svg { width: 16px; height: 16px; display: block; }
.fs-toggle .ic-compress { display: none; }
.fs-toggle[aria-pressed="true"] .ic-expand { display: none; }
.fs-toggle[aria-pressed="true"] .ic-compress { display: block; }
.fs-toggle:hover { color: #fff; border-color: var(--green); }
.fs-toggle[aria-pressed="true"] { color: var(--green); border-color: var(--green); }
@media (pointer:coarse) {
  .fs-toggle[aria-pressed="true"] {
    width:auto; min-width:44px; height:40px; gap:7px; padding:0 11px; border-radius:999px;
  }
  .fs-toggle[aria-pressed="true"]::after {
    content:'Windowed'; font:700 11px/1 var(--font-body); white-space:nowrap;
  }
}

/* only the game stage goes fullscreen — it needs a positioned box for the
   toggle to float over, and drops its frame once it owns the screen */
[data-fs-stage] { position: relative; }
[data-fs-stage]:fullscreen { border: 0; border-radius: 0; }
[data-fs-stage]:fullscreen {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  min-height: 0; margin: 0; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: auto; background: #080d09; box-sizing: border-box;
}

/* iPhone Safari does not consistently expose the Fullscreen API for ordinary
   elements. On a mobile start tap, make the game stage own the visible
   viewport and hide the page behind it. Browser chrome remains browser-owned. */
html.game-immersive,
body.game-immersive { overflow: hidden; overscroll-behavior: none; }
body.game-immersive [data-fs-stage] {
  position: fixed !important; inset: 0 !important; z-index: 1000 !important;
  width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important; min-height: 0 !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  overflow: auto; background: #080d09; box-sizing: border-box;
}

/* ---------- home ---------- */
.home-head {
  display: grid; grid-template-columns: 1.35fr 0.65fr;
  gap: 32px; align-items: end;
  padding: 56px 0 36px;
}
.wordmark {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 8.5vw, 72px);
  line-height: 0.98; letter-spacing: -0.01em;
  margin: 0;
}
.wordmark .alt { color: var(--green); }
.tagline {
  font-size: 17.5px; color: var(--muted);
  max-width: 46ch; margin: 16px 0 0;
}
.tagline strong { color: var(--ink); font-weight: 600; }
.head-leaf {
  display: flex; justify-content: flex-end; align-items: flex-end;
}
.head-leaf svg {
  width: clamp(120px, 18vw, 210px); height: auto;
  color: var(--green-deep); opacity: 0.85;
  transform: rotate(14deg);
  animation: leafSway 7s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes leafSway {
  0%, 100% { transform: rotate(11deg); }
  50% { transform: rotate(18deg); }
}

/* ---------- mascot art (keyed to transparent PNGs) ---------- */
.mascot {
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}
.head-leaf .mascot {
  width: 100%; max-width: 270px; height: auto; display: block;
  transform: rotate(-2deg);
  transition: transform 0.35s ease;
}
.head-leaf:hover .mascot { transform: rotate(2deg) scale(1.02); }
.wordmark-strip { display: flex; justify-content: center; padding: 8px 0 28px; }
.wordmark-strip img { width: 100%; max-width: 460px; height: auto; }
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.crew-card {
  position: relative; margin:0; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #040705;
}
.crew-card img { width: 100%; height: auto; display: block; }
.crew-card figcaption {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px);
  background: rgba(4, 7, 5, 0.88); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 14px;
  font: 600 12px var(--font-display); letter-spacing: 0.05em; color: var(--ink);
}
.crew-card figcaption span { color: var(--muted); font-family: var(--font); font-weight: 400; letter-spacing: 0; }
.game-mascot {
  width: 108px; height: auto; display: block; flex: 0 0 auto;
  transform: rotate(2.5deg); opacity: 0.96;
  position: absolute; top: 10px; right: 0;
}
.foot-badge {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  display: inline-block; vertical-align: middle; margin-right: 8px;
}
.acct-banner { display: flex; justify-content: center; padding: 26px 0 4px; }
.acct-banner img { width: 100%; max-width: 380px; height: auto; }

/* ---------- difficulty picker ---------- */
.diff-row {
  display: flex; justify-content: center; gap: 8px;
  margin: 0 auto 14px; flex-wrap: wrap;
}
.diff-btn {
  font: 600 11px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 18px; cursor: pointer; transition: all 0.15s ease;
}
.diff-btn:hover { color: var(--ink); border-color: var(--muted); }
.diff-btn.on {
  color: #0a0f0b; background: var(--gc, var(--green)); border-color: var(--gc, var(--green));
  font-weight: 700;
}

.sec-label {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  margin: 8px 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.games-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; padding-bottom: 56px;
}
.game-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.game-card:hover { border-color: var(--gc, var(--green)); transform: translateY(-2px); }
.gc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gc-num { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--faint); }
.gc-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gc, var(--green));
  border: 1px solid color-mix(in srgb, var(--gc, var(--green)) 45%, transparent);
  padding: 3px 9px; border-radius: 999px;
}
.gc-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; margin: 12px 0 6px;
}
.featured .gc-name { font-size: 24px; }
.gc-desc { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px; }
.featured .gc-desc { font-size: 15.5px; line-height: 1.55; }
.gc-foot {
  margin-top: auto; display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
}
.gc-best { font-size: 13px; color: var(--faint); }
.gc-play {
  font-weight: 600; font-size: 14.5px; color: var(--gc, var(--green));
  display: inline-flex; align-items: center; gap: 6px;
}
.gc-play::after { content: '\2192'; transition: transform 0.15s ease; }
.game-card:hover .gc-play::after { transform: translateX(3px); }

.strip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px;
  display: flex; gap: 18px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-top: 24px; margin-bottom: 64px;
}
.strip p { margin: 0; color: var(--muted); font-size: 15px; max-width: 56ch; }
.strip p strong { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--border);
  padding: 26px 0 34px;
  color: var(--faint); font-size: 13px;
}
.site-foot .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot .foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.site-foot .foot-brand svg { width: 15px; height: 15px; color: var(--green); }

/* ---------- game pages ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  margin: 14px 0 4px;
}
.back-link:hover { color: var(--ink); }

.game-head {
  display: flex; gap: 28px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
  padding: 6px 0 12px;
  position: relative;
}
.gh-tagrow { display: flex; align-items: center; gap: 12px; }
.gh-num { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--faint); }
.game-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4.4vw, 42px); margin: 8px 0 6px; line-height: 1.05;
}
.gh-tagline { color: var(--muted); margin: 0; font-size: 15.5px; }

/* how-to sits below the play area so the game owns the whole first view */
.howto {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 15px 18px;
  max-width: 760px; margin: 20px auto 16px; font-size: 14px; color: var(--muted);
}
.howto h2 {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gc, var(--green));
  margin: 0 0 8px;
}
.howto ul { margin: 0; padding-left: 18px; }
.howto li { margin: 4px 0; }
.howto b { color: var(--ink); font-weight: 600; }

.play-zone { margin: 4px 0 24px; }
.play-wrap { position: relative; }

canvas.game-canvas {
  display: block; width: min(100%, 760px); height: auto; max-height: min(70vh, 620px); object-fit: contain; margin-inline: auto;
  background: #0c130d;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hud {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-bottom: 10px;
  font-family: var(--font-display); font-size: 13.5px; color: var(--muted);
  flex-wrap: wrap;
}
.hud .stat b { color: var(--ink); font-weight: 700; }
.hud .stat .hot { color: var(--green); }
.hud .stat .gold { color: var(--gold); }
.fx-chip {
  display: inline-block; margin: 0 6px 0 0; padding: 2px 9px;
  border: 1px solid; border-radius: 999px;
  font: 600 11px var(--font-body); letter-spacing: 0.06em;
  vertical-align: middle;
}
.match-fx, .whack-fx {
  position: absolute; top: -4px; left: 0; right: 0; z-index: 4;
  text-align: center; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  opacity: 0; transition: opacity 0.2s ease;
}
.match-fx.show, .whack-fx.show { opacity: 1; }

.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(7, 11, 8, 0.88);
  border-radius: inherit; text-align: center; padding: 22px;
}
[hidden] { display: none !important; }
.overlay[hidden] { display: none; }
.ov-kicker {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gc, var(--green)); margin: 0 0 10px;
}
.ov-title { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 32px); margin: 0 0 8px; line-height: 1.1; }
.ov-score { font-family: var(--font-display); font-size: clamp(30px, 5vw, 48px); color: var(--gold); margin: 6px 0 10px; }
.ov-sub { color: var(--muted); max-width: 46ch; margin: 0 auto 18px; font-size: 15px; }
.ov-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* scoreboards */
.board-row {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 16px; margin: 8px 0 56px;
}
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.panel h2 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 14px;
}
.your-best { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.your-best b { color: var(--gold); font-weight: 700; }
.save-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.save-row .field { flex: 1; min-width: 150px; margin: 0; }
table.boards { width: 100%; border-collapse: collapse; font-size: 14px; }
.boards td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.boards tr:last-child td { border-bottom: 0; }
.boards .rank { color: var(--faint); width: 26px; font-family: var(--font-display); font-size: 12px; }
.boards .who { color: var(--muted); font-weight: 500; }
.boards .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.boards tr.you .who, .boards tr.you .num { color: var(--green); }
.boards td.empty { color: var(--faint); padding: 14px 0; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input {
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 11px 13px;
  color: var(--ink); font: 500 15px var(--font-body); width: 100%;
}
.field input::placeholder { color: var(--faint); }
.field input:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: transparent; }
.field input[disabled] { opacity: 0.55; }
.err { color: var(--red); font-size: 13px; min-height: 1em; margin: 2px 0 0; }
.form-done {
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; margin-bottom: 14px;
}
.form-done[hidden] { display: none; }

/* ---------- account page ---------- */
.acct-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; padding: 32px 0 64px; align-items: start;
}
.tabs {
  display: flex; gap: 4px; background: var(--bg-soft);
  border: 1px solid var(--border); padding: 4px; border-radius: 11px;
  margin-bottom: 22px;
}
.tab {
  flex: 1; padding: 9px; border: 0; background: transparent;
  color: var(--muted); font: 600 14px var(--font-body);
  border-radius: 8px; cursor: pointer;
}
.tab.active { background: var(--surface-2); color: var(--ink); }
.panel-sub { color: var(--muted); font-size: 13.5px; margin: -6px 0 18px; }

.profile-empty { color: var(--muted); font-size: 14.5px; margin: 0; max-width: 38ch; }
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.profile-avatar {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  display: grid; place-items: center; color: var(--green);
}
.profile-avatar svg { width: 26px; height: 26px; }
.profile-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0; }
.profile-mail { color: var(--faint); font-size: 13px; margin: 0; }
.dank-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  color: var(--gold); border-radius: 999px; padding: 5px 13px;
  font-size: 13px; font-weight: 600; margin: 12px 0 18px;
}
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stat-table td { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.stat-table td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-table tr:last-child td { border-bottom: 0; }
.stat-table td.zero { color: var(--faint); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .games-grid { grid-template-columns: 1fr 1fr; }
  .head-leaf { display: none; }
  .crew { grid-template-columns: repeat(2, 1fr); }
  .game-mascot { display: none; }
  .acct-banner { display: none; }
  .game-card.featured { grid-column: span 2; }
  .board-row, .acct-grid { grid-template-columns: 1fr; }
  .home-head { grid-template-columns: 1fr; gap: 20px; padding-top: 40px; }
  .diff-btn { padding: 11px 20px; }
  .howto { max-width: none; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .games-grid .game-card:nth-child(7) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .game-head { gap:12px; padding:2px 0 8px; }
  .game-head h1 { font-size:clamp(26px,7vw,34px); margin:5px 0; }
  .gh-tagline { font-size:13px; line-height:1.4; }
  .games-grid { grid-template-columns: 1fr; }
  .game-card.featured { grid-column: span 1; }
  .games-grid .game-card:nth-child(6) { grid-column: auto; }
  .games-grid .game-card:nth-child(7) { grid-column: auto; }
  .nav-links { order: 3; width: 100%; margin-left: 0; padding-bottom: 8px; }
  .crew { grid-template-columns: 1fr; }
  .crew-card figcaption { border-radius: 10px; }
  .crew-card figcaption span { display: block; margin-top: 2px; }
}

@media (max-width: 860px) {
  .container { width: min(100% - 24px, 1120px); }
  /* Let the play surface use the screen width rather than inheriting the
     extra text-column padding from the page container. */
  .play-zone { margin: 0 -20px 16px; }
  .hud { gap: 7px 12px; font-size: 12px; }
  canvas.game-canvas { width: 100%; max-height: 60vh; }
  [data-fs-stage]:fullscreen canvas,
  [data-fs-stage]:fullscreen .game-app { max-width: 100%; max-height: 100%; }
  [data-fs-stage]:fullscreen .fs-toggle { bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
}
@media (min-width: 861px) {
  .play-zone { max-width: 760px; margin-inline: auto; }
  .howto { max-width: 460px; }
  .game-head { padding-right: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* back-to-shop banner (site tab) */
.icg-shop-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 20px; background: rgba(251,191,36,.08); border-bottom: 1px solid rgba(251,191,36,.25);
  color: var(--muted); font-size: 13.5px;
}
.icg-shop-banner a { color: var(--gold); font-weight: 600; text-decoration: none; }
.icg-shop-banner a:hover { text-decoration: underline; }

/* ---------- games tab home (uses the main-site chrome) ---------- */
.tab-head {
  display: grid; grid-template-columns: 1.35fr 0.65fr;
  gap: 32px; align-items: end;
  padding: 48px 0 36px;
}
.tab-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 5vw, 52px); line-height: 1.05;
  margin: 10px 0 0;
}
.tab-title .alt { color: var(--green); }
.tab-sub { font-size: 16.5px; color: var(--muted); max-width: 54ch; margin: 14px 0 0; }
.tab-sub b { color: var(--ink); font-weight: 600; }
.strip .strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .tab-head { grid-template-columns: 1fr; gap: 20px; padding-top: 36px; }
}

/* ---------- arcade landing-page refresh ---------- */
body[data-page="games"] {
  background: radial-gradient(ellipse 70% 440px at 68% 110px, rgba(74,222,128,.10), transparent 72%),
    radial-gradient(ellipse 55% 420px at 4% 52%, rgba(251,191,36,.035), transparent 76%), var(--bg);
}
body[data-page="games"] main > .container { max-width: 1220px; }
body[data-page="games"] .icg-shop-banner { justify-content: center; padding: 10px 20px; }
body[data-page="games"] .games-hero {
  position: relative; min-height: 325px; grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr);
  align-items: center; gap: 22px; padding: 46px 36px 38px; margin: 24px 0 36px;
  overflow: hidden; border: 1px solid rgba(74,222,128,.2); border-radius: 24px;
  background: linear-gradient(112deg,rgba(14,25,16,.98) 0%,rgba(15,29,18,.92) 50%,rgba(17,26,19,.68) 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
body[data-page="games"] .games-hero::before { content:""; position:absolute; width:390px; height:390px; top:-225px; left:-115px; border:1px solid rgba(74,222,128,.11); border-radius:50%; box-shadow:0 0 0 34px rgba(74,222,128,.025),0 0 0 72px rgba(74,222,128,.02); pointer-events:none; }
body[data-page="games"] .games-hero > div:first-child { position:relative; z-index:1; }
body[data-page="games"] .games-hero .sec-label { justify-content:flex-start; margin:0 0 15px; color:var(--green); font-size:10px; letter-spacing:.17em; }
body[data-page="games"] .games-hero .sec-label::after { display:none; }
.live-mark { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border:1px solid var(--border-strong); border-radius:999px; color:var(--muted); font:600 10px var(--font-body); letter-spacing:.02em; }
.live-mark::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
body[data-page="games"] .tab-title { max-width:740px; font-size:clamp(34px,5.1vw,60px); line-height:1.1; letter-spacing:-.045em; }
body[data-page="games"] .catchphrase { max-width:52ch; margin:14px 0 0; color:var(--muted); font-size:16px; }
.games-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.games-hero-actions .btn { min-height:44px; }
.games-shortcuts { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.games-shortcuts a { padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); text-decoration:none; font-size:11px; transition:color .15s,border-color .15s,background .15s; }
.games-shortcuts a:hover { color:var(--ink); border-color:var(--border-strong); background:rgba(255,255,255,.035); }
body[data-page="games"] .head-leaf { justify-content:center; align-self:stretch; min-height:230px; position:relative; }
body[data-page="games"] .head-leaf::before { content:""; position:absolute; width:min(29vw,280px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(74,222,128,.2),rgba(74,222,128,.035) 58%,transparent 70%); }
body[data-page="games"] .head-leaf .mascot { position:relative; width:min(100%,300px); max-width:300px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); animation:arcadeFloat 6s ease-in-out infinite; }
@keyframes arcadeFloat { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-8px) rotate(1deg); } }
.games-section-heading { display:flex; justify-content:space-between; align-items:end; gap:14px; margin:0 0 16px; }
.games-section-heading .eyebrow { margin:0 0 4px; color:var(--green); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.games-section-heading .sec-label { margin:0; color:var(--ink); font-size:clamp(17px,2vw,22px); letter-spacing:-.015em; }
.games-section-heading .sec-label::after { display:none; }
.section-note { padding-bottom:3px; color:var(--faint); font-size:12px; text-align:right; }
body[data-page="games"] #games { scroll-margin-top:86px; }
body[data-page="games"] .games-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-bottom:48px; }
body[data-page="games"] .game-card { min-height:208px; padding:19px; border-radius:16px; background:linear-gradient(150deg,rgba(20,31,22,.96),rgba(14,21,15,.98)); box-shadow:0 10px 24px rgba(0,0,0,.12); }
body[data-page="games"] .game-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--gc),transparent 75%); opacity:.72; }
body[data-page="games"] .game-card:hover { transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.22); }
body[data-page="games"] .gc-num { color:var(--gc); opacity:.85; }
body[data-page="games"] .gc-name { margin:13px 0 7px; font-size:17px; }
body[data-page="games"] .gc-desc { min-height:3em; margin-bottom:18px; font-size:13px; line-height:1.5; }
body[data-page="games"] .gc-foot { padding-top:11px; border-top:1px solid rgba(255,255,255,.055); }
body[data-page="games"] .gc-best { font-size:11px; }
body[data-page="games"] .gc-play { font-size:12px; }
body[data-page="games"] #prizes, body[data-page="games"] #crew, body[data-page="games"] #music { padding-top:14px; scroll-margin-top:84px; }
body[data-page="games"] .prizes-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
body[data-page="games"] .prize-card { min-width:0; padding:14px; border-radius:14px; background:linear-gradient(145deg,rgba(20,31,22,.9),rgba(14,21,15,.95)); }
body[data-page="games"] .prize-icon { font-size:25px; }
body[data-page="games"] .prize-body h3 { font-size:12px; }
body[data-page="games"] .prize-body p { font-size:11px; line-height:1.4; }
body[data-page="games"] .prize-cost { padding:5px 8px; font-size:10px; }
body[data-page="games"] .prizes-cta { margin:13px 0 34px; }
body[data-page="games"] .crew { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:38px; }
body[data-page="games"] .crew-card { border-radius:18px; background:linear-gradient(180deg,rgba(20,32,22,.95),rgba(8,12,9,.98)); }
body[data-page="games"] .crew-card img { aspect-ratio:1.18; object-fit:contain; padding:10px 18px 0; transition:transform .25s ease; }
body[data-page="games"] .crew-card:hover img { transform:translateY(-4px) scale(1.035); }
body[data-page="games"] .crew-card figcaption { position:static; max-width:none; margin:0; padding:14px 17px 16px; border:0; border-top:1px solid rgba(255,255,255,.07); border-radius:0; background:rgba(0,0,0,.16); text-align:left; font-size:12px; line-height:1.45; }
body[data-page="games"] .crew-card figcaption span { display:block; margin-top:4px; font-size:12px; }
body[data-page="games"] #music-games { padding:17px; border:1px solid var(--border); border-radius:17px; background:linear-gradient(130deg,rgba(20,31,22,.96),rgba(12,18,13,.98)); }
body[data-page="games"] .strip { margin-top:30px; border-radius:17px; border-color:rgba(74,222,128,.22); background:linear-gradient(110deg,rgba(74,222,128,.07),var(--surface) 50%); }
body[data-page="games"] .strip p { font-size:13px; }
body[data-page="games"] .strip p b { color:var(--gold); }

@media (max-width: 860px) {
  body[data-page="games"] .games-hero .head-leaf { display:none !important; }
  body[data-page="games"] .games-hero { min-height:0; grid-template-columns:minmax(0,1fr); padding:32px 25px; }
  body[data-page="games"] .head-leaf { min-height:190px; }
  body[data-page="games"] .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="games"] .prizes-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="games"] .crew { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
}
@media (max-width: 560px) {
  body[data-page="games"] main > .container { padding-inline:15px; }
  body[data-page="games"] .games-hero { grid-template-columns:1fr; gap:4px; padding:25px 19px 19px; margin:17px 0 27px; border-radius:19px; }
  body[data-page="games"] .tab-title { font-size:clamp(34px,9.2vw,48px); }
  body[data-page="games"] .catchphrase { font-size:14px; }
  body[data-page="games"] .head-leaf { min-height:150px; margin-top:-4px; }
  body[data-page="games"] .head-leaf .mascot { max-width:185px; }
  body[data-page="games"] .head-leaf::before { width:180px; }
  .games-shortcuts { margin-top:18px; }
  .games-section-heading { align-items:flex-start; flex-direction:column; gap:3px; }
  .section-note { text-align:left; }
  body[data-page="games"] .games-grid { grid-template-columns:1fr; gap:10px; padding-bottom:30px; }
  body[data-page="games"] .game-card { min-height:0; padding:16px; }
  body[data-page="games"] .gc-desc { min-height:0; margin-bottom:14px; }
  body[data-page="games"] .prizes-grid { grid-template-columns:1fr; }
  body[data-page="games"] .prize-card { padding:12px; }
  body[data-page="games"] .crew { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  body[data-page="games"] .crew-card img { aspect-ratio:1; padding:8px 8px 0; }
  body[data-page="games"] .crew-card figcaption { padding:10px 11px 12px; font-size:10px; }
  body[data-page="games"] .crew-card figcaption span { font-size:10px; }
  body[data-page="games"] #music-games { padding:11px; }
  body[data-page="games"] .strip { padding:17px; }
  body[data-page="games"] .strip .strip-actions { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="games"] .head-leaf .mascot { animation:none; }
}

/* Center the compact mobile arcade headers so copy remains balanced when the
   desktop mascot column is removed. Keep the shared mobile menu aligned too. */
@media (max-width: 560px) {
  body[data-page="games"] .games-hero { text-align:left; }
  body[data-page="games"] .games-hero .head-leaf,
  body[data-page="games"] .game-head .game-mascot { display:none !important; }
  body[data-page="games"] .games-hero > div:first-child { display:flex; width:100%; min-width:0; flex-direction:column; align-items:stretch; }
  body[data-page="games"] .games-hero .sec-label { justify-content:flex-start; text-align:left; }
  body[data-page="games"] .games-hero .tab-title { width:100%; max-width:100%; font-size:clamp(30px,8.2vw,38px); overflow-wrap:normal; }
  body[data-page="games"] .game-head h1 { max-width:100%; font-size:clamp(27px,7.5vw,34px); }
  body[data-page="games"] .games-hero .catchphrase { display:block; width:100%; max-width:100%; margin-top:12px; color:var(--muted); font:400 14px/1.5 var(--font-body); letter-spacing:0; text-transform:none; text-align:left; }
  body[data-page="games"] .games-hero .catchphrase::before { display:none; }
  body[data-page="games"] .games-hero-actions,
  body[data-page="games"] .games-shortcuts { justify-content:flex-start; }
  body[data-page="games"] .games-hero-actions { display:flex; flex-wrap:nowrap; gap:8px; }
  body[data-page="games"] .games-hero-actions .btn {
    flex:1 1 0; min-width:0; min-height:44px; padding:10px 8px;
    font-size:clamp(11px,3.2vw,13px); line-height:1.2; white-space:nowrap;
  }
  body[data-page="games"] .game-head { justify-content:center; text-align:center; }
  body[data-page="games"] .game-head .gh-left { width:100%; }
  body[data-page="games"] .game-head .gh-tagrow { justify-content:center; }
  body[data-page="games"] .game-head h1,
  body[data-page="games"] .game-head .gh-tagline { text-align:center; }
}
@media (max-width: 960px) {
  body[data-page="games"] .nav-links > a:not(.nav-game):not(.nav-cta),
  body[data-page="games"] .nav-links .nav-signout { text-align:center; }
}

html[data-theme="light"] body[data-page="games"] {
  --bg:#f4f6f0 !important; --bg-soft:#e9eee7 !important; --surface:#fff !important;
  --surface-2:#eef2eb !important; --border:rgba(32,59,38,.14) !important;
  --border-strong:rgba(32,59,38,.25) !important; --ink:#1b2b20 !important;
  --muted:#506154 !important; --faint:#6b7b6f !important; --green:#347b45 !important;
  --gold:#946200 !important; background:#f4f6f0 !important; color:var(--ink) !important;
}
html[data-theme="light"] body[data-page="games"] .site-nav { background:rgba(250,252,248,.96); border-color:rgba(32,59,38,.14); }
html[data-theme="light"] body[data-page="games"] :is(.panel,.game-card,.games-hero,.score-panel,.board-panel) {
  color:var(--ink); border-color:rgba(32,59,38,.2); background:linear-gradient(145deg,#fff,#f0f5ed);
  box-shadow:0 10px 28px rgba(24,48,29,.08);
}
html[data-theme="light"] body[data-page="games"] .nav-links a { color:var(--muted); }
html[data-theme="light"] body[data-page="games"] .nav-links a.active { color:#28683a; }
html[data-theme="light"] body[data-page="games"] :is(.panel,.game-card,.games-hero,.score-panel,.board-panel) { background:linear-gradient(145deg,#fff,#f0f5ed) !important; color:var(--ink) !important; border-color:var(--border-strong) !important; }
html[data-theme="light"] body[data-page="games"] :is(.icg-shop-banner,.games-hero,.game-head,.game-card,.prize-card,.crew-card,#music-games,.strip,.panel,.score-panel,.board-panel) { color:var(--ink) !important; border-color:var(--border-strong) !important; background-color:#fff !important; background-image:repeating-linear-gradient(135deg,rgba(64,105,67,.018) 0 1px,transparent 1px 11px),linear-gradient(145deg,#fff,#f1f6ef) !important; box-shadow:0 10px 28px rgba(31,58,37,.075); }
html[data-theme="light"] body[data-page="games"] .games-hero { background-image:radial-gradient(ellipse 70% 440px at 68% 110px,rgba(74,142,86,.12),transparent 72%),linear-gradient(112deg,#f7faf4,#eaf2e7) !important; }
html[data-theme="light"] body[data-page="games"] .head-leaf::before { opacity:.45; }
html[data-theme="light"] body[data-page="games"] .crew-card figcaption { color:var(--muted); border-color:var(--border); background:rgba(244,248,241,.8); }
html[data-theme="light"] body[data-page="games"] .nav-links a.nav-game { color:#704ba1 !important; }
html[data-theme="light"] body[data-page="games"] .crew-card { border:1px solid rgba(40,121,75,.32) !important; box-shadow:0 7px 22px rgba(31,58,37,.09); }
html[data-theme="light"] body[data-page="games"] .crew-card img { filter:drop-shadow(0 0 1.5px rgba(40,121,75,.72)) drop-shadow(0 5px 8px rgba(31,58,37,.16)); }