/* Sunday's Playground — "The Coin and the Rim"
   House law (marketing/steam/artist-handoff/README.md): blue + bronze + white,
   ONE light source, from above. Every rule below serves that law.
   Palette values are the studio mark's own gradients — never invent a colour here. */

@font-face{font-family:"Roboto Condensed";src:url("fonts/Roboto-Condensed.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto Condensed";src:url("fonts/Roboto-BoldCondensed.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  /* the coin field */
  --coin-lit:#132030; --coin-mid:#0A121B; --coin-deep:#04070C;
  /* brass ramp, pale at top to deep at bottom — the rim gradient */
  --brass-0:#FFF8E8; --brass-1:#E8D3A2; --brass-2:#C9A86A; --brass-3:#8E7A4C; --brass-4:#6E5B36;
  /* blue ramp */
  --blue-0:#EAFCFF; --blue-1:#7FE3FF; --blue-2:#2BB8F0; --blue-3:#1B6E92;
  /* type */
  --ink:#DDE8EF; --ink-mute:#8EA6B6; --ink-dim:#5C7284;
  /* one light from above */
  --lit:rgba(255,255,255,.07);
  --shade:0 22px 48px -24px #000, 0 2px 6px -2px rgba(0,0,0,.7);
  --rule:rgba(201,168,106,.22);
  --maxw:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Roboto Condensed",system-ui,sans-serif; font-size:17px; line-height:1.62;
  color:var(--ink); background:var(--coin-deep);
  -webkit-font-smoothing:antialiased;
}
/* THE GROUND IS THE COIN: the mark's own radial gradient, light from above-centre. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, var(--coin-lit) 0%, var(--coin-mid) 55%, var(--coin-deep) 100%);
}
/* the carousel-sun echoed at page scale: concentric rim rings, barely there */
body::after{
  content:""; position:fixed; left:50%; top:-46vmax; width:92vmax; height:92vmax; z-index:-1;
  transform:translateX(-50%); pointer-events:none; opacity:.5;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(201,168,106,.055) 0 1px, rgba(0,0,0,0) 1px 46px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
}

a{color:var(--blue-1); text-decoration:none}
a:hover{color:var(--blue-0)}
img{max-width:100%; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ── the rim: every section divider is the brass gradient, pale over deep ───────── */
.rim{height:2px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(201,168,106,.05) 12%, var(--brass-2) 50%, rgba(201,168,106,.05) 88%, transparent);
  opacity:.5}

/* ── top bar ────────────────────────────────────────────────────────────────────── */
.bar{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(4,7,12,.92), rgba(4,7,12,.72));
  border-bottom:1px solid var(--rule); box-shadow:inset 0 1px 0 var(--lit)}
.bar .wrap{display:flex; align-items:center; gap:16px; height:62px}
.bar img{width:30px; height:30px}
.brandname{font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:15px; color:var(--brass-1); white-space:nowrap}
.bar nav{margin-left:auto; display:flex; gap:26px}
.bar nav a{color:var(--ink-mute); font-size:14px; letter-spacing:.13em; text-transform:uppercase}
.bar nav a:hover{color:var(--brass-1)}

/* ── hero ───────────────────────────────────────────────────────────────────────── */
.hero{text-align:center; padding:88px 0 72px}
.hero .mark{width:132px; height:132px; margin:0 auto 26px;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.85))}
.hero h1{margin:0; font-size:clamp(34px,6vw,58px); font-weight:700; line-height:1.04;
  letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--brass-0) 0%,var(--brass-1) 24%,var(--brass-2) 58%,var(--brass-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{margin:20px auto 0; max-width:52ch; color:var(--ink-mute); font-size:19px}

/* ── section furniture ──────────────────────────────────────────────────────────── */
section{padding:64px 0}
.eyebrow{font-size:12.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--brass-2);
  margin:0 0 10px; font-weight:700}
h2{margin:0 0 8px; font-size:30px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink)}
h3{margin:0 0 6px; font-size:19px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-1)}
.lede{color:var(--ink-mute); max-width:64ch; margin:0}

/* ── the panel: a raised surface, lit from above ────────────────────────────────── */
.panel{background:linear-gradient(180deg, rgba(19,32,48,.62), rgba(10,18,27,.5));
  border:1px solid var(--rule); border-radius:3px; box-shadow:inset 0 1px 0 var(--lit), var(--shade);
  padding:30px}

/* ── THE SHELF: one coin per game. Game #2 is another .coin, not a redesign. ─────── */
.coin{display:grid; grid-template-columns:168px 1fr; gap:34px; align-items:start}
.coin .badge{width:168px; height:168px; filter:drop-shadow(0 18px 34px rgba(0,0,0,.85))}
.coin .status{display:inline-block; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-2); border:1px solid var(--rule); border-radius:2px; padding:3px 10px;
  box-shadow:inset 0 1px 0 var(--lit); margin-bottom:14px}
.coin h2{font-size:38px; margin-bottom:12px}
.coin p{margin:0 0 18px; color:var(--ink-mute); max-width:58ch}

/* ── buttons: lit top edge, brass rim ───────────────────────────────────────────── */
.btn{display:inline-block; font-family:inherit; font-weight:700; font-size:15px;
  letter-spacing:.16em; text-transform:uppercase; padding:12px 26px; border-radius:2px;
  border:1px solid rgba(127,227,255,.4); color:var(--blue-0);
  background:linear-gradient(180deg, rgba(43,184,240,.28), rgba(27,110,146,.2));
  box-shadow:inset 0 1px 0 rgba(234,252,255,.22), var(--shade); transition:.16s}
.btn:hover{color:#fff; border-color:var(--blue-1);
  background:linear-gradient(180deg, rgba(43,184,240,.44), rgba(27,110,146,.3))}
.btn.ghost{border-color:var(--rule); color:var(--brass-1); background:linear-gradient(180deg,rgba(201,168,106,.14),rgba(110,91,54,.08))}
.btn.ghost:hover{color:var(--brass-0); border-color:var(--brass-2)}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* ── shots ──────────────────────────────────────────────────────────────────────── */
.shots{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:34px}
.shots img{border:1px solid var(--rule); border-radius:2px; box-shadow:inset 0 1px 0 var(--lit), var(--shade)}
.shot-wide{grid-column:1/-1}

/* ── support content ────────────────────────────────────────────────────────────── */
.mailto{display:inline-block; font-size:clamp(20px,3.4vw,30px); font-weight:700; letter-spacing:.03em;
  color:var(--blue-1); word-break:break-word}
dl.facts{display:grid; grid-template-columns:auto 1fr; gap:10px 26px; margin:0}
dl.facts dt{color:var(--brass-2); font-size:13px; letter-spacing:.2em; text-transform:uppercase; padding-top:3px}
dl.facts dd{margin:0; color:var(--ink)}
ul.tight{margin:10px 0 0; padding-left:20px; color:var(--ink-mute)}
ul.tight li{margin:5px 0}
ul.tight li b{color:var(--ink)}

/* ── footer ─────────────────────────────────────────────────────────────────────── */
footer{padding:40px 0 60px; color:var(--ink-dim); font-size:14px}
footer .wrap{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
footer nav{margin-left:auto; display:flex; gap:22px}
footer a{color:var(--ink-mute)}

@media(max-width:720px){
  .coin{grid-template-columns:1fr; gap:22px; justify-items:start}
  .shots{grid-template-columns:1fr}
  .bar nav{gap:16px}
  .bar nav a{font-size:13px}
  section{padding:46px 0}
}

/* ── utilities & inline code ────────────────────────────────────────────────────── */
.mt{margin-top:22px}
.mt-s{margin-top:14px}
code{font-family:ui-monospace,Consolas,monospace; font-size:.88em; color:var(--brass-1);
  background:rgba(201,168,106,.09); border:1px solid var(--rule); border-radius:2px; padding:1px 6px}