:root { color-scheme: dark; font-family: "Yu Gothic UI", "Meiryo", sans-serif; background: #071022; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #172858, #060b19 65%); }
.game-shell { width: min(1280px, 100%); }
.game-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #4062a0; box-shadow: 0 26px 85px #000b, inset 0 0 0 4px #0b1734; background: #0c1730; }
.game-frame button:focus-visible { outline:2px solid #fff29b; outline-offset:3px; box-shadow:0 0 0 4px #fff19a55,0 0 18px #ffe76099; }
.game-frame::before,.game-frame::after { content:''; position:absolute; z-index:9; left:0; right:0; pointer-events:none; background:#000; opacity:0; transition:opacity .16s ease; }
.game-frame::before { top:0; height:18%; }.game-frame::after { bottom:0; height:11%; }
.game-frame.is-dialogue::before,.game-frame.is-dialogue::after { opacity:1; }
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.hud { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; padding: 26px 32px; color: #f4fbff; text-shadow: 2px 2px #0b1734; font-weight: 800; letter-spacing: .09em; }
.brand { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, 2.2vw, 31px); }
.chapter-label { display:block; margin:7px 0 0 51px; color:#c3dcfb; font-size:10px; line-height:1.45; letter-spacing:.08em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #9cecff; color: #9cecff; box-shadow: 0 0 14px #22c7ff; }
.shard-count { font-size: 32px; color: #d9f8ff; letter-spacing: .25em; }
.completion { display: grid; grid-template-columns: auto auto; column-gap: 18px; align-items: baseline; font-size: 14px; }
.completion strong { font-size: 27px; }.completion i { grid-column: 1 / -1; height: 8px; width: 230px; background: #10244a; border: 1px solid #c7eaff; overflow: hidden; }.completion b { display:block; height:100%; width:0; background:#55e1ff; box-shadow: 0 0 10px #60eaff; transition: width .35s; }
.complete-gauge { position:absolute; z-index:2; left:30px; right:30px; bottom:15px; display:flex; align-items:center; gap:12px; color:#dbf7ff; font:800 12px/1 inherit; letter-spacing:.13em; text-shadow:1px 1px #071022; pointer-events:none; }.complete-gauge span{color:#8cefff}.complete-gauge i{height:9px; flex:1; border:1px solid #a9dfff; background:#0c1b3a; overflow:hidden}.complete-gauge b{display:block;width:0;height:100%;background:linear-gradient(90deg,#45dcff,#f4f8c3);transition:width .3s}.complete-gauge strong{color:#f5fbff;font-size:11px}
.autosave-indicator { position:absolute; z-index:4; top:92px; right:32px; display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #71eaff; color:#dffcff; background:#071a38d9; box-shadow:0 0 14px #38dfff66; font:800 10px/1 inherit; letter-spacing:.13em; pointer-events:none; }.autosave-indicator i { width:15px; height:15px; border:2px solid #77efff; border-right-color:transparent; border-radius:50%; animation:autosave-spin .7s linear infinite; } @keyframes autosave-spin { to { transform:rotate(360deg); } }
.control-guide-prompt { position:absolute; z-index:4; left:22px; bottom:38px; display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #6ea6cf; color:#ccecff; background:#081b3dcc; font:800 10px/1 inherit; letter-spacing:.09em; cursor:pointer; }.control-guide-prompt:hover,.control-guide-prompt:focus-visible { border-color:#9ef3ff; color:#fff; background:#123866; outline:none; }.control-guide kbd,.control-guide-prompt kbd { display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 5px; border:1px solid #8ddfff; border-bottom-width:2px; border-radius:2px; color:#effdff; background:#1a4774; font:800 10px/1 inherit; box-shadow:0 0 7px #5ae0ff44; }.control-guide { position:absolute; z-index:6; left:22px; bottom:72px; width:242px; padding:12px; border:1px solid #81dff7; background:linear-gradient(145deg,#0a2149f2,#08142feF); box-shadow:0 0 0 3px #071127bb,0 13px 30px #000b; color:#e9f9ff; }.control-guide header { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 10px; padding-bottom:9px; border-bottom:1px solid #406a9a; }.control-guide header span { color:#77eaff; font-size:9px; font-weight:800; letter-spacing:.18em; }.control-guide header strong { grid-row:2; font-size:16px; letter-spacing:.06em; }.control-guide header > kbd { grid-column:2; grid-row:1 / span 2; }.guide-grid { display:grid; gap:7px; margin:11px 0; }.guide-grid > div { display:flex; align-items:center; min-height:21px; gap:5px; color:#d1e4f8; font-size:11px; }.guide-grid > div > span { margin-left:4px; }.guide-grid small { margin-left:4px; color:#83dff5; font-size:9px; }.guide-grid .is-locked { opacity:.48; }.control-guide > p { margin:0; padding-top:8px; border-top:1px solid #2c527d; color:#9ebbd8; font-size:10px; text-align:center; }.control-guide > p kbd { vertical-align:middle; transform:scale(.85); }
.dialogue { position: absolute; z-index: 10; left: 12%; right: 12%; bottom: 28px; min-height: 105px; display: flex; align-items: center; padding: 22px 78px 22px 34px; border: 2px solid #c6defe; background: linear-gradient(135deg, #0b183af5, #101d48f8); box-shadow: 0 0 38px #000, inset 0 0 30px #2750a344; color: white; font-size: clamp(15px, 1.65vw, 23px); letter-spacing: .06em; }
.dialogue.is-toast { min-height:0; padding:16px 24px; border-color:#70dff3; background:linear-gradient(135deg,#0b183ae8,#102856e8); box-shadow:0 0 18px #061126aa, inset 0 0 22px #2750a333; font-size:clamp(14px,1.35vw,19px); }
.game-frame.is-dialogue .hud,.game-frame.is-dialogue .complete-gauge { opacity:.12; transition:opacity .16s ease; }
.dialogue p { margin: 0; }.dialogue button { position:absolute; right: 22px; min-width:116px; min-height:38px; padding:7px 10px; border:2px solid #fff; border-radius:3px; color:#fff; background:#152656; font:700 11px inherit; letter-spacing:.04em; cursor:pointer; }.toast-countdown { position:absolute; right:20px; color:#9cecff; font:800 11px/1 inherit; letter-spacing:.06em; }
.start-screen { position:absolute; z-index:3; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; background:linear-gradient(#08152bc9,#071026e8); color:white; }.start-screen h1 { margin: 0; font-size: clamp(56px, 10vw, 128px); letter-spacing:.22em; text-shadow: 0 0 30px #3ee1ff; }.small-title { margin: 0 0 12px; color:#b9d8ff; font-size:clamp(13px,1.5vw,20px); }.start-screen > p:not(.small-title) { color:#bed0eb; }.start-screen button { margin-top:18px; padding:13px 42px; border:1px solid #baf5ff; background:#1476b9; color:white; font:700 18px inherit; cursor:pointer; box-shadow: 0 0 22px #2ac4ee88; }
.pause-menu { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:34px; background:#050a1ab5; backdrop-filter:blur(4px); }.pause-window { width:min(660px,100%); min-height:360px; display:grid; grid-template-columns:170px 1fr; grid-template-rows:auto 1fr; overflow:hidden; border:1px solid #a8ddff; background:#091635f2; box-shadow:0 0 0 4px #09112a, 0 28px 70px #000d; color:#eff9ff; }.pause-window header { grid-column:1/-1; display:flex; align-items:baseline; gap:15px; padding:18px 24px; border-bottom:1px solid #406a9a; background:linear-gradient(90deg,#132d60,#0c1a3e); }.pause-window header p { margin:0; color:#74e8ff; font-size:11px; letter-spacing:.18em; }.pause-window header h2 { margin:0; font-size:27px; letter-spacing:.17em; }.pause-window header span { margin-left:auto; color:#a9c0df; font-size:12px; }.pause-nav { display:grid; align-content:start; gap:4px; padding:18px 12px; border-right:1px solid #38577e; background:#0b1936; }.menu-tab { border:0; padding:13px 15px; color:#b8cdf0; background:transparent; text-align:left; font:700 14px inherit; cursor:pointer; }.menu-tab:hover,.menu-tab.is-active { color:white; background:#1d5c9a; box-shadow:inset 3px 0 #70edff; }.menu-panels { padding:30px; }.menu-panel { display:none; }.menu-panel.is-active { display:block; }.menu-panel h3 { margin:0 0 8px; font-size:23px; }.menu-panel p { margin:0 0 22px; color:#b8c9e3; line-height:1.7; }.menu-action { display:block; width:min(320px,100%); margin:10px 0; padding:12px 16px; border:1px solid #6a94be; color:#eaf7ff; background:#132b52; font:700 14px inherit; cursor:pointer; text-align:left; }.menu-action:hover,.menu-action.primary { border-color:#88f0ff; background:#1475b6; }.range-row { display:grid; grid-template-columns:52px 1fr 42px; align-items:center; gap:12px; font-size:14px; }.range-row input { accent-color:#5cecff; }.range-row output { color:#8cefff; text-align:right; }.setting-note { margin-top:26px!important; font-size:12px; }.control-list { margin:0; }.control-list div { display:grid; grid-template-columns:145px 1fr; padding:9px 0; border-bottom:1px solid #254568; }.control-list dt { color:#84edff; font-weight:700; }.control-list dd { margin:0; color:#c8d8ec; }
.mobile-controls { display:none; position:absolute; bottom:16px; left:16px; gap:8px; }.mobile-controls button { width:52px; height:52px; border:1px solid #96cbff; color:white; background:#0c1d48bb; font-size:24px; }.feature-panel { margin: 18px 0 0; padding: 0 8px; color:#9fb2d3; font-size:14px; line-height:1.7; }.feature-panel p { margin:0; color:#6ce5ff; letter-spacing:.14em; font-size:11px; }.feature-panel h2 { margin:2px 0; color:#eff7ff; font-size:18px; }.feature-panel code { color:#d2ebff; }
.key-help { margin:0 0 13px!important; font-size:12px; }.key-config { display:grid; gap:7px; }.key-config > div { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid #254568; color:#c8d8ec; font-size:13px; }.key-bind { min-width:100px; padding:7px 10px; border:1px solid #6a94be; background:#11284d; color:#8cefff; font:700 12px inherit; cursor:pointer; }.key-bind:hover,.key-bind.is-listening { border-color:#fff19a; color:#fff5b0; background:#605322; }.key-config + .menu-action { margin-top:18px; }
.stage-clear { position:absolute; z-index:6; inset:0; display:grid; place-items:center; padding:12px; overflow:auto; background:radial-gradient(circle at 50% 25%,#3c6f9ba8,#050917e9 72%); backdrop-filter:blur(5px); }.clear-window { width:min(520px,100%); max-height:100%; overflow:auto; padding:18px 34px; border:1px solid #b9efff; background:linear-gradient(145deg,#102858f5,#08142ff5); box-shadow:0 0 0 5px #101b3c,0 0 58px #4ee4ff55; text-align:center; color:#f4fbff; }.clear-window > p:first-child { margin:0; color:#7deeff; font-size:11px; font-weight:800; letter-spacing:.17em; }.clear-window h2 { margin:5px 0 14px; color:#fff5a2; font-size:clamp(29px,4vw,44px); line-height:1.1; letter-spacing:.09em; text-shadow:0 0 18px #ffdb5488; }.clear-stats { display:grid; gap:5px; padding:12px 18px; border-top:1px solid #3d6e9f; border-bottom:1px solid #3d6e9f; color:#bbd2ea; font-size:13px; line-height:1.15; text-align:left; }.clear-stats span { display:flex; justify-content:space-between; }.clear-stats strong { color:#8eedff; }.clear-message { margin:13px 0!important; color:#d7e7f7!important; font-size:13px; line-height:1.45; }.clear-window .menu-action { margin:6px auto; padding:9px 16px; text-align:center; }
.developer-panel { position:absolute; z-index:7; top:18px; right:18px; width:min(410px,calc(100% - 36px)); padding:16px; border:1px solid #7cecff; background:#07152df2; box-shadow:0 0 0 3px #102750,0 16px 42px #000b; color:#dff8ff; font-size:12px; }.developer-panel header { display:flex; justify-content:space-between; align-items:center; color:#8eefff; font-weight:800; letter-spacing:.12em; }.developer-panel header button { border:0; color:#dff8ff; background:transparent; font-size:22px; cursor:pointer; }.developer-panel > p { margin:8px 0 13px; color:#a7c2df; }.dev-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.dev-grid label { display:grid; gap:4px; color:#aeeeff; }.dev-grid input,.dev-grid select { width:100%; padding:6px; border:1px solid #41698f; color:#eaffff; background:#0d2549; font:inherit; }.dev-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }.dev-actions button { padding:7px 9px; border:1px solid #65cbea; color:#eaffff; background:#164472; font:700 11px inherit; cursor:pointer; }.dev-actions button:hover { background:#277eb2; }.dev-ability-note { margin-bottom:0!important; color:#f4df91!important; }
.course-select { position:absolute; z-index:8; inset:0; display:grid; grid-template-rows:auto auto 1fr auto; padding:20px 30px 14px; color:#effbff; background:#050c1de8; }.course-select header { display:flex; align-items:center; justify-content:space-between; }.course-select header p { margin:0; color:#76edff; font-size:11px; letter-spacing:.2em; }.course-select h2 { margin:3px 0 0; font-size:28px; letter-spacing:.1em; }.course-select header button { padding:9px 16px; border:1px solid #7fdcf7; color:#eafaff; background:#173b69; font:700 13px inherit; cursor:pointer; }.course-instruction { margin:8px 0 10px; color:#cbdff3; font-size:13px; }.course-map { position:relative; min-height:0; overflow:hidden; border:1px solid #5c8cc4; background:#102352 url('assets/course-map-background-v2.png') center / cover no-repeat; box-shadow:inset 0 0 45px #03112bdd; }.course-map::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px #02081699; }.course-route { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }.course-route path { display:none; fill:none; stroke:#f6df72; stroke-width:1.25; stroke-linecap:round; stroke-dasharray:2.3 1.8; filter:drop-shadow(0 0 3px #ffdf59); }.course-route path.is-visible { display:block; }.course-node { position:absolute; z-index:2; display:grid; place-items:center; width:38px; height:38px; transform:translate(-50%,-50%); border:2px solid #8dcfff; border-radius:50%; color:#f3fcff; background:#15385fcc; font:800 14px inherit; cursor:pointer; box-shadow:0 0 12px #1dd8ff99; }.course-node span { position:absolute; top:43px; width:120px; color:#effbff; font:700 10px inherit; text-shadow:1px 1px #051027; }.course-node.cleared { border-color:#f9e782; background:#927b28; box-shadow:0 0 17px #ffe95e; }.course-node.cleared::after { content:'◆'; color:#fff6b1; font-size:15px; }.course-node.cleared b { display:none; }.course-node.available { border-color:#a9fff3; background:#246b87; animation:node-pulse 1.5s ease-in-out infinite; }.course-node.locked { border-color:#536a8c; color:#8a9fbc; background:#172845bb; box-shadow:none; cursor:not-allowed; }.course-select footer { padding-top:9px; color:#bbd5eb; font-size:11px; letter-spacing:.06em; }@keyframes node-pulse {50%{box-shadow:0 0 26px #fff6a0;transform:translate(-50%,-50%) scale(1.12)}}
@media (max-width: 650px) { body { padding:0; place-items:start; }.game-frame { border:none; }.hud { padding:14px; }.brand-mark { width:26px; height:26px; }.chapter-label { display:none; }.shard-count { display:none; }.completion { font-size:10px; gap:8px; }.completion strong { font-size:18px; }.completion i { width:130px; height:6px; }.complete-gauge{left:12px;right:12px;bottom:8px;font-size:9px}.dialogue { left:4%; right:4%; bottom:82px; min-height:80px; padding:14px 55px 14px 18px; }.control-guide-prompt{left:12px;bottom:76px}.control-guide{left:12px;bottom:110px;width:224px}.mobile-controls { display:flex; }.feature-panel { padding: 0 16px; }.pause-menu{padding:12px}.pause-window{grid-template-columns:110px 1fr;min-height:300px}.pause-window header{padding:13px}.pause-window header span{display:none}.pause-nav{padding:10px 6px}.menu-tab{padding:11px 9px;font-size:12px}.menu-panels{padding:20px 15px}.menu-panel h3{font-size:19px}.control-list div{grid-template-columns:105px 1fr;font-size:12px} }

.save-slot { padding:10px 0; border-bottom:1px solid #38577e; }.save-slot p { margin:0 0 6px; font-size:12px; }.save-slot button { margin-right:8px; padding:7px 14px; border:1px solid #6a94be; color:#eaf7ff; background:#132b52; cursor:pointer; }.save-slot button:disabled { opacity:.4; cursor:default; }.pause-window { max-height:100%; overflow:auto; } #saveStatus, #settingsStatus { margin-top:12px; font-size:12px; }

@media (max-width:650px) { .pause-menu { position:fixed; } .pause-window { min-height:0; max-height:calc(100dvh - 24px); } }

/* 背景の一枚絵に島を描き込まず、各ステージの実画像を座標へ配置する。 */
.course-map { background:radial-gradient(ellipse at 30% 80%,#173d6c 0%,#0d2347 35%,#061126 100%); }
.course-node { width:112px; height:82px; border:0; border-radius:0; background:transparent var(--island-image) center / contain no-repeat; box-shadow:none; overflow:visible; }
.course-node b { display:grid; place-items:center; position:absolute; top:4px; left:50%; width:28px; height:28px; transform:translateX(-50%); border:1px solid #99eaff; border-radius:50%; color:#f6fdff; background:#0a2348e8; box-shadow:0 0 10px #4ce7ff99; font-size:12px; }
.course-node span { top:84px; width:132px; font-size:10px; }
.course-node.cleared,.course-node.available,.course-node.locked { background:transparent var(--island-image) center / contain no-repeat; }
.course-node.available { animation:none; }
.course-node.cleared b { display:grid; border-color:#ffe77a; background:#6c5926e8; }.course-node.cleared::after { display:none; }
.course-node.available b { border-color:#b5fff3; background:#1d6f88e8; animation:node-glow 1.5s ease-in-out infinite; }
.course-node.locked { filter:saturate(.2) brightness(.55); }
.course-node.boundary-node { width:94px; height:94px; background:radial-gradient(circle,#241944 0 25%,#10162d 28% 51%,transparent 53%); filter:none; }
.course-node.boundary-node b { border-color:#d7b2ff; color:#fbecff; background:#2d1b52e8; box-shadow:0 0 14px #b980ff; }
.course-node.boundary-node span { color:#e8d6ff; }
.course-medal-mark { position:absolute; right:1px; bottom:2px; padding:3px 4px; border:1px solid #ffe27b; color:#fff3ad; background:#3d2f14e8; box-shadow:0 0 8px #ffe15b88; font:800 9px monospace; font-style:normal; white-space:nowrap; }
@keyframes node-glow { 50% { box-shadow:0 0 26px #fff6a0; } }

.clear-medals { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin:12px 0 2px; }.clear-medals span { padding:5px 8px; border:1px solid #54789f; background:#10274b; color:#a9c4df; font:800 10px monospace; letter-spacing:.06em; }.clear-medals span.earned { border-color:#ffe27b; background:#4c3b15; color:#fff0a4; box-shadow:0 0 12px #ffe15b55; }
/* The top-right completion meter already carries progress; the duplicate bottom bar hid route detail in the recorded playthrough. */
.complete-gauge { display:none; }