* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0f1e; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #eaf2ff; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(4,7,15,.55) 100%);
}
#flash { position: fixed; inset: 0; opacity: 0; pointer-events: none; z-index: 3; transition: opacity .12s; }

#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(9,13,24,.85), rgba(9,13,24,0));
  pointer-events: none;
}
.stat { flex: 1 1 0; min-width: 74px; display: flex; flex-direction: column; gap: 3px; }
.stat.right { text-align: right; }
.label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7f95b8; }
.value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.value small { font-size: 12px; color: #7f95b8; font-weight: 600; margin-left: 3px; }
.sub { font-size: 11px; color: #53e0c8; min-height: 13px; }
.bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #53e0c8, #ffb14e); transition: width .2s; }
#timebar-fill { background: linear-gradient(90deg, #7fd8ff, #b7e6ff); }
#timebar-fill.low { background: linear-gradient(90deg, #ff5f6d, #ffa07a); }

#toast {
  position: fixed; left: 50%; top: 22%; transform: translate(-50%, 8px); z-index: 5;
  padding: 8px 16px; border-radius: 999px; background: rgba(83,224,200,.16);
  border: 1px solid rgba(83,224,200,.5); color: #baf7e8; font-weight: 700; font-size: 14px;
  opacity: 0; transition: .2s; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

#touch-pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: none; flex-wrap: wrap; gap: 8px; padding: 10px 12px 16px;
  justify-content: center;
}
#touch-pad.show { display: flex; }
.tc {
  pointer-events: auto; min-width: 58px; height: 52px; border-radius: 14px;
  border: 1px solid rgba(127,216,255,.4); background: rgba(20,32,54,.65); color: #cfe8ff;
  font-size: 17px; font-weight: 700; backdrop-filter: blur(4px); touch-action: none; user-select: none;
}
.tc:active { background: rgba(83,224,200,.3); color: #fff; }
.tc.wide { min-width: 76px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

#overlay {
  position: fixed; inset: 0; z-index: 6; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(11,15,30,.55), rgba(11,15,30,.86));
  padding: 18px;
}
#overlay[hidden] { display: none; }
.panel {
  max-width: 520px; width: 100%; text-align: center; padding: 26px 24px;
  border: 1px solid rgba(127,216,255,.25); border-radius: 18px;
  background: rgba(13,19,36,.78); box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.panel h2 { margin: 0 0 10px; font-size: clamp(24px, 6vw, 40px); letter-spacing: .04em; color: #fff; }
.panel p { margin: 0 0 18px; line-height: 1.65; color: #b7c8e6; font-size: 15px; }
.panel b { color: #ffd9a1; }
#overlay-cta {
  display: inline-block; padding: 12px 30px; border: 0; border-radius: 999px;
  font-size: 16px; font-weight: 800; cursor: pointer; letter-spacing: .05em;
  background: linear-gradient(90deg, #ffb14e, #ff7a59); color: #16100c;
  box-shadow: 0 8px 26px rgba(255,150,80,.35);
}
.back { display: block; margin-top: 14px; font-size: 12px; color: #6f87ad; }

@media (max-width: 480px) {
  .value { font-size: 16px; }
  .label { font-size: 9px; }
}