/* Shared styles for every page in the Play arcade */
:root{
  --paper:#f8f6fc; --ink:#171a3d; --muted:#615f80; --line:#dcd8ec; --card:#ffffff;
  --blue:#3a3fb5; --rose:#d4467c; --sun:#f0a81f; --sea:#1f9d8f;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#12142e;--ink:#f1eefa;--muted:#aaa7c8;--line:#2c2f58;--card:#1b1e3d;--blue:#8c91ff;--rose:#ff7aa9;--sun:#ffc85a;--sea:#4fd3c4}
}
:root[data-theme="dark"]{--paper:#12142e;--ink:#f1eefa;--muted:#aaa7c8;--line:#2c2f58;--card:#1b1e3d;--blue:#8c91ff;--rose:#ff7aa9;--sun:#ffc85a;--sea:#4fd3c4}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:300 1.05rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
[hidden]{display:none!important}

nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
nav ul{list-style:none;display:flex;gap:1.6rem;margin:0 auto;padding:.9rem 1.5rem;overflow-x:auto;max-width:960px;white-space:nowrap;align-items:baseline}
nav .brand{font:500 1.35rem var(--serif);margin-right:auto;padding-right:1rem}
nav a{text-decoration:none;font-size:.95rem;color:var(--muted);padding-bottom:.25rem;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--rose)}

.page{max-width:960px;margin:0 auto;padding:3rem 1.5rem 4rem}
.page h1{font:500 clamp(2.4rem,8vw,3.4rem)/1.05 var(--serif);margin:0 0 .5rem}
.lede{color:var(--muted);max-width:50ch;margin:0 0 2.4rem}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:.92rem;margin-bottom:1rem}
.back:hover{color:var(--ink)}

.btn{font:400 1rem var(--sans);padding:.75rem 1.4rem;border-radius:999px;border:1px solid #171a3d;background:#171a3d;color:#fff;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn.ghost{background:transparent;color:#171a3d}
.btn:hover{opacity:.88}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Name entry (shared by all games) */
.namebox{display:flex;flex-direction:column;gap:.4rem;text-align:left;margin:0 0 1rem}
.namebox label{font-size:.85rem;color:#615f80}
.namebox input{font:400 1.05rem var(--sans);padding:.7rem .9rem;border:1px solid #cfcbe0;border-radius:10px;background:#fff;color:#171a3d;width:100%}
.namebox input:focus{outline:2px solid #d4467c;outline-offset:1px;border-color:transparent}
.namebox input.need{border-color:#d4467c;animation:nudge .3s}
.namebox small{color:#8a87a3;font-size:.8rem}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.namebox input.need{animation:none}}

/* Leaderboard (shared by all games) */
.board{max-width:560px;margin:3rem auto 0}
.board h2{font:500 2rem/1.1 var(--serif);margin:0 0 .2rem}
.board .sub{color:var(--muted);font-size:.9rem;margin:0 0 1.2rem}
.board ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.board li{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:baseline;gap:.2rem .8rem;padding:.75rem .2rem;border-bottom:1px solid var(--line)}
.board .rank{font:500 1.4rem/1 var(--serif);color:var(--muted)}
.board li:nth-child(1) .rank{color:var(--sun)}
.board li:nth-child(2) .rank{color:var(--blue)}
.board li:nth-child(3) .rank{color:var(--rose)}
.board .who{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .when{grid-column:2;color:var(--muted);font-size:.8rem;margin-top:-.2rem}
.board .pts{grid-row:1/3;grid-column:3;font:500 1.5rem/1 var(--serif);font-variant-numeric:tabular-nums;align-self:center}
.board li.me{background:color-mix(in srgb,var(--sun) 12%,transparent)}
.board li.me .who::after{content:" (you)";color:var(--muted);font-weight:300}
.board .empty{color:var(--muted);padding:1.2rem 0;border-bottom:1px solid var(--line)}
.board .note{color:var(--muted);font-size:.82rem;margin-top:.8rem}