:root {
  --bg-0: #0b1020;
  --bg-1: #131a33;
  --panel: rgba(20, 28, 54, 0.92);
  --accent: #ffd34e;
  --accent-2: #7ed957;
  --danger: #ff5d5d;
  --text: #eaf0ff;
  --muted: #9aa6c8;
  --card: #1d2748;
  --card-sel: #2f3f72;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: radial-gradient(1200px 800px at 50% -10%, #1b2752 0%, var(--bg-0) 60%, #070a16 100%);
  color: var(--text);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: min(960px, 96vw);
  margin: 0 auto;
  padding: 14px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(40,54,100,0.7), rgba(20,28,54,0.7));
  border: 1px solid rgba(120,140,200,0.25);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.sun-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #2a3566, #1a2244);
  border: 1px solid rgba(255,211,78,0.4);
  border-radius: 14px;
  padding: 8px 14px;
  min-width: 92px;
  justify-content: center;
  box-shadow: inset 0 0 14px rgba(255,211,78,0.12);
}
.sun-icon { font-size: 22px; filter: drop-shadow(0 0 6px rgba(255,211,78,0.6)); }
.sun-value { font-weight: 800; font-size: 20px; color: var(--accent); }

.card-bar {
  display: flex;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  padding: 2px;
}
.card-bar::-webkit-scrollbar { height: 6px; }
.card-bar::-webkit-scrollbar-thumb { background: rgba(150,170,230,0.35); border-radius: 4px; }

.card {
  position: relative;
  flex: 0 0 auto;
  width: 70px;
  height: 84px;
  background: linear-gradient(180deg, var(--card), #161e3a);
  border: 1px solid rgba(140,160,220,0.3);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
  overflow: hidden;
  user-select: none;
}
.card:hover { transform: translateY(-3px); border-color: rgba(180,200,255,0.6); }
.card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,211,78,0.6), 0 8px 18px rgba(255,211,78,0.18);
  background: linear-gradient(180deg, var(--card-sel), #1c2950);
}
.card.disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.card-emoji { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.card-name { font-size: 11px; color: var(--text); white-space: nowrap; }
.card-cost {
  font-size: 11px; font-weight: 700; color: var(--accent);
  display: flex; align-items: center; gap: 2px;
}
.cooldown-overlay {
  position: absolute; left: 0; top: 0; width: 100%;
  background: rgba(8,12,26,0.78);
  height: 0%;
  pointer-events: none;
  transition: height .1s linear;
}

.wave-box { width: 150px; }
.wave-label { font-size: 12px; color: var(--muted); margin-bottom: 5px; text-align: center; }
.wave-track {
  height: 12px; border-radius: 8px; overflow: hidden;
  background: #0e1430; border: 1px solid rgba(140,160,220,0.3);
}
.wave-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff8a3d, var(--danger));
  transition: width .3s ease;
}

.mute-btn {
  background: var(--card); color: var(--text);
  border: 1px solid rgba(140,160,220,0.3);
  border-radius: 12px; width: 42px; height: 42px;
  font-size: 20px; cursor: pointer; transition: transform .1s;
}
.mute-btn:hover { transform: scale(1.06); }

/* ---------- 舞台 ---------- */
.stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(120,140,200,0.2);
}
#game { display: block; width: 100%; height: auto; background: #2c6e2f; }

/* ---------- 遮罩 ---------- */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,22,0.72);
  backdrop-filter: blur(8px);
  z-index: 20;
  transition: opacity .25s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }

.panel {
  width: min(440px, 86%);
  background: var(--panel);
  border: 1px solid rgba(140,160,220,0.35);
  border-radius: 20px;
  padding: 26px 26px 30px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  animation: pop .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.title { font-size: 30px; margin-bottom: 6px; }
.subtitle { color: var(--muted); margin-bottom: 16px; font-size: 14px; }
.rules {
  text-align: left; list-style: none; margin: 0 auto 22px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; color: #cdd6f4;
}
.rules li { background: rgba(255,255,255,0.04); padding: 8px 12px; border-radius: 10px; }

.big-btn {
  font-size: 18px; font-weight: 800; color: #1b1300;
  background: linear-gradient(180deg, #ffe07a, var(--accent));
  border: none; border-radius: 14px;
  padding: 12px 28px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,211,78,0.35);
  transition: transform .1s, box-shadow .1s;
}
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,211,78,0.5); }
.big-btn:active { transform: translateY(0); }

/* ---------- 波次横幅 ---------- */
.banner {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  font-size: 34px; font-weight: 900;
  color: #fff; text-shadow: 0 0 18px rgba(255,60,60,0.9), 0 4px 10px rgba(0,0,0,0.6);
  letter-spacing: 2px;
  z-index: 15; pointer-events: none;
  animation: bannerIn 1.6s ease forwards;
}
@keyframes bannerIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
.banner.hidden { display: none; }