* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #0b1020; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.stage { position: fixed; inset: 0; width: 100vw; height: 100dvh; }
canvas { display: block; width: 100%; height: 100%; }

/* ── Back control (ported from the other games; .nav-back is defined per-game).
   Always visible & tappable — sits above the canvas, HUD, guide AND overlays
   (z-index above the overlay's 10) so you can leave at any time. ── */
.nav-back {
  position: fixed;
  top: max(env(safe-area-inset-top), 0.9rem);
  left: max(env(safe-area-inset-left), 0.9rem);
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  color: rgba(195,215,245,0.78); text-decoration: none;
  background: rgba(28,38,66,0.5);
  border: 1px solid rgba(120,160,220,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-back:hover { background: rgba(40,54,86,0.7); color: #eaf4ff; transform: scale(1.05); }
}
.nav-back:active { transform: scale(0.95); }

/* ── HUD ── */
.hud {
  position: fixed; top: max(env(safe-area-inset-top), 1.1rem); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.12rem; pointer-events: none; z-index: 5;
}
.hud-distance { font-size: 1.9rem; font-weight: 300; letter-spacing: 0.04em; color: rgba(255,255,255,0.92); text-shadow: 0 2px 16px rgba(0,0,0,0.45); font-variant-numeric: tabular-nums; }
.hud-sub { display: flex; align-items: center; gap: 0.9rem; }
.hud-best { font-size: 0.74rem; letter-spacing: 0.05em; color: rgba(200,215,240,0.7); text-shadow: 0 1px 8px rgba(0,0,0,0.5); font-variant-numeric: tabular-nums; }
.hud-combo { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,228,170,0.95); text-shadow: 0 1px 10px rgba(180,140,40,0.5); min-height: 1em; }
.hud-coach { margin-top: 0.35rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(205,222,245,0.55); text-shadow: 0 1px 8px rgba(0,0,0,0.5); min-height: 1em; transition: color 300ms ease; }
.hud-calibration { margin-top: 0.4rem; font-size: 0.6rem; font-family: ui-monospace, Menlo, monospace; color: rgba(255,220,150,0.9); white-space: pre-line; text-align: center; }

/* ── Flow meter (slim, elegant, vertical on the left) ── */
.flow-wrap { position: fixed; left: max(env(safe-area-inset-left), 0.9rem); top: 50%; transform: translateY(-50%); z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.flow-wrap[hidden] { display: none; }
.flow-track { width: 5px; height: 34vh; max-height: 280px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; position: relative; }
.flow-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(0deg, #62d6e6, #b69cff, #ffd9a0); border-radius: 999px; transition: height 90ms linear; box-shadow: 0 0 12px rgba(150,200,255,0.5); }
.flow-label { font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,215,240,0.5); writing-mode: vertical-rl; }

.recalibrate-btn { position: fixed; bottom: max(env(safe-area-inset-bottom), 0.9rem); right: 0.9rem; z-index: 7; font-size: 0.7rem; font-weight: 600; color: rgba(195,215,245,0.7); background: rgba(28,38,66,0.5); border: 1px solid rgba(120,160,220,0.22); border-radius: 999px; padding: 0.4rem 0.8rem; backdrop-filter: blur(6px); }
.recalibrate-btn:active { transform: scale(0.95); }
.sfx-btn { position: fixed; bottom: max(env(safe-area-inset-bottom), 0.9rem); left: 0.9rem; z-index: 7; font-size: 0.95rem; line-height: 1; color: rgba(195,215,245,0.7); background: rgba(28,38,66,0.5); border: 1px solid rgba(120,160,220,0.22); border-radius: 999px; padding: 0.4rem 0.6rem; backdrop-filter: blur(6px); }
.sfx-btn:active { transform: scale(0.95); }

/* ── First-2-plays breathing guide (gentle, non-blocking, skippable) ── */
.guide {
  position: fixed; left: 0; right: 0; bottom: 22%;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  z-index: 8; pointer-events: none; padding: 0 1.5rem; text-align: center;
  transition: opacity 600ms ease;
}
.guide[hidden] { display: none; }
.guide.is-hidden { opacity: 0; }
.guide-cue {
  margin: 0; font-size: 1.05rem; font-weight: 300; line-height: 1.4; letter-spacing: 0.02em;
  color: rgba(234,244,255,0.94);
  /* Keep cues to a single line so they can never wrap and overlap themselves. */
  white-space: nowrap;
  /* A tight, low-blur shadow for legibility without the lines bleeding together. */
  text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.6);
  transition: opacity 500ms ease; height: 1.4em; line-height: 1.4em;
}
/* Gentle pulse while the cue asks for an exhale — a wordless "now" signal. */
.guide-cue.is-exhale { animation: cuePulse 3s ease-in-out infinite; }
@keyframes cuePulse { 0%, 100% { transform: scale(1); opacity: 0.88; } 50% { transform: scale(1.07); opacity: 1; } }
.guide-goal {
  margin: 0; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.04em;
  color: rgba(200,218,245,0.75); text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  min-height: 1.2em;
}
@media (prefers-reduced-motion: reduce) {
  .guide-cue.is-exhale { animation: none; } /* static cue, no pulsing */
}
.guide-skip {
  pointer-events: auto; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(195,215,245,0.6); background: rgba(28,38,66,0.45);
  border: 1px solid rgba(120,160,220,0.2); border-radius: 999px; padding: 0.4rem 1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer;
}
.guide-skip:active { transform: scale(0.95); }

/* ── Overlays ── */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 32%, rgba(24,30,58,0.84), rgba(8,11,22,0.96)); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); z-index: 10; padding: 1.5rem; transition: opacity 450ms ease; }
.overlay.is-hidden { opacity: 0; pointer-events: none; }
.overlay[hidden] { display: none; }
.overlay-card { max-width: 360px; width: 100%; text-align: center; color: #eef2fb; }
.mic-orb { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffffff, #b8e2ff 40%, rgba(150,180,255,0) 72%); box-shadow: 0 0 44px rgba(150,200,255,0.5); animation: orbFloat 4.6s ease-in-out infinite; }
@keyframes orbFloat { 0%,100% { transform: translateY(0) scale(1); opacity: 0.9; } 50% { transform: translateY(-9px) scale(1.07); opacity: 1; } }
.overlay-title { font-size: 1.9rem; font-weight: 300; letter-spacing: 0.06em; margin: 0 0 0.8rem; }
.overlay-body { font-size: 0.95rem; line-height: 1.65; color: rgba(220,226,240,0.84); margin: 0 0 1.6rem; }
.overlay-body b { color: #eaf4ff; font-weight: 600; }
.overlay-btn { font-size: 1.02rem; font-weight: 500; letter-spacing: 0.03em; padding: 0.75rem 2.6rem; border-radius: 999px; border: none; background: linear-gradient(135deg, #62d6e6, #8a7df0); color: #0b0f1a; cursor: pointer; box-shadow: 0 10px 28px rgba(110,170,240,0.32); transition: transform 120ms ease; }
.overlay-btn:active { transform: scale(0.96); }
.overlay-hint { margin-top: 1.1rem; font-size: 0.74rem; color: rgba(180,195,225,0.5); min-height: 1em; }
.overlay-debug { margin-top: 0.9rem; font-size: 0.7rem; color: rgba(255,180,150,0.8); font-family: ui-monospace, Menlo, monospace; }

.level-meter { position: relative; width: 100%; height: 14px; margin: 0.4rem 0 0.6rem; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.level-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #62d6e6, #8a7df0); border-radius: 999px; transition: width 70ms linear; }
.level-meter-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(255,235,170,0.95); box-shadow: 0 0 6px rgba(255,220,130,0.8); }
.calib-count { font-size: 2.2rem; font-weight: 300; font-variant-numeric: tabular-nums; margin: 0.2rem 0 0.4rem; color: #eaf4ff; min-height: 1.2em; }
.calib-orb { width: 50px; height: 50px; margin: 0.6rem auto 0.9rem; border-radius: 50%; background: radial-gradient(circle at 40% 34%, #ffffff, #b8e2ff 46%, rgba(150,180,255,0) 74%); box-shadow: 0 0 28px rgba(150,200,255,0.5); transform: scale(0.55); }
.overlay.is-inhaling .calib-orb { animation: calibInhale 4s ease-in-out forwards; }
@keyframes calibInhale { 0% { transform: scale(0.55); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 1; } }