:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#101c29;color:#f4eee4}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -20%,#31465a,#101c29 65%);min-height:100vh}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #f8d49e;outline-offset:2px}.app{width:min(1240px,100%);margin:auto;padding:18px clamp(14px,3vw,38px) 12px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1f;margin-bottom:26px}.brand{display:flex;align-items:center;gap:13px;letter-spacing:.22em}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #eeb887;border-radius:11px;color:#f5b68e;font-size:24px}.brand strong{display:block;font-size:21px}.brand small{display:block;letter-spacing:.12em;color:#a9bac7;font-size:9px;text-transform:uppercase;margin-top:2px}.header-actions{display:flex;gap:10px}.header-actions button,.secondary-actions button,.actions button{border:1px solid #547083;background:#1c3041;color:#e9f0f1;border-radius:10px;padding:11px 16px}.header-actions button:hover,.secondary-actions button:hover,.actions button:hover{background:#2b4559}.header-actions .quiet{min-width:64px}.header-actions .icon-button{font-size:23px;padding:5px 12px}.layout{display:grid;grid-template-columns:minmax(0,690px) minmax(260px,380px);gap:clamp(24px,5vw,66px);align-items:center;justify-content:center}.game-panel{min-width:0}.turn-strip,.board-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c8d4db;font-size:13px}.turn-strip{min-height:40px;margin-bottom:10px}.turn-chip{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:#f4eee4}.turn-chip:before{content:'';display:block;width:12px;height:12px;border-radius:50%;background:var(--turn,#f67869);box-shadow:0 0 0 3px #ffffff22}.board-frame{border:8px solid #365467;border-radius:12px;box-shadow:0 20px 55px #0005,0 0 0 1px #79909b44;background:#365467;width:min(100%,690px);margin:auto}.board{display:grid;grid-template-columns:repeat(16,1fr);aspect-ratio:1;overflow:hidden;border-radius:4px}.cell{position:relative;width:100%;aspect-ratio:1;border:0;border-radius:0;padding:0;background:#d0b994;display:grid;place-items:center}.cell.dark{background:#81959a}.cell.camp-one{background:#d9aa91}.cell.dark.camp-one{background:#b77f77}.cell.camp-two{background:#95bcc2}.cell.dark.camp-two{background:#648f9d}.cell:hover{filter:brightness(1.13)}.cell.legal:after{content:'';width:32%;height:32%;border-radius:50%;background:#f8edb5b5;box-shadow:0 0 0 2px #22374788}.cell.selected{box-shadow:inset 0 0 0 3px #ffdf8d;z-index:1}.piece{position:absolute;width:78%;height:78%;border-radius:50%;z-index:1;box-shadow:inset 0 3px 2px #ffffff77,inset 0 -5px 5px #0004,0 3px 4px #0006;border:2px solid #ffffff66}.piece.one{background:radial-gradient(circle at 35% 28%,#ffb995,#e85f59 70%)}.piece.two{background:radial-gradient(circle at 35% 28%,#b5e7e0,#369bb0 70%)}.cell.last:before{content:'';position:absolute;inset:2px;border:2px solid #fff9;z-index:2;pointer-events:none}.cell.hinted{box-shadow:inset 0 0 0 3px #f5d15b;z-index:2}.board-footer{padding:13px 2px}.side-panel{align-self:start;padding-top:35px}.eyebrow{text-transform:uppercase;letter-spacing:.23em;color:#f9b886;font-size:11px;font-weight:800}.side-panel h1{font-family:Georgia,serif;font-size:clamp(32px,3.5vw,51px);line-height:1.08;font-weight:400;letter-spacing:-.035em;margin:12px 0 17px}.intro{color:#b8c8d2;line-height:1.55;margin-bottom:28px;font-size:15px}.score-row{display:flex;gap:10px;margin-bottom:18px}.score{flex:1;display:grid;grid-template-columns:14px 1fr;gap:2px 9px;padding:14px 12px;background:#1a3040;border:1px solid #3a5668;border-radius:12px;font-size:13px;min-width:0}.score-dot{width:11px;height:11px;border-radius:50%;margin-top:3px}.score-coral .score-dot{background:#f8786a}.score-cyan .score-dot{background:#5dc8d5}.score strong{grid-column:2;font-size:19px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions #new-game{grid-column:span 2}.actions .primary,.modal .primary{background:#f5b480;color:#1d2730;border-color:#f5b480;font-weight:800}.actions .primary:hover,.modal .primary:hover{background:#ffd09a}.actions button:disabled{opacity:.4;cursor:not-allowed}.secondary-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.secondary-actions button{background:none;border-color:transparent;color:#a9becb;padding:8px 10px;font-size:13px}.tip{margin-top:29px;display:flex;gap:12px;background:#24394a;padding:14px 16px;border-left:2px solid #e8ab7b;border-radius:4px;color:#cad5dc;font-size:13px;line-height:1.5}.tip span{color:#e8ab7b}.tip p{margin:0}footer{border-top:1px solid #ffffff20;display:flex;justify-content:space-between;color:#8ea4b2;font-size:11px;margin-top:28px;padding-top:14px}.modal-backdrop{position:fixed;inset:0;background:#07111bc9;z-index:10;display:grid;place-items:center;padding:18px}.hidden{display:none!important}.modal{position:relative;width:min(460px,100%);max-height:min(88vh,780px);overflow:auto;background:#203647;border:1px solid #5d7d8e;border-radius:17px;box-shadow:0 25px 70px #0009;padding:30px}.close{position:absolute;right:14px;top:9px;border:0;background:none;color:#d4e1e8;font-size:30px}.modal h2{font-family:Georgia,serif;font-weight:400;font-size:32px;margin:0 32px 12px 0}.modal p,.modal li{color:#c7d6dd;line-height:1.55;font-size:14px}.modal ul{padding-left:20px}.modal .options{display:grid;gap:10px;margin:22px 0}.option,.modal .primary{width:100%;border-radius:10px;padding:13px 16px;font:inherit;cursor:pointer}.option{background:#2a485c;border:1px solid #688092;color:#edf5f6;text-align:left}.option.selected-option{border-color:#f4b582;box-shadow:inset 0 0 0 1px #f4b582}.option strong,.option small{display:block}.option small{color:#b9cbd3;margin-top:3px}.modal .primary{border:0}.modal .link{background:none;border:0;color:#f4be95;padding:10px 0}.modal .credit{font-size:12px;border-top:1px solid #ffffff24;margin-top:22px;padding-top:14px;color:#9fb5c0}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:20;background:#f7d7ad;color:#162837;padding:11px 17px;border-radius:10px;box-shadow:0 9px 25px #0007;font-weight:700;font-size:13px;text-align:center}@media(max-width:850px){.layout{grid-template-columns:minmax(0,600px);gap:6px}.side-panel{padding-top:10px}.side-panel h1{font-size:32px;margin:6px 0}.intro{margin:5px 0 16px}.tip{margin-top:16px}.app{padding-top:8px}.topbar{height:55px;margin-bottom:13px}.board-frame{border-width:5px}.turn-strip{font-size:12px}}@media(max-width:480px){.app{padding-left:10px;padding-right:10px}.brand strong{font-size:17px}.brand small{font-size:8px}.brand-mark{width:34px;height:34px}.header-actions{gap:4px}.header-actions button{padding:7px 9px}.turn-strip{align-items:flex-start}.turn-strip #status{max-width:58%;text-align:right}.board-frame{border-width:4px}.piece{border-width:1px}.side-panel h1{font-size:27px}.intro{font-size:13px}.score-row{margin-bottom:10px}.score{padding:8px}.actions button{padding:10px}.secondary-actions{margin-top:6px}.tip{margin-top:10px;padding:9px 12px}footer{margin-top:14px}}@media(max-height:600px) and (min-width:851px){.app{padding-top:4px}.topbar{height:48px;margin-bottom:10px}.board-frame{width:min(100%,calc(100vh - 130px))}.side-panel{padding-top:0}}

html,body{min-width:0}.precision-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:14px 0}.precision-controls label{font-size:12px;min-width:0}.precision-controls select,.precision-controls button,#ai-level{min-height:44px;width:100%;max-width:100%;background:#142537;color:#eef9ff;border:1px solid #537384;border-radius:8px;padding:5px}.precision-controls button{align-self:end;width:auto}@media(max-width:500px){.precision-controls{grid-template-columns:1fr 1fr}.precision-controls button{grid-column:1/-1;width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:350px){.topbar{height:auto;min-height:72px;flex-wrap:wrap;gap:12px;padding:12px 0}.header-actions{margin-left:auto}}