:root { --ink:#273432; --muted:#667572; --line:#dce9e4; --mint:#8edfc1; --mint-deep:#2f8f70; color-scheme:light; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#fff,#f6fbf8); font-size:16px; line-height:1.8; }
a { color:inherit; }
[hidden] { display:none !important; }
.moving-page { width:min(1120px,calc(100% - 32px)); margin:0 auto 40px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:20px; color:var(--muted); font-size:.86rem; }
.moving-hero { padding:28px 0; }
.series-label { margin:0 0 8px; color:var(--mint-deep); font-size:.78rem; font-weight:800; letter-spacing:.08em; }
.moving-hero h1 { margin:0; font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.35; }
.moving-hero>p:last-child { margin:12px 0 0; max-width:760px; color:#40524f; }
.moving-page .moving-shell { border:1px solid var(--line); border-radius:8px; padding:24px; background:#fff; box-shadow:0 18px 45px rgba(45,92,78,.1); }
.moving-page button,.moving-page select { font:inherit; }
.moving-page button { min-height:44px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:700; }
.moving-page button:disabled { opacity:.5; cursor:default; }
.moving-page button:focus-visible,.moving-page select:focus-visible,#game-canvas:focus-visible { outline:3px solid #216f59; outline-offset:3px; }
.moving-page .primary-button { border-color:#78cfb0; background:#effbf6; color:#216f59; }
.level-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
.selection-rows { display:contents; }
.level-row label { font-weight:700; }
.level-row select { min-height:44px; max-width:100%; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
#level-hint { color:var(--muted); font-size:.9rem; }
.status-panel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.status-panel>div { padding:8px 12px; background:#fbfffd; border:1px solid #e7f1ed; border-radius:8px; }
.status-panel span { display:block; font-size:.75rem; color:var(--mint-deep); font-weight:700; }
.status-panel strong { display:block; font-size:1.15rem; line-height:1.5; }
.play-layout { display:grid; gap:14px; }
.board-wrap { position:relative; width:100%; min-width:0; display:grid; grid-template-rows:56px auto minmax(120px,auto) auto; gap:8px; background:#f3f6f4; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.game-menu { position:absolute; inset:56px 8px 8px; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; text-align:center; overflow:auto; }
.game-menu h2 { margin:0 0 16px; font-size:clamp(1.1rem,3vw,1.5rem); }
.game-menu p { margin:8px 0; }
.game-menu .operation-description { margin:6px 0; font-size:.85rem; line-height:1.5; }
.menu-buttons { display:flex; justify-content:center; gap:16px; }
.difficulty-buttons { flex-wrap:wrap; gap:8px; }
.menu-buttons button { min-width:100px; }
#players-back-button { margin-top:12px; }
#menu-message { color:var(--muted); font-size:.85rem; }
.moving-shell #game-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; aspect-ratio:auto; z-index:0; }
.play-controls { min-width:0; }
.control-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.touch-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin:12px 0; }
.touch-controls button { touch-action:none; user-select:none; -webkit-user-select:none; min-width:48px; }
.touch-controls button.is-held { background:#d7f4e7; border-color:var(--mint-deep); }
.direction-pad { display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(3,44px); gap:4px; }
.direction-pad [data-action="up"] { grid-area:1/2; }
.direction-pad [data-action="left"] { grid-area:2/1; }
.direction-pad span { grid-area:2/2; font-size:.75rem; align-self:center; text-align:center; color:var(--muted); }
.direction-pad [data-action="right"] { grid-area:2/3; }
.direction-pad [data-action="down"] { grid-area:3/2; }
.rotation-pad { display:grid; gap:8px; }
.rotation-pad small { font-size:.75rem; color:var(--muted); }
.mode-note { color:var(--muted); font-size:.85rem; }
.carrier-controls { gap:12px; align-items:flex-start; }
.carrier-pad { min-width:0; }
.carrier-pad>strong { display:block; text-align:center; margin-bottom:4px; font-size:.85rem; }
.carrier-pad small { font-size:.7rem; font-weight:400; }
.red-pad>strong { color:#a72d32; }
.blue-pad>strong { color:#225b9b; }
.red-pad button.is-held { background:#ffe0df; border-color:#a72d32; }
.blue-pad button.is-held { background:#deedff; border-color:#225b9b; }
#game-message { margin:8px 0 0; text-align:center; font-size:.92rem; color:#40524f; }
.result-panel { margin-top:12px; border:1px solid #78cfb0; border-radius:8px; background:#effbf6; padding:14px; text-align:center; }
.result-panel h2 { margin:0; font-size:1.2rem; }
.result-panel p { margin:6px 0 12px; }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.result-actions button { padding:8px; font-size:.85rem; }
.info-section { display:grid; grid-template-columns:1fr; gap:20px; padding:28px 0; }
.info-section article,.related-section { border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.8); padding:18px; }
.info-section h2,.related-section h2 { margin:0 0 8px; font-size:1.1rem; }
.info-section p,.related-section p { margin:0; color:var(--muted); }
.info-section article { padding:24px; font-size:16px; line-height:1.7; color:var(--ink); }
.info-section h2 { margin:0 0 20px; font-size:1.25rem; color:#216f59; }
.info-section h3 { margin:0 0 10px; font-size:1rem; }
.info-section h3:not(:first-child) { margin-top:24px; }
.info-section p { color:var(--ink); margin:0 0 12px; }
.info-section ol,.info-section ul { margin:0; padding-left:1.5em; }
.info-section li { margin:0 0 12px; padding-left:3px; }
.info-section kbd { display:inline-block; padding:0 5px; border:1px solid var(--line); border-radius:4px; background:#effbf6; color:#216f59; font:inherit; font-weight:700; }
.info-section .guide-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
@media(max-width:800px) {
 .info-section article { padding:18px; }
 .info-section .guide-columns { grid-template-columns:1fr; gap:24px; }
}

.board-toolbar { grid-row:1; z-index:4; }
.world-viewport { grid-row:3; margin:0 8px; min-width:0; min-height:120px; aspect-ratio:3/2; max-height:560px; pointer-events:none; }
#game-status { grid-row:2; margin:0 8px; z-index:1; }
#game-controls { grid-row:4; padding:0 8px 8px; z-index:2; }
#game-settings { position:absolute; top:8px; left:8px; z-index:5; max-width:calc(100% - 140px); }
#game-settings summary { display:flex; align-items:center; justify-content:center; min-height:44px; min-width:88px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; font-size:.85rem; font-weight:700; list-style:none; }
#game-settings summary::-webkit-details-marker { display:none; }
#game-settings summary:focus-visible { outline:3px solid #216f59; outline-offset:2px; }
#game-settings[open] { max-width:calc(100% - 16px); }
#game-settings[open] .selection-rows { display:block; position:absolute; top:52px; left:0; width:min(460px,calc(100vw - 64px)); max-height:min(420px,var(--settings-height,calc(100dvh - 84px))); padding:12px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 8px 24px #27343222; }
#game-settings .level-row { margin:0 0 8px; }
.moving-shell .game-fullscreen-open,.moving-shell .game-fullscreen-close { position:absolute; top:8px; right:8px; left:auto; min-height:44px; min-width:100px; padding:6px 10px; z-index:6; }
.moving-shell .game-fullscreen-close { min-width:124px; }
.moving-page .moving-shell.is-game-fullscreen { padding:0!important; overflow:hidden!important; display:block; }
.moving-shell.is-game-fullscreen .play-layout { display:block; height:100%; }
.moving-shell.is-game-fullscreen .board-wrap { height:100%; border:0; border-radius:0; grid-template-rows:56px auto minmax(120px,1fr) auto; gap:6px; }
.moving-shell.is-game-fullscreen .world-viewport { aspect-ratio:auto; max-height:none; }
.moving-shell.is-game-fullscreen .board-wrap { touch-action:none; }
.moving-shell.is-game-fullscreen #control-help { display:none; }
.is-game-fullscreen #game-message { font-size:.8rem; margin:4px 0; }
.is-game-fullscreen .status-panel>div { display:flex; align-items:center; justify-content:center; gap:6px; padding:4px; }
.is-game-fullscreen .status-panel strong { font-size:.9rem; }
.is-game-fullscreen .status-panel span { font-size:.7rem; }
.is-game-fullscreen .touch-controls { margin:6px 0; }
.is-game-fullscreen .result-panel { padding:8px; margin:0; }
@media(max-width:640px) {
 .moving-page { width:calc(100% - 24px); }
 .moving-page .moving-shell { padding:12px; }
 .board-wrap { height:640px; grid-template-rows:56px auto minmax(120px,1fr) auto; gap:6px; }
 .world-viewport { aspect-ratio:auto; max-height:none; }
 .status-panel>div { padding:4px; }
 .status-panel strong { font-size:.85rem; }
 .status-panel span { font-size:.65rem; }
 .is-game-fullscreen .status-panel>div { flex-direction:column; gap:0; }
 .info-section { grid-template-columns:1fr; }
 .touch-controls { gap:12px; margin:6px 0; }
 .carrier-controls { gap:8px; }
 .carrier-controls .direction-pad { grid-template-columns:repeat(3,44px); gap:2px; }
 .carrier-controls button { min-width:44px; padding:6px; }
 .control-row { display:grid; grid-template-columns:repeat(3,max-content) minmax(0,1fr); gap:4px; }
 .control-row button { min-width:44px; padding:6px 4px; font-size:.8rem; white-space:nowrap; }
 #game-message { font-size:.8rem; margin:4px 0; }
 #game-settings[open] .selection-rows { width:calc(100vw - 68px); max-height:min(330px,var(--settings-height,calc(100dvh - 84px))); }
 .result-panel { padding:8px; margin:0; }
}
@media(max-width:360px) {
 .moving-page { width:calc(100% - 12px); }
 .moving-page .moving-shell { padding:0; }
 .carrier-controls { gap:4px; }
}
@media(min-width:650px) {
 .moving-shell.is-game-fullscreen .board-wrap { grid-template-columns:minmax(0,1fr) 308px; grid-template-rows:56px minmax(120px,1fr); gap:8px; }
 .is-game-fullscreen .board-toolbar { grid-column:1/3; }
 .is-game-fullscreen #game-status { position:absolute; grid-area:auto; top:8px; left:106px; right:140px; margin:0; min-height:44px; }
 .is-game-fullscreen .world-viewport { grid-column:1; grid-row:2; margin:0 0 8px 8px; }
 .is-game-fullscreen #game-controls { grid-column:2; grid-row:2; align-self:center; padding:0 8px 8px; }
 .is-game-fullscreen .control-row { display:grid; grid-template-columns:repeat(3,max-content) minmax(0,1fr); gap:4px; }
 .is-game-fullscreen .control-row button { min-width:44px; padding:6px 4px; font-size:.8rem; white-space:nowrap; }
 .is-game-fullscreen .carrier-controls { gap:8px; }
 .is-game-fullscreen .carrier-controls .direction-pad { grid-template-columns:repeat(3,44px); gap:2px; }
 .is-game-fullscreen .carrier-controls button { min-width:44px; padding:6px; }
 .is-game-fullscreen.is-menu .world-viewport { grid-column:1/3; }
}