: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__status{display:flex;gap:8px;align-items:stretch}.play-screen__moves{flex:1;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}.stage-list{display:flex;flex-direction:column;gap:16px;width:100%;max-width:1100px;margin:0 auto;padding:16px 20px 24px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);min-height:0;overflow-y:auto}.stage-list__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.stage-list__title{margin:0;font-size:24px}.stage-list__message{display:flex;flex-direction:column;align-items:center;gap:12px;margin:24px 0;color:var(--color-text-muted);font-size:16px;text-align:center}.stage-list__message p{margin:0}.stage-list__error{margin:0;padding:8px 12px;border:1px solid #ff8a8a;border-radius:8px;background:#d3252f33;color:#ffd6d6}.stage-list__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:0;padding:0;list-style:none}.stage-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"author play" "size play" "date play";gap:4px 12px;align-items:center;padding:12px 14px;border:1px solid #2a5aa6;border-radius:10px;background:var(--color-surface-strong);box-shadow:0 0 6px #48a0ff40}.stage-card__author{grid-area:author;overflow:hidden;font-size:17px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.stage-card__size{grid-area:size;color:var(--color-text-muted);font-size:14px}.stage-card__date{grid-area:date;color:var(--color-text-muted);font-size:13px}.stage-card__play{grid-area:play}.stage-list__more{display:flex;flex-direction:column;align-items:center;gap:8px}.play-screen__notice{margin:0;padding:8px 12px;border:1px solid #f2c94c;border-radius:10px;background:#f2c94c26;color:#ffe9a8;font-size:14px;font-weight:700}.editor-screen__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.editor-screen__title{margin:0;font-size:22px}.editor-screen__sizes{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.editor-screen__size,.editor-screen__author{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--color-text-muted)}.editor-screen__size select,.editor-screen__author input{padding:6px 8px;border:1px solid #50678f;border-radius:6px;background:var(--color-surface-strong);color:var(--color-text);font:inherit;font-size:15px}.editor-screen__tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-screen__tool{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #50678f;border-radius:8px;background:transparent;color:var(--color-text);font:inherit;font-size:14px;cursor:pointer}.editor-screen__tool[aria-pressed=true]{border-color:#7fb6ff;background:#2e74d673;box-shadow:0 0 6px var(--color-glow)}.editor-screen__tool .legend__swatch{width:24px;height:24px}.editor-screen__ok,.editor-screen__clear-status{margin:0;font-size:14px}.editor-screen__ok{color:#8ff0a4}.editor-screen__errors{margin:0;padding-left:20px;color:#ffb3b3;font-size:14px}.editor-screen__hint{margin:0;color:#ffb3b3;font-size:13px}.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__note{margin:0;color:#8ff0a4;font-weight:700}.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:not(:disabled){background:#3b84ea}.button:disabled{cursor:default;opacity:.55}.button--secondary{background:transparent}.button--secondary:hover:not(:disabled){background:#7fb6ff26}