/* Shared shell for the pages around the game (home, leaderboard).
   The game itself carries its own copy of these tokens because it must also
   work opened straight from disk. */
:root{
  --ink:#0C1417; --ink-2:#132025; --ink-3:#1B2C32; --ink-4:#24393F;
  --line:rgba(226,240,242,.12); --line-2:rgba(226,240,242,.07);
  --clay:#E2703A; --clay-hi:#F2854F;
  --amber:#F2B441; --teal:#43A99C;
  --moss:#6FBF7E; --rose:#EA6250;
  --text:#F4F1E9; --dim:#9DB2B7; --faint:#66797E;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:'DM Sans',sans-serif;
  line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:6px}
.serif{font-family:'Fraunces',serif}
.wrap{width:100%;max-width:940px;margin:0 auto;padding:0 22px}

/* ---- top bar: every page can reach every other page ---- */
.nav{border-bottom:1px solid var(--line-2);background:rgba(12,20,23,.86);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.nav-in{display:flex;align-items:center;gap:8px;height:60px;
  width:100%;max-width:940px;margin:0 auto;padding:0 22px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto;
  font-family:'Fraunces',serif;font-weight:600;font-size:1.16rem;letter-spacing:-.01em}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--clay);flex-shrink:0}
.nav a.lnk{text-decoration:none;color:var(--dim);font-size:.88rem;font-weight:600;
  padding:8px 13px;border-radius:999px;transition:all .14s;white-space:nowrap}
.nav a.lnk:hover{color:var(--text);background:var(--ink-2)}
.nav a.lnk[aria-current="page"]{color:var(--text);background:var(--ink-3)}
.nav a.play{background:var(--clay);color:#12100E;font-weight:700}
.nav a.play:hover{background:var(--clay-hi);color:#12100E}

main{flex:1;width:100%}
footer{border-top:1px solid var(--line-2);margin-top:56px;padding:26px 0 40px;
  font-size:.8rem;color:var(--faint)}
footer .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
footer a{color:var(--faint);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--text)}
footer .sp{margin-left:auto}

h1.hero{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.2rem,5.6vw,3.6rem);text-wrap:balance;max-width:16ch}
h1.hero em{font-style:normal;color:var(--clay)}
.sub{margin-top:16px;font-size:clamp(1rem,2.2vw,1.1rem);color:var(--dim);max-width:52ch;text-wrap:balance}

.eyebrow{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--clay);color:#12100E;border:none;border-radius:999px;
  padding:15px 34px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;
  transition:transform .16s var(--ease),background .16s;
  box-shadow:0 10px 30px rgba(226,112,58,.2)}
.btn:hover{transform:translateY(-2px);background:var(--clay-hi)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--ink-2);border-color:var(--clay)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:560px){
  .nav-in{height:56px;gap:4px;padding:0 14px}
  .nav a.lnk{padding:7px 10px;font-size:.82rem}
  .brand{font-size:1.02rem}
  .wrap{padding:0 16px}
}