:root{--bg:#faf3e6;--bg-game:#f4ead8;--surface:#fffdf7;--surface-sunken:#f7efe0;--surface-muted:#f2e7d2;--text:#4a3b2f;--text-soft:#7d6b58;--text-dim:#a2917c;--accent:#f0b429;--accent-deep:#d29a13;--accent-ink:#5e440a;--danger:#b03a3a;--shadow-card:#e9dcc4;--shadow-muted:#ddcdb1;--hairline:#d8c8ac;--board-light:#e9d6b8;--board-dark:#8f5f3d;--piece-dark:#4a3527;--piece-light:#b9a68c;--radius-pill:999px;--radius-tier:18px;--radius-card:20px;--radius-panel:28px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Jua,Apple SD Gothic Neo,system-ui,sans-serif}h1,h2{margin:0;font-weight:400}button{font:inherit;cursor:pointer}.pill{--pill-shadow:var(--shadow-muted);border-radius:var(--radius-pill);background:var(--surface-muted);color:var(--text-soft);box-shadow:0 3px 0 var(--pill-shadow);border:0;padding:15px 30px;font-size:17px;transition:transform .12s,box-shadow .12s}.pill.primary{--pill-shadow:var(--accent-deep);background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 var(--pill-shadow)}.pill.quiet{--pill-shadow:var(--shadow-card);background:var(--surface);padding:11px 22px;font-size:14px}.pill.block{width:100%}.pill:hover{transform:translateY(-2px)}.pill:active{box-shadow:none;transform:translateY(3px)}.card{border-radius:var(--radius-card);background:var(--surface);box-shadow:0 3px 0 var(--shadow-card);padding:20px 22px}.panel .card{background:var(--surface-sunken);box-shadow:none}.card-title{color:var(--accent-deep);margin-bottom:10px;font-size:16px}.checker{background-color:var(--board-light);background-image:conic-gradient(var(--board-dark) 0 25%, var(--board-light) 0 50%, var(--board-dark) 0 75%, var(--board-light) 0)}.icon-button{border-radius:var(--radius-pill);background:var(--surface);width:50px;height:50px;color:var(--text-soft);box-shadow:0 3px 0 var(--shadow-card);border:0;place-items:center;padding:0;transition:transform .12s;display:grid}.icon-button:hover{transform:translateY(-2px)}.icon-button:active{box-shadow:none;transform:translateY(3px)}.main-screen{grid-template-columns:minmax(0,672px) minmax(0,1fr);align-items:start;gap:48px;max-width:1440px;height:100%;margin-inline:auto;padding:60px clamp(24px,6vw,96px);display:grid;overflow-y:auto}.main-brand{align-items:center;gap:16px;display:flex}.brand-mark{background-size:26px 26px;border-radius:16px;flex:none;width:52px;height:52px;box-shadow:0 3px #d9b98d}.main-brand h1{font-size:44px;line-height:1}.main-actions{gap:10px;margin-left:auto;display:flex}.start-step{min-height:430px;margin-top:30px}.step-title{color:var(--text);margin:0 0 16px;font-size:20px}.step-back{border-radius:var(--radius-pill);background:var(--surface-muted);color:var(--text-dim);border:0;align-items:center;gap:4px;margin-bottom:14px;padding:8px 16px 8px 10px;font-size:15px;transition:color .15s;display:flex}.step-back:hover{color:var(--text)}.board-art{aspect-ratio:1;filter:drop-shadow(0 20px 34px #7a5c3e38);background:#a4703f;border-radius:20px;grid-template:repeat(8,1fr)/repeat(8,1fr);width:min(528px,100%);padding:16px;display:grid;position:relative;transform:rotate(-3.5deg)}.board-art-squares{background-size:25% 25%;border-radius:4px;position:absolute;inset:16px}.board-art-piece{color:var(--piece-dark);text-shadow:0 2px 3px #4a35276b;place-items:center;font-size:clamp(28px,3.6vw,52px);line-height:1;display:grid;position:relative}.board-art-piece.light{color:var(--surface);text-shadow:0 2px 3px #4a352752}.tier-list{flex-direction:column;gap:10px;display:flex}.tier{text-align:left;border:2px solid var(--shadow-card);border-radius:var(--radius-tier);background:var(--surface);width:100%;box-shadow:0 3px 0 var(--shadow-card);grid-template-columns:46px 92px minmax(0,1fr);align-items:center;gap:16px;padding:11px 18px 11px 11px;transition:transform .12s;display:grid}.tier:hover{transform:translateY(-2px)}.tier-icon{background:var(--tier-tint);width:46px;height:46px;color:var(--tier-ink);border-radius:13px;place-items:center;font-size:26px;line-height:1;display:grid}.tier-name{color:var(--text);font-size:19px}.tier-desc{text-align:right;color:var(--text-dim);font-size:14px}.tier[data-tier=novice]{--tier-tint:#e3f0da;--tier-ink:#4f8f3c}.tier[data-tier=easy]{--tier-tint:#dbe9f4;--tier-ink:#3d7ba8}.tier[data-tier=intermediate]{--tier-tint:#fbeccb;--tier-ink:#b8860b}.tier[data-tier=hard]{--tier-tint:#fadfc8;--tier-ink:#c2691f}.tier[data-tier=master]{--tier-tint:#f6dada;--tier-ink:#b03a3a}.tier.is-active{border-color:var(--accent-deep);background:var(--accent);box-shadow:0 4px 0 var(--accent-deep)}.tier.is-active .tier-icon{background:var(--surface)}.tier.is-active .tier-name{color:var(--accent-ink)}.tier.is-active .tier-desc{color:#5e440ab8}.color-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.color-card{border:2px solid var(--shadow-card);border-radius:var(--radius-tier);background:var(--surface);box-shadow:0 3px 0 var(--shadow-card);color:var(--text-soft);flex-direction:column;align-items:center;gap:12px;padding:24px 12px;font-size:17px;transition:transform .12s;display:flex}.color-card:hover{transform:translateY(-2px)}.color-card.is-active{border-color:var(--accent-deep);background:var(--accent);box-shadow:0 4px 0 var(--accent-deep);color:var(--accent-ink)}.color-card .chip-dot{width:42px;height:42px}.chip-row{gap:10px;display:flex}.chip{border:2px solid var(--shadow-card);border-radius:var(--radius-pill);color:var(--text-dim);background:0 0;align-items:center;gap:9px;padding:10px 20px;font-size:15px;transition:border-color .15s;display:flex}.chip:hover{border-color:var(--accent)}.chip.is-active{border-color:var(--accent);background:var(--surface);color:var(--text)}.chip-dot{border:1px solid var(--hairline);border-radius:50%;width:16px;height:16px}.chip-dot.white{background:var(--surface)}.chip-dot.black{background:var(--piece-dark)}.chip-dot.random{background:linear-gradient(135deg, var(--surface) 50%, var(--piece-dark) 50%)}.start-row{align-items:center;gap:20px;margin-top:28px;display:flex}.start-row .pill.primary{padding:17px 46px;font-size:19px}.start-hint{color:var(--text-dim);font-size:13px}.stack{flex-direction:column;gap:20px;display:flex}.help-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.help-row{grid-template-columns:62px minmax(0,1fr);align-items:baseline;gap:14px;padding:9px 0;display:grid}.help-term{color:var(--text);font-size:15px}.help-desc{color:var(--text-dim);font-size:13.5px;line-height:1.6}.piece-guide{justify-content:space-between;gap:12px;display:flex}.piece-guide-item{flex-direction:column;align-items:center;gap:8px;display:flex}.piece-board{width:90px;height:90px;box-shadow:0 2px 0 var(--shadow-card);background-size:36px 36px;border-radius:14px;position:relative;overflow:hidden}.piece-board svg{position:absolute;inset:0}.move-dot{fill:#4ade80}.move-dot.extend{opacity:.48}.move-dot.capture{fill:none;stroke:#4ade80;stroke-width:1.4px}.piece-glyph{color:#5b4636;text-shadow:0 1px 2px #5a46324d;place-items:center;font-size:30px;line-height:1;display:grid;position:absolute;inset:0}.piece-label{color:var(--text-soft);font-size:14px}.setting-name{color:var(--text);font-size:16px}.setting-row{justify-content:space-between;align-items:center;gap:18px;padding:14px 0;display:flex}.setting-text{flex-direction:column;gap:4px;display:flex}.setting-desc{color:var(--text-dim);font-size:13px}.switch{border-radius:var(--radius-pill);background:#e3d5bd;border:0;flex:none;width:52px;height:30px;padding:0;position:relative;box-shadow:inset 0 2px 4px #7a5c3e24}.switch.is-on{background:var(--accent)}.switch-knob{background:var(--surface);border-radius:50%;width:24px;height:24px;transition:left .16s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #7a5c3e4d}.switch.is-on .switch-knob{left:25px}.settings-footer{justify-content:space-between;align-items:center;gap:18px;padding:0 4px;display:flex}.settings-footer span{color:var(--text-dim);font-size:13px}.game-screen{background:var(--bg-game);height:100%;position:relative}.chess-canvas{touch-action:none;width:100%;height:100%;display:block}.game-overlay{pointer-events:none;justify-content:space-between;align-items:flex-start;gap:16px;display:flex;position:absolute;top:clamp(16px,3.4vw,44px);left:clamp(16px,3.6vw,52px);right:clamp(16px,3.6vw,52px)}.game-overlay>*{pointer-events:auto}.turn-pill{border-radius:var(--radius-pill);background:var(--surface);box-shadow:0 3px 0 var(--shadow-card);align-items:center;gap:11px;padding:12px 22px;font-size:16px;display:flex}.turn-dot{border:1px solid var(--hairline);border-radius:50%;width:14px;height:14px}.turn-dot.light{background:var(--surface)}.turn-dot.dark{background:var(--piece-dark)}.game-note{border-radius:var(--radius-pill);background:var(--surface);color:var(--text-dim);box-shadow:0 3px 0 var(--shadow-card);margin:10px 0 0;padding:8px 18px;font-size:14px}.game-note.warn{color:var(--accent-ink);background:var(--accent);box-shadow:0 3px 0 var(--accent-deep)}.game-note.error{color:var(--danger)}.note-action{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.note-action:hover{text-decoration:none}.app-crash{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100dvh;padding:32px;display:flex}.app-crash-detail{max-width:42ch;color:var(--text-dim);word-break:break-word;margin:0;font-size:14px}.ending-banner{border-radius:var(--radius-panel);background:var(--surface);box-shadow:0 5px 0 var(--shadow-card);text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:4px;padding:20px 44px;animation:.3s ease-out both ending-pop;display:flex;position:absolute;top:22%;left:50%;transform:translate(-50%,-50%)}.ending-mark{color:var(--accent-deep);font-size:34px;line-height:1}.ending-headline{color:var(--text);font-size:30px;font-weight:400;line-height:1.2}.ending-detail{color:var(--text-soft);font-size:15px}@keyframes ending-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.88)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#f4ead8cc;place-items:center;padding:24px;display:grid;position:absolute;inset:0;overflow-y:auto}.panel{border-radius:var(--radius-panel);background:var(--surface);width:360px;max-width:100%;box-shadow:0 8px 0 var(--shadow-card), 0 28px 50px #7a5c3e33;flex-direction:column;gap:12px;padding:32px 30px;display:flex}.panel-title{text-align:center;font-size:24px}.panel-sub{text-align:center;color:var(--text-dim);margin:0 0 12px;font-size:14px}.promotion-choices{justify-content:center;gap:10px;display:flex}.promotion-choice{border:2px solid var(--shadow-card);border-radius:var(--radius-tier);background:var(--surface);min-width:72px;color:var(--text-soft);flex-direction:column;align-items:center;gap:6px;padding:12px 10px;font-size:13px;transition:border-color .15s,transform .12s;display:flex}.promotion-choice:hover{border-color:var(--accent);transform:translateY(-2px)}.glyph{color:var(--text);font-size:34px;line-height:1}.panel.help{width:760px}.panel.settings{width:460px}.panel.result{gap:22px;width:940px;padding:34px 38px}.result-head{justify-content:space-between;align-items:center;gap:28px;display:flex}.result-title{align-items:center;gap:18px;display:flex}.result-mark{border-radius:var(--radius-card);color:#b8860b;background:#fbeccb;flex:none;place-items:center;width:62px;height:62px;font-size:34px;line-height:1;display:grid}.result-mark.draw{color:var(--text-soft);background:#eae2d2}.result-text{flex-direction:column;gap:5px;display:flex}.result-headline{font-size:28px}.result-detail{color:var(--text-dim);font-size:15px}.result-score{border-radius:var(--radius-pill);background:var(--accent);box-shadow:0 4px 0 var(--accent-deep);color:var(--accent-ink);flex:none;padding:12px 26px;font-size:26px}.move-list{border-radius:var(--radius-card);background:var(--surface-sunken);padding:20px 24px}.move-columns{columns:2;column-gap:56px;margin:0;padding:0;list-style:none}.move-row{break-inside:avoid;font-variant-numeric:tabular-nums;grid-template-columns:30px 1fr 1fr;gap:12px;padding:4px 0;font-size:14px;display:grid}.move-number{text-align:right;color:var(--text-dim)}.move-san{color:var(--text)}.captures{flex-direction:column;gap:10px;display:flex}.capture-row{align-items:center;gap:14px;display:flex}.capture-label{width:84px;color:var(--text-dim);flex:none;font-size:13px}.capture-pieces{flex-wrap:wrap;gap:5px;font-size:22px;line-height:1;display:flex}.capture-pieces.light{color:var(--piece-light)}.capture-pieces.dark{color:var(--piece-dark)}.capture-none{color:var(--text-dim);font-size:13px}.result-actions{align-items:center;gap:12px;display:flex}.push-right{margin-left:auto}.muted{color:var(--text-dim);margin:0;font-size:13px}@media (width<=1180px){.main-screen{grid-template-columns:minmax(0,1fr)}.board-art{display:none}}@media (width<=760px){.main-screen{padding:32px 20px}.main-brand h1{font-size:34px}.help-grid{grid-template-columns:minmax(0,1fr)}.move-columns{columns:1}.piece-guide{flex-wrap:wrap;justify-content:center}.result-head{flex-direction:column;align-items:flex-start;gap:16px}.color-cards{grid-template-columns:minmax(0,1fr)}.color-card{flex-direction:row;justify-content:center;padding:16px 12px}.panel.help,.panel.settings{width:100%}.panel.result{padding:24px 20px}.result-actions{flex-wrap:wrap}.push-right{margin-left:0}}@media (prefers-reduced-motion:reduce){.pill,.tier,.color-card,.icon-button,.promotion-choice,.switch-knob{transition:none}.pill:hover,.tier:hover,.color-card:hover,.icon-button:hover,.promotion-choice:hover{transform:none}.ending-banner{animation:none}}