@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Noto+Sans+JP:wght@500;700&display=swap");
:root{color-scheme:dark;font-family:Manrope,system-ui,sans-serif;--ink:#f8f1df;--muted:#cfc8b8;--night:#071519;--panel:#0b2326;--gold:#e8bd68;--mint:#84d5bf;--danger:#f3907e;--controls-height:300px}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:var(--night)}body{overflow:hidden;color:var(--ink)}button,input{font:inherit}button{color:inherit}[hidden]{display:none!important}
.game{position:relative;width:100vw;height:100dvh;overflow:hidden;isolation:isolate;background:#0d3443}.scene-viewport{position:absolute;inset:0 0 var(--controls-height);overflow:hidden;background:radial-gradient(circle at 50% 46%,#185268,#0d3443 55%,#071d2a)}#phaser-game{position:absolute;inset:0;overflow:hidden;touch-action:none}#phaser-game canvas{display:block;width:100%!important;height:100%!important;outline:none}.scene-tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,12,15,.25),transparent 45%,rgba(1,11,13,.28))}
.hud{position:absolute;z-index:30;top:0;left:0;right:0;height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;padding:0 28px;background:linear-gradient(180deg,rgba(3,16,19,.96),rgba(3,16,19,.55),transparent)}.brand{display:flex;align-items:center;gap:10px;letter-spacing:.12em;text-transform:uppercase}.brand span,.intro-mark{display:grid;place-items:center;width:34px;aspect-ratio:1;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-family:Georgia,serif;font-size:20px}.brand strong{font-size:14px}.chapter{display:grid;justify-items:center;line-height:1.2;text-shadow:0 2px 10px #000}.chapter b{font-size:13px;letter-spacing:.12em;text-transform:uppercase}.chapter small{color:var(--muted);margin-top:4px}.status-cluster{justify-self:end;display:grid;justify-items:end;gap:5px}.save-status{font-size:10px;color:var(--muted)}.save-status[data-status="load-error"],.save-status[data-status="conflict"],.save-status[data-status="read-only"]{color:var(--danger)}.progress{width:min(22vw,260px);height:4px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.18)}.progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#f4dc9f);transition:width .3s ease}
.dialogue{position:absolute;z-index:20;left:0;right:0;bottom:0;height:var(--controls-height);display:grid;grid-template-rows:auto minmax(68px,auto) auto 1fr;align-content:start;padding:16px max(22px,calc((100% - 900px)/2));border-top:1px solid rgba(232,189,104,.35);background:linear-gradient(145deg,rgba(8,25,28,.985),rgba(5,17,20,.98));box-shadow:0 -18px 45px rgba(0,0,0,.38)}.speaker{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.16em}.phrase{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:8px;margin:5px 0;min-height:62px;font-family:"Noto Sans JP",sans-serif}.word{position:relative;display:grid;justify-items:center}.token-button,.token-static{position:relative;display:grid;justify-items:center;border:1px solid transparent;border-radius:10px;padding:4px 8px;background:transparent;color:var(--ink);font-family:inherit;font-size:clamp(24px,2.2vw,34px);line-height:1.08}.token-button{cursor:pointer}.token-button:hover,.token-button:focus-visible,.token-button[aria-expanded="true"]{border-color:rgba(232,189,104,.55);outline:none;background:rgba(232,189,104,.08)}.token-button small{max-width:180px;margin-top:5px;overflow:hidden;color:var(--mint);font:600 15px/1.2 Manrope,sans-serif;text-overflow:ellipsis;white-space:nowrap}.token-button.new::after{content:"?";position:absolute;top:-6px;right:-4px;display:grid;place-items:center;width:18px;aspect-ratio:1;border-radius:50%;background:var(--gold);color:#132023;font:800 11px Manrope,sans-serif}
.note-editor{position:absolute;z-index:50;top:calc(100% + 12px);left:50%;width:min(390px,calc(100vw - 28px));transform:translateX(-50%);display:grid;gap:8px;padding:12px;border:1px solid rgba(132,213,191,.45);border-radius:14px;background:#102d30;box-shadow:0 14px 35px rgba(0,0,0,.5);font-family:Manrope,sans-serif}.note-pointer{position:absolute;left:50%;top:-7px;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);border-left:1px solid rgba(132,213,191,.45);border-top:1px solid rgba(132,213,191,.45);background:#102d30}.note-editor label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;color:var(--muted);font-size:12px}.note-editor input{min-width:0;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 12px;outline:none;background:rgba(255,255,255,.08);color:#fff}.note-editor input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(132,213,191,.14)}.note-editor>div{display:flex;justify-content:center;gap:7px}.note-editor button{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.07);cursor:pointer}.note-editor button[type="submit"]{border-color:var(--gold);background:var(--gold);color:#142025;font-weight:800}.note-editor>small{color:var(--muted);font-size:10px;text-align:center}.word.editor-open{margin-bottom:126px}
.narration{margin:3px auto 10px;max-width:760px;color:var(--muted);text-align:center;font-size:14px;line-height:1.42}.interaction{display:flex;justify-content:center;align-items:flex-start;min-height:44px}.primary-action,.intro button,.ending button{border:0;border-radius:999px;padding:10px 20px;background:var(--gold);color:#142025;font-weight:800;cursor:pointer}.primary-action:hover,.primary-action:focus-visible,.intro button:hover,.ending button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.order-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.order-actions p{margin:0;color:var(--muted)}.scene-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.scene-controls button,.word-bank button,.compose-result button,.compose-actions>button{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.07);cursor:pointer}.scene-controls button:hover,.scene-controls button:focus-visible,.word-bank button:hover,.compose-result button:hover{border-color:var(--mint);outline:none}.scene-controls button[aria-pressed="true"]{border-color:var(--mint);color:var(--mint);background:rgba(132,213,191,.12)}
.compose{display:grid;grid-template-columns:1fr auto;gap:8px 12px;width:min(760px,100%)}.compose-result{grid-column:1/-1;min-height:38px;display:flex;justify-content:center;align-items:center;gap:6px;color:var(--muted);font-family:"Noto Sans JP",sans-serif}.compose-result button{display:grid;border-color:rgba(132,213,191,.4);color:var(--ink);border-radius:10px}.compose-result small,.word-bank small{color:var(--mint);font:600 12px Manrope,sans-serif}.word-bank{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.word-bank button{display:grid;border-radius:10px;font-family:"Noto Sans JP",sans-serif}.compose-actions{display:flex;gap:7px}.compose-actions .primary-action{border:0;background:var(--gold)}
.order-ticket{position:absolute;z-index:24;top:84px;right:25px;display:grid;gap:4px;width:158px;padding:14px 16px;color:#2b2922;background:#f1e7cb;box-shadow:0 10px 25px rgba(0,0,0,.35);transform:rotate(1.5deg)}.order-ticket small{font-weight:800;letter-spacing:.15em}.order-ticket strong{font-size:20px}.order-ticket span{font-family:"Noto Sans JP",sans-serif;font-size:13px}.feedback{position:absolute;z-index:70;top:82px;left:50%;max-width:min(620px,calc(100% - 30px));padding:10px 17px;border-radius:999px;opacity:0;transform:translate(-50%,-12px);pointer-events:none;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:opacity .2s,transform .2s;text-align:center}.feedback.visible{opacity:1;transform:translate(-50%,0)}.feedback.success{color:var(--mint);border:1px solid rgba(132,213,191,.45)}.feedback.error{color:var(--danger);border:1px solid rgba(243,144,126,.45)}.sound{position:absolute;z-index:25;left:20px;bottom:calc(var(--controls-height) + 16px);display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 13px;background:rgba(4,17,20,.78);backdrop-filter:blur(7px);cursor:pointer}.sound-icon{color:var(--gold)}
.intro,.ending{position:absolute;inset:0;z-index:100;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 65% 20%,rgba(39,88,86,.45),transparent 40%),rgba(3,14,17,.9);backdrop-filter:blur(8px)}.intro-card,.ending>div{width:min(620px,100%);padding:clamp(28px,5vw,58px);border:1px solid rgba(232,189,104,.32);border-radius:26px;background:rgba(5,20,23,.94);box-shadow:0 30px 80px rgba(0,0,0,.5)}.intro-card>p,.ending p{margin:24px 0 7px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.intro h1,.ending h1{margin:0 0 24px;font-family:Georgia,serif;font-size:clamp(36px,6vw,65px);line-height:.98;font-weight:400}.intro-rule{display:grid;grid-template-columns:32px 1fr;gap:10px 12px;margin:28px 0;color:var(--muted)}.intro-rule span{display:grid;place-items:center;align-self:start;width:28px;aspect-ratio:1;border:1px solid rgba(232,189,104,.45);border-radius:50%;color:var(--gold)}.intro-rule p{margin:3px 0;line-height:1.45}.ending{text-align:center}.ending>div{display:grid;justify-items:center}.ending span{max-width:430px;margin:-4px 0 28px;color:var(--muted);line-height:1.5}
.intro-story{margin:24px 0 30px;color:var(--muted);line-height:1.55}.intro-story p{margin:10px 0}.intro-story blockquote{margin:14px 0;padding:12px 16px;border-left:3px solid var(--gold);background:rgba(232,189,104,.08);color:#fff6d8;font-family:Georgia,serif;font-size:18px}
.scene-lab{position:fixed;z-index:150;top:80px;left:12px;display:grid;gap:5px;width:min(380px,calc(100% - 24px));padding:9px;border:1px solid #e8bd68;background:#071519eF;color:#fff;font:12px monospace}.scene-lab label{display:flex;align-items:center;gap:8px}.scene-lab select{min-width:0;flex:1;background:#123238;color:#fff}
@media(max-width:820px){:root{--controls-height:330px}.hud{height:60px;padding:0 13px;grid-template-columns:1fr auto}.brand strong,.progress{display:none}.status-cluster{display:none}.chapter{justify-self:end}.dialogue{padding:12px 14px;height:var(--controls-height)}.narration{font-size:12px}.token-button,.token-static{font-size:clamp(21px,5vw,28px)}.sound{left:10px;bottom:calc(var(--controls-height) + 10px);padding:8px 10px}.sound span:last-child{display:none}.order-ticket{top:67px;right:10px;width:132px;padding:10px 12px}.compose{grid-template-columns:1fr}.compose-actions{justify-content:center}.order-actions{display:grid;justify-items:center}.scene-controls button{padding:7px 10px}}
@media(max-width:540px),(orientation:portrait){:root{--controls-height:min(48dvh,410px)}.scene-viewport{bottom:var(--controls-height)}.dialogue{overflow-y:auto;grid-template-rows:auto auto auto auto}.phrase{min-height:54px}.word.editor-open{margin-bottom:142px}.note-editor{position:fixed;top:auto;bottom:12px;left:14px;right:14px;width:auto;transform:none}.note-pointer{display:none}.note-editor label{grid-template-columns:1fr}.feedback{top:64px;border-radius:14px}.order-ticket{font-size:11px}.scene-controls{max-height:84px;overflow:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Wide screens reserve a side rail; narrow/portrait screens use a bottom rail. */
@media(min-width:1001px) and (orientation:landscape){:root{--controls-height:0px;--controls-width:430px}.scene-viewport{inset:0 var(--controls-width) 0 0}.dialogue{top:0;left:auto;right:0;bottom:0;width:var(--controls-width);height:100%;grid-template-rows:auto minmax(82px,auto) auto 1fr;align-content:center;padding:90px 24px 24px;border-top:0;border-left:1px solid rgba(232,189,104,.35);box-shadow:-18px 0 45px rgba(0,0,0,.38)}.sound{bottom:16px}}
@media(max-width:1000px),(orientation:portrait){:root{--controls-width:0px}.scene-viewport{inset:0 0 var(--controls-height)}.dialogue{top:auto;left:0;right:0;bottom:0;width:100%;height:var(--controls-height);grid-template-rows:auto minmax(68px,auto) auto 1fr;align-content:start;border-top:1px solid rgba(232,189,104,.35);border-left:0;box-shadow:0 -18px 45px rgba(0,0,0,.38)}}
@media(min-width:700px) and (orientation:landscape){:root{--controls-height:0px;--controls-width:360px}.scene-viewport{inset:0 var(--controls-width) 0 0}.dialogue{top:0;left:auto;right:0;bottom:0;width:var(--controls-width);height:100%;grid-template-rows:auto auto auto 1fr;align-content:center;padding:64px 16px 14px;border-top:0;border-left:1px solid rgba(232,189,104,.35);box-shadow:-18px 0 45px rgba(0,0,0,.38);overflow-y:auto}.sound{bottom:12px}.order-ticket{right:calc(var(--controls-width) + 10px)}}
@media(min-width:700px) and (orientation:landscape){.compose{grid-template-columns:1fr}.compose-actions{justify-content:center}.compose-actions>button{padding:8px 12px}.word-bank button{min-width:58px}.order-actions{display:grid;justify-items:center}}

/* The learning controls always stay below the scene. */
:root{--controls-width:0px;--controls-height:230px}
.scene-viewport{inset:0 0 var(--controls-height)}
.dialogue{top:auto;left:0;right:0;bottom:0;width:100%;height:var(--controls-height);grid-template-rows:auto auto auto 1fr;align-content:start;padding:13px max(18px,calc((100% - 900px)/2));border-top:1px solid rgba(232,189,104,.35);border-left:0;box-shadow:0 -18px 45px rgba(0,0,0,.38);overflow:visible}
.sound{bottom:calc(var(--controls-height) + 12px)}
.order-ticket{right:20px}
.phrase{min-height:80px}
.word.editor-open{margin-bottom:0}
.note-editor{position:static;width:min(330px,calc(100vw - 30px));transform:none;display:flex;align-items:center;gap:7px;margin-top:7px;padding:0;border:0;background:transparent;box-shadow:none;font-family:Manrope,sans-serif}
.note-editor label{display:block;min-width:0;flex:1}
.note-editor input{width:100%;height:38px;padding:8px 13px}
.note-editor .note-confirm{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--gold);color:#142025;font-size:20px;font-weight:800;line-height:1;cursor:pointer}
.note-editor .note-confirm:hover,.note-editor .note-confirm:focus-visible{filter:brightness(1.08);outline:2px solid var(--mint);outline-offset:2px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:699px),(orientation:portrait){:root{--controls-height:min(44dvh,360px)}.dialogue{overflow-y:auto;padding:12px 14px}.note-editor{position:static;width:min(330px,calc(100vw - 30px));transform:none}.phrase{min-height:80px}}
@media(min-width:700px) and (max-height:620px) and (orientation:landscape){:root{--controls-height:190px}.dialogue{padding-top:9px;padding-bottom:8px}.phrase{min-height:70px;margin:2px 0}.narration{margin-bottom:5px}.sound{bottom:calc(var(--controls-height) + 8px)}}

/* English-first controls and compact action layouts. */
.status-line{display:flex;align-items:center;justify-content:flex-end;gap:10px}.reset-game{padding:0;border:0;background:none;color:var(--gold);font-size:10px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.dialogue{overflow-y:auto;overscroll-behavior:contain}.primary-action:disabled{background:#596266;color:#c3c8c9;cursor:not-allowed;filter:none;transform:none;opacity:.72}.note-editor.confirmed .note-confirm{background:var(--mint)}
.order-actions{display:grid;width:min(900px,100%);gap:8px}.order-summary{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px}.order-summary p{margin:0;color:var(--muted)}.order-actions>.scene-controls{max-height:76px;overflow-y:auto}.order-actions>.scene-controls button{padding:7px 10px}
@media(max-height:760px) and (orientation:landscape){:root{--controls-height:205px}.dialogue{padding-top:8px;padding-bottom:8px}.phrase{min-height:66px;margin:1px 0}.narration{margin:1px auto 5px}.interaction{min-height:38px}.order-actions{gap:5px}.order-actions>.scene-controls{max-height:68px}}
.game[data-ui-mode="assemble"]{--controls-height:clamp(245px,30dvh,285px)}.game[data-ui-mode="assemble"] .phrase{min-height:50px}.game[data-ui-mode="assemble"] .dialogue{padding-top:9px;padding-bottom:9px}.game[data-ui-mode="assemble"] .order-actions>.scene-controls{max-height:none;overflow:visible}
.game[data-ui-mode="compose"]{--controls-height:clamp(260px,34dvh,320px)}

/* Development-only scene editor (`?sceneEditor=1`). */
.scene-editor-app{position:fixed;inset:0;display:grid;grid-template-columns:238px minmax(420px,1fr) 310px;grid-template-rows:54px minmax(0,1fr);background:#071519;color:#eef6f1;font:13px/1.35 Manrope,system-ui,sans-serif;isolation:isolate}
.scene-editor-app button,.scene-editor-app input,.scene-editor-app select{border:1px solid #315258;border-radius:6px;background:#10292e;color:#eef6f1;font:inherit}
.scene-editor-app button{padding:7px 9px;cursor:pointer}.scene-editor-app button:hover,.scene-editor-app button:focus-visible,.scene-editor-app button.active{border-color:#e8bd68;background:#19383c;outline:none}.scene-editor-app input,.scene-editor-app select{min-width:0;padding:6px 7px}
.scene-editor-topbar{grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid #315258;background:#0a2024;overflow-x:auto;white-space:nowrap}.scene-editor-topbar>strong{margin-right:5px;color:#e8bd68;font-size:14px}.scene-editor-topbar label{display:flex;align-items:center;gap:5px}.scene-editor-topbar select{max-width:190px}.editor-status{margin-left:auto;color:#84d5bf}
.scene-editor-assets,.scene-editor-inspector{min-height:0;overflow:auto;background:#0a1d21}.scene-editor-assets{padding:10px;border-right:1px solid #315258}.scene-editor-inspector{padding:10px;border-left:1px solid #315258}.editor-panel-title{margin:1px 0 9px;color:#e8bd68;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.editor-wide-button,#asset-search{width:100%;margin-bottom:8px}
.asset-library{display:grid;grid-template-columns:1fr 1fr;gap:7px}.asset-card{display:grid;grid-template-rows:72px auto;gap:5px;min-width:0;padding:5px!important;text-align:left}.asset-card img{width:100%;height:72px;object-fit:contain;border-radius:4px;background:#071519}.asset-card span{overflow:hidden;color:#cbd8d5;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.scene-editor-stage{position:relative;display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;background:#091b1f}.scene-editor-toolbar{display:flex;align-items:center;gap:5px;padding:7px;border-bottom:1px solid #315258;overflow-x:auto;background:#0c2428}.scene-editor-toolbar button{white-space:nowrap}
.scene-editor-canvas-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:repeating-conic-gradient(#153038 0 25%,#10282e 0 50%) 50%/24px 24px}.scene-editor-canvas-wrap svg{display:block;width:100%;height:100%;touch-action:none;user-select:none}.scene-editor-canvas-wrap svg[data-tool="pen"],.scene-editor-canvas-wrap svg[data-tool="rect"],.scene-editor-canvas-wrap svg[data-tool="ellipse"]{cursor:crosshair}.editor-help{margin:0;padding:6px 10px;background:#0a2024;color:#9fb3af;font-size:11px}
.editor-canvas-item{cursor:move}.editor-mask-layer{pointer-events:none}.editor-mask-hit{cursor:pointer;pointer-events:stroke}.editor-selection{pointer-events:none}.editor-handle,.editor-node,.editor-bezier-handle{pointer-events:all;cursor:pointer}.editor-node{fill:#e8bd68;stroke:#071519;stroke-width:2;vector-effect:non-scaling-stroke}.editor-bezier-handle{fill:#84d5bf;stroke:#071519;stroke-width:2;vector-effect:non-scaling-stroke}.editor-bezier-line{stroke:#84d5bf;stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
.editor-inspector-content{display:grid;gap:8px}.editor-inspector-content>label{display:grid;gap:4px;color:#b9c9c6;font-size:11px}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.inspector-grid label{display:grid;gap:3px;color:#b9c9c6;font-size:10px}.editor-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.editor-check input{width:16px;height:16px}.mask-node-actions,.layer-actions{display:flex;flex-wrap:wrap;gap:5px}.layer-title{margin-top:20px}.editor-layers{display:grid;gap:4px;margin-top:8px}.layer-row{display:grid!important;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:5px;width:100%;padding:7px!important;text-align:left}.layer-row b{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.layer-row small{color:#7f9a96;font-size:9px}.layer-row.selected{border-color:#e8bd68;background:#19383c}
@media(max-width:1000px){.scene-editor-app{grid-template-columns:190px minmax(360px,1fr) 250px}.scene-editor-topbar{font-size:11px}.scene-editor-topbar button{padding:6px}.asset-library{grid-template-columns:1fr}.scene-editor-inspector{font-size:11px}}