:root{--bg:#0b1110;--panel:#121b19;--panel2:#172320;--line:#24342f;--text:#eef7f3;--muted:#94aaa3;--brand:#68e0b3;--brand2:#36b98a;--danger:#ff7a7a;--gold:#e7c66a;--sq1:#d7e7dd;--sq2:#4d7669;--und1:#b5b2d5;--und2:#4c466e;--shadow:0 18px 50px rgba(0,0,0,.28)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 10% 0,#13201c 0,transparent 38%),var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}button,input{font:inherit}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,4vw,56px);background:rgba(11,17,16,.84);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:flex;gap:10px;align-items:center;font-size:18px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--brand),#26765d);color:#092018;font-size:23px;box-shadow:0 0 28px rgba(104,224,179,.2)}.topbar nav{display:flex;align-items:center;gap:18px}.topbar nav>a:not(.btn){color:var(--muted)}.topbar nav>a:hover{color:var(--text)}.user-chip{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#cce5dc}.inline{display:inline}.link-btn{background:none;border:0;color:var(--muted);cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 18px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#082018;font-weight:800;cursor:pointer;box-shadow:0 9px 26px rgba(54,185,138,.18)}.btn:hover{transform:translateY(-1px)}.btn.small{padding:8px 12px;border-radius:9px;font-size:13px}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}.btn.danger{background:rgba(255,122,122,.12);border:1px solid rgba(255,122,122,.32);color:#ffb1b1;box-shadow:none}.btn.wide{width:100%}.hero-wrap{max-width:1220px;margin:auto;padding:52px 26px 80px}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;min-height:560px}.eyebrow{color:var(--brand);font-size:12px;font-weight:900;letter-spacing:.16em;margin-bottom:12px}.hero h1{font-size:clamp(42px,6vw,74px);line-height:1.02;letter-spacing:-.055em;margin:0 0 24px}.hero h1 span{color:var(--brand)}.hero p{max-width:670px;font-size:18px;color:var(--muted)}.hero-actions{display:flex;gap:12px;margin-top:30px}.hero-board{height:430px;position:relative;perspective:900px}.mini-board{position:absolute;width:330px;height:330px;border-radius:18px;box-shadow:var(--shadow);background:conic-gradient(from 90deg,#50786b 25%,#d8e5dd 0 50%,#50786b 0 75%,#d8e5dd 0) 0 0/82.5px 82.5px;border:10px solid #1b2b27}.layer-a{right:80px;top:22px;transform:rotateX(58deg) rotateZ(-10deg)}.layer-b{right:15px;top:104px;opacity:.68;filter:hue-rotate(55deg);transform:rotateX(58deg) rotateZ(-10deg)}.depth-label{position:absolute;right:10px;top:40px;color:var(--brand);font-weight:900;letter-spacing:.2em}.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.rules-grid article,.panel,.stat{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.rules-grid article{padding:24px}.rules-grid article>span{color:var(--brand);font-weight:900}.rules-grid h3{margin:18px 0 8px}.rules-grid p{color:var(--muted);margin:0}.auth-shell{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:34px 18px}.auth-card{width:min(440px,100%);padding:34px;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.auth-icon{font-size:50px;color:var(--brand)}.auth-card h1{margin:6px 0}.auth-card>p{color:var(--muted)}.form-stack{display:grid;gap:15px;margin-top:24px}.form-stack label{display:grid;gap:7px;color:#cbdad5;font-weight:700}.form-stack input,.search{width:100%;border:1px solid var(--line);background:#0c1412;color:var(--text);padding:12px 13px;border-radius:10px;outline:none}.form-stack input:focus,.search:focus{border-color:var(--brand)}.switch-auth{text-align:center;margin-top:20px!important}.switch-auth a{color:var(--brand);font-weight:700}.toast,.notice{max-width:760px;margin:16px auto;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel)}.toast.success,.notice.success{border-color:rgba(104,224,179,.35);color:#aef2d7}.toast.error,.notice.danger{border-color:rgba(255,122,122,.35);color:#ffb3b3}.app-shell{max-width:1220px;margin:auto;padding:34px 24px 70px}.welcome-row{display:flex;justify-content:space-between;align-items:flex-end;margin:12px 0 26px}.welcome-row h1{font-size:34px;margin:0}.welcome-row p{color:var(--muted);margin:5px 0}.status-card{border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:#cfe2db}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}.online{background:var(--brand);box-shadow:0 0 10px var(--brand)}.dashboard-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}.panel{padding:20px}.panel.span-2{grid-column:1/-1}.panel.compact{padding:16px}.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:15px}.panel-head h2,.panel h3{margin:0}.panel-head p{margin:4px 0 0;color:var(--muted)}.search{max-width:260px}.player-list,.invite-list,.game-list{display:grid;gap:10px}.player,.invite,.game-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 13px;background:#0d1614;border:1px solid #1c2a26;border-radius:12px}.player-main,.avatar-line{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#21362f;color:var(--brand);font-weight:900}.player small,.avatar-line small{display:block;color:var(--muted)}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:#1c2925;color:#bdd1ca;font-size:12px}.badge.good{color:#9ff0ce;background:rgba(104,224,179,.1)}.badge.bad{color:#ffb1b1;background:rgba(255,122,122,.1)}.game-shell{max-width:1500px;margin:auto;padding:20px 22px 60px}.game-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:4px 0 18px}.back{color:var(--muted)}.game-title{font-weight:900;font-size:18px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.boards-area{display:grid;grid-template-columns:minmax(290px,1fr) 56px minmax(290px,1fr);align-items:center;gap:10px}.board-card{background:#111a18;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}.underground-card{background:linear-gradient(180deg,#171729,#11111d)}.board-label{display:flex;align-items:center;gap:10px;margin-bottom:10px}.board-label small{display:block;color:var(--muted)}.layer-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 12px currentColor}.layer-dot.surface{background:var(--brand);color:var(--brand)}.layer-dot.underground{background:#a9a2f2;color:#a9a2f2}.depth-connector{text-align:center;color:var(--brand)}.depth-connector span{font-size:32px;display:block}.depth-connector small{font-size:9px;letter-spacing:.12em}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.square{position:relative;display:grid;place-items:center;aspect-ratio:1;cursor:pointer;user-select:none}.square.light{background:var(--sq1)}.square.dark{background:var(--sq2)}#board-underground .square.light{background:var(--und1)}#board-underground .square.dark{background:var(--und2)}.square.selected{outline:4px solid var(--gold);outline-offset:-4px}.square.linked{box-shadow:inset 0 0 0 4px rgba(231,198,106,.48)}.piece{font-size:clamp(29px,4.3vw,58px);line-height:1;filter:drop-shadow(0 4px 2px rgba(0,0,0,.35));text-shadow:0 1px 0 rgba(255,255,255,.22);transform:translateY(-1px)}.coord{position:absolute;font-size:9px;font-weight:900;opacity:.6}.coord.file{right:3px;bottom:1px}.coord.rank{left:3px;top:1px}.game-sidebar{display:grid;align-content:start;gap:12px}.player-vs{display:grid;gap:9px}.vs-row{display:flex;justify-content:space-between;align-items:center}.turn-banner{margin-top:13px;padding:10px;border-radius:10px;background:#0d1714;color:var(--brand);font-weight:800;text-align:center}.tunnel-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.tstat{background:#0d1514;border-radius:9px;padding:9px;display:flex;flex-direction:column;justify-content:center;min-height:68px}.tstat-main b{display:block;font-size:12px;line-height:1.25;font-weight:800}.tstat small{display:block;color:var(--muted);font-size:12px;line-height:1.2}.hint{color:var(--muted);font-size:13px}.move-log{max-height:300px;overflow:auto;display:grid;gap:5px;margin-top:10px}.move-item{display:grid;grid-template-columns:34px 1fr;gap:7px;padding:7px 8px;border-radius:8px;background:#0e1715;font-size:12px}.move-item span:first-child{color:var(--muted)}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.stat{padding:20px}.stat b{display:block;font-size:28px;color:var(--brand)}.stat span{color:var(--muted)}.admin-setting{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.admin-setting h2{margin:0}.admin-setting p{margin:4px 0;color:var(--muted)}.switch{position:relative;width:54px;height:30px}.switch input{display:none}.switch span{position:absolute;inset:0;border-radius:999px;background:#34433e;cursor:pointer;transition:.2s}.switch span:after{content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;border-radius:50%;background:white;transition:.2s}.switch input:checked+span{background:var(--brand2)}.switch input:checked+span:after{transform:translateX(24px)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:780px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px}.actions{display:flex;gap:6px}.icon-btn{border:1px solid var(--line);background:#111c19;color:var(--text);border-radius:8px;padding:6px 9px;cursor:pointer}.danger-text{color:#ff9d9d}.skeleton-box{min-height:100px;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;padding:22px clamp(20px,4vw,56px);border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:1100px){.game-layout{grid-template-columns:1fr}.game-sidebar{grid-template-columns:repeat(2,1fr)}.moves-panel{grid-column:1/-1}.boards-area{grid-template-columns:1fr 38px 1fr}.piece{font-size:clamp(27px,5vw,52px)}}@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-board{display:none}.rules-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.panel.span-2{grid-column:auto}.boards-area{grid-template-columns:1fr}.depth-connector{display:flex;justify-content:center;align-items:center;gap:8px}.depth-connector span{font-size:25px}.game-sidebar{grid-template-columns:1fr}.moves-panel{grid-column:auto}.topbar nav>a:not(.btn){display:none}}@media(max-width:560px){.topbar{padding:12px 14px}.brand span:last-child{display:none}.user-chip{display:none}.hero-wrap,.app-shell,.game-shell{padding-left:14px;padding-right:14px}.hero{min-height:auto;padding-top:28px}.hero h1{font-size:42px}.rules-grid{grid-template-columns:1fr}.welcome-row{align-items:flex-start;gap:18px}.status-card{display:none}.panel-head{align-items:flex-start;flex-direction:column}.search{max-width:none}.stats-row{grid-template-columns:1fr}.game-top{flex-wrap:wrap}.game-title{order:3;width:100%}.board-card{padding:8px}.piece{font-size:clamp(28px,11vw,48px)}footer{flex-direction:column}}
/* 2026 UI upgrade: reference green/cream board, clearer Staunton glyphs, replay + AI */
:root{--piece-white:#F7F4EA;--piece-black:#555351}.nav-select{border:1px solid var(--line);background:#0d1614;color:var(--text);border-radius:9px;padding:7px 9px}.wide-search{max-width:none;margin-bottom:12px}.compact-select{max-width:170px}.difficulty-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}.difficulty{border:1px solid var(--line);background:#0d1614;color:var(--text);border-radius:12px;padding:13px 8px;cursor:pointer;display:grid;gap:3px;place-items:center}.difficulty:first-letter{font-size:24px}.difficulty.active{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:rgba(104,224,179,.08)}.mode-pill{color:var(--brand)}.vs{color:#8ea39c}.game-top-actions{display:flex;gap:8px}.panel-head.mini{margin-bottom:8px}.replay-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.replay-controls .icon-btn{padding:7px 4px}.move-item{border:1px solid transparent;color:var(--text);width:100%;text-align:left;cursor:pointer}.move-item.active{border-color:var(--brand);background:rgba(104,224,179,.09)}
#board-underground .square.light{background:color-mix(in srgb,var(--sq1) 82%,#9389c8 18%)}#board-underground .square.dark{background:color-mix(in srgb,var(--sq2) 80%,#51466f 20%)}
.piece{font-family:"DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2",serif;font-weight:400;font-size:clamp(32px,4.8vw,64px);filter:drop-shadow(0 2px 1px rgba(0,0,0,.28));transform:translateY(-1px);-webkit-text-stroke:.7px rgba(20,20,20,.7)}.piece-w{color:var(--piece-white);text-shadow:0 1px 0 #222,1px 0 0 #222,0 -1px 0 #222,-1px 0 0 #222}.piece-b{color:var(--piece-black);-webkit-text-stroke:.45px rgba(245,245,245,.18);text-shadow:0 1px 0 rgba(255,255,255,.12)}.mini-piece{font-family:"DejaVu Sans","Segoe UI Symbol",serif;font-size:22px}.white-piece{color:var(--piece-white);text-shadow:0 1px #222,1px 0 #222}.black-piece{color:var(--piece-black);text-shadow:0 1px rgba(255,255,255,.15)}
.appearance-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:12px;align-items:end;margin:12px 0}.appearance-grid label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:700}.appearance-grid input[type=color]{width:100%;height:44px;padding:3px;border:1px solid var(--line);background:#0c1412;border-radius:9px}.theme-preview{display:flex;width:160px;height:80px;border-radius:10px;overflow:hidden;margin:8px 0 14px;border:1px solid var(--line)}.preview-sq{flex:1;display:grid;place-items:center}.light-preview{background:var(--sq1)}.dark-preview{background:var(--sq2)}.piece-demo{font:54px/1 "DejaVu Sans","Segoe UI Symbol",serif}.piece-demo.white{color:var(--piece-white);text-shadow:0 1px #222,1px 0 #222}.piece-demo.black{color:var(--piece-black)}
@media(max-width:850px){.appearance-grid{grid-template-columns:1fr 1fr}.difficulty-cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.appearance-grid{grid-template-columns:1fr 1fr}.replay-controls{grid-template-columns:repeat(5,1fr)}.piece{font-size:clamp(31px,12vw,52px)}}

/* Layout stability: move history must never push or vertically recenter the boards. */
.game-layout{align-items:start}
.boards-area{align-self:start;min-width:0;position:relative;top:0}
.game-sidebar{align-self:start;min-width:0;max-height:calc(100vh - 118px);overflow:hidden}
.moves-panel{display:flex;flex-direction:column;min-height:0}
.move-log{height:260px;max-height:260px;min-height:120px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:3px}
#gameMessage{max-height:92px;overflow:auto;margin:0}
@media(max-width:1100px){.game-sidebar{max-height:none;overflow:visible}.move-log{height:220px;max-height:220px}}
@media(max-width:850px){.move-log{height:200px;max-height:200px}}

/* High-contrast custom Staunton-style piece set. SVG masks inherit admin colors. */
.piece-icon,.mini-piece-icon,.piece-preview-icon{display:block;background:currentColor;filter:drop-shadow(0 2px 1px rgba(0,0,0,.26));-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.piece-icon{width:78%;height:78%}.mini-piece-icon{width:26px;height:26px;display:inline-block;vertical-align:middle}.piece-preview-icon{width:58px;height:58px}
.piece-icon.piece-w,.mini-piece-icon.piece-w,.piece-preview-icon.piece-w{color:var(--piece-white);filter:drop-shadow(0 0 1px #111) drop-shadow(0 2px 1px rgba(0,0,0,.28))}
.piece-icon.piece-b,.mini-piece-icon.piece-b,.piece-preview-icon.piece-b{color:var(--piece-black);filter:drop-shadow(0 0 1px rgba(255,255,255,.34)) drop-shadow(0 2px 1px rgba(0,0,0,.28))}
.type-p{-webkit-mask-image:url('pieces/p.svg');mask-image:url('pieces/p.svg')}.type-n{-webkit-mask-image:url('pieces/n.svg');mask-image:url('pieces/n.svg')}.type-b{-webkit-mask-image:url('pieces/b.svg');mask-image:url('pieces/b.svg')}.type-r{-webkit-mask-image:url('pieces/r.svg');mask-image:url('pieces/r.svg')}.type-q{-webkit-mask-image:url('pieces/q.svg');mask-image:url('pieces/q.svg')}.type-k{-webkit-mask-image:url('pieces/k.svg');mask-image:url('pieces/k.svg')}

/* Legal move hints: rendered from server-validated moves on one or both layers. */
.square.legal-target{cursor:pointer}
.move-hint-dot{position:absolute;z-index:4;width:25%;height:25%;border-radius:50%;background:rgba(15,45,35,.48);box-shadow:0 0 0 2px rgba(255,255,255,.28);pointer-events:none}
.square.legal-target:has(.piece-icon) .move-hint-dot,.square.legal-capture .move-hint-dot{width:78%;height:78%;background:transparent;border:5px solid rgba(185,54,54,.72);box-shadow:0 0 0 2px rgba(255,255,255,.15) inset}
/* v244: cross-layer legal hint encodes normal tunnel quota cost. */
.square.legal-cross-free{box-shadow:inset 0 0 0 4px rgba(83,211,255,.82)}
.square.legal-cross-free .move-hint-dot{background:rgba(51,183,229,.68);box-shadow:0 0 12px rgba(51,183,229,.72),0 0 0 2px rgba(255,255,255,.35)}
.square.legal-cross-free:has(.piece-icon) .move-hint-dot{background:transparent;border-color:rgba(51,183,229,.92)}
.square.legal-cross-paid{box-shadow:inset 0 0 0 4px rgba(255,166,64,.88)}
.square.legal-cross-paid .move-hint-dot{background:rgba(241,143,39,.72);box-shadow:0 0 12px rgba(241,143,39,.76),0 0 0 2px rgba(255,255,255,.32)}
.square.legal-cross-paid:has(.piece-icon) .move-hint-dot{background:transparent;border-color:rgba(255,166,64,.95)}
.square.legal-home-recharge{box-shadow:inset 0 0 0 4px rgba(166,92,255,.96)!important}
.square.legal-home-recharge .move-hint-dot{background:rgba(155,83,245,.78)!important;box-shadow:0 0 14px rgba(155,83,245,.92),0 0 0 2px rgba(255,255,255,.38)!important}
.square.legal-home-recharge:has(.piece-icon) .move-hint-dot{background:transparent!important;border-color:rgba(178,114,255,.98)!important}
.square.selected{z-index:5;outline:4px solid var(--gold);outline-offset:-4px}
@media(max-width:560px){.square.legal-target:has(.piece-icon) .move-hint-dot,.square.legal-capture .move-hint-dot{border-width:4px}}

/* Stable two-board stage: sidebar/history updates never reflow or recenter boards. */
@media(min-width:1101px){
  .game-layout{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
  .boards-area{align-items:start;contain:layout paint;min-height:0}
  .game-sidebar{position:sticky;top:82px;align-self:start;max-height:calc(100vh - 96px);overflow:hidden}
  .moves-panel{min-height:0;max-height:340px;overflow:hidden}
  .move-log{height:250px;min-height:250px;max-height:250px;contain:layout;scrollbar-gutter:stable both-edges}
}
.player,.invite,.game-row,.move-item,.square,.difficulty,.btn{transition:transform .14s ease,border-color .14s ease,background-color .14s ease,box-shadow .14s ease,opacity .14s ease}
.move-log{scroll-behavior:smooth}
.square.legal-target:hover{box-shadow:inset 0 0 0 4px rgba(255,255,255,.42)}

/* Time controls + smooth AJAX match setup */
.match-options{display:flex;gap:10px;align-items:end;flex-wrap:wrap;justify-content:flex-end}.time-field{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:800}.time-input{width:118px;max-width:118px}.ai-time{margin:2px 0 14px}.ai-time .time-input{max-width:none;width:100%}
.clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.chess-clock{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0b1210;border:1px solid var(--line);border-radius:11px;padding:10px 11px;transition:.18s}.chess-clock b{font-variant-numeric:tabular-nums;font-size:20px;letter-spacing:.02em}.chess-clock.active-clock{border-color:var(--brand);box-shadow:inset 0 0 0 1px rgba(104,224,179,.24),0 0 18px rgba(104,224,179,.08)}.chess-clock.low-time b{color:#ff9d9d}.chess-clock.low-time.active-clock{border-color:rgba(255,122,122,.58);animation:clockPulse 1s ease-in-out infinite alternate}@keyframes clockPulse{to{box-shadow:inset 0 0 0 1px rgba(255,122,122,.24),0 0 18px rgba(255,122,122,.18)}}
@media(max-width:700px){.match-options{width:100%;justify-content:stretch}.match-options>*{flex:1}.time-input{width:100%;max-width:none}.clock-grid{grid-template-columns:1fr 1fr}.chess-clock b{font-size:18px}}

/* Profile + AJAX admin editor */
.profile-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;align-items:stretch}.profile-side-column{display:flex;flex-direction:column;gap:18px;min-height:0;min-width:0}.profile-shell .form-stack{max-width:680px}.profile-brand-panel{display:flex;flex:1 1 0;min-height:136px;padding:0;overflow:hidden}.profile-brand-card{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;padding:18px 22px;background:radial-gradient(circle at 0 0,rgba(104,224,179,.14),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012))}.profile-brand-hero{display:flex;align-items:center;justify-content:center;gap:16px;min-width:0}.profile-brand-mark{flex:0 0 70px;display:grid;place-items:center;width:70px;height:70px;border-radius:21px;background:linear-gradient(145deg,var(--brand),#26765d);color:#082018;font-size:40px;box-shadow:0 14px 32px rgba(54,185,138,.14)}.profile-brand-copy{display:grid;gap:5px;min-width:0}.profile-brand-copy strong{font-size:clamp(21px,2vw,30px);line-height:1.1;letter-spacing:-.03em;overflow-wrap:break-word}.profile-brand-copy span{color:var(--muted);font-size:13px;line-height:1.45}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.edit-dialog{width:min(620px,calc(100vw - 28px));border:1px solid var(--line);border-radius:18px;background:#111b18;color:var(--text);padding:0;box-shadow:0 28px 90px rgba(0,0,0,.5)}.edit-dialog::backdrop{background:rgba(3,8,7,.72);backdrop-filter:blur(4px)}.edit-dialog form{padding:20px}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-head h2{margin:0}.avatar{background:var(--avatar-color,#5D7C68)}
@media(max-width:850px){.profile-grid{grid-template-columns:minmax(0,1fr)}.profile-brand-panel{flex:0 0 auto}}@media(max-width:560px){.profile-brand-card{padding:18px}.profile-brand-mark{flex-basis:58px;width:58px;height:58px;font-size:34px;border-radius:18px}.profile-brand-copy strong{font-size:clamp(21px,6vw,28px)}.form-two{grid-template-columns:1fr}.edit-dialog form{padding:15px}}

/* System modal: replaces native alert/confirm, animated and fully themeable. */
.ui-modal[hidden]{display:none}.ui-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s ease}.ui-modal.open{opacity:1;pointer-events:auto}.ui-modal-backdrop{position:absolute;inset:0;background:rgba(4,8,7,.74);backdrop-filter:blur(8px)}.ui-modal-card{position:relative;width:min(460px,100%);padding:26px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(180deg,#17231f,#0e1715);box-shadow:0 28px 90px rgba(0,0,0,.55);transform:translateY(16px) scale(.97);transition:transform .2s cubic-bezier(.2,.8,.2,1);text-align:center}.ui-modal.open .ui-modal-card{transform:none}.ui-modal-icon{margin:auto;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(104,224,179,.11);color:var(--brand);font-size:28px}.ui-modal-card h2{margin:13px 0 7px}.ui-modal-card p{margin:0;color:var(--muted);white-space:pre-line}.ui-modal-actions{display:flex;justify-content:center;gap:9px;margin-top:22px}.result-chip{display:inline-flex;margin-top:13px;padding:6px 10px;border-radius:999px;background:#0b1311;border:1px solid var(--line);color:#b8cbc5;font-size:12px}.danger-modal .ui-modal-icon{color:#ff9f9f;background:rgba(255,122,122,.1)}

/* In-game rules stay in document flow, so they never cover the boards/clocks/history. */
.game-rules-panel{margin:0 0 16px;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(23,35,32,.98),rgba(15,23,21,.98));box-shadow:var(--shadow);animation:rulesIn .2s ease}.game-rules-panel[hidden]{display:none}.rules-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.rules-panel-head h2{margin:0}.rules-panel-head .eyebrow{margin:0 0 3px}.game-rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.game-rules-grid article{padding:12px 13px;border-radius:12px;background:#0c1513;border:1px solid #20302b}.game-rules-grid h3{margin:0 0 5px;font-size:14px;color:#dff3eb}.game-rules-grid p{margin:0;color:var(--muted);font-size:12.5px}@keyframes rulesIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(max-width:900px){.game-rules-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.game-rules-grid{grid-template-columns:1fr}.game-top-actions{flex-wrap:wrap}}

/* Piece themes. Classic Outlined is deliberately high-contrast like a physical Staunton set. */
body[data-piece-theme="classic_outlined"] .piece-icon.piece-w,body[data-piece-theme="classic_outlined"] .mini-piece-icon.piece-w,body[data-piece-theme="classic_outlined"] .piece-preview-icon.piece-w{filter:drop-shadow(1.4px 0 0 #272625) drop-shadow(-1.4px 0 0 #272625) drop-shadow(0 1.4px 0 #272625) drop-shadow(0 -1.4px 0 #272625) drop-shadow(0 2px 1px rgba(0,0,0,.28))}
body[data-piece-theme="classic_outlined"] .piece-icon.piece-b,body[data-piece-theme="classic_outlined"] .mini-piece-icon.piece-b,body[data-piece-theme="classic_outlined"] .piece-preview-icon.piece-b{filter:drop-shadow(1px 0 0 #111) drop-shadow(-1px 0 0 #111) drop-shadow(0 1px 0 #111) drop-shadow(0 -1px 0 #111) drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 2px 1px rgba(0,0,0,.3))}
body[data-piece-theme="modern_flat"] .piece-icon.piece-w,body[data-piece-theme="modern_flat"] .mini-piece-icon.piece-w,body[data-piece-theme="modern_flat"] .piece-preview-icon.piece-w{filter:drop-shadow(1px 0 0 #333) drop-shadow(-1px 0 0 #333) drop-shadow(0 1px 0 #333) drop-shadow(0 -1px 0 #333) drop-shadow(0 2px 2px rgba(0,0,0,.22))}
body[data-piece-theme="modern_flat"] .piece-icon.piece-b,body[data-piece-theme="modern_flat"] .mini-piece-icon.piece-b,body[data-piece-theme="modern_flat"] .piece-preview-icon.piece-b{filter:drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 2px 2px rgba(0,0,0,.24))}
.player.is-busy{opacity:.66}.invite-btn:disabled{cursor:not-allowed;filter:saturate(.4);box-shadow:none;transform:none}
@media(min-width:901px){.hero-wrap .rules-grid{grid-template-columns:repeat(3,1fr)}}

/* Last opponent move: subtle origin/destination memory aid without competing with legal hints. */
.square.last-move-from::after,.square.last-move-to::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.square.last-move-from::after{background:rgba(237,198,77,.16);box-shadow:inset 0 0 0 3px rgba(237,198,77,.28)}
.square.last-move-to::after{background:rgba(237,198,77,.22);box-shadow:inset 0 0 0 3px rgba(237,198,77,.4)}
.piece-icon.last-moved-piece{filter:drop-shadow(0 0 4px rgba(255,224,122,.75)) drop-shadow(0 2px 1px rgba(0,0,0,.32))}
body[data-piece-theme="classic_outlined"] .piece-icon.piece-w.last-moved-piece{filter:drop-shadow(1.4px 0 0 #272625) drop-shadow(-1.4px 0 0 #272625) drop-shadow(0 1.4px 0 #272625) drop-shadow(0 -1.4px 0 #272625) drop-shadow(0 0 5px rgba(255,222,105,.82)) drop-shadow(0 2px 1px rgba(0,0,0,.28))}
body[data-piece-theme="classic_outlined"] .piece-icon.piece-b.last-moved-piece{filter:drop-shadow(1px 0 0 #111) drop-shadow(-1px 0 0 #111) drop-shadow(0 1px 0 #111) drop-shadow(0 -1px 0 #111) drop-shadow(0 0 5px rgba(255,222,105,.82)) drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.square.selected,.square.legal-target{z-index:5}.square.legal-target .move-hint-dot{z-index:7}

/* Captured material: compact, replay-aware and independent from board sizing. */
.captured-panel{min-height:0}.captured-pieces{display:grid;gap:9px;margin-top:10px}.captured-row{display:grid;grid-template-columns:minmax(68px,80px) minmax(0,1fr);gap:6px;align-items:center;padding:8px 9px;border:1px solid rgba(255,255,255,.055);background:#0c1513;border-radius:10px}.captured-label{font-size:12px;font-weight:800;color:#d9e8e3;line-height:1.1}.captured-label small{display:block;color:var(--muted);font-size:10px;font-weight:600;margin-top:2px}.captured-list{display:flex;align-items:center;justify-content:flex-start;align-content:flex-start;gap:4px;min-height:26px;flex-wrap:wrap}.captured-token{display:inline-flex;align-items:center;gap:1px;height:28px;padding:1px 4px;border-radius:7px;background:rgba(255,255,255,.035)}.captured-token .mini-piece-icon{width:23px;height:23px}.captured-token b{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:850px){.captured-row{grid-template-columns:minmax(64px,78px) 1fr}.captured-list{justify-content:flex-start}}
@media(max-width:520px){.captured-row{grid-template-columns:1fr}.captured-label{margin-bottom:2px}}


/* Unified scrollbars and controls: keep native chrome from clashing with the app theme. */
:root{scrollbar-color:#39554c #0b1311;scrollbar-width:thin}
html{scrollbar-color:#39554c #0b1311}
.move-log,.table-wrap,#gameMessage,.game-rules-panel{scrollbar-color:#42685c #0b1311;scrollbar-width:thin}
.move-log::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,#gameMessage::-webkit-scrollbar,.game-rules-panel::-webkit-scrollbar,body::-webkit-scrollbar{width:10px;height:10px}
.move-log::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,#gameMessage::-webkit-scrollbar-track,.game-rules-panel::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:#0b1311;border-radius:999px}
.move-log::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,#gameMessage::-webkit-scrollbar-thumb,.game-rules-panel::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3e6559,#29483f);border:2px solid #0b1311;border-radius:999px}
.move-log::-webkit-scrollbar-thumb:hover,.table-wrap::-webkit-scrollbar-thumb:hover,#gameMessage::-webkit-scrollbar-thumb:hover,.game-rules-panel::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#568273,#365c50)}
select.search,.nav-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8ea39c 50%),linear-gradient(135deg,#8ea39c 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
input,select,button,.btn,.icon-btn,.notice,.turn-banner,.badge{font-family:inherit}
.site-footer{justify-content:center;text-align:center;min-height:58px}
#gameMessage.notice.result{border-color:rgba(104,224,179,.28);background:linear-gradient(180deg,rgba(104,224,179,.07),rgba(104,224,179,.025));color:#d9f5e9}

/* v6 polish: last move is border-only so it never veils a piece or square. */
.square.last-move-from::after,.square.last-move-to::after{
  content:"";position:absolute;inset:2px;pointer-events:none;z-index:2;
  background:transparent!important;border-radius:4px;box-shadow:none!important;
}
.square.last-move-from::after{border:2px solid rgba(238,196,78,.52)}
.square.last-move-to::after{border:3px solid rgba(238,196,78,.82)}
.piece-icon.last-moved-piece{filter:inherit!important}
body[data-piece-theme="classic_outlined"] .piece-icon.piece-w.last-moved-piece,
body[data-piece-theme="classic_outlined"] .piece-icon.piece-b.last-moved-piece,
body[data-piece-theme="modern_flat"] .piece-icon.piece-w.last-moved-piece,
body[data-piece-theme="modern_flat"] .piece-icon.piece-b.last-moved-piece{filter:inherit!important}

/* Move history has a stable scroll viewport and a clearly themed scrollbar. */
.moves-panel{min-height:0;overflow:hidden}
.move-log{
  height:300px;max-height:300px;min-height:180px;overflow-y:scroll;overflow-x:hidden;
  scrollbar-gutter:stable;padding-right:5px;overscroll-behavior:contain;
}
.move-log::-webkit-scrollbar{width:11px}
.move-log::-webkit-scrollbar-track{background:#09110f;border:1px solid #1c2b27;border-radius:999px}
.move-log::-webkit-scrollbar-thumb{background:#355d50;border:2px solid #09110f;border-radius:999px;min-height:42px}
.move-log::-webkit-scrollbar-thumb:hover{background:#4d806f}

/* Rules live after the whole game layout so opening them never moves the boards. */
.game-bottom-tools{display:flex;justify-content:flex-end;align-items:center;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.055)}
.game-rules-panel{margin:12px 0 0}
@media(max-width:700px){.move-log{height:250px;max-height:250px}.game-bottom-tools{justify-content:stretch}.game-bottom-tools .btn{width:100%}}

/* v6.1 result + move-history polish */
.game-result-summary{
  margin-top:10px;padding:11px 12px;border-radius:12px;
  border:1px solid rgba(104,224,179,.26);
  background:linear-gradient(180deg,rgba(104,224,179,.08),rgba(104,224,179,.025));
  color:#e6fbf3;display:grid;gap:3px;
}
.game-result-summary[hidden]{display:none}
.game-result-summary .result-main{font-weight:900;font-size:14px;letter-spacing:.01em}
.game-result-summary .result-sub{font-size:12px;color:var(--muted)}
.game-result-summary.win-white .result-main{color:#f4f0df}
.game-result-summary.win-black .result-main{color:#d5ddd9}
.game-result-summary.draw .result-main{color:#b9d8cc}

/* Custom always-visible move-history rail: consistent even on browsers that hide native scrollbars. */
.move-log-shell{position:relative;min-height:0;padding-right:16px}
.move-log{
  height:300px;max-height:300px;min-height:180px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none!important;-ms-overflow-style:none;padding-right:2px;overscroll-behavior:contain;
}
.move-log::-webkit-scrollbar{width:0!important;height:0!important;display:none}
.move-scroll-rail{
  position:absolute;right:2px;top:0;bottom:0;width:9px;border-radius:999px;
  background:#09110f;border:1px solid #1c2b27;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.move-scroll-thumb{
  position:absolute;left:1px;right:1px;top:1px;min-height:38px;border-radius:999px;
  background:linear-gradient(180deg,#4a7668,#2f5449);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:grab;transition:background .15s ease;
}
.move-scroll-thumb:hover{background:linear-gradient(180deg,#5d8e7d,#3c695b)}
.move-scroll-thumb.dragging{cursor:grabbing;background:linear-gradient(180deg,#6a9e8c,#477666)}
.move-scroll-rail.is-idle{opacity:.5}
@media(max-width:700px){.move-log{height:250px;max-height:250px}.move-log-shell{padding-right:14px}}

/* v7 piece rendering: a real two-layer silhouette edge instead of subtle drop-shadows.
   The outer mask is slightly larger than the fill, so even white pieces keep a crisp,
   physical-piece style outline on light squares. */
.piece-icon,.mini-piece-icon,.piece-preview-icon{
  position:relative;background:none!important;filter:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  overflow:visible;isolation:isolate;
}
.type-p{--piece-mask:url('pieces/p.svg')}.type-n{--piece-mask:url('pieces/n.svg')}.type-b{--piece-mask:url('pieces/b.svg')}.type-r{--piece-mask:url('pieces/r.svg')}.type-q{--piece-mask:url('pieces/q.svg')}.type-k{--piece-mask:url('pieces/k.svg')}
.piece-icon::before,.piece-icon::after,
.mini-piece-icon::before,.mini-piece-icon::after,
.piece-preview-icon::before,.piece-preview-icon::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:var(--piece-mask);mask-image:var(--piece-mask);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
.piece-icon::before,.mini-piece-icon::before,.piece-preview-icon::before{
  z-index:0;background:var(--piece-outline,#252422);transform:scale(var(--piece-outline-scale,1.09));transform-origin:center;
}
.piece-icon::after,.mini-piece-icon::after,.piece-preview-icon::after{
  z-index:1;background:currentColor;filter:drop-shadow(0 2px 1px rgba(0,0,0,.22));
}
.piece-icon.piece-w,.mini-piece-icon.piece-w,.piece-preview-icon.piece-w{color:var(--piece-white);--piece-outline:#2a2927}
.piece-icon.piece-b,.mini-piece-icon.piece-b,.piece-preview-icon.piece-b{color:var(--piece-black);--piece-outline:#171716}
body[data-piece-theme="classic_outlined"] .piece-icon,
body[data-piece-theme="classic_outlined"] .mini-piece-icon,
body[data-piece-theme="classic_outlined"] .piece-preview-icon{--piece-outline-scale:1.105}
body[data-piece-theme="modern_flat"] .piece-icon,
body[data-piece-theme="modern_flat"] .mini-piece-icon,
body[data-piece-theme="modern_flat"] .piece-preview-icon{--piece-outline-scale:1.06}
body[data-piece-theme="modern_flat"] .piece-icon.piece-w,
body[data-piece-theme="modern_flat"] .mini-piece-icon.piece-w,
body[data-piece-theme="modern_flat"] .piece-preview-icon.piece-w{--piece-outline:#3b3a38}
body[data-piece-theme="modern_flat"] .piece-icon.piece-b,
body[data-piece-theme="modern_flat"] .mini-piece-icon.piece-b,
body[data-piece-theme="modern_flat"] .piece-preview-icon.piece-b{--piece-outline:#1e1d1c}

/* Busy/loading feedback without freezing the whole screen. */
.btn.is-loading{cursor:progress;opacity:.76;pointer-events:none}

/* v9 — reference-like Staunton pieces with real contour strokes. */
.piece-svg{width:78%;height:78%;display:block;overflow:visible;filter:drop-shadow(0 2px 1px rgba(0,0,0,.24));pointer-events:none}
.mini-piece-svg{width:26px;height:26px;display:inline-block;vertical-align:middle}.promotion-piece{width:64px;height:64px}
.piece-svg.piece-w{color:var(--piece-white)}.piece-svg.piece-b{color:var(--piece-black)}
.piece-svg .piece-body{fill:currentColor;stroke:#242321;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.piece-svg.piece-b .piece-body{stroke:#0f0f0f;stroke-width:3.1}
.piece-svg .detail{fill:none;stroke:#34322f;stroke-width:3.2}.piece-svg.piece-b .detail{stroke:#e2ddd2;stroke-width:2.2;opacity:.62}
.piece-svg .detail-fill{fill:#34322f;stroke:none}.piece-svg.piece-b .detail-fill{fill:#e2ddd2;opacity:.72}
body[data-piece-theme="modern_flat"] .piece-svg .piece-body{stroke-width:2.3}
body[data-piece-theme="modern_flat"] .piece-svg.piece-b .piece-body{stroke-width:2.1}
body[data-piece-theme="modern_flat"] .piece-svg .detail{stroke-width:2}
/* legacy mask spans remain for admin preview only; keep them readable. */
body[data-piece-theme="classic_outlined"] .piece-preview-icon{--piece-outline-scale:1.09}
body[data-piece-theme="modern_flat"] .piece-preview-icon{--piece-outline-scale:1.045}

/* Promotion chooser: custom UI, never browser prompt. */
.promotion-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .16s ease}.promotion-modal[hidden]{display:none}.promotion-modal.open{opacity:1}
.promotion-backdrop{position:absolute;inset:0;background:rgba(4,9,8,.72);backdrop-filter:blur(7px)}
.promotion-card{position:relative;width:min(520px,94vw);padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#17231f,#101816);box-shadow:0 24px 80px rgba(0,0,0,.5);transform:translateY(8px) scale(.985);transition:transform .16s ease}.promotion-modal.open .promotion-card{transform:none}.promotion-card h2{margin:0 0 16px}.promotion-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.promotion-choices button{min-width:0;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:#0c1513;color:var(--text);display:grid;place-items:center;gap:6px;cursor:pointer;transition:.15s ease}.promotion-choices button:hover,.promotion-choices button:focus-visible{border-color:var(--brand);background:#11241e;transform:translateY(-2px)}.promotion-choices button span{font-weight:800;font-size:12px}

.lobby-rules-card{display:flex;align-items:center;justify-content:space-between;gap:22px}.lobby-rules-card h2{margin:0 0 5px}.lobby-rules-card p{margin:0;color:var(--muted);max-width:780px}.rules-page .rules-grid-full{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.rules-page .rules-grid-full{grid-template-columns:repeat(2,1fr)}.lobby-rules-card{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.promotion-choices{grid-template-columns:repeat(2,1fr)}.rules-page .rules-grid-full{grid-template-columns:1fr}.promotion-piece{width:58px;height:58px}}

/* Smooth navigation feedback on regular browser navigation; keeps layout stable. */
main{animation:pageIn .16s ease both}@keyframes pageIn{from{opacity:.72;transform:translateY(2px)}to{opacity:1;transform:none}}

/* Cross-document navigation stays visually calm even though PHP renders each clean route. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:routeOut .12s ease both}
::view-transition-new(root){animation:routeIn .16s ease both}
@keyframes routeOut{to{opacity:.72}}
@keyframes routeIn{from{opacity:.72}to{opacity:1}}
/* SPA navigation: keep the document/head alive and soften only the view transition. */
html.spa-loading body { cursor: progress; }
html.spa-loading main { opacity: .72; transition: opacity .12s ease; }
body > main { animation: spaViewIn .16s ease both; }
@keyframes spaViewIn { from { opacity: .72; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* v12: guest authentication actions must remain visible on narrow mobile headers. */
.guest-login,.guest-register{white-space:nowrap}
@media(max-width:850px){
  .topbar nav{gap:9px}
  .topbar nav .guest-login,.topbar nav .guest-register{display:inline-flex}
}
@media(max-width:560px){
  .topbar nav{gap:6px}
  .guest-login,.guest-register{padding:7px 9px;font-size:12px}
}
@media(max-width:390px){
  .topbar{padding-left:10px;padding-right:10px}
  .brand-mark{width:31px;height:31px;font-size:20px}
  .guest-login,.guest-register{padding:7px 8px;font-size:11px}
}

.footer-terms-link{color:var(--brand);font-weight:800;text-decoration:none;white-space:nowrap}.footer-terms-link:hover{text-decoration:underline}.terms-shell{max-width:900px}.terms-panel{padding:clamp(22px,4vw,40px)}.terms-copy{line-height:1.8;color:#d9e4e0;font-size:15px}.terms-admin-label{display:grid;gap:9px;color:#cbdad5;font-weight:800}.terms-editor{width:100%;resize:vertical;min-height:300px;border:1px solid var(--line);background:#0c1412;color:var(--text);padding:15px;border-radius:12px;outline:none;font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.terms-editor:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(104,224,179,.08)}.admin-inline-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.saved-inline{color:var(--brand)}@media(max-width:560px){.site-footer{align-items:flex-start}.footer-terms-link{font-size:13px}}

/* v14 — Lobby match controls: keep mode select and minutes input visually balanced. */
.match-options{
  --match-control-height:46px;
}
.match-options #inviteMode,
.match-options #inviteMinutes{
  height:var(--match-control-height);
  min-height:var(--match-control-height);
  padding-top:0;
  padding-bottom:0;
  line-height:calc(var(--match-control-height) - 2px);
  border-radius:10px;
}
.match-options #inviteMode{
  display:block;
}
.match-options .time-field{
  align-self:flex-end;
}
.match-options .time-field #inviteMinutes{
  display:block;
}
@media(max-width:700px){
  .match-options{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
    gap:10px;
  }
  .match-options>*{min-width:0;width:100%;}
  .match-options #inviteMode,
  .match-options #inviteMinutes{
    width:100%;
    max-width:none;
    height:48px;
    min-height:48px;
    line-height:46px;
  }
}
@media(max-width:390px){
  .match-options{gap:8px;}
  .match-options #inviteMode,
  .match-options #inviteMinutes{
    height:46px;
    min-height:46px;
    line-height:44px;
    font-size:14px;
  }
}

/* v15 — iOS/Safari-safe lobby controls. Select and minutes are the same field component. */
.match-options{
  --match-control-height:50px;
  align-items:end;
}
.match-options .match-field{
  display:grid;
  grid-template-rows:20px var(--match-control-height);
  gap:7px;
  min-width:0;
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  line-height:20px;
}
.match-options .match-field>span{
  display:block;
  height:20px;
  line-height:20px;
  white-space:nowrap;
}
.match-options #inviteMode,
.match-options #inviteMinutes{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:var(--match-control-height)!important;
  min-height:var(--match-control-height)!important;
  max-height:var(--match-control-height)!important;
  margin:0!important;
  padding:0 16px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background-color:#0c1412;
  color:var(--text);
  font-size:16px!important;
  font-weight:600;
  line-height:normal!important;
  vertical-align:middle;
  -webkit-tap-highlight-color:transparent;
}
.match-options #inviteMode{
  -webkit-appearance:none!important;
  appearance:none!important;
  padding-right:42px!important;
  background-image:linear-gradient(45deg,transparent 50%,#8ea39c 50%),linear-gradient(135deg,#8ea39c 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.match-options #inviteMinutes{
  -webkit-appearance:textfield!important;
  appearance:textfield!important;
}
.match-options #inviteMinutes::-webkit-inner-spin-button,
.match-options #inviteMinutes::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
@media(max-width:700px){
  .match-options{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;
    width:100%;
  }
  .match-options .match-field{width:100%;min-width:0}
}
@media(max-width:390px){
  .match-options{--match-control-height:48px;gap:9px}
  .match-options .match-field{grid-template-rows:19px var(--match-control-height);gap:6px;font-size:11px;line-height:19px}
  .match-options .match-field>span{height:19px;line-height:19px}
  .match-options #inviteMode,.match-options #inviteMinutes{font-size:16px!important;padding-left:13px!important;padding-right:13px!important}
  .match-options #inviteMode{padding-right:36px!important;background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%}
}

/* v16 - Terms editor: fully themed, balanced and responsive. */
.terms-admin-panel{overflow:hidden}
.terms-admin-head{margin-bottom:16px}
.terms-admin-editor{width:100%;border:1px solid var(--line);border-radius:16px;background:#0b1311;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.terms-editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border-bottom:1px solid var(--line);background:#101a17}
.terms-editor-toolbar>div{display:flex;align-items:center;gap:10px;min-width:0}.terms-editor-toolbar strong{font-size:14px;color:#dce9e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.terms-public-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:rgba(104,224,179,.10);border:1px solid rgba(104,224,179,.22);color:var(--brand);font-size:10px;font-weight:900;letter-spacing:.12em}
.terms-preview-btn{flex:0 0 auto}
.terms-editor{display:block;width:100%;max-width:none!important;min-width:0;box-sizing:border-box;resize:vertical;min-height:360px;margin:0;border:0!important;border-radius:0!important;background:#0b1311!important;color:#dce9e4!important;padding:18px 20px!important;outline:none;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;box-shadow:none!important;caret-color:var(--brand);scrollbar-color:#315d50 #0b1311;scrollbar-width:thin}
.terms-editor:focus{background:#0d1714!important;box-shadow:inset 3px 0 0 var(--brand)!important}
.terms-editor::selection{background:rgba(104,224,179,.22)}
.terms-editor::-webkit-scrollbar{width:10px}.terms-editor::-webkit-scrollbar-track{background:#0b1311}.terms-editor::-webkit-scrollbar-thumb{background:#315d50;border:2px solid #0b1311;border-radius:999px}.terms-editor::-webkit-scrollbar-thumb:hover{background:#3d7462}
.terms-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border-top:1px solid var(--line);background:#101a17}.terms-editor-footer p{margin:0}.terms-editor-footer .admin-inline-actions{margin:0;justify-content:flex-end}.terms-editor-footer #termsSaveState{min-height:18px;text-align:right}
@media(max-width:680px){.terms-editor-toolbar,.terms-editor-footer{align-items:stretch;flex-direction:column}.terms-editor-toolbar>div{justify-content:space-between}.terms-preview-btn{width:100%;justify-content:center}.terms-editor{min-height:420px;padding:16px!important;font-size:13px}.terms-editor-footer .admin-inline-actions{width:100%;justify-content:space-between}.terms-editor-footer .btn{flex:0 0 auto}}

/* v17 - pixel-locked lobby controls + full-width Terms editor */
.match-options{
  --match-control-height:50px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  width:min(420px,100%)!important;
  align-items:end!important;
}
.match-options .match-field{
  display:grid!important;
  grid-template-rows:20px var(--match-control-height)!important;
  gap:7px!important;
  min-width:0!important;
  margin:0!important;
}
.match-options .match-field>span:first-child{
  display:block!important;
  height:20px!important;
  min-height:20px!important;
  line-height:20px!important;
  margin:0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:800!important;
}
.match-control-wrap{
  position:relative!important;
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
  height:var(--match-control-height)!important;
  min-height:var(--match-control-height)!important;
  max-height:var(--match-control-height)!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:#0c1412!important;
  box-sizing:border-box!important;
}
.match-control-wrap:focus-within{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(104,224,179,.07)!important}
.match-control-wrap #inviteMode,
.match-control-wrap #inviteMinutes{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  background:transparent!important;
  color:var(--text)!important;
  box-sizing:border-box!important;
  padding:0 15px!important;
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:600!important;
  line-height:1!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.match-control-wrap #inviteMode{
  padding-right:42px!important;
  background-image:linear-gradient(45deg,transparent 50%,#8ea39c 50%),linear-gradient(135deg,#8ea39c 50%,transparent 50%)!important;
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%!important;
  background-size:6px 6px,6px 6px!important;
  background-repeat:no-repeat!important;
}
.match-control-wrap #inviteMinutes{-moz-appearance:textfield!important}
.match-control-wrap #inviteMinutes::-webkit-inner-spin-button,
.match-control-wrap #inviteMinutes::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}

.terms-admin-panel{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  grid-column:1 / -1!important;
}
.terms-admin-head{
  display:flex!important;
  width:100%!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
}
.terms-admin-head>div{min-width:0!important;max-width:820px!important}
.terms-admin-editor{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:#0b1311!important;
  overflow:hidden!important;
}
.terms-editor-toolbar,.terms-public-badge{display:none!important}
.terms-editor{
  display:block!important;
  inline-size:100%!important;
  width:100%!important;
  max-width:100%!important;
  min-width:100%!important;
  min-height:430px!important;
  margin:0!important;
  padding:20px 22px!important;
  border:0!important;
  border-radius:0!important;
  background:#0b1311!important;
  color:#dce9e4!important;
  box-sizing:border-box!important;
  resize:vertical!important;
}
.terms-editor-footer{width:100%!important;box-sizing:border-box!important}
@media(max-width:700px){
  .match-options{width:100%!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important}
  .terms-admin-head{flex-direction:column!important;align-items:stretch!important}
  .terms-preview-btn{width:100%!important}
  .terms-editor{min-height:460px!important;padding:16px!important}
}
@media(max-width:390px){
  .match-options{--match-control-height:48px!important;gap:8px!important}
  .match-options .match-field{grid-template-rows:20px var(--match-control-height)!important;gap:6px!important}
}


/* v18 - Terms editor hard full-width override + cache-busted assets */
#termsContent.terms-editor,
.terms-admin-panel .terms-admin-editor > #termsContent,
.terms-admin-panel textarea#termsContent{
  display:block!important;
  position:relative!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  inline-size:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:440px!important;
  height:auto!important;
  margin:0!important;
  padding:20px 22px!important;
  border:0!important;
  border-radius:0!important;
  background:#0b1311!important;
  color:#dce9e4!important;
  box-sizing:border-box!important;
  resize:vertical!important;
  overflow:auto!important;
  font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
}
.terms-admin-panel .terms-admin-editor{
  width:100%!important;
  inline-size:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
}
.terms-admin-panel .terms-editor-footer{
  width:100%!important;
  grid-column:1/-1!important;
}
@media(max-width:700px){
  #termsContent.terms-editor{min-height:480px!important;padding:16px!important}
}


/* v19 — hard component styling for Lobby match controls.
   Uses dedicated classes so generic select/input rules can never collapse them. */
.match-options{
  --lobby-control-h:52px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  width:min(460px,100%)!important;
  align-items:end!important;
}
.lobby-match-field{
  display:grid!important;
  grid-template-rows:22px var(--lobby-control-h)!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.lobby-match-field>span:first-child{
  display:flex!important;
  align-items:center!important;
  height:22px!important;
  margin:0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:22px!important;
  white-space:nowrap!important;
}
.lobby-match-control{
  display:block!important;
  width:100%!important;
  height:var(--lobby-control-h)!important;
  min-height:var(--lobby-control-h)!important;
  max-height:var(--lobby-control-h)!important;
  padding:0!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:#0c1412!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.lobby-match-control:focus-within{
  border-color:var(--brand)!important;
  box-shadow:0 0 0 3px rgba(104,224,179,.08)!important;
}
.lobby-match-input{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#0c1412!important;
  color:var(--text)!important;
  font:600 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif!important;
  box-sizing:border-box!important;
  vertical-align:middle!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.lobby-match-select{
  padding-right:44px!important;
  background-color:#0c1412!important;
  background-image:linear-gradient(45deg,transparent 50%,#8ea39c 50%),linear-gradient(135deg,#8ea39c 50%,transparent 50%)!important;
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%!important;
  background-size:6px 6px,6px 6px!important;
  background-repeat:no-repeat!important;
}
.lobby-match-number{-moz-appearance:textfield!important;background:#0c1412!important;}
.lobby-match-number::-webkit-inner-spin-button,.lobby-match-number::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important;}
@media(max-width:700px){
  .match-options{width:100%!important;gap:10px!important;}
}
@media(max-width:390px){
  .match-options{--lobby-control-h:50px!important;gap:8px!important;}
  .lobby-match-field{grid-template-rows:21px var(--lobby-control-h)!important;gap:6px!important;}
  .lobby-match-field>span:first-child{height:21px!important;line-height:21px!important;font-size:11px!important;}
  .lobby-match-input{font-size:16px!important;padding-left:13px!important;padding-right:13px!important;}
  .lobby-match-select{padding-right:38px!important;background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%!important;}
}

/* v20 — breathing room between the hero actions and the rule cards. */
.hero-wrap > .rules-grid{
  margin-top:32px;
}
@media(max-width:850px){
  .hero-wrap > .rules-grid{
    margin-top:44px;
  }
}
@media(max-width:560px){
  .hero-wrap > .rules-grid{
    margin-top:52px;
  }
}

/* v21 — footer stays on one row on mobile. */
.site-footer{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  width:100%!important;
  text-align:left!important;
}
.site-footer>span,
.site-footer>.footer-terms-link{
  min-width:0;
  white-space:nowrap!important;
}
.site-footer>.footer-terms-link{
  margin-left:auto!important;
  text-align:right!important;
}
@media(max-width:560px){
  .site-footer{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    padding:18px 16px!important;
    min-height:58px!important;
  }
  .site-footer>span{font-size:12px!important;overflow:hidden;text-overflow:ellipsis;}
  .site-footer>.footer-terms-link{font-size:12px!important;flex:0 0 auto;}
}
@media(max-width:360px){
  .site-footer{gap:8px!important;padding-left:12px!important;padding-right:12px!important;}
  .site-footer>span,.site-footer>.footer-terms-link{font-size:11px!important;}
}

/* v22 — unified native-control cleanup and fully themed custom dropdowns. */
input[type="number"]{
  -moz-appearance:textfield!important;
  appearance:textfield!important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none!important;
  appearance:none!important;
  margin:0!important;
  display:none!important;
}
.native-select-enhanced{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.custom-select-shell{
  position:relative;
  width:100%;
  min-width:0;
  font:inherit;
  color:var(--text);
  z-index:8;
}
.custom-select-trigger{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#0c1412;
  color:var(--text);
  font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-align:left;
  cursor:pointer;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.custom-select-trigger:hover{background:#101b18;border-color:#345047}
.custom-select-trigger:focus-visible,.custom-select-shell.open .custom-select-trigger{border-color:var(--brand);box-shadow:0 0 0 3px rgba(104,224,179,.10)}
.custom-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-select-chevron{width:9px;height:9px;flex:0 0 9px;border-right:2px solid #8ea39c;border-bottom:2px solid #8ea39c;transform:rotate(45deg) translateY(-2px);transition:transform .16s ease}
.custom-select-shell.open .custom-select-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.custom-select-menu{
  position:fixed;
  left:0;
  right:auto;
  top:calc(100% + 7px);
  margin:0;
  bottom:auto;
  z-index:1000;
  box-sizing:border-box;
  max-height:260px;
  overflow:auto;
  padding:6px;
  border:1px solid #2b4039;
  border-radius:12px;
  background:#0e1715;
  box-shadow:0 18px 42px rgba(0,0,0,.46);
  scrollbar-width:thin;
  scrollbar-color:#43685c #0b1210;
}
.custom-select-menu::-webkit-scrollbar{width:8px}
.custom-select-menu::-webkit-scrollbar-track{background:#0b1210;border-radius:999px}
.custom-select-menu::-webkit-scrollbar-thumb{background:#43685c;border-radius:999px;border:2px solid #0b1210}
.custom-select-option{
  width:100%;
  display:flex;
  align-items:center;
  min-height:40px;
  padding:9px 11px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#d9e8e3;
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-align:left;
  cursor:pointer;
}
.custom-select-option:hover,.custom-select-option:focus-visible{background:#182823;color:#fff;outline:none}
.custom-select-option.selected{background:rgba(104,224,179,.12);color:var(--brand)}
.custom-select-option.selected::after{content:'✓';margin-left:auto;font-weight:900}
.custom-select-option:disabled{opacity:.4;cursor:not-allowed}
.custom-select-shell.is-disabled{opacity:.55}
.custom-select-nav{width:auto;min-width:82px}
.custom-select-nav .custom-select-trigger{min-height:38px;padding:0 12px;border-radius:10px;font-size:13px}
.custom-select-nav .custom-select-menu{min-width:118px;right:auto;left:0}
.custom-select-lobby{height:100%}
.custom-select-lobby .custom-select-trigger{height:100%;min-height:100%;border:0;border-radius:13px;background:#0c1412;padding:0 16px;font-size:16px;box-shadow:none!important}
.custom-select-lobby .custom-select-trigger:hover{background:#101b18}
.custom-select-lobby .custom-select-menu{top:calc(100% + 8px)}
/* The wrapper may contain the custom popup, so it must not clip it. */
.lobby-match-control{overflow:visible!important}
/* Any remaining browser-native option styling is a fallback only. */
select,select option{background:#0c1412;color:var(--text)}
@media(max-width:560px){
  .custom-select-trigger{font-size:16px;min-height:48px}
  .custom-select-option{min-height:44px;font-size:15px}
  .custom-select-nav .custom-select-trigger{min-height:40px;font-size:14px}
  .custom-select-menu{max-height:min(320px,55vh)}
}

/* v23 — Vietnamese typography + consistent screen/menu title styling */
html,body,button,input,select,textarea,.btn,.icon-btn,.notice,.turn-banner,.badge{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans","Helvetica Neue",Arial,sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html[lang="vi"] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Arial,sans-serif}
/* Do not force ASCII/PHP uppercase on Vietnamese labels; keep authored Title Case. */
.eyebrow{
  text-transform:none!important;
  letter-spacing:.10em;
  line-height:1.35;
  font-weight:800;
}
html[lang="vi"] .eyebrow{letter-spacing:.065em}
.depth-connector small{letter-spacing:.08em;text-transform:none}
html[lang="vi"] .depth-connector small{letter-spacing:.04em}
/* Screen/menu headings are authored in Title Case; CSS must not override casing. */
.topbar nav a,.panel-head h2,.welcome-row h1,.rules-panel-head h2,.game-title,.auth-card h1,.terms-panel h1{
  text-transform:none;
}

/* v24 — green screen-eyebrow hierarchy
   Screen/section eyebrow labels use uppercase presentation consistently.
   CSS text-transform preserves the source translation and lets the browser
   handle Vietnamese Unicode casing correctly. */
.eyebrow {
  text-transform: none;
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .115em;
  color: var(--brand);
}
html[lang="vi"] .eyebrow {
  letter-spacing: .09em;
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.welcome-row .eyebrow,
.lobby-rules-card .eyebrow,
.rules-panel-head .eyebrow {
  font-size: 14px;
}
@media (max-width: 640px) {
  .eyebrow,
  .welcome-row .eyebrow,
  .lobby-rules-card .eyebrow,
  .rules-panel-head .eyebrow {
    font-size: 13px;
    line-height: 1.25;
  }
  html[lang="vi"] .eyebrow { letter-spacing: .075em; }
}


/* v25 — eyebrow casing is rendered server-side for deterministic SPA/mobile behavior. */
.eyebrow{
  text-transform:none!important;
  font-size:13.5px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.115em!important;
}
html[lang="vi"] .eyebrow{letter-spacing:.09em!important}
.welcome-row .eyebrow,.lobby-rules-card .eyebrow,.rules-panel-head .eyebrow{font-size:14px!important}
@media(max-width:640px){
  .eyebrow,.welcome-row .eyebrow,.lobby-rules-card .eyebrow,.rules-panel-head .eyebrow{font-size:13px!important;line-height:1.25!important}
  html[lang="vi"] .eyebrow{letter-spacing:.075em!important}
}


/* v26 — mobile two-board stage: prioritize both boards over decorative chrome. */
@media (max-width: 700px) {
  .game-shell{
    padding-left:6px;
    padding-right:6px;
  }
  .game-layout{gap:12px}
  .boards-area{
    --mobile-board-size:min(
      calc(100vw - 24px),
      calc((var(--game-mobile-vh, 100svh) - 104px) / 2)
    );
    display:flex!important;
    flex-direction:column;
    align-items:center;
    gap:2px!important;
    width:100%;
    contain:layout paint;
    scroll-margin-block:8px;
  }
  .boards-area .board-card{
    width:min(100%, calc(var(--mobile-board-size) + 10px));
    max-width:100%;
    padding:4px;
    border-radius:11px;
    box-shadow:0 8px 24px rgba(0,0,0,.20);
  }
  .boards-area .chess-board{
    width:var(--mobile-board-size);
    max-width:100%;
    margin-inline:auto;
    border-radius:5px;
  }
  .surface-card .board-label{
    margin:0 2px 4px;
    min-height:26px;
  }
  .underground-card .board-label{
    margin:4px 2px 0;
    min-height:26px;
  }
  .board-label{gap:7px;font-size:13px}
  .board-label small{display:none!important}
  .layer-dot{width:9px;height:9px;box-shadow:0 0 8px currentColor}
  .depth-connector{display:none!important}
  .underground-card{margin-top:0}
  .square .coord{font-size:8px}
  .game-top{margin-bottom:8px}
}

/* Short phones: shrink the boards further so both layers remain visible together. */
@media (max-width:700px) and (max-height:760px){
  .boards-area{
    --mobile-board-size:min(
      calc(100vw - 28px),
      calc((var(--game-mobile-vh, 100svh) - 84px) / 2)
    );
  }
  .surface-card .board-label,.underground-card .board-label{min-height:22px;font-size:12px}
  .game-top{margin-bottom:5px}
}

@media (max-width:700px) and (max-height:640px){
  .boards-area{
    --mobile-board-size:min(
      calc(100vw - 34px),
      calc((var(--game-mobile-vh, 100svh) - 66px) / 2)
    );
  }
  .surface-card .board-label,.underground-card .board-label{min-height:20px;margin-block:2px}
}

/* v27 — stable mobile board viewport + scroll-aware navigation. */
.topbar{
  transition:transform .22s cubic-bezier(.2,.75,.25,1),box-shadow .22s ease;
  will-change:transform;
}
@media (max-width:700px){
  .topbar.is-scroll-hidden{
    transform:translate3d(0,calc(-100% - 2px),0);
    pointer-events:none;
    box-shadow:none;
  }
  /* Never use JS-fed innerHeight here. Safari changes innerHeight as its address bar
     opens/closes while scrolling. svh is deliberately stable for the whole scroll. */
  .boards-area{
    --mobile-stable-vh:100vh;
    --mobile-board-size:min(
      calc(100vw - 20px),
      calc((var(--mobile-stable-vh) - 72px) / 2)
    )!important;
  }
  @supports (height:100svh){
    .boards-area{--mobile-stable-vh:100svh}
  }
  .boards-area .board-card{padding:3px!important}
  .surface-card .board-label{min-height:22px!important;margin:0 2px 2px!important}
  .underground-card .board-label{min-height:22px!important;margin:2px 2px 0!important}
  .board-label{font-size:12px!important;line-height:1.05}
  .game-top{margin-bottom:5px!important}
}
@media (max-width:700px) and (max-height:760px){
  .boards-area{
    --mobile-board-size:min(
      calc(100vw - 24px),
      calc((var(--mobile-stable-vh) - 58px) / 2)
    )!important;
  }
  .surface-card .board-label,.underground-card .board-label{min-height:19px!important;font-size:11px!important}
}
@media (max-width:700px) and (max-height:640px){
  .boards-area{
    --mobile-board-size:min(
      calc(100vw - 28px),
      calc((var(--mobile-stable-vh) - 48px) / 2)
    )!important;
  }
  .surface-card .board-label,.underground-card .board-label{min-height:17px!important;margin-block:1px!important}
}

/* v28 — desktop layer alignment.
   Desktop/tablet landscape keeps both layer labels above their boards so the
   two 8×8 grids share the same vertical baseline. Mobile retains the compact
   v26/v27 layout with the Underground label below the lower board. */
@media (min-width:701px){
  .boards-area{
    align-items:center;
  }
  .board-card{
    display:flex;
    flex-direction:column;
  }
  .surface-card .board-label,
  .underground-card .board-label{
    order:-1;
    margin:0 0 10px;
    min-height:42px;
  }
  .surface-card .chess-board,
  .underground-card .chess-board{
    order:0;
  }
  .depth-connector{
    align-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:0;
    transform:none;
  }
  .depth-connector span{line-height:1}
  .depth-connector small{margin-top:6px}
}

/* v32 — admin-only diagnostics. The trigger is intentionally desktop-only;
   logging itself remains active on every viewport. */
.diagnostics-trigger{display:inline-flex;align-items:center;justify-content:center;min-height:36px;flex:0 0 auto;white-space:nowrap;border:1px solid rgba(104,224,179,.32);background:rgba(104,224,179,.08);color:#c8f5e4;border-radius:9px;padding:8px 11px;font:800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;cursor:pointer}
.diagnostics-trigger:hover,.diagnostics-trigger:focus-visible{background:rgba(104,224,179,.15);border-color:var(--brand);outline:2px solid transparent}
.diagnostics-dialog{width:min(920px,calc(100vw - 40px));max-height:min(760px,calc(100vh - 48px));padding:0;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:linear-gradient(180deg,#17231f,#0d1513);color:var(--text);box-shadow:0 28px 100px rgba(0,0,0,.65);overflow:hidden}
.diagnostics-dialog::backdrop{background:rgba(3,8,7,.72);backdrop-filter:blur(6px)}
.diagnostics-dialog[open]{display:grid;grid-template-rows:auto auto auto minmax(220px,1fr) auto;gap:0}
.diagnostics-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 10px}
.diagnostics-head .eyebrow{margin:0 0 3px}.diagnostics-head h2{margin:0;font-size:25px}.diagnostics-close{width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;flex:0 0 40px;aspect-ratio:1;padding:0;line-height:1;font-size:22px}.diagnostics-close{display:inline-grid;place-items:center;padding:0;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.035);color:#cfe0da;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.diagnostics-close:hover{background:rgba(104,224,179,.13);border-color:rgba(104,224,179,.56);color:#eafff7;transform:rotate(6deg) scale(1.06);box-shadow:0 0 0 3px rgba(104,224,179,.08)}.diagnostics-close:focus-visible{outline:2px solid var(--brand);outline-offset:3px;background:rgba(104,224,179,.12);border-color:var(--brand)}.diagnostics-close:active{transform:rotate(0) scale(.92);background:rgba(104,224,179,.2)}.diagnostics-dialog{transition:opacity .15s ease,transform .15s ease}.diagnostics-dialog[open]{opacity:1;transform:translateY(0) scale(1)}.diagnostics-dialog.is-closing{opacity:0;transform:translateY(8px) scale(.985);pointer-events:none}.diagnostics-dialog.is-closing::backdrop{opacity:0}.diagnostics-dialog::backdrop{transition:opacity .15s ease}
.diagnostics-help{margin:0;padding:0 24px 12px;color:var(--muted);max-width:78ch}
.diagnostics-meta{min-height:28px;padding:6px 24px 10px;color:#b8d4ca;font-size:12px}
.diagnostics-output{margin:0 24px;padding:16px;min-height:260px;max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#08100e;color:#d5e8e1;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2}
.diagnostics-output:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.diagnostics-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 22px}
@media (prefers-reduced-motion:reduce){.diagnostics-dialog,.diagnostics-trigger{transition:none!important}}

/* v34: action-state clarity. Buttons that have no effect must look inactive. */
.game-top-actions .btn:disabled,
.game-top-actions .btn[aria-disabled="true"]{
  opacity:.42;
  filter:saturate(.35);
  cursor:not-allowed;
  pointer-events:none;
  transform:none!important;
  box-shadow:none!important;
  border-color:rgba(148,170,163,.2);
  color:rgba(238,247,243,.52);
  background:rgba(255,255,255,.025);
}
.game-top-actions .btn:not(:disabled){opacity:1}

/* v36 — Admin All Games / live spectating */
.admin-games-panel{min-width:0}
.admin-games-head{align-items:flex-start}
.admin-game-filters{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(210px,1.5fr) minmax(120px,.8fr) minmax(125px,.8fr) minmax(125px,.8fr) auto;gap:12px;align-items:end;margin:14px 0 18px;padding:14px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(255,255,255,.025)}
.admin-game-filters label{display:grid;gap:7px;min-width:0}
.admin-game-filters label>span{font-size:.78rem;font-weight:750;color:var(--muted);letter-spacing:.02em}
.admin-game-filters .search{width:100%;min-width:0;height:44px}
.admin-game-row{min-width:0}
.admin-game-row>div{min-width:0}
.admin-game-row small{display:block;margin-top:5px;line-height:1.5;overflow-wrap:anywhere}
.live-watch-btn{white-space:nowrap;box-shadow:0 0 0 1px rgba(104,224,179,.16),0 8px 24px rgba(42,160,120,.08)}
@media(max-width:1000px){.admin-game-filters{grid-template-columns:1fr 1fr}.admin-game-filters #adminGameReset{width:100%}}
@media(max-width:620px){.admin-game-filters{grid-template-columns:1fr 1fr;gap:10px;padding:11px}.admin-game-filters label:first-child,.admin-game-filters label:nth-child(2){grid-column:1/-1}.admin-game-filters #adminGameReset{grid-column:1/-1}.admin-game-row{align-items:flex-start;gap:10px}.admin-game-row .btn{flex:0 0 auto}}
.admin-game-filters input[type="date"]{color-scheme:dark;appearance:none;-webkit-appearance:none}
.admin-game-filters input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.82) sepia(.15) saturate(.7);opacity:.78;cursor:pointer}

/* v37 — balanced AI setup controls */
.ai-options-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end;margin-top:12px}
.ai-options-grid .time-field{margin:0;min-width:0}
.ai-options-grid select,.ai-options-grid input{width:100%}
@media(max-width:560px){.ai-options-grid{grid-template-columns:1fr 1fr;gap:8px}.ai-options-grid .time-field span{font-size:12px}}

/* v43 — desktop rules layout: keep the first 8 rules as a balanced 4×2 grid,
   then let the longer Draw Rules card occupy the complete final row. */
@media (min-width:851px){
  .rules-grid-full > article:last-child{
    grid-column:1 / -1;
  }
}

/* v44 — lobby game-history pagination + balanced in-game rules. */
.games-pagination,.players-pagination,.data-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.065);
}
.games-pagination[hidden],.players-pagination[hidden],.data-pagination[hidden]{display:none}
.games-page-info,.players-page-info,.data-pagination>span{color:var(--muted);font-size:13px;text-align:center;min-width:150px}
.games-page-info b,.players-page-info b,.data-pagination>span b{color:var(--text);font-size:14px}
.games-page-info small,.players-page-info small,.data-pagination>span small{color:#789188}
.games-pagination .btn:disabled,.players-pagination .btn:disabled,.data-pagination .btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
@media(max-width:560px){
  .games-pagination,.players-pagination,.data-pagination{gap:8px;justify-content:space-between}
  .games-page-info,.players-page-info,.data-pagination>span{min-width:0;flex:1;font-size:12px}
  .games-page-info small,.players-page-info small,.data-pagination>span small{display:none}
  .games-pagination .btn,.players-pagination .btn,.data-pagination .btn{padding-inline:10px}
}

/* The in-game rules panel has six compact rules plus the longer Draw Rules card.
   Keep the compact cards balanced and let Draw Rules own the final row. */
@media(min-width:561px){
  .game-rules-grid > article:last-child{grid-column:1 / -1}
}

/* v45 balanced rule cards: keep long rules on the final row without empty holes. */
@media (min-width:901px){
  .rules-grid.rules-balanced-8{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .rules-grid.rules-balanced-8>article{grid-column:span 2!important}
  .rules-grid.rules-balanced-8>article:nth-last-child(-n+2){grid-column:span 3!important}
  .rules-page .rules-grid-full.rules-balanced-10{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .rules-page .rules-grid-full.rules-balanced-10>article{grid-column:span 1!important}
  .rules-page .rules-grid-full.rules-balanced-10>article:nth-last-child(-n+2){grid-column:span 2!important}
  .game-rules-grid.rules-balanced-8{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .game-rules-grid.rules-balanced-8>article{grid-column:span 2!important}
  .game-rules-grid.rules-balanced-8>article:nth-last-child(-n+2){grid-column:span 3!important}
}
@media (min-width:561px) and (max-width:900px){
  .rules-grid.rules-balanced-8,
  .rules-page .rules-grid-full.rules-balanced-10,
  .game-rules-grid.rules-balanced-8{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rules-grid.rules-balanced-8>article,
  .rules-page .rules-grid-full.rules-balanced-10>article,
  .game-rules-grid.rules-balanced-8>article{grid-column:auto!important}
}
@media (max-width:560px){
  .rules-grid.rules-balanced-8,
  .rules-page .rules-grid-full.rules-balanced-10,
  .game-rules-grid.rules-balanced-8{grid-template-columns:1fr!important}
  .rules-grid.rules-balanced-8>article,
  .rules-page .rules-grid-full.rules-balanced-10>article,
  .game-rules-grid.rules-balanced-8>article{grid-column:auto!important}
}

/* v46 — Elo / ranked matchmaking */
.rating-panel{min-width:0}.rating-card{display:grid;gap:16px}.rating-main{display:flex;align-items:center;justify-content:space-between;gap:16px}.rating-number{font-size:clamp(34px,4vw,52px);font-weight:900;line-height:1;color:var(--text,#eef7f3)}.rating-unit{font-weight:700;color:var(--muted,#9bb0a8)}.rank-badge,.rank-mini{display:inline-flex;align-items:center;border:1px solid var(--line,#294139);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;background:#0d1815}.rank-mini{padding:2px 7px;font-size:11px}.rank-bronze{color:#d3946a}.rank-silver{color:#cbd5d1}.rank-gold{color:#f1c75b}.rank-platinum{color:#75dec8}.rank-diamond{color:#7bc7ff}.rank-master{color:#c99cff}.rank-grandmaster{color:#ff8d8d}.rating-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rating-stats span{padding:10px;border:1px solid var(--line,#294139);border-radius:12px;color:var(--muted,#9bb0a8);text-align:center}.rating-stats b{color:var(--text,#eef7f3)}.ai-cap{display:grid;grid-template-columns:1fr auto;gap:7px;color:var(--muted,#9bb0a8);font-size:13px}.ai-cap>div{grid-column:1/-1;height:6px;border-radius:99px;background:#0a1412;overflow:hidden}.ai-cap i{display:block;height:100%;background:var(--accent,#61ddb0);border-radius:inherit}.rated-matchmaking{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0;padding:12px 14px;border:1px solid var(--line,#294139);border-radius:14px;background:rgba(97,221,176,.035)}.rated-matchmaking div{display:grid;gap:3px}.rated-matchmaking small,.matchmaking-status{color:var(--muted,#9bb0a8)}.matchmaking-status{margin:-4px 0 12px;padding:10px 12px;border-radius:12px;background:#0c1714}.pulse-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent,#61ddb0);box-shadow:0 0 0 0 rgba(97,221,176,.5);animation:eloPulse 1.4s infinite}@keyframes eloPulse{70%{box-shadow:0 0 0 7px rgba(97,221,176,0)}100%{box-shadow:0 0 0 0 rgba(97,221,176,0)}}.player-elo,.elo-inline,.game-elo{font-size:12px;color:var(--muted,#9bb0a8);font-weight:700;margin-left:5px}.elo-up{color:#6ee7b7}.elo-down{color:#ff8b8b}.elo-flat{color:var(--muted,#9bb0a8)}.rated-pill,.unrated-pill,.ai-bonus{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.02em}.rated-pill{background:rgba(97,221,176,.12);color:#72e7bb;border:1px solid rgba(97,221,176,.28)}.unrated-pill{background:rgba(157,176,168,.08);color:#a8bbb4;border:1px solid rgba(157,176,168,.18)}.ai-bonus{color:#f5cd69;background:rgba(245,205,105,.08);border:1px solid rgba(245,205,105,.22)}.rank-mismatch{opacity:.72}.game-rating-mode{display:flex;justify-content:flex-end;margin-bottom:5px}.result-ratings{display:grid;gap:5px;margin-top:8px;font-size:12px;color:var(--muted,#9bb0a8)}.result-ratings span{display:flex;justify-content:space-between;gap:10px}.result-ratings b{color:var(--text,#eef7f3)}
@media(max-width:700px){.rated-matchmaking{align-items:flex-start}.rated-matchmaking .btn{white-space:nowrap}.rating-number{font-size:38px}.rating-main{align-items:flex-end}.player-elo{display:inline-block}.game-elo{display:block;margin-left:28px;margin-top:-2px}}

/* v48 visual depth cue — opposite-layer piece imprint.
   If this layer's square is empty, the opposite piece is shown centered like a translucent
   piece standing on the square. If both layers are occupied at the same coordinate, the
   imprint shrinks into the upper-left corner so the real piece stays fully readable. */
.square{isolation:isolate}
.opposite-piece-stamp{
  position:absolute;z-index:1;display:grid;place-items:center;pointer-events:none;
  border-radius:50%;opacity:.72;transform:translateZ(0);transition:opacity .15s ease,transform .15s ease;
}
.opposite-piece-stamp.stamp-center{
  left:50%;top:50%;width:72%;height:72%;transform:translate(-50%,-50%);
  opacity:.46;
}
.opposite-piece-stamp.stamp-corner{
  left:4%;top:4%;width:30%;height:30%;opacity:.82;
}
.opposite-piece-stamp::before{
  content:"";position:absolute;inset:-4%;border-radius:50%;
  background:rgba(7,14,13,.16);box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 0 0 1px rgba(255,255,255,.23);
  backdrop-filter:blur(.35px);
}
.opposite-piece-stamp.stamp-center::before{inset:5%;background:rgba(7,14,13,.08)}
.opposite-piece-stamp.from-underground::before{box-shadow:0 0 0 1px rgba(174,163,245,.42),0 1px 2px rgba(0,0,0,.16),inset 0 0 9px rgba(133,116,220,.15)}
.opposite-piece-stamp.from-surface::before{box-shadow:0 0 0 1px rgba(104,224,179,.45),0 1px 2px rgba(0,0,0,.16),inset 0 0 9px rgba(54,185,138,.14)}
.opposite-stamp-ring{position:absolute;inset:8%;border:1px dashed rgba(255,255,255,.40);border-radius:50%;opacity:.64}
.stamp-center .opposite-stamp-ring{inset:11%;opacity:.38}
.opposite-imprint-piece.piece-svg{position:relative;z-index:2;filter:none!important;transform:scaleY(.94)}
.stamp-center .opposite-imprint-piece.piece-svg{width:84%;height:84%;opacity:.48}
.stamp-corner .opposite-imprint-piece.piece-svg{width:74%;height:74%;opacity:.68}
.opposite-imprint-piece.piece-svg .piece-body{stroke-width:5;opacity:.95}
.square>.piece-svg:not(.opposite-imprint-piece){position:relative;z-index:3}
.square .coord{z-index:8;pointer-events:none}
.square .move-hint-dot{z-index:7}
.square.selected .opposite-piece-stamp,.square.legal-target .opposite-piece-stamp{opacity:.52}
.square.selected .opposite-piece-stamp.stamp-corner,.square.legal-target .opposite-piece-stamp.stamp-corner{opacity:.68}
@media(max-width:700px){
  .opposite-piece-stamp.stamp-center{width:70%;height:70%}
  .opposite-piece-stamp.stamp-corner{left:3%;top:3%;width:29%;height:29%}
  .stamp-corner .opposite-imprint-piece.piece-svg{width:72%;height:72%}
}

/* v50 language switch: SPA owns viewport restoration while translated text reflows. */
html.language-switching, html.language-switching body { scroll-behavior:auto !important; overflow-anchor:none; }
html.language-switching::view-transition-old(root),
html.language-switching::view-transition-new(root) { animation-duration:140ms; }


/* v51 - explicit layer labels, strong check feedback, and stable i18n transitions */
.move-item{grid-template-columns:34px minmax(0,1fr);align-items:center}
.move-item>b{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;font-weight:800}
.move-notation{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.move-layer-badge{flex:0 0 auto;display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.04em;border:1px solid rgba(255,255,255,.12)}
.move-layer-badge.surface{color:#9ff0ce;background:rgba(54,185,138,.13);border-color:rgba(104,224,179,.25)}
.move-layer-badge.underground{color:#d3cdfd;background:rgba(137,120,224,.15);border-color:rgba(174,163,245,.28)}
.square.king-in-check{isolation:isolate;box-shadow:inset 0 0 0 4px rgba(255,70,70,.95),inset 0 0 28px rgba(175,0,0,.72)!important}
.square.king-in-check::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at center,rgba(255,50,50,.48) 0 22%,rgba(255,45,45,.16) 42%,transparent 68%);animation:kingCheckGlow .9s ease-in-out infinite alternate}
.square.king-in-check.cross-layer-check::after{background:radial-gradient(circle at center,rgba(255,48,48,.52) 0 20%,rgba(157,112,255,.28) 38%,transparent 70%)}
.square.king-in-check .piece-svg,.square.king-in-check .piece{position:relative;z-index:5;filter:drop-shadow(0 0 7px rgba(255,255,255,.68)) drop-shadow(0 0 10px rgba(255,44,44,.85))}
.check-pulse{position:absolute;z-index:4;inset:8%;border:2px solid rgba(255,235,235,.88);border-radius:50%;pointer-events:none;animation:checkPulseRing 1s ease-out infinite}
.check-label{position:absolute;z-index:8;top:3px;right:3px;padding:2px 4px;border-radius:5px;background:#b71324;color:white;font-size:7px;font-weight:1000;line-height:1;letter-spacing:.06em;box-shadow:0 2px 7px rgba(0,0,0,.3);pointer-events:none}
.board-card.board-has-check{border-color:rgba(255,75,75,.68);box-shadow:0 0 0 1px rgba(255,70,70,.24),0 18px 50px rgba(0,0,0,.28),0 0 28px rgba(255,50,50,.12)}
@keyframes kingCheckGlow{from{opacity:.58}to{opacity:1}}
@keyframes checkPulseRing{0%{transform:scale(.72);opacity:.95}80%,100%{transform:scale(1.12);opacity:0}}
html.language-switching{cursor:progress}
html.language-switching body{cursor:progress}
html.language-switching main{transition:opacity .12s ease;opacity:.88}
html.language-switching #languageSelect+*.custom-select-shell .custom-select-trigger{cursor:progress}
@media(prefers-reduced-motion:reduce){.square.king-in-check::after,.check-pulse{animation:none}.language-switching main{transition:none}}

/* v51 lobby presence badge: Vietnamese label must stay on one line and the dot
   must remain vertically centered even when the welcome copy takes more width. */
.welcome-row>div:first-child{min-width:0}
.status-card{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;flex:0 0 auto;line-height:1.2}
.status-card .dot{display:block;flex:0 0 8px;margin-right:0}
.status-card-label{display:block;white-space:nowrap}
@media (min-width:561px) and (max-width:760px){.welcome-row{gap:14px}.status-card{padding:9px 11px;font-size:13px}}


/* v52 lobby: admins are public playable opponents, without exposing private admin fields. */
.lobby-admin-badge{margin-left:5px;vertical-align:middle;color:#ffe6a1;background:rgba(231,198,106,.12);border:1px solid rgba(231,198,106,.3);font-size:9px;line-height:1.2;padding:2px 6px}
.player b,.invite b{display:flex;align-items:center;flex-wrap:wrap;gap:4px}


/* v66 SPA hydration barrier: never reveal partially hydrated async route content. */
html.spa-hydrating,html.spa-hydrating body{cursor:progress!important}
html.spa-hydrating body>*{visibility:hidden!important}
html.spa-hydrating::before{content:'';position:fixed;inset:0;z-index:2147483645;background:var(--bg,#0d1412);visibility:visible!important}
html.spa-hydrating::after{content:'';position:fixed;z-index:2147483646;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent,#68e0b3);border-radius:50%;animation:ucSpaHydrateSpin .7s linear infinite;visibility:visible!important}
@keyframes ucSpaHydrateSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html.spa-hydrating::after{animation:none;border-top-color:var(--accent,#68e0b3)}}

/* v68 - stable persistent SPA shell + control-local loading feedback.
   No page fade/translate and no global mouse/cursor spinner. */
@view-transition{navigation:none!important}
::view-transition-old(root),::view-transition-new(root){animation:none!important}
html.spa-loading body,html.language-switching,html.language-switching body,
html.spa-hydrating,html.spa-hydrating body,html.spa-pending,html.spa-pending body{cursor:auto!important}
html.spa-loading main,html.language-switching main,body>main{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
html.spa-hydrating body>*{visibility:visible!important}
html.spa-hydrating::before,html.spa-hydrating::after{content:none!important;display:none!important}
.spa-incoming-main{visibility:hidden!important}
.spa-frozen-main{box-sizing:border-box!important;transition:none!important;animation:none!important;filter:none!important}

.uc-control-loading{position:relative!important;pointer-events:none!important;user-select:none!important;color:transparent!important;text-shadow:none!important;caret-color:transparent!important}
.uc-control-loading::after{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:16px!important;height:16px!important;margin:-8px 0 0 -8px!important;border:2px solid rgba(255,255,255,.28)!important;border-top-color:var(--brand,#68e0b3)!important;border-radius:50%!important;box-sizing:border-box!important;animation:ucControlSpin .62s linear infinite!important;visibility:visible!important;opacity:1!important}
.uc-control-loading>*{visibility:hidden!important}
a.uc-control-loading{text-decoration:none!important;min-width:1.15em}
.btn.uc-control-loading,.icon-btn.uc-control-loading,.link-btn.uc-control-loading{opacity:1!important;filter:none!important}
@keyframes ucControlSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.uc-control-loading::after{animation-duration:1.1s!important}}

/* v72 - truly atomic route staging. Incoming routes hydrate off-flow/off-screen while
   the previous route remains visually frozen. No partial HTML, custom-control setup,
   or first-layout correction is exposed to the user. */
.spa-staged-main{position:fixed!important;left:-200vw!important;top:0!important;visibility:hidden!important;pointer-events:none!important;contain:layout style paint!important}
.spa-main-placeholder{display:block!important;visibility:hidden!important;pointer-events:none!important;contain:layout!important}


/* v73 - atomic control paint: native form widgets are themed from their first frame.
   This is intentionally generic so staged SPA routes never expose OS-white controls
   before custom-select enhancement or route commit. */
input:not([type=checkbox]):not([type=radio]):not([type=color]),
select,textarea{
  color-scheme:dark;
  background-color:#0c1412!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.spa-staged-main input,.spa-staged-main select,.spa-staged-main textarea{visibility:hidden!important}
.spa-staged-main .custom-select-shell{visibility:hidden!important}
.spa-freeze-active .spa-frozen-main input,.spa-freeze-active .spa-frozen-main select,.spa-freeze-active .spa-frozen-main textarea{
  background-color:#0c1412!important;color:var(--text)!important;border-color:var(--line)!important;
}

/* v74 — zero-leak SPA staging / atomic language commit.
   Incoming route DOM may execute controllers and measure layout, but it is trapped in a
   paint-contained transparent stacking context. No descendant (including position:fixed
   elements) can paint over the current shell before final commit. */
#spaStageHost{
  position:fixed!important;
  left:-300vw!important;
  top:0!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:-2147483647!important;
  contain:strict!important;
  transform:translate3d(0,0,0)!important;
  isolation:isolate!important;
}
#spaStageHost,#spaStageHost *{
  animation:none!important;
  transition:none!important;
  pointer-events:none!important;
}
/* opacity on the host is non-overridable by descendants; visibility is repeated for old
   browser engines where nested widgets explicitly set visibility:visible. */
#spaStageHost *{visibility:hidden!important}
.spa-frozen-main{z-index:20!important}
.topbar{z-index:100!important}
html.language-switching main{opacity:1!important;transition:none!important}
html.language-switching,html.language-switching body{cursor:auto!important}

/* v78 — desktop game sidebar must never clip lower panels.
   On ordinary/short desktop viewports the sidebar participates in normal page flow,
   so Replay / Captured / Move History are all reachable by page scrolling.
   Only tall desktops use a sticky sidebar, and that variant scrolls instead of hiding
   overflow. The move list itself keeps its own bounded scroll viewport. */
@media (min-width:1101px){
  .game-sidebar{
    position:static!important;
    top:auto!important;
    align-self:start!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
  }
  .moves-panel{
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .move-log-shell{min-height:0!important}
  .move-log{
    height:clamp(220px,32vh,340px)!important;
    min-height:180px!important;
    max-height:340px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}
@media (min-width:1101px) and (min-height:900px){
  .game-sidebar{
    position:sticky!important;
    top:82px!important;
    max-height:calc(100vh - 96px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:4px;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .game-sidebar::-webkit-scrollbar{width:8px}
  .game-sidebar::-webkit-scrollbar-track{background:transparent}
  .game-sidebar::-webkit-scrollbar-thumb{background:#29483f;border-radius:999px}
}

/* v79 admin match export actions */
.admin-game-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:0 0 auto}.admin-game-actions .btn{white-space:nowrap}.admin-export-game{min-width:112px}@media(max-width:720px){.admin-game-row{align-items:flex-start;flex-direction:column}.admin-game-actions{width:100%;justify-content:flex-start}.admin-game-actions .btn{flex:1 1 140px}}

/* v90 admin engine laboratory */
.lab-toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:14px 0}.lab-toolbar label{display:grid;gap:5px}.lab-board-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-bottom:20px}.lab-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;max-width:520px;border:3px solid #293930}.lab-cell{aspect-ratio:1;border:0;font-size:clamp(22px,3vw,38px);cursor:pointer;line-height:1}.lab-cell.light{background:#ebecd0;color:#262c28}.lab-cell.dark{background:#739552;color:#182519}.lab-cell:hover{outline:3px solid #e6bc4b;outline-offset:-4px}.user-chip{text-decoration:none;cursor:pointer}.user-chip:hover{text-decoration:underline}

.puzzle-dialog{width:min(1050px,96vw);max-height:92vh;border:1px solid var(--line,#6c806f);border-radius:16px;padding:0;background:var(--panel,#18221e);color:inherit;overflow:auto}.puzzle-dialog::backdrop{background:rgba(0,0,0,.75)}.puzzle-dialog-inner{padding:24px}.puzzle-target{box-shadow:inset 0 0 0 5px #e2b544}.puzzle-selected{box-shadow:inset 0 0 0 5px #3383d3}.puzzle-status{font-weight:bold;margin:10px 0}

/* v91: Profile name gets the same quiet green interaction as Diagnostics. */
.topbar nav>a.user-chip {
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(104,224,179,.32);
  background:rgba(104,224,179,.08);
  color:#c8f5e4;border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.topbar nav>a.user-chip:hover,
.topbar nav>a.user-chip:focus-visible {
  background:rgba(104,224,179,.15);
  border-color:var(--brand);
  text-decoration:none;
  outline:2px solid transparent;
}
@media (prefers-reduced-motion:reduce){.topbar nav>a.user-chip{transition:none}}

/* v92: remove blank diagnostic/form feedback pills throughout UI */
.notice:empty,.toast:empty,[id$=Message].notice:empty,[id$=Message].notice[hidden]{display:none!important}

.badge:empty,.notice[hidden],.badge[hidden]{display:none!important}

/* v93: date-input filter busy state. Inputs do not reliably render ::after. */
.admin-game-filters label.uc-filter-loading{position:relative}
.admin-game-filters label.uc-filter-loading::after{content:"";position:absolute;right:12px;bottom:12px;width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--brand,#68e0b3);border-radius:50%;pointer-events:none;animation:ucControlSpin .62s linear infinite}

/* v97: stable single pause/resume action, independent of language and state. */
.pause-toggle{min-width:156px;white-space:nowrap;flex-shrink:0}
.pause-toggle[hidden]{display:none!important}
.pause-toggle-label{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
/* Keep the secondary player metadata aligned with the name, not the avatar edge. */
.player-main>div:last-child,.avatar-line>div:last-child{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.player-main>div:last-child>b,.player-main>div:last-child>small,.avatar-line>div:last-child>b,.avatar-line>div:last-child>small{margin-left:0!important;padding-left:0!important;text-indent:0!important}
/* Native authentication controls use the same loading affordance as async actions. */
.auth-submit.uc-control-loading{min-height:47px}

/* v99: Presence indicator belongs to avatar overlay, never the metadata text flow.
   Render only online users, so offline users have no invisible spacing. */
.player-main .player-avatar{position:relative;flex:0 0 38px}
.player-main .player-presence{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--brand);border:2px solid #0d1614;box-shadow:0 0 8px rgba(104,224,179,.6);pointer-events:none}
.player-main>div:last-child>small{margin-left:0!important;padding-left:0!important;text-indent:0!important}


/* v104: consistent spacing and button typography; override legacy accumulated rules. */
:root{--ui-section-gap:18px;--ui-control-gap:12px}
/* Adjacent admin cards previously shared a border with no breathing room. */
.admin-shell > section.panel + section.panel{margin-top:var(--ui-section-gap)}
.admin-shell > section.panel{min-width:0}
.admin-shell .panel-head{gap:16px;flex-wrap:wrap}
.admin-shell .panel-head > div:first-child{min-width:0;flex:1 1 320px}
.admin-shell .panel-head > .btn{flex:0 0 auto}
.admin-shell .panel-head > .admin-inline-actions{margin-top:0;min-width:0;display:flex;align-items:center;gap:var(--ui-control-gap);flex:0 1 auto;flex-wrap:wrap}
.admin-shell #adminCreateUser{min-width:max-content;white-space:nowrap;flex:0 0 auto}
.admin-shell .panel-head #adminSearch{width:clamp(180px,19vw,260px);min-width:150px;flex:1 1 180px}
/* A control row and its submit action should not visually merge. */
.ai-panel .ai-options-grid{row-gap:12px;column-gap:12px;margin-bottom:14px}
.ai-panel .ai-options-grid .time-field{display:grid;gap:7px;min-width:0}
.ai-panel #startAi{margin-top:0;min-height:46px}
/* All button-like controls use initial capitals visually, including JS-generated labels. */
button,.btn,.icon-btn,.link-btn,[role="button"],input[type="button"],input[type="submit"]{text-transform:capitalize}
button.btn,.btn,.icon-btn{white-space:nowrap;min-width:max-content}
button.btn.wide,.btn.wide{width:100%;min-width:0}
@media(max-width:680px){
 .admin-shell .panel-head{align-items:stretch}
 .admin-shell .panel-head > div:first-child{flex-basis:100%}
 .admin-shell .panel-head > .admin-inline-actions{width:100%;justify-content:flex-start}
 .admin-shell .panel-head #adminSearch{width:auto;max-width:none}
 .admin-shell .panel-head > .btn{align-self:flex-start}
}
@media(max-width:390px){
 .admin-shell .panel-head > .admin-inline-actions{gap:10px}
 .admin-shell .panel-head #adminSearch{flex-basis:100%}
 .ai-panel .ai-options-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* v119 — terminal controls, iOS selects, mobile nav and ratio-safe game header. */
[hidden]{display:none!important}
.native-select-enhanced{display:none!important}
button:disabled,.btn:disabled,.icon-btn:disabled{opacity:.46;cursor:not-allowed;filter:saturate(.55);transform:none!important;box-shadow:none!important}

/* The game header must never squeeze the title into a one-word column. */
.game-top{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:12px 18px}
.game-title{min-width:0;line-height:1.35;overflow-wrap:normal;word-break:normal}
.game-top-actions{min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.game-top-actions .btn{white-space:nowrap}
@media(max-width:1180px){
  .game-top{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .game-title{grid-column:2;align-self:center}
  .game-top-actions{grid-column:1/-1;justify-content:flex-start;width:100%}
}
@media(max-width:760px){
  .game-shell{padding:14px 12px 54px}
  .game-top{grid-template-columns:1fr;gap:10px;margin-bottom:14px}
  .game-top>.back,.game-title,.game-top-actions{grid-column:1;width:100%}
  .game-title{font-size:16px}
  .game-top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .game-top-actions .btn{width:100%;min-width:0;white-space:normal;line-height:1.2;min-height:44px;padding:9px 10px}
  .boards-area{gap:12px}
  .board-card{min-width:0}
}
@media(max-width:420px){
  .game-top-actions{grid-template-columns:1fr}
  .game-top-actions .btn{min-height:42px}
}

/* On compact screens the logo is the role-aware navigation trigger. The PHP nav
   remains the single permission source, so admins also see Admin/Test Lab. */
@media(max-width:850px){
  .topbar{position:sticky;top:0;z-index:900;overflow:visible}
  .topbar .brand{position:relative;z-index:902;cursor:pointer}
  .topbar nav{display:none;position:absolute;left:12px;right:12px;top:calc(100% + 7px);z-index:901;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(13,22,20,.985);box-shadow:0 20px 55px rgba(0,0,0,.48);backdrop-filter:blur(14px);grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  .topbar.mobile-nav-open nav{display:grid}
  .topbar.mobile-nav-open nav>a,.topbar.mobile-nav-open nav>button,.topbar.mobile-nav-open nav>form,.topbar.mobile-nav-open nav>.custom-select-shell{display:flex!important;min-width:0;width:100%;align-items:center;justify-content:center;margin:0}
  .topbar.mobile-nav-open nav>a,.topbar.mobile-nav-open nav>button,.topbar.mobile-nav-open nav .link-btn{min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#101a17;color:var(--text);text-decoration:none;text-align:center}
  .topbar.mobile-nav-open nav>form{grid-column:span 1}
  .topbar.mobile-nav-open nav>form .link-btn{width:100%}
  .topbar.mobile-nav-open .custom-select-nav .custom-select-trigger{min-height:42px}
  .topbar.mobile-nav-open .custom-select-nav .custom-select-menu{left:0;right:0;min-width:100%}
  .topbar.mobile-nav-open .user-chip{display:flex!important}
}
@media(max-width:430px){
  .topbar nav{grid-template-columns:1fr;max-height:min(72vh,620px);overflow:auto}
  .topbar.mobile-nav-open nav>form{grid-column:auto}
}

/* Avoid a stale auto-hide transform while the mobile menu is open. */
.topbar.mobile-nav-open{transform:none!important}

/* v125 — keep the language switcher directly accessible on mobile.
   The logo menu is for navigation/actions; language is a persistent header control. */
.topbar-right{display:flex;align-items:center;gap:14px;min-width:0}
.header-language{position:relative;z-index:905;flex:0 0 auto}
.header-language .custom-select-nav{min-width:82px}
@media(max-width:850px){
  .topbar{gap:10px}
  .topbar-right{margin-left:auto;gap:0}
  .header-language{display:block!important}
  .header-language .custom-select-nav{display:block!important;min-width:76px}
  .header-language .custom-select-trigger{min-height:40px;padding:0 11px}
  .header-language .custom-select-menu{right:0;left:auto;min-width:116px;z-index:1105}
  .topbar nav{left:12px;right:12px}
  .topbar.mobile-nav-open nav>a,.topbar.mobile-nav-open nav>button,.topbar.mobile-nav-open nav>form{display:flex!important;min-width:0;width:100%;align-items:center;justify-content:center;margin:0}
}
@media(max-width:390px){
  .header-language .custom-select-nav{min-width:70px}
  .header-language .custom-select-trigger{padding:0 9px;font-size:13px}
}

/* v127 — system-wide dropdown top-layer/portal discipline.
   Custom select menus must never be clipped by cards, Test Lab panels, sticky
   sidebars, table scroll containers, SPA staging wrappers, or modal content. */
.custom-select-shell{z-index:auto!important}
.custom-select-menu{
  position:fixed!important;
  margin:0!important;
  right:auto!important;
  z-index:2147483000!important;
  min-width:118px;
  max-width:calc(100vw - 16px);
  max-height:min(320px,55vh);
  overscroll-behavior:contain;
  isolation:isolate;
}
.custom-select-menu:popover-open{display:block}
.custom-select-menu.custom-select-portal-fallback{position:fixed!important}
.custom-select-menu.opens-up{transform-origin:bottom center}
/* A top-layer popup no longer depends on local overflow hacks. Keep control
   wrappers non-clipping anyway for legacy engines that take the fallback path. */
.form-stack label,.form-two label,.lab-toolbar label,.match-field,.appearance-grid label,
.admin-game-filters label,.ai-options-grid label{overflow:visible!important}
@media(max-width:560px){
  .custom-select-menu{max-width:calc(100vw - 12px);max-height:min(340px,58vh)}
}

/* v131: portaled custom-select menus are explicitly viewport-positioned. */
.custom-select-menu.custom-select-portal{position:fixed!important;right:auto!important;bottom:auto!important;margin:0!important;transform:none!important;z-index:2147483000!important;box-sizing:border-box!important;}

/* v135 — custom iPhone/mobile language dropdown.
   Keep the menu inside the persistent header shell instead of portaling it into body.
   This preserves the themed dropdown and avoids iOS visualViewport re-anchoring. */
@media(max-width:850px), (pointer:coarse){
  .header-language #languageSelect{display:none!important}
  .header-language .custom-select-mobile-language{display:block!important;position:relative!important;min-width:76px;z-index:1104!important}
  .header-language .custom-select-mobile-language .custom-select-trigger{min-height:40px;padding:0 11px}
  .header-language .custom-select-mobile-language .custom-select-menu{
    position:absolute!important;
    top:calc(100% + 7px)!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
    width:max-content!important;
    min-width:116px!important;
    max-width:min(220px,calc(100vw - 24px))!important;
    max-height:min(300px,55vh)!important;
    margin:0!important;
    transform:none!important;
    z-index:2147483000!important;
  }
}
@media(max-width:390px){
  .header-language .custom-select-mobile-language{min-width:70px}
  .header-language .custom-select-mobile-language .custom-select-trigger{padding:0 9px;font-size:13px}
}

/* v141 — one consistent modal/input system across iPhone, Android and desktop. */
.ui-modal-card{max-height:min(88dvh,760px);overflow:auto;-webkit-overflow-scrolling:touch}
.ui-modal-fields{display:grid;gap:13px;margin-top:18px;text-align:left}
.ui-modal-fields label{display:grid;gap:7px;font-weight:700;color:var(--text)}
.ui-modal-fields input,.ui-modal-fields textarea{box-sizing:border-box;width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#0d1614;color:var(--text);padding:11px 12px;font:inherit;outline:none;-webkit-appearance:none;appearance:none}
.ui-modal-fields textarea{min-height:82px;resize:vertical;line-height:1.4}
.ui-modal-fields input:focus,.ui-modal-fields textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(104,224,179,.12)}
.ui-modal-field-error{margin:0}
.ui-modal-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px;text-align:left}
.ui-modal-choice{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#0d1614;cursor:pointer}
.ui-modal-choice:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:rgba(104,224,179,.08)}
.ui-modal-choice input{accent-color:var(--brand);width:18px;height:18px;flex:0 0 auto}
/* Normalize native <dialog> shells that remain intentionally used for large app panels. */
dialog.edit-dialog,dialog.puzzle-dialog,dialog.diagnostics-dialog{font:inherit;-webkit-text-size-adjust:100%;color-scheme:dark}
dialog.edit-dialog button,dialog.edit-dialog input,dialog.edit-dialog textarea,dialog.edit-dialog select,dialog.puzzle-dialog button,dialog.puzzle-dialog input,dialog.puzzle-dialog textarea,dialog.puzzle-dialog select,dialog.diagnostics-dialog button{font:inherit}
@media(max-width:600px){.ui-modal{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}.ui-modal-card{width:100%;padding:20px;border-radius:18px}.ui-modal-choice-grid{grid-template-columns:1fr}.ui-modal-actions{position:sticky;bottom:-20px;margin-inline:-20px;margin-bottom:-20px;padding:14px 20px max(14px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(14,23,21,0),#0e1715 28%);z-index:2}}


/* v143 — portal dropdown coordinate fix.
   Do not reset inset with !important: JS owns top/left for viewport-positioned menus.
   Safari/iOS otherwise ignores the computed inline coordinates and the options appear missing. */
.custom-select-menu.custom-select-portal{
  top:auto;
  left:auto;
}

/* v149 — consistent vector pieces in Test Lab and saved-puzzle preview.
   Do not use Unicode chess glyph metrics here: iOS Safari varies the apparent
   size of rook/knight/bishop/pawn even at one font-size. */
.lab-cell{
  display:grid;
  place-items:center;
  padding:0;
  overflow:hidden;
  font-size:0;
}
.lab-cell .lab-piece-svg{
  width:78%;
  height:78%;
  max-width:78%;
  max-height:78%;
  transform:none;
  flex:none;
}
.lab-cell.light{background:var(--sq1,#ebecd0)}
.lab-cell.dark{background:var(--sq2,#739552)}
.puzzle-dialog .lab-cell .lab-piece-svg{width:80%;height:80%;max-width:80%;max-height:80%}
@media(max-width:700px){
  .lab-cell .lab-piece-svg{width:82%;height:82%;max-width:82%;max-height:82%}
  .puzzle-dialog .lab-cell .lab-piece-svg{width:84%;height:84%;max-width:84%;max-height:84%}
}

.tstat{position:relative}.tstat-main{display:block;min-height:22px}.tstat.tunnel-frozen{border:1px solid rgba(130,202,255,.42);background:linear-gradient(180deg,rgba(72,132,169,.16),rgba(13,21,20,.96));box-shadow:inset 0 0 18px rgba(109,190,255,.08)}.tstat.tunnel-frozen small{color:#bfe8ff;font-weight:900}

/* v202: Captured/Lost tokens are replay controls. */
.captured-review-token{border:1px solid transparent;color:inherit;font:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}
.captured-review-token:hover,.captured-review-token:focus-visible{border-color:var(--brand);background:rgba(104,224,179,.10);outline:none;box-shadow:0 0 0 2px rgba(104,224,179,.12)}
.captured-review-token:active{transform:translateY(1px)}
/* v224 — guest mobile auth ergonomics.
   Keep Login directly accessible in the header; the logo remains the menu trigger. */
.mobile-guest-login{display:none;white-space:nowrap}
@media(max-width:850px){
  .topbar-right{display:flex;align-items:center;gap:8px}
  .mobile-guest-login{display:inline-flex;position:relative;z-index:906;min-height:40px;padding:8px 13px}
  .topbar nav .guest-login{display:none!important}
  .topbar.mobile-nav-open nav .guest-login{display:none!important}
}
@media(max-width:390px){
  .mobile-guest-login{padding:7px 11px;font-size:12px}
}

/* v224-public: per-game Public / Private visibility controls */
.game-public-toggle{white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease,opacity .18s ease}
.game-public-toggle.is-public{border-color:rgba(104,224,179,.48);background:rgba(104,224,179,.10);color:#aef2d7}
.game-public-toggle.global-disabled{border-color:rgba(231,198,106,.42);background:rgba(231,198,106,.08);color:#f1d88b}
@media(max-width:760px){.game-public-toggle{max-width:100%;font-size:12px;padding:8px 10px}}

/* v224-public-r2 — keep admin feature toggles visually aligned even when descriptions wrap. */
.admin-setting{align-items:flex-start}
.admin-setting>.switch{flex:0 0 54px;margin-top:1px}
.admin-setting>div{min-width:0;padding-right:18px}
@media(max-width:560px){.admin-setting{gap:14px}.admin-setting>div{padding-right:0}}

/* r7 captured-piece review: keep the pending capture visible in Move history */
.move-item.capture-review-target{
  border-color:rgba(231,198,106,.88);
  background:rgba(231,198,106,.13);
  box-shadow:inset 3px 0 0 var(--gold),0 0 0 1px rgba(231,198,106,.08);
}

/* v230 admin lobby search-quality badge. Admin-only markup is emitted by app.js. */
.search-quality-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.015em;vertical-align:middle;border:1px solid transparent;cursor:help;white-space:nowrap}
.search-quality-pill small{display:inline;font-size:9px;margin:0;opacity:.82;color:inherit}
.search-quality-pill.good{color:#77e8bd;background:rgba(97,221,176,.11);border-color:rgba(97,221,176,.28)}
.search-quality-pill.warn{color:#f1cf72;background:rgba(241,207,114,.09);border-color:rgba(241,207,114,.25)}
.search-quality-pill.bad{color:#ff9d9d;background:rgba(255,122,122,.09);border-color:rgba(255,122,122,.25)}
.search-quality-pill.neutral{color:#a8bbb4;background:rgba(157,176,168,.07);border-color:rgba(157,176,168,.16)}

/* v237/v261: one contextual special-tunnel tile beside the normal per-side tunnel counters.
   Keep Urgent/Free visually aligned with White/Black when inactive; only add accent when active. */
.tunnel-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.special-tunnel-stat{border:0;background:#0d1514;box-shadow:none;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.special-tunnel-stat.active{border:1px solid rgba(231,198,106,.48);background:linear-gradient(180deg,rgba(231,198,106,.13),rgba(13,21,20,.96));box-shadow:inset 0 0 18px rgba(231,198,106,.07)}
.special-tunnel-stat.urgent .tstat-main b{color:#ffd98a}
.special-tunnel-stat.free{border:1px solid rgba(104,224,179,.48);background:linear-gradient(180deg,rgba(104,224,179,.12),rgba(13,21,20,.96));box-shadow:inset 0 0 18px rgba(104,224,179,.07)}
.special-tunnel-stat.free .tstat-main b{color:#aef2d7}
@media(max-width:430px){.tunnel-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.tstat{min-height:62px;padding:8px 6px}.tstat-main b,.tstat small{font-size:11px}.special-tunnel-stat{grid-column:auto}}

/* v268: five tunnel status tiles — 3 legacy/special controls + 2 king emergency quotas. */
.tunnel-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
.normal-tunnel-stat,.special-tunnel-stat{grid-column:span 2}
.king-check-tunnel-stat{grid-column:span 3;min-height:58px}
.king-check-tunnel-stat .tstat-main b{font-size:12px}
.king-check-tunnel-stat.exhausted,.normal-tunnel-stat.only-main-mode{border:1px solid rgba(231,198,106,.48);background:linear-gradient(180deg,rgba(231,198,106,.12),rgba(13,21,20,.96));box-shadow:inset 0 0 18px rgba(231,198,106,.07)}
.king-check-tunnel-stat.exhausted .tstat-main b,.normal-tunnel-stat.only-main-mode .tstat-main b{color:#ffd98a}
@media(max-width:430px){.tunnel-stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.normal-tunnel-stat,.special-tunnel-stat{grid-column:span 2}.king-check-tunnel-stat{grid-column:span 3}.tstat{min-height:62px;padding:8px 6px}.king-check-tunnel-stat{min-height:56px}.tstat-main b,.tstat small,.king-check-tunnel-stat .tstat-main b{font-size:10.5px}}

/* v278 rule-card density layout. Long rules get a full row; medium rules share
   halves; compact rules share thirds; very short rules share quarters. */
@media (min-width:901px){
  .rule-density-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-auto-flow:row dense;align-items:stretch}
  .rule-density-grid>article{grid-column:span 4!important;min-width:0;height:100%}
  .rule-density-grid>article.rule-span-12{grid-column:1/-1!important}
  .rule-density-grid>article.rule-span-6{grid-column:span 6!important}
  .rule-density-grid>article.rule-span-4{grid-column:span 4!important}
  .rule-density-grid>article.rule-span-3{grid-column:span 3!important}
}
@media (min-width:561px) and (max-width:900px){
  .rule-density-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row dense}
  .rule-density-grid>article{grid-column:span 1!important}
  .rule-density-grid>article.rule-span-12{grid-column:1/-1!important}
}
@media (max-width:560px){
  .rule-density-grid{display:grid!important;grid-template-columns:1fr!important}
  .rule-density-grid>article{grid-column:1!important}
}

/* v283 — authorized Lobby audit flag for games that used Take Back. */
.takeback-audit-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.025em;vertical-align:middle;white-space:nowrap;color:#ffd27a;background:rgba(255,177,66,.10);border:1px solid rgba(255,177,66,.30);box-shadow:inset 0 0 12px rgba(255,177,66,.035)}

/* V294: keep Only Main primary stat labels visually aligned on one line. */
.normal-tunnel-stat.only-main-mode .tstat-main b,
.special-tunnel-stat.only-main-special .tstat-main b{
  white-space:nowrap;
  font-size:clamp(9.5px,1.8vw,12px);
  letter-spacing:-.01em;
}

/* V433 — saved Puzzle library: responsive server-backed pagination. */
.puzzle-list-count{color:var(--muted);font-size:13px;margin:10px 0 4px}
.puzzle-list-count:empty{display:none}
#puzzlePagination .btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
#puzzlePagination[hidden]{display:none}

/* Lobby: distinguish a player's configured chess clock from real time spent playing. */
.game-elapsed{color:var(--brand);font-weight:700;white-space:normal}

/* V488: four independent Test Lab castling controls. */
.lab-castle-settings{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));align-items:start;gap:7px 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(91,127,111,.08);min-width:min(100%,310px)}
.lab-castle-settings strong,.lab-castle-settings small{grid-column:1/-1}
.lab-toolbar .lab-castle-settings label{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer;font-weight:600}
.lab-castle-settings input[type="checkbox"]{width:17px;height:17px;flex:none;accent-color:var(--brand)}
.lab-castle-settings label:has(input:disabled){opacity:.55;cursor:not-allowed}
@media(max-width:520px){.lab-castle-settings{width:100%;grid-template-columns:1fr 1fr}.admin-inline-actions:has(#labRepairRecentCastle){flex-wrap:wrap}}

/* v489 Test Lab layout polish */
.lab-editor-panel{padding:22px}.lab-editor-head{margin-bottom:18px}.lab-editor-layout{display:grid;gap:18px}.lab-controls-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.95fr);gap:16px;align-items:start}.lab-card{padding:18px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.018))}.lab-card-head{display:grid;gap:5px;margin-bottom:14px}.lab-card-head h3{margin:0;font-size:18px}.lab-card-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}.lab-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px 16px}.lab-fields-grid label,.lab-meta-grid label{display:grid;gap:7px;align-content:start}.lab-fields-grid label>span,.lab-meta-grid label>span{font-size:13px;font-weight:800;color:#d8e5e0}.lab-fields-grid .search,.lab-meta-grid .search{width:100%;max-width:none;min-height:46px}.lab-fields-grid input[type="number"],.lab-meta-grid input,.lab-fields-grid select{appearance:none}.lab-fields-grid small,.lab-meta-grid small,.lab-castle-settings small{line-height:1.35}.lab-quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.lab-quick-actions .btn{min-height:44px;padding:10px 16px}.lab-board-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0}.lab-board-card{display:grid;gap:12px;padding:16px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:rgba(11,20,18,.55)}.lab-board-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.lab-board-head h3{margin:0;font-size:18px}.lab-board-head small{color:var(--muted);font-size:12px}.lab-board{max-width:none;width:100%;border:1px solid #2a3a34;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.lab-cell{display:grid;place-items:center}.lab-puzzle-card{padding-bottom:16px}.lab-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}.lab-meta-grid label:nth-child(2){grid-column:span 2}.lab-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:0}.lab-actions .btn{min-height:46px;padding:11px 18px;border-radius:12px}.lab-actions .btn.ghost{background:rgba(255,255,255,.015)}.lab-castle-card{height:100%}.lab-castle-settings{grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px 18px;padding:14px 16px;background:rgba(104,224,179,.05);border-color:rgba(104,224,179,.16);min-width:0}.lab-toolbar .lab-castle-settings label,.lab-castle-settings label{display:flex;gap:9px;align-items:center;font-size:14px;cursor:pointer;font-weight:700;padding:2px 0}.lab-castle-settings label:has(input:disabled){opacity:.5}.lab-castle-settings input[type="checkbox"]{width:18px;height:18px}.lab-card .muted{color:var(--muted)}.lab-editor-panel .notice{margin:0}@media(max-width:1120px){.lab-controls-grid{grid-template-columns:1fr}.lab-meta-grid{grid-template-columns:1fr 1fr}.lab-meta-grid label:nth-child(2){grid-column:auto}}@media(max-width:760px){.lab-editor-panel{padding:18px}.lab-fields-grid,.lab-meta-grid,.lab-board-pair,.lab-castle-settings{grid-template-columns:1fr}.lab-board-head{align-items:flex-start;flex-direction:column}.lab-quick-actions .btn,.lab-actions .btn{width:100%}.lab-actions{display:grid;grid-template-columns:1fr}}@media(max-width:560px){.lab-card,.lab-board-card{padding:14px}.lab-card-head h3{font-size:17px}.lab-editor-head{margin-bottom:14px}}

/* v490 Admin Lobby: paged player search in game-history filters. */
.admin-game-filters .admin-player-field{display:grid;gap:7px;min-width:0;align-self:end}
.admin-game-filters .admin-player-field>span{font-size:.78rem;font-weight:750;color:var(--muted);letter-spacing:.02em}
.admin-game-filters .admin-player-picker{position:relative;min-width:0}
.admin-game-filters .admin-player-input-wrap{position:relative}
.admin-game-filters .admin-player-input-wrap .search{padding-right:36px;max-width:none;border-radius:10px}
.admin-player-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:18px;line-height:1}
.admin-game-filters .admin-player-chosen{display:flex;align-items:center;gap:8px;min-height:32px;margin-top:7px;padding:5px 7px 5px 10px;border:1px solid rgba(104,224,179,.25);border-radius:9px;background:rgba(104,224,179,.08);color:var(--text);font-size:12px;font-weight:700;min-width:0}
.admin-game-filters .admin-player-chosen[hidden],.admin-game-filters .admin-player-results[hidden]{display:none!important}
.admin-player-chosen #adminPlayerChosenText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.admin-player-clear{border:0;border-radius:7px;padding:2px 7px;background:rgba(104,224,179,.12);color:var(--brand);font-size:20px;line-height:1;cursor:pointer}
.admin-player-clear:hover,.admin-player-clear:focus-visible{background:rgba(104,224,179,.24);outline:2px solid rgba(104,224,179,.32)}
.admin-player-results{position:absolute;z-index:48;top:calc(100% + 6px);left:0;right:0;max-height:300px;min-width:min(340px,calc(100vw - 48px));overflow:auto;overscroll-behavior:contain;border:1px solid #3b5149;border-radius:12px;background:#111d19;box-shadow:0 16px 40px rgba(0,0,0,.43);padding:5px;scrollbar-width:thin;scrollbar-color:#506b60 #111d19}
.admin-player-option{display:grid;gap:2px;justify-items:start;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer}
.admin-player-option strong{font-size:13px;font-weight:800;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.admin-player-option small{font-size:12px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.admin-player-option:hover,.admin-player-option.active,.admin-player-option[aria-selected="true"]{background:rgba(104,224,179,.11)}
.admin-player-option:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.admin-player-more,.admin-player-count,.admin-player-empty{display:block;width:100%;padding:12px 9px;text-align:center;color:var(--muted);font-size:12px}
.admin-player-more{border:0;border-radius:8px;background:rgba(255,255,255,.035);color:var(--brand);cursor:pointer;font-weight:750}
.admin-player-more:hover{background:rgba(104,224,179,.1)}
.admin-player-more:disabled{opacity:.5;cursor:wait}
@media(max-width:620px){.admin-game-filters>.admin-player-field{grid-column:1/-1}.admin-player-results{min-width:0;width:100%}}
/* Keep other game filter controls aligned when a player selection chip is shown. */
.admin-game-filters:has(.admin-player-picker){align-items:start}
.admin-game-filters:has(.admin-player-picker) .admin-player-field{align-self:start}
.admin-game-filters:has(.admin-player-picker) #adminGameReset{margin-top:25px;min-height:44px}
@media(max-width:1000px){.admin-game-filters:has(.admin-player-picker) #adminGameReset{margin-top:0}}

/* V491: visual distinction for experimental-only test mode */
.lab-super-note{margin:0;padding:12px 14px;border:1px solid rgba(104,224,179,.21);border-radius:12px;background:rgba(104,224,179,.055);color:var(--muted);font-size:13px;line-height:1.55}
#labWhite,#labBlack{max-width:none}

.lab-super-presets{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lab-super-presets>span{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px}.lab-super-presets .btn{min-height:42px;padding:9px 13px;font-size:12px;box-shadow:none;white-space:normal}@media(max-width:560px){.lab-super-presets{display:grid;grid-template-columns:1fr}.lab-super-presets .btn{width:100%}}

/* V499.2 UI hotfix: compact tunnel cards. Long rule text belongs in the title
   tooltip / Rules page, never in the 3 narrow counters. Keep mobile panels
   one-line high even when translated labels get longer. */
.tunnel-stats .tstat,.tunnel-stats .tstat-main{min-width:0}
.tunnel-stats .tstat .tstat-main b,
.tunnel-stats .tstat small{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* V505: coordinate glyph color equals the opposite tile BACKGROUND, including
   the exact underground color mix; V499.2 compact stat cards are preserved. */
.chess-board .square .coord{opacity:1;text-shadow:none}
#board-surface .square.dark .coord{color:var(--sq1)}
#board-surface .square.light .coord{color:var(--sq2)}
#board-underground .square.dark .coord{color:color-mix(in srgb,var(--sq1) 82%,#9389c8 18%)}
#board-underground .square.light .coord{color:color-mix(in srgb,var(--sq2) 80%,#51466f 20%)}

/* V506: Test Lab section rhythm and self-contained editor match settings. */
.test-lab-shell > .lab-editor-panel{margin-top:26px}
.lab-position-match{border-color:rgba(104,224,179,.20);background:linear-gradient(180deg,rgba(104,224,179,.065),rgba(255,255,255,.018))}
.lab-position-match-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.lab-position-match-fields label:last-child{grid-column:1/-1;max-width:340px}
.lab-position-presets{margin-top:16px}
.lab-position-match+.lab-actions{margin-top:4px}
@media(max-width:760px){.test-lab-shell > .lab-editor-panel{margin-top:20px}.lab-position-match-fields{grid-template-columns:1fr}.lab-position-match-fields label:last-child{grid-column:auto;max-width:none}}

/* V509: consistent breathing room in dense game, lab and admin controls.
   Scoped spacing only: board square geometry and game rules are untouched. */
.game-shell .game-top{gap:16px 22px;flex-wrap:wrap;align-items:center}
.game-shell .game-top-actions{gap:10px;flex-wrap:wrap}
.game-shell .game-top-actions .btn{min-height:40px;line-height:1.35}
.game-sidebar{gap:16px}
.game-sidebar .panel{padding:18px}
.game-sidebar .panel-head{margin-bottom:16px}
.game-sidebar .vs-row{gap:12px;flex-wrap:wrap}
.game-sidebar .tunnel-stats{gap:12px;margin-top:14px}
.game-sidebar .tstat{padding:11px 12px;min-height:74px}
.game-sidebar .tstat-main{display:flex;align-items:center;gap:7px;min-width:0}
.game-sidebar .move-log{margin-top:14px;gap:7px}
.game-sidebar .move-item{padding:9px 10px;gap:10px}
.panel-head{column-gap:22px;row-gap:12px}
.form-stack{gap:18px}
.form-two{gap:16px}
.lab-editor-layout{gap:22px}
.lab-controls-grid{gap:20px}
.lab-fields-grid,.lab-meta-grid{gap:16px 18px}
.lab-card-head{gap:8px;margin-bottom:17px}
.lab-fields-grid label,.lab-meta-grid label{gap:9px;min-width:0}
.lab-quick-actions,.lab-actions,.lab-super-presets{gap:12px}
.lab-board-pair{gap:20px}
.lab-board-card{gap:15px}
.lab-position-presets{margin-top:18px}
.admin-game-filters{gap:14px 16px}
.admin-inline-actions,.admin-game-actions{gap:10px 12px}
.admin-game-row{gap:14px}
:is(.game-shell,.test-lab-shell,.admin-shell) .btn,
:is(.game-shell,.test-lab-shell,.admin-shell) .search{
  max-width:100%;
}
@media(max-width:760px){
  .game-shell .game-top{align-items:flex-start;gap:12px}
  .game-shell .game-top-actions{width:100%;gap:10px}
  .game-sidebar .panel{padding:16px}
  .lab-editor-layout{gap:18px}
  .lab-controls-grid,.lab-board-pair{gap:16px}
  .lab-fields-grid,.lab-meta-grid{gap:14px}
  .lab-quick-actions,.lab-actions{gap:10px}
  .admin-game-filters{gap:12px}
}
@media(max-width:420px){
  .game-shell .game-top-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .game-shell .game-top-actions .btn{width:100%;white-space:normal}
  .game-sidebar .tunnel-stats{gap:9px}
  .game-sidebar .tstat{padding:10px;min-width:0}
}

/* V511: action/result spacing, deliberately scoped to Test Lab (no global notice regressions). */
.test-lab-shell #labBoardMessage.notice:not([hidden]):not(:empty){
  display:block;clear:both;margin:20px 0 0 !important;
  padding:16px 18px;line-height:1.5;overflow-wrap:anywhere;
}
.test-lab-shell .lab-actions{margin-bottom:0}
.test-lab-shell .lab-fields-grid label:has(#labWhiteKingCheckRemaining),
.test-lab-shell .lab-fields-grid label:has(#labBlackKingCheckRemaining){align-content:start}
@media(max-width:760px){.test-lab-shell #labBoardMessage.notice:not([hidden]):not(:empty){margin-top:16px !important;padding:14px 16px}}

/* Compact, breathable player-facing rules: short cards rather than dense paragraphs. */
.rule-density-grid>article{padding:20px 22px!important}
.rule-density-grid>article h3{margin:10px 0 9px;line-height:1.3}
.rule-density-grid>article p{line-height:1.7;max-width:none;text-wrap:pretty}
.rules-page .welcome-row p{max-width:70ch;line-height:1.65}
@media(max-width:560px){.rule-density-grid>article{padding:17px 18px!important}}

.rules-try-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 0;padding:18px 22px;border:1px solid var(--line);border-radius:15px;background:rgba(104,224,179,.045)}
.rules-try-cta p{margin:0;color:var(--text);line-height:1.5}
@media(max-width:600px){.rules-try-cta{align-items:stretch;flex-direction:column}.rules-try-cta .btn{align-self:flex-start}}

/* V539 — independent Medium UCI strength settings. */
.medium-uci-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:15px 0}
.medium-uci-profile{border:1px solid var(--border,rgba(127,127,127,.3));border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.medium-uci-profile h3{font-size:1rem;line-height:1.4;margin:0}
.medium-uci-profile label{display:flex;flex-direction:column;gap:7px}
.medium-uci-profile .search{width:100%;max-width:100%}
.medium-uci-profile input:disabled{opacity:.55;cursor:not-allowed}
.medium-uci-profile .hint{margin:0}
@media(max-width:700px){.medium-uci-profile-grid{grid-template-columns:1fr}}

/* V540: Medium save feedback sits AFTER its button in a reserved slot.
   The button never shifts when the status appears or disappears. */
.admin-shell .medium-uci-save-actions{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:14px;max-width:100%;}
.admin-shell .medium-uci-save-actions #saveMediumUciSettings{grid-column:1;grid-row:1;}
.admin-shell .medium-uci-save-actions #mediumUciSaveState{grid-column:2;grid-row:1;display:block;min-height:1.4em;line-height:1.4;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
@media(max-width:470px){.admin-shell .medium-uci-save-actions{column-gap:9px}.admin-shell .medium-uci-save-actions #mediumUciSaveState{font-size:12px;}}


/* V542: persistent, dismissible navigation error; a stalled route is recoverable. */
.uc-spa-navigation-notice{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;max-width:min(640px,calc(100vw - 28px));width:max-content;padding:12px 15px;border-radius:12px;border:1px solid var(--line,#758b7d);background:var(--card,#15201c);color:var(--text,#f0f7f0);box-shadow:0 8px 28px rgba(0,0,0,.2);font-size:13px;line-height:1.4}
.uc-spa-navigation-notice .btn{white-space:nowrap}
.uc-spa-navigation-notice .icon-btn{min-width:30px;min-height:30px}
@media(max-width:480px){.uc-spa-navigation-notice{width:calc(100vw - 26px)}}

/* V543 premium permission and responsive Medium Elo dialog. */
/* V545: Badge SVG is a transparent glyph on every theme; no square backing or black halo. */
.premium-mark{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.22em;flex-shrink:0;margin-inline-start:.18em;inline-size:1.36em;block-size:1.36em;line-height:0;white-space:nowrap;background:transparent;border:0;box-shadow:none;filter:none}.premium-mark img{display:block;inline-size:100%;block-size:100%;object-fit:contain;aspect-ratio:1;max-width:none;max-height:none;background:transparent;border:0;box-shadow:none;filter:none}
.medium-elo-dialog{border:1px solid var(--line,rgba(80,80,80,.18));border-radius:18px;padding:0;max-width:min(430px,calc(100vw - 28px));width:100%;color:var(--text,inherit);background:var(--panel,#111b18);box-shadow:0 22px 80px rgba(0,0,0,.5)}
.medium-elo-dialog::backdrop{background:rgba(7,18,24,.55);backdrop-filter:blur(4px)}
.medium-elo-dialog-form{padding:clamp(18px,4vw,27px);min-width:0}.medium-elo-dialog-form .dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.medium-elo-dialog-form .dialog-head h2{margin:0;font-size:1.22rem}.medium-elo-dialog-form label{display:grid;gap:7px}.medium-elo-dialog-form input{width:100%;box-sizing:border-box;font-size:1.12rem}
.medium-elo-intro{margin:0}.medium-elo-hint{margin:0}.medium-elo-dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px}
.medium-elo-dialog-actions .btn{min-width:100px}@media(max-width:410px){.medium-elo-dialog-actions .btn{flex:1 1 0;min-width:0}}
.premium-permission-control{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.premium-permission-control input{inline-size:18px;block-size:18px;accent-color:var(--accent,#738f52)}

.medium-elo-dialog .medium-elo-dialog-form{margin:0;padding:clamp(18px,4vw,27px)}
.medium-elo-dialog .medium-elo-dialog-form input.search{max-width:none}


/* V544: compact lobby signals and responsive similarity review dialog. */
.medium-game-elo{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;vertical-align:middle;color:var(--text,inherit)}
.mirror-audit-flag{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border:1px solid rgba(205,157,71,.55);border-radius:8px;background:rgba(205,157,71,.14);color:#f4c56b;font-weight:700;white-space:nowrap;cursor:help}
.mirror-decision-dialog{width:min(480px,calc(100vw - 26px));max-width:calc(100vw - 26px);max-height:min(90dvh,660px);overflow:auto;box-sizing:border-box;padding:0;border-radius:18px;border:1px solid var(--line,rgba(190,190,190,.2));background:var(--panel,#111b18);color:var(--text,#f4f8f4);box-shadow:0 24px 85px rgba(0,0,0,.55)}
.mirror-decision-dialog::backdrop{background:rgba(5,14,18,.68);backdrop-filter:blur(5px)}
.mirror-decision-content{display:grid;gap:13px;padding:clamp(18px,4vw,28px)}
.mirror-decision-content h2{margin:0;font-size:clamp(1.2rem,3vw,1.42rem);line-height:1.3}
.mirror-decision-content p{margin:0;line-height:1.6}
.mirror-alert-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(215,151,58,.14);color:#ecb94f;font-size:1.6rem}
.mirror-decision-actions{display:flex;gap:9px;flex-wrap:wrap}
.mirror-decision-actions button{flex:1 1 160px;white-space:normal;min-height:45px}
@media(max-width:410px){.mirror-decision-actions{flex-direction:column}.mirror-decision-actions button{width:100%;flex:auto}}

/* V548: Admin market-style chess analytics, self-contained and responsive. */
.analytics-shell{max-width:1560px}.analytics-header{flex-wrap:wrap}.analytics-panel{min-width:0;overflow:hidden}
.analytics-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 16px}.analytics-game-label{font-size:1.05rem;font-weight:800;flex:1 1 220px;min-width:0;overflow-wrap:anywhere}.analytics-file-label{border:1px solid var(--border,#486058);border-radius:10px;padding:7px 11px;cursor:pointer;font-size:.82rem;display:inline-flex;align-items:center;gap:8px;background:transparent}.analytics-file-label input{width:133px;max-width:100%;font-size:.7rem}.analytics-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:.83rem;color:var(--muted,#a6bdb4);margin:5px 0 11px}.analytics-meta span{border:1px solid rgba(140,165,152,.20);border-radius:9px;padding:5px 8px}.analytics-legend{display:flex;gap:9px 15px;flex-wrap:wrap;margin:6px 0 22px;font-size:.77rem;color:var(--muted,#9ab4ab)}.an-legend-item{display:inline-flex;align-items:center;gap:6px}.an-legend-item i{width:11px;height:11px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px #6a8a7918}.an-legend-separator{border-left:1px solid #849e8855}.analytics-chart-header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:7px;margin:21px 0 9px}.analytics-chart-header h2{font-size:1.08rem;margin:0}.analytics-chart-header small{font-size:.76rem;color:var(--muted,#9bb8a5)}
.analytics-viewport{border:1px solid #779a863e;border-radius:13px;overflow-x:auto;overflow-y:hidden;max-width:100%;background:linear-gradient(180deg,#84b6a70c,#131e1e10);cursor:grab;scrollbar-width:thin;touch-action:pan-x pan-y;overscroll-behavior-x:contain}.analytics-viewport.an-dragging{cursor:grabbing;user-select:none}.analytics-viewport:focus-visible{outline:2px solid #89e7be}.analytics-viewport>div{width:max-content;min-width:100%}.analytics-svg{display:block;color:var(--text,#d8e8dc);max-width:none}.analytics-svg .analytics-point{cursor:pointer;outline:none}.analytics-svg .analytics-point:hover text,.analytics-svg .analytics-point.analytics-selected text{filter:drop-shadow(0 0 6px #9becc9)}.analytics-svg .analytics-point:focus-visible{outline:none;filter:drop-shadow(0 0 4px #8dcda9)}.analytics-svg .analytics-point.analytics-selected circle{stroke-width:3}.analytics-selection{padding:14px 16px;margin:17px 0;border:1px solid #779b8d40;border-radius:12px;background:#8bcaa70a;color:var(--text,#d9e4df);font-size:.88rem;line-height:1.6;overflow-wrap:anywhere}.analytics-footnote{line-height:1.55;margin-bottom:0}@media(max-width:680px){.analytics-toolbar .btn{padding:8px 10px}.analytics-toolbar{gap:7px}.analytics-file-label{flex:1 1 100%;justify-content:space-between}.analytics-viewport{border-radius:9px}.analytics-selection{padding:10px}.analytics-header .btn{margin-top:4px}}


/* V554 — Cleaner lobby card rhythm across desktop and mobile.
   Opponents stay on the first line, rating + game ID stay together,
   timing sits above the result badges, and Admin-only fields remain gated. */
.admin-game-row .uc-lobby-main{min-width:0;flex:1 1 0}
.admin-game-row .uc-lobby-name-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 11px;min-width:0;line-height:1.5}
.admin-game-row .uc-lobby-opponents{min-width:0;overflow-wrap:anywhere}
.admin-game-row .uc-lobby-rating-line{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;font-size:12px;line-height:1.45}
.admin-game-row .uc-lobby-rating-line .elo-inline{margin-left:0}
.admin-game-row .uc-lobby-game-id{flex:0 0 auto;white-space:nowrap;font-size:12px;font-weight:700;color:var(--muted,#a1b6ae)}
.admin-game-row .uc-lobby-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;margin-top:4px;line-height:1.5;font-size:12px}
.admin-game-row .uc-lobby-meta>.uc-lobby-meta-part{display:inline-flex;align-items:center;flex-wrap:wrap;max-width:100%;min-width:0;gap:5px;overflow-wrap:anywhere}
.admin-game-row .uc-lobby-meta>.uc-lobby-meta-part:not(:first-child)::before{content:'•';color:var(--muted,#96aba3);font-weight:500;margin-right:2px;flex:0 0 auto}
.admin-game-row .uc-lobby-meta .search-quality-pill small{display:inline;margin:0;line-height:inherit}
.admin-game-row .uc-lobby-timing-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;width:100%;min-width:0;margin-top:6px;font-size:12px;line-height:1.35}
.admin-game-row .uc-lobby-clock,.admin-game-row .uc-lobby-timing-line .medium-game-elo{display:inline-flex;align-items:center;max-width:100%;min-width:0;overflow-wrap:anywhere}
.admin-game-row .uc-lobby-timing-line .game-elapsed{display:inline-flex;align-items:center;min-height:22px;font-size:12px;font-weight:800;letter-spacing:.005em;color:var(--brand,#62e4b4)}
.admin-game-row .uc-lobby-outcome-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;width:100%;min-width:0;margin-top:9px;line-height:1.2}
.uc-lobby-result,.uc-lobby-moves{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:6px;min-height:28px;max-width:100%;padding:4px 9px;border:1px solid transparent;border-radius:8px;font-size:12px;font-weight:750;line-height:1.12;white-space:nowrap}
.uc-lobby-result strong,.uc-lobby-moves strong{font-weight:850;color:inherit}
.uc-lobby-result-icon{font-size:18px;font-weight:750;line-height:1;min-width:17px;text-align:center}
.uc-lobby-result--white_won{background:rgba(220,233,220,.09);border-color:rgba(224,239,222,.31);color:#f2f5ed}
.uc-lobby-result--black_won{background:rgba(53,170,141,.12);border-color:rgba(63,205,162,.35);color:#a1f6d4}
.uc-lobby-result--draw,.uc-lobby-result--paused{background:rgba(225,183,86,.10);border-color:rgba(225,183,86,.35);color:#f4d89d}
.uc-lobby-result--active{background:rgba(71,191,136,.09);border-color:rgba(76,192,145,.23);color:#80e8b6}
.uc-lobby-result--active .uc-lobby-result-icon{font-size:12px}
.uc-lobby-moves{background:rgba(161,183,173,.075);border-color:rgba(161,183,173,.24);color:#d4e1dc}
.uc-lobby-moves-icon{font-size:17px;line-height:1;color:#a7c6bb}
.uc-lobby-moves span:last-child{color:#acbdb7;font-weight:650}
.admin-game-row .uc-lobby-date{font-size:11px;line-height:1.35;color:var(--muted,#9cb4ab);min-width:0;overflow-wrap:anywhere}
.admin-game-row .uc-lobby-outcome-line>.uc-lobby-takeback{display:inline-flex;align-items:center;min-height:28px;max-width:100%;flex:0 0 auto}
@media(max-width:560px){
 .admin-game-row .uc-lobby-name-line{gap:2px 8px}
 .admin-game-row .uc-lobby-opponents{flex-basis:100%}
 .admin-game-row .uc-lobby-rating-line{gap:4px 6px}
 .admin-game-row .uc-lobby-meta{gap:4px 6px}
 .admin-game-row .uc-lobby-meta>.uc-lobby-meta-part:not(:first-child)::before{margin-right:0}
 .admin-game-row .uc-lobby-timing-line{gap:6px 8px}
 .uc-lobby-result,.uc-lobby-moves{font-size:11.5px;min-height:27px;padding:4px 8px}
}

/* V555: lightweight, non-blocking lobby recovery when a data request times out. */
.uc-lobby-recovery{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px 14px;min-width:0;margin:8px 0 13px;padding:10px 12px;border:1px solid rgba(231,198,106,.32);border-radius:11px;background:rgba(231,198,106,.055);color:#f0deab;font-size:12px;line-height:1.5}
.uc-lobby-recovery-message{flex:1 1 210px;overflow-wrap:anywhere}
.uc-lobby-recovery .btn{padding:6px 10px;min-height:32px;font-size:12px;white-space:nowrap;border-color:rgba(231,198,106,.27);color:#f0deab}
@media(max-width:430px){.uc-lobby-recovery{padding:9px 10px}.uc-lobby-recovery .btn{flex:0 0 auto}}

/* V577: a skin changes the artwork and the SURFACE board only. The underground
   board retains the exact same inherited color variables and classic color-mix
   as every other skin (including administrator-selected board colors). */
.uc-skin-picker{display:inline-flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--text);margin:5px 0}
.uc-skin-picker .search{max-width:200px;width:auto;padding:9px 11px}
.game-top{flex-wrap:wrap}
.uc-piece-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;pointer-events:none}
.uc-piece-slot>.piece-svg{flex-shrink:0;object-fit:contain}
.uc-piece-vector{display:none!important}
body[data-chess-skin="vector_v2"] .uc-piece-vector{display:block!important}
body[data-chess-skin="vector_v2"] .uc-piece-legacy{display:none!important}
/* Do NOT set --sq1/--sq2 on body: underground must inherit the site's real
   colors rather than an entirely different skin-local palette. */
body[data-chess-skin="vector_v2"] #board-surface .square.light{background:#EBECD0}
body[data-chess-skin="vector_v2"] #board-surface .square.dark{background:#779556}
body[data-chess-skin="vector_v2"] .square .coord{font-size:clamp(9px,1.05vw,12px);opacity:.88;font-weight:900;z-index:9}
body[data-chess-skin="vector_v2"] #board-surface .square.light .coord{color:#4a6440}
body[data-chess-skin="vector_v2"] #board-surface .square.dark .coord{color:#ecf0df}
/* Opposite-layer stamps MUST have the same circle geometry, center, ring,
   opacity and nominal artwork bounds as Classic. Crop inside the ring so no
   supplied SVG with variable intrinsic whitespace can overflow the circle. */
body[data-chess-skin="vector_v2"] .opposite-piece-stamp .uc-piece-slot{
 position:absolute;inset:0;width:100%;height:100%;opacity:1;
 clip-path:circle(39% at 50% 50%);
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner .uc-piece-slot{clip-path:circle(42% at 50% 50%)}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector{
 width:84%;height:84%;max-width:84%;max-height:84%;object-fit:contain;
 opacity:.84;transform:scaleY(.94);filter:contrast(1.7) drop-shadow(0 0 1px rgba(0,0,0,.98))!important;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector{
 width:74%;height:74%;max-width:74%;max-height:74%;object-fit:contain;
 opacity:.86;transform:scaleY(.94);filter:contrast(1.7) drop-shadow(0 0 1px rgba(0,0,0,.98))!important;
}
/* V580: SVG pawns have a lower painted baseline than other pieces, while the
   V579 shadow pawn was made needlessly small. On shadow rings, enlarge the
   artwork only INSIDE the unchanged Classic stamp/clip and nudge the actual
   drawn ink up so both head and base have equal clearance. */
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/wP.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/bP.svg"]{
 width:84%;height:84%;max-width:84%;max-height:84%;transform:translateY(-1.2%)!important;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/wP.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/bP.svg"]{
 width:78%;height:78%;max-width:78%;max-height:78%;transform:translateY(-1.2%)!important;
}
/* Restore the legibility of supplied coloured SVGs at the same ring size as
   Classic. Its imprints were designed with stronger outlines; the supplied SVG
   images need contrast and a subtle dark silhouette to survive stamp opacity. */

@media(max-width:600px){.uc-skin-picker{width:100%;justify-content:flex-start}.uc-skin-picker .search{max-width:195px}}

/* V572/V576: playable Vector V2 pieces use the larger artwork footprint.
   These rules intentionally never target translucent opposite-layer stamps. */
body[data-chess-skin="vector_v2"] .square>.uc-piece-slot>.uc-piece-vector,
body[data-chess-skin="vector_v2"] .square>.uc-piece-slot>img.piece-svg.uc-piece-vector{
 width:94%;height:94%;max-width:94%;max-height:94%;object-fit:contain;
}

/* V574: skin selection is below the pair of boards on desktop and immediately
   beneath View Rules on mobile; it never participates in the board grid. */
.uc-boards-column{min-width:0;display:flex;flex-direction:column;gap:12px}
.uc-boards-column>.boards-area{width:100%;flex:0 0 auto}
.uc-skin-desktop-host{display:flex;align-items:center;min-height:40px;padding:0 6px}
.uc-skin-desktop-host:empty{display:none}
.uc-skin-mobile-host{display:none}
@media(max-width:700px){
 .uc-skin-desktop-host{display:none}
 .uc-skin-mobile-host{display:flex;width:100%;margin-top:12px}
 .uc-skin-mobile-host .uc-skin-picker{margin:0;width:100%}
 .uc-skin-mobile-host .uc-skin-picker select{max-width:220px}
}


/* V576: enlarge only the live Vector V2 pawns slightly (white and black).
   Do not resize the other pieces or opposite-layer translucent imprints. */
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/wP.svg"],
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/bP.svg"] {
  width:99%; height:99%; max-width:99%; max-height:99%; object-fit:contain;
  /* Match the pawns' visible base to the other 94%-sized live pieces:
     their painted ink ends at 92.5% versus ~91% for king/knight/rook.
     At 99% live image size this requires roughly 3.6% upward travel. */
  transform:translateY(-3.6%);
}

/* V578 — Mobile rules/skin order: two complete rows, never side-by-side.
   The parent had display:flex in row direction even when its button was 100%. */
@media (max-width:700px){
  .game-shell .game-bottom-tools{
    display:flex;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:12px;
    min-width:0;width:100%;
  }
  .game-shell .game-bottom-tools > #rulesToggleBtn{
    display:flex;align-self:stretch;justify-content:center;
    width:100%;max-width:none;min-width:0;margin:0;
  }
  .game-shell .game-bottom-tools > #ucSkinMobileHost{
    display:block;width:100%;min-width:0;margin:0;
  }
  .game-shell #ucSkinMobileHost > .uc-skin-picker{
    display:grid;grid-template-columns:minmax(0,1fr);
    align-items:stretch;justify-items:stretch;gap:7px;
    margin:0;width:100%;min-width:0;
  }
  .game-shell #ucSkinMobileHost .uc-skin-picker > select.search{
    display:block;width:100%;max-width:none;min-width:0;
    height:48px;box-sizing:border-box;
  }
}
/* V578 — Stable spectator/player king alignment for every theme and language.
   A piece on the board fills its square; a player-list icon must NOT. */
.game-sidebar .player-vs{display:grid;gap:12px}
.game-sidebar .player-vs .vs-row{
  display:grid;grid-template-columns:minmax(0,1fr) max-content;
  gap:12px;align-items:center;min-width:0;
}
.game-sidebar .player-vs .vs-player{
  display:grid;grid-template-columns:34px minmax(0,1fr);
  gap:10px;align-items:center;min-width:0;
}
.game-sidebar .player-vs .vs-player-king{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;min-width:34px;min-height:34px;
  line-height:1;overflow:visible;
}
.game-sidebar .player-vs .vs-player-king > .uc-piece-slot{
  display:flex;align-items:center;justify-content:center;
  flex:none;width:30px;height:30px;min-width:30px;min-height:30px;
}
.game-sidebar .player-vs .vs-player-king .mini-piece-svg{
  width:28px;height:28px;max-width:28px;max-height:28px;
  display:block;vertical-align:middle;object-fit:contain;
}
.game-sidebar .player-vs .vs-player-identity{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;min-width:0;line-height:1.25;
}
.game-sidebar .player-vs .vs-player-identity b{
  display:block;max-width:100%;font-weight:800;overflow-wrap:anywhere;
}
.game-sidebar .player-vs .vs-player-identity .game-elo{
  display:block;margin:0;font-size:12px;line-height:1.3;
}
.game-sidebar .player-vs .vs-row > .badge{
  align-self:center;justify-self:end;white-space:nowrap;
}

/* V581 — Rated matchmaking is the lobby's primary action.
   Keep the familiar green visual language; only enhance this CTA. */
.rated-matchmaking{
  border-color:rgba(104,224,179,.34);
  background:linear-gradient(115deg,rgba(104,224,179,.10),rgba(104,224,179,.025));
  box-shadow:inset 0 1px 0 rgba(185,255,223,.045);
}
.rated-matchmaking>div>b{color:#caffea;font-size:15px;letter-spacing:.005em}
#matchmakeBtn{
  flex:0 0 auto;
  min-width:158px;min-height:49px;
  padding:12px 21px;
  border:1px solid #a4f6d7;
  border-radius:12px;
  background:linear-gradient(135deg,#baffdf 0%,#75ebbf 48%,#38bf92 100%);
  color:#08291d;
  font-size:15px;font-weight:900;letter-spacing:.015em;
  box-shadow:0 0 0 1px rgba(166,255,215,.12),0 9px 26px rgba(52,209,150,.26);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  white-space:nowrap;
}
#matchmakeBtn::before{content:"♟";font-size:21px;font-weight:400;line-height:1}
#matchmakeBtn:not(:disabled):hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 0 0 1px rgba(175,255,221,.3),0 12px 30px rgba(52,209,150,.42);
}
#matchmakeBtn:not(:disabled):active{transform:translateY(0);filter:brightness(.98)}
#matchmakeBtn:focus-visible{outline:3px solid #ffe5a1;outline-offset:3px}
#matchmakeBtn:disabled{
  background:#1a322b;color:#aac5b9;
  border-color:#335d4e;
  box-shadow:none;filter:none;transform:none;
  opacity:.84;cursor:not-allowed;
}
#matchmakeBtn.uc-control-loading::before,
#matchmakeBtn.is-loading::before{content:none}
@media(max-width:700px){
  .rated-matchmaking{flex-direction:column;align-items:stretch;gap:12px;padding:15px}
  #matchmakeBtn{width:100%;min-height:52px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){#matchmakeBtn{transition:none}}

/* V582: shadow imprints are only an outlined circle. The earlier opaque
   ::before fill and clipped piece-slot were masking the pawn bases. */
body[data-chess-skin="vector_v2"] .opposite-piece-stamp::before,
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center::before {
  background:transparent!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;box-shadow:none!important;
  border:1px solid rgba(104,224,179,.42);box-sizing:border-box;
  z-index:0;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.from-underground::before {border-color:rgba(174,163,245,.42)}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp .uc-piece-slot,
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner .uc-piece-slot{
  clip-path:none!important;-webkit-clip-path:none!important;z-index:2;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp .opposite-stamp-ring{z-index:1}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp .opposite-imprint-piece{position:relative;z-index:2}


/* V583 — adjust the ink height of the V2 live pawn without moving its aligned
   bottom baseline. V580 already corrected the pawn's bottom position; scaling
   from the BOTTOM instead of the center preserves that correction. */
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/wP.svg"],
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/bP.svg"] {
  transform-origin:50% 100%;
  transform:translateY(-3.6%) scaleY(.92);
}
/* Align the dashed inner circular guide by center, rather than by inherited
   offsets; this is independent of SVG transforms and device aspect ratios. */
body[data-chess-skin="vector_v2"] .opposite-piece-stamp .opposite-stamp-ring,
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center .opposite-stamp-ring {
  position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  width:78%;height:78%;inset:auto;
  transform:translate(-50%,-50%);
  box-sizing:border-box;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner .opposite-stamp-ring {
  width:84%;height:84%;
}

/* V584: Circumcircle calibration for the two-layer opposite-piece imprints.
   The topmost ink point and both widest points of the painted base define a
   triangle. Align its circumcenter to the square center (not the SVG viewBox
   center). Preserve the actual SVG art and original two-circle cue.
   All three circles (computed art circumcircle, dashed guide, solid ring)
   share the square center; both CSS rings are sized around that same center. */
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center::before,
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner::before {
  position:absolute!important;inset:auto!important;top:50%!important;left:50%!important;
  right:auto!important;bottom:auto!important;width:90%!important;height:90%!important;
  transform:translate(-50%,-50%)!important;border-radius:50%;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner::before {width:100%!important;height:100%!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp .opposite-stamp-ring {
  position:absolute!important;inset:auto!important;top:50%!important;left:50%!important;
  right:auto!important;bottom:auto!important;width:78%!important;height:78%!important;
  transform:translate(-50%,-50%)!important;border-radius:50%;box-sizing:border-box;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner .opposite-stamp-ring {width:84%!important;height:84%!important}
/* Image-box offset is expressed as a percentage of the SVG image itself.
   The computed circumradius fills ~98% of the dashed guide radius. */
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.opposite-imprint-piece.uc-piece-vector {
  flex:none!important;object-fit:fill!important;transform-origin:center center!important;
  width:var(--uc-geo-size,84%)!important;height:var(--uc-geo-size,84%)!important;
  max-width:none!important;max-height:none!important;
  transform:translate(var(--uc-geo-x,0%),var(--uc-geo-y,0%))!important;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector {
  width:var(--uc-geo-corner-size,86%)!important;height:var(--uc-geo-corner-size,86%)!important;
}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/wP.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/bP.svg"]{--uc-geo-size:82.929%;--uc-geo-corner-size:89.391%;--uc-geo-x:-0.25%;--uc-geo-y:-6.5%}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/wP.svg"]{width:82.929%!important;height:82.929%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/wP.svg"]{width:89.391%!important;height:89.391%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/bP.svg"]{width:82.929%!important;height:82.929%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/bP.svg"]{width:89.391%!important;height:89.391%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/wN.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/bN.svg"]{--uc-geo-size:84.848%;--uc-geo-corner-size:91.46%;--uc-geo-x:-3.25%;--uc-geo-y:-3.725%}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/wN.svg"]{width:84.848%!important;height:84.848%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/wN.svg"]{width:91.46%!important;height:91.46%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/bN.svg"]{width:84.848%!important;height:84.848%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/bN.svg"]{width:91.46%!important;height:91.46%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/wB.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/bB.svg"]{--uc-geo-size:84.989%;--uc-geo-corner-size:91.611%;--uc-geo-x:0.5%;--uc-geo-y:-3.8%}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/wB.svg"]{width:84.989%!important;height:84.989%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/wB.svg"]{width:91.611%!important;height:91.611%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/bB.svg"]{width:84.989%!important;height:84.989%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/bB.svg"]{width:91.611%!important;height:91.611%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/wR.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/bR.svg"]{--uc-geo-size:91.721%;--uc-geo-corner-size:98.868%;--uc-geo-x:-0.25%;--uc-geo-y:-8.225%}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/wR.svg"]{width:91.721%!important;height:91.721%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/wR.svg"]{width:98.868%!important;height:98.868%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/bR.svg"]{width:91.721%!important;height:91.721%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/bR.svg"]{width:98.868%!important;height:98.868%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/wQ.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/bQ.svg"]{--uc-geo-size:85.985%;--uc-geo-corner-size:92.686%;--uc-geo-x:-0.5%;--uc-geo-y:-4.5%}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/wQ.svg"]{width:85.985%!important;height:85.985%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/wQ.svg"]{width:92.686%!important;height:92.686%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/bQ.svg"]{width:85.985%!important;height:85.985%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/bQ.svg"]{width:92.686%!important;height:92.686%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/wK.svg"],
body[data-chess-skin="vector_v2"] .opposite-piece-stamp img.uc-piece-vector[src$="/bK.svg"]{--uc-geo-size:84.291%;--uc-geo-corner-size:90.859%;--uc-geo-x:-0.375%;--uc-geo-y:-3.425%}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/wK.svg"]{width:84.291%!important;height:84.291%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/wK.svg"]{width:90.859%!important;height:90.859%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-vector[src$="/bK.svg"]{width:84.291%!important;height:84.291%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}
body[data-chess-skin="vector_v2"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-vector[src$="/bK.svg"]{width:90.859%!important;height:90.859%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}

/* V585: pixel-level optical baseline correction for the live Default skin.
   Shift the painted pieces up 1.5px at every viewport size. Do not change
   the shadow imprints, historical skins, SVG artwork or piece dimensions. */
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector {
  transform:translateY(-1.5px);
}
/* Keep V583 pawn height calibration and V580 base calibration together. */
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/wP.svg"],
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/bP.svg"] {
  transform-origin:50% 100%;
  transform:translateY(calc(-3.6% - 1.5px)) scaleY(.92);
}

/* V586: use one proportional live-pawn footprint on desktop and Safari iPhone.
   Old 99% image plus scaling made the pawn visually rival full-sized pieces.
   Pawn remains anchored optically to the same baseline; opposite-layer marks unchanged. */
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/wP.svg"],
body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/bP.svg"] {
  width:90%!important;height:90%!important;max-width:90%!important;max-height:90%!important;
  object-fit:contain;transform-origin:50% 100%;
  transform:translateY(-1px) scaleY(.92)!important;
}

/* V587: keep V586 compact pawn only on narrow phone screens.
   Restore V585 desktop/tablet pawn size and baseline at >=768px. */
@media (min-width:768px) {
  body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/wP.svg"],
  body[data-chess-skin="vector_v2"] .square > .uc-piece-slot > img.uc-piece-vector[src$="/bP.svg"] {
    width:99%!important;
    height:99%!important;
    max-width:99%!important;
    max-height:99%!important;
    object-fit:contain;
    transform-origin:50% 100%;
    transform:translateY(calc(-3.6% - 1.5px)) scaleY(.92)!important;
  }
}

/* V589: consistent, restrained ghost rings on BOTH boards.
   The V588 rule targeted only #board-surface, making the two layers inconsistent.
   Both the solid and dashed circles are decorative outlines, with transparent
   centers. Use the same selectors for both projection directions and on both
   light/dark squares. Dashed guide is above the ghost SVG so never disappears. */
body[data-chess-skin="vector_v2"] #board-surface .opposite-piece-stamp::before,
body[data-chess-skin="vector_v2"] #board-underground .opposite-piece-stamp::before {
  background:transparent!important;
  border:1.5px solid rgba(114,163,128,.76)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  z-index:0!important;
}
/* Light squares: a touch of grey-green (not charcoal), with readable contrast.
   Dark squares: pale sage outline that stays distinct from the square. */
body[data-chess-skin="vector_v2"] #board-surface .square.light .opposite-piece-stamp::before,
body[data-chess-skin="vector_v2"] #board-underground .square.light .opposite-piece-stamp::before {
  border-color:rgba(105,151,121,.78)!important;
}
body[data-chess-skin="vector_v2"] #board-surface .square.dark .opposite-piece-stamp::before,
body[data-chess-skin="vector_v2"] #board-underground .square.dark .opposite-piece-stamp::before {
  border-color:rgba(164,207,170,.67)!important;
}
body[data-chess-skin="vector_v2"] #board-surface .opposite-piece-stamp .opposite-stamp-ring,
body[data-chess-skin="vector_v2"] #board-underground .opposite-piece-stamp .opposite-stamp-ring {
  display:block!important;
  border:1px dashed rgba(112,163,126,.78)!important;
  opacity:.82!important;
  background:transparent!important;
  z-index:4!important;
  pointer-events:none;
}
body[data-chess-skin="vector_v2"] #board-surface .square.dark .opposite-piece-stamp .opposite-stamp-ring,
body[data-chess-skin="vector_v2"] #board-underground .square.dark .opposite-piece-stamp .opposite-stamp-ring {
  border-color:rgba(182,220,183,.72)!important;
}
/* Piece remains between outer and dashed guides; both circles retain the
   established V584 geometry, including corner stamps. */
body[data-chess-skin="vector_v2"] .opposite-piece-stamp .uc-piece-slot{z-index:2!important}

/* V592: hide inactive time control even when input/select has display rules elsewhere. */
#inviteMinutes[hidden], #inviteRatedMinutes[hidden]{display:none!important}

/* V594: enhanced select creates a sibling shell; hide BOTH the native select
   and shell when Practice is selected. Keep the time input in the same slot. */
.match-options #inviteRatedMinutes[hidden] + .custom-select-shell,
.match-options #inviteRatedMinutes + .custom-select-shell[hidden] {display:none!important;}
.match-options #inviteMinutes[hidden] {display:none!important;}

/* V595: stable matchmaking CTA footprint and color across states/translations. */
#matchmakeBtn{
  box-sizing:border-box;
  width:198px;min-width:198px;max-width:198px;
  flex:0 0 198px;
  justify-content:center;align-items:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
#matchmakeBtn:disabled,
#matchmakeBtn[data-match-searching="1"]{
  background:linear-gradient(135deg,#baffdf 0%,#75ebbf 48%,#38bf92 100%);
  color:#08291d;
  border-color:#a4f6d7;
  box-shadow:0 0 0 1px rgba(166,255,215,.12),0 9px 26px rgba(52,209,150,.18);
  filter:none;opacity:1;
  transform:none;
}
#matchmakeBtn.uc-control-loading::before{content:none;}
@media(max-width:700px){
 #matchmakeBtn{width:100%;min-width:0;max-width:none;flex:0 0 auto;}
}

/* V615: desktop game scroll is staged. The document stops when Chess skin is
   visible; then the right-hand match information has its OWN scroll viewport.
   Mobile/tablet retain their original single-page scrolling and grids. */
@media (min-width:1101px){
  .game-shell .game-layout{align-items:start}
  .game-shell .uc-boards-column{
    position:sticky;top:var(--uc-game-sticky-top,82px);align-self:start;
    min-width:0;z-index:1;
  }
  .game-shell .game-sidebar{
    position:sticky!important;top:var(--uc-game-sticky-top,82px)!important;
    align-self:start!important;height:auto!important;
    max-height:calc(100vh - var(--uc-game-sticky-top,82px) - 12px)!important;
    max-height:calc(100dvh - var(--uc-game-sticky-top,82px) - 12px)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:contain;scrollbar-gutter:stable;
    padding-right:6px;min-height:0;
  }
  .game-shell .game-sidebar::-webkit-scrollbar{width:8px}
  .game-shell .game-sidebar::-webkit-scrollbar-track{background:transparent}
  .game-shell .game-sidebar::-webkit-scrollbar-thumb{
    background:#29483f;border-radius:999px;
  }
}
/* On short desktop windows scale the stage as a pair, instead of letting the
   bottom of either board disappear when the spectator inspects the right rail. */
@media (min-width:1101px) and (max-height:620px){
  .game-shell #boardsStage{
    max-width:min(100%, max(610px, calc(2 * (100dvh - var(--uc-game-sticky-top,82px) - 165px) + 60px)));
    margin-inline:auto;
  }
}

/* Compact final-phase card: use all available width instead of a narrow text column. */
.rule-density-grid > article.rule-span-12 > p{width:100%;max-width:none!important;inline-size:100%;max-inline-size:none!important;white-space:normal;text-wrap:wrap;overflow-wrap:break-word}

/* V627: archive access is read-only; API separately enforces data minimization. */
.game-shell.uc-archive-final-only .game-top-actions,
.game-shell.uc-archive-final-only .replay-panel,
.game-shell.uc-archive-final-only .captured-panel,
.game-shell.uc-archive-final-only .moves-panel,
.game-shell.uc-archive-final-only .clock-grid,
.game-shell.uc-archive-final-only #turnInfo,
.game-shell.uc-archive-final-only #tunnelStats,
.game-shell.uc-archive-final-only .game-bottom-tools,
.game-shell.uc-archive-final-only #gameRulesPanel { display:none!important; }
.game-shell.uc-archive-final-only .chess-board { pointer-events:none!important; }
.game-shell.uc-archive-final-only .chess-board * { pointer-events:none!important; }
.uc-archive-message{padding:12px 14px;border:1px solid var(--border,#c8c8c8);border-radius:10px;margin:12px 0;font-size:.92rem;}

/* V630: once the history reaches either end, release wheel chaining to the
   sidebar/page. JS consumes wheel events only while history can scroll. */
.game-shell .moves-panel .move-log{overscroll-behavior-y:auto!important}

/* V647: independent White opening controls in Admin. */
.uc-opening-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.uc-opening-profile{display:flex;flex-direction:column;gap:12px}
.uc-opening-control{display:grid;gap:6px}
.uc-opening-toggle{display:flex;align-items:center;gap:9px;font-weight:600}
.uc-opening-enabled{width:17px;height:17px;accent-color:var(--primary,#52795c)}
.uc-opening-move{max-width:100%;min-width:0}

/* V673 admin native engine assignments */
.engine-slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:14px 0}
.engine-slot-card{border:1px solid var(--border,#8b9a8b55);border-radius:14px;padding:14px;min-width:0}
.engine-slot-card select{width:100%;max-width:100%;margin:9px 0}
.engine-build-label{font-size:.84rem;overflow-wrap:anywhere;margin:.4rem 0}
.engine-build-label code{font-size:.8rem;overflow-wrap:anywhere}
.engine-binary-list{margin:12px 0;max-height:310px;overflow-y:auto;border-top:1px solid #8885}
.engine-binary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #8884}
.engine-binary-ident{min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
.engine-binary-ident small{opacity:.75}

/* V692: error diagnostics are deliberately admin desktop only; no empty action on clean games. */
.admin-game-error-export-placeholder{display:none}
.admin-game-actions .admin-export-errors{display:none}
@media(min-width:1024px){.admin-game-actions .admin-export-errors{display:inline-flex}}

/* V693: Admin's private Demo visitor audit uses one dedicated line for the
   IP + country pair, separate from mode / Search badges. Preserve a single
   row on mobile even for IPv6; allow contained horizontal scroll instead of
   overflowing the card or wrapping the two labels onto separate rows. */
.admin-game-row .uc-lobby-visitor-line{display:block;width:100%;max-width:100%;min-width:0;margin-top:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;font-size:12px;line-height:1.5;color:var(--muted,#a1b6ae)}
.admin-game-row .uc-lobby-visitor-pair{display:inline-block;white-space:nowrap;max-width:none;padding-bottom:1px}
.admin-game-row .uc-lobby-visitor-pair code{font-size:inherit;color:var(--text,#d7e9e0)}
.admin-game-row .uc-lobby-visitor-pair b{color:var(--text,#d7e9e0)}
/* Keep the timezone-source note inline too; global <small> styles must not force a second line. */
.admin-game-row .uc-lobby-visitor-pair{display:inline-flex;align-items:baseline;flex-wrap:nowrap;gap:4px}
.admin-game-row .uc-lobby-visitor-pair small{display:inline;white-space:nowrap;font-size:11px;line-height:inherit}
.admin-game-row .uc-lobby-main{max-width:100%}

/* V695: shared chess-like pointer drag, without changing the board grid. */
/* V698: preserve native two-finger pinch even if the first touch is on a piece. */
.chess-board .square.uc-draggable{cursor:grab;touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
.chess-board .square.uc-draggable:active{cursor:grabbing}
.chess-board .square.uc-draggable .uc-piece-slot,.chess-board .square.uc-draggable .piece-svg{touch-action:pinch-zoom;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
html.uc-piece-dragging,html.uc-piece-dragging .chess-board{cursor:grabbing!important}
.chess-board .square.uc-drag-origin>.uc-piece-slot{visibility:hidden}
.chess-board .square.uc-drag-origin.uc-drag-awaiting>.uc-piece-slot{visibility:hidden}
.chess-board .square.uc-drag-target-pending>.uc-piece-slot{visibility:hidden}
.chess-board .square.uc-drop-valid{box-shadow:inset 0 0 0 4px rgba(104,224,179,.88)!important}
.chess-board .square.uc-drop-invalid{box-shadow:inset 0 0 0 3px rgba(255,122,122,.48)!important}
/* V697: the floating piece is a real-sized transparent .square so the original
   Vector V2/mobile pawn geometry applies unchanged. Fixed layout-viewport
   coordinates follow touch at pinch zoom without extending scroll height. */
.uc-piece-drag-ghost{
 position:fixed!important;left:0;top:0;z-index:700;pointer-events:none!important;
 display:grid;place-items:center;overflow:visible;border:0!important;
 background:transparent!important;box-shadow:none!important;outline:0!important;
 opacity:1!important;filter:none!important;transform:none!important;
 transition:none!important;animation:none!important;will-change:auto!important;
}
.uc-piece-drag-ghost>.uc-piece-slot{width:100%;height:100%;pointer-events:none}
.uc-piece-drag-ghost .uc-piece-legacy{display:block}
body[data-chess-skin="vector_v2"] .uc-piece-drag-ghost .uc-piece-vector{display:block!important}
body[data-chess-skin="vector_v2"] .uc-piece-drag-ghost .uc-piece-legacy{display:none!important}
@media(prefers-reduced-motion:reduce){.uc-piece-drag-ghost{transition:none!important}}

/* V704 - engine hints are advisory square overlays, distinct from legal move dots. */
.uc-hint-admin-panel .uc-hint-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:14px;margin:16px 0}
.uc-hint-settings-grid label{display:flex;flex-direction:column;gap:7px;color:var(--text);font-weight:650}
.uc-hint-settings-grid .search{max-width:none}
.uc-hint-checkbox{display:flex;gap:8px;align-items:center;min-height:43px;background:#0e1916;border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-weight:500}
.uc-game-hint-btn[hidden]{display:none!important}
.uc-game-hint-btn{position:relative;gap:7px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.uc-hint-spinner{position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:none;box-sizing:border-box;pointer-events:none}
.uc-game-hint-btn[aria-busy="true"] .uc-hint-spinner{display:block;animation:ucHintSpin .7s linear infinite}
.uc-game-hint-btn[aria-busy="true"] .uc-hint-label{visibility:hidden}
.uc-game-hint-btn[aria-busy="true"]{opacity:.78;cursor:progress}
/* Independent engine failure statuses: orange = one failed, red = no provider succeeded. */
.uc-game-hint-btn.uc-hint-partial{outline:3px solid #fb923c;outline-offset:1px;box-shadow:0 0 0 2px rgba(251,146,60,.28)}
.uc-game-hint-btn.uc-hint-failed{outline:3px solid #ef4444;outline-offset:1px;box-shadow:0 0 0 2px rgba(239,68,68,.35)}
@keyframes ucHintSpin{to{transform:rotate(360deg)}}
.square.uc-hint-from-green,.square.uc-hint-to-green{--uc-hint-color:#22c55e}
.square.uc-hint-from-blue,.square.uc-hint-to-blue{--uc-hint-color:#2395f5}
.square.uc-hint-from-purple,.square.uc-hint-to-purple{--uc-hint-color:#a855f7}
.square:is(.uc-hint-from-green,.uc-hint-from-blue,.uc-hint-from-purple){box-shadow:inset 0 0 0 3px var(--uc-hint-color);z-index:1}
.square:is(.uc-hint-to-green,.uc-hint-to-blue,.uc-hint-to-purple){box-shadow:inset 0 0 0 4px var(--uc-hint-color);z-index:1}
.square .uc-hint-target-dot{position:absolute;z-index:8;pointer-events:none;width:27%;height:27%;border-radius:100%;background:var(--uc-hint-color);opacity:.88;box-shadow:0 0 0 4px rgba(0,0,0,.12),0 0 14px var(--uc-hint-color)}
.square .uc-hint-from-marker{position:absolute;z-index:8;pointer-events:none;inset:4px;border:2px solid var(--uc-hint-color);border-radius:5px}
@media(max-width:700px){.uc-hint-admin-panel .uc-hint-settings-grid{grid-template-columns:1fr}}

/* V709: shortcut recorder is bounded; cannot push admin controls sideways on a label change. */
.uc-hint-shortcut-config{border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0 16px;display:grid;gap:11px}
.uc-hint-shortcut-heading{display:flex;flex-direction:column;gap:5px}
.uc-hint-shortcut-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.uc-hint-shortcut-value{display:inline-flex;min-width:122px;min-height:38px;align-items:center;justify-content:center;padding:7px 12px;border-radius:9px;border:1px solid var(--line);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.uc-hint-shortcut-controls button[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:2px}

/* V718 wood-classic: exact mirror of Default piece and opposite-layer geometry. */
body[data-chess-skin="wood_classic"] .uc-piece-wood{display:block!important}
body[data-chess-skin="wood_classic"] .uc-piece-legacy{display:none!important}
body[data-chess-skin="wood_classic"] #board-surface .square.light{background:#EBECD0}
body[data-chess-skin="wood_classic"] #board-surface .square.dark{background:#779556}
body[data-chess-skin="wood_classic"] .square .coord{font-size:clamp(9px,1.05vw,12px);opacity:.88;font-weight:900;z-index:9}
body[data-chess-skin="wood_classic"] #board-surface .square.light .coord{color:#4a6440}
body[data-chess-skin="wood_classic"] #board-surface .square.dark .coord{color:#ecf0df}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp .uc-piece-slot{
 position:absolute;inset:0;width:100%;height:100%;opacity:1;
 clip-path:circle(39% at 50% 50%);
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner .uc-piece-slot{clip-path:circle(42% at 50% 50%)}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood{
 width:84%;height:84%;max-width:84%;max-height:84%;object-fit:contain;
 opacity:.84;transform:scaleY(.94);filter:contrast(1.7) drop-shadow(0 0 1px rgba(0,0,0,.98))!important;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood{
 width:74%;height:74%;max-width:74%;max-height:74%;object-fit:contain;
 opacity:.86;transform:scaleY(.94);filter:contrast(1.7) drop-shadow(0 0 1px rgba(0,0,0,.98))!important;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/wP.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/bP.png"]{
 width:84%;height:84%;max-width:84%;max-height:84%;transform:translateY(-1.2%)!important;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/wP.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/bP.png"]{
 width:78%;height:78%;max-width:78%;max-height:78%;transform:translateY(-1.2%)!important;
}
body[data-chess-skin="wood_classic"] .square>.uc-piece-slot>.uc-piece-wood,
body[data-chess-skin="wood_classic"] .square>.uc-piece-slot>img.piece-svg.uc-piece-wood{
 width:94%;height:94%;max-width:94%;max-height:94%;object-fit:contain;
}
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/wP.png"],
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/bP.png"] {
  width:99%; height:99%; max-width:99%; max-height:99%; object-fit:contain;
  
  transform:translateY(-3.6%);
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp::before,
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center::before {
  background:transparent!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;box-shadow:none!important;
  border:1px solid rgba(104,224,179,.42);box-sizing:border-box;
  z-index:0;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.from-underground::before {border-color:rgba(174,163,245,.42)}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp .uc-piece-slot,
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner .uc-piece-slot{
  clip-path:none!important;-webkit-clip-path:none!important;z-index:2;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp .opposite-stamp-ring{z-index:1}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp .opposite-imprint-piece{position:relative;z-index:2}
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/wP.png"],
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/bP.png"] {
  transform-origin:50% 100%;
  transform:translateY(-3.6%) scaleY(.92);
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp .opposite-stamp-ring,
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center .opposite-stamp-ring {
  position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  width:78%;height:78%;inset:auto;
  transform:translate(-50%,-50%);
  box-sizing:border-box;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner .opposite-stamp-ring {
  width:84%;height:84%;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center::before,
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner::before {
  position:absolute!important;inset:auto!important;top:50%!important;left:50%!important;
  right:auto!important;bottom:auto!important;width:90%!important;height:90%!important;
  transform:translate(-50%,-50%)!important;border-radius:50%;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner::before {width:100%!important;height:100%!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp .opposite-stamp-ring {
  position:absolute!important;inset:auto!important;top:50%!important;left:50%!important;
  right:auto!important;bottom:auto!important;width:78%!important;height:78%!important;
  transform:translate(-50%,-50%)!important;border-radius:50%;box-sizing:border-box;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner .opposite-stamp-ring {width:84%!important;height:84%!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.opposite-imprint-piece.uc-piece-wood {
  flex:none!important;object-fit:fill!important;transform-origin:center center!important;
  width:var(--uc-geo-size,84%)!important;height:var(--uc-geo-size,84%)!important;
  max-width:none!important;max-height:none!important;
  transform:translate(var(--uc-geo-x,0%),var(--uc-geo-y,0%))!important;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood {
  width:var(--uc-geo-corner-size,86%)!important;height:var(--uc-geo-corner-size,86%)!important;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/wP.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/bP.png"]{--uc-geo-size:82.929%;--uc-geo-corner-size:89.391%;--uc-geo-x:-0.25%;--uc-geo-y:-6.5%}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/wP.png"]{width:82.929%!important;height:82.929%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/wP.png"]{width:89.391%!important;height:89.391%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/bP.png"]{width:82.929%!important;height:82.929%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/bP.png"]{width:89.391%!important;height:89.391%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-6.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/wN.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/bN.png"]{--uc-geo-size:84.848%;--uc-geo-corner-size:91.46%;--uc-geo-x:-3.25%;--uc-geo-y:-3.725%}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/wN.png"]{width:84.848%!important;height:84.848%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/wN.png"]{width:91.46%!important;height:91.46%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/bN.png"]{width:84.848%!important;height:84.848%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/bN.png"]{width:91.46%!important;height:91.46%!important;max-width:none!important;max-height:none!important;transform:translate(-3.25%,-3.725%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/wB.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/bB.png"]{--uc-geo-size:84.989%;--uc-geo-corner-size:91.611%;--uc-geo-x:0.5%;--uc-geo-y:-3.8%}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/wB.png"]{width:84.989%!important;height:84.989%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/wB.png"]{width:91.611%!important;height:91.611%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/bB.png"]{width:84.989%!important;height:84.989%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/bB.png"]{width:91.611%!important;height:91.611%!important;max-width:none!important;max-height:none!important;transform:translate(0.5%,-3.8%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/wR.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/bR.png"]{--uc-geo-size:91.721%;--uc-geo-corner-size:98.868%;--uc-geo-x:-0.25%;--uc-geo-y:-8.225%}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/wR.png"]{width:91.721%!important;height:91.721%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/wR.png"]{width:98.868%!important;height:98.868%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/bR.png"]{width:91.721%!important;height:91.721%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/bR.png"]{width:98.868%!important;height:98.868%!important;max-width:none!important;max-height:none!important;transform:translate(-0.25%,-8.225%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/wQ.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/bQ.png"]{--uc-geo-size:85.985%;--uc-geo-corner-size:92.686%;--uc-geo-x:-0.5%;--uc-geo-y:-4.5%}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/wQ.png"]{width:85.985%!important;height:85.985%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/wQ.png"]{width:92.686%!important;height:92.686%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/bQ.png"]{width:85.985%!important;height:85.985%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/bQ.png"]{width:92.686%!important;height:92.686%!important;max-width:none!important;max-height:none!important;transform:translate(-0.5%,-4.5%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/wK.png"],
body[data-chess-skin="wood_classic"] .opposite-piece-stamp img.uc-piece-wood[src$="/bK.png"]{--uc-geo-size:84.291%;--uc-geo-corner-size:90.859%;--uc-geo-x:-0.375%;--uc-geo-y:-3.425%}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/wK.png"]{width:84.291%!important;height:84.291%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/wK.png"]{width:90.859%!important;height:90.859%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-center img.opposite-imprint-piece.uc-piece-wood[src$="/bK.png"]{width:84.291%!important;height:84.291%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp.stamp-corner img.opposite-imprint-piece.uc-piece-wood[src$="/bK.png"]{width:90.859%!important;height:90.859%!important;max-width:none!important;max-height:none!important;transform:translate(-0.375%,-3.425%)!important}
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood {
  transform:translateY(-1.5px);
}
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/wP.png"],
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/bP.png"] {
  transform-origin:50% 100%;
  transform:translateY(calc(-3.6% - 1.5px)) scaleY(.92);
}
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/wP.png"],
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/bP.png"] {
  width:90%!important;height:90%!important;max-width:90%!important;max-height:90%!important;
  object-fit:contain;transform-origin:50% 100%;
  transform:translateY(-1px) scaleY(.92)!important;
}
@media  (min-width:768px) {
body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/wP.png"],
  body[data-chess-skin="wood_classic"] .square > .uc-piece-slot > img.uc-piece-wood[src$="/bP.png"] {
    width:99%!important;
    height:99%!important;
    max-width:99%!important;
    max-height:99%!important;
    object-fit:contain;
    transform-origin:50% 100%;
    transform:translateY(calc(-3.6% - 1.5px)) scaleY(.92)!important;
  }
}
body[data-chess-skin="wood_classic"] #board-surface .opposite-piece-stamp::before,
body[data-chess-skin="wood_classic"] #board-underground .opposite-piece-stamp::before {
  background:transparent!important;
  border:1.5px solid rgba(114,163,128,.76)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  z-index:0!important;
}
body[data-chess-skin="wood_classic"] #board-surface .square.light .opposite-piece-stamp::before,
body[data-chess-skin="wood_classic"] #board-underground .square.light .opposite-piece-stamp::before {
  border-color:rgba(105,151,121,.78)!important;
}
body[data-chess-skin="wood_classic"] #board-surface .square.dark .opposite-piece-stamp::before,
body[data-chess-skin="wood_classic"] #board-underground .square.dark .opposite-piece-stamp::before {
  border-color:rgba(164,207,170,.67)!important;
}
body[data-chess-skin="wood_classic"] #board-surface .opposite-piece-stamp .opposite-stamp-ring,
body[data-chess-skin="wood_classic"] #board-underground .opposite-piece-stamp .opposite-stamp-ring {
  display:block!important;
  border:1px dashed rgba(112,163,126,.78)!important;
  opacity:.82!important;
  background:transparent!important;
  z-index:4!important;
  pointer-events:none;
}
body[data-chess-skin="wood_classic"] #board-surface .square.dark .opposite-piece-stamp .opposite-stamp-ring,
body[data-chess-skin="wood_classic"] #board-underground .square.dark .opposite-piece-stamp .opposite-stamp-ring {
  border-color:rgba(182,220,183,.72)!important;
}
body[data-chess-skin="wood_classic"] .opposite-piece-stamp .uc-piece-slot{z-index:2!important}
body[data-chess-skin="wood_classic"] .uc-piece-drag-ghost .uc-piece-wood{display:block!important}
body[data-chess-skin="wood_classic"] .uc-piece-drag-ghost .uc-piece-legacy{display:none!important}

/* Wood Classic, surface and underground: same texture family, different blend.
   Underground uses the original board's 82/18 and 80/20 layer distinction;
   ONLY the art and colors change, not any dimensions/overlays/click targets. */
body[data-chess-skin="wood_classic"] #board-surface .square.light{
 background:#f2d5a8 url("./chess-skins/wood-classic/light.webp") center/cover no-repeat;
}
body[data-chess-skin="wood_classic"] #board-surface .square.dark{
 background:#bd6f36 url("./chess-skins/wood-classic/dark.webp") center/cover no-repeat;
}
body[data-chess-skin="wood_classic"] #board-underground .square.light{
 background-color:#ead8cb;
 background-image:linear-gradient(rgba(231,220,236,.18),rgba(231,220,236,.18)),url("./chess-skins/wood-classic/light.webp");
 background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
}
body[data-chess-skin="wood_classic"] #board-underground .square.dark{
 background-color:#c58c69;
 background-image:linear-gradient(rgba(222,212,236,.20),rgba(222,212,236,.20)),url("./chess-skins/wood-classic/dark.webp");
 background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
}
/* Coordinates need readable contrast on both wooden boards. */
body[data-chess-skin="wood_classic"] #board-surface .square.light .coord,
body[data-chess-skin="wood_classic"] #board-underground .square.light .coord{color:#79411d}
body[data-chess-skin="wood_classic"] #board-surface .square.dark .coord,
body[data-chess-skin="wood_classic"] #board-underground .square.dark .coord{color:#fff0d2}
/* Ghost ring is not a new geometry: only tint the Default outlines to wood. */
body[data-chess-skin="wood_classic"] #board-surface .square.light .opposite-piece-stamp::before,
body[data-chess-skin="wood_classic"] #board-underground .square.light .opposite-piece-stamp::before{
 border-color:rgba(147,88,47,.74)!important
}
body[data-chess-skin="wood_classic"] #board-surface .square.dark .opposite-piece-stamp::before,
body[data-chess-skin="wood_classic"] #board-underground .square.dark .opposite-piece-stamp::before{
 border-color:rgba(255,222,175,.75)!important
}
body[data-chess-skin="wood_classic"] #board-surface .square.light .opposite-stamp-ring,
body[data-chess-skin="wood_classic"] #board-underground .square.light .opposite-stamp-ring{
 border-color:rgba(165,96,55,.82)!important
}
body[data-chess-skin="wood_classic"] #board-surface .square.dark .opposite-stamp-ring,
body[data-chess-skin="wood_classic"] #board-underground .square.dark .opposite-stamp-ring{
 border-color:rgba(255,227,193,.83)!important
}

/* Prevent Wood art from leaking into Default, Classic and Flat skins. */
.uc-piece-wood{display:none!important}
body[data-chess-skin="wood_classic"] .uc-piece-wood{display:block!important}

/* V720: fail-open wood pieces. Every old or stale V683 renderer still has
   its vector <img>, so Wood Classic MUST NOT hide it until a real wood PNG
   has finished loading. Does not change any Default dimensions or overlays. */
body[data-chess-skin="wood_classic"] .uc-piece-slot > img.uc-piece-vector {display:block!important}
body[data-chess-skin="wood_classic"] .uc-piece-slot > img.uc-piece-wood {display:none!important}
body[data-chess-skin="wood_classic"] .uc-piece-slot.uc-wood-ready > img.uc-piece-vector {display:none!important}
body[data-chess-skin="wood_classic"] .uc-piece-slot.uc-wood-ready > img.uc-piece-wood {display:block!important}