:root {
  --ink: #040811;
  --navy: #07111f;
  --glass: rgba(7, 19, 36, .66);
  --line: rgba(112, 245, 255, .32);
  --text: #f4fbff;
  --muted: #a9c7da;
  --cyan: #70f5ff;
  --orange: #ff9d45;
}

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #040811; }
body { font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: #f4fbff; }
#game-shell { position: fixed; inset: 0; touch-action: none; user-select: none; background: radial-gradient(circle at 50% 35%, #183559 0, #07111f 42%, #03060d 100%); }
#scene, #scene canvas { width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
button:focus-visible { outline: 3px solid #70f5ff; outline-offset: 4px; }

button {
  border: 1px solid var(--cyan); border-radius: .5rem; padding: .8rem 1.25rem;
  color: var(--ink); background: var(--cyan); font-weight: 700; font-size: .95rem; font-family: inherit; line-height: 1;
  letter-spacing: .08em; cursor: pointer; box-shadow: 0 0 24px rgba(112, 245, 255, .25);
}
button:disabled { cursor: wait; opacity: .68; }
#hud { position: absolute; z-index: 2; top: max(1rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.stat { min-width: 4.75rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--glass); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.stat span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .12em; }
.stat strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stat-right { margin-left: auto; }
#pause-button { width: 2.55rem; padding: .52rem 0; border-color: rgba(255,255,255,.5); color: var(--text); background: var(--glass); }
#buff-bar { position: absolute; z-index: 2; top: calc(max(1rem, env(safe-area-inset-top)) + 4.5rem); left: max(1rem, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; gap: .35rem; font-size: .78rem; }
.buff-chip { padding: .4rem .7rem; border: 1px solid currentColor; border-radius: 999px; background: rgba(7, 19, 36, .8); }
.buff-chip--shield { color: #70f5ff; } .buff-chip--revive { color: #ff9ab1; } .buff-chip--flight { color: #c3abff; } .buff-chip--flight-active { color: #70f5ff; } .buff-chip--double { color: #ffd14e; } .buff-chip--slow { color: #70e1a8; }
.buff-chip.is-pulsing { animation: flight-pulse .34s ease-in-out infinite alternate; }
#toast { position: absolute; z-index: 4; top: 29%; left: 50%; max-width: min(88vw, 28rem); padding: .65rem .9rem; border-radius: .5rem; color: var(--text); background: rgba(3, 10, 22, .82); box-shadow: 0 0 0 1px var(--line); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -10px); transition: opacity .18s, transform .18s; }
#toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
#toast.is-visible { animation: toast-pop .18s ease-out; }
.damage-vignette::after { content: ''; position: fixed; z-index: 5; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 36%, rgba(255, 70, 45, .52) 100%); animation: damage-flash .12s ease-out forwards; }
@keyframes toast-pop { from { filter: brightness(1.7); } to { filter: brightness(1); } }
@keyframes damage-flash { from { opacity: 1; } to { opacity: 0; } }
.overlay { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1rem; box-sizing: border-box; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: max(2rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(3,6,13,.28), rgba(3,6,13,.8)); text-align: center; }
.overlay h1, .overlay h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400; letter-spacing: .06em; line-height: .84; text-shadow: 0 0 26px rgba(112,245,255,.27); }
.overlay h1 { font-size: clamp(3.3rem, 13vw, 7.5rem); }
.overlay h1 span { color: var(--orange); }
.overlay h2 { font-size: clamp(2.4rem, 9vw, 4.5rem); }
.overlay p { max-width: 29rem; margin: 0; color: var(--muted); }
.eyebrow { color: var(--cyan) !important; font-size: .72rem; font-weight: 700; letter-spacing: .19em; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; color: var(--muted); font-size: .82rem; }
#load-error { min-height: 1.25em; color: #ffb4a5; }
#flight-button { position: absolute; z-index: 3; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: none; width: 5.75rem; height: 5.75rem; place-items: center; border-radius: 50%; border-color: var(--orange); color: var(--text); background: rgba(255,157,69,.2); box-shadow: 0 0 30px rgba(255,157,69,.32); }
#flight-button:disabled { cursor: not-allowed; opacity: .42; filter: saturate(.45); }
#flight-button.is-pulsing { animation: flight-pulse .34s ease-in-out infinite alternate; }
@keyframes flight-pulse { to { transform: scale(1.08); box-shadow: 0 0 38px rgba(112,245,255,.8); } }

@media (pointer: coarse), (max-width: 760px) { #flight-button:not([hidden]) { display: grid; } .controls { font-size: .72rem; } }
@media (max-width: 560px) { #hud { gap: .35rem; } .stat { min-width: 3.65rem; padding: .35rem .48rem; } .stat strong { font-size: .95rem; } .stat-right { margin-left: 0; } #pause-button { margin-left: auto; } }
@media (max-width: 760px) and (orientation: portrait) {
  #hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: .35rem; }
  .stat, .stat-right { min-width: 0; margin-left: 0; }
  #pause-button { grid-column: 2; margin-left: 0; }
  #buff-bar { top: auto; right: max(1rem, env(safe-area-inset-right)); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 6.3rem); justify-content: flex-end; }
}
@media (max-width: 760px) and (orientation: landscape) {
  #hud { flex-wrap: nowrap; gap: .35rem; }
  .stat { min-width: 3.55rem; padding: .3rem .45rem; }
  .stat strong { font-size: .92rem; }
  #buff-bar { top: calc(max(.7rem, env(safe-area-inset-top)) + 3.8rem); }
}
@media (max-height: 500px) {
  .overlay { align-content: start; padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .damage-vignette::after { display: none; } }