/* KADRO oyun teması. Konsept: arka plan çimen şeritli bir saha, arayüz sahanın üstünde duran HUD, tabela ve bilet parçalarından oluşur. */
:root{
  --font-display:'Bungee','Impact',system-ui,sans-serif;
  --font-ui:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,sans-serif;
  --font-score:'Chakra Petch','Courier New',monospace;

  --pitch-a:#2A6A48; --pitch-b:#266142; --line:rgba(255,255,255,.34);
  --chalk:#F7F5EC; --chalk-dim:#E0EEE5;
  --panel:#FBF8EE; --panel-2:#F0EBD9; --panel-edge:#D9D1B8; --panel-base:#B3A783;
  --ink:#22302A; --ink-dim:#566860; --field:#FFFFFF;

  --go:#EE8A2B; --go-edge:#A8531A; --go-ink:#2B1707;
  --pitchbtn:#1E4F37; --pitchbtn-edge:#0D2A1C; --pitchbtn-ink:#F7F5EC;
  --chalkbtn:#FBF8EE; --chalkbtn-edge:#B3A783;
  --bad:#C93A30; --bad-edge:#85221B; --bad-ink:#FFFFFF;
  --ok:#278A52; --ok-edge:#165C37; --ok-ink:#FFFFFF;
  --warn:#E5B93B; --warn-edge:#A3811A; --warn-ink:#2A2108;
  --gold:#E2B24A; --gold-edge:#9C7219;

  --board:#10181A; --board-2:#1A2622; --board-ink:#F2C14E; --board-dim:#8FA39A;
  --folder:#D9BC82; --folder-edge:#A98B4E; --folder-base:#7C6430;
  --paper:#FFFDF5; --paper-ink:#22302A; --stamp:#C8372D;

  --focus:#0B57C8; --focus-pitch:#FFFFFF;
  --shadow:rgba(6,22,14,.38);
  --r-btn:14px; --r-panel:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pitch-a:#14281E; --pitch-b:#112219; --line:rgba(220,240,226,.17);
    --chalk:#EEF1E8; --chalk-dim:#A9BDB0;
    --panel:#1E3026; --panel-2:#172720; --panel-edge:#2E473B; --panel-base:#0A130E;
    --ink:#EEF1E8; --ink-dim:#9FB3A6; --field:#101C16;
    --go:#F59A3D; --go-edge:#B0601F;
    --pitchbtn:#2C5C44; --pitchbtn-edge:#0B1A12;
    --chalkbtn:#2A4034; --chalkbtn-edge:#0A130E;
    --bad:#D44A40; --bad-edge:#8F2A22;
    --ok:#3DAA6A; --ok-edge:#1E6B40; --ok-ink:#06140C;
    --gold:#E8BD55;
    --board:#070C0A; --board-2:#101A15;
    --folder:#8F7948; --folder-edge:#6C5A33; --folder-base:#3E331B;
    --focus:#8CC4FF; --shadow:rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --pitch-a:#14281E; --pitch-b:#112219; --line:rgba(220,240,226,.17);
  --chalk:#EEF1E8; --chalk-dim:#A9BDB0;
  --panel:#1E3026; --panel-2:#172720; --panel-edge:#2E473B; --panel-base:#0A130E;
  --ink:#EEF1E8; --ink-dim:#9FB3A6; --field:#101C16;
  --go:#F59A3D; --go-edge:#B0601F;
  --pitchbtn:#2C5C44; --pitchbtn-edge:#0B1A12;
  --chalkbtn:#2A4034; --chalkbtn-edge:#0A130E;
  --bad:#D44A40; --bad-edge:#8F2A22;
  --ok:#3DAA6A; --ok-edge:#1E6B40; --ok-ink:#06140C;
  --gold:#E8BD55;
  --board:#070C0A; --board-2:#101A15;
  --folder:#8F7948; --folder-edge:#6C5A33; --folder-base:#3E331B;
  --focus:#8CC4FF; --shadow:rgba(0,0,0,.5);
  color-scheme: dark;
}

body{
  background-color:var(--pitch-a);
  background-image:repeating-linear-gradient(90deg,var(--pitch-a) 0 80px,var(--pitch-b) 80px 160px);
  color:var(--chalk); font-family:var(--font-body); font-size:1rem; line-height:1.5;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 30%,transparent 55%,rgba(0,0,0,.28) 100%)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.on-pitch :focus-visible,.hud :focus-visible{outline-color:var(--focus-pitch)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Yüzey: panel, tabela, çizgi */
.panel{background:var(--panel);color:var(--ink);border:3px solid var(--panel-edge);border-radius:var(--r-panel);
  box-shadow:0 6px 0 var(--panel-base),0 16px 24px -12px var(--shadow);padding:1.25rem;min-width:0}
.plate{display:inline-flex;align-items:center;gap:.6rem;font:400 .95rem/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;
  background:var(--board);color:var(--board-ink);padding:.6rem 1rem;border-radius:8px;border:2px solid #000;box-shadow:0 4px 0 #000}
.lbl{font:600 .78rem/1.2 var(--font-score);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.halfway{position:relative;height:3px;background:var(--line);margin-block:2.5rem}
.halfway::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);
  border:3px solid var(--line);border-radius:50%;background:transparent}

/* Düğme: basılınca iner */
.btn{--b:var(--go);--be:var(--go-edge);--bt:var(--go-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:54px;padding:.7rem 1.5rem;
  font:800 1.2rem/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  color:var(--bt);background:var(--b);border:0;border-radius:var(--r-btn);cursor:pointer;position:relative;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.32),0 5px 0 var(--be),0 10px 14px -6px var(--shadow);
  transition:transform .08s ease,box-shadow .08s ease,filter .15s;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.32),0 6px 0 var(--be),0 12px 16px -6px var(--shadow)}
.btn:active,.btn.is-down{transform:translateY(4px);filter:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 var(--be),0 2px 4px -2px var(--shadow)}
.btn--pitch{--b:var(--pitchbtn);--be:var(--pitchbtn-edge);--bt:var(--pitchbtn-ink)}
.btn--chalk{--b:var(--chalkbtn);--be:var(--chalkbtn-edge);--bt:var(--ink)}
.btn--bad{--b:var(--bad);--be:var(--bad-edge);--bt:var(--bad-ink)}
.btn--ok{--b:var(--ok);--be:var(--ok-edge);--bt:var(--ok-ink)}
.btn--ghost{--b:transparent;--bt:var(--chalk);box-shadow:inset 0 0 0 3px var(--line);}
.btn--ghost:hover{box-shadow:inset 0 0 0 3px var(--chalk);transform:none}
.btn--ghost:active{transform:translateY(2px);box-shadow:inset 0 0 0 3px var(--chalk)}
.btn--sm{min-height:44px;padding:.5rem 1rem;font-size:1.05rem;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 4px 0 var(--be),0 8px 12px -6px var(--shadow)}
.btn--lg{min-height:66px;padding:.9rem 2.1rem;font-size:1.55rem;border-radius:18px}
.btn--block{width:100%}
.btn[disabled]{--b:#8B988F;--be:#65726B;--bt:#EEF2EF;cursor:not-allowed;filter:none;transform:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 3px 0 var(--be)}
.btn.is-loading{color:transparent;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:24px;height:24px;border:4px solid var(--bt);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.ibtn{width:48px;height:48px;min-height:48px;padding:0;border-radius:14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Giriş alanları: bilet ve tabela */
.field{display:grid;gap:.4rem;min-width:0}
.input,.select select{width:100%;min-height:58px;padding:.7rem 1rem;font:700 1.35rem/1.2 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);background:var(--field);border:3px solid var(--panel-edge);border-radius:var(--r-btn);
  box-shadow:inset 0 4px 0 rgba(0,0,0,.08);transition:border-color .12s,box-shadow .12s;appearance:none;-webkit-appearance:none}
.input::placeholder{color:var(--ink-dim);opacity:.75}
.input:focus,.select select:focus{outline:none;border-color:var(--go);box-shadow:inset 0 4px 0 rgba(0,0,0,.08),0 0 0 4px color-mix(in srgb,var(--go) 35%,transparent)}
.input.is-ok{border-color:var(--ok)}
.input.is-bad{border-color:var(--bad);animation:shake .35s}
.input-wrap{position:relative}
.input-wrap .ico{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--ink-dim);pointer-events:none}
.input-wrap .input{padding-left:3.2rem}
.hint{font:500 .9rem/1.3 var(--font-body);color:var(--ink-dim)}
.hint.is-bad{color:var(--bad)} .hint.is-ok{color:var(--ok)}
.suggest{list-style:none;margin:.4rem 0 0;padding:.35rem;display:grid;gap:.2rem;background:var(--panel-2);border:3px solid var(--panel-edge);border-radius:14px}
.suggest li button{width:100%;min-height:48px;text-align:left;padding:.4rem .8rem;font:700 1.15rem var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:0;border-radius:10px;cursor:pointer}
.suggest li button:hover,.suggest li button[aria-selected="true"]{background:var(--go);color:var(--go-ink)}
.select{position:relative}
.select::after{content:"";position:absolute;right:1.1rem;top:50%;margin-top:-4px;border:7px solid transparent;border-top-color:var(--ink);pointer-events:none}
.select select{padding-right:2.6rem;cursor:pointer}

.seg{display:inline-flex;padding:5px;gap:4px;background:var(--panel-2);border:3px solid var(--panel-edge);border-radius:16px;box-shadow:inset 0 4px 0 rgba(0,0,0,.07);max-width:100%}
.seg label{position:relative;cursor:pointer;min-width:0}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.3rem 1rem;font:800 1.05rem var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim);border-radius:11px;transition:background .12s,transform .1s}
.seg input:checked + span{background:var(--go);color:var(--go-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 var(--go-edge);transform:translateY(-1px)}
.seg input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}

.switch,.check{display:flex;align-items:center;gap:.8rem;min-height:48px;cursor:pointer;font:600 1.05rem var(--font-body);color:var(--ink)}
.switch input,.check input{position:absolute;opacity:0;width:1px;height:1px}
.track{position:relative;flex:none;width:60px;height:34px;border-radius:17px;background:var(--panel-edge);box-shadow:inset 0 3px 0 rgba(0,0,0,.18);transition:background .15s}
.track i{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--panel);box-shadow:0 3px 0 var(--panel-base);transition:transform .15s cubic-bezier(.3,1.5,.5,1)}
.switch input:checked + .track{background:var(--ok)} .switch input:checked + .track i{transform:translateX(26px)}
.switch input:focus-visible + .track,.check input:focus-visible + .box{outline:3px solid var(--focus);outline-offset:3px}
.box{position:relative;flex:none;width:30px;height:30px;border-radius:9px;background:var(--field);border:3px solid var(--panel-edge);box-shadow:inset 0 3px 0 rgba(0,0,0,.08)}
.check input:checked + .box{background:var(--ok);border-color:var(--ok-edge)}
.check input:checked + .box::after{content:"";position:absolute;left:8px;top:2px;width:7px;height:14px;border:solid var(--ok-ink);border-width:0 4px 4px 0;transform:rotate(45deg)}

/* Skor tabelası: LED noktalı */
.board{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;padding:1rem;background:var(--board);border:4px solid #2B3833;border-radius:12px;box-shadow:inset 0 0 0 2px #000,0 6px 0 #000,0 16px 24px -12px var(--shadow);overflow:hidden}
.board::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,.5) 1px,transparent 1.5px) 0 0/4px 4px}
.board .cell{display:grid;gap:.2rem;text-align:center;min-width:0}
.board .cap{font:600 .72rem var(--font-score);letter-spacing:.16em;text-transform:uppercase;color:var(--board-dim)}
.board .val{font:700 clamp(1.7rem,6.5vw,3rem)/1 var(--font-score);font-variant-numeric:tabular-nums;color:var(--board-ink);text-shadow:0 0 14px rgba(242,193,78,.3)}
.board .val.tick{animation:tick .3s}
@keyframes tick{0%{transform:translateY(-35%);opacity:.2}100%{transform:none;opacity:1}}

/* Soru ve cevap */
.timer{height:20px;border-radius:10px;background:var(--panel-2);border:3px solid var(--panel-edge);box-shadow:inset 0 3px 0 rgba(0,0,0,.08);overflow:hidden}
.timer i{display:block;height:100%;transform-origin:left;background:var(--ok);animation:drain 10s linear forwards}
@keyframes drain{0%{transform:scaleX(1);background:var(--ok)}60%{background:var(--warn)}85%{background:var(--bad)}100%{transform:scaleX(0);background:var(--bad)}}
.opts{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.opt{display:flex;align-items:center;gap:.8rem;min-height:64px;padding:.5rem .9rem .5rem .6rem;text-align:left;cursor:pointer;
  font:700 1.35rem var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--panel);
  border:3px solid var(--panel-edge);border-radius:16px;box-shadow:0 5px 0 var(--panel-base);transition:transform .08s,box-shadow .08s,background .12s}
.opt:hover{transform:translateY(-1px);border-color:var(--go)}
.opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--panel-base)}
.opt .k{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font:400 1rem var(--font-display);background:var(--board);color:var(--board-ink)}
.opt .st{margin-left:auto;display:none}
.opt.is-right{background:var(--ok);border-color:var(--ok-edge);color:var(--ok-ink);box-shadow:0 5px 0 var(--ok-edge);animation:pop .35s}
.opt.is-wrong{background:var(--bad);border-color:var(--bad-edge);color:var(--bad-ink);box-shadow:0 5px 0 var(--bad-edge);animation:shake .35s}
.opt.is-right .st,.opt.is-wrong .st{display:block}
.opt.is-dim{opacity:.5;pointer-events:none}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.float{position:absolute;right:1rem;top:-.6rem;font:700 1.8rem var(--font-score);color:var(--go);text-shadow:0 2px 0 #000;animation:floatUp 1.1s ease-out forwards;pointer-events:none}
@keyframes floatUp{0%{transform:translateY(10px) scale(.6);opacity:0}25%{opacity:1;transform:translateY(-8px) scale(1.15)}100%{transform:translateY(-46px);opacity:0}}

.gg{display:grid;gap:.4rem;grid-template-columns:repeat(5,minmax(0,1fr))}
.gg .hd{font:600 .66rem var(--font-score);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);text-align:center}
.tile{display:grid;place-items:center;aspect-ratio:1/.9;font:800 clamp(.95rem,3.6vw,1.35rem) var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
  background:var(--panel-2);color:var(--ink);border:3px solid var(--panel-edge);border-radius:12px;box-shadow:inset 0 3px 0 rgba(0,0,0,.06)}
.tile.is-ok{background:var(--ok);border-color:var(--ok-edge);color:var(--ok-ink)}
.tile.is-near{background:var(--warn);border-color:var(--warn-edge);color:var(--warn-ink)}
.tile.is-no{background:var(--panel-edge);border-color:var(--panel-base);color:var(--ink-dim)}
.tile.flip{animation:flip .46s ease}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:30px;padding:.15rem .7rem;font:700 .95rem var(--font-ui);letter-spacing:.07em;text-transform:uppercase;border-radius:999px;background:var(--panel-2);border:2px solid var(--panel-edge);color:var(--ink)}
.chip.is-ok{background:var(--ok);color:var(--ok-ink);border-color:var(--ok-edge)}
.chip.is-near{background:var(--warn);color:var(--warn-ink);border-color:var(--warn-edge)}
.chip.is-gold{background:var(--gold);color:#2A2108;border-color:var(--gold-edge)}
.pips{display:flex;gap:.3rem}.pips i{width:16px;height:16px;border-radius:50%;background:var(--panel-edge);border:2px solid var(--panel-base)}.pips i.on{background:var(--go);border-color:var(--go-edge)}

/* Sahte İz dosyası */
.folder{position:relative;margin-top:2.2rem}
.folder-tab{position:absolute;left:18px;top:-2rem;height:2rem;display:flex;align-items:center;padding:0 1rem;font:400 .8rem var(--font-display);letter-spacing:.07em;text-transform:uppercase;background:var(--folder-edge);color:#1E1708;border-radius:10px 10px 0 0}
.folder-body{background:var(--folder);border:3px solid var(--folder-edge);border-radius:0 16px 16px 16px;padding:1rem;box-shadow:0 6px 0 var(--folder-base),0 16px 24px -12px var(--shadow)}
.paper{background:var(--paper);color:var(--paper-ink);border-radius:8px;padding:1rem;display:grid;gap:.7rem;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.paper h4{margin:0;font:800 1.5rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.rec{--i:0;position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:0;width:100%;min-height:62px;padding:0;text-align:left;cursor:pointer;
  background:#fff;color:var(--paper-ink);border:2px solid #CFC7AC;border-radius:10px;overflow:hidden;font:inherit;
  animation:reveal .45s calc(var(--i)*.12s) both ease-out;transition:transform .1s,border-color .1s}
.rec:hover{border-color:var(--go-edge);transform:translateX(3px)}
.rec .n{align-self:stretch;display:grid;place-items:center;font:400 1.1rem var(--font-display);background:#EFE8CF;border-right:2px dashed #BDB394}
.rec .c{padding:.5rem .9rem;font:800 1.3rem var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.rec .c small{display:block;font:500 .72rem var(--font-score);letter-spacing:.12em;color:#7A7458}
.rec .stampbox{width:128px;display:grid;place-items:center}
.rec .stamp{font:400 .95rem var(--font-display);letter-spacing:.08em;color:var(--stamp);border:4px solid var(--stamp);border-radius:7px;padding:.15rem .5rem;transform:rotate(-9deg) scale(2.2);opacity:0}
.rec.is-sus{border-color:var(--stamp);background:#FFF4F1}
.rec.is-sus .stamp{animation:stampIn .38s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stampIn{0%{opacity:0;transform:rotate(-20deg) scale(2.4)}100%{opacity:.92;transform:rotate(-9deg) scale(1)}}
@keyframes reveal{0%{opacity:0;transform:translateX(-24px)}100%{opacity:1;transform:none}}
.steps{display:flex;flex-wrap:wrap;gap:.5rem}
.step{display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem .3rem .4rem;border-radius:999px;background:var(--panel-2);border:2px solid var(--panel-edge);font:700 1rem var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.step b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--board);color:var(--board-ink);font:400 .8rem var(--font-display)}
.step.is-done{background:var(--ok);color:var(--ok-ink);border-color:var(--ok-edge)}
.step.is-done b{background:var(--ok-ink);color:var(--ok)}

/* Rozet, lig, başarım */
.shield{width:76px;height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}
.medal{display:grid;justify-items:center;gap:.5rem;text-align:center;font:700 1rem var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.medal .m{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--mc,var(--gold));color:#201806;border:4px solid var(--me,var(--gold-edge));box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 var(--me,var(--gold-edge))}
.medal .m .ico{width:34px;height:34px;stroke-width:2.2}
.medal.is-locked .m{background:var(--panel-edge);border-color:var(--panel-base);color:var(--ink-dim);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),0 5px 0 var(--panel-base)}
.medal.is-locked .m .ico{opacity:.7}

/* Profil kartı */
.club-card{position:relative;overflow:hidden;padding:0}
.club-card .band{height:76px;background:repeating-linear-gradient(90deg,var(--pitch-a) 0 28px,var(--pitch-b) 28px 56px);border-bottom:3px solid var(--panel-edge)}
.club-card .body{padding:0 1.1rem 1.1rem;display:grid;gap:.9rem}
.avatar{margin-top:-40px;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--go);color:var(--go-ink);border:4px solid var(--panel);box-shadow:0 0 0 3px var(--go-edge),0 5px 0 3px var(--go-edge)}
.avatar .ico{width:42px;height:42px}
.stat{background:var(--panel-2);border:2px solid var(--panel-edge);border-radius:12px;padding:.55rem .8rem;display:grid;gap:.1rem}
.stat b{font:700 1.6rem/1 var(--font-score);font-variant-numeric:tabular-nums;color:var(--ink)}

/* Alt gezinme */
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:.45rem .4rem calc(.45rem + env(safe-area-inset-bottom,0px));background:var(--board);border-top:3px solid #000;border-radius:20px 20px 0 0}
.tab{display:grid;justify-items:center;gap:.15rem;min-height:56px;padding:.3rem 0;color:var(--board-dim);font:600 .66rem var(--font-score);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:none;border:0;cursor:pointer;position:relative}
.tab .ico{width:26px;height:26px}
.tab[aria-current="page"]{color:var(--board-ink)}
.tab[aria-current="page"]::before{content:"";position:absolute;top:-.45rem;width:30px;height:4px;border-radius:0 0 4px 4px;background:var(--board-ink)}
.fab{justify-self:center;display:grid;place-items:center;width:68px;height:68px;margin-top:-34px;border-radius:50%;cursor:pointer;color:var(--go-ink);background:var(--go);border:4px solid var(--board);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 5px 0 var(--go-edge);transition:transform .08s,box-shadow .08s}
.fab:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),0 1px 0 var(--go-edge)}
.fab .ico{width:34px;height:34px}

.toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:50;max-width:calc(100% - 32px);
  padding:.7rem 1.2rem;font:700 1.1rem var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--board-ink);background:var(--board);border:2px solid #000;border-radius:12px;box-shadow:0 5px 0 #000;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

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