:root{--cw-bg: #101014;--cw-panel: rgba(15, 15, 22, .88);--cw-panel-solid: #1c1c26;--cw-border: #ffcc33;--cw-accent: #ffcc33;--cw-text: #f5f5f5;--cw-muted: #b9b9c4;--cw-green: #2a9d4a;--cw-red: #ff3322;--cw-radius: 14px;--cw-font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--cw-safe-top: env(safe-area-inset-top, 0px);--cw-safe-bottom: env(safe-area-inset-bottom, 0px);--cw-safe-left: env(safe-area-inset-left, 0px);--cw-safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{font-family:var(--cw-font)}#app,#app canvas{touch-action:none}#app canvas{display:block}.cw-btn{min-height:48px;min-width:48px;padding:10px 18px;border:2px solid var(--cw-border);border-radius:var(--cw-radius);background:var(--cw-panel);color:var(--cw-text);font-family:var(--cw-font);font-size:18px;font-weight:700;line-height:1.2;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .15s ease,transform .1s ease,color .15s ease}.cw-btn:hover{background:#ffcc332e}.cw-btn:active{transform:scale(.97)}.cw-btn:disabled{opacity:.4;cursor:not-allowed}.cw-btn.selected{background:var(--cw-accent);color:#161616;border-color:var(--cw-accent)}.cw-btn.icon{padding:10px 14px;font-size:20px}.cw-btn.primary{background:var(--cw-accent);color:#161616;border-color:var(--cw-accent);font-size:24px;padding:12px 44px}.cw-btn.primary:hover{background:#ffe066}#start{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:22px;padding-top:calc(22px + var(--cw-safe-top));padding-bottom:calc(22px + var(--cw-safe-bottom));padding-left:calc(22px + var(--cw-safe-left));padding-right:calc(22px + var(--cw-safe-right));background:radial-gradient(130% 130% at 50% 0%,#161622bd,#08080ceb);overflow-y:auto;text-align:center}#start.hidden{display:none}#start-title{font-size:clamp(44px,9vw,74px);font-weight:800;letter-spacing:1px;color:var(--cw-text);text-shadow:0 2px 22px rgba(0,0,0,.65);margin:0}#start-sub{color:var(--cw-muted);font-size:18px;margin-top:-12px}.cw-group{display:flex;flex-direction:column;align-items:center;gap:10px}.cw-label{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--cw-muted)}.cw-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.cw-label-gap{margin-top:10px}#volume-slider{width:200px;min-height:48px;accent-color:var(--cw-accent);cursor:pointer}.cw-hidden{display:none!important}#start-actions{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap;justify-content:center}#start-resume{display:inline-block}#hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none}#hud.hidden{display:none}#hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(8px + var(--cw-safe-top)) 12px 8px;padding-left:calc(12px + var(--cw-safe-left));padding-right:calc(12px + var(--cw-safe-right));pointer-events:auto;background:linear-gradient(180deg,#0a0a10eb,#0a0a1000)}#hud-turn{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--cw-text);background:var(--cw-panel);padding:8px 16px;border-radius:999px;border:2px solid rgba(255,204,51,.4);white-space:nowrap}#hud-turn .dot{width:16px;height:16px;border-radius:50%;border:2px solid #9a9aa5;flex:none}#hud-turn .dot.white{background:#f5f5f5}#hud-turn .dot.black{background:#2b2b33;border-color:#d6d6dd}#hud-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}#aiThinking{align-self:center;pointer-events:none;padding:8px 18px;font-size:18px;font-weight:700;color:var(--cw-accent);background:var(--cw-panel);border:2px solid var(--cw-accent);border-radius:999px;display:none}#aiThinking.show{display:inline-block}.cw-tray{position:absolute;bottom:calc(12px + var(--cw-safe-bottom));min-height:42px;max-width:44vw;padding:8px 12px;border-radius:var(--cw-radius);font-size:20px;line-height:1.3;pointer-events:none;text-align:left}#tray-white{left:12px;background:#f2f2ee;color:#2b2b33;border:2px solid #2b2b33}#tray-black{right:12px;background:var(--cw-panel);color:#f5f5f5;border:2px solid rgba(255,255,255,.18)}.cw-tray .tray-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.7}.cw-tray .syms{font-size:22px;letter-spacing:2px}.cw-tray .syms.empty{opacity:.35;font-size:15px;letter-spacing:0}.cw-tray .lead{font-weight:800;color:var(--cw-accent);font-size:18px;margin-left:8px}#movelist{position:absolute;top:calc(64px + var(--cw-safe-top));right:12px;width:230px;max-height:42vh;display:none;flex-direction:column;background:var(--cw-panel);border:2px solid rgba(255,255,255,.16);border-radius:var(--cw-radius);pointer-events:auto;overflow:hidden}#movelist.open{display:flex}#movelist-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--cw-muted);border-bottom:1px solid rgba(255,255,255,.1)}#movelist-head button{background:none;border:none;color:var(--cw-muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px}#movelist-body{overflow-y:auto;padding:8px 12px}.mv-row{display:flex;gap:8px;font-size:15px;color:var(--cw-text);padding:2px 0}.mv-num{color:var(--cw-muted);min-width:28px;text-align:right}.mv-san{font-variant-numeric:tabular-nums}.mv-san.last{color:var(--cw-accent);font-weight:700}#movelist-empty{color:var(--cw-muted);font-size:14px}#promo{position:fixed;left:50%;bottom:4%;transform:translate(-50%);display:none;gap:12px;padding:12px 16px;background:var(--cw-panel);border:2px solid var(--cw-border);border-radius:16px;z-index:35}#promo.open{display:flex}#promo button{font-family:var(--cw-font);font-size:40px;line-height:1.2;padding:12px 18px;border:2px solid var(--cw-border);border-radius:14px;background:#ffcc331f;color:var(--cw-accent);cursor:pointer}#promo button:hover{background:#ffcc334d}#banner{position:fixed;left:50%;top:calc(64px + var(--cw-safe-top) + 8px);transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:640px;max-height:96px;padding:8px 16px;background:var(--cw-panel);border:3px solid var(--cw-border);border-radius:18px;z-index:20;text-align:left;opacity:0;pointer-events:none;transition:opacity .5s ease}#banner.show{opacity:1;pointer-events:auto}#banner .banner-left{display:flex;flex-direction:column;gap:2px;min-width:0}#banner-title{font-size:clamp(20px,3.4vw,30px);line-height:1.1;font-weight:800;color:var(--cw-text)}#banner-subtitle{font-size:clamp(13px,1.8vw,17px);color:var(--cw-accent)}#again{flex:none;min-height:56px;font-size:20px;font-weight:800;padding:0 28px;border:3px solid var(--cw-border);border-radius:14px;background:var(--cw-accent);color:#161616;cursor:pointer;font-family:var(--cw-font)}#again:hover{background:#ffe066}@media(max-width:700px),(orientation:portrait)and (max-width:980px){#hud-top{flex-wrap:wrap;padding:calc(6px + var(--cw-safe-top)) 8px 6px;row-gap:6px}#hud-turn{order:1;font-size:15px;padding:6px 12px}#hud-turn .dot{width:14px;height:14px}#aiThinking{order:3;width:100%;text-align:center}#hud-btns{order:2;flex:1 1 100%;justify-content:flex-end;gap:8px}#hud-btns .cw-btn{min-height:44px;min-width:44px;padding:8px 10px;font-size:17px}#banner{max-height:none;flex-wrap:wrap}.cw-tray{bottom:calc(8px + var(--cw-safe-bottom));max-width:46vw;padding:6px 10px}.cw-tray .syms{font-size:19px}#tray-white{left:8px}#tray-black{right:8px}#movelist{top:auto;right:8px;left:8px;bottom:calc(58px + var(--cw-safe-bottom));width:auto;max-height:32vh}#start{gap:14px}#start .cw-btn{font-size:16px;padding:10px 14px}}