:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;background:#142a31;color:#fff7df;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%,#3a5a53,#142a31 78%)}
[hidden]{display:none!important}button{font:inherit;font-size:16px;cursor:pointer;min-width:48px;min-height:48px;border:1px solid #fff4d752;border-radius:17px 21px 15px 20px;touch-action:manipulation;background:#eadfbc;color:#183c43;padding:10px 22px;font-weight:650;line-height:1.35;box-shadow:0 4px 10px #10282b29;transition:transform .12s ease-out,filter .16s ease-out}button:disabled{opacity:.55;cursor:wait}button:focus-visible{outline:3px solid #f2c36e;outline-offset:3px}button:active{transform:translateY(1px) scale(.985)}button.secondary{background:#173b43;color:#fff7df;border:1px solid #c9d9c65c}
#stage{position:relative;width:min(1680px,100%);height:min(1050px,100%);aspect-ratio:auto;max-height:100%;overflow:hidden;border:1px solid #d7e2cc2e;border-radius:16px;background:#172e38;box-shadow:0 24px 70px #06161c78}
#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:radial-gradient(ellipse at 50% 44%,#17373bb8,#0c222bdd 74%);overflow:auto;overscroll-behavior:contain}.panel{position:relative;width:min(340px,100%);max-height:none;flex-shrink:0;margin:auto;padding:28px 24px 30px;display:flex;flex-direction:column;align-items:center;gap:11px;border:1px solid #fff3cf38;border-radius:34px 42px 32px 38px;background:radial-gradient(circle at 30% 8%,#fffaf0f2,#eadfcaf0 72%,#d6cab2f2);box-shadow:0 18px 48px #07191f73,inset 0 1px 0 #fff;color:#193c40}.panel:after{content:"";position:absolute;inset:9px;border:1px solid #8ba89d36;border-radius:27px 35px 25px 31px;pointer-events:none}.panel>button{position:relative;width:min(256px,100%);flex-shrink:0}.panel img{border-radius:22px;flex-shrink:0;filter:drop-shadow(0 5px 8px #5b382542)}.eyebrow{font-size:12px;letter-spacing:.18em;margin:0;color:#587871}h1,h2,p{margin:0}h1{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:.06em}h2{font-size:24px;line-height:1.3;font-weight:700}.panel p{font-size:16px;line-height:1.55;color:#3e625d}.panel .hint{font-size:13px;color:#69837c}#play span{margin-left:22px}progress{display:block;width:min(260px,100%);height:8px;accent-color:#d79a3a;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:0;border-radius:0;box-shadow:none;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%,#45665cd9,#142e38f2 78%)}#welcome .panel{gap:18px}#welcome h1{letter-spacing:.12em}#welcome .hint{opacity:.82}#play{min-width:180px;background:linear-gradient(#eebc61,#d79536);color:#203e3f;box-shadow:0 4px 0 #84551e,0 9px 20px #6b471d33}

/* A launch gate covers every cached pixel until the tiny network release
   manifest confirms that this document is current. It is atmosphere, not an
   update dialog: there is no decision or extra tap. */
.freshness{z-index:9;flex-direction:column;gap:16px;background:radial-gradient(ellipse at 50% 42%,#45665f,#142d37 72%);font-size:14px;letter-spacing:.08em;color:#f5e9c7;transition:opacity .18s ease,visibility .18s ease}
.fresh-mark{position:relative;width:88px;height:46px;border-radius:48% 52% 44% 56%/55% 50% 50% 45%;background:linear-gradient(155deg,#fffbe9,#e8d6b2);box-shadow:inset 0 2px 0 #fff,0 12px 24px #06171e66}
.fresh-mark:after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:7px;border-radius:50%;background:#9a6d3b22;filter:blur(1px)}
.fresh-mark i{position:absolute;bottom:38px;width:10px;height:24px;border:2px solid #f5e9c777;border-color:#f5e9c777 transparent transparent;border-radius:50%;animation:steam 1.8s ease-in-out infinite}
.fresh-mark i:nth-child(1){left:22px}.fresh-mark i:nth-child(2){left:39px;animation-delay:-.6s}.fresh-mark i:nth-child(3){left:56px;animation-delay:-1.2s}
html[data-freshness=ready] .freshness{opacity:0;visibility:hidden;pointer-events:none}
@keyframes steam{0%,100%{transform:translateY(5px) scale(.8);opacity:.12}50%{transform:translateY(-5px) translateX(2px) scale(1);opacity:.72}}
@media (prefers-reduced-motion:reduce){.fresh-mark i{animation:none;opacity:.45}}

/* Menu surfaces are glazed tofu, with a warm miso edge instead of a generic
   web card. Runtime controls remain in the Godot layer. */
.panel{overflow:hidden;background:radial-gradient(circle at 28% 4%,#fffdf4f5,#f1e5caf2 64%,#dac39eef);border-color:#fff8dc66}
.panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 24%,#96744a18 0 2px,transparent 3px),radial-gradient(circle at 79% 67%,#96744a12 0 1.5px,transparent 2.5px),linear-gradient(110deg,transparent 72%,#b66f2522 73%,transparent 78%)}
html[data-input=mouse] .panel{width:min(420px,100%);padding:34px 32px 36px;gap:13px}
html[data-input=mouse] .panel img{width:76px;height:76px}
html[data-input=mouse] .panel h1{font-size:34px}
html[data-input=mouse] .panel>button{width:min(292px,100%)}
.panel>*{z-index:1}