:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#dce1e5;background:#0c1118;font-synthesis:none;font-size:16px;--muted: #8c99a5;--border: #303b47;--accent: #c3d1d6}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;height:100dvh}[hidden]{display:none!important}button,select,input{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.38;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.app-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));border-bottom:1px solid #28313c;background:#101720;z-index:4}.brand{display:flex;align-items:center;gap:12px;color:#e4e8eb;text-decoration:none;flex:0 0 auto;font-family:Georgia,serif;font-size:23px;letter-spacing:.18em}.brand-mark{display:grid;place-items:center;width:32px;height:36px;color:#c5b795}.brand-mark svg{width:30px;height:30px;display:block}.brand h1{margin:0 -.18em 0 0;font:inherit;line-height:1.3}.header-tools{display:flex;align-items:center;gap:8px;min-width:0}.view-label{color:#a4afb8;font-size:12px;letter-spacing:.05em;white-space:nowrap;margin-right:5px}.icon-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;aspect-ratio:1;border-radius:6px;padding:10px;background:transparent;color:#c6d0d9;font-size:24px;line-height:1}.icon-button svg{display:block;flex:0 0 auto;width:24px;height:24px}.icon-button:hover:not(:disabled){color:#f0f3f5;background:#25313e}main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}#model-toolbar{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;padding:10px max(24px,env(safe-area-inset-right)) 10px max(24px,env(safe-area-inset-left));border-bottom:1px solid #283541;background:#101923}#model-toolbar>.piece-choices{order:0;flex:0 1 380px;min-width:284px}.model-toolbar-options{display:flex;align-items:center;gap:12px;flex:0 1 390px;min-width:305px}.model-toolbar-options>.study-modes{flex:1 1 auto;min-width:180px}.model-toolbar-options>.study-colors{flex:0 0 auto}#model-toolbar .piece-choice{min-height:48px;padding:4px 2px;gap:2px}.stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:#0c1118}#viewport{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.game-hud{position:absolute;top:17px;left:50%;transform:translate(-50%);display:grid;justify-items:center;gap:6px;width:max-content;max-width:calc(100% - 100px);pointer-events:none;z-index:2}.turn-indicator{display:flex;align-items:center;gap:18px;padding:8px 17px;border-radius:24px;background:#0b1217a8;box-shadow:0 1px #c5b79520;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.turn-side{display:flex;align-items:center;gap:8px;position:relative;min-height:22px;color:#899198;opacity:.4;font-size:9px;letter-spacing:.14em;transition:opacity .3s,color .3s}.turn-side i{width:13px;height:13px;border-radius:50%;background:#d6d7d2;box-shadow:inset 0 1px 2px #fff6,0 1px 3px #0008}.turn-side[data-turn=b] i{background:#242c30;border:1px solid #657078;box-shadow:inset 0 1px 2px #a2afb533}.turn-side.active{color:#e1d8c7;opacity:1}.turn-side.active:after{content:"";position:absolute;height:1px;left:21px;right:0;bottom:-2px;background:#c5b795}.turn-divider{width:1px;height:12px;background:#6b727844}.turn-indicator.thinking .active i{animation:turn-think 1.6s ease-in-out infinite}.turn-indicator.in-check .active:after{background:#d48978}@keyframes turn-think{50%{opacity:.4}}.turn-status{margin:0;padding:6px 12px;border-radius:4px;background:#0b1217b3;color:#d5dfe6;font-size:12px;line-height:1.5;letter-spacing:.09em;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.turn-status:empty{display:none}.turn-status.checked{color:#e7baa3}#game-skip{position:absolute;top:18px;right:max(24px,env(safe-area-inset-right));z-index:2}.quiet{min-height:40px;padding:8px 12px;border:1px solid #455360;border-radius:5px;background:#16212dcc;color:#c0cdd7;font-size:12px}.quiet:hover:not(:disabled){background:#2b3947}#phase{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);z-index:2;width:max-content;max-width:calc(100% - 40px);color:#d5dce2;font-size:14px;letter-spacing:.08em;text-align:center;text-shadow:0 2px 10px #000;pointer-events:none}#phase:empty{display:none}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#0c1118;color:#afbecb;font-size:14px;z-index:3}.spinner{width:22px;height:22px;border:1px solid #435868;border-top-color:#c2d0d7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#app[data-view=home] .app-header{position:absolute;inset:0 0 auto;width:100%;border-bottom:0;background:linear-gradient(#060b10aa,transparent)}#app[data-view=home] .brand{visibility:hidden}.home{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:flex-end;padding:70px max(7vw,env(safe-area-inset-right)) max(7vh,env(safe-area-inset-bottom)) max(7vw,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;pointer-events:none}.home:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#070d13e6,#070d139c 28%,#070d1326 66%),linear-gradient(0deg,#070d1388,transparent 62%);pointer-events:none}.home-content{position:relative;width:min(370px,100%);margin-top:auto;pointer-events:auto}#home-title{margin:0;color:#ede8dd;font-family:Georgia,Times New Roman,serif;font-size:clamp(64px,7vw,92px);font-weight:400;line-height:1.03;letter-spacing:.06em;text-shadow:0 3px 30px #0004}.home-heading{margin-bottom:27px}.home-choices{display:grid;gap:8px}.home-choice{width:100%;margin:0;border:1px solid #a3a49536;border-radius:6px;background:#101923bb;color:#e6e4db;box-shadow:0 8px 22px #0002;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:left}.home-choice-button{display:flex;align-items:center;gap:15px;min-height:80px;padding:17px 20px;color:#e6e4db;text-align:left}.home-cpu>.home-choice-button{width:100%;border-radius:6px 6px 0 0;background:transparent}.home-choice-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;color:#bbae92}.home-choice-icon svg{display:block;width:30px;height:30px}.home-choice-button strong{display:block;font-size:16px;font-weight:500;letter-spacing:.06em}.home-choice-button small{display:block;margin-top:5px;color:#919da5;font-size:11px;letter-spacing:.04em}.choice-arrow{margin-left:auto;color:#9d9685;font-size:20px}.home-choice-button:hover:not(:disabled){background:#29333ccb;border-color:#d3ccb36b}.home-choice-button:focus-visible{outline-offset:-3px}#home-cpu-options{border-top:1px solid #a3a49523}#home-cpu-options>summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:8px 20px 8px 67px;color:#aab4ba;cursor:pointer;font-size:11px;list-style:none}#home-cpu-options>summary::-webkit-details-marker{display:none}#home-cpu-options>summary span{font-size:15px;color:#b6aa93}#home-cpu-options[open]>summary span{transform:rotate(45deg)}.home-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:5px 20px 17px}.home-options label{margin:0;color:#a7b1b8;font-size:11px}.home-options select{min-height:44px;padding:8px 7px;border-color:#6b756a55;background:#101923}.home-resume{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin-top:13px;padding:10px 4px;background:transparent;color:#acb5ba;font-size:12px;text-align:left}.home-resume span{color:#bbae92;font-size:18px}.home-resume:hover:not(:disabled){color:#ede8dd}.settings-views{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}.settings-section-label{display:block;margin-bottom:9px;color:#9fadb7;font-size:12px}.settings-match-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-match-modes .secondary{min-height:44px;margin:0}.settings-match-modes [aria-pressed=true]{border-color:#b7b4a2;background:#c3c7bc;color:#14212b}.settings-destinations{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.settings-destinations .text-button{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:10px 7px}dialog{width:440px;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);overflow:auto;margin:auto;padding:22px;border:1px solid #475767;border-radius:10px;background:#151f2a;color:#dde4e9;box-shadow:0 20px 80px #0009;scrollbar-width:thin;scrollbar-color:#455666 transparent}dialog::backdrop{background:#04090dcc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#controls-dialog,.controls-dialog{position:fixed;inset:calc(68px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) auto auto;width:420px;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 84px);margin:0;z-index:6}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px -8px 16px 0}.dialog-head h2{margin:0;color:#e5eaf0;font-size:18px;font-weight:500}.dialog-head .icon-button{color:#aebcca}label{display:flex;flex-direction:column;gap:8px;margin:18px 0;color:#bcc8d1;font-size:13px}label.inline{flex-direction:row;justify-content:space-between;align-items:center;min-height:30px}select{width:100%;min-height:44px;padding:9px 10px;border:1px solid #455669;border-radius:5px;background:#101a25;color:#d9e3eb;font-size:16px}input[type=range]{width:100%;min-height:28px;margin:0;accent-color:#b7c9d2}input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:#b7c9d2}.primary,.secondary{width:100%;min-height:44px;border-radius:5px;padding:11px 14px;font-size:13px;font-weight:500}.primary{display:flex;align-items:center;justify-content:space-between;background:#bdcbd1;color:#17232e}.primary:hover:not(:disabled){background:#d5dfe4}.secondary{display:block;margin-top:10px;border:1px solid #455463;background:transparent;color:#c1ced8;text-align:center}.secondary:hover:not(:disabled){background:#24323f;border-color:#758a9b}.fineprint,#new-mode-note,.settings-detail p{color:#8c9dac;font-size:12px;line-height:1.8}.text-link{color:#b5c6d3;font-size:12px;text-underline-offset:3px}.text-button{min-height:44px;padding:5px 8px;border-radius:4px;background:transparent;color:#bdcdda;font-size:12px}.text-button:hover:not(:disabled){background:#263440}.dim{color:#8a9bab}#match-actions{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}.button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.button-row .secondary{margin:0;padding:10px 6px;font-size:12px}#history-details{margin-top:14px}#history-details summary,.settings-detail summary{cursor:pointer;color:#b9c8d4;font-size:13px;padding:5px 0}#history-list{max-height:220px;overflow:auto;padding-top:10px;font-variant-numeric:tabular-nums}#history-list p,#history-details small{color:#8297a7;font-size:11px}.history-row{display:grid;grid-template-columns:32px 1fr 1fr;gap:8px;color:#bac8d3;font-size:13px;line-height:2}.history-row span:first-child{color:#778b9b}.history-row:last-child{color:#d7e1e9}.promotion-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.promotion-choices button{min-height:54px;padding:12px;border:1px solid #536779;border-radius:5px;background:#273847;color:#d9e6ef;font-size:16px}#promotion h2{margin:0 0 18px;font-size:17px;line-height:1.6;font-weight:500}#panel.study-panel{display:flex;flex-direction:column;gap:16px;padding:0}.study-picker{min-width:0;margin:0;color:#acbac6;font-size:12px}.study-section-label{display:block;margin-bottom:7px;color:#93a7b7;font-size:11px}.piece-choices{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:4px;overflow-x:auto;padding-bottom:2px}.target-choices{grid-template-columns:repeat(5,minmax(44px,1fr))}.piece-choice{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:62px;padding:8px 2px;border:1px solid #3c4d5d;border-radius:5px;background:#182531;color:#9fb2c1}.piece-choice svg{display:block;width:26px;height:26px;flex:0 0 auto}.piece-choice span{font-size:9px;white-space:nowrap}.piece-choice:focus-visible{outline-offset:-3px}.piece-choice[aria-pressed=true]{border-color:#bdcbd1;background:#bdcbd1;color:#17232d}.piece-choice:hover:not(:disabled):not([aria-pressed=true]){background:#2a3b4b;color:#d1dee7}.study-colors{display:flex;gap:5px;align-items:center}.study-colors button{min-width:54px;min-height:44px;padding:8px 12px;border:1px solid #3c4d5d;border-radius:5px;background:#1a2733;color:#a6b6c3;font-size:13px}.study-colors button[aria-pressed=true]{border-color:#bdcbd1;background:#bdcbd1;color:#17232d}.study-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #354555;border-radius:6px;background:#101922}.study-modes button{min-height:44px;padding:8px 4px;border-radius:4px;background:transparent;color:#93a6b5;font-size:12px}.study-modes button[aria-selected=true]{background:#344657;color:#e5edf2}.motion-actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}.motion-actions>.primary,.motion-actions>.secondary{margin:0;padding:10px 4px;justify-content:center;text-align:center;font-size:12px}.motion-scrub{display:flex;flex-direction:column;gap:5px;margin:0;color:#aabac7;font-size:12px}.motion-scrub>span{display:flex;justify-content:space-between}.motion-scrub output{color:#c7d5df;font-variant-numeric:tabular-nums}.motion-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.frame-buttons{display:flex;gap:4px}.frame-buttons button{min-height:44px;padding:7px 8px;border:1px solid #3c4e60;border-radius:5px;background:transparent;color:#b8c8d5;font-size:11px}.frame-buttons button:hover:not(:disabled){background:#263645}.motion-options label{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0;font-size:11px}.motion-options select{width:auto;padding:7px 6px;font-size:16px}.motion-options .text-button{margin-left:auto;font-size:11px}.motion-advanced summary{cursor:pointer;padding:4px 0;color:#9eb3c3;font-size:12px}.motion-advanced .motion-options{margin-top:10px}.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:9;width:max-content;max-width:calc(100vw - 32px);border-radius:5px;padding:11px 16px;background:#c4d0d6;color:#172631;font-size:13px;line-height:1.5;text-align:center}#stats{position:fixed;bottom:max(5px,env(safe-area-inset-bottom));left:max(10px,env(safe-area-inset-left));z-index:5;padding:4px 6px;border-radius:3px;background:#101c27cc;color:#9fb6c7;font-size:10px;pointer-events:none}@media(max-width:900px){#model-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))}#model-toolbar>.piece-choices{grid-column:1 / -1;width:100%;min-width:0;padding-bottom:0}.model-toolbar-options{grid-column:1 / -1;width:100%;min-width:0;gap:10px}.model-toolbar-options>.study-modes{min-width:0;padding:0;border:0;background:transparent}#model-toolbar .study-colors button{min-width:44px;padding:8px 10px}}@media(max-width:600px){.app-header{gap:8px;padding-right:max(8px,env(safe-area-inset-right));padding-left:max(8px,env(safe-area-inset-left))}.brand{font-size:19px}.header-tools{gap:4px}.header-tools .icon-button{flex-basis:36px;width:36px;padding:8px}.game-hud{top:12px;gap:6px;max-width:calc(100% - 90px)}.turn-status{padding:6px 8px;font-size:11px}.turn-indicator{gap:12px;padding:7px 13px}.turn-side{gap:6px;font-size:8px}#game-skip{top:12px;right:max(12px,env(safe-area-inset-right));padding:8px 10px;font-size:11px}#phase{bottom:max(18px,env(safe-area-inset-bottom));font-size:12px}dialog{padding:18px}.dialog-head{margin-bottom:12px}#panel.study-panel{gap:12px}.motion-options{gap:6px}.motion-options .text-button{margin-left:0}}@media(max-width:380px){.app-header{gap:4px;padding-right:max(6px,env(safe-area-inset-right));padding-left:max(6px,env(safe-area-inset-left))}.brand{font-size:17px}.header-tools{gap:2px}}@media(max-width:359px){.brand h1{display:none}.brand-mark{width:26px}.brand-mark svg{width:26px}.header-tools{flex:1;justify-content:flex-end}}@media(max-height:500px)and (orientation:landscape){.app-header{min-height:calc(52px + env(safe-area-inset-top))}.game-hud,#game-skip{top:10px}#phase{bottom:max(10px,env(safe-area-inset-bottom))}dialog{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px)}#controls-dialog{top:calc(60px + env(safe-area-inset-top));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 70px)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}.turn-side{transition:none}.turn-indicator.thinking .active i{animation:none}}.story-result{position:absolute;z-index:6;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:min(420px,calc(100% - 32px));padding:24px;text-align:center;border:1px solid #becbd22e;background:linear-gradient(135deg,#101b24ed,#070c12f2);border-radius:4px;box-shadow:0 16px 70px #0008;animation:result-arrive 1s ease both}.story-result>span{font-size:10px;letter-spacing:.3em;color:#9baeba}.story-result h2{margin:10px 0 8px;font-size:clamp(27px,5vw,38px);font-weight:400;letter-spacing:.15em}.story-result p{color:#a7b4bf;font-size:12px;margin-bottom:22px}.story-result>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.story-result button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;margin:0;text-align:center}.story-result[data-result=win]{border-color:#c6af7366}.story-result[data-result=win]>span{color:#d3bd8b}@keyframes result-arrive{0%{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@media(max-height:500px){.story-result{bottom:12px;padding:12px 20px}.story-result p{margin:4px 0 12px}.story-result h2{margin:4px 0;font-size:24px}}@media(prefers-reduced-motion:reduce){.story-result{animation:none}}@media(max-width:600px){.view-label{font-size:11px;margin-right:2px}.home{padding:70px max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.home:before{background:linear-gradient(0deg,#070d13f5,#070d13ba 35%,#070d1333 76%)}.home-content{width:min(390px,100%);margin-right:auto;margin-left:auto}#home-title{font-size:60px}.home-choice-button{min-height:68px;padding:12px 16px;gap:13px}.home-choice-icon{flex-basis:28px;width:28px}.home-choice-icon svg{width:27px;height:27px}.home-choice-button strong{font-size:15px}#home-cpu-options>summary{min-height:44px;padding-left:57px;padding-right:16px}.home-options{padding-right:16px;padding-left:16px;gap:8px}.home-resume{margin-top:8px}}@media(max-height:650px)and (min-width:601px),(max-height:480px)and (orientation:landscape){.home{padding:60px max(32px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left))}.home-content{display:grid;grid-template-columns:minmax(140px,220px) minmax(260px,350px);align-items:center;column-gap:28px;width:min(650px,100%);margin-left:0}.home-heading{grid-column:1;grid-row:1;margin-bottom:0}.home-choices{grid-column:2;grid-row:1}.home-resume{grid-column:2;margin-top:6px}#home-title{font-size:64px}.home-choice-button{min-height:64px;padding:11px 16px}#home-cpu-options>summary{min-height:40px;padding-left:63px;padding-right:16px}}