:root {
  --ink: #0d2438;
  --sky1: #aee7ff;
  --sky2: #6cc3f5;
  --sky3: #2f8fd8;
  --accent: #ff7a18;
  --accent2: #ffd23e;
  --glass: rgba(255, 255, 255, 0.22);
  --glass-brd: rgba(255, 255, 255, 0.55);
  --shadow: 0 10px 30px rgba(8, 40, 70, 0.28);
  font-family: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }
body {
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%);
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

.hidden { display: none !important; }
.lbl { font-size: 0.62rem; letter-spacing: 0.12em; opacity: 0.7; display: block; font-weight: 700; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; inset: 0; pointer-events: none;
  padding: clamp(8px, 2.2vmin, 22px);
}
.badge {
  position: absolute; top: clamp(8px, 2.2vmin, 22px); left: clamp(8px, 2.2vmin, 22px);
  width: clamp(64px, 16vmin, 130px); height: clamp(64px, 16vmin, 130px);
  background: radial-gradient(circle at 50% 35%, #fff, #e8f6ff);
  border: 3px solid #fff; border-radius: 50%;
  box-shadow: var(--shadow); padding: 6px; overflow: visible;
}
.combo {
  position: absolute; top: clamp(60px, 11vmin, 92px);
  left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--accent2), var(--accent));
  color: #3a1a00; font-weight: 900; letter-spacing: 0.06em;
  padding: 6px 16px; border-radius: 999px; box-shadow: var(--shadow);
  font-size: clamp(0.85rem, 3.2vmin, 1.4rem);
  animation: pop 0.35s cubic-bezier(.2,1.5,.4,1);
}
.hud-right {
  position: absolute; top: clamp(8px, 2.2vmin, 22px); right: clamp(8px, 2.2vmin, 22px);
  display: flex; gap: clamp(6px, 1.6vmin, 14px);
}
.hud-right > div {
  background: var(--glass); border: 1.5px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 14px; padding: 6px 12px; min-width: 64px; text-align: center;
  box-shadow: var(--shadow);
}
.hud-right span:last-child, #timer, #score, #best {
  font-size: clamp(1.1rem, 4.4vmin, 2.1rem); font-weight: 900; line-height: 1;
}
#timer.low { color: #d62b2b; animation: pulse 0.6s infinite; }

/* ---------- music ---------- */
#music {
  position: absolute; right: clamp(8px, 2vmin, 20px); bottom: clamp(8px, 2vmin, 20px);
  display: flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1.5px solid var(--glass-brd);
  border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 5;
}
#musicToggle {
  border: none; background: var(--accent); color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.1rem; font-weight: 900;
}
#musicToggle.off { background: #9bb0c0; }
#volume { width: clamp(60px, 14vmin, 120px); accent-color: var(--accent); cursor: pointer; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.25), rgba(20,70,110,0.35));
}
.panel {
  width: min(92vw, 460px);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
  border: 2px solid #fff; border-radius: 26px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 4vmin, 34px); text-align: center;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bigface {
  width: clamp(120px, 34vmin, 220px); height: clamp(120px, 34vmin, 220px);
  margin: 0 auto clamp(6px, 1.5vmin, 14px);
}
.title {
  font-size: clamp(2rem, 9vmin, 3.6rem); font-weight: 900; line-height: 0.92;
  letter-spacing: 0.02em; color: var(--sky3);
  text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(0,0,0,0.18);
}
.title span { display: block; color: var(--accent); }
.tag { margin: 10px 0 4px; font-weight: 700; opacity: 0.85; font-size: clamp(0.85rem, 3vmin, 1.05rem); }
.how { margin-top: 14px; font-size: clamp(0.75rem, 2.6vmin, 0.95rem); opacity: 0.8; line-height: 1.5; }
.btn {
  margin-top: 16px; cursor: pointer; border: none;
  font-size: clamp(1.1rem, 4.4vmin, 1.6rem); font-weight: 900; letter-spacing: 0.04em;
  color: #fff; padding: 12px 34px; border-radius: 999px;
  background: linear-gradient(120deg, var(--accent2), var(--accent));
  box-shadow: 0 6px 0 #c95a00, var(--shadow); transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c95a00, var(--shadow); }
#goTitle { font-size: clamp(1.4rem, 6vmin, 2.2rem); font-weight: 900; color: var(--sky3); margin-top: 4px; }
.finalrow { display: flex; gap: 18px; justify-content: center; margin-top: 12px; }
.finalrow b { font-size: clamp(1.6rem, 7vmin, 2.6rem); display: block; color: var(--accent); }
.newbest {
  display: inline-block; margin-bottom: 6px; font-weight: 900; color: #b8000a;
  background: var(--accent2); padding: 4px 14px; border-radius: 999px;
  animation: pulse 0.7s infinite;
}

@keyframes pop { 0% { transform: translateX(-50%) scale(0.6);} 100% { transform: translateX(-50%) scale(1);} }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.08);} }

/* ---------- landscape: spread HUD, smaller panel face ---------- */
@media (orientation: landscape) {
  .panel { width: min(70vw, 520px); }
  .bigface { width: clamp(110px, 24vmin, 200px); height: clamp(110px, 24vmin, 200px); }
}
/* very short landscape (laptops): keep panel from overflowing */
@media (orientation: landscape) and (max-height: 560px) {
  .bigface { width: clamp(90px, 22vmin, 150px); height: clamp(90px, 22vmin, 150px); }
  .panel { padding: 14px 24px; }
  .how { margin-top: 8px; }
}