@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#13191c;--panel:#1c2428;--soft:#242e33;--line:#354045;--text:#f4f6ef;--muted:#9ca9ae;--accent:#dcff8e;--pink:#ffa1b4;--mint:#89d7c6;--font:'Noto Sans JP',sans-serif;--mono:'Space Grotesk',monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{border:0}button:not(:disabled){transition:background .16s,transform .16s,box-shadow .16s}button:not(:disabled):active{transform:translateY(2px)}.topbar{max-width:1512px;margin:auto;min-height:92px;padding:24px 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:900;letter-spacing:.06em}.brand-mark{display:grid;place-items:center;background:var(--accent);color:var(--bg);width:36px;height:36px;border-radius:10px;font-size:28px}.brand-en{font-family:var(--mono);font-size:12px;letter-spacing:.15em;font-weight:500;padding-left:8px;color:var(--muted)}.text-button{display:flex;align-items:center;gap:10px;background:none;color:#c2cbd0;font-size:14px;padding:6px}.text-button:hover{color:var(--accent)}.help-icon{border:1px solid #74828b;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;font:13px var(--mono)}main{max-width:1512px;margin:auto;padding:34px 4.5% 24px}.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font:600 12px var(--mono);letter-spacing:.16em;color:var(--muted);margin:0 0 9px}.eyebrow span{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:2px 7px;margin-left:6px;color:var(--accent)}h1{font-size:30px;line-height:1.45;letter-spacing:.06em;margin:0;font-weight:800}.intro{color:var(--muted);font-size:14px;margin:8px 0 0}.episode-label{display:flex;flex-direction:column;gap:10px;text-align:right;font-size:13px;color:#c3cdcf}.episode-label strong{font:500 12px var(--mono);letter-spacing:.14em;color:var(--muted)}.episode-label i{color:var(--accent);font-style:normal;margin:0 6px}.workspace{display:grid;grid-template-columns:minmax(260px,310px) minmax(0,1fr);gap:34px;align-items:start}.sidebar{position:sticky;top:24px}.preview-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px}.panel-label{display:flex;justify-content:space-between;align-items:center;padding:1px 2px 12px;font-size:13px;color:#bec9ce}.small-mono{font:500 11px var(--mono);letter-spacing:.1em;color:var(--muted)}.screen{position:relative;aspect-ratio:1;overflow:hidden;border-radius:9px;background:#101620;border:1px solid #0d1116}.screen img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.screen img[hidden]{display:none}.screen-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 45px #0002}.screen-tag{position:absolute;bottom:12px;left:12px;font:10px var(--mono);letter-spacing:.17em;color:#a8b7bd}.screen-empty{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;color:var(--muted);font-size:13px}.pixel-spark{font-size:45px;color:var(--accent)}.screen-bottom{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);padding:12px 0 0}.screen-bottom .small-mono{margin-left:auto}.live-light{width:5px;height:5px;border-radius:50%;background:var(--accent)}.story-note{padding:23px 2px 17px}.story-note h2{font-size:15px;margin:0 0 10px;font-weight:700;letter-spacing:.01em}.story-note>p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.9;margin:0}.story-steps{display:flex;gap:14px;margin-top:17px;font-size:11px;color:#b7c4ca;white-space:nowrap}.story-steps b{font:11px var(--mono);display:block;color:var(--accent);margin-bottom:5px}.controls{padding-top:4px}.play-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:var(--accent);color:#20271c;min-height:54px;padding:14px 18px;font-size:16px;font-weight:800;border-radius:10px;box-shadow:0 3px 0 #99b664}.play-button:hover:not(:disabled){background:#e8ffb7;box-shadow:0 5px 20px #dcff8e16}.play-button:disabled{opacity:1;background:#3a4632;color:#8c9d7d;box-shadow:0 3px 0 #2e3929}.play-icon{font-size:16px}kbd{margin-left:auto;border:1px solid #70804470;border-radius:4px;padding:3px 5px;font:10px var(--mono)}.play-button>span:nth-child(2){margin-right:auto}.play-sub{text-align:center;color:var(--muted);font-size:12px;margin:11px 0 16px}.secondary-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}.secondary-button{display:flex;align-items:center;justify-content:center;background:#232d31;border:1px solid var(--line);padding:10px 12px;border-radius:8px;font-size:13px;white-space:nowrap}.secondary-button:hover:not(:disabled){background:#303d42}.reset-button{display:block;background:none;color:var(--muted);font-size:12px;margin:11px auto;padding:8px}.reset-button:hover{color:var(--text)}.board-heading{display:flex;align-items:center;justify-content:space-between;min-height:31px;margin-bottom:13px}.board-heading h2,.tray-header h2{font-size:15px;margin:0;font-weight:700}.board-heading h2 span{font-size:11px;color:var(--muted);font-weight:400;margin-left:13px}.placed-counter{display:flex;align-items:baseline;gap:6px;font-family:var(--mono)}.placed-counter strong{color:var(--accent);font-size:24px;font-weight:500}.placed-counter>span{font-size:13px;color:var(--muted)}.progress-track{height:2px;background:var(--line);margin-bottom:18px}.progress-track div{height:100%;background:var(--accent);width:0;transition:width .25s}.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;background:#182024;padding:16px;border:1px solid #303b40;border-radius:15px}.slot{position:relative;aspect-ratio:1;background:#20292e;border:1px dashed #425057;border-radius:8px;min-width:0;display:grid;place-items:center;padding:0;color:#66787e;isolation:isolate;transition:border-color .15s,background .15s,transform .15s}.slot-num{font:400 23px var(--mono);color:#65747a}.slot .slot-num:after{content:'+';display:block;text-align:center;font-size:15px;color:#45565e;margin-top:3px}.slot-filled{border:1px solid #5b6b6e;background:#101620;cursor:grab}.slot-filled:active{cursor:grabbing}.slot-filled .slot-num{position:absolute;top:5px;left:5px;z-index:2;background:#0e161bcd;border-radius:3px;min-width:18px;font-size:10px;padding:3px;color:#adbfca;pointer-events:none}.slot-filled .slot-num:after{display:none}.frame-image{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;border-radius:inherit;pointer-events:none;user-select:none;-webkit-user-drag:none}.slot .frame-image{position:absolute;inset:0}.slot:nth-child(6n+1)::before{position:absolute;left:-12px;content:'';width:3px;height:15px;background:#718345;border-radius:2px}.slot:nth-child(n+9):nth-child(-n+16)::before{background:#4b8d80}.slot.hot-drop{border:2px solid var(--accent);background:#dcff8e1a;transform:scale(1.04);box-shadow:0 0 24px #dcff8e14}.slot.selected,.piece.selected{outline:3px solid var(--accent);outline-offset:2px}.slot.playing-frame{outline:3px solid var(--accent);outline-offset:1px}.slot.bad-join{border-color:var(--pink)}.slot.snap{animation:snap .32s cubic-bezier(.2,.8,.2,1)}.tray-header{display:flex;gap:12px;align-items:center;margin:24px 0 14px}.tray-header h2 span{color:var(--muted);font-weight:400;font-size:12px;margin-left:8px}.tray-header p{font-size:11px;color:var(--muted);margin:0}.tray-header button{margin-left:auto;font-size:12px}.tray{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px 10px;align-content:start;min-height:110px;padding:13px 9px 17px;background-image:radial-gradient(#3e4b5166 .65px,transparent .65px);background-size:12px 12px;border:1px solid #35404577;border-radius:12px}.piece{position:relative;aspect-ratio:1;min-width:0;display:block;padding:4px;background:#455158;border:1px solid #627278;border-radius:7px;box-shadow:0 4px 0 #0b1014,0 6px 8px #0003;transform:rotate(var(--tilt)) translateY(var(--offset));cursor:grab;touch-action:none;user-select:none}.piece:hover{z-index:3;background:#7d8a84;transform:translateY(-5px) rotate(0deg)!important}.piece:active{cursor:grabbing}.piece .frame-image{background:#101620;border-radius:3px}.piece-id{position:absolute;right:6px;bottom:5px;color:#d5dddd;font:9px var(--mono);background:#0c141ec7;padding:1px 4px;border-radius:3px;pointer-events:none}.piece.drag-source,.slot.drag-source{opacity:.3}.drag-ghost{position:fixed;z-index:1000;pointer-events:none;opacity:.97;transform:rotate(0)!important;box-shadow:0 18px 25px #0007!important;transition:none!important}.tray.empty{display:grid;place-items:center;min-height:120px}.tray-complete{text-align:center;color:var(--accent);font-size:14px}.tray-complete span{display:block;color:var(--muted);font-size:12px;margin-top:7px}.board-footnote{font-size:11px;color:var(--muted);margin:15px 3px 0;line-height:1.8}.board-footnote span{color:var(--accent);margin-right:5px}footer{max-width:1512px;padding:20px 4.5% 28px;margin:auto;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#7f9198;border-top:1px solid #35404577}footer>span:last-child{font:10px var(--mono);letter-spacing:.13em}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:1100;background:var(--accent);color:#20271c;font-size:14px;padding:13px 23px;border-radius:10px;box-shadow:0 8px 30px #0005;transition:.2s;max-width:90vw;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{background:#1c2529;color:var(--text);border:1px solid #4a5a62;border-radius:20px;padding:35px;width:min(520px,calc(100vw - 28px));max-height:90dvh;overflow-y:auto;box-shadow:0 28px 100px #0008}dialog::backdrop{background:#0b111bd9;backdrop-filter:blur(7px)}dialog h2{font-size:24px;line-height:1.5;margin:9px 0 12px}dialog>p{color:var(--muted);font-size:14px;line-height:1.8}.dialog-x{position:absolute;right:15px;top:12px;background:none;font-size:27px;color:var(--muted);padding:0 7px}.instructions{padding-left:25px;margin:25px 0}.instructions li{padding-left:7px;margin-bottom:21px}.instructions li::marker{color:var(--accent);font-family:var(--mono)}.instructions b{font-size:16px}.instructions p{font-size:14px;color:var(--muted);line-height:1.8;margin:7px 0}.keyboard-note{font-size:12px!important;border-top:1px solid var(--line);padding:16px 0}.result-dialog{text-align:center;width:min(560px,calc(100vw - 28px))}.result-dialog .eyebrow{color:var(--accent)}.result-screen{position:relative;max-width:340px;margin:20px auto 15px;background:#101620;border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:1}.result-screen img{width:100%;height:100%;display:block;image-rendering:pixelated;object-fit:contain}#frame-readout{position:absolute;bottom:10px;right:10px;background:#0b1227b0;padding:4px 7px;color:#b2c5da;border-radius:3px}.continuity{display:flex;justify-content:center;gap:4px}.continuity span{height:5px;flex:1;max-width:15px;border-radius:2px;background:#4c5c64}.continuity .good{background:var(--accent)}.continuity .bad{background:var(--pink)}#result-detail{font-size:12px;min-height:22px}.result-actions{display:flex;gap:12px;align-items:stretch;margin-top:22px}.result-actions>.play-button{flex:1;font-size:14px}.result-actions>.secondary-button{padding:10px 18px}.success .result-screen{box-shadow:0 0 40px #dcff8e16;border-color:#90ac62}.success h2{color:var(--accent)}.confetti{position:fixed;z-index:2000;pointer-events:none;width:7px;height:10px;animation:confetti-fall 1.8s ease-in forwards}@keyframes snap{0%{transform:scale(1.12)}50%{transform:scale(.95)}100%{transform:scale(1)}}@keyframes confetti-fall{from{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translate(var(--drift),80vh) rotate(640deg);opacity:0}}
@media(min-width:1600px){.workspace{grid-template-columns:340px 1fr;gap:44px}.board{gap:13px;padding:20px}.tray{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media(max-width:1100px){.workspace{grid-template-columns:245px minmax(0,1fr);gap:22px}.board{padding:12px;gap:7px}.tray{grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.board-heading h2 span{display:block;margin:4px 0 0}.story-steps{gap:10px;font-size:10px}.tray-header p{display:none}.brand-en{display:none}.story-note h2{font-size:14px}.story-note>p:not(.eyebrow){font-size:12px}.slot-num{font-size:19px}}
@media(max-width:760px){.topbar{min-height:72px;padding:19px 5%}.brand{font-size:20px}.brand-mark{width:30px;height:30px;font-size:24px}main{padding:26px 4% 22px}.game-heading{margin-bottom:22px}.game-heading h1{font-size:25px}.episode-label{display:none}.intro{font-size:12px}.workspace{display:flex;flex-direction:column;gap:24px}.sidebar{width:100%;position:static;display:grid;grid-template-columns:135px 1fr;gap:12px 20px}.preview-panel{padding:8px;border-radius:11px;grid-row:1/3}.panel-label{font-size:10px;padding-bottom:7px}.panel-label .small-mono{display:none}.screen-bottom{font-size:9px;gap:4px;padding-top:7px}.screen-bottom .small-mono,.screen-tag{display:none}.story-note{padding:2px 0 0}.story-note h2{font-size:13px;margin-bottom:5px}.story-note>p:not(.eyebrow){font-size:11px}.story-note .eyebrow{font-size:10px;margin-bottom:5px}.story-steps{display:none}.controls{display:grid;grid-template-columns:1fr;gap:7px}.play-button{min-height:42px;padding:10px 13px;font-size:14px;border-radius:8px}.play-sub{margin:0;font-size:10px}.secondary-controls{gap:6px}.secondary-button{font-size:11px;padding:7px}.reset-button{margin:0;font-size:10px;padding:3px}.puzzle-area{width:100%}.board-heading h2 span{display:inline;margin-left:8px;font-size:10px}.board{gap:6px;padding:10px;border-radius:12px}.slot{border-radius:5px}.slot-num{font-size:17px}.slot .slot-num:after{font-size:10px}.slot-filled .slot-num{font-size:8px;padding:1px 3px;top:2px;left:2px;min-width:0}.slot:nth-child(6n+1)::before{display:none}.tray{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 9px;padding:10px 7px 14px}.piece{padding:3px;border-radius:5px}.piece-id{font-size:8px;bottom:4px;right:4px}.tray-header{margin-top:19px}.board-footnote{font-size:10px}footer{padding:17px 4%;font-size:10px}footer>span:last-child{display:none}.screen-empty p{font-size:9px}.pixel-spark{font-size:30px}dialog{padding:30px 22px}.result-screen{max-width:280px}.result-actions{gap:8px}.result-actions>.secondary-button{padding:10px 12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

[hidden]{display:none!important}.slot-filled{touch-action:none;user-select:none}.story-note>p:not(.eyebrow){font-size:14px}.secondary-button{font-size:14px}.board-footnote{font-size:12px}.tray-header p{font-size:12px}.panel-label{font-size:14px}.screen-bottom{font-size:12px}@media(max-width:760px){.story-note>p:not(.eyebrow){font-size:12px}.secondary-button{font-size:12px}.panel-label{font-size:11px}.screen-bottom{font-size:10px}}

.header-actions{display:flex;align-items:center;gap:22px}.music-controls{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:5px 10px}.music-toggle{display:flex;align-items:center;gap:7px;background:none;color:var(--muted);font:500 12px var(--mono),var(--font);padding:6px 2px;white-space:nowrap}.music-toggle>span:first-child{font-size:20px}.music-toggle.is-playing{color:var(--accent)}#music-volume{width:68px;min-height:28px;margin:0;cursor:pointer;accent-color:var(--accent)}#music-volume:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.topbar{flex-wrap:wrap;gap:16px}.header-actions{gap:14px;flex-wrap:wrap}.music-controls{padding:3px 8px;gap:8px}#music-volume{width:60px}.music-toggle{font-size:11px}}

.sound-controls{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:5px 10px}#sfx-volume{width:54px;min-height:28px;margin:0;cursor:pointer;accent-color:var(--accent)}#sfx-volume:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.header-actions{flex-wrap:wrap;gap:12px}.topbar{flex-wrap:wrap;gap:16px}@media(max-width:760px){.sound-controls{padding:3px 8px;gap:8px}.header-actions{gap:8px}#sfx-volume{width:46px}}