:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;background:#142a31;color:#f7f0d9;font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{display:grid;place-items:center;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 30%,#294a51,#142a31 80%)}
[hidden]{display:none!important}button{font:inherit;font-size:16px;cursor:pointer;min-width:48px;min-height:48px;border:0;border-radius:24px;touch-action:manipulation;background:#eadfbc;color:#183c43;padding:10px 22px;font-weight:600;line-height:1.35}button:disabled{opacity:.55;cursor:wait}button:focus-visible{outline:3px solid #ffc371;outline-offset:3px}button:active{transform:translateY(1px)}button.secondary{background:#173b43;color:#f7f0d9;border:1px solid #b7d7cf52}
#stage{position:relative;width:min(1160px,100%,calc((100dvh - 24px) * 19.5 / 9));aspect-ratio:19.5/9;max-height:100%;overflow:hidden;border-radius:16px;background:#172e38}
#canvas{display:block;width:100%;height:100%;outline:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;background:#102c35c9;overflow:auto;overscroll-behavior:contain}.panel{width:min(320px,100%);max-height:none;flex-shrink:0;margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px}.panel>button{width:min(256px,100%);flex-shrink:0}.panel img{border-radius:18px;flex-shrink:0}.eyebrow{font-size:13px;letter-spacing:.14em;margin:0;color:#c4d8ce}h1,h2,p{margin:0}h1{font-size:30px;line-height:1.2;font-weight:650}h2{font-size:24px;line-height:1.3;font-weight:650}.panel p{font-size:16px;line-height:1.6;color:#dbe8dc}.panel .hint{font-size:14px;color:#bed2c8}#play span{margin-left:22px}progress{display:block;width:min(260px,100%);height:8px;accent-color:#eadfbc;margin:10px 0}#cache-note{position:absolute;left:50%;bottom:max(14px,var(--safe-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 32px);font-size:14px;line-height:1.4;text-align:center;padding:10px 16px;border-radius:24px;background:#102c35f2;color:#e2eddb;pointer-events:none;opacity:0;transition:opacity .2s;z-index:6}#cache-note.visible{opacity:1}#update{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:3;font-size:14px}#rotate{z-index:5;background:#142e36f5}.phone{font-size:56px;line-height:1.15;color:#eadfbc}#update-dialog{z-index:4}#update-note{min-height:20px}

#stage.compact .panel{gap:8px}#stage.compact .panel img{width:44px;height:44px}#stage.compact h1{font-size:26px}#stage.compact h2{font-size:22px}#stage.compact .eyebrow{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}button:active{transform:none}}

/* The scene reaches every screen edge; only controls reserve safe areas. */
html[data-input=touch] body{padding:0;display:block}
html[data-input=touch] #stage{position:fixed;left:0;top:0;max-height:none;aspect-ratio:auto;border-radius:0;transform-origin:0 0}
html[data-input=touch] .overlay{padding:max(16px,var(--safe-top,0px)) max(24px,var(--safe-right,0px)) max(16px,var(--safe-bottom,0px)) max(24px,var(--safe-left,0px))}
html[data-input=touch] .panel img{display:none}
html[data-input=touch] .panel .hint{font-size:13px}
#safe-area{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#welcome{background:radial-gradient(ellipse at 50% 38%,#345450,#162f3c 80%)}#welcome .panel{gap:18px}#welcome h1{letter-spacing:.12em}#welcome .hint{opacity:.7}#play{min-width:180px;box-shadow:0 4px 0 #0e252f33}