:root {
  --ink: #0c2433;
  --cool: #38e0c8;
  --cool-2: #3aa0ff;
  --gold: #ffcf4a;
  --hot: #ff5a52;
  --panel: rgba(8, 28, 40, 0.78);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #06141d;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  -webkit-user-select: none; user-select: none;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  overscroll-behavior: none;
}

.stage {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #1a4b63 0%, #0c2433 55%, #06141d 100%);
}

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(10px + var(--safe-top)) 14px 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .25s ease;
}
.hud.hidden { opacity: 0; }

.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hud-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hud-right { display: flex; align-items: flex-start; gap: 8px; }

.lives { display: flex; gap: 5px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.heart {
  width: 26px; height: 26px; font-size: 24px; line-height: 26px; text-align: center;
  transition: transform .2s ease, opacity .25s ease, filter .25s ease;
}
.heart.lost { opacity: .28; filter: grayscale(1); transform: scale(.82); }

.score-wrap { text-align: right; }
.score {
  font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: .5px;
  text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 18px rgba(56,224,200,.35);
  font-variant-numeric: tabular-nums;
}
.best { font-size: 12px; opacity: .82; margin-top: 2px; font-weight: 700; }

.icon-btn {
  pointer-events: auto;
  width: 40px; height: 40px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(8,28,40,.55); color: #fff;
  font-size: 15px; font-weight: 800; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .2s ease;
}
.icon-btn:active { transform: scale(.9); background: rgba(56,224,200,.3); }
.icon-btn.off { opacity: .5; }

.combo-chip {
  pointer-events: none;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--cool), var(--cool-2));
  color: #062028; font-weight: 900;
  box-shadow: 0 4px 14px rgba(56,224,200,.45);
  transform-origin: left center;
}
.combo-chip small { font-size: 11px; font-weight: 800; }
.combo-chip #comboNum { font-size: 19px; }
.combo-chip.pop { animation: chipPop .28s ease; }
@keyframes chipPop { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }

.cool-wrap { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.cool-label {
  font-size: 12px; font-weight: 900; letter-spacing: 2px;
  color: var(--cool); text-shadow: 0 0 12px rgba(56,224,200,.55);
  white-space: nowrap;
}
.cool-track {
  flex: 1; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
  overflow: hidden;
}
.cool-fill {
  width: 0%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cool-2), var(--cool) 60%, #d6fff7);
  box-shadow: 0 0 14px rgba(56,224,200,.7);
  transition: width .14s linear;
}
.cool-fill.full { animation: coolPulse .6s ease infinite; }
@keyframes coolPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.5)} }

/* ---------- Center banner ---------- */
.banner {
  position: absolute; left: 0; right: 0; top: 34%;
  text-align: center; z-index: 25; pointer-events: none;
  font-weight: 900; font-size: 46px;
  letter-spacing: 2px;
  opacity: 0;
}
.banner.show { animation: bannerPop 1.1s cubic-bezier(.2,.9,.25,1) forwards; }
@keyframes bannerPop {
  0% { opacity: 0; transform: scale(.5) translateY(12px); }
  18% { opacity: 1; transform: scale(1.12) translateY(0); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04) translateY(-16px); }
}

/* ---------- Overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
  background: radial-gradient(120% 90% at 50% 10%, rgba(12,36,51,.55), rgba(4,12,18,.86));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: opacity .3s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay--solid { background: radial-gradient(120% 90% at 50% 12%, #15455d, #06141d 75%); backdrop-filter: none; }

.brand { text-align: center; margin-bottom: 6px; }
.brand-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 3px;
  color: var(--cool); opacity: .9; margin-bottom: 8px;
}
.brand-title {
  font-size: clamp(28px, 8.5vw, 44px); font-weight: 900; line-height: 1.08;
  background: linear-gradient(180deg, #ffffff, #bfefff 60%, #6fe6d2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 26px rgba(56,224,200,.35);
}
.brand-title .dot { color: var(--gold); -webkit-text-fill-color: var(--gold); margin: 0 2px; }

.panel {
  width: min(440px, 92vw);
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  padding: 26px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  text-align: center;
  animation: panelIn .4s cubic-bezier(.2,.9,.3,1);
}
.panel--compact { width: min(340px, 86vw); }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

.panel-title { font-size: 26px; font-weight: 900; margin-bottom: 16px; }

.howto { list-style: none; text-align: left; margin: 18px 0 22px; display: grid; gap: 11px; }
.howto li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; line-height: 1.35; opacity: .95; }
.howto b { color: #aef3e6; }
.ic {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900;
}
.ic-cut { background: linear-gradient(135deg,#38e0c8,#3aa0ff); color:#03242b; }
.ic-letter { background: linear-gradient(135deg,#ffd76a,#ff9e2c); color:#5a3500; }
.ic-bomb { background: linear-gradient(135deg,#ff7a72,#d23a32); color:#fff; }
.ic-cool { background: linear-gradient(135deg,#9be7ff,#3aa0ff); color:#04263b; }

.primary-btn {
  width: 100%; padding: 16px; border: none; border-radius: 16px;
  font-size: 19px; font-weight: 900; letter-spacing: 2px; cursor: pointer;
  color: #052028;
  background: linear-gradient(135deg, #5fe9d2, #36b6ff);
  box-shadow: 0 12px 28px rgba(54,182,255,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .12s ease, filter .2s ease;
}
.primary-btn:active { transform: translateY(2px) scale(.99); filter: brightness(1.05); }

.ghost-btn {
  width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
  font-size: 15px; font-weight: 800; cursor: pointer;
  transition: background .2s ease;
}
.ghost-btn:active { background: rgba(255,255,255,.08); }

.text-btn {
  margin-top: 12px; background: none; border: none; color: #bfe9ff;
  font-size: 13px; font-weight: 700; cursor: pointer; opacity: .9;
}

.title-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.title-foot span { font-size: 13px; font-weight: 800; opacity: .85; }
.title-foot .text-btn { margin-top: 0; }

/* result */
.result { margin: 6px 0 14px; }
.result-score { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
.result-score small, .result-row small { font-size: 12px; opacity: .7; font-weight: 700; }
.result-score b {
  font-size: 56px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg,#fff,#9fe9ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.result-row { display: flex; gap: 14px; }
.result-row > div {
  flex: 1; background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.result-row b { font-size: 24px; font-weight: 900; }
.quote {
  margin: 4px 0 18px; font-size: 15px; font-weight: 800; color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* loader */
.loader { width: min(360px, 80vw); margin-top: 34px; }
.loader-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.loader-fill {
  width: 0%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cool-2), var(--cool));
  box-shadow: 0 0 14px rgba(56,224,200,.6);
  transition: width .2s ease;
}
.loader-text { margin-top: 12px; text-align: center; font-size: 13px; font-weight: 700; opacity: .85; }

.hidden { display: none !important; }

/* Landscape hint for very wide screens — keep play area centered & portrait-ish */
@media (min-aspect-ratio: 1/1) and (min-width: 720px) {
  .stage { max-width: 540px; margin: 0 auto; box-shadow: 0 0 80px rgba(0,0,0,.6); }
}