@font-face{font-family:'Bricolage Grotesque';src:url(/fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:'Figtree';src:url(/fonts/figtree.woff2) format('woff2');font-weight:300 900;font-display:swap}
:root{
  --bg:#12102a; --panel:#221b4d; --panel2:#2e2569; --ink:#f6f3ff; --muted:#a79fd6;
  --yellow:#ffd23f; --yellow-d:#c79a00; --coral:#ff6b6b; --mint:#3ddbb0; --sky:#5cb8ff; --violet:#9b7bff;
  --dark:#1a1238;
  color-scheme:dark;
  --font-display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.logo,.big{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
a{color:inherit}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.ico{display:inline-block;vertical-align:-3px;flex:none}

/* top bar */
.bar{display:flex;align-items:center;gap:14px;max-width:1040px;margin:0 auto;
  padding:14px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
.logo{font-size:30px;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.logo i{width:13px;height:13px;border-radius:50%;background:var(--yellow);box-shadow:inset 0 0 0 2.5px var(--yellow-d);margin-top:6px}
.bar-game{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--muted)}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;font-weight:800;font-size:16px;color:var(--yellow)}
.icon-btn{background:none;border:0;color:var(--ink);width:40px;height:40px;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{background:var(--panel)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:700 16px var(--font-body);padding:12px 22px;border-radius:10px;text-decoration:none;
  transition:transform .12s ease,background .12s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--yellow);color:var(--dark);box-shadow:0 4px 0 var(--yellow-d)}
.btn-primary:hover{background:#ffdc66}
.btn-primary:active{box-shadow:0 1px 0 var(--yellow-d);transform:translateY(3px)}
.btn-ghost{background:var(--panel);color:var(--ink)}
.btn-ghost:hover{background:var(--panel2)}
.btn-dark{background:var(--dark);color:var(--yellow);box-shadow:0 4px 0 #000}
.btn-dark:hover{background:#271b57}
.btn-dark:active{box-shadow:0 1px 0 #000;transform:translateY(3px)}
.btn-line{background:none;color:var(--dark);box-shadow:inset 0 0 0 2px var(--dark)}
.btn-line:hover{background:rgba(26,18,56,.1)}
.btn-lg{font-size:18px;padding:15px 28px}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* game pages */
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 16px 28px;max-width:520px;margin:0 auto}
.scores{display:flex;gap:28px;width:min(92vw,440px)}
.score-box{flex:1;border-left:4px solid var(--yellow);padding:0 0 0 12px}
.score-box span{display:block;font-size:14px;color:var(--muted);font-weight:600;line-height:1.3}
.score-box b{font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1.1}
.chip{background:var(--yellow);color:var(--dark);font-weight:800;font-size:14px;padding:3px 12px;border-radius:4px}
.hint{color:var(--muted);font-size:15px;text-align:center}

/* end-of-round ticket */
.overlay{position:fixed;inset:0;background:rgba(10,8,28,.82);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:50;animation:fade .2s ease}
.result{filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));animation:rise .28s cubic-bezier(.2,1.2,.4,1)}
.ticket-card{--cut:60%;--r:16px;background:var(--yellow);color:var(--dark);width:min(92vw,380px);border-radius:4px;text-align:center;
  -webkit-mask:radial-gradient(circle var(--r) at 0 var(--cut),#0000 97%,#000),radial-gradient(circle var(--r) at 100% var(--cut),#0000 97%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--r) at 0 var(--cut),#0000 97%,#000),radial-gradient(circle var(--r) at 100% var(--cut),#0000 97%,#000);
  mask-composite:intersect}
.ticket-card .top{padding:26px 24px 20px}
.ticket-card h2{font-size:28px}
.ticket-card .big{font-size:84px;margin:6px 0 0}
.ticket-card .unit{font-weight:700;opacity:.7}
.ticket-card .perf{border-top:3px dashed rgba(26,18,56,.35);margin:0 18px}
.ticket-card .bottom{padding:18px 22px 24px}
.ticket-card .best{font-weight:700;margin-bottom:6px}
.name-row{display:flex;flex-direction:column;gap:4px;text-align:left;margin:0 0 6px;font-weight:700;font-size:14px}
.name-row input{font:600 16px var(--font-body);color:var(--dark);background:rgba(255,255,255,.55);border:2px solid var(--dark);border-radius:8px;padding:8px 10px;width:100%}
.name-row input:focus-visible{outline:3px solid var(--dark);outline-offset:2px;background:#fff}
.ticket-card .net{font-size:13px;font-weight:600;opacity:.75;min-height:20px;margin-bottom:6px}
.ticket-card .streak{font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:7px}
.ticket-card .row .btn{flex:1 1 130px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--dark);
  font-weight:700;padding:10px 20px;border-radius:6px;z-index:60;animation:rise .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* screen-reader-only heading and the how-to-play text under each game */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.about{max-width:560px;margin:28px auto 0;color:var(--muted);font-size:15px;line-height:1.6;text-align:left;align-self:stretch}
.about h2{font-size:20px;color:var(--ink);margin-bottom:8px}
.about p+p{margin-top:10px}
.about a{color:var(--yellow)}

[hidden]{display:none!important}