:root{color-scheme:dark;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--bg:#0b121b;--surface:#111c28;--border:#34485e;--text:#ecf2fa;--muted:#8f9fb2;--accent:#2dd4bf}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',sans-serif;overscroll-behavior:none}button{font:inherit;min-height:48px;border:1px solid var(--border);border-radius:12px;padding:10px 18px;color:var(--text);background:var(--surface);cursor:pointer}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:active{background:#20394a}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){background:#1b2c3d;border-color:#607b96}#enter{background:var(--accent);border-color:var(--accent);color:#082329;font-weight:600}#enter:hover:not(:disabled){background:#53e3d0}
#stage{position:fixed;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}#canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}body[hidden],[hidden]{display:none!important}.veil{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left));background:#0b121bf2}.surface{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:28px}.welcome{text-align:center;width:min(500px,100%)}.welcome .logo{margin:0;font-size:clamp(36px,9vw,56px);letter-spacing:2px;font-weight:700}.subtitle{font-size:11px;letter-spacing:4px;color:var(--muted);margin:8px 0 28px}.welcome p{color:var(--muted);line-height:1.7;font-size:16px}.welcome button{min-width:230px;font-size:22px}.welcome progress{display:block;width:80%;margin:20px auto 0;height:5px;accent-color:var(--accent)}#load-status,#rotate-status{font-size:14px;min-height:24px}.platform{width:min(700px,100%);max-height:100%;overflow:auto}.platform header{display:flex;align-items:center;justify-content:space-between;gap:16px}.platform h1{margin:0;font-weight:600;font-size:28px}.platform p{color:var(--muted);line-height:1.6}.platform nav{display:grid;grid-template-columns:1fr 1fr;gap:12px}.platform nav button{font-size:19px}.platform ol{padding:0;list-style:none;max-height:170px;overflow:auto}.platform li{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--border);color:var(--text)}.platform li span:first-child{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#platform-status{min-height:24px}#rotate{z-index:30}@media(max-height:500px){.surface{padding:16px}.welcome .logo{font-size:36px}.subtitle{margin-bottom:12px}.welcome p{margin:8px 0}.platform{max-width:730px}.platform nav{grid-template-columns:repeat(3,1fr);gap:8px}.platform header button{min-height:44px}.platform h1{font-size:25px}.platform p{margin:8px 0;font-size:14px}.platform nav button{font-size:18px}.platform ol{max-height:100px}}

#startup-recovery { z-index: 80; overflow: auto; }
.startup-recovery { width: min(560px, 100%); max-height: 100%; overflow: auto; }
.startup-recovery h1 { margin-top: 0; font-size: 24px; }
.startup-recovery p { line-height: 1.6; overflow-wrap: anywhere; }
#startup-meta, #startup-copy-status { color: var(--muted); font-size: 13px; }
#startup-original { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow: auto; font-size: 12px; }
.startup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
#startup-game-link { width: 100%; resize: vertical; padding: 10px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.startup-recovery [data-diagnostics] { margin-top: 12px; width: 100%; }

/* Loading screen: a quiet, illuminated corridor and a single endless-mode cue. */
#loading {
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 43%, #153b38 0%, #0b1b22 38%, #060c12 78%);
}
#loading::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -30%;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #5eead414 50%, transparent calc(50% + .5px)),
    repeating-linear-gradient(90deg, transparent 0 95px, #5eead409 96px 97px),
    repeating-linear-gradient(0deg, transparent 0 95px, #5eead409 96px 97px);
  transform: perspective(500px) rotateX(58deg) translateY(32%);
  mask-image: radial-gradient(ellipse, #000 5%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse, #000 5%, transparent 65%);
  pointer-events: none;
}
.diagnostic-crash { position:fixed; inset:0; z-index:110; display:grid; place-items:center; overflow:auto; padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left)); background:#070d16f5; }
.diagnostic-crash>div { width:min(560px,100%); border:1px solid #f6979780; border-top:4px solid #f69797; border-radius:16px; background:#15212e; padding:22px; box-shadow:0 20px 60px #0008; }
.diagnostic-crash h2 { margin:0 0 8px; font-size:24px; color:#ffd5d5; }
.diagnostic-crash-hint { font-size:16px; line-height:1.5; margin:0 0 18px; color:#e1f5ed; }
.diagnostic-crash-reason { display:block; font-size:17px; margin-bottom:10px; }
.diagnostic-crash-message { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:12px; background:#091219; border-radius:8px; font:13px/1.55 monospace; color:#ffe3dc; }
.diagnostic-crash-meta { white-space:pre-wrap; overflow-wrap:anywhere; color:#b6c9dc; font-size:12px; line-height:1.8; margin:14px 0; }
.diagnostic-crash button { margin:0 8px 0 0; min-height:44px; font-size:14px; }
@media(max-width:420px) { .diagnostic-crash>div { padding:18px; } .diagnostic-crash h2 { font-size:22px; } .diagnostic-crash-message { font-size:12px; } }
.diagnostic-panel { position:fixed; inset:0; z-index:120; padding:16px; background:#000c; overflow:auto; display:grid; place-items:center; }
.diagnostic-panel[hidden] { display:none; }
.diagnostic-panel>div { width:min(680px,100%); background:#12212d; color:#e1f5ed; padding:20px; border-radius:16px; box-sizing:border-box; }
.diagnostic-panel textarea { width:100%; height:45vh; min-height:150px; box-sizing:border-box; background:#091219; color:#e1f5ed; font:12px monospace; resize:vertical; }
.diagnostic-panel button { margin:8px 8px 0 0; }
#loading .welcome [data-diagnostics] { margin-top:12px; min-height:36px; font-size:13px; background:transparent; color:#a8d7c9; border-color:#83c7b52e; }
#loading::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 24px;
  border: 1px solid #8ed5c80c;
  border-radius: 24px;
  pointer-events: none;
}
#loading .welcome {
  position: relative;
  width: min(420px, 100%);
  padding: 46px 38px 34px;
  border: 1px solid #9dd8cb20;
  border-top-color: #9dd8cb3d;
  border-radius: 24px;
  background: linear-gradient(155deg, #1b343bba, #0c171fe8 65%);
  box-shadow: 0 28px 90px #0006, inset 0 1px 0 #c2fff308;
}
#loading .welcome::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 30%;
  right: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #91ead4, transparent);
  box-shadow: 0 0 22px #5eead438;
}
#loading .endless-mark {
  display: block;
  width: 120px;
  height: 60px;
  margin: 0 auto 26px;
  color: #8fe8cf;
  filter: drop-shadow(0 0 16px #5eead43d);
}
#loading .endless-mark path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#loading #load-status {
  margin: 0;
  min-height: 32px;
  color: #e1f5ed;
  font-size: clamp(19px, 5vw, 23px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
  overflow-wrap: anywhere;
}
#loading #progress {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  margin: 28px 0 24px;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #a2d7cc12;
  color: #8fe8cf;
}
#loading #progress::-webkit-progress-bar { background: #a2d7cc12; border-radius: 3px; }
#loading #progress::-webkit-progress-value { background: linear-gradient(90deg, #328f83, #a9f2d4); border-radius: 3px; transition: width .25s ease; }
#loading #progress::-moz-progress-bar { background: linear-gradient(90deg, #328f83, #a9f2d4); border-radius: 3px; }
#loading .welcome button {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border-radius: 12px;
  font-size: 17px;
  letter-spacing: .08em;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#loading #enter {
  border-color: #ade8d4;
  background: linear-gradient(110deg, #a9ead2, #78cdbb);
  color: #0b302e;
  font-weight: 700;
  box-shadow: 0 5px 24px #65dcb51a, inset 0 1px 0 #ffffff45;
}
#loading #enter:disabled { opacity: 1; color: #90b4ae; background: #1c3539; border-color: #628e852e; box-shadow: none; }
#loading #enter:hover:not(:disabled) { background: linear-gradient(110deg, #c4f6e1, #96e2ce); box-shadow: 0 6px 30px #65dcb532; transform: translateY(-1px); }
#loading #enter:active:not(:disabled) { transform: translateY(0); }
#loading #campaign-restart, #loading #endless-start { margin-top: 12px; color: #a8d7c9; background: #11262d; border-color: #83c7b52e; font-size: 15px; }
#loading #campaign-restart:hover:not(:disabled), #loading #endless-start:hover:not(:disabled) { background: #1b373d; border-color: #83c7b566; }
@media (max-width: 480px) {
  #loading::after { inset: 12px; border-radius: 18px; }
  #loading .welcome { width: min(360px, calc(100% - 24px)); padding: 38px 26px 28px; border-radius: 20px; }
}
@media (max-height: 500px) {
  #loading .welcome { padding: 20px 30px; }
  #loading .endless-mark { width: 80px; height: 40px; margin-bottom: 10px; }
  #loading #progress { margin: 16px 0; }
  #loading .welcome button { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  #loading .welcome button, #loading #progress::-webkit-progress-value { transition: none; }
}