:root{color-scheme:dark;--ink:#eaf1ff;--muted:#afc3dd;--gold:#c7b17e;--wind:#91dfee;--sun:#f9d88e;--panel:#14243d}
*{box-sizing:border-box}
html{height:100%;background:#0b1426}
body{margin:0;min-height:100svh;background:#0b1426;color:var(--ink);font:14px/1.5 "Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.42}
button:focus-visible,summary:focus-visible{outline:3px solid #fff1b2;outline-offset:2px}
h1,h2,h3,p{margin:0}
#game{height:var(--arcade-game-height,calc(100dvh - 48px));max-width:1136px;margin:0 auto;padding:4px max(10px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));display:flex;align-items:center}
.masthead{position:absolute;z-index:25;top:env(safe-area-inset-top,0px);right:max(10px,env(safe-area-inset-right,0px));height:48px;display:flex;align-items:center;gap:6px}
.masthead h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:20px;font-weight:500;letter-spacing:.12em;margin-right:16px}
.masthead h1 small{font:12px system-ui;color:#b9c9df;margin-left:12px}
.quiet,.icon-button{min-height:44px;border:1px solid #6d819e;background:#172941;border-radius:4px;padding:8px 14px}
.icon-button{width:44px;min-width:44px;padding:0;font-size:20px;font-weight:600}
.quiet:hover:enabled,.icon-button:hover:enabled{background:#2a4261}
.cabinet{width:100%;height:100%;max-height:800px;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;border:1px solid var(--gold);box-shadow:0 0 0 3px #24354f;background:#15263d}
.landscape{min-width:0;min-height:0;position:relative;display:grid;grid-template-rows:34px minmax(0,1fr) 36px;background:#506680}
.scene-top{display:flex;align-items:center;gap:12px;padding:0 14px;background:#122239e3;font-size:11px;z-index:1}
.scene-title{font:17px "Yu Mincho",serif;letter-spacing:.15em;color:#f0dfb8;margin-right:auto;white-space:nowrap}
#attempt{color:#c1d0e3;white-space:nowrap}
#distance{font-variant-numeric:tabular-nums;min-width:31px}
#journey-bar{width:80px;height:5px;border:0}
.painting{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}
#scene{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.scene-bottom{min-width:0;background:#122239ed;display:flex;align-items:center;justify-content:center;padding:4px 10px;position:relative}
.traveler{display:flex;gap:10px;align-items:center;justify-content:center;font-size:12px;white-space:nowrap}
.traveler>span:first-child{color:#aabdce}
.traveler b{font-weight:500;color:#f6dfaa}
#live-reason{color:#d6e2ee}
.notice{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);max-width:calc(100% - 16px);width:max-content;border:1px solid #d9c28b;border-radius:4px;background:#11213bec;padding:7px 12px;font-size:13px;line-height:1.4;color:#ffebba;text-align:center;pointer-events:none;box-shadow:0 3px 10px #0004}
#paused-badge{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:#12233dea;border:1px solid var(--gold);border-radius:4px;padding:8px 18px;white-space:nowrap}
.hud{padding:7px 12px;display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:6px;background:#14243d;border-top:1px solid var(--gold);min-width:0}
.observations{grid-column:1/-1;display:flex;justify-content:center;gap:16px;min-height:22px;font-size:11px;color:#b8cce3;border-bottom:1px solid #50627e;padding-bottom:5px}
.observations span+span:before{content:"·";margin-right:16px;color:#7e96b2}
.party-panel{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-content:center;min-width:0}
.character{min-width:0;min-height:56px;padding:7px 9px;text-align:left;border:1px solid #7188a5;border-radius:3px;background:#1a304d;color:var(--wind)}
.character.sun-character{color:var(--sun)}
.character:hover:enabled{background:#294563}
.character[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 0 0 2px currentColor;background:#294563}
.character .choose-mark{font-size:9px;color:inherit}
.character[aria-pressed="true"] .choose-mark{transform:rotate(180deg)}
.name-line{display:flex;align-items:baseline;justify-content:space-between;gap:5px;margin-bottom:4px}
.name-line strong{font-size:16px;font-weight:500;letter-spacing:.1em}
.name-line span{font-size:10px;color:var(--muted)}
.name-line strong{margin-right:auto}
progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:11px;border:1px solid #7787a1;background:#081528;border-radius:2px;overflow:hidden}
progress::-webkit-progress-bar{background:#081528}
progress::-webkit-progress-value{background:#91dfee}
progress::-moz-progress-bar{background:var(--wind)}
.sun-character progress::-webkit-progress-value{background:#f9d88e}
.sun-character progress::-moz-progress-bar{background:var(--sun)}
.margin-row{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-size:10px;color:#c5bca5}
.margin-row label{white-space:nowrap}
.margin-row progress{height:6px;flex:1}
.margin-row progress::-webkit-progress-value{background:#b4c6c4}
.margin-row span{min-width:60px;text-align:right;color:var(--muted)}
.command-area{min-width:0;min-height:74px;display:flex;align-items:center}
#choose-prompt{width:100%;color:#b7c9e0;text-align:center;font-size:12px}
#choices{--actor-color:var(--wind);width:100%;min-width:0;border-top:2px solid var(--actor-color);padding-top:3px}
#choices[data-actor="sun"]{--actor-color:var(--sun)}
.choice-heading{height:18px;display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:3px}
.choice-heading h2{font-size:12px;font-weight:500;color:var(--actor-color);white-space:nowrap}
.choice-heading>span{font-size:10px;color:#afc3dd;white-space:nowrap}
.choice-grid{display:grid;grid-template-columns:repeat(var(--choice-count,3),minmax(0,1fr));gap:5px}
#choice-options{display:contents}
.choice{min-height:48px;min-width:0;padding:4px 5px;border:1px solid #8096b3;border-radius:3px;background:#1a304d;color:var(--actor-color);font-size:14px;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.choice:hover:enabled{background:#2b476a}
.choice[data-action="tryBreeze"]{font-size:12px;line-height:1.25}
.cancel-choice{color:#bdcbe0;background:#14243d;font-size:12px}
dialog{width:min(460px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-width:none;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:20px;border:1px solid #d3bc84;border-radius:5px;background:#172941;box-shadow:inset 0 0 0 3px #283b56,0 18px 80px #0008;color:var(--ink);overflow:auto}
dialog::backdrop{background:#081322b8}
dialog h2{font:23px/1.3 "Hiragino Mincho ProN","Yu Mincho",serif;color:#f2e2bd}
dialog p{font-size:14px;line-height:1.65}
.compact-dialog{display:none;gap:12px}
.compact-dialog[open]{display:grid}
.eyebrow{font-size:10px!important;letter-spacing:.14em;color:#b8c9e0}
.dialog-note{color:#adbed5;font-size:12px!important}
.primary{width:100%;min-height:46px;border:1px solid #d6bb80;border-radius:4px;background:#365373;font-size:15px;color:#fff0c8;padding:8px 12px}
.primary:hover{background:#496685}
.wide{width:100%}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dialog-heading>span{font-size:11px;color:#b6c6dc}
#guide[open]{display:flex;flex-direction:column;gap:13px;height:min(620px,calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));overflow:visible}
#guide>.dialog-heading,#guide>.primary{flex-shrink:0}
.guide-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;font-size:13px}
.guide-body>p{font-size:13px}
.guide-list{padding-left:18px;line-height:1.75;margin:15px 0}
.guide-list li{margin-bottom:13px}
.guide-list b{display:block;color:#ecd8a8;font-weight:500}
.guide-state{border-top:1px solid #596d89;padding-top:12px;margin:14px 0}
.guide-state h3{font-size:13px;color:#ecd8a8;margin-bottom:6px}
.guide-state p{font-size:12px}
.journal{border-top:1px solid #596d89;padding-top:8px;margin-bottom:14px}
.journal summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:#e6d6b1}
.journal ol{padding-left:20px;font-size:12px;line-height:1.7}
.journal li{margin-bottom:8px}
.journal li[data-kind="learn"]{color:#f5d98f}
.guide-body>.dialog-note{margin:12px 0}
.result-learnings{font-size:13px!important;color:#efdcaa}
[hidden]{display:none!important}
@media(max-width:700px){
 .masthead h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .hud{grid-template-columns:1fr;row-gap:5px;padding:6px 10px}
 .scene-top{gap:8px;padding:0 9px}.scene-title{font-size:16px}#journey-bar{width:44px}.traveler{font-size:11px;gap:7px}
}
@media(orientation:portrait) and (max-width:700px){.cabinet{max-height:calc((100vw - 24px)*.625 + 270px)}}
@media(max-width:360px){.character{padding:7px}.name-line strong{font-size:15px}.name-line span{font-size:9px}.choice{font-size:13px}.choice-heading>span{font-size:9px}.observations{gap:9px;font-size:10px}.observations span+span:before{margin-right:9px}.scene-top{font-size:10px}.scene-title{font-size:15px}.notice{font-size:12px}}
@media(orientation:landscape) and (max-height:500px){
 #game{padding-top:2px;padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
 .masthead h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .cabinet{grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:minmax(0,1fr)}
 .landscape{grid-template-rows:30px minmax(0,1fr) 30px}
 .scene-top{padding:0 8px;gap:7px;font-size:10px}.scene-title{font-size:15px}#journey-bar{width:38px}
 .hud{border-top:0;border-left:1px solid var(--gold);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:6px;gap:4px}
 .observations{font-size:9px;gap:5px;flex-wrap:wrap;min-height:16px;padding-bottom:3px;line-height:1.25}.observations span+span:before{margin-right:5px}
 .party-panel{grid-template-columns:1fr 1fr;gap:4px 6px}.character{min-height:48px;padding:5px}.name-line{gap:2px;margin-bottom:3px}.name-line strong{font-size:13px;letter-spacing:0}.name-line span{font-size:9px}.character .choose-mark{font-size:7px}.character progress{height:8px}.margin-row{gap:5px;font-size:9px;line-height:12px}
 .command-area{min-height:112px;align-items:flex-end}.choice-heading{height:17px}.choice-heading h2{font-size:11px}.choice-heading>span{font-size:9px}.choice-grid{grid-template-columns:1fr 1fr;gap:4px}.choice{min-height:44px;font-size:12px;padding:3px}
 .traveler{font-size:10px;gap:6px}.notice{font-size:12px;padding:5px 9px}
 dialog{padding:13px 18px;width:min(480px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}
 .compact-dialog{gap:8px}dialog h2{font-size:21px}dialog p{font-size:13px}#guide[open]{gap:8px}
}
@media(orientation:landscape) and (max-width:650px){.cabinet{grid-template-columns:minmax(0,1fr) 204px}.scene-top #attempt{display:none}.traveler>span:first-child{display:none}.notice{font-size:11px}.choice-heading>span{font-size:8px}}
@media(orientation:landscape) and (max-height:340px){dialog{padding:10px 16px}.compact-dialog{gap:6px}dialog h2{font-size:19px}dialog p{font-size:12px;line-height:1.5}.result-learnings{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}