:root{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:dark;
  --bg:#0f172a;--panel:#111827;--line:#334155;--ink:#f8fafc;--muted:#94a3b8;
  --light:#d6c3a5;--dark:#75553a;--red:#cf3f3f;--red-hi:#ef5a5a;--black:#171717;--gold:#facc15;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,select{font:inherit}
button,select,a{touch-action:manipulation}
.app{height:100dvh;max-height:100dvh;width:min(100%,1180px);margin:0 auto;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px}
.topbar{height:38px;flex:0 0 38px;display:grid;grid-template-columns:80px 1fr 80px;align-items:center}
h1{font-size:clamp(1.05rem,4vw,1.45rem);text-align:center;margin:0;font-weight:850;white-space:nowrap}
.back-link,.link-button{color:#e2e8f0;text-decoration:none;background:none;border:0;padding:8px 0;font-weight:750;font-size:.88rem;cursor:pointer}
.link-button{text-align:right}
.game-shell{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px}
.board-column{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.status-bar{height:30px;flex:0 0 30px;width:min(100%,calc(100dvh - 190px),620px);display:flex;align-items:center;justify-content:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:#e2e8f0;font-size:.9rem}
.turn-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.45);display:inline-block}.turn-dot.red{background:var(--red)}.turn-dot.black{background:#111}
.board{width:min(100%,calc(100dvh - 190px),620px);aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:4px solid #4b3526;border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.28);touch-action:manipulation;flex:0 0 auto}
.square{position:relative;display:grid;place-items:center;border:0;padding:0;margin:0}.square.light{background:var(--light)}.square.dark{background:var(--dark);cursor:pointer}.square.legal::after{content:"";width:24%;height:24%;border-radius:50%;background:rgba(250,204,21,.88);box-shadow:0 0 0 3px rgba(15,23,42,.35)}.square.capture-dest::after{width:34%;height:34%;background:transparent;border:4px solid var(--gold);box-sizing:border-box}.square.selected{box-shadow:inset 0 0 0 4px var(--gold)}
.piece{width:72%;height:72%;border-radius:50%;position:relative;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),inset 0 4px 0 rgba(255,255,255,.18),0 2px 4px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.28);pointer-events:none}.piece.red{background:radial-gradient(circle at 38% 30%,var(--red-hi),var(--red) 58%,#922d2d)}.piece.black{background:radial-gradient(circle at 38% 30%,#4a4a4a,var(--black) 62%,#050505)}.piece.king::after{content:"★";position:absolute;inset:0;display:grid;place-items:center;color:#f8d768;font-size:clamp(.75rem,4vw,1.7rem);text-shadow:0 1px 2px #000}.piece.forced{outline:3px solid rgba(250,204,21,.9);outline-offset:2px}
.side-panel{display:grid;grid-template-columns:1fr;gap:7px;align-content:start}.panel,.install-box{background:var(--panel);border:1px solid var(--line);border-radius:13px}.compact-panel{padding:8px 11px}.score-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.score-row>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;font-size:.86rem;color:#cbd5e1}.score-row strong{color:#fff}.mini-piece{width:17px;height:17px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}.red-piece{background:var(--red)}.black-piece{background:#111}.settings-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px}.settings-panel label{font-size:.72rem;color:var(--muted)}select{width:100%;margin-top:4px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:#0b1620;color:var(--ink);font-size:.83rem}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls button{border:1px solid #475569;background:#334155;color:#fff;border-radius:10px;padding:9px 10px;font-weight:800;cursor:pointer}.controls button:disabled{opacity:.4;cursor:not-allowed}.message{min-height:0;text-align:center;color:#facc15;font-weight:750;font-size:.8rem;line-height:1.25}.install-box{padding:0 10px}.install-box summary{cursor:pointer;padding:8px 2px;font-size:.78rem;font-weight:750;color:#cbd5e1}.help-copy{font-size:.76rem;color:#cbd5e1;line-height:1.4;padding:0 2px 8px}.help-copy p{margin:5px 0}.help-copy a{color:#fff}.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:20px;z-index:10}.modal[hidden]{display:none}.modal-card{width:min(100%,520px);background:#111827;border:1px solid #475569;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.5)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #334155}.modal-head h2{margin:0;font-size:1.1rem}.modal-head button{background:none;border:0;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}.modal-body{padding:14px 16px;color:#cbd5e1;font-size:.9rem;line-height:1.5}.modal-body p{margin:0 0 10px}
@media (min-width:760px){
  .game-shell{grid-template-columns:minmax(420px,620px) minmax(240px,310px);grid-template-rows:minmax(0,1fr);justify-content:center;align-items:center;gap:18px}.side-panel{gap:10px}.board{width:min(100%,calc(100dvh - 78px),620px)}.status-bar{width:min(100%,calc(100dvh - 78px),620px)}.settings-panel{grid-template-columns:1fr}.controls{grid-template-columns:1fr}.message{min-height:18px}.install-box{margin-top:2px}
}
@media (orientation:landscape) and (max-height:620px){
  .app{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom));gap:4px}.topbar{height:30px;flex-basis:30px}.topbar h1{font-size:1rem}.game-shell{grid-template-columns:minmax(280px,1fr) minmax(210px,36vw);grid-template-rows:minmax(0,1fr);gap:10px;align-items:center}.board-column{gap:4px}.status-bar{height:26px;flex-basis:26px;width:min(calc(100dvh - 68px),calc(100vw - 235px));font-size:.78rem}.board{width:min(calc(100dvh - 68px),calc(100vw - 235px));border-width:3px}.side-panel{gap:5px}.compact-panel{padding:5px 8px}.settings-panel{padding:6px 8px;gap:5px}.settings-panel label{font-size:.66rem}select{padding:5px 6px;margin-top:2px;font-size:.76rem}.controls button{padding:7px 8px;font-size:.8rem}.install-box summary{padding:6px 1px}.help-copy{font-size:.68rem}.message{font-size:.7rem}
}
@media (max-width:430px) and (orientation:portrait){
  .topbar{grid-template-columns:64px 1fr 64px}.back-link,.link-button{font-size:.78rem}.settings-panel{grid-template-columns:1fr 1fr}.board{width:min(100%,calc(100dvh - 215px))}.status-bar{width:min(100%,calc(100dvh - 215px))}
}