@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format("woff2")}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2")}@font-face{font-family:Barlow Semi Condensed;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2")}:root{--field: #0f2a31;--frame: #061418;--panel: #17404a;--bg-soft: #12363f;--line: #285663;--text: #f4f6ee;--text-2: #a9c2c6;--mine: #f6e9c8;--mine-ink: #2a2420;--foe: #2a3141;--foe-line: #4b5770;--neutral: #326370;--rock: #8a7a5e;--black: #000;--pawn: #ffbe3d;--infantry: #4c93ff;--cavalry: #ff5d4f;--archers: #34cf8c;--accent: #ffbe3d;--accent-ink: #2b1d00;--good: #6ee7a8;--good-ink: #0b2a1c;--bad: #ff7a6b;--bad-soft: rgba(255, 122, 107, .36);--plan: #f6e9c8;--target: #ffbe3d;--sel: #21515d;--silver: #c9d2e3;--ink-on-cell: #1d1d1d;--font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-cond: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;--glyph-font: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", sans-serif;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--board: min( calc(100vw - 48px) , calc(100dvh - 446px - var(--safe-t) - var(--safe-b)), 520px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{margin:0;background:radial-gradient(120% 70% at 50% 0%,#163a44 0%,var(--field) 62%) fixed,var(--field);color:var(--text);font:16px/1.4 var(--font);overscroll-behavior:none;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}.num{font-family:var(--font-cond);font-variant-numeric:tabular-nums}.muted{color:var(--text-2);font-size:14px;margin:4px 0}.good{color:var(--good)}.bad{color:var(--bad)}.neutral{color:var(--text-2)}ol,ul{margin:0;padding:0;list-style:none}.noscript{padding:24px;text-align:center}.screen{display:none;min-height:100%}.screen.active{display:flex;flex-direction:column}.home-inner{width:100%;max-width:460px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;gap:22px;padding:calc(28px + var(--safe-t)) max(20px,var(--safe-r)) calc(20px + var(--safe-b)) max(20px,var(--safe-l))}.brand{display:flex;gap:14px;align-items:center}.brand .logo{width:64px;height:64px;border-radius:12px;box-shadow:0 8px 24px #00000059;flex:none}.brand h1{font-family:var(--font-cond);font-weight:700;font-size:42px;line-height:1;letter-spacing:.06em;text-transform:uppercase;margin:0}.brand .lede{color:var(--text-2);margin:6px 0 0;max-width:32ch;font-size:15px}.hero{margin:0;display:grid;gap:12px;justify-items:center;text-align:center}.hero-board{display:grid;grid-template-columns:repeat(6,34px);gap:3px;padding:4px;border-radius:12px;background:var(--frame);box-shadow:0 12px 30px #00000059}.hero-board i{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;font-style:normal;position:relative}.hero-board .n{background:var(--neutral)}.hero-board .m{background:var(--mine)}.hero-board .f{background:var(--foe);box-shadow:inset 0 0 0 1px var(--foe-line)}.hero-board .b{background:#000;color:#6b6b6b;font-size:14px}.hero-board .x{background:var(--rock)}.hero-board .pn:after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed var(--accent)}.hero-board .chip{width:24px;font-size:14px}.hero figcaption{color:var(--text-2);font-size:14px;max-width:36ch}@media (prefers-reduced-motion: no-preference){.hero-board .pn:after{animation:pulse 1.8s ease-in-out infinite}}.menu{display:grid;gap:10px;margin-top:auto}.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.continue{display:grid;gap:2px}.continue small{font-weight:500;font-size:13px;opacity:.8}.home-foot{color:var(--text-2);font-size:13px;text-align:center}.btn{min-height:50px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 16px;font-weight:600;cursor:pointer;text-align:center;touch-action:manipulation;transition:transform .08s ease,background .15s ease}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.quiet{background:transparent}.btn.danger{color:var(--bad);border-color:#ff7a6b80}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line)}.seg button{min-height:42px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font-weight:600;cursor:pointer}.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.icon-btn{width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);cursor:pointer;font-size:18px;display:grid;place-items:center}.game-screen{height:100dvh}.game{height:100%;width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:calc(8px + var(--safe-t)) max(16px,var(--safe-r)) calc(10px + var(--safe-b)) max(16px,var(--safe-l))}.topbar{display:flex;align-items:center;gap:8px;min-height:44px;flex:none}.topbar .icon-btn{width:42px;height:42px}.tools{display:flex;flex:none;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);overflow:hidden}.tools .icon-btn{border:0;border-radius:0;background:transparent;width:40px}.tools .icon-btn+.icon-btn{border-left:1px solid var(--line)}#btn-threats[aria-pressed=true]{color:var(--bad);background:#ff7a6b24}.topbar-space{flex:1 1 auto}.tools .icon-btn{width:42px;height:40px}.tools svg{display:block}.plate{display:flex;align-items:center;gap:10px;min-width:0;max-width:62%;height:44px;padding:4px 14px 4px 5px;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);color:var(--text);cursor:pointer}.plate .av{width:32px;height:32px;font-size:12px}.plate-t{display:grid;min-width:0;line-height:1.15;text-align:left}.plate-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plate-t small{font:600 12px/1.2 var(--font-cond);color:var(--text-2);letter-spacing:.02em;white-space:nowrap}.log{--srow: 15px;--srow-max: 24px;position:relative;margin:0 auto;flex:none;display:flex;flex-direction:column;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line);overflow:hidden}.log:has(>.v-sheet){flex:1 1 auto;min-height:calc(21px + var(--half, 10) * var(--srow) + 6px);max-height:calc(21px + var(--half, 10) * var(--srow-max) + 6px)}#log-body{flex:1 1 auto;min-height:0}.lswap{position:absolute;top:0;right:0;z-index:2;width:34px;height:19px;display:grid;place-items:center;padding:0;border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-bottom-left-radius:8px;background:var(--panel);color:var(--text-2);cursor:pointer}.lswap:after{content:"";position:absolute;inset:-10px -6px -14px -10px}.lswap:hover,.lswap[aria-pressed=true]{color:var(--accent)}.lswap svg{display:block}.shead{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(0,1fr);gap:4px;align-items:center;height:19px;padding:0 3px;margin-bottom:2px;border-bottom:1px solid var(--line);font:600 9.5px/1 var(--font-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}.shead span:first-child{text-align:center}#log-body.v-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.shalf{min-width:0;padding:0 3px 4px;display:flex;flex-direction:column}.shalf .shead{flex:none}.shalf+.shalf{border-left:1px solid var(--line)}.srow{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(0,1fr);gap:4px;align-items:center;width:100%;flex:1 1 0;min-height:var(--srow);max-height:var(--srow-max);padding:0 3px;border:0;border-radius:4px;background:transparent;color:var(--text);text-align:left;font:700 12px/1 var(--font-cond),var(--glyph-font);cursor:pointer}button.srow:hover{background:#ffffff0d}.srow.on{background:var(--sel);box-shadow:inset 0 0 0 1px var(--accent)}.srow.live{background:#ffbe3d17;cursor:default}.srow.empty{cursor:default}.sn{display:grid;place-items:center;height:min(calc(100% - 3px),16px);border-radius:3px;font:700 10px/1 var(--font-cond);font-variant-numeric:tabular-nums;color:var(--text-2)}.sn.me{background:var(--accent);color:var(--accent-ink)}.sn.foe{background:var(--silver);color:#10151f}.sn.even{box-shadow:inset 0 0 0 1px #3a6873}.sn.live{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.srow.empty .sn{opacity:.35}.sme,.sfoe{display:flex;gap:5px;align-items:center;min-width:0;overflow:hidden;white-space:nowrap}.sfoe .timer{margin-left:auto;font-size:11px}.ct{flex:none;font:inherit;color:var(--text)}.ct.pawn{color:var(--pawn)}.ct.infantry{color:#79adff}.ct.cavalry{color:#ff8478}.ct.archers,.ct.shot{color:var(--archers)}.ct.burn{color:#8fa3a8}.ct.trap{color:var(--accent)}.ct.bld{color:var(--mine)}.ct.pass,.ct.muted,.ct.more{color:var(--text-2);font-weight:600}.ct.ready{color:var(--good)}.ct.no{opacity:.5;text-decoration:line-through}.ct.ord{padding:0;border:0;border-bottom:1px dashed currentColor;border-radius:0;background:none;line-height:1.1;cursor:pointer}span.ct.ord{cursor:default}#log-body.v-strip{display:grid;gap:5px;padding:0 6px 6px}.strip-head{display:flex;gap:12px;padding:0 40px 0 3px;margin-bottom:0}.strip-head .key{display:flex;gap:5px;align-items:center;letter-spacing:.04em;text-transform:none;font-weight:500}.strip-head .key i{width:9px;height:9px;border-radius:2px;margin-left:4px}.strip-head .key i.me{background:var(--accent)}.strip-head .key i.foe{background:var(--silver)}.strip-head .key i.down{background:repeating-linear-gradient(45deg,rgba(255,122,107,.7) 0 2px,transparent 2px 4px)}.sgrid{display:grid;grid-template-columns:32px repeat(var(--cols, 20),minmax(0,1fr));gap:2px}.slabels,.scol{display:grid;grid-template-rows:12px 24px 24px;gap:2px;min-width:0}.slabels{align-items:center;font:600 8.5px/1 var(--font-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}.scol{padding:0;border:0;border-radius:4px;background:transparent;color:var(--text);cursor:pointer}.scol.on{box-shadow:0 0 0 1.5px var(--accent)}.scol.empty,.scol.live{cursor:default}.scol .rn{font:600 9px/12px var(--font-cond);text-align:center;color:var(--text-2);font-variant-numeric:tabular-nums}.scol.on .rn,.scol.live .rn{color:var(--accent)}.scol.empty .rn{opacity:.4}.lane{display:grid;place-items:center;border-radius:3px;font:700 10px/1 var(--font-cond);font-variant-numeric:tabular-nums}.lane.zero{box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2)}.lane.up.me{background:#ffbe3d33}.lane.up.foe{background:#c9d2e329}.lane.down{background:repeating-linear-gradient(45deg,rgba(255,122,107,.3) 0 3px,transparent 3px 6px);color:#ffb1a7}.lane.win.me{background:var(--accent);color:var(--accent-ink)}.lane.win.foe{background:var(--silver);color:#10151f}.scol.live .lane{box-shadow:inset 0 0 0 1px var(--accent);opacity:.8}.scol.empty .lane{box-shadow:inset 0 0 0 1px #28566380}.sdet{display:grid;grid-template-columns:32px 38px minmax(0,1fr) auto;column-gap:6px;row-gap:3px;align-items:center;padding-top:5px;border-top:1px solid var(--line)}.sdet .rn{grid-row:span 2;font:700 22px/1 var(--font-cond);color:var(--accent);text-align:center}.sdet .who{font:600 9.5px/1 var(--font-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}.sdet .toks{display:flex;gap:3px 9px;align-items:center;min-width:0;min-height:24px;overflow:hidden;white-space:nowrap;font:600 14px/1.25 var(--font-cond),var(--glyph-font)}.sdet button.tk.edit{font-size:13.5px;padding:1px 6px}.sdet .timer{margin-left:auto}.dl{font:700 12px/1 var(--font-cond);font-variant-numeric:tabular-nums}.dl.up{color:var(--good)}.dl.down{color:var(--bad)}.dl.zero{color:var(--text-2)}.tk{white-space:nowrap;font-family:var(--font-cond),var(--glyph-font)}.tk i{font-style:normal;margin-left:1px}.tk i.ok{color:var(--good)}.tk i.no{color:var(--bad)}button.tk.edit{padding:2px 7px;border-radius:7px;border:1px dashed var(--accent);background:var(--panel);color:var(--text);font:600 14px/1.25 var(--font-cond),var(--glyph-font);cursor:pointer}.tk.muted{color:var(--text-2);font-weight:500}.tk.ready{color:var(--good)}.ad{margin-left:5px;padding:0 4px;border-radius:4px;font-size:11.5px}.ad.good{background:var(--good);color:var(--good-ink)}.ad.bad{background:var(--bad);color:#fff}.timer{color:var(--text-2);font-variant-numeric:tabular-nums}.timer.urgent{color:var(--bad)}pre.notation{margin:0 0 8px;padding:10px 12px;border-radius:10px;background:var(--field);color:var(--accent);white-space:pre-wrap;font:600 13px/1.55 ui-monospace,DejaVu Sans Mono,monospace}.pips:empty{display:none}.actions:has(.pips:empty){grid-template-columns:minmax(0,1fr)}.steps{display:grid;margin:4px 0 2px}.step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.step .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font-cond)}.ic.done{background:var(--good);color:var(--good-ink)}.ic.run{border:2px solid var(--accent);color:var(--accent)}.ic.wait{border:2px solid var(--line);color:var(--text-2)}.ic.warn{background:var(--bad);color:#fff}.step .st{display:grid;line-height:1.25}.step .st b{font-size:14.5px;font-weight:600}.step .st small{font-size:12.5px;color:var(--text-2)}@media (prefers-reduced-motion: no-preference){.ic.run{animation:pulse 1.4s ease-in-out infinite}}.av{--av: var(--accent);--ring: var(--line);position:relative;width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--av);color:#14262b;font:700 13px/1 var(--font-cond);letter-spacing:.03em;box-shadow:0 0 0 2px var(--field),0 0 0 4px var(--ring)}.av.lg{width:76px;height:76px;font-size:28px;box-shadow:0 0 0 3px var(--panel),0 0 0 6px var(--ring)}.home-top{display:flex;justify-content:flex-end;margin-bottom:-6px}.profile-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);color:var(--text);cursor:pointer}.profile-chip span{display:grid;text-align:left;line-height:1.15}.profile-chip b{font-size:14px;font-weight:600}.profile-chip small{font:600 12px/1.2 var(--font-cond);color:var(--text-2);letter-spacing:.03em}.tier-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ring);margin-right:4px;vertical-align:0}.player{width:calc(var(--board) + 16px)}.log{width:max(calc(var(--board) + 16px),min(100%,460px))}.player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin:0 auto;min-height:38px;flex:none}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--font-cond);letter-spacing:.04em}.player.me .avatar{background:var(--mine);color:var(--mine-ink)}.player.foe .avatar{background:var(--foe);color:#fff;box-shadow:inset 0 0 0 1px var(--foe-line)}.who{display:grid;min-width:0;line-height:1.2}.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player.me .name{color:var(--mine)}.sub{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub.ready{color:var(--good)}.cells{display:grid;justify-items:end;line-height:1.1;min-width:0}.cells b{font-family:var(--font-cond);font-size:22px}.boardwrap{display:grid;grid-template-columns:10px auto;gap:6px;justify-content:center;flex:none}.evalbar{position:relative;width:10px;height:var(--board);border-radius:6px;background:var(--neutral);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}.evalbar .me{position:absolute;left:0;right:0;bottom:0;background:var(--mine);transition:height .5s ease}.evalbar .foe{position:absolute;left:0;right:0;top:0;background:var(--foe);transition:height .5s ease}.evalbar .tick{position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:var(--accent)}.evalbar .t35{top:35%}.evalbar .t65{top:65%}.board{width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:3px;padding:3px;border-radius:14px;background:var(--frame);box-shadow:0 12px 30px #00000061;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:box-shadow .2s}.board.review{box-shadow:0 0 0 2px var(--accent),0 12px 30px #00000061}.board.review .cell.dim{opacity:.5;filter:saturate(.8)}.board.waiting{opacity:.86}.cell{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:6px;display:grid;place-items:center;background:var(--neutral);cursor:pointer;box-shadow:inset 0 1px #ffffff1a,inset 0 -2px #00000047}.cell:disabled{cursor:default}.cell.mine{background:var(--mine);box-shadow:inset 0 1px #ffffffa6,inset 0 -2px #0000002e}.cell.foe{background:var(--foe);box-shadow:inset 0 0 0 1px var(--foe-line),inset 0 -2px #00000059}.cell.rock{background:var(--rock);background-image:linear-gradient(135deg,rgba(255,255,255,.14) 25%,transparent 25% 50%,rgba(0,0,0,.14) 50% 75%,transparent 75%);background-size:10px 10px}.cell.blocked{background:var(--black);background-image:repeating-linear-gradient(45deg,#000 0 5px,#1a1a1a 5px 7px)}.cell.blocked:after{content:"\2715";color:#6b6b6b;font-size:clamp(11px,calc(var(--board) / 18),20px)}.cell.bridge{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px)}.cell.mine.phx{box-shadow:inset 0 0 0 2px var(--accent),inset 0 -2px #0000002e}.cell.foe.phx{box-shadow:inset 0 0 0 2px var(--text-2),inset 0 -2px #00000059}.coord{position:absolute;left:3px;bottom:1px;font-family:var(--font-cond);font-size:9px;line-height:1;opacity:.5;pointer-events:none}.cell.mine .coord,.cell.mine .badge{color:var(--mine-ink)}.cell.threat:after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;background:repeating-linear-gradient(135deg,var(--bad-soft) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 2px var(--bad)}.chip{width:62%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:clamp(11px,calc(var(--board) / 20),24px);line-height:1;font-family:var(--glyph-font);box-shadow:0 1px #00000059;pointer-events:none;background-image:radial-gradient(circle at 34% 28%,#ffffff6b,#fff0 52%)}.chip.pawn{background-color:var(--pawn);color:#3a2a06}.chip.infantry{background-color:var(--infantry)}.chip.cavalry{background-color:var(--cavalry)}.chip.archers{background-color:var(--archers)}.cell.foe .chip{box-shadow:0 0 0 2px var(--foe),0 0 0 3px var(--mine)}.plan{position:absolute;inset:8%;border-radius:50%;border:2px dashed var(--plan);display:grid;place-items:center;pointer-events:none}.plan .chip{width:70%;opacity:.95}.plan .n{position:absolute;top:-6px;left:-6px;width:17px;height:17px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 10px/17px var(--font-cond);text-align:center}.plan .dir{position:absolute;right:-6px;bottom:-6px;width:17px;height:17px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 12px/17px var(--font-cond);text-align:center}.ghost{position:absolute;inset:14%;border-radius:50%;display:grid;place-items:center;pointer-events:none;animation:ghost 1.1s ease forwards}.ghost .chip{width:100%}.ghost.foe-move .chip{box-shadow:0 0 0 2px #000,0 0 0 4px var(--mine)}@keyframes ghost{0%{opacity:0;transform:scale(.6)}25%,80%{opacity:1;transform:scale(1)}to{opacity:.2}}.badge{position:absolute;font-size:clamp(9px,calc(var(--board) / 34),14px);line-height:1;pointer-events:none;color:var(--ink-on-cell)}.badge.cap{top:2px;right:3px}.badge.bld{right:3px;bottom:2px}.cell.foe .badge{color:var(--mine)}.shotmark{position:absolute;left:3px;top:1px;font-weight:700;font-size:12px;color:var(--bad);pointer-events:none}.trapmark{position:absolute;left:3px;top:1px;font-size:11px;color:var(--accent);pointer-events:none}.trapmark.planned{left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(15px,calc(var(--board) / 15),24px)}.mk{position:absolute;left:2px;top:2px;padding:1px 3px;border-radius:5px;pointer-events:none;font:700 clamp(9px,calc(var(--board) / 30),13px)/1.2 var(--font-cond);white-space:nowrap;color:#fff}.mk.win{background:var(--good);color:var(--good-ink)}.mk.lose{background:var(--bad)}.mk.neutral{background:var(--text-2);color:#0b1f24}.mk.black{background:#111}.pv{position:absolute;left:50%;bottom:2px;transform:translate(-50%);z-index:2;padding:1px 4px;border-radius:5px;pointer-events:none;white-space:nowrap;font:700 clamp(9px,calc(var(--board) / 30),12px)/1.2 var(--font-cond)}.pv.good{background:var(--good);color:var(--good-ink)}.pv.bad{background:var(--bad);color:#fff}.cell:has(.pv) .coord{opacity:0}.cell.split{background:#1b4651;overflow:hidden}.cell.split.burn{background:var(--black);background-image:repeating-linear-gradient(45deg,#000 0 5px,#1a1a1a 5px 7px)}.half{position:absolute;inset:0;pointer-events:none}.half.foe{clip-path:polygon(0 0,100% 0,100% 50%,0 50%)}.half.me{clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}.half.foe.filled{background:var(--foe)}.half.me.filled{background:var(--mine)}.half.lost{opacity:.42}.half.lost .chip{filter:grayscale(1)}.half .chip{position:absolute;left:37%;width:46%;transform:translate(-50%,-50%);font-size:clamp(9px,calc(var(--board) / 32),16px);box-sizing:border-box}.half.foe .chip{top:26%;box-shadow:0 0 0 1.5px var(--silver)}.half.me .chip{top:74%;box-shadow:0 1px #0000004d}.chip.trapc{background:#0f2a31bf;color:var(--accent);border:1.5px dashed var(--accent)}.chip.cutc{background:none;color:var(--bad);border:1px dashed var(--bad)}.half .chip.bldc{background:none;color:var(--mine-ink);box-shadow:none;font-size:clamp(10px,calc(var(--board) / 30),16px)}.half.foe .chip.bldc{color:var(--mine)}.seam{position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:#0614188c;pointer-events:none}.ring{position:absolute;inset:0;border-radius:6px;pointer-events:none}.ring.me{box-shadow:inset 0 0 0 2px var(--accent)}.ring.foe{box-shadow:inset 0 0 0 2px var(--silver)}.pill{position:absolute;right:3%;top:50%;transform:translateY(-50%);z-index:1;padding:1px 3px;border-radius:4px;pointer-events:none;white-space:nowrap;font:700 clamp(8px,calc(var(--board) / 40),12px)/1.15 var(--font-cond),var(--glyph-font);box-shadow:0 1px 2px #00000073}.pill.me{background:var(--accent);color:var(--accent-ink)}.pill.foe{background:var(--silver);color:#10151f}.pill.even{background:var(--text-2);color:#0f2a31}.pill.black{background:#000;color:var(--bad)}.cutm{position:absolute;right:4%;top:3%;font-family:var(--glyph-font);font-size:clamp(8px,calc(var(--board) / 38),12px);line-height:1;color:var(--bad);pointer-events:none}.board.focus .cell.far{opacity:.32;filter:saturate(.4)}.cell.neutral.inreach,.cell.blocked.inreach{box-shadow:inset 0 0 0 1.5px #ffbe3db3,inset 0 -2px #00000047}.cell.foe.inreach{box-shadow:inset 0 0 0 1.5px #ff7a6be6,inset 0 -2px #00000059}.odds{position:absolute;left:50%;bottom:2px;transform:translate(-50%);z-index:2;padding:0 4px;border-radius:5px;pointer-events:none;white-space:nowrap;font:700 clamp(8px,calc(var(--board) / 34),11px)/1.25 var(--font-cond)}.odds.good{background:var(--good);color:var(--good-ink)}.odds.bad{background:var(--bad);color:#fff}.cell:has(.odds) .coord{opacity:0}.board .cell.outhit{opacity:1;filter:none;box-shadow:inset 0 0 0 2.5px var(--bad)}@media (prefers-reduced-motion: no-preference){.board .cell{transition:opacity .15s,filter .15s}.cell.outhit{animation:nudge .3s ease}}@keyframes nudge{25%{transform:translate(-2px)}75%{transform:translate(2px)}}.cell.picked{z-index:1;box-shadow:inset 0 0 0 2.5px var(--accent),0 0 0 3px #ffbe3d59}.board .cell.mute{opacity:.45}.bubble{position:fixed;z-index:15;display:none;align-items:center;gap:2px;padding:6px;border-radius:16px;background:#1f4b56;border:1px solid #3a6873;box-shadow:0 14px 30px #00000080}.bubble.open{display:flex}.barrow{position:absolute;left:calc(var(--ax, 50%) - 7px);bottom:-7px;width:12px;height:12px;background:#1f4b56;border-right:1px solid #3a6873;border-bottom:1px solid #3a6873;transform:rotate(45deg)}.bubble.below .barrow{bottom:auto;top:-7px;border:0;border-left:1px solid #3a6873;border-top:1px solid #3a6873}.bopt{width:46px;height:60px;padding:0;border:0;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;color:var(--text);cursor:pointer}.bopt:hover{background:#ffffff0f}.bopt.on{background:#ffbe3d33;box-shadow:inset 0 0 0 1.5px var(--accent)}.bopt .chip{width:28px;font-size:16px;box-sizing:border-box}.bopt .chip.trapc{background:#0f2a31bf;color:var(--accent);border:1.5px dashed var(--accent)}.bopt .chip.bldc{background:#12363f;color:var(--mine);box-shadow:inset 0 0 0 1px #3a6873}.btag{font:700 11.5px/1 var(--font-cond),var(--glyph-font);color:var(--text-2);padding:2px 4px;border-radius:4px;white-space:nowrap}.btag.good{background:var(--good);color:var(--good-ink)}.btag.bad{background:var(--bad);color:#fff}.bico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;border:1.5px solid #3a6873;font:700 14px/1 var(--font-cond);color:var(--text-2)}.bopt.meta{width:42px}.bopt.del .bico{border-color:var(--bad);color:var(--bad)}.bopt.del .btag{color:var(--bad)}.bsep{width:1px;align-self:stretch;margin:6px 3px;background:#3a6873}#me-income{display:flex;align-items:center;gap:9px}.hand{display:inline-flex;align-items:center;gap:3px}.hand .chip{width:17px;font-size:10px}.hand b{font:700 13px/1 var(--font-cond);color:var(--text)}.next{color:var(--text-2);overflow:hidden;text-overflow:ellipsis}.flash{animation:flash .9s ease both;animation-delay:var(--delay, 0s)}@keyframes flash{0%{transform:scale(1)}35%{transform:scale(.86)}to{transform:scale(1)}}@keyframes pulse{50%{opacity:.35}}.rv{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;min-height:34px;padding:5px 10px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);font-size:13.5px}.rv.head{background:none;border:0;min-height:0;padding:2px 2px 0;font:600 11px/1.5 var(--font-cond);text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}.rv.note{background:none;border-style:dashed;color:var(--text-2)}.dock{display:grid;gap:8px;flex:none;margin-top:auto}.hint{font-size:13.5px;line-height:1.3;color:var(--text-2);text-align:center;height:1.3em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.hint.error{color:var(--bad)}.actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.pips{display:flex;gap:6px;padding:0 4px}.pips{gap:7px}.pip{width:13px;height:13px;border-radius:50%;border:2px solid var(--accent);box-sizing:border-box;transition:background .15s}.pip.used{background:var(--accent)}.navbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);color:var(--text);font-size:22px;line-height:1;cursor:pointer}.navbtn:disabled{opacity:.35;cursor:default}.pips:has(.navbtn){gap:6px;padding:0}#btn-confirm{width:100%}.scrim{position:fixed;inset:0;background:#040c0f99;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}.scrim.open{opacity:1;pointer-events:auto}.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;max-height:88dvh;overflow-y:auto;background:var(--panel);color:var(--text);border-radius:20px 20px 0 0;padding:10px max(20px,var(--safe-r)) calc(20px + var(--safe-b)) max(20px,var(--safe-l));transform:translateY(105%);transition:transform .25s ease;z-index:21;overscroll-behavior:contain;box-shadow:0 -10px 40px #00000059}.sheet.open{transform:translateY(0)}.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}.sheet h2{font-family:var(--font-cond);font-weight:700;font-size:26px;margin:0 0 8px;line-height:1.15}.sheet h3,.sheet h4{font-family:var(--font-cond);font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);margin:18px 0 6px}.sheet p{margin:0 0 10px;color:var(--text-2)}.sheet .stack{display:grid;gap:10px;margin-top:14px}.result{font-family:var(--font-cond);font-size:44px;font-weight:700;line-height:1;margin:4px 0 8px}.result.win{color:var(--good)}.result.loss{color:var(--bad)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.stats div{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:2px}.stats b{font-family:var(--font-cond);font-size:24px}.stats span{font-size:12px;color:var(--text-2)}.rows li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.rows li:last-child{border-bottom:0}.chip-out{font-weight:600;text-align:right}.chip-out.good{color:var(--good)}.chip-out.bad{color:var(--bad)}.chip-out.neutral{color:var(--text-2);font-weight:400}.plain li{font-size:14px;padding:3px 0;color:var(--text-2)}.list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.list li:last-child{border-bottom:0}.list .chip{width:30px;font-size:17px}.list .gl{font-size:22px;text-align:center;font-family:var(--glyph-font)}.list .t{font-weight:600}.list .d{font-size:13.5px;color:var(--text-2)}.list .v{font-family:var(--font-cond);font-weight:700;font-variant-numeric:tabular-nums}.buildlist{display:grid;gap:8px;margin-top:8px}.buildlist button{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left}.buildlist .gl{font-size:22px;text-align:center;font-family:var(--glyph-font)}.buildlist small{display:block;color:var(--text-2);font-weight:400;font-size:12.5px}.code-box{font-family:var(--font-cond);font-weight:700;font-size:48px;letter-spacing:.12em;text-align:center;padding:14px;border-radius:12px;background:var(--field);margin:6px 0 4px;-webkit-user-select:all;user-select:all}.code-input{width:100%;font-family:var(--font-cond);font-weight:700;font-size:36px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--text)}.status-line{min-height:22px}.status-line.error{color:var(--bad)}.triangle{display:block;width:100%;max-width:280px;margin:8px auto 4px}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.toggle-row span{display:grid;gap:2px}.toggle-row small{color:var(--text-2);font-size:13px}.switch{position:relative;width:52px;height:30px;flex:none;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);cursor:pointer}.switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--text-2);transition:transform .15s ease,background .15s ease}.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.switch[aria-checked=true]:after{transform:translate(22px);background:var(--accent-ink)}.mini-fig{margin:6px 0 10px;display:grid;gap:4px;justify-items:start}.mini-fig figcaption{font-size:12.5px;color:var(--text-2);max-width:22ch}.mini{display:inline-grid;grid-template-columns:repeat(var(--w),24px);gap:2px;padding:3px;background:var(--frame);border-radius:7px}.mini i{width:24px;height:24px;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:14px;line-height:1;font-family:var(--glyph-font)}.mini .n{background:var(--neutral)}.mini .m{background:var(--mine);color:var(--mine-ink)}.mini .cap{box-shadow:inset 0 0 0 2px var(--accent)}.mini .f{background:var(--foe);color:#fff}.mini .pn{background:var(--neutral);color:var(--mine);outline:2px dashed var(--accent);outline-offset:-3px}.mini .pn.atk{background:var(--foe)}.mini .x{background:var(--rock)}.mini .b{background:#000;color:#6b6b6b}.mini .shot{box-shadow:inset 0 0 0 2px var(--bad)}.mini .trap{color:var(--accent)}.mini .bridge{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 6px)}.pair{display:flex;gap:10px;align-items:flex-start;flex-wrap:nowrap}.pair .arrow{color:var(--accent);font-size:20px;align-self:center;flex:none}.pair .mini-fig figcaption{max-width:14ch}.mechnote{color:var(--text-2);font-size:13.5px;margin:2px 0 8px}.tour-step{display:grid;gap:10px}.tour-dots{display:flex;gap:6px;justify-content:center;margin:4px 0 2px}.tour-dots span{width:8px;height:8px;border-radius:50%;background:var(--line)}.tour-dots span.on{background:var(--accent);width:20px;border-radius:4px}.tour-art{display:flex;justify-content:center;padding:6px 0}.toast{position:fixed;left:50%;top:calc(60px + var(--safe-t));transform:translate(-50%,-12px);opacity:0;text-align:center;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:12px;font-size:14px;z-index:30;background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:0 6px 24px #00000059;pointer-events:none;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translate(-50%)}.update{position:fixed;left:50%;top:calc(10px + var(--safe-t));transform:translate(-50%);z-index:40;display:flex;gap:12px;align-items:center;padding:8px 8px 8px 14px;border-radius:14px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 28px #0006;font-size:14px}.update .btn{min-height:40px;padding:6px 12px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media (max-height: 760px){.game{gap:6px}.topbar{min-height:40px}.icon-btn{width:40px;height:40px}.player{min-height:32px}.avatar{width:26px;height:26px;font-size:10px}.cells b{font-size:19px}.sub{font-size:12px}.dock{gap:5px}.dock .btn,.navbtn{min-height:44px;height:44px}.hint{font-size:12.5px}}.profile-screen{min-height:100dvh}.profile-inner{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding:calc(10px + var(--safe-t)) max(16px,var(--safe-r)) calc(24px + var(--safe-b)) max(16px,var(--safe-l))}.profile-top{display:flex;align-items:center;gap:10px;min-height:44px}.profile-top h2{margin:0;font:700 22px/1 var(--font-cond);letter-spacing:.04em;text-transform:uppercase}.card{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:14px}.card h3{margin:0 0 10px;font:600 12px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}.id-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}.id-name{display:flex;gap:6px;align-items:center;min-width:0}.id-name input{min-width:0;flex:1;font:700 22px/1.2 var(--font-cond);color:var(--text);background:transparent;border:0;border-bottom:1px dashed var(--line);padding:2px 0}.id-name input:focus{outline:none;border-bottom-color:var(--accent)}.swatches{display:flex;gap:8px;margin-top:10px}.swatches button{width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;background:var(--sw);box-shadow:0 0 0 2px var(--bg-soft)}.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg-soft),0 0 0 4px var(--text)}.rating-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}.rating-big{font:700 52px/.9 var(--font-cond);font-variant-numeric:tabular-nums}.rating-big small{font-size:16px;color:var(--text-2);font-weight:600;margin-left:6px}.tier-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--ring);color:var(--text);font:700 13px/1 var(--font-cond);letter-spacing:.06em;text-transform:uppercase}.tier-badge:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ring)}.tier-progress{margin-top:12px;display:grid;gap:5px}.tier-progress .track{height:6px;border-radius:3px;background:var(--neutral);overflow:hidden}.tier-progress .fill{height:100%;border-radius:3px;background:var(--ring)}.tier-progress small{color:var(--text-2);font-size:12.5px}.chart{position:relative;margin-top:14px}.chart svg{display:block;width:100%;height:150px;overflow:visible;touch-action:pan-y}.chart .grid line{stroke:var(--line);stroke-width:1}.chart .grid text{fill:var(--text-2);font:600 10px var(--font-cond)}.chart .area{fill:var(--accent);opacity:.1}.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.chart .dot{fill:var(--accent);stroke:var(--bg-soft);stroke-width:2}.chart .cross{stroke:var(--text-2);stroke-width:1;stroke-dasharray:3 3}.chart .tip{position:absolute;top:-6px;transform:translate(-50%,-100%);padding:6px 8px;border-radius:8px;background:var(--frame);border:1px solid var(--line);font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none;color:var(--text)}.chart .empty{color:var(--text-2);font-size:13.5px;padding:18px 0 6px;text-align:center}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.tiles div{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:3px;min-width:0}.tiles b{font:700 24px/1 var(--font-cond);font-variant-numeric:tabular-nums}.tiles span{font-size:11.5px;color:var(--text-2);line-height:1.2}.table{width:100%;border-collapse:collapse;font-size:14px}.table th{text-align:left;font:600 11px/1 var(--font-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);padding:0 0 8px}.table td{padding:8px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}.table th:not(:first-child),.table td:not(:first-child){text-align:right}.table td small{display:block;color:var(--text-2);font-size:11.5px}.games{display:grid;gap:6px}.games li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel)}.res{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:700 14px/1 var(--font-cond)}.res.win{background:var(--good);color:var(--good-ink)}.res.loss{background:var(--bad);color:#fff}.res.draw{background:var(--text-2);color:#0b1f24}.games .t{display:grid;min-width:0;line-height:1.25}.games .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.games .t small{color:var(--text-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delta{font:700 15px/1 var(--font-cond);font-variant-numeric:tabular-nums;text-align:right}.delta.up{color:var(--good)}.delta.down{color:var(--bad)}.delta.flat{color:var(--text-2);font-weight:600;font-size:12px}.rating-change{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line);margin:6px 0 10px}.rating-change b{font:700 22px/1 var(--font-cond);font-variant-numeric:tabular-nums}.rating-change small{display:block;color:var(--text-2);font-size:12.5px;margin-top:3px}@media (max-width: 380px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{gap:6px}.topbar .icon-btn,.tools .icon-btn{width:36px;height:38px}.av{width:32px;height:32px;font-size:12px}}.brand h1 .accent{color:var(--accent)}.profile-body .stack{margin-top:0;gap:12px}details.card summary{cursor:pointer;font:600 12px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);list-style:none}details.card summary::-webkit-details-marker{display:none}details.card summary:after{content:" +"}details.card[open] summary:after{content:" \2212"}details.card ul{margin-top:10px}.id-card .muted{display:block}@media (max-height: 760px){.log{--srow: 14px;--srow-max: 20px}.srow{font-size:11px}.slabels,.scol{grid-template-rows:11px 20px 20px}.sdet .toks{min-height:21px;font-size:13px}.sdet .rn{font-size:19px}.hint{height:1.3em;-webkit-line-clamp:1}}@media (max-height: 620px){.dock .btn,.navbtn{min-height:40px;height:40px}.slabels,.scol{grid-template-rows:10px 16px 16px}.lane{font-size:9px}.sdet .toks{min-height:19px;font-size:12.5px}}.duo{padding:8px 10px;min-width:0}.duo span,.duo small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#btn-daily{border-color:#ffbe3d8c}#btn-daily.done{border-color:var(--line)}#btn-daily.done small{color:var(--good);opacity:1}.name-input{width:100%;font:700 24px/1.2 var(--font-cond);letter-spacing:.03em;text-align:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--text)}.name-input:focus{outline:none;border-color:var(--accent)}.preview-wrap{display:grid;place-items:center;margin:12px 0 6px}.preview{display:grid;grid-template-columns:repeat(8,22px);gap:2px;padding:3px;border-radius:9px;background:var(--frame)}.preview i{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;font:normal 700 11px/1 var(--font-cond);color:#14262b}.preview .n{background:var(--neutral)}.preview .x{background:var(--rock)}.preview .m{background:var(--mine)}.preview .f{background:var(--foe);box-shadow:inset 0 0 0 1px var(--foe-line);color:var(--text)}.preview.empty{grid-template-columns:1fr;width:192px;height:192px;place-items:center;color:var(--text-2);font-size:13px}.practice-tag{margin:-4px 0 4px;color:var(--accent);font:600 13px/1.2 var(--font-cond);letter-spacing:.06em;text-transform:uppercase}.cosign{font-size:13px;color:var(--text-2);margin:0 0 8px}.cosign.done{color:var(--good)}.copy-box{width:100%;resize:none;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--text);font:14px/1.4 var(--font)}.proof-status{margin:0 0 4px;font-size:14px}.proof-status.ok{color:var(--good)}.proof-status.bad{color:var(--bad)}.proof .row2{margin-top:12px}.proof details{margin-top:10px}.proof details summary{cursor:pointer;color:var(--text-2);font-size:13px}.proof-details>.btn{margin-top:10px;width:100%}.proof-verdict{font:700 18px/1.2 var(--font-cond);margin:6px 0 8px}.proof-verdict.ok{color:var(--good)}.proof-verdict.bad{color:var(--bad)}.issues{margin:10px 0;display:grid;gap:4px}.issues li{font-size:13px;color:var(--bad);padding-left:14px;position:relative}.issues li:before{content:"\2022";position:absolute;left:2px}.games li:has(>.game-row){padding:0;background:transparent;display:block}.game-row{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel);border:0;text-align:left;cursor:pointer;color:inherit}.game-row:active{transform:scale(.99)}@media (max-height: 980px){.home-inner{gap:14px;padding-top:calc(16px + var(--safe-t));padding-bottom:calc(12px + var(--safe-b))}.hero figcaption{display:none}.hero-board{grid-template-columns:repeat(6,24px);gap:2px}.hero-board i{width:24px;height:24px;border-radius:5px}.hero-board .chip{width:18px;font-size:11px}.menu{gap:8px}.menu .btn{min-height:46px;padding-top:7px;padding-bottom:7px}.menu .seg button{min-height:38px}}@media (max-height: 740px){.hero{display:none}.brand .logo{width:52px;height:52px}.brand h1{font-size:36px}}@media (max-height: 600px){.brand .lede{display:none}.menu .btn{min-height:42px}}.home-top{justify-content:space-between;align-items:center;gap:10px}.home-tools{display:flex;gap:6px}.home-tools .icon-btn{width:40px;height:40px;background:transparent}.modebar{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}.mode-btn{display:flex;align-items:center;gap:10px;text-align:left;padding:6px 12px;min-height:50px}.mode-btn .mi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bg-soft);color:var(--accent);font-size:16px;flex:none}.mode-btn .mt{display:grid;min-width:0;line-height:1.15}.mode-btn b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mode-btn{min-width:0}.mode-btn small{font-weight:500;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modebar .seg button{min-height:40px}.modes{display:grid;gap:8px;margin:4px 0 12px}.mode-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}.mode-card.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.mode-card .mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg-soft);color:var(--accent);font-size:18px}.mode-card .mt{display:grid;gap:3px}.mode-card b{font-size:15px}.mode-card small{color:var(--text-2);font-size:12.5px;line-height:1.3}.mtag{font:700 11px/1 var(--font-cond);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:999px;border:1px solid var(--line);color:var(--text-2)}.mtag.rated{border-color:var(--accent);color:var(--accent)}.mode-line{margin:-4px 0 8px;color:var(--accent);font:600 13px/1.2 var(--font-cond);letter-spacing:.04em;text-transform:uppercase}.topbar-space{display:flex;justify-content:center;min-width:0}.mode-tag{max-width:100%;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);color:var(--accent);font:700 12px/1.2 var(--font-cond);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell.foe.fogged{background:repeating-linear-gradient(135deg,var(--foe) 0 6px,#232a38 6px 12px)}.fogmark{font:700 clamp(12px,calc(var(--board) / 20),20px)/1 var(--font-cond);color:var(--text-2);opacity:.85}.odds.fog{background:var(--text-2);color:#14262b}.cell.hill:before{content:"";position:absolute;inset:2px;border-radius:5px;border:1.5px dashed rgba(255,190,61,.65);pointer-events:none}.badge.hillm{top:2px;right:3px;color:var(--accent)}.cell.mine .badge.hillm{color:#a86f00}.preview .hl{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}.cell.hintcell{box-shadow:inset 0 0 0 3px var(--good),0 0 12px #6ee7a88c!important}.ghost.foe-move.known{animation:none;opacity:.92;inset:18%}.ghost.foe-move.known .chip{box-shadow:0 0 0 2px #000,0 0 0 4px var(--bad)}.puzzle-head .btn{width:100%;margin-top:10px}.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}.ph-stats div{display:grid;gap:2px}.ph-stats b{font:700 28px/1 var(--font-cond)}.ph-stats span{color:var(--text-2);font-size:12.5px}.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}.ptile{display:grid;gap:3px;place-items:center;padding:8px 4px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}.ptile b{font:700 18px/1 var(--font-cond)}.ptile small{font:600 11px/1 var(--font-cond);color:var(--text-2);letter-spacing:.02em}.ptile.solved{border-color:#ffbe3d99}.ptile.solved small{color:var(--accent)}.ptile.tried{border-style:dashed}.stars{margin:-6px 0 6px;font-size:26px;letter-spacing:4px;color:var(--accent)}.cup-list{display:grid;gap:6px}.cup-row{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:12px;border:0;background:var(--panel);color:var(--text);text-align:left;cursor:pointer}.cup-row .mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg-soft);color:var(--accent)}.cup-row .t{display:grid;min-width:0;line-height:1.25}.cup-row b,.cup-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cup-row small{color:var(--text-2);font-size:12px}.cup-row .chev{color:var(--text-2);font-size:22px}.cup-meta{margin:0 0 2px;font-weight:600}.cup-boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px;margin:12px 0 4px}.cboard{display:grid;gap:4px;place-items:center;padding:8px 4px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}.cboard small{font:600 10.5px/1 var(--font-cond);color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}.cboard b{font:700 20px/1 var(--font-cond)}.cboard.open{border-color:var(--accent)}.cboard.open b{color:var(--accent)}.cboard.live{border-style:dashed;border-color:var(--accent)}.cboard.win b{color:var(--good)}.cboard.loss b{color:var(--bad)}.cboard:disabled{opacity:.45;cursor:default}.table.stand td small{white-space:nowrap}.table.stand tr.me td{color:var(--accent)}.table.stand td:first-child{width:22px;color:var(--text-2)}.field-label{display:block;margin:12px 0 6px;font:600 12px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}.seg.seg3{grid-template-columns:repeat(3,1fr)}.seg.seg4{grid-template-columns:repeat(4,1fr)}.seg.seg4 button{font-size:13px;padding:0 4px}.btn.quiet.danger{border-color:transparent}@media (max-height: 740px){.home-tools .icon-btn{width:36px;height:36px}}.table.stand th:nth-child(2),.table.stand td:nth-child(2){text-align:left}.table.stand td:nth-child(2) small{display:block}
/* HoldAge 7.5 · one set of UI tokens, two themes. The fog, the boards and the game screens stay dark in both;
   the home's lower half, every sheet and the profile, puzzles, tournaments and Warlords screens follow the theme.
   Dark is the default; <html data-theme="light"> (set by theme.js before the first paint) brings back the cream. */
:root{
  --u-bg:#0f2a31;--u-card:#17404a;--u-sheet:#17404a;--u-tile:#0f2a31;--u-sunk:#0b2228;
  --u-btn:#1f4d58;--u-btn-sh:inset 0 0 0 1px #2f6170;--u-card-sh:inset 0 0 0 1px #24505a;--u-tile-sh:none;
  --u-line:#285663;--u-line-2:#3d6672;--u-line-3:#4d7883;--u-track:#17404a;
  --u-text:#f4f6ee;--u-text-2:#a9c2c6;--u-text-3:#c4d4d6;--u-acc:#ffbe3d;
  --u-good:#6ee7a8;--u-bad:#ff8a78;--u-bad-ink:#ff9a88;--u-warn:#3a1d1a;--u-warn-line:#6a3a33;
  --u-pri:#ffbe3d;--u-pri-ink:#2b1d00;--u-pri-sub:#5a3d00;--u-pri-chip:transparent;--u-pri-chip-ink:#2b1d00;--u-pri-chip-w:auto;--u-pri-chip-r:18px;
  --u-on:#ffbe3d;--u-on-knob:#2b1d00;--u-off:#3d6672;--u-off-knob:#f4f6ee;
  --u-sel:#f6e9c8;--u-sel-ink:#2b2215;--u-sel-sub:#6b5d48;
  --u-hi:#2b2410;--u-hi-line:#6b5418;
  --u-band:#0f2a31;--u-band-s:#061418;--u-dock:#061418;--u-grab:#3d6672;--u-focus:#ffbe3d;
  --u-shadow:0 10px 24px #00000040;--u-sheet-sh:inset 0 1px #2f6170,0 -14px 40px #00000073;
  --u-scheme:dark;
}
:root[data-theme=light]{
  --u-bg:#f4e6c4;--u-card:#ecdcb1;--u-sheet:#f4e6c4;--u-tile:#ecdcb1;--u-sunk:#fff8e6;
  --u-btn:#f8eed6;--u-btn-sh:0 3px 0 #dcc795;--u-card-sh:0 3px 0 #dcc795;--u-tile-sh:0 3px 0 #dcc795;
  --u-line:#dcc897;--u-line-2:#d6c398;--u-line-3:#b9a273;--u-track:#dcc897;
  --u-text:#241a10;--u-text-2:#6b5a3e;--u-text-3:#4f4128;--u-acc:#7a4f00;
  --u-good:#2f6e48;--u-bad:#b8402f;--u-bad-ink:#8f2d1f;--u-warn:#f2d5c4;--u-warn-line:#e0b39b;
  --u-pri:#10303a;--u-pri-ink:#f4e6c4;--u-pri-sub:#a9c0c4;--u-pri-chip:#ffbe3d;--u-pri-chip-ink:#241a10;--u-pri-chip-w:42px;--u-pri-chip-r:8px;
  --u-on:#241a10;--u-on-knob:#ffbe3d;--u-off:#d6c398;--u-off-knob:#fff8e6;
  --u-sel:#241a10;--u-sel-ink:#f4e6c4;--u-sel-sub:#c9b282;
  --u-hi:#fbedc4;--u-hi-line:#e2b84f;
  --u-band:#17363f;--u-band-s:#132f37;--u-dock:#10303a;--u-grab:#d6c398;--u-focus:#241a10;
  --u-shadow:0 6px 16px #0f2a3124;--u-sheet-sh:0 -14px 40px #0000004d;
  --u-scheme:light;
}
/* The theme switch in the home's top bar: a sun in the dark theme (go light), a moon in the light one. */
.hx .home-tools .theme-btn .i-moon,:root[data-theme=light] .hx .home-tools .theme-btn .i-sun{display:none}
:root[data-theme=light] .hx .home-tools .theme-btn .i-moon{display:block}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* HoldAge 7.5 · Home. The rival's half (the fog, always dark) on top, HOLD on the front line, your half below:
   profile and rating beside the ring, one play card, a dock of three. The lower half takes its colours from theme.css. */
.hx{--hs:clamp(116px,34vw,136px);--fog-1:#2a3141;--fog-2:#252c3b;--fog-ink:#c9d2e3;--fog-ink-2:#a9b3c7;--hxf:606px;--hxcap:340px;--hxb:min(calc(100vw - 72px),max(140px,calc(100dvh - var(--hxf))),var(--hxcap));min-height:100dvh;display:flex;flex-direction:column}
.hx .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hx-gone{display:none!important}
/* ---- the fog: title, tools, live replay, both cell counts ---- */
.hx-fog{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:calc(12px + var(--safe-t)) max(20px,var(--safe-r)) calc(var(--hs) * .55 + 14px) max(20px,var(--safe-l));background:repeating-linear-gradient(135deg,var(--fog-1) 0 7px,var(--fog-2) 7px 14px);color:var(--fog-ink)}
.hx-fog>*{width:100%;max-width:420px}
.hx-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px}
.hx-title{margin:0;font:700 38px/1 var(--font-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--text)}
.hx-title span{color:var(--accent)}
.hx .home-tools{display:flex;gap:2px}
.hx .home-tools .icon-btn{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--fog-ink);transition:background .15s ease}
.hx .home-tools .icon-btn:active{background:#ffffff14}
.hx .home-tools .icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hx-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 12px/1.2 var(--font-cond);letter-spacing:.09em;text-transform:uppercase;color:var(--fog-ink-2)}
.hx-meta #hx-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-live{display:flex;align-items:center;gap:6px;flex:none;color:var(--text);white-space:nowrap}
.hx-dot{width:8px;height:8px;border-radius:50%;background:var(--cavalry)}
.hx-dot.off{background:var(--fog-ink-2)}
@media (prefers-reduced-motion: no-preference){.hx-dot:not(.off){animation:pulse 1.2s ease-in-out infinite}}
.hx-stage{position:relative;width:var(--hxb);max-width:none;height:var(--hxb);border-radius:14px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.hx-stage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hx-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:3px;width:100%;height:100%;padding:3px;border-radius:14px;background:var(--frame);box-shadow:0 14px 34px #00000066;contain:layout paint}
.hx-board i{position:relative;min-width:0;min-height:0;border-radius:5px;display:grid;place-items:center;font-style:normal;background:var(--neutral);box-shadow:inset 0 1px #ffffff1a,inset 0 -2px #00000047;transition:background .3s ease}
.hx-board i.m{background:var(--mine);box-shadow:inset 0 1px #ffffffa6,inset 0 -2px #0000002e}
.hx-board i.f{background:var(--foe);box-shadow:inset 0 0 0 1px var(--foe-line),inset 0 -2px #00000059}
.hx-board i.x{background:var(--rock);background-image:linear-gradient(135deg,rgba(255,255,255,.14) 25%,transparent 25% 50%,rgba(0,0,0,.14) 50% 75%,transparent 75%);background-size:8px 8px}
.hx-board i.b{background:var(--black);background-image:repeating-linear-gradient(45deg,#000 0 4px,#1a1a1a 4px 6px)}
.hx-board .chip{width:64%;font-size:calc(var(--hxb) / 21)}
.hx-board i.f .chip{box-shadow:0 0 0 2px var(--foe),0 0 0 3px var(--mine)}
.hx-board .cap{position:absolute;top:1px;right:2px;font-size:calc(var(--hxb) / 30);line-height:1;color:var(--mine-ink);pointer-events:none}
.hx-board i.f .cap{color:var(--mine)}
@media (prefers-reduced-motion: no-preference){.hx-board i.hx-pop{animation:hxpop .55s ease}}
@keyframes hxpop{0%{transform:scale(.7);filter:brightness(1.7)}to{transform:scale(1);filter:none}}
.hx-strip{display:grid;grid-template-columns:repeat(var(--n, 20),minmax(0,1fr));gap:2px;width:var(--hxb);max-width:none}
.hx-strip i{height:6px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--foe-line)}
.hx-strip i.on{background:#ffbe3d59;box-shadow:none}
.hx-strip i.cur{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.hx-hint{margin:0;text-align:center;font-size:12.5px;color:#8b97ad}
.hx-score{position:absolute;display:grid;gap:7px;line-height:1}
.hx-score small{font:600 11.5px/1 var(--font-cond);letter-spacing:.1em;text-transform:uppercase}
.hx-score b{font:700 40px/1 var(--font-cond);font-variant-numeric:tabular-nums}
.hx-fog>.hx-score.foe{width:auto;left:max(20px,calc(50% - 210px));bottom:12px;color:var(--fog-ink)}
.hx-score.foe small{color:#8b97ad}
.hx-fog>.hx-score.me{width:auto;right:max(20px,calc(50% - 210px));bottom:12px;justify-items:end;color:var(--mine)}
.hx-score.me small{color:#e9dcb8}
/* ---- HOLD ---- */
.hx-front{position:relative;z-index:3;height:0;display:flex;justify-content:center}
.hx-hold{--p:0;position:absolute;top:calc(var(--hs) / -2);width:var(--hs);height:var(--hs);padding:7px;border:0;border-radius:50%;cursor:pointer;background:conic-gradient(var(--accent) calc(var(--p) * 1turn),#285663 0);box-shadow:0 0 0 5px var(--frame),0 12px 30px #00000080;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hx-hold-in{width:100%;height:100%;border-radius:50%;background:var(--field);display:grid;place-content:center;justify-items:center;gap:5px;transition:transform .15s ease}
.hx-hold-in b{font:700 calc(var(--hs) * .25)/.9 var(--font-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.hx-hold-in small{font:600 11px/1 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.hx-hold.armed .hx-hold-in{transform:scale(.95)}
.hx-hold:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
/* the halo is a ring that grows and fades (transform + opacity only: no repaint) */
.hx-hold::before{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:50%;box-shadow:0 0 0 2px #ffbe3dd9,0 0 12px 3px #ffbe3d73;opacity:0;pointer-events:none;will-change:transform,opacity}
@media (prefers-reduced-motion: no-preference){.hx-hold:not(.armed)::before{animation:hxring 2.4s cubic-bezier(.25,.6,.35,1) infinite}}
@keyframes hxring{0%{transform:scale(1);opacity:0}15%{transform:scale(1.012);opacity:.95}60%,to{transform:scale(1.1);opacity:0}}
.hx-hold.armed{box-shadow:0 0 0 5px var(--frame),0 0 22px 2px #ffbe3d59,0 12px 30px #00000080}
/* ---- your half (nothing may sit under the ring: tests/test_layout.mjs) ---- */
.hx-cream{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:max(calc(var(--hs) / 2 + 14px),82px) max(20px,var(--safe-r)) 0 max(20px,var(--safe-l));background:var(--u-bg);color:var(--u-text);color-scheme:var(--u-scheme)}
.hx-cream>*{width:100%;max-width:420px}
.hx-cream>.profile-chip{position:absolute;left:max(20px,calc(50% - 210px));top:8px;width:auto;max-width:calc(50% - var(--hs) / 2 - 26px);display:flex;align-items:center;gap:8px;min-height:0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--u-text);text-align:left}
.hx-cream>.profile-chip .av{flex:none;width:38px;height:38px;font-size:14px;box-shadow:0 0 0 2px var(--u-bg),0 0 0 4px var(--ring)}
.hx-cream>.profile-chip>span:not(.av){display:grid;gap:4px;min-width:0;overflow:hidden;line-height:1}
.hx-cream>.profile-chip b{display:block;font:700 16px/1 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-cream>.profile-chip small{display:flex;align-items:center;gap:5px;overflow:hidden;font:700 10.5px/1 var(--font-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--u-text-2)}
.hx-cream>.profile-chip .tier-dot{flex:none}
.hx-cream>.profile-chip .tier-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hx-elo{position:absolute;right:max(20px,calc(50% - 210px));top:8px;max-width:calc(50% - var(--hs) / 2 - 22px);display:grid;justify-items:end;gap:5px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--u-text);text-align:right;cursor:pointer}
.hx-elo-n{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.hx-elo-n b{font:700 26px/1 var(--font-cond);font-variant-numeric:tabular-nums}
.hx-elo-n small{font:600 12.5px/1 var(--font-cond);font-variant-numeric:tabular-nums;color:var(--u-text-2)}
.hx-elo-t{display:flex;align-items:center;gap:6px}
.hx-elo-t small{font:700 11.5px/1 var(--font-cond);font-variant-numeric:tabular-nums;white-space:nowrap}
.hx-elo-g{display:block;width:72px;height:20px}
.hx-elo-g svg{display:block;width:100%;height:100%}
.hx .profile-chip:focus-visible,.hx-elo:focus-visible{outline:2px solid var(--u-focus);outline-offset:3px}
/* the play card: mode tabs, the explanation, bot + Play, Daily · Named · Friend */
.hx-card{display:flex;flex-direction:column;gap:9px;padding:4px 12px 12px;border-radius:22px;background:var(--u-card);box-shadow:var(--u-card-sh),var(--u-shadow)}
.hx-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--u-line)}
.hx-mode{height:42px;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;margin-bottom:-1px;padding:0 2px;border:0;background:transparent;color:var(--u-text-2);font:700 14px/1 var(--font-cond);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease,box-shadow .15s ease}
.hx-mi{font:14px/1 var(--glyph-font)}
.hx-mode[aria-checked=true]{color:var(--u-acc);box-shadow:inset 0 -3px var(--u-acc)}
.hx-mode:focus-visible{outline:2px solid var(--u-focus);outline-offset:-2px;border-radius:8px}
.hx-explain{margin:0;min-height:32px;font-size:12.5px;line-height:1.3;color:var(--u-text-3)}
.hx-bar{display:flex;gap:8px;align-items:stretch}
.hx-bar .seg{flex:1 1 auto;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;border:0;border-radius:13px;background:var(--u-sunk);box-shadow:inset 0 0 0 1px var(--u-line)}
.hx-bar .seg button{min-height:50px;min-width:0;display:grid;place-content:center;justify-items:center;gap:4px;padding:0 2px;border-radius:10px;font:600 14px/1 var(--font);color:var(--u-text-3)}
.hx-bar .seg button small{font:700 10.5px/1 var(--font-cond);letter-spacing:.04em;color:var(--u-text-2)}
.hx-bar .seg button[aria-pressed=true]{background:var(--u-sel);color:var(--u-sel-ink)}
.hx-bar .seg button[aria-pressed=true] small{color:var(--u-sel-sub)}
.hx-go{flex:none;width:104px;display:grid;align-content:center;justify-items:start;gap:4px;padding:0 12px;border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);text-align:left;cursor:pointer;transition:transform .1s ease,filter .15s ease}
.hx-go b{display:flex;align-items:center;gap:6px;font:700 20px/1 var(--font-cond)}
.hx-go small{font:700 11px/1 var(--font-cond);letter-spacing:.04em;color:#5a3d00;white-space:nowrap}
.hx-go:active{transform:scale(.97);filter:brightness(.95)}
.hx-bar button:focus-visible,.hx-pill:focus-visible{outline:2px solid var(--u-focus);outline-offset:2px}
.hx-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hx-pill{height:36px;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:0;border-radius:18px;background:var(--u-sunk);box-shadow:inset 0 0 0 1px var(--u-line);color:var(--u-text);font:600 13.5px/1 var(--font);white-space:nowrap;cursor:pointer;transition:transform .1s ease}
.hx-pill:active{transform:scale(.97)}
.hx-pi{position:relative;display:grid;place-items:center;flex:none;color:var(--u-acc);font:15px/1 var(--glyph-font)}
.hx-pi.hx-hash{font:700 17px/1 var(--font-cond)}
.hx-pill:has(.hxd-dot) .hx-pi{margin-right:2px}
.hx-pt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hx-short{display:none}
@media (max-width:429px){.hx-long{display:none}.hx-short{display:inline}}
/* the dock: Puzzles · Warlords · Tournaments (dark in both themes) */
.hx-dock{position:relative;z-index:1;margin:auto calc(-1 * max(20px,var(--safe-r))) 0 calc(-1 * max(20px,var(--safe-l)));width:auto;max-width:none;align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,140px));justify-content:center;align-items:end;min-height:66px;padding:0 max(16px,var(--safe-r)) calc(10px + var(--safe-b)) max(16px,var(--safe-l));box-sizing:border-box;background:var(--u-dock);box-shadow:inset 0 1px #ffffff14;color-scheme:dark}
.hxd{height:54px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 2px;border:0;border-radius:14px;background:transparent;color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease}
.hxd:active{transform:scale(.95)}
.hxd:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hxd-ic{position:relative;height:22px;display:grid;place-items:center;font:20px/1 var(--glyph-font);color:var(--text)}
.hxd-t{max-width:100%;font:600 12px/1 var(--font-cond);letter-spacing:.02em;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxd-dot{position:absolute;top:-3px;right:-8px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px var(--u-dock);display:none;font-style:normal}
.hx-pill .hxd-dot{top:-5px;right:-6px;width:7px;height:7px;box-shadow:0 0 0 2px var(--u-sunk)}
#btn-daily:not(.done) .hxd-dot,#btn-puzzles.new .hxd-dot{display:block;background:var(--accent)}
#btn-cups.cs-new .hxd-dot{display:block;background:var(--cavalry)}
.hxd-wl{position:relative;top:-14px;height:76px;justify-content:flex-end;padding:0}
.hxd-wl .hxd-ic{width:58px;height:58px;border-radius:50%;background:var(--panel);box-shadow:0 0 0 4px var(--u-dock),inset 0 0 0 2px var(--accent),0 0 18px #ffbe3d4d;font-size:26px;color:var(--accent)}
.hxd-wl .hxd-t{font-weight:700;color:var(--accent)}
.hxd-wl .hxd-dot{top:2px;right:2px;width:12px;height:12px;box-shadow:0 0 0 3px var(--u-dock)}
.hxd-wl.wl-turn .hxd-dot{display:block;background:var(--accent)}
.hxd-wl.wl-turn .hxd-ic{box-shadow:0 0 0 4px var(--u-dock),inset 0 0 0 2px var(--accent),0 0 24px #ffbe3d80}
@media (prefers-reduced-motion: no-preference){.hxd-wl.wl-turn .hxd-dot,#btn-cups.cs-new .hxd-dot{animation:pulse 1.2s ease-in-out infinite}}
/* banners (rejoin, continue practice) */
.hx-banner{border:0;background:var(--u-card);color:var(--u-text);box-shadow:var(--u-card-sh)}
.hx-banner small{color:var(--u-text-2)}
.hx .btn:focus-visible{outline-color:var(--u-focus)}
/* ---- sizes ---- */
@media (max-width: 419px){.hx-score .hx-u{display:none}}
@media (max-width: 380px){.hx-title{font-size:34px}}
@media (max-width: 379px){.hx .home-tools .icon-btn{width:40px}.hx-cream>.profile-chip .av{width:34px;height:34px;font-size:13px}.hx-cream>.profile-chip b{font-size:15px}.hx-cream>.profile-chip .tier-n{display:none}.hx-elo-n b{font-size:23px}.hx-elo-n small{font-size:11px}.hx-elo-g{width:56px;height:18px}}
@media (max-width: 359px){.hx-mode{font-size:13px;gap:3px}.hx-mi{font-size:12px}.hx-go{width:88px;padding:0 9px}.hx-go b{font-size:18px}.hx-go svg{display:none}.hx-bar .seg button{font-size:13px}.hx-pill{padding:0 6px;gap:4px;font-size:13px}}
@media (max-width: 339px){.hx-cream>.profile-chip>span:not(.av){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hx-elo-n b{font-size:21px}.hx-elo-n small{font-size:10.5px}.hx-elo-g{width:46px}}
:root[data-theme=light] .hx-dock{border-radius:24px 24px 0 0;box-shadow:0 -8px 24px #0f2a312e}
/* ---- 7.5.1 · adaptive: the home is one screen, never a page. The board takes the height the fixed parts leave
   (--hxf, measured per step by tests/test_home751.mjs); below set heights the hint, the mode explanation, the bot
   ratings and the profile name step out in turn. Wide or landscape screens get two columns, like a desktop app. ---- */
@media (min-width: 600px){.hx{--hxcap:440px}}
@media (max-height: 749px){.hx{--hxf:580px}.hx-hint{display:none}}
@media (max-height: 719px){.hx{--hxf:516px;--hs:clamp(100px,30vw,112px)}.hx-explain{display:none}.hx-fog{gap:7px;padding-top:calc(8px + var(--safe-t))}.hx-title{font-size:32px}}
@media (max-height: 659px){
  .hx{--hxf:430px;--hs:92px}
  .hx-top{min-height:40px}.hx .home-tools .icon-btn{width:40px;height:40px}.hx-title{font-size:30px}.hx-meta{font-size:11px}
  .hx-fog{gap:6px}.hx-score b{font-size:30px}.hx-score{gap:5px}
  .hx-cream{padding-top:max(calc(var(--hs) / 2 + 10px),56px);gap:6px}
  .hx-cream>.profile-chip>span:not(.av){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hx-card{gap:7px;padding-bottom:10px}.hx-mode{height:34px}.hx-bar .seg button{min-height:40px}.hx-bar .seg button small{display:none}.hx-pill{height:32px}
  .hx-elo-n b{font-size:21px}.hx-elo-g{width:46px;height:16px}
  .hx-dock{min-height:58px;padding-bottom:calc(6px + var(--safe-b))}.hxd{height:48px}.hxd-wl{height:70px;top:-12px}.hxd-wl .hxd-ic{width:52px;height:52px;font-size:23px}
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4), (orientation: landscape) and (max-height: 560px) and (min-width: 560px){
  .hx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,1fr);height:100dvh;min-height:0;--hs:clamp(92px,17vh,132px);--hxb:min(calc(100dvh - var(--hs) - 172px),calc(50vw - 110px),540px)}
  .hx-fog{grid-column:1;grid-row:1;justify-content:center;padding-bottom:calc(var(--hs) + 40px)}
  .hx-fog>*{max-width:max(420px,var(--hxb))}
  .hx-front{grid-column:1;grid-row:1;align-self:end;height:calc(var(--hs) + 28px)}
  .hx-hold{top:0}
  .hx-fog>.hx-score.foe{left:max(24px,calc(50% - var(--hxb) / 2));bottom:calc(var(--hs) / 2 + 4px)}
  .hx-fog>.hx-score.me{right:max(24px,calc(50% - var(--hxb) / 2));bottom:calc(var(--hs) / 2 + 4px)}
  .hx-hint{display:block}
  .hx-cream{grid-column:2;grid-row:1;flex-direction:row;flex-wrap:wrap;align-content:center;align-items:center;gap:16px 10px;padding:calc(28px + var(--safe-t)) max(28px,var(--safe-r)) 96px 28px;overflow:hidden}
  .hx-cream>*{flex:1 0 100%;max-width:none}
  .hx-cream>.profile-chip{position:static;flex:1 1 auto;width:auto;max-width:none}
  .hx-cream>.profile-chip>span:not(.av){position:static;width:auto;height:auto;clip:auto}
  .hx-elo{position:static;flex:0 0 auto;width:auto;max-width:none}
  .hx-explain{display:block}
  .hx-dock{position:absolute;left:0;right:0;bottom:0;margin:0;border-radius:20px 20px 0 0}
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 560px){
  .hx{--hs:88px;--hxb:min(calc(100dvh - 198px),calc(50vw - 90px))}.hx-hint,.hx-meta{display:none}.hx-explain{display:none}
  .hx-score .hx-u{display:none}.hx-fog>.hx-score.foe{left:max(16px,var(--safe-l))}.hx-fog>.hx-score.me{right:16px}.hx-long{display:none}.hx-short{display:inline}
  .hx-cream{padding-top:calc(12px + var(--safe-t));gap:8px 10px}.hx-mode{height:36px}.hx-bar .seg button{min-height:42px}
}

/* ---- 7.2 Tournament sync ---- */
.cs-status{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:12.5px;line-height:1.3;color:var(--text-2)}
.cs-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--text-2);opacity:.6}
.cs-status.on{color:var(--text)}
.cs-status.on .cs-dot{background:var(--good);opacity:1;box-shadow:0 0 0 3px #6ee7a826}
.cs-feed{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.cs-feed li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.cs-feed li:first-child{border-top:0}
.cs-feed li b{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-feed li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.cs-feed li small{color:var(--text-2);font-size:11.5px;white-space:nowrap}
.cs-feed li.me b{color:var(--accent)}
/* ---- 7.2 Play hints ---- */
.bubble.open{flex-wrap:wrap;max-width:min(340px,calc(100vw - 12px))}
.bubble .bhint{flex:1 0 100%;order:9;margin:4px 2px 0;padding:6px 8px;border-radius:10px;background:#ffbe3d1f;color:#ffd47a;font-size:12px;line-height:1.3}

/* HoldAge 7.3 · Warlords */

/* hub and lobby */
.wl-card{display:grid;gap:10px}
.wl-card .btn{margin-top:0}
.wl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wl-stat{background:var(--field);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.wl-stat b{font:700 22px/1 var(--font-cond)}
.wl-stat small{font-size:12px;color:var(--text-2)}
.wl-realms{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.wl-realm-pick{aspect-ratio:1;min-height:36px;border-radius:9px;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);padding:0}
.wl-realm-pick[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--field) inset}
.wl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.wl-row label,.wl-row>span{font-size:15px}
.wl-row small{color:var(--text-2);font-size:12px}
.wl-row input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent);flex:none}
.wl-seg{grid-template-columns:repeat(3,minmax(0,1fr))}
.wl-room{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;background:var(--field);border:1px solid var(--line);text-align:left;cursor:pointer;color:var(--text);width:100%}
.wl-room.turn{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wl-room b{font:700 16px/1.1 var(--font-cond)}
.wl-room small{color:var(--text-2);font-size:12.5px}
.wl-room .hot{color:#ffd77a}
.wl-seats{display:grid;gap:6px}
.wl-seat{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 10px;border-radius:12px;background:var(--field)}
.wl-seat .sw{width:18px;height:18px;border-radius:5px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.wl-seat .rn{font:700 14px/1 var(--font-cond);width:44px;flex:none}
.wl-seat .who{flex:1 1 auto;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-seat .who.me{color:var(--accent)}
.wl-seat .who.open{color:#ffd77a}
.wl-seat select,.wl-row select{min-height:36px;border-radius:9px;background:var(--panel);color:var(--text);border:1px solid var(--line);padding:0 6px;font:inherit;font-size:13px}
.wl-seat .take{min-height:36px;height:36px;width:auto;margin:0;padding:0 10px;font-size:13px}
.wl-code{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--field)}
.wl-code b{font:700 26px/1 var(--font-cond);letter-spacing:.18em}
.wl-code .btn{width:auto;margin:0}
.wl-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--text-2)}
.wl-chips button{min-height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--field);color:var(--text-2);cursor:pointer;font-weight:600}
.wl-chips button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wl-input{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--text);padding:0 14px;font:700 22px/1 var(--font-cond);letter-spacing:.2em;text-transform:uppercase}

/* the game screen */
.wl-screen{background:var(--field)}
.wl-game{width:100%;max-width:640px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;gap:8px;padding:calc(8px + var(--safe-t)) max(10px,var(--safe-r)) calc(10px + var(--safe-b)) max(10px,var(--safe-l))}
.wl-top{display:flex;align-items:center;gap:6px;flex:none}
.wl-title{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.wl-kicker{font:700 11px/1 var(--font-cond);letter-spacing:.14em;color:var(--text-2)}
.wl-title b{font:700 18px/1.1 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-banner{flex:none;display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:#3a2c08;border:1px solid var(--accent);font-size:13px;line-height:1.35}
.wl-banner .k{font:20px/1 var(--glyph-font);color:var(--accent)}
.wl-banner b{color:#ffd77a}
.wl-banner.danger{background:#3a1410;border-color:var(--bad)}
.wl-scroll{flex:1 1 auto;min-height:150px;overflow:auto;border-radius:12px;background:radial-gradient(90% 70% at 50% 50%,#0f3a50 0%,#071c27 100%);touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;position:relative;display:flex}
.wl-board{--c:18px;display:grid;grid-template-columns:repeat(17,var(--c));grid-auto-rows:var(--c);gap:1px;padding:3px;width:max-content;height:max-content;margin:auto;flex:none}
.wl-board .wc{position:relative;border-radius:calc(var(--c) * .18);background:var(--neutral);cursor:pointer;border:0;padding:0;color:inherit;overflow:visible;contain:layout}
.wl-board .wc.sea{background:#123f57;cursor:default}
.wl-board .wc.rock{background:repeating-linear-gradient(45deg,#8a7a5e 0 3px,#6f624a 3px 6px);cursor:default}
.wl-board .wc.black{background:repeating-linear-gradient(45deg,#000 0 3px,#1c1c1c 3px 6px)}
.wl-board .wc.own{background:var(--o)}
.wl-board .wc.own.dk{box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.wl-board .wc.wlp{z-index:2}
.wl-board .wc.fog{filter:brightness(.55) saturate(.6)}
.wl-board .wc.me{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.wl-board .wc.cap::before{content:"";position:absolute;inset:12%;border-radius:50%;box-shadow:0 0 0 calc(var(--c) * .07) rgba(255,255,255,.8);pointer-events:none}
.wl-board .wc .u{position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);border-radius:50%;background:var(--uc);box-shadow:0 0 0 1px rgba(0,0,0,.35);display:grid;place-items:center;font:calc(var(--c) * .42)/1 var(--glyph-font);color:#1d1d1d;pointer-events:none}
.wl-board .wc .mk{position:absolute;inset:0;display:grid;place-items:center;font:calc(var(--c) * .62)/1 var(--glyph-font);color:#ffd77a;text-shadow:0 0 2px #000,0 0 3px #000;pointer-events:none}
.wl-board .wc .u+.mk{inset:auto 1px auto auto;top:0;font-size:calc(var(--c) * .38)}
.wl-board .wc.crown .mk{color:#ffbe3d}
.wl-board .wc .bd{position:absolute;left:4%;bottom:3%;font:700 calc(var(--c) * .3)/1 var(--font-cond);color:#fff;background:rgba(0,0,0,.55);border-radius:3px;padding:1px 2px;pointer-events:none}
.wl-board .wc.wlp{outline:2px dashed var(--accent);outline-offset:-2px}
.wl-board .wc.wlp.bt{outline-color:var(--bad)}
.wl-board .wc .on{position:absolute;right:-3px;top:-3px;min-width:calc(var(--c) * .52);height:calc(var(--c) * .52);border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 calc(var(--c) * .34)/1 var(--font-cond);display:grid;place-items:center;border:1px solid #fff;z-index:2;pointer-events:none}
.wl-board .wc .ou{position:absolute;left:-2px;bottom:-2px;width:46%;height:46%;border-radius:50%;background:var(--uc);border:1px solid #fff;z-index:2;font:calc(var(--c) * .28)/1 var(--glyph-font);display:grid;place-items:center;color:#1d1d1d;pointer-events:none}
.wl-board .wc.sel{box-shadow:0 0 0 2px #fff;z-index:3}
.wl-board .wc.flash{animation:wlflash 1.6s ease-out 1}
@keyframes wlflash{0%{box-shadow:0 0 0 3px #fff}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.wl-board .wc.flash{animation:none;box-shadow:0 0 0 2px #fff}}
.wl-strip{flex:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.wl-strip button{min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 0;cursor:pointer;position:relative}
.wl-strip button.me{border-color:var(--accent)}
.wl-strip button.out{opacity:.45}
.wl-strip .sw{width:16px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.wl-strip b{font:700 14px/1 var(--font-cond)}
.wl-strip i{position:absolute;top:2px;right:3px;font-style:normal;font-size:10px;line-height:1}
.wl-panel{flex:none;display:grid;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:8px}
.wl-res{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:700 14px/1 var(--font-cond)}
.wl-res .r{display:inline-flex;align-items:center;gap:4px;padding:4px 7px 4px 4px;border-radius:999px;background:var(--field)}
.wl-res .r i{width:20px;height:20px;border-radius:50%;background:var(--uc);display:grid;place-items:center;font:12px/1 var(--glyph-font);color:#1d1d1d;font-style:normal}
.wl-res .r.zero{opacity:.45}
.wl-res .cnt{margin-left:auto;color:var(--text-2);font-weight:600}
.wl-res .cnt b{color:var(--text)}
.wl-plan{display:flex;gap:6px;overflow-x:auto;min-height:0;scrollbar-width:none}
.wl-plan:empty{display:none}
.wl-plan button{flex:1 1 0;min-width:0;justify-content:center;min-height:36px;border-radius:10px;border:1px dashed var(--accent);background:var(--field);color:var(--text);display:inline-flex;align-items:center;gap:6px;padding:0 9px;font-size:13px;cursor:pointer}
.wl-plan button.bt{border-color:var(--bad)}
.wl-plan button i{width:18px;height:18px;border-radius:50%;background:var(--uc);display:grid;place-items:center;font:11px/1 var(--glyph-font);color:#1d1d1d;font-style:normal}
.wl-plan button span{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-plan:has(button:nth-child(4)) button span{display:none}
@media (max-width:400px){.wl-plan:has(button:nth-child(3)) button span{display:none}}
.wl-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px}
.wl-actions .btn{margin:0;position:relative}
.wl-actions .btn .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--bad);color:#fff;font:700 12px/20px var(--font-cond);padding:0 5px}

/* sheets */
.wl-opts{display:grid;gap:8px;margin-top:6px}
.wl-opt{display:flex;align-items:center;gap:10px;min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--text);padding:6px 12px;cursor:pointer;text-align:left;width:100%}
.wl-opt:disabled{opacity:.45;cursor:not-allowed}
.wl-opt .ch{width:30px;height:30px;border-radius:50%;background:var(--uc);display:grid;place-items:center;font:17px/1 var(--glyph-font);color:#1d1d1d;flex:none}
.wl-opt .ch.bld{border-radius:8px;background:#5b4a2c;color:#fff;font:700 13px/1 var(--font-cond)}
.wl-opt .tx{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.wl-opt .tx b{font:700 15px/1.15 var(--font-cond)}
.wl-opt .tx small{font-size:12.5px;color:var(--text-2)}
.wl-opt .pill{font:700 14px/1 var(--font-cond);padding:5px 8px;border-radius:999px;background:#1f5a3a;color:#c9ffe2;flex:none}
.wl-opt .pill.lose{background:#5a2420;color:#ffd0c9}
.wl-opt.bt{border-color:var(--bad)}
.wl-opt.bt small{color:#ffb3a8}
.wl-info{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.wl-info span{font-size:12.5px;padding:4px 8px;border-radius:8px;background:var(--field);color:var(--text-2)}
.wl-rules{padding:10px 12px;border-radius:12px;background:var(--field);font-size:13px;line-height:1.45;color:var(--text-2)}
.wl-rules b{color:var(--text)}
.wl-rules .bad{color:#ffb3a8}
.wl-dip{display:grid;gap:6px}
.wl-dr{display:grid;gap:8px;padding:9px 10px;border-radius:12px;background:var(--field)}
.wl-dr.offer{background:#2a2208;box-shadow:inset 0 0 0 1px var(--accent)}
.wl-dr .h{display:flex;align-items:center;gap:10px}
.wl-dr .sw{width:22px;height:22px;border-radius:6px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.wl-dr .t{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.wl-dr .t b{font:700 15px/1.1 var(--font-cond)}
.wl-dr .t b small{font:400 12px var(--font);color:var(--text-2)}
.wl-dr .t span{font-size:12.5px;color:var(--text-2)}
.wl-dr .t span.ok{color:var(--good)}
.wl-dr .t span.hot{color:#ffd77a}
.wl-dr .t span.bad{color:#ffb3a8}
.wl-dr .btn{width:auto;margin:0;min-height:40px;height:40px;padding:0 12px;font-size:13px;white-space:nowrap;flex:none}
.wl-dr .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wl-chat{display:grid;gap:6px;margin-top:10px}
.wl-chat ol{display:grid;gap:4px;max-height:160px;overflow-y:auto;font-size:13px}
.wl-chat li b{color:var(--text)}
.wl-chat li{color:var(--text-2)}
.wl-chat form{display:grid;grid-template-columns:1fr auto;gap:8px}
.wl-chat input{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--text);padding:0 12px}
.wl-chat .btn{margin:0;width:auto}
.wl-ev{display:grid;gap:6px}
.wl-ev li{display:flex;gap:10px;padding:9px 10px;border-radius:12px;background:var(--field);align-items:flex-start}
.wl-ev li .sw{flex:none;width:16px;height:16px;margin-top:2px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.wl-ev li div{display:flex;flex-direction:column;gap:2px}
.wl-ev li b{font:700 14px/1.2 var(--font-cond)}
.wl-ev li span{font-size:12.5px;line-height:1.4;color:var(--text-2)}
.wl-ev li.key{background:#3a2c08;box-shadow:inset 0 0 0 1px var(--accent)}
.wl-ev li.bad{background:#3a1410;box-shadow:inset 0 0 0 1px var(--bad)}
.wl-table{width:100%;border-collapse:collapse;font-size:14px}
.wl-table td,.wl-table th{padding:7px 4px;border-bottom:1px solid var(--line);text-align:left}
.wl-table th{font:600 11px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.wl-table td.n{text-align:right;font-family:var(--font-cond);font-variant-numeric:tabular-nums}
.wl-table tr.me td{color:var(--accent)}
.wl-table .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.wl-wait{display:flex;gap:4px;flex-wrap:wrap}
.wl-wait span{width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);opacity:.35}
.wl-wait span.ok{opacity:1;box-shadow:inset 0 0 0 2px var(--good)}
@media (min-width:700px){.wl-board{--c:30px}}

/* 7.3.3 · reach, the hint line and the order bubble (as in the classic game) */
.wl-board .wc.rch{box-shadow:inset 0 0 0 2px #ffbe3d;z-index:1}
.wl-board .wc.rch::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#ffbe3d26;pointer-events:none}
.wl-board .wc.rcf{box-shadow:inset 0 0 0 2px #ff8a78;z-index:1}
.wl-board .wc.sel.rch,.wl-board .wc.sel.rcf{box-shadow:0 0 0 2px #fff,inset 0 0 0 2px #ffbe3d}
.wl-board .wc .ad{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);padding:1px 3px;border-radius:4px;font:700 calc(var(--c) * .3)/1 var(--font-cond);white-space:nowrap;z-index:2;pointer-events:none;color:#fff;background:#b8402f}
.wl-board .wc .ad.good{background:#2f8a55}
.wl-board.tiny .wc .ad{display:none}
.wl-board.tiny .wc .bd{display:none}
.wl-hint{flex:none;margin:0;min-height:18px;font-size:12.5px;line-height:1.35;color:var(--text-2);text-align:center;padding:0 4px;overflow-wrap:anywhere}
.wl-bub{flex-direction:column;align-items:stretch;gap:4px;max-width:calc(100vw - 16px);box-sizing:border-box}
.wl-bub.open{flex-wrap:nowrap;max-width:min(360px,calc(100vw - 16px))}
.wl-bub>*{flex:none}
.wl-bub .wlb-r{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;justify-content:center}
.wl-bub .bopt .chip{position:static;transform:none;width:28px;height:28px;aspect-ratio:1;font-size:16px;box-shadow:0 1px #00000059;filter:none;opacity:1}
.wl-bub .bopt.off{opacity:.38}
.wl-bub .bopt.bt .btag{box-shadow:0 0 0 1.5px #ff8a78}
.wl-bub .wlb-r2{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:4px;border-top:1px solid #3a6873;padding-top:6px}
.wl-bub .wlb-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;padding:5px 4px;border:0;border-radius:11px;background:#12363f;color:var(--text);cursor:pointer}
.wl-bub .wlb-b:hover{background:#174450}
.wl-bub .wlb-b.on{background:#ffbe3d33;box-shadow:inset 0 0 0 1.5px var(--accent)}
.wl-bub .wlb-b.off{opacity:.42}
.wl-bub .wlb-b .chip{position:static;transform:none;width:26px;height:26px;flex:none;border-radius:8px;background:#0f2a31;color:var(--accent);box-shadow:inset 0 0 0 1px #3a6873;font:700 13px/1 var(--font-cond);filter:none;opacity:1}
.wl-bub .wlb-b .t{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.wl-bub .wlb-b b{font:700 12.5px/1 var(--font-cond);letter-spacing:.02em;white-space:nowrap}
.wl-bub .wlb-b small{font:600 11.5px/1 var(--font-cond),var(--glyph-font);color:var(--text-2);white-space:nowrap}
.wl-bub .bhint{margin:2px 2px 0;order:0;flex:none}
.wl-bub .bhint.bad{background:#ff8a7826;color:#ffb3a6}
.wl-bub.bt{background:#3a1d1a;border-color:#8f3a2c}
.wl-bub.bt .barrow{background:#3a1d1a;border-color:#8f3a2c}
.wl-bub.bt .wlb-r2{border-color:#8f3a2c}

/* ---- 7.5.1 · the round history: reveal on the board, the strip of rounds, the history in the panel, every realm's orders ---- */
.wl-game{position:relative;overflow:hidden}
.wl-map{position:relative;flex:1 1 auto;min-height:150px;display:flex}
.wl-map>.wl-scroll{flex:1 1 auto;min-height:0}
.wl-past{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;border-radius:18px;background:#061418e6;box-shadow:inset 0 0 0 1px #2f6170;white-space:nowrap}
.wl-past[hidden]{display:none}
.wl-past span{font:700 12px/1 var(--font-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.wl-past button{height:28px;padding:0 11px;border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);font:700 12.5px/1 var(--font-cond);cursor:pointer}
.wl-past button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wl-board .wc.fo{z-index:4;box-shadow:0 0 0 2px #fff,0 0 12px 2px #ffffffa0}
.wl-board .wc.dim{opacity:.42}
@media (prefers-reduced-motion:no-preference){.wl-board .wc.fo{animation:wlfo 1.1s ease-in-out infinite}.wl-board .wc{transition:opacity .2s ease}}
@keyframes wlfo{0%,100%{box-shadow:0 0 0 2px #fff,0 0 5px 1px #ffffff80}50%{box-shadow:0 0 0 2px #fff,0 0 16px 4px #ffffffc0}}
.wl-board.past .wc.wlp{outline:0}
.wl-rounds{flex:none;display:grid;gap:3px}
.wl-segs{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:2px}
.wl-segs button{height:18px;padding:0;border:0;background:transparent;display:grid;align-items:center;cursor:pointer}
.wl-segs button:disabled{cursor:default}
.wl-segs i{display:block;height:8px;border-radius:2px;box-shadow:inset 0 0 0 1px #4b5770;transition:height .15s ease,background-color .2s ease}
.wl-segs .on i{background:#ffbe3d59;box-shadow:none}
.wl-segs .next i{box-shadow:inset 0 0 0 1.5px var(--accent)}
.wl-segs .cur i{height:14px;background:var(--accent);box-shadow:0 0 8px #ffbe3d80}
.wl-segs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}
.wl-cap{display:flex;align-items:center;gap:6px;min-height:30px}
.wl-step{width:28px;height:28px;flex:none;padding:0;border:0;border-radius:9px;background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer}
.wl-step:disabled{opacity:.35;cursor:default}
.wl-step:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wl-cap .wl-hint{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.3}
.wl-cap .wl-hint.past{color:var(--text)}
.wl-strip small.dl{position:absolute;top:-7px;right:-3px;padding:2px 4px;border-radius:6px;color:#0b2228;font:700 10px/1 var(--font-cond)}
.wl-strip small.dl.up{background:#6ee7a8}
.wl-strip small.dl.dn{background:#ff8a78}
@media (prefers-reduced-motion:no-preference){.wl-strip small.dl{animation:wlin .3s cubic-bezier(.2,.8,.2,1) both}}
@keyframes wlin{0%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}
/* the panel: reserve, then the history (the round being planned on top), then Diplomacy and Seal */
.wl-panel{display:flex;flex-direction:column}
.wl-feed{list-style:none;margin:0;padding:0 2px 0 0;height:clamp(118px,25dvh,250px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.wlh-n{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.wlh-n>.wlh-dot{width:28px;height:28px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--field);color:var(--text);font:700 13px/1 var(--font-cond);cursor:pointer;position:relative}
.wlh-n>.wlh-dot::after{content:"";position:absolute;top:30px;left:13px;width:2px;height:calc(100% + 400px);background:#24505a;pointer-events:none}
.wlh-n{overflow:hidden}
.wlh-n.now>.wlh-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);cursor:default}
.wlh-n.cur>.wlh-dot{background:var(--accent);color:var(--accent-ink)}
.wlh-n>.wlh-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wlh-c{margin:0 0 8px;padding:7px 6px 5px;border-radius:12px;background:var(--field);display:grid;gap:1px;min-width:0}
.wlh-n.now .wlh-c{box-shadow:inset 0 0 0 1px #ffbe3d66}
.wlh-n.rev .wlh-c{box-shadow:inset 0 0 0 1px var(--accent)}
.wlh-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px 4px;font:700 11px/1.2 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.wlh-h .up{color:var(--good)}
.wlh-h .dn{color:#ff8a78}
.wlh-n.rev .wlh-h>span:first-child::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent);vertical-align:1px}
@media (prefers-reduced-motion:no-preference){.wlh-n.rev .wlh-h>span:first-child::before{animation:pulse 1.2s ease-in-out infinite}.wlh-n.rev .wlh-l{animation:wlin .28s cubic-bezier(.2,.8,.2,1) both}}
.wlh-l{width:100%;min-height:32px;display:flex;align-items:center;gap:8px;padding:3px 4px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.wlh-l:hover,.wlh-l.sel{background:var(--panel)}
.wlh-l.sel{box-shadow:inset 0 0 0 1.5px var(--accent)}
.wlh-l:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wlh-u{width:20px;height:20px;flex:none;border-radius:50%;background:var(--uc);display:grid;place-items:center;font:11px/1 var(--glyph-font);font-style:normal;color:#1d1d1d}
.wlh-n.now .wlh-u{box-shadow:0 0 0 1.5px var(--accent)}
.wlh-ic{width:20px;height:20px;flex:none;border-radius:6px;display:grid;place-items:center;background:#0b2228;color:var(--text-2)}
.wlh-ic.bad{color:#ff8a78}
.wlh-ic.good{color:var(--good)}
.wlh-ic.key{color:var(--accent)}
.wlh-t{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlh-t b{font-weight:600}
.wlh-t span{color:var(--text-2)}
.wlh-t.bad b{color:#ff9a88}
.wlh-r{flex:none;display:flex;align-items:center;gap:3px;font:700 11.5px/1 var(--font-cond)}
.wlh-r.ok{color:var(--good)}
.wlh-r.ko{color:#ff9a88}
.wlh-ri{display:grid}
.wlh-go{display:grid;color:var(--text-2)}
.wlh-q{margin:2px 4px 4px;font-size:12.5px;color:var(--text-2)}
.wl-actions{flex:none}
/* every realm's orders: over the strip and the panel, never over the map */
.wl-ord{position:absolute;left:0;right:0;bottom:0;top:55%;z-index:20;box-sizing:border-box;padding:12px 12px calc(12px + var(--safe-b));border-radius:22px 22px 0 0;background:var(--panel);box-shadow:inset 0 1px #2f6170,0 -12px 30px #00000073;display:flex;flex-direction:column;gap:8px;transform:translateY(104%);visibility:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s}
.wl-ord.open{transform:none;visibility:visible;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.wl-ord,.wl-ord.open{transition:none}}
.wl-ord-h{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.wl-ord-h div{display:grid;gap:3px}
.wl-ord-h small{font:700 10.5px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.wl-ord-h b{font:700 21px/1 var(--font-cond)}
.wl-ord-x{width:38px;height:38px;flex:none;border:0;border-radius:12px;background:#1f4d58;color:var(--text);display:grid;place-items:center;cursor:pointer}
.wl-ord-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wl-ord-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:6px}
.wlo-r{padding:8px 10px;border-radius:12px;background:var(--field);display:grid;gap:6px}
.wlo-r.me{box-shadow:inset 0 0 0 1.5px var(--accent)}
.wlo-h{display:flex;align-items:center;gap:8px}
.wlo-h .sw{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.wlo-h b{font:700 14px/1 var(--font-cond)}
.wlo-h span{font-size:11.5px;color:var(--text-2)}
.wlo-h .wlo-d{margin-left:auto;font:700 12px/1 var(--font-cond)}
.wlo-d.up{color:var(--good)}
.wlo-d.dn{color:#ff8a78}
.wlo-o{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.wlo-b{min-width:0;min-height:40px;padding:4px 6px;border:0;border-radius:9px;background:var(--panel);color:var(--text);display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:5px;text-align:left;font:inherit;cursor:pointer}
.wlo-b.sel{box-shadow:inset 0 0 0 1.5px var(--accent)}
.wlo-b:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wlo-b span{display:grid;gap:1px;min-width:0}
.wlo-b b{font:700 12.5px/1.1 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlo-b small{font:600 10.5px/1.1 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlo-b small.ok{color:var(--good)}
.wlo-b small.ko{color:#ff9a88}
.wlo-none{grid-column:1/-1;font-size:12px;color:var(--text-2)}
@media (max-height:700px){.wl-feed{height:clamp(104px,22dvh,200px)}.wl-segs button{height:14px}.wl-cap{min-height:26px}}

/* HoldAge 7.5 · one sheet system in two themes (tokens in theme.css). A: tiles on the sheet. B: striped dark band for
   the moments that matter. W: warning band. The base components inside a sheet read the sheet's own palette. */
.sheet{visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;--panel:var(--u-sheet);--bg-soft:var(--u-tile);--field:var(--u-sunk);--line:var(--u-line);--text:var(--u-text);--text-2:var(--u-text-2);--good:var(--u-good);--bad:var(--u-bad);--accent-ink:#2b1d00;--neutral:#2c5560;background:var(--u-sheet);color:var(--u-text);color-scheme:var(--u-scheme);border-radius:28px 28px 0 0;box-shadow:var(--u-sheet-sh)}
.sheet.open{visibility:visible;transition:transform .25s ease}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--u-grab);margin:0 auto 10px}
.sh-hide{display:none!important}
/* header: kicker, title, close */
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.sh-tt{display:grid;gap:3px;min-width:0}
.sh-kick{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:var(--u-acc)}
.sheet .sh-head h2,.sheet .sh-head .result{margin:0;font-size:26px;line-height:1}
.sh-x{width:40px;height:40px;flex:none;border:0;border-radius:12px;background:var(--u-btn);box-shadow:var(--u-btn-sh);color:var(--u-text);display:grid;place-items:center;cursor:pointer;align-self:flex-start}
.sh-x:focus-visible{outline:2px solid var(--u-focus);outline-offset:2px}
.sheet p{color:var(--u-text-3)}
.sheet h3,.sheet h4{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--u-text-2);margin:16px 0 6px}
.sheet .stack{gap:10px;margin-top:14px}
/* buttons: one main action (amber in the dark theme, deep teal with an amber chip in the light one) */
.sheet .btn{min-height:50px;border:0;border-radius:16px;background:var(--u-btn);box-shadow:var(--u-btn-sh);color:var(--u-text)}
.sheet .btn.primary{position:relative;min-height:54px;padding:0 62px 0 20px;border-radius:18px;background:var(--u-pri);box-shadow:none;color:var(--u-pri-ink);text-align:left;font:700 19px/1.1 var(--font-cond)}
.sheet .btn.primary:after{content:"\2192";position:absolute;right:var(--u-pri-chip-r);top:50%;width:var(--u-pri-chip-w);height:42px;margin-top:-21px;border-radius:12px;background:var(--u-pri-chip);color:var(--u-pri-chip-ink);display:grid;place-items:center;font-size:22px;font-weight:700}
.sheet.sh-w .btn.primary:after{content:"\2713"}
.sheet .row2 .btn.primary{padding:0 52px 0 16px;font-size:17px}
.sheet .btn.quiet{min-height:46px;background:transparent;box-shadow:none;color:var(--u-text-3)}
.sheet .btn.danger{background:var(--u-warn);box-shadow:inset 0 0 0 1px var(--u-warn-line);color:var(--u-bad-ink)}
.sheet .btn.quiet.danger{background:transparent;box-shadow:none}
.sheet .btn:disabled{opacity:.5}
.sheet .btn:focus-visible{outline:2px solid var(--u-focus);outline-offset:2px}
@media (max-width:370px){.sheet .row2 .btn.primary{padding:0 44px 0 12px;font-size:15px;white-space:nowrap}}
/* fields */
.sheet input:not([type=checkbox]):not([type=radio]),.sheet textarea,.sheet select{background:var(--u-sunk);color:var(--u-text);border:0;box-shadow:inset 0 0 0 1.5px var(--u-line-2);border-radius:14px}
.sheet input:not([type=checkbox]):not([type=radio]):focus,.sheet textarea:focus{box-shadow:inset 0 0 0 2.5px var(--accent);outline:none}
.sheet .card{background:var(--u-tile);border:0;box-shadow:var(--u-tile-sh);border-radius:18px}
.sheet .code-box{background:var(--u-sunk);color:var(--u-text)}
/* toggles in one tile */
.sheet .toggle-row{background:var(--u-tile);padding:12px 14px;border-bottom:1px solid var(--u-line)}
.sheet .sh-head+.toggle-row,.sheet :not(.toggle-row)+.toggle-row{border-radius:18px 18px 0 0}
.sheet .toggle-row:has(+:not(.toggle-row)){border-radius:0 0 18px 18px;border-bottom:0;box-shadow:var(--u-tile-sh)}
.sheet .sh-head+.toggle-row:has(+:not(.toggle-row)){border-radius:18px}
.sheet .switch{border:0;background:var(--u-off)}
.sheet .switch:after{background:var(--u-off-knob)}
.sheet .switch[aria-checked=true]{background:var(--u-on)}
.sheet .switch[aria-checked=true]:after{background:var(--u-on-knob)}
/* game modes: 2 × 2 tiles */
.sheet .modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sheet .mode-card{grid-template-columns:38px minmax(0,1fr);grid-template-areas:"mi tag" "mt mt";align-items:start;gap:8px;padding:12px;border:0;border-radius:18px;background:var(--u-tile);box-shadow:var(--u-tile-sh);color:var(--u-text)}
.sheet .mode-card .mi{grid-area:mi;width:38px;height:38px;border-radius:11px;background:var(--u-sheet);color:var(--u-text)}
.sheet .mode-card .mt{grid-area:mt}
.sheet .mode-card .mtag{grid-area:tag;justify-self:end}
.sheet .mode-card small{font-size:12.5px;line-height:1.3}
.sheet .mode-card.on{background:var(--u-hi);box-shadow:inset 0 0 0 2px var(--accent)}
.sheet .mode-card.on .mi{background:var(--accent);color:#2b1d00}
.sheet .mtag{border-color:var(--u-line-2);color:var(--u-text-2)}
.sheet .mtag.rated{background:var(--accent);border-color:var(--accent);color:#2b1d00}
/* lists and stats as tiles */
.sheet .stats div{background:var(--u-tile);border:0;box-shadow:var(--u-tile-sh);border-radius:16px}
.sheet .rows{padding:2px 14px;border-radius:18px;background:var(--u-tile);box-shadow:var(--u-tile-sh)}
.sheet .rating-change{background:var(--u-tile);border:0;color:var(--u-text);border-radius:18px}
.sheet .rating-change small{color:var(--u-text-2)}
.sheet .sh-head~h3{scroll-margin-top:56px}
.sh-chips{position:sticky;top:-10px;z-index:2;display:flex;gap:6px;margin:-2px 0 12px;padding:6px 0;overflow-x:auto;scrollbar-width:none;background:var(--u-sheet)}
.sh-chips button{flex:none;height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--u-tile);box-shadow:var(--u-tile-sh);color:var(--u-text);font:inherit;font-size:14px;cursor:pointer}
.sh-chips button.on{background:var(--u-sel);box-shadow:none;color:var(--u-sel-ink);font-weight:600}
/* ---- B and W: the band (dark in both themes) ---- */
.sheet.sh-b,.sheet.sh-w{padding-top:0}
.sheet.sh-b .grab,.sheet.sh-w .grab{position:absolute;top:10px;left:50%;transform:translate(-50%);margin:0;background:#3d6672;z-index:3}
.sheet.sh-w .grab{background:#6a3a33}
.sh-band{position:relative;margin:0 calc(-1 * max(20px,var(--safe-r))) 16px calc(-1 * max(20px,var(--safe-l)));padding:24px max(20px,var(--safe-r)) 18px max(20px,var(--safe-l));background-color:var(--u-band);background-image:repeating-linear-gradient(135deg,#ffffff0a 0 14px,#fff0 14px 28px);color:#f4f6ee;color-scheme:dark;--text:#f4f6ee;--text-2:#c4d4d6;--line:#3d5d66;--bg-soft:#0b2228;--field:#0b2228;--good:#7ee0a8;--bad:#ff7a66;--neutral:#2c5560}
.sheet.sh-w .sh-band{background-color:#3a1d1a}
.sh-band .sh-head{margin-bottom:10px}
.sh-band .sh-kick{color:#ffbe3d}
.sheet.sh-w .sh-band .sh-kick{color:#ffb0a3}
.sh-band .sh-x{background:#1f4d58;box-shadow:none;color:#f4f6ee}
.sheet.sh-w .sh-band .sh-x{background:#5a2c26}
.sheet .sh-band h2{font-size:28px}
.sheet .sh-band p{color:#c4d4d6;margin:0 0 8px}
.sheet .sh-band p:last-child{margin-bottom:0}
.sh-band .tour-dots{justify-content:flex-start;margin:0 0 4px}
.sh-band .tour-dots span{background:#3d5d66}
.sh-band .tour-dots span.on{background:#ffbe3d;width:22px}
.sh-band .tour-art{background:#0b2228;border-radius:18px;padding:12px;margin-top:4px}
.sh-band .code-box{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:4px 0 10px;padding:0;background:none;letter-spacing:0;font-size:36px;color:#ffbe3d}
.sh-band .code-box span{height:64px;border-radius:14px;background:#0b2228;box-shadow:inset 0 0 0 1.5px #3d5d66;display:grid;place-items:center}
.sh-band .practice-tag{display:inline-block;margin:0 0 8px}
.sh-band .wl-rules{background:#0b2228;box-shadow:none}
/* B: end of a game — result, cells, and the rating ring in the header */
.sheet.sh-res .sh-head .result{font-size:clamp(36px,11vw,48px);line-height:.95}
.sheet.sh-res .result.win{color:#ffbe3d}
.sheet.sh-res .result.loss{color:#ff7a66}
.sh-score{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:8px}
.sh-score>span{display:grid;line-height:1}
.sh-score>span:last-child{text-align:right}
.sh-score small{font-size:12px;font-weight:700;letter-spacing:.14em;color:#a9c0c4}
.sh-score b{font:700 50px/1 var(--font-cond);font-variant-numeric:tabular-nums}
.sh-score>span:first-child b{color:#ffbe3d}
.sh-score .mid{align-self:center;max-width:120px;font-size:12px;line-height:1.3;color:#a9c0c4;text-align:center}
.sh-score .mid small{font-size:11px;letter-spacing:.14em}
.sh-ring{position:relative;flex:none;align-self:center;width:76px;height:76px;border-radius:50%;background:#0b2228;box-shadow:0 0 0 4px #24505a;display:grid;place-content:center;gap:1px;text-align:center}
.sh-ring.up{box-shadow:0 0 0 4px #ffbe3d,0 0 0 9px #ffbe3d2e}
.sh-ring b{font:800 24px/1 var(--font-cond);color:#c4d4d6}
.sh-ring.up b{color:#7ee0a8}
.sh-ring.down b{color:#ff8a78}
.sh-ring small{font-size:10px;font-weight:700;letter-spacing:.1em;color:#a9c0c4}
.sheet .rating-change.sh-flat{display:block;margin:0 0 10px;padding:0;background:none;text-align:center}
.sheet .rating-change.sh-flat .sh-sub{margin:0;font-size:14px;color:var(--u-text-2)}
.sheet.sh-res .rows{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;background:none;box-shadow:none}
.sheet.sh-res .rows li{min-height:34px;padding:0 12px;border:0;border-radius:17px;align-items:center;gap:6px;flex-wrap:nowrap;font-size:13px;background:var(--u-tile);box-shadow:var(--u-tile-sh)}
.sheet.sh-res .rows li .chip-out{color:var(--u-text);font-weight:700}
.sheet.sh-res .rows li .chip-out.good{color:var(--u-good)}
/* ---- Warlords inside a sheet ---- */
.sheet .wl-opt,.sheet .wl-dr,.sheet .wl-ev li,.sheet .wl-rules{background:var(--u-tile);border:0;box-shadow:var(--u-tile-sh);border-radius:16px}
.sheet .wl-opt{min-height:58px}
.sheet .wl-opt.bt{box-shadow:inset 0 0 0 2px #c8402f}
.sheet .wl-opt.bt small,.sheet .wl-rules .bad,.sheet .wl-dr .t span.bad{color:var(--u-bad-ink)}
.sheet .wl-dr.offer,.sheet .wl-ev li.key{background:var(--u-hi);box-shadow:inset 0 0 0 2px var(--accent)}
.sheet .wl-ev li.bad{background:var(--u-warn);box-shadow:inset 0 0 0 2px #c8402f}
.sheet .wl-dr .sw,.sheet .wl-ev li .sw,.sheet .wl-table .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.sheet .wl-dr .btn{min-height:42px;border-radius:12px}
.sheet .wl-info span{background:var(--u-tile)}
.sheet .wl-table tr.me td{color:var(--u-acc);font-weight:700}
.sheet .wl-row select{background:var(--u-sunk);border:0;box-shadow:inset 0 0 0 1.5px var(--u-line-2)}
/* ---- Settings: one card of rows, the version card, Done ---- */
.st-group{margin:0 0 12px;overflow:hidden;border-radius:16px;background:var(--u-tile);box-shadow:var(--u-tile-sh)}
.st-row{width:100%;min-height:54px;display:flex;align-items:center;gap:12px;padding:8px 14px;border:0;border-bottom:1px solid var(--u-line);background:transparent;color:var(--u-text);font:inherit;text-align:left}
.st-row:last-child{border-bottom:0}
.st-t{flex:1 1 auto;display:grid;gap:2px;min-width:0}
.st-t b{font-size:15px;font-weight:600}
.st-t small{font-size:12px;line-height:1.3;color:var(--u-text-2)}
.st-link{min-height:52px;cursor:pointer}
.st-link:active{background:var(--u-line)}
.st-ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--u-sheet);color:var(--u-acc)}
.st-go{flex:none;display:grid;color:var(--u-text-2)}
.st-link.danger{color:var(--u-bad-ink)}
.st-link.danger .st-ic{background:var(--u-warn);color:var(--u-bad-ink)}
.st-row:focus-visible{outline:2px solid var(--u-focus);outline-offset:-2px}
.sheet .st-row .switch{width:46px;height:28px}
.sheet .st-row .switch:after{width:22px;height:22px;top:2px;left:2px}
.sheet .st-row .switch[aria-checked=true]:after{transform:translate(18px)}
.st-seg{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:3px;border-radius:11px;background:var(--u-sunk);box-shadow:inset 0 0 0 1px var(--u-line)}
.st-seg button{min-width:58px;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--u-text-2);font:600 13px/1 var(--font);cursor:pointer}
.st-seg button[aria-pressed=true]{background:var(--u-sel);color:var(--u-sel-ink)}
.st-seg button:focus-visible{outline:2px solid var(--u-focus);outline-offset:1px}
.st-ver{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--u-sunk);box-shadow:inset 0 0 0 1px var(--u-line);color:var(--u-text)}
.st-ver .st-t b{font:700 16px/1.1 var(--font-cond)}
.st-mark{width:40px;height:40px;flex:none;border-radius:11px;display:grid;grid-auto-flow:column;place-content:center;background:#17404a;color:#f4f6ee;font:700 15px/1 var(--font-cond);letter-spacing:.04em}
.st-mark span{color:#ffbe3d}
/* ---- Online: create or join ---- */
.ol-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ol-tile{height:124px;display:grid;align-content:space-between;justify-items:start;gap:8px;padding:14px;border:0;border-radius:18px;background:var(--u-tile);box-shadow:var(--u-tile-sh),inset 0 0 0 1px var(--u-line);color:var(--u-text);font:inherit;text-align:left;cursor:pointer;transition:transform .1s ease}
.ol-tile:active{transform:scale(.97)}
.ol-tile.go{background:var(--u-pri);box-shadow:none;color:var(--u-pri-ink)}
.ol-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--u-sheet);color:var(--u-acc)}
.ol-tile.go .ol-ic{background:var(--accent);color:#2b1d00}
:root:not([data-theme=light]) .ol-tile.go .ol-ic{background:#2b1d00;color:#ffbe3d}
.ol-t{display:grid;gap:4px}
.ol-t b{font:700 19px/1 var(--font-cond)}
.ol-t small{font-size:12px;line-height:1.3;color:var(--u-text-2)}
.ol-tile.go .ol-t small{color:var(--u-pri-sub)}
.ol-tile:focus-visible{outline:2px solid var(--u-focus);outline-offset:2px}
.ol-note{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--u-tile);color:var(--u-text-2)}
.ol-note span{display:grid;flex:none}
.ol-note small{font-size:12.5px;line-height:1.35;color:var(--u-text-3)}
/* ---- Join a room: five code boxes over the real input, Paste beside them ---- */
.otp{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:4px 0 6px}
.otp.has-paste{grid-template-columns:minmax(0,1fr) 52px}
.otp-boxes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.otp-boxes span{height:60px;border-radius:14px;background:var(--u-sunk);box-shadow:inset 0 0 0 1.5px var(--u-line-2);display:grid;place-items:center;font:700 30px/1 var(--font-cond);color:var(--u-acc);transition:box-shadow .12s ease}
.otp-boxes span.full{box-shadow:inset 0 0 0 1.5px var(--u-line-3)}
.otp-boxes span.cur{box-shadow:inset 0 0 0 2.5px var(--accent)}
.sheet .otp .code-input{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:.01;color:transparent;caret-color:transparent;background:transparent;box-shadow:none;font-size:16px;letter-spacing:0;cursor:text}
.sheet .otp.has-paste .code-input{width:calc(100% - 60px)}
.otp-paste{height:60px;border:0;border-radius:14px;background:var(--u-btn);box-shadow:var(--u-btn-sh);color:var(--u-text);display:grid;place-items:center;cursor:pointer}
.otp-paste:active{transform:translateY(1px)}
/* ---- Named board: "#" before the name, the preview inline ---- */
.nb-field{position:relative;display:flex;align-items:center}
.nb-hash{position:absolute;left:14px;font:700 22px/1 var(--font-cond);color:var(--u-acc);pointer-events:none}
.sheet .nb-field .name-input{padding-left:38px;text-align:left}
.nb-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin:12px 0 4px}
.nb-row .preview-wrap{margin:0}
.nb-row .preview{grid-template-columns:repeat(8,15px);gap:2px}
.nb-row .preview i{width:15px;height:15px;border-radius:3px;font-size:8px}
.nb-row .preview.empty{width:150px;height:150px;grid-template-columns:1fr}
.nb-row .status-line{margin:0;font-size:13px;line-height:1.4}
/* ---- connection steps side by side (room ready, join, rejoin) ---- */
@media (min-width:360px){
  .sheet .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 6px}
  .sheet .step{grid-template-columns:1fr;justify-items:center;gap:6px;padding:10px 6px;border:0;border-radius:14px;background:var(--u-tile);text-align:center}
  .sheet .step .st{gap:2px}
  .sheet .step .st b{font-size:13px;line-height:1.15}
  .sheet .step .st small{font-size:11.5px;line-height:1.25}
}
/* ---- Profile sheet: the numbers first ---- */
.pf-av{display:grid;flex:none}
.pf-av .av{width:48px;height:48px;font-size:18px;box-shadow:0 0 0 2px var(--u-sheet),0 0 0 4px var(--ring)}
.sh-head:has(.pf-av){justify-content:flex-start}
.sh-head:has(.pf-av) .sh-tt{flex:1 1 auto}
.pf-tier{justify-self:start;margin-top:2px;padding:4px 8px;border-radius:6px;background:var(--c);color:#14262b;font:700 11px/1 var(--font-cond);letter-spacing:.1em;text-transform:uppercase}
.pf-card{display:grid;gap:10px;padding:14px;border-radius:18px;background:var(--u-tile);box-shadow:var(--u-tile-sh)}
.pf-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.pf-rt{display:grid;gap:5px}
.pf-rt>small,.pf-dl small{font:700 10.5px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--u-text-2)}
.pf-rt>span{display:flex;align-items:baseline;gap:8px}
.pf-rt b{font:700 46px/1 var(--font-cond);font-variant-numeric:tabular-nums}
.pf-rt span small{font:600 14px/1 var(--font-cond);color:var(--u-text-2)}
.pf-dl{display:grid;justify-items:end;gap:5px;text-align:right}
.pf-dl b{font:700 18px/1 var(--font-cond);color:var(--dl,var(--u-text-2))}
.pf-dl small{letter-spacing:.04em;text-transform:none;font-weight:600;font-size:11.5px}
.pf-spark svg{display:block;width:100%;height:58px}
.pf-prog{display:grid;gap:6px}
.pf-prog>span{display:flex;justify-content:space-between;font:600 11.5px/1 var(--font-cond);letter-spacing:.04em;color:var(--u-text-2)}
.pf-prog .acc{color:var(--u-acc)}
.pf-bar,.pf-rb{display:block;height:6px;border-radius:3px;background:var(--u-track);overflow:hidden}
.pf-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#c9d2e3,#ffbe3d)}
.pf-rb i{display:block;height:100%;border-radius:3px;background:var(--u-good)}
.pf-rb i.lo{background:var(--accent)}
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.pf-stats div{display:grid;justify-items:center;gap:5px;padding:10px 4px;border-radius:14px;background:var(--u-tile);box-shadow:var(--u-tile-sh)}
.pf-stats b{font:700 22px/1 var(--font-cond)}
.pf-stats small{font:600 11px/1 var(--font-cond);color:var(--u-text-2);text-align:center}
.pf-rows{margin-top:10px;padding:4px 14px;border-radius:16px;background:var(--u-tile);box-shadow:var(--u-tile-sh)}
.pf-row{display:grid;grid-template-columns:96px minmax(0,1fr) 54px;align-items:center;gap:10px;min-height:34px;border-bottom:1px solid var(--u-line);font-size:13.5px}
.pf-row:last-child{border-bottom:0}
.pf-row b{font:700 14px/1 var(--font-cond);text-align:right}
.pf-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px;margin-top:12px}
.pf-acts .btn{min-height:52px}
:root[data-theme=light] .sheet .row2 .btn.primary:after{width:36px;height:36px;margin-top:-18px;right:7px}
@media (max-width:370px){:root[data-theme=light] .sheet .row2 .btn.primary:after{width:30px;height:30px;margin-top:-15px;right:6px;font-size:18px}}
/* 7.6 · Settings → Notifications */
.np-kinds.off .st-row{opacity:.5}
.np-kinds .switch[disabled],.st-group .switch[disabled]{cursor:not-allowed}
.sheet select.np-hour{flex:none;height:32px;padding:0 26px 0 10px;border-radius:9px;font:600 13px/1 var(--font);-webkit-appearance:none;appearance:none;background:var(--u-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23889ea3' stroke-width='1.6'/%3E%3C/svg%3E") right 9px center no-repeat;box-shadow:inset 0 0 0 1px var(--u-line);color:var(--u-text)}
.sheet select.np-hour:disabled{opacity:.55}
.np-acts{display:flex;justify-content:center;margin:0 0 10px}
.np-acts .btn{min-height:40px}
.np-note{margin:0 2px 12px;font-size:12px;line-height:1.4;color:var(--u-text-2)}
.st-t small.np-st{color:var(--u-text-2)}
.sheet .switch:disabled{opacity:.45}

/* HoldAge 7.5 · profile, puzzles, tournaments, Warlords home and room: the dark striped band on top (both themes),
   then tiles in the theme's palette (theme.css). The base components read the screen's own palette. */
.profile-screen{--panel:var(--u-bg);--bg-soft:var(--u-card);--field:var(--u-sunk);--line:var(--u-line);--text:var(--u-text);--text-2:var(--u-text-2);--good:var(--u-good);--bad:var(--u-bad);--accent-ink:#2b1d00;--neutral:var(--u-text-3);background:var(--u-bg);color:var(--u-text);color-scheme:var(--u-scheme)}
.profile-screen .profile-inner{padding-top:0}
.sc-hide{display:none!important}
/* the band */
.sc-band{margin:0 calc(-1 * max(16px,var(--safe-r))) 0 calc(-1 * max(16px,var(--safe-l)));padding:calc(12px + var(--safe-t)) max(16px,var(--safe-r)) 18px max(16px,var(--safe-l));background-color:var(--u-band-s);background-image:repeating-linear-gradient(135deg,#ffffff09 0 14px,#fff0 14px 28px);color:#ece4cf;color-scheme:dark;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;--text:#ece4cf;--text-2:#a9c0c4;--line:#3d5d66;--bg-soft:#0f2a31;--field:#0f2a31;--panel:#17404a;--good:#7ee0a8;--bad:#ff8a78}
@media (min-width:600px){.sc-band{border-radius:0 0 24px 24px}}
.sc-band .profile-top h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 30px/1 var(--font-cond);letter-spacing:.05em;color:#ece4cf}
.sc-band .profile-top h2 .acc{color:#ffbe3d}
.sc-band .icon-btn{border:0;border-radius:14px;background:#1f4d58;color:#ece4cf}
.sc-band .icon-btn:focus-visible{outline:2px solid #ffbe3d;outline-offset:2px}
.sc-x{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.sc-x:empty{display:none}
.sc-x p{margin:0;color:#c4d4d6;font-size:13px;line-height:1.4}
.sc-x small{color:#a9c0c4}
/* tiles and controls */
.profile-screen .card{border:0;border-radius:18px;background:var(--u-card);box-shadow:var(--u-card-sh)}
.profile-screen .card h3{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--u-text-2)}
.profile-screen .btn{min-height:52px;border:0;border-radius:16px;background:var(--u-btn);box-shadow:var(--u-btn-sh);color:var(--u-text)}
.profile-screen .btn.primary{position:relative;min-height:58px;padding:0 62px 0 20px;border-radius:18px;background:var(--u-pri);box-shadow:none;color:var(--u-pri-ink);text-align:left;font:700 19px/1.1 var(--font-cond)}
.profile-screen .btn.primary:after{content:"\2192";position:absolute;right:var(--u-pri-chip-r);top:50%;width:var(--u-pri-chip-w);height:42px;margin-top:-21px;border-radius:12px;background:var(--u-pri-chip);color:var(--u-pri-chip-ink);display:grid;place-items:center;font-size:22px;font-weight:700}
.profile-screen .row2 .btn.primary{padding:0 52px 0 16px;font-size:17px}
:root[data-theme=light] .profile-screen .row2 .btn.primary:after{width:36px;height:36px;margin-top:-18px;right:7px}
.profile-screen .btn.quiet{min-height:46px;background:transparent;box-shadow:none;color:var(--u-text-3)}
.profile-screen .btn.danger{background:var(--u-warn);box-shadow:inset 0 0 0 1px var(--u-warn-line);color:var(--u-bad-ink)}
.profile-screen .btn.quiet.danger{background:transparent;box-shadow:none}
.profile-screen .btn:focus-visible{outline:2px solid var(--u-focus);outline-offset:2px}
.profile-screen input:not([type=checkbox]):not([type=radio]),.profile-screen select,.profile-screen textarea{border:0;border-radius:12px;background:var(--u-sunk);box-shadow:inset 0 0 0 1.5px var(--u-line-2);color:var(--u-text)}
.profile-screen input[type=checkbox]{accent-color:var(--accent)}
.profile-screen .seg{border:0;background:var(--u-sunk);box-shadow:inset 0 0 0 1px var(--u-line)}
.profile-screen .seg button{color:var(--u-text-2)}
.profile-screen .seg button[aria-pressed=true],.profile-screen .seg button[aria-selected=true]{background:var(--u-sel);color:var(--u-sel-ink)}
.profile-screen .switch{border:0;background:var(--u-off)}
.profile-screen .switch:after{background:var(--u-off-knob)}
.profile-screen .switch[aria-checked=true]{background:var(--u-on)}
.profile-screen .switch[aria-checked=true]:after{background:var(--u-on-knob)}
/* puzzles */
.sc-x .ph-stats{margin:0;grid-template-columns:1fr auto}
.sc-x .ph-stats div:last-child{text-align:right}
.sc-x .ph-stats b{font-size:44px;color:#ece4cf}
.sc-x .ph-stats div:last-child b{color:#ffbe3d}
.sc-x .ph-stats span{color:#a9c0c4;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.profile-screen .puzzle-head{padding:0;background:none;box-shadow:none}
.profile-screen .puzzle-head .btn{margin-top:0}
.sc-tabs{margin-top:10px;grid-template-columns:repeat(3,minmax(0,1fr));padding:5px;border-radius:16px}
.sc-tabs button{min-height:42px;border-radius:11px;font-size:14px}
.profile-screen .sc-level{padding:0;background:none;box-shadow:none}
.profile-screen .sc-level h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.profile-screen .ptiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.profile-screen .ptile{min-height:58px;border:0;border-radius:14px;background:var(--u-card);box-shadow:var(--u-card-sh);color:var(--u-text)}
.profile-screen .ptile small{font-size:12px;color:var(--u-text-2)}
.profile-screen .ptile.solved{background:var(--u-hi);box-shadow:inset 0 0 0 1px var(--u-hi-line)}
.profile-screen .ptile.tried{box-shadow:inset 0 0 0 1.5px var(--u-line-3)}
.profile-screen .ptile:focus-visible{outline:2px solid var(--u-focus);outline-offset:2px}
/* tournaments */
.sc-x .cup-meta{margin:0;font:700 15px/1.3 var(--font-cond);letter-spacing:.04em;text-transform:uppercase;color:#ece4cf}
.sc-x .cup-boards{margin:2px 0 0}
.sc-x .cboard{min-height:64px;border:0;border-radius:14px;background:#0f2a31;box-shadow:inset 0 0 0 1.5px #3d5d66;color:#ece4cf}
.sc-x .cboard small{color:#a9c0c4}
.sc-x .cboard.open{box-shadow:inset 0 0 0 2px #ffbe3d}
.sc-x .cboard.open b{color:#ffbe3d}
.sc-x .cboard.win b{color:#7ee0a8}
.sc-x .cboard.loss b{color:#ff8a78}
.profile-screen .cup-list li>*{border-radius:16px}
.profile-screen .cs-status .cs-dot{background:var(--u-line-3)}
.profile-screen .cs-status.on .cs-dot{background:var(--u-good)}
.sc-x .cs-status{margin:0;color:#a9c0c4;font-weight:600}
.sc-x .cs-status.on{color:#7ee0a8}
.sc-x .cs-status.on .cs-dot{background:#7ee0a8}
/* Warlords home */
.profile-screen .sc-x .wl-stat{border-radius:14px;background:#0f2a31;box-shadow:none}
.sc-x .wl-stat b{font-size:26px}
.sc-x .wl-stat:first-child b{color:#ffbe3d}
.profile-screen .wl-stat{background:var(--u-card)}
.profile-screen .wl-realm-pick{border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.profile-screen .wl-realm-pick[aria-checked=true]{border-color:var(--u-focus);box-shadow:inset 0 0 0 2px var(--u-bg)}
.profile-screen .wl-room{border:0;border-radius:16px;background:var(--u-card);box-shadow:var(--u-card-sh)}
.profile-screen .wl-room.turn{background:var(--u-hi);box-shadow:inset 0 0 0 2px var(--accent)}
.profile-screen .wl-room small.hot{color:var(--u-acc);font-weight:600}
/* Warlords room */
.sc-x .wl-code{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:0;background:none}
.sc-x .wl-code small,.sc-x .wl-code br{display:none}
.sc-x .wl-code b{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;letter-spacing:0}
.sc-x .wl-code b span{height:52px;border-radius:12px;background:#0f2a31;box-shadow:inset 0 0 0 1.5px #3d5d66;display:grid;place-items:center;font:800 28px/1 var(--font-cond);color:#ffbe3d}
.sc-x .wl-code .btn{min-height:52px;padding:0 14px;border-radius:12px;background:#ffbe3d;box-shadow:none;color:#2b1d00}
.profile-screen .wl-seats{gap:0}
.profile-screen .wl-seat{min-height:46px;padding:0;border-radius:0;border-bottom:1px solid var(--u-line);background:none}
.profile-screen .wl-seat:last-child{border-bottom:0}
.profile-screen .wl-seat .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.profile-screen .wl-seat .who{color:var(--u-text-3)}
.profile-screen .wl-seat .who.open{color:var(--u-acc)}
.profile-screen .wl-seat .who.me{color:var(--u-text);font-weight:700}
.profile-screen :is(.wl-seat,.wl-row) select{-webkit-appearance:none;appearance:none;background:var(--u-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23889ea3' stroke-width='1.6'/%3E%3C/svg%3E") right 9px center no-repeat;box-shadow:inset 0 0 0 1px var(--u-line);color:var(--u-text)}
.profile-screen .wl-seat select{min-height:30px;padding:0 24px 0 9px;border-radius:8px;font:700 11px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase}
.profile-screen .wl-seat .btn.take{min-height:34px;padding:0 12px;border-radius:10px;font-size:13px}
.profile-screen .wl-row select{min-height:38px;padding:0 28px 0 12px;border:0;border-radius:10px;font-weight:600}
.profile-screen .wl-row input[type=checkbox]{accent-color:var(--accent)}
/* accent text on the screens */
.profile-screen :is(.table.stand tr.me td,.cs-feed li.me b,.mtag.rated,.cup-row .mi,.stars,.mode-tag,.mode-line,.practice-tag,.ptile.solved small){color:var(--u-acc)}
.profile-screen .mtag.rated{border-color:var(--u-acc)}

/* HoldAge 7.6.1 · Landscape (src/landscape.js): the board on one side, the panel on the other.
   The same media query as LS_Q in landscape.js; the JS adds .ls to .game / .wl-game while it matches. */
.ls-panel,.ls-past,#wl-tabs,#wl-realms,.wl-strip .rn{display:none}

/* ---- the panel's tabs (classic and Warlords) ---- */
.ls-tabs{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:13px;background:var(--field)}
.ls-tab{min-width:0;height:36px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:var(--text);font:700 14.5px/1 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.ls-tab[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}
.ls-tab:disabled{opacity:.45;cursor:default}
.ls-tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

@media (orientation:landscape) and (min-width:640px) and (min-height:340px){
  /* ---------- classic ---------- */
  .game.ls{max-width:1480px;display:grid;grid-template-columns:calc(var(--board) + 16px) minmax(280px,560px);grid-template-rows:auto auto auto auto minmax(0,1fr);justify-content:center;align-content:start;column-gap:22px;row-gap:8px}
  .game.ls>.topbar{grid-column:1/-1;grid-row:1}
  .game.ls>.player.foe{grid-column:1;grid-row:2}
  .game.ls>.boardwrap{grid-column:1;grid-row:3;position:relative}
  .game.ls>.player.me{grid-column:1;grid-row:4}
  .game.ls>.ls-panel{grid-column:2;grid-row:2/6;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
  .game.ls .ls-panel>.log{--srow:16px;--srow-max:34px;width:auto;margin:0;flex:1 1 auto;min-height:0;max-height:none;border:0;background:var(--field)}
  .game.ls .ls-panel>.log:has(>.v-sheet){max-height:none}
  .game.ls .ls-panel>.log[hidden]{display:none}
  .ls-pane{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
  .ls-pane[hidden]{display:none}
  .ls-pane>.btn{flex:none;margin:0}
  .ls-pane .notation{flex:none;margin:0}
  .ls-rnav{flex:none;display:flex;align-items:center;gap:10px}
  .ls-rnav .icon-btn{width:38px;height:38px;border:0;border-radius:11px;background:#1f4d58;color:var(--text);font:700 20px/1 var(--font);cursor:pointer}
  .ls-rnav .icon-btn:disabled{opacity:.4;cursor:default}
  .ls-rt{flex:1 1 auto;min-width:0;display:grid;gap:3px}
  .ls-rt small{font:700 11px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .ls-rt b{font:700 19px/1.1 var(--font-cond)}
  .ls-rep{display:grid;gap:6px;padding:10px 12px;border-radius:14px;background:var(--field)}
  .ls-rep>p{margin:0;font-size:14px;line-height:1.35}
  .ls-rep>h3{margin:6px 0 0;font:700 12px/1 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
  .ls-rep .rows,.ls-rep .plain{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:none;box-shadow:none}
  .ls-rep .rows li,.ls-rep .plain li{display:flex;justify-content:space-between;gap:10px;min-height:32px;align-items:center;padding:4px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;font-size:14px}
  .ls-rep .rows li:last-child,.ls-rep .plain li:last-child{border-bottom:0}
  .ls-pane .muted{margin:0;color:var(--text-2)}
  .ls-pane .small{font-size:12.5px;line-height:1.4}
  /* your orders */
  .game.ls .ls-panel>.log:has(>.v-strip){flex:0 1 auto}
  .ls-orders{flex:none;margin-top:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px}
  .ls-orders[hidden]{display:none}
  .ls-ord{min-width:0;min-height:46px;display:flex;align-items:center;gap:8px;padding:5px 8px;border:0;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--text);text-align:left;font:inherit;cursor:pointer}
  .ls-ord.free{box-shadow:inset 0 0 0 1.5px #2f6170;color:var(--text-2);cursor:default}
  .ls-ord>i{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;background:#1f4d58;color:var(--text);font:700 14px/1 var(--glyph-font);font-style:normal}
  .ls-ord .chip{position:static;width:24px;height:24px;flex:none;transform:none;font-size:13px;box-shadow:0 0 0 1px #00000040}
  .ls-ord>span{min-width:0;display:grid;gap:2px}
  .ls-ord b{font:700 14px/1.05 var(--font-cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ls-ord small{font:600 11.5px/1 var(--font-cond);color:var(--text-2)}
  .ls-ord:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .game.ls .ls-panel>.dock{margin-top:0;padding-top:10px;border-top:1px solid var(--line)}
  .game.ls .ls-panel .hint{text-align:left}
  /* "Viewing round N · Back to now" over the board */
  .game.ls .ls-past{position:absolute;top:10px;left:calc(50% + 8px);transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:20px;background:#061418eb;box-shadow:inset 0 0 0 1px #2f6170,0 6px 18px #0008;white-space:nowrap}
  .game.ls .ls-past[hidden]{display:none}
  .ls-past span{font:700 13px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
  .ls-past button{height:30px;padding:0 12px;border:0;border-radius:15px;background:var(--accent);color:var(--accent-ink);font:700 13px/1 var(--font-cond);cursor:pointer}

  /* ---------- Warlords ---------- */
  .wl-game.ls{max-width:1480px;display:grid;grid-template-columns:var(--wlmap,60%) minmax(280px,560px);grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"top top" "ban ban" "map strip" "map panel" "rounds panel";justify-content:center;column-gap:18px;row-gap:8px}
  .wl-game.ls>.wl-top{grid-area:top}
  .wl-game.ls>#wl-banner{grid-area:ban}
  .wl-game.ls>#wl-banner[hidden]{display:none}
  .wl-game.ls>.wl-map{grid-area:map;min-height:0;min-width:0}
  .wl-game.ls>.wl-rounds{grid-area:rounds}
  .wl-game.ls>#wl-strip{grid-area:strip;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .wl-game.ls>.wl-panel{grid-area:panel;min-height:0}
  .wl-game.ls .wl-strip button{flex-direction:row;justify-content:flex-start;gap:7px;min-height:42px;padding:4px 8px}
  .wl-game.ls .wl-strip .rn{display:block;flex:1 1 auto;min-width:0;font:700 12.5px/1 var(--font-cond);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wl-game.ls .wl-strip b{font-size:16px}
  .wl-game.ls .wl-feed{flex:1 1 auto;height:auto;min-height:0}
  .wl-game.ls .wl-feed[hidden]{display:none}
  .wl-game.ls #wl-tabs{display:grid}
  .wl-game.ls #wl-realms{display:grid;flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;gap:4px;overscroll-behavior:contain;scrollbar-width:thin}
  .wl-game.ls #wl-realms[hidden]{display:none}
  .wl-game.ls #wl-ord{position:static;inset:auto;z-index:auto;transform:none;visibility:visible;display:none;flex:1 1 auto;min-height:0;padding:0;border-radius:0;background:transparent;box-shadow:none;transition:none}
  .wl-game.ls #wl-ord.open{display:flex}
  .wl-game.ls #wl-ord .wl-ord-h b{font-size:17px}
  .wl-game.ls #wl-ord .wl-ord-x{width:34px;height:34px}
  .wlr-h,.wlr{display:grid;grid-template-columns:minmax(0,1fr) 40px 44px 46px 88px;align-items:center;gap:6px}
  .wlr-h{padding:0 10px 2px;font:700 11px/1 var(--font-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
  .wlr-h span:not(:first-child){text-align:right}
  .wlr{min-height:42px;padding:0 10px;border:0;border-radius:11px;background:var(--field);color:var(--text);text-align:right;font:500 14px/1 var(--font);cursor:pointer}
  .wlr.me{box-shadow:inset 0 0 0 1.5px var(--accent)}
  .wlr.out{opacity:.55}
  .wlr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .wlr>b{font:700 16px/1 var(--font-cond)}
  .wlr-n{display:flex;align-items:center;gap:8px;min-width:0;text-align:left}
  .wlr-n em{width:16px;flex:none;font:700 12px/1 var(--font-cond);font-style:normal;color:var(--text-2)}
  .wlr-n .sw{width:14px;height:14px;flex:none;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff4d}
  .wlr-n b{font:700 14.5px/1 var(--font-cond)}
  .wlr-n small{min-width:0;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wlr-s{font:700 12px/1 var(--font-cond);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wlr-s.key{color:var(--accent)}
  .wlr-s.bad{color:#ff9a88}
}
/* Phones turned sideways: the same two columns, tighter. */
@media (orientation:landscape) and (min-width:640px) and (min-height:340px) and (max-height:520px){
  .game.ls{column-gap:14px;row-gap:5px}
  .game.ls>.ls-panel{padding:8px;gap:6px;border-radius:14px}
  .ls-tab{height:30px;font-size:13px}
  .ls-orders{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
  .ls-ord{min-height:38px;padding:3px 6px}
  .wl-game.ls{column-gap:12px;row-gap:5px}
  .wl-game.ls>#wl-strip{gap:4px}
  .wl-game.ls .wl-strip button{min-height:34px;padding:2px 6px}
  .wl-game.ls .wl-strip .rn{display:none}
}