:root{--color-bg: oklch(.145 .018 274);--color-shell: oklch(.115 .014 274);--color-surface: oklch(.19 .022 274);--color-surface-raised: oklch(.235 .026 274);--color-surface-deep: oklch(.16 .019 274);--color-ink: oklch(.955 .008 82);--color-muted: oklch(.73 .018 274);--color-border: oklch(.34 .028 274);--color-primary: oklch(.691 .146 74.6);--color-primary-strong: oklch(.61 .15 70);--color-selection: oklch(.62 .155 282);--color-board: oklch(.82 .075 77);--color-board-light: oklch(.875 .055 80);--color-board-line: oklch(.32 .045 65);--color-board-ink: oklch(.22 .035 55);--color-board-state: oklch(.29 .13 282);--color-board-focus: oklch(.24 .08 274);--color-board-alert: oklch(.38 .16 28);--color-success: oklch(.7 .13 152);--color-warning: oklch(.77 .14 82);--color-error: oklch(.66 .18 28);--color-info-soft: oklch(.64 .12 240);--font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Segoe UI", sans-serif;--font-piece: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;--weight-semibold: 600;--weight-bold: 700;--text-caption: .75rem;--text-secondary: .875rem;--text-body: 1rem;--text-subheading: 1.125rem;--text-heading: 1.375rem;--text-title: 1.625rem;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--ease-out: cubic-bezier(.23, 1, .32, 1)}*{box-sizing:border-box}html{background:var(--color-shell);color:var(--color-ink);font-family:var(--font-ui)}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 50% -30%,oklch(.28 .035 264 / .5),transparent 44rem),var(--color-shell)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important}}.app-shell{max-width:1460px;margin:0 auto;padding:clamp(var(--space-xs),2vw,var(--space-xl))}.app-shell__frame{overflow:clip;background:linear-gradient(145deg,var(--color-surface-deep),var(--color-bg));border:1px solid oklch(.38 .025 274);border-radius:var(--radius-lg)}.skip-link{position:fixed;top:-4rem;left:var(--space-md);z-index:2;padding:var(--space-sm) var(--space-md);color:var(--color-bg);background:var(--color-primary);border-radius:var(--radius-sm);transition:top .16s var(--ease-out)}.skip-link:focus{top:var(--space-md)}.start-screen{display:grid;min-height:min(52rem,calc(100vh - 2 * var(--space-xl)));grid-template-rows:auto 1fr auto}.start-hero{max-width:46rem;padding:clamp(var(--space-xl),6vw,5rem) clamp(var(--space-lg),6vw,5rem) clamp(var(--space-xl),5vw,4rem)}.start-hero__eyebrow,.path-kicker{margin-bottom:var(--space-sm);color:var(--color-primary);font-size:var(--text-secondary);font-weight:var(--weight-semibold);letter-spacing:.055em;text-transform:uppercase}.start-hero h1{margin-bottom:var(--space-md);overflow:visible;font-size:clamp(2.35rem,7vw,4.6rem);font-weight:500;letter-spacing:-.045em;line-height:.98;text-overflow:initial;white-space:normal}.start-hero h1:focus{outline:none}.start-hero__lede{max-width:40rem;margin-bottom:0;color:var(--color-muted);font-size:clamp(var(--text-body),2.2vw,var(--text-heading));line-height:1.55;text-wrap:balance}.start-menu{display:grid;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.start-path{display:grid;align-content:start;gap:var(--space-lg);padding:clamp(var(--space-lg),5vw,4rem)}.start-path+.start-path{border-top:1px solid var(--color-border)}.start-path__heading h2{max-width:24rem;margin-bottom:0;font-size:clamp(var(--text-heading),3vw,var(--text-title));font-weight:500}.path-summary{max-width:36rem;margin-bottom:0;color:var(--color-muted);line-height:1.6}.start-path>.button{width:fit-content;min-width:10rem}.lesson-beats{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);margin:0;padding:0;color:var(--color-ink);list-style:none;counter-reset:lesson-beat}.lesson-beats li{counter-increment:lesson-beat}.lesson-beats li:before{content:"0" counter(lesson-beat) " ";color:var(--color-primary);font-size:var(--text-caption);font-variant-numeric:tabular-nums}.difficulty-fieldset{display:grid;max-width:36rem;gap:var(--space-xs);padding:0;margin:0;border:0}.difficulty-fieldset legend{padding:0;margin-bottom:var(--space-sm);font-size:var(--text-secondary);font-weight:var(--weight-semibold)}.difficulty-choice{display:grid;min-height:4.4rem;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-sm);padding:var(--space-sm);cursor:pointer;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.difficulty-choice:has(input:checked){background:var(--color-surface-raised);border-color:var(--color-primary)}.difficulty-choice input{width:1.1rem;height:1.1rem;margin:.15rem 0 0;accent-color:var(--color-primary)}.difficulty-choice span{display:grid;gap:var(--space-2xs)}.difficulty-choice strong{font-weight:var(--weight-semibold)}.difficulty-choice small{color:var(--color-muted);font-size:var(--text-secondary);line-height:1.45}.start-note{max-width:46rem;padding:var(--space-lg) clamp(var(--space-lg),6vw,5rem);color:var(--color-muted);font-size:var(--text-secondary);line-height:1.5}.game-screen{display:grid;min-height:min(56rem,calc(100vh - 2 * var(--space-xl)));gap:var(--space-md)}.game-context{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-content:space-between;min-height:5rem;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border)}.game-context__identity,.game-context__status,.game-context__actions,.turn-status,.rail-actions,.connection-notice,.lesson-footer,.session-confirmation,.session-confirmation__actions,.session-outcome__actions{display:flex;align-items:center}.game-context__identity{grid-column:1;min-width:0;gap:var(--space-md)}.context-label{margin:0;color:var(--color-ink);font-size:var(--text-body);font-weight:var(--weight-semibold);white-space:nowrap}.game-context__divider{width:1px;height:1.25rem;flex:0 0 auto;background:var(--color-border)}h1,h2,p{margin-top:0}h1{margin-bottom:0;overflow:hidden;color:var(--color-ink);font-size:var(--text-subheading);font-weight:500;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}h2{font-size:var(--text-heading);line-height:1.25;text-wrap:balance}.game-context__status{grid-column:2;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-xs);color:var(--color-info-soft);font-size:var(--text-secondary);white-space:nowrap}.game-context__actions{grid-column:3;justify-content:flex-end;gap:var(--space-2xs)}.game-context__actions .button{min-height:2.55rem;padding-inline:var(--space-sm);color:var(--color-muted);border-color:transparent}.game-context h1:focus{outline:none}.turn-status{gap:var(--space-xs)}.turn-status__dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--color-info-soft);box-shadow:0 0 .7rem #3a95cd6b}.check-status{color:var(--color-error);font-weight:var(--weight-bold)}.button,.tab{min-height:44px;padding:.55rem .85rem;color:var(--color-ink);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:transform .14s var(--ease-out),background-color .18s var(--ease-out),border-color .18s var(--ease-out)}.button:active,.tab:active{transform:scale(.97)}.button:disabled{opacity:.5}.button--primary{color:var(--color-bg);font-weight:var(--weight-bold);background:var(--color-primary);border-color:var(--color-primary)}.status-banner{margin:0;padding:var(--space-sm) var(--space-md);line-height:1.5;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.status-banner--error{color:var(--color-ink);border-color:var(--color-error)}.status-banner--warning{border-color:var(--color-warning)}.game-layout{display:grid;align-items:start;gap:var(--space-md);padding:0 var(--space-md) var(--space-md)}.board-table{min-width:0;padding:clamp(var(--space-2xs),1vw,var(--space-sm))}.learning-rail{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;background:linear-gradient(180deg,var(--color-surface),var(--color-surface-deep));border:1px solid var(--color-border);border-radius:var(--radius-md)}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0 var(--space-sm);background:transparent;border-bottom:1px solid var(--color-border)}.tab{min-height:3.1rem;background:transparent;border:0;border-radius:0}.tab[aria-pressed=true]{color:var(--color-primary);background:transparent;box-shadow:inset 0 -2px var(--color-primary)}.rail-content{display:flex;flex-direction:column;min-height:0;padding:var(--space-lg);overflow:auto}.rail-content p{line-height:1.55}.coach-fact{margin-top:var(--space-md);color:var(--color-muted);font-size:var(--text-secondary)}.lesson-footer{justify-content:space-between;gap:var(--space-sm);margin-top:auto;padding-top:var(--space-md);color:var(--color-muted);font-size:var(--text-secondary);border-top:1px solid var(--color-border)}.lesson-complete{color:var(--color-success);font-weight:var(--weight-bold)}.lesson-action{font-weight:var(--weight-semibold)}.rail-actions{flex-wrap:wrap;gap:var(--space-xs)}.rail-actions--stacked{display:grid;margin-top:var(--space-lg)}.rail-actions--stacked .button{width:100%}.button__icon{width:1.2rem;height:1.2rem;margin-right:var(--space-xs);vertical-align:-.25em;fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}.rail-content #coach-title{margin-bottom:var(--space-sm);color:var(--color-primary);font-size:var(--text-secondary);font-weight:var(--weight-semibold);letter-spacing:.02em}.coach-copy p:not(:last-child){margin-bottom:var(--space-md)}.connection-notice{flex-wrap:wrap;gap:var(--space-xs);padding:0 var(--space-md)}.connection-notice .status-banner{flex:1 1 20rem}.session-confirmation,.session-outcome{margin:0 var(--space-md);padding:var(--space-md);border:1px solid var(--color-primary);border-radius:var(--radius-sm)}.session-confirmation{justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);background:var(--color-surface)}.session-confirmation p{flex:1 1 24rem;margin-bottom:0;line-height:1.5}.session-confirmation__actions,.session-outcome__actions{flex-wrap:wrap;gap:var(--space-xs)}.session-outcome{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-lg);background:linear-gradient(115deg,color-mix(in oklch,var(--color-primary) 10%,var(--color-surface)),var(--color-surface-deep))}.session-outcome h2{margin-bottom:var(--space-xs)}.session-outcome p:last-child{max-width:48rem;margin-bottom:0;color:var(--color-muted);line-height:1.5}.move-list{max-height:22rem;margin:0;padding:0;overflow:auto;list-style:none;counter-reset:moves}.move-list li{display:grid;grid-template-columns:2rem 1fr;gap:var(--space-xs);padding:var(--space-xs) 0;border-bottom:1px solid var(--color-border)}.move-list span,.empty-copy,.field-help{color:var(--color-muted)}.move-list span{font-variant-numeric:tabular-nums}.rail-content textarea{width:100%;min-height:7rem;margin:var(--space-xs) 0 var(--space-sm);padding:var(--space-sm);resize:vertical;color:var(--color-ink);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.skeleton{display:grid;gap:var(--space-sm)}.skeleton span{height:1rem;background:var(--color-surface-raised);border-radius:var(--radius-sm)}.loading-state{display:grid;max-width:48rem;gap:var(--space-md);margin:10vh auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:600px){.app-shell{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app-shell__frame{border-right:0;border-left:0;border-radius:0}.start-screen{min-height:100dvh}.start-hero,.start-path,.start-note{padding-right:var(--space-lg);padding-left:var(--space-lg)}.start-hero{padding-top:var(--space-2xl)}.start-path>.button{width:100%}.game-context{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:6.1rem;padding:var(--space-md)}.game-context__identity{grid-column:1 / -1;gap:var(--space-sm)}.game-context__status{grid-column:1 / -1;justify-content:flex-start}.game-context__actions{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap}.game-context__actions .button{min-width:44px;padding-inline:var(--space-xs);font-size:var(--text-secondary)}.game-context__divider{display:none}.game-context h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.game-layout{padding:0 var(--space-xs) var(--space-xs)}.board-table{padding:var(--space-2xs)}.rail-content{min-height:15rem;padding:var(--space-md)}.session-confirmation,.session-outcome{margin:0 var(--space-xs)}.session-outcome{grid-template-columns:1fr;align-items:start}.session-outcome__actions{width:100%}.session-outcome__actions .button{flex:1 1 8rem}.rail-actions--stacked{grid-template-columns:repeat(2,minmax(0,1fr))}.rail-actions--stacked .button{padding-inline:var(--space-xs);overflow-wrap:anywhere}}@media(min-width:760px){.app-shell{padding:var(--space-lg)}}@media(min-width:860px){.start-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.start-path+.start-path{border-top:0;border-left:1px solid var(--color-border)}}@media(min-width:960px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(18rem,22rem);align-items:stretch}.learning-rail{height:100%}}@media(min-width:1240px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(21rem,24rem)}}@media(hover:hover)and (pointer:fine){.button:hover,.tab:hover{background:var(--color-surface-raised);border-color:var(--color-primary)}.tab[aria-pressed=true]:hover{background:transparent}.button--primary:hover{background:var(--color-primary-strong)}}@media(forced-colors:active){.tab[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-2px}}.hand{display:flex;align-items:center;gap:var(--space-sm);width:min(100%,37.15rem);min-height:4.4rem;margin-inline:auto;color:var(--color-ink);container-type:inline-size;--board-gutter: 1.15rem;--board-frame-total: 1.3rem}.hand-label{flex:0 0 auto;color:color-mix(in oklch,var(--color-ink) 76%,var(--color-muted));font-size:var(--text-caption)}.hand-pieces{display:flex;flex:1 1 auto;align-items:end;flex-wrap:wrap;gap:clamp(.2rem,1.4vw,.6rem);min-width:0}.hand-piece{display:grid;grid-template-rows:auto auto;justify-items:center;align-items:center;gap:.12rem;min-width:2.75rem;min-height:2.75rem;padding:0;background:transparent;border:0}.hand-piece__face{width:clamp(1.5rem,calc((100cqi - var(--board-gutter) - var(--board-frame-total) - 4px) / 15),2.375rem);aspect-ratio:5 / 6}.hand-piece:active .hand-piece__face{transform:scale(.97)}.hand-piece.is-selected .hand-piece__face{filter:drop-shadow(0 0 .32rem var(--color-selection)) drop-shadow(1px 2px 0 rgb(91 47 11 / 58%)) drop-shadow(2px 4px 2px rgb(0 0 0 / 26%))}.hand-piece:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.hand-empty{align-self:center;color:var(--color-muted);font-size:var(--text-secondary)}.hand-piece__count{color:var(--color-ink);font-size:.7rem;font-variant-numeric:tabular-nums}.board-wrap{position:relative;width:min(100%,37.15rem);margin:0 auto;padding:1.45rem 1.15rem 1.15rem 0;--board-frame: .65rem}.shogi-board{aspect-ratio:1;width:100%;max-width:36rem;padding:var(--board-frame);border:1px solid #321b07;border-radius:.08rem;background:linear-gradient(100deg,rgb(255 224 139 / 20%),transparent 42%),linear-gradient(145deg,#dca24f,#c98a3b 94%);box-shadow:inset 0 0 0 1px #ffde8561,0 3px 8px #00000047;touch-action:manipulation}.board-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));width:100%;height:100%;overflow:hidden;border:1px solid #51300d;background:radial-gradient(ellipse at 14% 18%,rgb(255 229 151 / 15%),transparent 32%),radial-gradient(ellipse at 84% 82%,rgb(92 42 8 / 9%),transparent 40%),linear-gradient(101deg,transparent 16%,rgb(255 223 137 / 7%) 20%,transparent 27%,rgb(102 49 9 / 6%) 53%,transparent 61%,rgb(255 227 149 / 7%) 80%,transparent 87%),linear-gradient(106deg,#e2a856,#dda14f 48%,#e1a654)}.board-square{position:relative;display:grid;place-items:center;min-width:0;min-height:0;aspect-ratio:1;padding:0;color:var(--color-board-ink);background:transparent;border:0;border-right:1px solid rgb(59 34 8 / 92%);border-bottom:1px solid rgb(59 34 8 / 92%);transition:box-shadow .16s var(--ease-out),background-color .16s var(--ease-out),transform .14s var(--ease-out)}.board-square:nth-child(9n){border-right:0}.board-square:nth-last-child(-n+9){border-bottom:0}.board-square:not([aria-disabled=true]):active{transform:scale(.98)}.board-square[aria-disabled=true]{cursor:default}.board-square.is-last-from{background:#504a7812}.board-square.is-last-to{background:#4869be24;box-shadow:inset 0 0 0 1px #4869be94}.board-square:focus-visible{z-index:3;outline:3px solid #f8edc5;outline-offset:-4px;box-shadow:inset 0 0 0 5px var(--color-board-focus)}.board-square.is-selected{box-shadow:inset 0 0 0 3px var(--color-board-state);background:#3e3aa93d}.board-square.is-check{box-shadow:inset 0 0 0 3px var(--color-board-alert);background:#bb29183d}.piece{position:relative;z-index:1;width:60%;height:72%}.piece>.koma-face{width:100%;height:100%}.koma-face{position:relative;display:grid;place-items:center;aspect-ratio:5 / 6;filter:drop-shadow(1px 2px 0 rgb(91 47 11 / 58%)) drop-shadow(2px 4px 2px rgb(0 0 0 / 26%));transition:transform .14s var(--ease-out),filter .18s var(--ease-out)}.koma-face__body{display:grid;place-items:center;width:100%;height:100%;padding:13% 5% 6%;color:#171108;background:linear-gradient(110deg,rgb(255 240 177 / 88%),transparent 35%),linear-gradient(145deg,#f6d578,#c9862d 95%);clip-path:polygon(50% 0,92% 13%,100% 100%,0 100%,8% 13%);box-shadow:inset 0 1px #fff2bbc2;font-family:var(--font-piece);font-size:clamp(.72rem,2.1vw,1.25rem);font-weight:700;line-height:.86;text-align:center;text-shadow:0 1px 0 rgb(255 239 183 / 72%)}.koma-face__glyph{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:.82}.koma-face--opponent .koma-face__body{transform:rotate(180deg)}.koma-face--evolved .koma-face__body{color:#a82016}.koma-face--promoting{animation:promote .2s var(--ease-out)}.legal-marker{position:absolute;z-index:2;width:clamp(.5rem,27%,1.1rem);aspect-ratio:1;border:0;border-radius:50%;background:#504a78;box-shadow:0 1px 1px #00000026;font-size:0}.board-square:has(.piece) .legal-marker{right:6%;bottom:2%}.check-marker{position:absolute;top:2px;right:4px;padding:0 .15em;color:#fff;background:var(--color-board-alert);font-size:.7rem;font-weight:var(--weight-bold)}.board-coordinates{position:absolute;display:grid;color:color-mix(in oklch,var(--color-ink) 75%,var(--color-muted));font-size:var(--text-caption)}.board-coordinates--files{top:.15rem;right:calc(1.15rem + var(--board-frame) + 1px);left:calc(var(--board-frame) + 1px);grid-template-columns:repeat(9,1fr);text-align:center}.board-coordinates--ranks{top:calc(1.45rem + var(--board-frame) + 1px);right:.18rem;bottom:calc(1.15rem + var(--board-frame) + 1px);grid-template-rows:repeat(9,1fr);align-items:center}.promotion-choice{display:grid;min-inline-size:0;gap:var(--space-xs);margin:var(--space-sm) 0 0;padding:var(--space-md);border:2px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-surface-raised);animation:promotion-in .18s var(--ease-out)}.promotion-choice legend{padding:0;font-weight:var(--weight-bold)}.promotion-choice div{display:flex;flex-wrap:wrap;gap:var(--space-xs)}@media(max-width:360px){.hand{align-items:start;gap:var(--space-xs);--board-gutter: .9rem}.hand-label{width:4.2rem;padding-top:.75rem}.board-wrap{padding:1.2rem .9rem .9rem 0}.board-coordinates--files{right:calc(.9rem + var(--board-frame) + 1px)}.board-coordinates--ranks{top:calc(1.2rem + var(--board-frame) + 1px);bottom:calc(.9rem + var(--board-frame) + 1px)}}@media(forced-colors:active){.hand-piece[aria-pressed=true]{outline:3px solid Highlight;outline-offset:2px}.board-square.is-selected,.board-square.is-check{outline:3px solid CanvasText;outline-offset:-3px}.board-square.is-last-from,.board-square.is-last-to{background:Canvas;box-shadow:inset 0 0 0 2px CanvasText}.legal-marker{background:LinkText;border-color:Canvas}.koma-face{color:CanvasText;filter:none}.koma-face__body{color:CanvasText;background:Canvas;box-shadow:inset 0 0 0 2px CanvasText}}@keyframes promote{0%{opacity:.65;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes promotion-in{0%{opacity:.4;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(hover:hover)and (pointer:fine){.board-square:hover:not(:disabled):not([aria-disabled=true],.is-selected,.is-last-from,.is-last-to,.is-check){background:color-mix(in oklch,var(--color-board-light) 50%,transparent)}}@media(prefers-reduced-motion:reduce){.koma-face--promoting{animation:none;outline:2px solid var(--color-primary)}.promotion-choice{animation:none}}