/* Dartoase: styles.
 * Palette from the dartboard: black, cream, red, green. Double = green,
 * Triple = red. Flat surfaces, one colour per state, no glow. */
:root{
  --bg:#121211; --bg2:#1a1a18; --panel:#22221f; --panel2:#171715; --line:#34332f; --line2:#2a2926;
  --txt:#f0ebe0; --muted:#a39e91; --faint:#6f6b62; --cream:#efe6d2;
  --red:#c8302b; --red-txt:#ef7a72; --red-bg:#3a1a18;
  --green:#1f8a4f; --green-txt:#5cc98b; --green-bg:#16301f;
  --radius:8px; --radius-sm:6px;
  --shadow:0 12px 32px rgba(0,0,0,.5);
  /* horizontal safe areas; on iPhone pwa.js zeroes the side without the notch */
  --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px);
}
html[data-notch="left"]{--sa-r:0px}
html[data-notch="right"]{--sa-l:0px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--txt);overflow:hidden;user-select:none;-webkit-user-select:none;
  font-variant-numeric:tabular-nums;
}
button{font-family:inherit;touch-action:manipulation;color:inherit}
h1,h2,h3{font-size:inherit;font-weight:inherit}
.hidden{display:none !important}
.screen{height:100vh;height:100dvh;width:100vw}
.good{color:var(--green-txt)}.bad{color:var(--red-txt)}.muted{color:var(--muted)}
.ico{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.noscript{padding:40px;text-align:center;color:var(--muted)}

/* visible focus for keyboard users, never for taps */
:focus{outline:none}
:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
input:focus-visible{outline:none}

/* ============ SETUP ============ */
#setup{display:flex;align-items:flex-start;justify-content:center;padding:min(4vh,32px);padding-top:calc(min(4vh,32px) + env(safe-area-inset-top));padding-bottom:calc(min(4vh,32px) + env(safe-area-inset-bottom));overflow-y:auto}
.setup-card{position:relative;width:min(1100px,96vw);background:var(--bg2);border-radius:var(--radius);padding:clamp(20px,3.2vh,40px) clamp(20px,4vw,56px)}
.logo{display:flex;justify-content:center;margin:0 0 clamp(16px,3vh,28px);color:var(--cream)}
.wordmark{display:block;height:clamp(40px,7.4vh,64px);width:auto}

.mode-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mode-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border-radius:var(--radius);border:2px solid var(--line);background:var(--panel);cursor:pointer;text-align:left}
.mt-title{font-size:clamp(16px,2.4vh,19px);font-weight:700}
.mt-tag{font-size:13px;color:var(--muted)}
.mode-tile.active{border-color:var(--cream);background:var(--panel)}
.mode-tile.active .mt-tag{color:var(--txt)}
.mode-rules{color:var(--muted);font-size:14px;line-height:1.55;margin:12px 2px 22px;min-height:3em;max-width:72ch}

.setup-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(18px,3vw,40px)}
.block-head{display:flex;justify-content:space-between;align-items:baseline}
.block-label{display:block;color:var(--txt);font-size:15px;font-weight:700;margin-bottom:9px}
.player-count{color:var(--muted);font-weight:400;margin-left:6px}
.link-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.link-btn:hover{color:var(--txt)}
.setup-block{margin-bottom:20px}
.name-list{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.name-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:2px 2px}
.name-row:focus-within{border-bottom-color:var(--cream)}
.name-row .pnum{width:22px;flex:0 0 22px;color:var(--faint);font-weight:700;font-size:13px;text-align:right}
.name-row input{flex:1;background:transparent;border:none;color:var(--txt);font-size:17px;padding:10px 2px;min-width:0;font-family:inherit}
.name-row input::placeholder{color:var(--faint)}
.preset-row{display:flex;gap:8px;margin-bottom:8px}
.preset{flex:1;padding:12px 0;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);font-size:20px;font-weight:700;cursor:pointer}
.preset.active{background:var(--cream);border-color:var(--cream);color:#151513}
.custom-target{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--txt);font-size:17px;padding:11px 14px;font-family:inherit}
.custom-target:focus{border-color:var(--cream)}
.custom-target::placeholder{color:var(--faint)}
.seg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg-row.n2{grid-template-columns:repeat(2,1fr)}
.seg-row.n4{grid-template-columns:repeat(4,1fr)}
.rule-btn{padding:11px 4px;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:600;cursor:pointer;text-align:center;line-height:1.15}
.rule-btn.active{background:var(--cream);border-color:var(--cream);color:#151513}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;color:var(--txt);min-height:44px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{width:46px;height:26px;border-radius:13px;background:var(--line);position:relative;flex:0 0 46px;transition:background .15s}
.switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--cream);transition:left .15s}
.switch input:checked + .switch-track{background:var(--green)}
.switch input:checked + .switch-track .switch-thumb{left:23px}
.switch input:focus-visible + .switch-track{outline:2px solid var(--cream);outline-offset:2px}
.primary-btn{display:block;width:100%;margin-top:22px;padding:17px;border:none;border-radius:var(--radius);background:var(--green);color:#fff;font-size:21px;font-weight:700;cursor:pointer}
.primary-btn:hover{background:#238f54}
.setup-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 22px;margin-top:14px}
.install-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============ GAME shell ============ */
#game{display:flex;flex-direction:column;position:relative}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(8px + env(safe-area-inset-top)) max(16px,var(--sa-r)) 8px max(16px,var(--sa-l));background:var(--bg2);border-bottom:1px solid var(--line);flex:0 0 auto;z-index:5}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;white-space:nowrap}
.brand-mark{width:18px;height:18px;flex:0 0 18px}
.meta{display:flex;gap:10px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;min-width:0}
.meta span+span{border-left:1px solid var(--line);padding-left:10px}
.topbar-right{display:flex;gap:8px;flex:0 0 auto}
.ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--panel);border:1px solid var(--line);padding:9px 14px;min-height:40px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer}
.ghost-btn:hover{border-color:var(--faint)}
.ghost-btn:disabled{opacity:.4}

.toast{position:fixed;top:calc(60px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:80;padding:12px 22px;border-radius:var(--radius);font-size:19px;font-weight:700;box-shadow:var(--shadow);max-width:80vw;text-align:center;animation:pop .2s ease-out;pointer-events:none}
.toast.elim{background:var(--red);color:#fff}
.toast.bust{background:var(--panel);color:var(--txt);border:1px solid var(--red)}
.toast.info{background:var(--panel);color:var(--txt);border:1px solid var(--line);font-size:17px}
@keyframes pop{from{transform:translateX(-50%) translateY(-6px);opacity:0}to{transform:translateX(-50%);opacity:1}}

/* ============ board: pad + side ============ */
.board2{flex:1;display:grid;grid-template-columns:1fr 400px;gap:14px;padding:14px;min-height:0}
.board2.mode-cricket{grid-template-columns:minmax(300px,.8fr) 1.3fr}
.padwrap{display:flex;flex-direction:column;gap:10px;min-height:0}
.mult-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:0 0 auto}
.mult{padding:13px 0;border-radius:var(--radius);border:2px solid var(--line);background:var(--panel);font-size:clamp(17px,2.6vh,22px);font-weight:700;cursor:pointer}
.mult[data-m="1"].active{background:var(--cream);border-color:var(--cream);color:#151513}
.mult[data-m="2"].active{background:var(--green);border-color:var(--green);color:#fff}
.mult[data-m="3"].active{background:var(--red);border-color:var(--red);color:#fff}

.numpad{flex:1;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:8px;min-height:0}
.numpad.cricket{grid-template-columns:repeat(3,1fr)}
.num{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);font-size:clamp(22px,4.4vh,34px);font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.numpad.cricket .num{font-size:clamp(30px,7vh,56px)}
.numpad .num[data-armed="2"]{border-color:var(--green);color:var(--green-txt)}
.numpad .num[data-armed="3"]{border-color:var(--red);color:var(--red-txt)}
.num.target{background:var(--green-bg);border-color:var(--green)}
.num.enemy{background:var(--red-bg);border-color:var(--red)}
.deco:empty{display:none}
.deco{display:block;line-height:1}
.padtag{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num.target .padtag{color:var(--green-txt)}.num.enemy .padtag{color:var(--red-txt)}

.special-row{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:8px;flex:0 0 auto;height:clamp(76px,12vh,104px)}
.special-row .num{line-height:1.05;font-size:clamp(16px,2.5vh,21px)}
.special-row .num small{font-size:.62em;color:var(--muted);font-weight:600}
.special{background:var(--panel2)}
.special.miss small{color:var(--red-txt)}
.num.next{flex-direction:row;gap:4px;background:var(--green);border-color:var(--green);color:#fff;font-size:clamp(16px,2.5vh,21px)}
.num.next .ico{width:1.1em;height:1.1em;stroke-width:2.6;order:2}

/* tap feedback (pointer-driven, see game/tap.js) */
.num.pressed,.mult.pressed,.ghost-btn.pressed,.rule-btn.pressed,.preset.pressed,.mode-tile.pressed{transform:scale(.96);background:#2f2e2a;transition:transform .04s,background .04s}
.num.pressed .nlabel{display:inline-block;transform:scale(1.15);transition:transform .06s}
.nlabel{display:inline-block;transition:transform .15s}
.num.next.pressed,.primary-btn.pressed{transform:scale(.97);background:#18733f}
.mult[data-m="2"].pressed{background:#18733f}.mult[data-m="3"].pressed{background:#a82823}
.keypop{position:fixed;z-index:60;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--cream);border:2px solid var(--cream);color:#151513;font-weight:700;line-height:1;white-space:nowrap;padding:0 .35em;box-sizing:border-box;overflow:hidden;pointer-events:none;box-shadow:var(--shadow);transform-origin:50% 100%}
.keypop.m2{background:var(--green);border-color:var(--green);color:#fff}
.keypop.m3{background:var(--red);border-color:var(--red);color:#fff}
.keypop.show{animation:keyIn .1s ease-out both}
.keypop.out{animation:keyOut .14s ease-in both}
@keyframes keyIn{from{transform:scale(.8) translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes keyOut{from{transform:none;opacity:1}to{transform:scale(.9) translateY(4px);opacity:0}}

/* pips (marks on pad, sets, legs, lives) */
.pips{display:inline-flex;gap:4px;vertical-align:middle}
.pips i{display:block;width:9px;height:9px;border-radius:50%;background:var(--line)}
.pips i.on{background:var(--green)}
.padpips{margin-top:6px}
.padpips i{width:10px;height:10px}
.legs,.sets{margin-left:8px}.legs i.on{background:var(--cream)}
.sets i{border-radius:2px}.sets i.on{background:var(--cream)}
.lives i.on{background:var(--red)}
.lives i{width:11px;height:11px}

/* ---- side ---- */
.side{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.active-banner{background:var(--panel);border-radius:var(--radius);padding:12px 16px;flex:0 0 auto}
.banner-top{display:flex;justify-content:space-between}
.active-label{color:var(--muted);font-size:13px}
.active-name{display:block;min-height:1.2em;font-size:clamp(22px,3.4vh,30px);font-weight:700;color:var(--green-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.big-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
.big-num{font-size:clamp(34px,6vh,52px);font-weight:700;line-height:1}
.big-num small{font-size:.5em;color:var(--muted)}
.big-num.sm{font-size:clamp(26px,4.4vh,38px);margin-left:10px}
.big-cap{color:var(--muted);font-size:14px;display:inline-flex;align-items:center;gap:10px}
.big-cap span+span{border-left:1px solid var(--line);padding-left:10px}
.knum{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .2em;border-radius:var(--radius-sm);background:var(--panel2);border:2px solid var(--green);font-size:clamp(26px,4.4vh,36px);font-weight:700}
.finish-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;border-top:1px solid var(--line);padding:9px 0 0;font-size:15px;min-height:42px}
.hint-list span+span{border-left:1px solid var(--line);padding-left:8px}
.fin-label{font-size:13px;color:var(--muted);font-weight:600;margin-right:2px}
.fin-label.kill{color:var(--red-txt)}
.charge{color:var(--muted);margin-left:2px}
.seg{font-size:clamp(18px,3vh,24px);font-weight:700;color:var(--cream)}
.seg.dim{color:var(--faint)}
.finish-box .seg{font-size:clamp(17px,2.8vh,23px)}
.visit-darts{display:flex;gap:6px;margin-top:10px}
.dchip{flex:1;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 6px;font-size:15px;font-weight:700;min-height:31px}
.dchip.empty{border-style:dashed;opacity:.5}
.dchip.bust{color:var(--red-txt);border-color:var(--red);text-decoration:line-through;text-decoration-thickness:2px}
.dchip.dud{color:var(--faint);border-style:dotted}

.progress{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .25s}
.progress.lg{height:10px;margin-top:10px}

/* list panel (auto-scrolling cards) */
.panel{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding-right:2px;overflow:auto}
.panel.autoscroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.panel.autoscroll::-webkit-scrollbar{display:none}
.prow{display:flex;align-items:center;gap:12px;background:var(--panel);border:2px solid transparent;border-radius:var(--radius);padding:10px 13px;flex:0 0 auto;transition:border-color .15s,opacity .15s}
.next-badge{display:inline-block;vertical-align:2px;margin-left:8px;padding:0 6px;border-radius:4px;border:1px solid var(--faint);color:var(--muted);font-size:11px;font-weight:600;line-height:1.5}
.prow.upnext{border-color:var(--line)}
.cboard thead th.cp{position:relative;padding-top:20px}
.cp .next-badge{position:absolute;top:3px;left:50%;transform:translateX(-50%);margin:0;font-size:10px;padding:0 5px}
.prow.active{border-color:var(--green)}
.prow.won{border-color:var(--cream)}
.prow.out{opacity:.4}
.prow.killer .pscore{color:var(--red-txt)}
.prow.bump{animation:bump .3s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}
.prow.flash-elim{animation:flashRed .7s ease}
@keyframes flashRed{0%{border-color:var(--red);background:var(--red-bg)}100%{}}
.place{width:30px;text-align:center;flex:0 0 30px;color:var(--faint);font-size:15px;font-weight:700}
.pinfo{flex:1;min-width:0}
.pname{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstats{display:flex;gap:12px;font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap}
.pstats b{color:var(--txt)}
.pdiff{font-size:13px;font-weight:600;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdiff.lead,.pdiff.safe{color:var(--green-txt)}
.pdiff.threat{color:var(--red-txt)}
.pfinish{font-size:13px;color:var(--cream);font-weight:600;margin-top:2px}
.pfinish.muted{color:var(--muted)}
.pfinish.ko{color:var(--red-txt)}
.kline{display:flex;align-items:center;gap:10px;margin-top:4px}
.kline .pdiff{margin:0}
.pscore-wrap{text-align:right;flex:0 0 auto}
.pscore{font-size:32px;font-weight:700;line-height:1}
.prow.active .pscore{color:var(--green-txt)}
.pneed{font-size:12px;color:var(--muted);margin-top:2px}

/* ============ CRICKET BOARD ============ */
.cboard-wrap{flex:1;min-height:0;overflow:auto;background:var(--panel);border-radius:var(--radius);padding:6px}
.cboard{width:100%;height:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.cboard th,.cboard td{text-align:center;vertical-align:middle;border-bottom:1px solid var(--line2)}
.cboard tbody tr:last-child td{border-bottom:none}
.cboard thead th{padding:8px 4px 10px;border-bottom:1px solid var(--line)}
.cboard .cnum-h,.cboard .cnum,.cboard .cnum-f{width:74px}
.cboard.mirror .cnum-h,.cboard.mirror .cnum,.cboard.mirror .cnum-f{width:110px}
.cp-name{font-size:clamp(14px,2.2vh,19px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.cp-pts{font-size:clamp(28px,5vh,46px);font-weight:700;line-height:1.05}
.cp.active .cp-name{color:var(--green-txt)}
.cp.active{background:var(--green-bg);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.cp.won .cp-name,.cp.won .cp-pts{color:var(--cream)}
.cp.upnext .cp-name{color:var(--txt)}
.cnum{font-size:clamp(22px,4.2vh,36px);font-weight:700;color:var(--txt)}
.cm{color:var(--muted)}
.cm.active{background:var(--green-bg)}
.cm svg{width:clamp(30px,6vh,52px);height:clamp(30px,6vh,52px);stroke:currentColor;stroke-width:3.6;stroke-linecap:round;fill:none;display:block;margin:auto}
.cm.closed{color:var(--green-txt)}
.cboard tr.dead td{opacity:.28}
.cboard tr.dead .cnum{text-decoration:line-through}
.cboard tr.can-score .cnum{color:var(--green-txt)}
.cboard tr.can-score .cnum::after{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--green);margin:3px auto 0}
.cboard tr.under-fire .cnum{color:var(--red-txt)}
.cboard tr.under-fire .cnum::after{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--red);margin:3px auto 0}
.cboard tfoot td{padding:8px 4px 4px;font-size:14px;font-weight:600;color:var(--muted);border-top:1px solid var(--line);border-bottom:none}
.cboard tfoot td.active{color:var(--green-txt)}
.cboard .cnum-f{font-size:12px}
.cboard.dense .cm svg{width:clamp(22px,4.4vh,36px);height:clamp(22px,4.4vh,36px)}
.cboard.dense .cp-pts{font-size:clamp(20px,3.4vh,30px)}
.cboard.dense .cp-name{font-size:13px}

/* ============ language / keys / sound buttons ============ */
.lang-btn,.keys-btn{display:inline-flex;align-items:center;gap:6px}
.lang-btn svg,.keys-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.lang-code{font-size:13px;font-weight:700}
.sound-btn{display:inline-flex;align-items:center;padding:8px 10px}
.sound-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sound-btn .snd-x{display:none}
.sound-btn.muted{opacity:.6}
.sound-btn.muted .snd-wave{display:none}
.sound-btn.muted .snd-x{display:inline}
.setup-lang{position:absolute;top:14px;right:14px;padding:7px 11px}
@media (hover:none){.keys-btn{display:none}}

/* ============ DIALOG ============ */
.overlay.dialog{z-index:70}
.dialog-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 20px;box-shadow:var(--shadow);width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;animation:pop2 .16s ease-out}
.dialog-card.wide{width:min(620px,100%)}
.dialog-title{font-size:21px;font-weight:700;line-height:1.25;margin-bottom:8px}
.dialog-text{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:18px}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.dialog-actions.single{grid-template-columns:1fr}
.dialog-actions .ghost-btn,.dialog-actions .primary-btn,.danger-btn{margin:0;padding:13px 10px;font-size:16px;font-weight:700;border-radius:var(--radius-sm)}
.danger-btn{background:var(--red);border:none;color:#fff;cursor:pointer}
.danger-btn.pressed{background:#a82823;transform:scale(.97)}
.lang-list{display:flex;flex-direction:column;gap:6px}
.lang-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);border:2px solid var(--line);background:var(--panel);font-size:16px;font-weight:600;cursor:pointer;text-align:left}
.lang-opt small{color:var(--muted);font-weight:400;font-size:13px}
.lang-opt.active{border-color:var(--cream)}
.lang-opt.pressed{transform:scale(.98)}
table.keys{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4}
table.keys td{padding:7px 6px;border-bottom:1px solid var(--line2);vertical-align:top}
table.keys td:first-child{white-space:nowrap;width:1%;padding-right:14px}
.keys-head{font-size:15px;font-weight:700;margin:18px 0 4px}
kbd{display:inline-block;font-family:inherit;font-size:13px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--panel);border:1px solid var(--line);border-bottom-width:2px}

/* local history */
.hist-list{list-style:none;display:flex;flex-direction:column;margin:0 0 6px}
.hist-item{padding:10px 0;border-top:1px solid var(--line2)}
.hist-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.hist-meta{display:flex;gap:8px;flex-wrap:wrap}
.hist-meta span+span{border-left:1px solid var(--line);padding-left:8px}
.hist-players{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:16px}
.hist-win{color:var(--cream)}
.hist-clear{margin-top:6px}
.hist-clear .ico{width:16px;height:16px}

/* ============ HINTS ============ */
.rotate-hint{position:absolute;left:50%;top:calc(58px + env(safe-area-inset-top));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;width:min(460px,calc(100% - 20px));padding:10px 10px 10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);font-size:14.5px;font-weight:600;line-height:1.35;animation:hintIn .25s ease-out}
.rotate-icon{width:34px;height:34px;flex:0 0 34px;fill:none;stroke:var(--cream);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:tilt 2.4s ease-in-out 2;transform-origin:50% 45%}
.rotate-icon .arc{stroke:var(--muted)}
.rotate-hint span{flex:1}
.hint-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel2);color:var(--muted);cursor:pointer}
.hint-close .ico{width:18px;height:18px}
/* PWA install: hint banner (game, mobile landscape), setup link, steps dialog */
.install-hint{width:min(580px,calc(100% - 20px))}
.install-icon{width:34px;height:34px;flex:0 0 34px;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.install-icon .bar{stroke:var(--red)}
.install-icon .arrow{stroke:var(--green-txt)}
.install-go{flex:0 0 auto;height:36px;padding:0 14px;border-radius:var(--radius-sm);border:none;background:var(--green);color:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.pwa-steps{margin:0 0 18px;padding:0;list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:10px}
.pwa-steps li{counter-increment:step;display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.4}
.pwa-steps li::before{content:counter(step);flex:0 0 28px;height:28px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--cream);font-weight:700;display:flex;align-items:center;justify-content:center}
.pwa-steps b{color:var(--txt)}
.pwa-ico{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin:0 2px;fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pwa-note{color:var(--muted);font-size:13.5px;line-height:1.4;margin:-6px 0 18px}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes tilt{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}

/* ============ WIN ============ */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(12,12,11,.9);display:flex;align-items:center;justify-content:center;padding:16px}
.win-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:32px 40px;text-align:center;box-shadow:var(--shadow);animation:pop2 .2s ease-out;max-width:min(760px,96vw);max-height:94vh;overflow:auto}
@keyframes pop2{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.win-label{color:var(--muted);font-size:15px}
.win-name{font-size:clamp(38px,8vh,72px);font-weight:700;color:var(--cream);margin:2px 0 4px;line-height:1.1}
.win-sub{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;color:var(--muted);margin-bottom:18px}
.win-sub span+span{border-left:1px solid var(--line);padding-left:10px}
.win-table{margin-bottom:22px;overflow-x:auto}
.stats{width:100%;border-collapse:collapse;font-size:15px}
.stats th{color:var(--muted);font-size:13px;font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line)}
.stats td{padding:8px 10px;border-bottom:1px solid var(--line2);font-weight:600}
.stats tr:first-child td{color:var(--cream)}
.stats th:nth-child(n+2),.stats td:nth-child(n+2){text-align:center}
.stats th:first-child,.stats td:first-child{text-align:left}
.win-actions{display:flex;flex-direction:column;gap:10px}
.win-actions .primary-btn{margin-top:0}
.win-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Phone held sideways: little height, so the header and the player banner
   shrink to one or two lines and the space goes to the list / cricket board. */
@media (orientation:landscape) and (max-height:540px){
  /* iPhone: the notch sits mid-height, the top bar can run to both edges */
  html[data-notch] .topbar{padding-left:20px;padding-right:20px}
  .install-hint{top:calc(48px + env(safe-area-inset-top));padding:6px 6px 6px 12px;font-size:13.5px}
  .pwa-intro{display:none}
  .pwa-steps{gap:6px;margin-bottom:12px}
  .pwa-steps li{font-size:14.5px;line-height:1.3}
  .pwa-note{margin:-2px 0 12px;font-size:12.5px}
  .topbar{padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:4px}
  .brand{font-size:15px}
  .ghost-btn{padding:5px 11px;min-height:34px;font-size:14px}
  .meta{font-size:12px}
  .board2{grid-template-columns:1fr minmax(300px,44%);gap:10px;padding:8px max(10px,var(--sa-r)) max(8px,env(safe-area-inset-bottom)) max(10px,var(--sa-l))}
  .board2.mode-cricket{grid-template-columns:minmax(270px,.75fr) 1.35fr}
  .padwrap{gap:6px}
  .mult-row{gap:6px}
  .mult{padding:6px 0;font-size:15px;border-radius:var(--radius-sm)}
  .numpad{gap:6px}
  .num{border-radius:var(--radius-sm);font-size:clamp(17px,5.6vh,24px)}
  .numpad.cricket .num{font-size:clamp(22px,8vh,32px)}
  .numpad.cricket .padpips{margin-top:3px}
  .special-row{gap:6px;height:clamp(42px,13vh,58px)}
  .special-row .num{font-size:clamp(11.5px,1.65vw,14px);padding:0 2px}
  .mode-cricket .special-row{grid-template-columns:1fr 1fr 1fr .9fr}
  .mode-cricket .special-row .num{font-size:12px}
  .side{gap:6px}
  /* banner: name, round and dart chips on one line, score and hint below */
  .active-banner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name top darts" "sub sub sub";column-gap:10px;row-gap:4px;align-items:center;padding:6px 10px 7px 12px;border-radius:var(--radius-sm)}
  .banner-top{grid-area:top}
  #throw-info{display:none}
  .active-label{font-size:12px}
  .active-name{grid-area:name;font-size:18px;margin:0;min-width:0}
  .active-sub{grid-area:sub;display:flex;align-items:center;gap:8px;min-width:0}
  .visit-darts{grid-area:darts;margin:0;width:156px;gap:4px}
  .dchip{padding:3px 4px;min-height:26px;font-size:13px}
  .big-line{margin:0;flex:0 0 auto;flex-wrap:nowrap;gap:6px}
  .big-num{font-size:26px}
  .big-num.sm{font-size:21px;margin-left:4px}
  .big-cap{font-size:12px;gap:6px}
  .big-cap span+span{padding-left:6px}
  .knum{font-size:19px}
  .finish-box{margin:0;flex:1 1 auto;min-width:0;min-height:28px;padding:2px 0 2px 8px;border-top:none;border-left:1px solid var(--line);font-size:13px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;gap:6px}
  .finish-box .seg{font-size:16px}
  .fin-label{font-size:12px}
  .progress.lg{margin:0;flex:1 1 auto}
  .panel{gap:5px}
  .prow{padding:6px 10px;border-radius:var(--radius-sm);gap:10px}
  .pname{font-size:15px}
  .pstats,.pdiff,.pfinish{font-size:12px}
  .pstats{margin-top:1px}
  .pscore{font-size:24px}
  .pneed{font-size:11px}
  .place{width:22px;flex-basis:22px;font-size:13px}
  .cboard-wrap{padding:2px 4px;border-radius:var(--radius-sm)}
  .cboard thead th{padding:3px 2px 4px}
  .cboard thead th.cp{padding-top:17px}
  .cp-name,.cboard.dense .cp-name{font-size:13px}
  .cp-pts,.cboard.dense .cp-pts{font-size:clamp(17px,5.4vh,24px)}
  .cnum{font-size:clamp(15px,4.8vh,21px)}
  .cm svg,.cboard.dense .cm svg{width:clamp(16px,5.4vh,26px);height:clamp(16px,5.4vh,26px)}
  .cboard .cnum-h,.cboard .cnum,.cboard .cnum-f{width:46px}
  .cboard.mirror .cnum-h,.cboard.mirror .cnum,.cboard.mirror .cnum-f{width:64px}
  .cboard tr.can-score .cnum::after,.cboard tr.under-fire .cnum::after{width:18px;height:2px;margin-top:1px}
  .cboard tfoot td{padding:2px;font-size:11.5px}
  .toast{top:calc(46px + env(safe-area-inset-top));font-size:16px;padding:10px 18px}
}
@media (max-width:900px){
  .mode-tiles{grid-template-columns:repeat(3,1fr)}
  .setup-grid{grid-template-columns:1fr}
}
@media (orientation:portrait){
  /* phone held upright: pad keeps fixed key sizes, the player list takes what is left */
  .board2,.board2.mode-cricket{display:flex;flex-direction:column;gap:8px;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
  .side{order:-1;flex:1 1 auto;gap:6px}
  .panel{max-height:none;flex:1 1 0;gap:5px}
  .padwrap{flex:0 0 auto;gap:8px}
  .mult-row{gap:6px}
  .mult{padding:10px 0;font-size:16px}
  .numpad,.numpad.cricket{flex:0 0 auto;grid-auto-rows:clamp(42px,6.6vh,62px);gap:6px;min-height:0}
  .num{border-radius:var(--radius-sm);font-size:clamp(20px,3.2vh,28px)}
  .numpad.cricket{grid-auto-rows:clamp(60px,9vh,84px)}
  .numpad.cricket .num{font-size:clamp(24px,4vh,34px)}
  .numpad.cricket .padpips{margin-top:3px}
  .special-row{gap:6px;height:clamp(50px,7.4vh,68px)}
  .special-row .num{font-size:15px}
  .active-banner{padding:8px 12px;border-radius:var(--radius-sm)}
  .active-name{font-size:21px}
  .big-num{font-size:clamp(28px,4.6vh,40px)}
  .big-num.sm{font-size:clamp(22px,3.6vh,30px)}
  .knum{font-size:24px}
  .finish-box{margin-top:6px;padding:6px 0 0;min-height:34px;font-size:14px}
  .visit-darts{margin-top:6px}
  .dchip{padding:3px 6px;min-height:26px;font-size:14px}
  .prow{padding:7px 11px;border-radius:var(--radius-sm)}
  .pscore{font-size:26px}
  .pname{font-size:16px}
  .mode-cricket .side{flex:1 1 auto}
  .cboard-wrap{padding:2px}
  .cboard thead th{padding:4px 2px 6px}
  .cp-name{font-size:14px}
  .cp-pts,.cboard.dense .cp-pts{font-size:clamp(20px,3.4vh,28px)}
  .cnum{font-size:clamp(18px,3vh,26px)}
  .cm svg,.cboard.dense .cm svg{width:clamp(20px,3.4vh,30px);height:clamp(20px,3.4vh,30px)}
  .cboard .cnum-h,.cboard .cnum,.cboard .cnum-f{width:52px}
}
@media (max-width:700px){
  .setup-card{padding-top:58px}
  .setup-lang{top:12px;right:12px}
}
@media (max-width:560px){
  .topbar{padding-left:max(10px,var(--sa-l));padding-right:max(10px,var(--sa-r))}
  .brand{font-size:15px}
  .mode-tiles{grid-template-columns:repeat(2,1fr)}
  .name-list{grid-template-columns:1fr}
  .meta{display:none}
  .ghost-btn{padding:8px 10px;font-size:14px}
  .topbar-right{gap:5px}
  .topbar .lang-btn{padding:8px 8px}
  .topbar .lang-btn svg{display:none}
  .topbar .sound-btn{padding:7px 8px}
  .topbar-left{overflow:hidden}
  .brand{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:420px){
  .topbar .ghost-btn{padding:7px 8px;font-size:13px}
  .topbar-right{gap:4px}
  .sound-btn svg{width:18px;height:18px}
  /* narrow phones: undo shows only its icon (label stays in title/aria-label) */
  .topbar .undo-btn .btn-lbl{display:none}
}

/* "Reduce motion" in the system: no animations, no sliding */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}