:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e9e2d4;background:#10131a;font-synthesis:none;text-rendering:optimizeLegibility;--white: #73a5ff;--black: #e48a43;--gold: #d8b25b;--panel: #181d27;--line: #343b49;--muted: #9ca4b2}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-width:320px;min-height:100dvh;background:#10131a}button,select,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app{min-height:100dvh;padding:calc(12px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;gap:10px}.header{text-align:center}.title{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(26px,8vw,38px);letter-spacing:.2em;color:var(--gold)}.subtitle{margin-top:3px;color:var(--muted);font-size:10px;letter-spacing:.12em}.scorebar{width:min(100%,460px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;font-variant-numeric:tabular-nums}.side-score{display:flex;gap:7px;align-items:center;min-width:0;font-size:13px}.side-score.black{justify-content:flex-end;text-align:right}.dot{width:10px;height:10px;border-radius:2px;flex:0 0 auto}.dot.white{background:var(--white)}.dot.black{background:var(--black)}.turn-chip{border:1px solid #4d4636;padding:5px 9px;border-radius:6px;color:var(--gold);font-size:11px;white-space:nowrap}.board-shell{padding:6px;border:1px solid #2c3340;background:#0b0e13;border-radius:8px}.board{display:grid;grid-template-columns:repeat(6,min(13.2vw,60px));gap:2px}.cell{width:min(13.2vw,60px);aspect-ratio:1;border:1px solid #2c3340;border-radius:3px;background:#171c25;color:inherit;padding:0;position:relative;display:grid;place-items:center;cursor:default;overflow:hidden}.cell.control-white{background:#16243c}.cell.control-black{background:#332218}.cell.legal{cursor:pointer;border-color:#5d6574}.cell.legal:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.cell.last{box-shadow:inset 0 0 0 2px var(--gold)}.cell.captured:after{content:"×";position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#f3d286;background:#10131acc;animation:vanish .7s ease-out forwards;pointer-events:none}@keyframes vanish{0%{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.15)}}.castle{width:72%;height:72%}.territory-mark{width:7px;height:7px;border-radius:1px;opacity:.72}.territory-mark.white{background:var(--white)}.territory-mark.black{background:var(--black)}.influence{position:absolute;left:3px;right:3px;bottom:2px;display:flex;justify-content:space-between;font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.72}.influence .w{color:#a7c6ff}.influence .b{color:#ffc18e}.upgrade-badge{position:absolute;top:2px;right:3px;color:var(--gold);font-size:13px}.siege-badge{position:absolute;top:2px;left:3px;color:#f0cf7b;font-size:11px}.status{width:min(100%,460px);min-height:22px;text-align:center;color:#c8ced8;font-size:12px}.status.result{font-size:15px;color:var(--gold);letter-spacing:.06em}.controls{width:min(100%,520px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.control,.control-button{min-height:38px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:#e9e2d4;padding:7px 9px}.control{display:flex;flex-direction:column;gap:3px}.control label{color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.control select,.control input{width:100%;border:0;outline:0;background:transparent;color:inherit;min-height:22px}.control input{appearance:textfield}.control-button{cursor:pointer}.control-button:hover{border-color:#555e6f}.control-button.primary{border-color:#665632;color:var(--gold)}.rules{width:min(100%,520px);border:1px solid var(--line);border-radius:8px;background:#141922;padding:12px 14px;color:#cbd0d8;font-size:12px;line-height:1.6}.rules h2{margin:0 0 7px;color:var(--gold);font-size:13px;letter-spacing:.12em}.rules p{margin:5px 0}.rules ul{margin:5px 0 5px 18px;padding:0}.rules .note{color:var(--muted);font-size:11px}@media(max-width:420px){.app{gap:8px}.controls{grid-template-columns:1fr 1fr}.side-score{font-size:11px}}
