*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
button,input,select{font:inherit;color:inherit;margin:0}
button{cursor:pointer}

:root{
  --ground:#EFEEF4; --surface:#FFFFFF; --surface2:#E6E4EF; --sunken:#F6F5FA;
  --ink:#181523; --muted:#6C6683; --line:#DAD7E5;
  --shadow:0 1px 2px rgba(24,21,35,.05), 0 10px 26px -16px rgba(24,21,35,.35);
  --c1:#D8232A; --c2:#EEA700; --c3:#14874A; --c4:#135FB6;
  --on1:#FFFFFF; --on2:#3A2600; --on3:#FFFFFF; --on4:#FFFFFF;
  --i1:#C4181F; --i2:#8A5F02; --i3:#0F6E3C; --i4:#114E96;
  --oval:#FFFFFF;
  --n1:#C4181F; --n2:#8A5F02; --n3:#0F6E3C; --n4:#114E96;
  --ring:rgba(255,255,255,.82);
  --track:rgba(255,255,255,.26);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131019; --surface:#1C1826; --surface2:#272134; --sunken:#171320;
    --ink:#F1EEF7; --muted:#9C95B4; --line:#332D44;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.9);
    --c1:#B92027; --c2:#D69200; --c3:#0F6E3C; --c4:#114E96;
    --on1:#FFFFFF; --on2:#241800; --on3:#FFFFFF; --on4:#FFFFFF;
    --i1:#F2434A; --i2:#E0A21F; --i3:#2FBE74; --i4:#4B93E8;
    --oval:#F2EEF9;
    --ring:rgba(255,255,255,.62);
    --track:rgba(255,255,255,.20);
  }
}
:root[data-theme="dark"]{
  --ground:#131019; --surface:#1C1826; --surface2:#272134; --sunken:#171320;
  --ink:#F1EEF7; --muted:#9C95B4; --line:#332D44;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.9);
  --c1:#B92027; --c2:#D69200; --c3:#0F6E3C; --c4:#114E96;
  --on1:#FFFFFF; --on2:#241800; --on3:#FFFFFF; --on4:#FFFFFF;
  --i1:#F2434A; --i2:#E0A21F; --i3:#2FBE74; --i4:#4B93E8;
  --oval:#F2EEF9;
  --ring:rgba(255,255,255,.62);
  --track:rgba(255,255,255,.20);
}

body{
  background:var(--ground); color:var(--ink);
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:760px; margin:0 auto; padding:20px 16px 56px; display:flex; flex-direction:column; gap:22px}

.eyebrow{
  font-family:"DM Mono", ui-monospace, monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* ── shared controls ────────────────────────── */
.suitdots{display:inline-flex; gap:5px; vertical-align:.14em; margin-left:10px}
.suitdots i{width:11px; height:11px; border-radius:50%; display:block}
.numfield{
  background:var(--sunken); border:1px solid var(--line); border-radius:9px;
  padding:7px 9px; font-size:14px; font-weight:600; color:var(--ink);
  width:78px; font-family:"DM Mono", monospace; font-variant-numeric:tabular-nums; text-align:center;
}
.spacer{flex:1 1 auto; min-width:0}
.ghost{
  background:transparent; border:1px solid var(--line); border-radius:9px;
  padding:7px 12px; font-size:13px; font-weight:600; color:var(--muted);
}
.ghost:hover{color:var(--ink); border-color:var(--muted)}

/* ── settings: one line once a game is under way ── */
.setbar{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden;
}
.setToggle{
  width:100%; background:transparent; border:0; padding:11px 13px;
  display:flex; align-items:center; gap:10px; text-align:left; color:var(--ink);
}
.setToggle .eyebrow{flex:none}
.setToggle b{
  flex:1; min-width:0; font-size:14px; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.setToggle .chev{color:var(--muted); font-size:11px; flex:none}
.setbody{
  border-top:1px solid var(--line); padding:13px; display:flex; flex-direction:column; gap:11px;
}
.modepick{display:grid; gap:8px}
.modecard{
  background:var(--sunken); border:1.5px solid var(--line); border-radius:12px;
  padding:11px 13px; text-align:left; display:flex; flex-direction:column; gap:3px; color:var(--ink);
}
.modecard b{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:14.5px; letter-spacing:-.01em;
}
.modecard small{font-size:12.5px; line-height:1.42; color:var(--muted)}
.modecard[aria-pressed="true"]{border-color:var(--ink); background:var(--surface)}
.modecard[aria-pressed="true"] b::after{content:" ✓"; color:var(--i3)}
.limitrow{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.limitrow label{display:flex; align-items:center; gap:8px}

/* ── player cards ───────────────────────────── */
.board{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.pcard{
  background:var(--c); border-radius:20px; padding:8px; color:var(--on);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.pcard.frontrunner{outline:3px solid var(--ink); outline-offset:2px}
.face{
  border:2px solid var(--ring); border-radius:14px; padding:12px 12px 13px;
  display:flex; flex-direction:column; gap:9px; min-height:172px; position:relative;
}
.rank{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.02em; opacity:.85; display:flex; align-items:center; gap:5px;
}
.rank .crown{font-size:14px}
.ovalwrap{flex:1; display:grid; place-items:center; padding:2px 0}
.oval{
  background:var(--oval); border-radius:50%; transform:rotate(-11deg);
  width:84%; max-width:150px; aspect-ratio:1/.66; display:grid; place-items:center;
  box-shadow:0 2px 0 rgba(0,0,0,.10);
}
.tot{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800;
  font-size:clamp(1.75rem,7.5vw,2.4rem); line-height:1; color:var(--n);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.pname{
  background:transparent; border:0; border-bottom:1.5px dashed transparent;
  width:100%; padding:1px 0; color:var(--on);
  font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:15px;
  letter-spacing:-.01em; text-overflow:ellipsis;
}
.pname:hover{border-bottom-color:var(--ring)}
.pname:focus{outline:none; border-bottom-color:var(--ring); border-bottom-style:solid}
.rail{height:5px; border-radius:99px; background:var(--track); overflow:hidden}
.rail i{display:block; height:100%; background:var(--oval); border-radius:99px; transition:width .45s cubic-bezier(.2,.8,.2,1)}
.pmeta{
  font-family:"DM Mono", monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; opacity:.9; font-variant-numeric:tabular-nums;
}

/* ── panels ─────────────────────────────────── */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px;
}
.panel h2{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:1.05rem;
  margin:0; letter-spacing:-.015em;
}
.panelhead{display:flex; align-items:baseline; justify-content:space-between; gap:10px}

.chips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.chip{
  background:var(--sunken); border:1.5px solid var(--line); border-radius:11px;
  padding:10px 11px; display:flex; align-items:center; gap:8px; text-align:left;
  font-weight:600; font-size:14px; color:var(--ink); overflow:hidden;
}
.chip .dot{width:12px; height:12px; border-radius:50%; background:var(--i); flex:none}
.chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--c); border-color:var(--c); color:var(--on)}
.chip[aria-pressed="true"] .dot{background:var(--on)}

.rows{display:flex; flex-direction:column; gap:8px}
.prow{display:flex; align-items:center; gap:8px}
.prow .who{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:14px; overflow:hidden;
}
.prow .who span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .dot{width:10px; height:10px; border-radius:50%; background:var(--i); flex:none}
.count{
  background:var(--sunken); border:1px solid var(--line); border-radius:9px;
  padding:8px 10px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.count:hover{color:var(--ink); border-color:var(--muted)}
.ptsfield{
  width:76px; text-align:center; background:var(--sunken); border:1.5px solid var(--line);
  border-radius:9px; padding:8px 6px; font-family:"DM Mono", monospace;
  font-variant-numeric:tabular-nums; font-weight:500; font-size:15px;
}
.ptsfield:focus{outline:none; border-color:var(--ink)}

.tally{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px dashed var(--line); padding-top:12px; font-size:13.5px; color:var(--muted);
}
.tally b{
  font-family:"Bricolage Grotesque", sans-serif; font-size:1.35rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.primary{
  background:var(--ink); color:var(--surface); border:0; border-radius:11px;
  padding:12px 18px; font-weight:700; font-size:15px; letter-spacing:-.01em;
}
.primary:disabled{opacity:.35; cursor:not-allowed}

/* ── log ────────────────────────────────────── */
.scroller{overflow-x:auto; margin:0 -16px; padding:0 16px}
table{border-collapse:collapse; width:100%; min-width:318px; table-layout:fixed}
th,td{padding:8px 4px; text-align:right; white-space:nowrap; overflow:hidden}
th:first-child,td:first-child{text-align:left; padding-left:0}
thead th{
  font-family:"DM Mono", monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
  border-bottom:1px solid var(--line); padding-bottom:9px;
}
thead th.p{color:var(--i); text-overflow:ellipsis}
tbody td{
  font-family:"DM Mono", monospace; font-size:13.5px; font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line); color:var(--muted);
}
tbody td.hit{color:var(--i); font-weight:500}
tbody td.zero{opacity:.32}
tfoot td{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800; font-size:15px;
  font-variant-numeric:tabular-nums; padding-top:11px; color:var(--ink);
}
tfoot td:first-child{font-family:"DM Mono", monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.del{
  background:transparent; border:0; color:var(--muted); font-size:15px; line-height:1;
  padding:3px 5px; border-radius:6px; opacity:.55;
}
.del:hover{opacity:1; color:var(--i1); background:var(--sunken)}
.empty{color:var(--muted); font-size:14px; margin:0}

/* ── banner ─────────────────────────────────── */
.banner{
  background:var(--c); color:var(--on); border-radius:18px; padding:8px;
  box-shadow:var(--shadow);
}
.banner .face{min-height:0; gap:6px; align-items:flex-start}
.banner h2{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800;
  font-size:clamp(1.4rem,6vw,2rem); margin:0; letter-spacing:-.025em; color:var(--on);
}
.banner p{margin:0; font-size:14px; opacity:.92}
.banner .primary{background:var(--oval); color:var(--n); margin-top:8px}

/* ── card pad ───────────────────────────────── */
.pad[hidden]{display:none}
.pad{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,8,16,.55); backdrop-filter:blur(3px); padding:0;
}
.padbox{
  background:var(--surface); width:100%; max-width:460px; border-radius:20px 20px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px;
  border-top:4px solid var(--i); max-height:92vh; overflow-y:auto;
}
.padhead{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.padhead b{
  display:block; font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:1.1rem;
  letter-spacing:-.015em;
}
.padsum{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800; font-size:2rem; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--i); letter-spacing:-.03em;
}
.stack{
  min-height:34px; display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start;
  background:var(--sunken); border-radius:10px; padding:7px;
}
.stack em{
  font-family:"DM Mono", monospace; font-style:normal; font-size:12px; font-weight:500;
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:2px 7px;
}
.stack .ph{font-family:"Instrument Sans",sans-serif; font-size:12.5px; color:var(--muted); padding:2px}
.keys{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px}
.key{
  background:var(--sunken); border:1.5px solid var(--line); border-radius:11px;
  padding:13px 4px; font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:1.15rem;
  font-variant-numeric:tabular-nums;
}
.key:active{background:var(--c); border-color:var(--c); color:var(--on)}
.key.wide{
  grid-column:span 2; font-size:.9rem; font-family:"Instrument Sans",sans-serif; font-weight:600;
  display:flex; flex-direction:column; gap:1px; align-items:center; padding:9px 4px;
}
.key.wide small{
  font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.06em; color:var(--muted);
}
.key.wide:active small{color:var(--on); opacity:.75}
.key.back{grid-column:span 1; font-size:1rem}
.padfoot{display:flex; gap:8px}
.padfoot .primary{flex:1}

/* ── footer ─────────────────────────────────── */
.legend{display:flex; flex-direction:column; gap:9px}
.legend dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:13px}
.legend dt{font-family:"DM Mono",monospace; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.legend dd{margin:0; color:var(--muted)}
.note{font-size:12.5px; color:var(--muted); margin:0}

.toast[hidden]{display:none}
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:11px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow); max-width:90vw; text-align:center;
}

:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px; border-radius:4px}
.pcard :focus-visible, .banner :focus-visible{outline-color:var(--oval)}

@media (max-width:400px){
  .keys{gap:6px}
  .key{padding:11px 2px; font-size:1.05rem}
}
@media (min-width:620px){
  .board{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .face{min-height:196px}
  .tot{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ── site chrome (statik sayfa; araç stilleri yukarıda) ─────── */
.hero{max-width:760px; margin:0 auto; padding:30px 16px 0; display:flex; flex-direction:column; gap:11px}
.hero h1{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif; font-weight:800;
  font-size:clamp(1.9rem,7.5vw,2.6rem); line-height:1.02; letter-spacing:-.025em;
  margin:0; text-wrap:balance;
}
.hero .lead{margin:0; max-width:66ch; color:var(--muted); font-size:1.08rem; line-height:1.5; text-wrap:pretty}
#app{padding-top:16px}

.noscript{
  max-width:760px; margin:0 auto; padding:0 16px;
}
.noscript p{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--i1);
  border-radius:12px; padding:13px 15px; margin:0; font-size:14px; color:var(--ink);
}

.prose{max-width:760px; margin:0 auto; padding:6px 16px 42px}
.prose article{display:flex; flex-direction:column; gap:40px}
.prose section{display:flex; flex-direction:column; gap:13px; scroll-margin-top:18px}
.prose h2{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.3rem,5vw,1.5rem);
  margin:0; letter-spacing:-.022em; text-wrap:balance;
}
.prose h3{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.03rem;
  margin:14px 0 -4px; letter-spacing:-.012em; color:var(--ink);
}
.prose h3:first-of-type{margin-top:0}
.prose .qa{border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:6px}
.prose .qa:first-child{border-top:0; padding-top:0}
.prose .qa h3{margin:0}
.prose p{margin:0; max-width:64ch; color:var(--muted); text-wrap:pretty}
.prose strong{color:var(--ink); font-weight:600}
.prose ol,.prose ul{
  margin:0; padding-left:1.2rem; max-width:64ch; color:var(--muted);
  display:flex; flex-direction:column; gap:8px;
}
.prose li::marker{color:var(--ink); font-weight:600}
.example{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:14px; color:var(--muted); max-width:64ch;
}
.example b{color:var(--ink); font-weight:600}

/* prose tables must not inherit the round-log layout */
.prose table{table-layout:auto; min-width:0; width:100%; max-width:64ch}
.prose th,.prose td{
  text-align:left; padding:9px 12px 9px 0; white-space:normal; overflow:visible;
  font-family:inherit; font-size:14.5px;
}
.prose thead th{
  font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:500; border-bottom:1px solid var(--line); padding-bottom:9px;
}
.prose tbody td{border-bottom:1px solid var(--line); color:var(--muted); font-family:inherit; font-size:14.5px}
.prose tbody td:first-child{color:var(--ink); position:relative; padding:7px 12px 7px 36px}
/* one tiny UNO card per row: the same oval as the player cards, at pocket size */
.cg{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:24px; height:32px; border-radius:4px; background:var(--g);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.28);
}
.cg i{
  width:17px; height:11.5px; border-radius:50%; background:var(--oval); transform:rotate(-11deg);
  display:grid; place-items:center; font-style:normal; color:var(--g);
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:8.5px; line-height:1; letter-spacing:-.02em;
}
.cg svg{width:9px; height:9px; display:block}
.cg.wild{background:#1A1720}
.cg.wild i{
  background:conic-gradient(var(--c1) 0 25%, var(--c4) 0 50%, var(--c2) 0 75%, var(--c3) 0);
  color:#fff; text-shadow:0 0 2px rgba(0,0,0,.6);
}
.prose tbody td:last-child{
  font-family:"DM Mono",monospace; color:var(--ink); font-weight:500;
  white-space:nowrap; text-align:right; padding-right:0; font-variant-numeric:tabular-nums;
}

.sitefoot{border-top:1px solid var(--line)}
.sitefoot div{
  max-width:760px; margin:0 auto; padding:22px 16px calc(38px + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; justify-content:space-between;
  font-size:13px; color:var(--muted);
}
.sitefoot a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.sitefoot a:hover{border-bottom-color:var(--ink)}

/* ── show everyone: quieter than the save button, so the primary stays singular ── */
.showall{
  background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:13px;
  padding:12px 16px; font-weight:700; font-size:15px; letter-spacing:-.01em; width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:var(--shadow);
}
.showall .ico{font-size:15px; opacity:.6}
.showall:hover{border-color:var(--ink)}

/* ── stepped round entry ───────────────────── */
.step{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink)}
.stepno{
  width:19px; height:19px; border-radius:50%; background:var(--ink); color:var(--surface);
  font-family:"DM Mono", monospace; font-size:11px; font-weight:500;
  display:grid; place-items:center; flex:none;
}
.undo{
  align-self:center; background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:5px 9px; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.undo:hover{color:var(--ink); border-color:var(--muted)}

/* ── full-screen scoreboard: scores only, sized in vh so one row per player
      fills the height in portrait and landscape alike ── */
body.noscroll{overflow:hidden}
.stage[hidden]{display:none}
.stage{
  position:fixed; inset:0; z-index:70; background:var(--ground); display:flex; flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}
.stagehead{
  display:flex; align-items:center; gap:12px; flex:none; padding:2px 2px 10px;
  font-family:"DM Mono", monospace; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.stagehead span:nth-of-type(1){flex:1}
.stageclose{
  background:var(--surface2); border:0; border-radius:9px; color:var(--ink);
  width:34px; height:34px; font-size:21px; line-height:1; flex:none;
}
.stagelist{
  list-style:none; margin:0 auto; padding:0; flex:1; width:100%; max-width:1100px;
  display:flex; flex-direction:column; gap:8px; min-height:0;
}
.stagelist li{
  flex:1; min-height:0; background:var(--c); color:var(--on); border-radius:16px;
  display:flex; align-items:center; gap:clamp(10px,3vw,20px); padding:0 clamp(14px,4vw,26px);
}
.srank{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800;
  font-size:clamp(1rem,3.4vh,1.6rem); opacity:.7; flex:none; width:1.2em;
}
.sname{
  flex:1; min-width:0; font-family:"Bricolage Grotesque", sans-serif; font-weight:700;
  font-size:clamp(1.05rem,4.2vh,2.1rem); letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sgap{
  font-family:"DM Mono", monospace; font-size:clamp(.6rem,1.8vh,.85rem); letter-spacing:.05em;
  text-transform:uppercase; opacity:.76; flex:none; text-align:right;
}
.sgap.lead{opacity:.95; font-weight:500}
.stot{
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800;
  font-size:clamp(1.9rem,8vh,4.2rem); line-height:1; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; flex:none; min-width:2.6ch; text-align:right;
}
@media (max-width:359px){ .sgap{display:none} }
/* landscape: two columns buys roughly double the numeral height, which is what
   actually matters when the phone is lying on the table between four people */
@media (orientation:landscape) and (max-height:600px){
  .stagelist{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:8px}
  .stot{font-size:clamp(2rem,15vh,4.2rem)}
  .sname{font-size:clamp(1.05rem,7vh,2.1rem)}
  .srank{font-size:clamp(1rem,5vh,1.6rem)}
  .sgap{font-size:clamp(.6rem,3vh,.85rem)}
}

/* ── dil seçici ─────────────────────────────── */
.langbar{max-width:760px; margin:0 auto; padding:14px 16px 0; display:flex; justify-content:flex-end}
.langs{display:flex; gap:2px; background:var(--surface2); border-radius:9px; padding:2px}
.langs a{
  font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:5px 9px; border-radius:7px; line-height:1;
}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="page"]{background:var(--surface); color:var(--ink); font-weight:500; box-shadow:var(--shadow)}
.hero{padding-top:14px}
.sitefoot .tm{flex-basis:100%; font-size:11.5px; opacity:.72; margin-top:2px; max-width:70ch}