/* ============================================================
   余烬 Ember - UI v6 Clean Product Style
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; width: 100%; height: 100%; overflow: hidden;
  background: #0b0e14; color: #eef2ff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#game {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  background: radial-gradient(circle at center, #141b28 0%, #0b0e14 70%);
}
.overlay {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(7,10,16,.74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 20px;
}
.hidden { display: none !important; }
.panel {
  width: min(920px, 96vw);
  background: linear-gradient(180deg, rgba(20,27,40,.96), rgba(10,14,20,.98));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 28px;
}
.hero-panel { text-align: center; max-width: 720px; }
.brand-mark {
  width: 70px; height: 70px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #f59e0b, #ea580c);
  color: #fff; font-size: 34px; font-weight: 900;
  box-shadow: 0 14px 40px rgba(234,88,12,.35);
}
.hero-panel h1 {
  margin: 0; font-size: clamp(48px, 9vw, 88px);
  letter-spacing: .28em; text-indent: .28em;
  color: #f8fafc;
}
.subtitle {
  margin: 10px 0 24px; color: #94a3b8; font-size: 17px;
}
.menu-buttons, .menu-actions-secondary, .result-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.btn-primary, .btn-secondary {
  appearance: none; border: 0; cursor: pointer;
  padding: 14px 24px; border-radius: 14px;
  font-size: 16px; font-weight: 700; transition: .15s ease;
}
.btn-primary {
  background: linear-gradient(180deg, #f59e0b, #ea580c);
  color: #fff; box-shadow: 0 10px 30px rgba(234,88,12,.28);
}
.btn-secondary {
  background: rgba(255,255,255,.05); color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.menu-meta, .meta-preview, .menu-help, .menu-lore {
  margin-top: 14px; color: #94a3b8; font-size: 13px; line-height: 1.6;
}
.reward-header h2, .result-panel h2 { margin: 0; font-size: 28px; color: #f8fafc; }
.reward-header p { margin: 8px 0 18px; color: #94a3b8; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card {
  text-align: left; border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding: 16px; color: #e5e7eb; cursor: pointer; min-height: 210px;
}
.card:hover { border-color: rgba(245,158,11,.45); background: linear-gradient(180deg, rgba(245,158,11,.08), rgba(255,255,255,.02)); }
.card h3 { margin: 8px 0 10px; font-size: 20px; color: #f8fafc; }
.card .type { font-size: 12px; color: #f59e0b; font-weight: 700; }
.card .desc { font-size: 14px; color: #cbd5e1; line-height: 1.5; }
.card .stats-line { margin-top: 8px; font-size: 12px; color: #94a3b8; }
.card .cost { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); color: #fb7185; font-size: 12px; }
.card .combo-hint { margin-top: 8px; font-size: 12px; color: #f59e0b; font-weight: 700; }
.card.common { box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.card.rare { box-shadow: inset 0 0 0 1px rgba(59,130,246,.24); }
.card.epic { box-shadow: inset 0 0 0 1px rgba(168,85,247,.24); }
.card.legendary { box-shadow: inset 0 0 0 1px rgba(245,158,11,.32), 0 0 24px rgba(245,158,11,.12); }
.result-stats { margin-top: 18px; display: grid; gap: 10px; }
.final-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03);
  color: #cbd5e1; font-size: 15px;
}
.final-stat span { color: #f8fafc; font-weight: 700; }
.wave-splash {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: clamp(40px, 8vw, 86px);
  text-shadow: 0 0 28px rgba(245,158,11,.5);
  pointer-events: none; opacity: 0; transform: scale(1.06);
}
.wave-splash.show { animation: splashIn .24s ease forwards, splashOut .4s 1.25s ease forwards; }
@keyframes splashIn { to { opacity: 1; transform: scale(1); } }
@keyframes splashOut { to { opacity: 0; transform: scale(.96); } }
.tutorial-box {
  position: fixed; z-index: 25; top: max(78px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  min-width: 340px; max-width: min(86vw, 680px); padding: 12px 16px;
  border-radius: 14px; background: rgba(10,14,20,.82); border: 1px solid rgba(255,255,255,.08);
  color: #f8fafc; text-align: center; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#hud {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
}
.hud-top-left, .hud-top-center, .hud-top-right {
  position: fixed; top: max(14px, env(safe-area-inset-top));
}
.hud-top-left { left: max(16px, env(safe-area-inset-left)); }
.hud-top-center { left: 50%; transform: translateX(-50%); min-width: min(420px, 46vw); }
.hud-top-right { right: max(16px, env(safe-area-inset-right)); max-width: 340px; text-align: right; }
.hud-wave-line { display: flex; align-items: center; gap: 10px; }
#waveText { color: #f8fafc; font-size: 18px; font-weight: 700; }
.hud-subline { margin-top: 4px; color: #94a3b8; font-size: 13px; }
.combo-chip {
  padding: 4px 8px; border-radius: 999px; background: rgba(245,158,11,.18);
  color: #f59e0b; font-size: 13px; font-weight: 800;
}
.hp-shell {
  height: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; overflow: hidden; position: relative;
}
.hp-bar, .barrier-bar {
  position: absolute; left: 0; top: 0; height: 100%; transition: width .16s ease;
}
.hp-bar { width: 100%; background: linear-gradient(90deg, #f59e0b, #ea580c); z-index: 2; }
.barrier-bar { width: 0%; background: linear-gradient(90deg, #22d3ee, #0ea5e9); z-index: 1; }
.hp-text { margin-top: 6px; color: #e2e8f0; font-size: 13px; text-align: center; }
.stats-line { color: #cbd5e1; font-size: 12px; line-height: 1.5; }
.message-log {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(96px, calc(env(safe-area-inset-bottom) + 72px));
  display: grid; gap: 6px; width: min(380px, 52vw);
}
.message-log div {
  padding: 8px 10px; border-radius: 10px; background: rgba(10,14,20,.72);
  color: #cbd5e1; font-size: 12px; border: 1px solid rgba(255,255,255,.04);
}
.doom-timer {
  position: fixed; left: 50%; top: max(54px, calc(env(safe-area-inset-top) + 34px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; color: #f59e0b; font-size: 14px; font-weight: 800;
}
.dash-button {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(30px, env(safe-area-inset-bottom));
  width: 68px; height: 68px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,14,20,.72); color: #f8fafc; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.dash-ring {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(245,158,11,.2);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.02);
}
.dash-label { font-size: 11px; color: #94a3b8; font-weight: 700; }
.joystick {
  position: fixed; left: max(20px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom));
  width: 124px; height: 124px; border-radius: 50%;
  background: rgba(10,14,20,.62); border: 1px solid rgba(255,255,255,.08); z-index: 12; pointer-events: auto;
}
.knob {
  position: absolute; left: 35px; top: 35px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.char-grid, .meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.char-card, .meta-card, .codex-section {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px;
}
.char-card { display: flex; gap: 12px; cursor: pointer; }
.char-card:hover { border-color: rgba(245,158,11,.28); }
.char-selected { border-color: rgba(245,158,11,.5); box-shadow: 0 0 22px rgba(245,158,11,.12); }
.char-icon {
  width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 800;
}
.char-name { color: #f8fafc; font-size: 18px; font-weight: 800; }
.char-sub, .char-desc, .char-stats-line, .char-unlock, .meta-desc, .meta-cost { color: #94a3b8; font-size: 12px; }
.meta-name { display: flex; justify-content: space-between; color: #f8fafc; font-size: 16px; font-weight: 800; }
.codex-section h3 { margin: 0 0 8px; color: #f8fafc; font-size: 16px; }
@media (max-width: 760px) {
  .choices, .char-grid, .meta-grid { grid-template-columns: 1fr; }
  .hud-top-right { display: none; }
  .hud-top-center { min-width: min(280px, 42vw); }
  .tutorial-box { min-width: unset; }
}
@media (orientation: portrait) {
  .hud-top-right { display: none; }
  .joystick { width: 110px; height: 110px; }
  .knob { width: 46px; height: 46px; left: 32px; top: 32px; }
  .dash-button { width: 60px; height: 60px; }
}