:root{--color-bg-top: #1b3f86;--color-bg-bottom: #0b2457;--color-surface: #0c2452;--color-surface-strong: #081a3e;--color-border: #2e74d6;--color-glow: rgba(72, 160, 255, .55);--color-text: #eaf3ff;--color-text-muted: #a9c3ea;--color-floor: #f5f7fb;--color-wall: #182234;--color-start: #1f9e4a;--color-goal: #d3252f;--color-player: #1550ee;--color-pad: #2b3f62;--color-pad-hover: #37507a}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Hiragino Sans,Noto Sans JP,sans-serif;color:var(--color-text);background:linear-gradient(180deg,var(--color-bg-top),var(--color-bg-bottom)) fixed}.app{display:flex;flex-direction:column;gap:12px;height:100vh;padding:12px}.app-main{flex:1;min-height:0;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:center;gap:24px;padding:4px 16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-strong);box-shadow:0 0 12px var(--color-glow)}.app-header__title{margin:0;font-size:clamp(24px,4vw,40px);font-weight:900;line-height:1.2;letter-spacing:.1em;text-shadow:0 0 12px #49b6ff,0 0 2px #ffffff}.cube-icon{width:clamp(24px,3vw,36px);height:clamp(24px,3vw,36px);fill:none;stroke:#4fc0ff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 6px #49b6ff)}.play-screen{flex:1;min-height:0;display:flex;gap:12px}.play-screen__board{flex:1;min-width:0;container-type:size;display:flex;align-items:center;justify-content:center;padding:12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);box-shadow:inset 0 0 24px #00000059}.play-screen__side{display:flex;flex-direction:column;gap:12px;width:360px;flex-shrink:0;overflow-y:auto}.play-screen__moves{margin:0;padding:8px 16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);font-size:18px;font-weight:700}.play-screen__moves output{margin-left:8px;font-size:24px}.side-card{display:flex;flex-direction:column;gap:12px;padding:12px 16px 16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}.side-card__title{margin:0;font-size:20px}.side-card--controls{flex:1}.side-card__pads{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}.side-card__note{margin:0;color:var(--color-text-muted);font-size:13px}.maze-board{--avail-w: 100cqw;--avail-h: 100cqh;--cell-size: clamp( 12px, min( calc(var(--avail-w) / (var(--panels-x) * (var(--cells-x) + 1.7) - .5)), calc(var(--avail-h) / (var(--panels-y) * (var(--cells-y) + 2.5) - .5)) ), 64px );display:grid;grid-template-columns:repeat(var(--panels-x),auto);gap:calc(var(--cell-size) * .5)}@media(max-width:900px){.app{height:auto;min-height:100vh}.play-screen{flex-direction:column}.play-screen__board{container-type:inline-size}.play-screen__side{width:auto;overflow-y:visible}.maze-board{--avail-h: 70svh}}.maze-panel{display:flex;flex-direction:column;align-items:center;gap:calc(var(--cell-size) * .2);padding:calc(var(--cell-size) * .25) calc(var(--cell-size) * .4) calc(var(--cell-size) * .4);border:2px solid var(--color-border);border-radius:10px;background:var(--color-surface-strong);box-shadow:0 0 8px var(--color-glow)}.maze-panel__label{font-size:clamp(11px,calc(var(--cell-size) * .5),20px);font-weight:700;line-height:1.2}.maze-panel__grid{display:grid;grid-template-columns:repeat(var(--cells-x),var(--cell-size));grid-auto-rows:var(--cell-size);border:2px solid #20335a;background:#20335a;gap:1px}.maze-cell{position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:none;font:inherit;font-weight:800;color:#fff}button.maze-cell{cursor:pointer}.maze-cell--floor{background:var(--color-floor)}.maze-cell--wall{background:var(--color-wall)}.maze-cell--start{background:var(--color-start)}.maze-cell--goal{background:var(--color-goal)}.maze-cell--invalid{background:repeating-linear-gradient(45deg,#ff9f1a,#ff9f1a 4px,#ffd166 4px,#ffd166 8px)}.maze-cell__mark{font-size:calc(var(--cell-size) * .6);line-height:1}.maze-cell__player{position:absolute;width:62%;height:62%;border-radius:50%;background:var(--color-player);box-shadow:0 0 0 2px #fff,0 0 8px #1550eecc}.control-pad{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 8px 12px;border:1px solid #2a5aa6;border-radius:10px}.control-pad__title{align-self:flex-start;margin:0;font-size:13px;font-weight:700;white-space:nowrap}.control-pad__grid{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}.control-pad__button,.control-pad__center{display:flex;align-items:center;justify-content:center;background:var(--color-pad);border:1px solid #50678f}.control-pad__button{padding:0;border-radius:10px;color:var(--color-text);cursor:pointer;box-shadow:0 3px #111c30}.control-pad__button:hover:not(:disabled){background:var(--color-pad-hover)}.control-pad__button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #111c30}.control-pad__button:disabled{cursor:default;opacity:.5}.control-pad__button--up{grid-area:1 / 2}.control-pad__button--left{grid-area:2 / 1}.control-pad__center{grid-area:2 / 2;border-radius:0}.control-pad__button--right{grid-area:2 / 3}.control-pad__button--down{grid-area:3 / 2}.control-pad__icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0;padding:0;list-style:none}.legend__item{display:flex;align-items:center;gap:10px;font-size:15px}.legend__item--wide{grid-column:1 / -1}.legend__swatch{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #50678f;border-radius:6px;font-weight:800;color:#fff}.legend__swatch--player{border:none}.legend__swatch--player .maze-cell__player{width:26px;height:26px}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#030a1a99}.dialog{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:280px;padding:24px 32px;border:2px solid var(--color-border);border-radius:14px;background:var(--color-surface-strong);box-shadow:0 0 24px var(--color-glow)}.dialog__title{margin:0;font-size:32px;text-shadow:0 0 10px #49b6ff}.dialog__message{margin:0;font-size:18px}.dialog__actions{display:flex;gap:12px}.button{padding:10px 20px;border:1px solid #7fb6ff;border-radius:8px;background:#2e74d6;color:#fff;font:inherit;font-weight:700;cursor:pointer}.button:hover{background:#3b84ea}.button--secondary{background:transparent}.button--secondary:hover{background:#7fb6ff26}