:root {
  color-scheme: dark;
  font-family: "Arial Narrow", "Microsoft YaHei", system-ui, sans-serif;
  --ink: #090d13;
  --panel: rgb(11 17 25 / 88%);
  --line: rgb(219 229 235 / 24%);
  --text: #edf1f2;
  --muted: #a9b2b7;
  --accent: #e7ad46;
  --danger: #d9554c;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100dvh; margin: 0; overflow: hidden; background: var(--ink); }
button { font: inherit; }
#game-shell { position: relative; width: 100%; min-height: 100dvh; display: grid; place-items: center; isolation: isolate; }
#game { display: block; width: 100%; height: 100dvh; object-fit: contain; background: #10151c; touch-action: none; }

#loading { --load-progress: 0%; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; overflow: hidden; background: linear-gradient(90deg, rgb(5 8 12 / 78%), rgb(5 8 12 / 56%)), url("assets/backgrounds/urban_overpass_night_v1.png") center / cover; transition: opacity .35s cubic-bezier(.16,1,.3,1); }
#loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 18%, transparent 82%, rgb(0 0 0 / 28%)); }
.loading-lockup { position: relative; z-index: 1; width: min(560px, calc(100vw - 48px)); padding: 34px 38px 30px; color: var(--text); background: rgb(9 13 19 / 90%); border: 1px solid var(--line); clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); box-shadow: 0 26px 70px rgb(0 6 14 / 42%), inset 0 1px rgb(255 255 255 / 8%); }
.loading-kicker { display: block; margin-bottom: 10px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .22em; }
#loading strong { display: block; font-size: clamp(24px, 3vw, 40px); line-height: 1.15; letter-spacing: -.03em; }
.loading-progress { height: 5px; margin-top: 30px; overflow: hidden; background: rgb(255 255 255 / 10%); }
.loading-progress i { display: block; width: var(--load-progress); height: 100%; background: var(--accent); transition: width .22s cubic-bezier(.16,1,.3,1); }
#loading-detail { display: block; margin-top: 10px; color: var(--muted); font-family: ui-monospace, "Microsoft YaHei", monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
#loading.hidden { opacity: 0; pointer-events: none; }

#utility-controls { position: absolute; right: 18px; bottom: 18px; z-index: 4; display: flex; gap: 8px; }
#utility-controls button { min-width: 76px; height: 38px; padding: 0 14px; border: 1px solid var(--line); color: var(--text); background: var(--panel); cursor: pointer; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
#utility-controls button:hover { border-color: rgb(231 173 70 / 72%); background: rgb(22 27 34 / 94%); }
#utility-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#utility-controls button:active { transform: translateY(1px) scale(.98); }

#touch-controls { position: absolute; inset: auto 0 18px; z-index: 3; display: none; justify-content: space-between; padding: 0 20px; pointer-events: none; }
#touch-controls > div { display: flex; gap: 9px; align-items: end; }
#touch-controls button { width: 72px; height: 64px; border: 1px solid rgb(230 236 239 / 28%); color: var(--text); background: rgb(12 18 26 / 82%); font-weight: 900; pointer-events: auto; touch-action: none; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); box-shadow: inset 0 1px rgb(255 255 255 / 8%); }
#touch-controls button:active { transform: translateY(2px) scale(.97); background: rgb(31 38 48 / 94%); }
#touch-controls .attack { width: 92px; height: 78px; color: #17120b; background: rgb(231 173 70 / 92%); border-color: rgb(255 224 164 / 78%); }

@media (pointer: coarse), (max-width: 900px) {
  body.playing #touch-controls { display: flex; }
  body.playing #utility-controls { top: 10px; right: 10px; bottom: auto; transform: scale(.88); transform-origin: top right; }
  body.playing #utility-controls button { min-width: 68px; height: 34px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #loading, .loading-progress i, #utility-controls button { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #loading, .loading-lockup, #utility-controls button, #touch-controls button { background-color: #0d131b; }
}