/* ==========================================================================
   Bubble Pop — stress relief game
   Everything is scoped under .bp-app so nothing leaks into the rest of the
   site. Colours and spacing come from the custom properties below.
   ========================================================================== */

.bp-app {
  /* pastel palette */
  --bp-blue:   #a8d8f0;
  --bp-purple: #c9b6f0;
  --bp-pink:   #f5c2d5;
  --bp-mint:   #b6e8d4;
  --bp-peach:  #fad4b8;
  --bp-lemon:  #f7edb5;
  --bp-white:  #fdfbf7;

  --bp-gold:   #f6d365;
  --bp-warn:   #e8a0a0;

  --bp-ink:    #33303c;
  --bp-ink-2:  #6b6675;
  --bp-line:   rgba(51, 48, 60, .12);
  --bp-card:   rgba(255, 255, 255, .72);

  /* spacing scale */
  --bp-1: 4px;
  --bp-2: 8px;
  --bp-3: 12px;
  --bp-4: 16px;
  --bp-5: 24px;
  --bp-6: 32px;

  --bp-radius: 16px;
  --bp-radius-sm: 10px;
  --bp-shadow: 0 8px 28px rgba(51, 48, 60, .10);

  --bp-tap: 44px;            /* minimum comfortable touch target */

  max-width: 1000px;
  margin-inline: auto;
  color: var(--bp-ink);
  font-family: var(--font-body, system-ui, sans-serif);
}

/* ── HEADER ─────────────────────────────────────────────────────────── */
.bp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bp-4); flex-wrap: wrap; margin-bottom: var(--bp-4);
}
.bp-title {
  font-family: var(--font-display, serif);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.15; margin: 0 0 var(--bp-1);
}
.bp-tagline { margin: 0; font-size: clamp(12px, 2.4vw, 13.5px); color: var(--bp-ink-2); }

.bp-modes { display: flex; gap: var(--bp-2); flex-wrap: wrap; }
.bp-mode {
  min-height: var(--bp-tap);
  padding: var(--bp-2) var(--bp-4);
  border-radius: 100px; border: 1px solid var(--bp-line);
  background: var(--bp-card); color: var(--bp-ink-2);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s, transform .12s;
}
.bp-mode:hover { color: var(--bp-ink); transform: translateY(-1px); }
.bp-mode.is-on {
  background: linear-gradient(135deg, var(--bp-purple), var(--bp-blue));
  color: #2b2833; border-color: transparent;
}

/* ── CONTROLS ───────────────────────────────────────────────────────── */
.bp-controls {
  display: flex; align-items: center; gap: var(--bp-2);
  flex-wrap: wrap; margin-bottom: var(--bp-3);
}
.bp-spacer { flex: 1; min-width: var(--bp-2); }

.bp-btn {
  min-height: var(--bp-tap); padding: var(--bp-2) var(--bp-5);
  border-radius: 100px; border: 1px solid var(--bp-line);
  background: var(--bp-card); color: var(--bp-ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .12s, box-shadow .2s, opacity .2s;
}
.bp-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--bp-shadow); }
.bp-btn:disabled { opacity: .45; cursor: not-allowed; }
.bp-btn-primary {
  background: linear-gradient(135deg, var(--bp-mint), var(--bp-blue));
  border-color: transparent;
}
.bp-btn-lg { font-size: 15px; padding: var(--bp-3) var(--bp-6); }
.bp-btn-quiet { background: transparent; font-weight: 500; font-size: 13px; }

.bp-icon-btn {
  width: var(--bp-tap); height: var(--bp-tap);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--bp-line);
  background: var(--bp-card); font-size: 17px; cursor: pointer;
  transition: transform .12s, opacity .2s;
}
.bp-icon-btn:hover { transform: translateY(-1px); }
.bp-icon-btn[aria-pressed="false"] { opacity: .42; }

/* Visible focus for every interactive element */
.bp-app :is(button, select, input, a):focus-visible {
  outline: 3px solid #6c8cff; outline-offset: 2px;
}

/* ── HUD ────────────────────────────────────────────────────────────── */
.bp-hud {
  display: grid; gap: var(--bp-2); margin-bottom: var(--bp-3);
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.bp-stat {
  background: var(--bp-card); border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-sm); padding: var(--bp-2) var(--bp-3);
  text-align: center;
}
.bp-stat-l {
  display: block; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bp-ink-2); margin-bottom: 2px;
}
.bp-stat-v {
  display: block; font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  font-weight: 700; line-height: 1.1;
}
.bp-stat-combo .bp-stat-v { color: #b06fd0; }
.bp-stat-combo.is-hot {
  animation: bp-combo-pulse .35s ease;
  background: linear-gradient(135deg, rgba(201,182,240,.55), rgba(245,194,213,.55));
}
@keyframes bp-combo-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
/* Hidden per-mode */
.bp-app[data-mode="relax"] #bpTimerWrap,
.bp-app[data-mode="relax"] #bpComboWrap,
.bp-app[data-mode="relax"] #bpLevelWrap,
.bp-app[data-mode="breathing"] .bp-hud { display: none; }

/* ── GAME AREA ──────────────────────────────────────────────────────── */
.bp-area {
  position: relative; overflow: hidden;
  height: clamp(380px, 62vh, 620px);
  border-radius: var(--bp-radius);
  border: 1px solid var(--bp-line);
  box-shadow: var(--bp-shadow);
  background: linear-gradient(135deg,
    #eaf4fb 0%, #f2ecfb 25%, #fdeef4 50%, #eafaf2 75%, #fdfbf7 100%);
  background-size: 400% 400%;
  animation: bp-bg 26s ease infinite;
  touch-action: manipulation;   /* no double-tap zoom while popping */
  user-select: none;
}
@keyframes bp-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bp-layer { position: absolute; inset: 0; }
.bp-layer-fx { pointer-events: none; }

/* ── BUBBLES ────────────────────────────────────────────────────────── */
.bp-bubble {
  position: absolute; top: 0; left: 0;
  border-radius: 50%; border: none; padding: 0;
  cursor: pointer; will-change: transform;
  background:
    radial-gradient(circle at 30% 26%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.34) 18%,
      var(--bub, var(--bp-blue)) 62%,
      rgba(255,255,255,.16) 100%);
  box-shadow:
    inset -4px -6px 12px rgba(80,70,110,.13),
    inset 3px 4px 10px rgba(255,255,255,.55),
    0 4px 14px rgba(80,70,110,.13);
  opacity: .92;
  transition: opacity .2s;
}
.bp-bubble::after {          /* the small white highlight */
  content: ''; position: absolute;
  top: 17%; left: 22%; width: 20%; height: 14%;
  border-radius: 50%; background: rgba(255,255,255,.8);
  transform: rotate(-28deg);
}
.bp-bubble:hover { opacity: 1; }

/* types */
.bp-bubble.is-golden {
  box-shadow:
    inset -4px -6px 12px rgba(150,110,20,.16),
    0 0 22px rgba(246,211,101,.62),
    0 4px 14px rgba(80,70,110,.13);
}
.bp-bubble.is-rainbow { animation: bp-rainbow 5s linear infinite; }
@keyframes bp-rainbow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.bp-bubble.is-bomb {
  box-shadow:
    inset -4px -6px 12px rgba(120,40,40,.2),
    0 0 0 2px rgba(232,160,160,.55),
    0 4px 14px rgba(80,70,110,.13);
  animation: bp-bomb 2.6s ease-in-out infinite;   /* slow, never flashing */
}
@keyframes bp-bomb {
  0%, 100% { box-shadow: inset -4px -6px 12px rgba(120,40,40,.2),
                         0 0 0 2px rgba(232,160,160,.45),
                         0 4px 14px rgba(80,70,110,.13); }
  50%      { box-shadow: inset -4px -6px 12px rgba(120,40,40,.2),
                         0 0 0 6px rgba(232,160,160,.22),
                         0 4px 14px rgba(80,70,110,.13); }
}
.bp-bubble.is-time,
.bp-bubble.is-calm {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.bp-bubble.is-calm {
  box-shadow:
    inset -4px -6px 12px rgba(60,120,100,.15),
    0 0 20px rgba(182,232,212,.7),
    0 4px 14px rgba(80,70,110,.13);
}

/* pop animation — ~300ms: expand slightly, then shrink and fade */
.bp-bubble.is-popping {
  pointer-events: none;
  animation: bp-pop 300ms cubic-bezier(.3, .9, .4, 1) forwards;
}
@keyframes bp-pop {
  0%   { transform: var(--pos) scale(1);    opacity: .92; }
  30%  { transform: var(--pos) scale(1.16); opacity: .8; }
  100% { transform: var(--pos) scale(.28);  opacity: 0; }
}

/* ── PARTICLES & FLOATING SCORE ─────────────────────────────────────── */
.bp-particle {
  position: absolute; top: 0; left: 0;
  border-radius: 50%; will-change: transform, opacity;
  background: rgba(255, 255, 255, .9);
}
.bp-float {
  position: absolute; top: 0; left: 0;
  font-weight: 700; font-size: 15px; white-space: nowrap;
  color: #5a4d7a; text-shadow: 0 1px 3px rgba(255,255,255,.9);
  will-change: transform, opacity;
}
.bp-float.is-neg { color: #a85a5a; }
.bp-float.is-gold { color: #a3781a; }

/* ── CALM WAVE ──────────────────────────────────────────────────────── */
.bp-wave {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(182, 232, 212, .85);
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  pointer-events: none;
}
.bp-wave.is-on { animation: bp-wave 1.5s ease-out forwards; }
@keyframes bp-wave {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: .85; }
  100% { transform: translate(-50%,-50%) scale(150); opacity: 0; }
}

/* ── CALM MESSAGE ───────────────────────────────────────────────────── */
.bp-calm-msg {
  position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%);
  margin: 0; padding: var(--bp-2) var(--bp-5);
  border-radius: 100px; background: rgba(255,255,255,.82);
  color: var(--bp-ink-2); font-size: clamp(13px, 3vw, 15px);
  box-shadow: var(--bp-shadow);
  opacity: 0; transition: opacity 1.2s ease;
  pointer-events: none; max-width: 86%; text-align: center;
}
.bp-calm-msg.is-on { opacity: 1; }

/* ── BREATHING ──────────────────────────────────────────────────────── */
.bp-breathe {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--bp-4);
  text-align: center; padding: var(--bp-4);
}
.bp-orb {
  width: clamp(110px, 26vw, 170px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    #ffffff 0%, var(--bp-blue) 45%, #7fc4e8 100%);
  box-shadow: 0 0 52px rgba(168, 216, 240, .75);
  display: flex; align-items: center; justify-content: center;
  transform: scale(.62);
  transition: transform 4s cubic-bezier(.4, 0, .2, 1);
}
.bp-orb.is-in    { transform: scale(1.14); transition-duration: 4s; }
.bp-orb.is-hold  { transform: scale(1.14); transition-duration: .2s; }
.bp-orb.is-out   { transform: scale(.62);  transition-duration: 6s; }
.bp-orb-count { font-size: 2.4rem; font-weight: 300; color: #fff; }
.bp-breathe-cue {
  font-family: var(--font-display, serif);
  font-size: clamp(1.2rem, 4vw, 1.6rem); margin: 0; min-height: 1.8em;
}
.bp-breathe-sub { margin: 0; font-size: 12.5px; color: var(--bp-ink-2); }
.bp-breathe-ctrl { display: flex; gap: var(--bp-2); flex-wrap: wrap; justify-content: center; }

/* ── OVERLAYS & MODALS ──────────────────────────────────────────────── */
.bp-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: var(--bp-4);
  background: rgba(253, 251, 247, .78);
  backdrop-filter: blur(4px);
}
.bp-overlay[hidden] { display: none; }
.bp-overlay-card {
  background: #fff; border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius); box-shadow: var(--bp-shadow);
  padding: var(--bp-6) var(--bp-5); text-align: center; max-width: 400px;
}
.bp-overlay-emoji { font-size: 2.4rem; margin-bottom: var(--bp-2); }
.bp-overlay-card h2 {
  font-family: var(--font-display, serif);
  font-size: 1.45rem; margin: 0 0 var(--bp-2);
}
.bp-overlay-card p { margin: 0 0 var(--bp-4); font-size: 14px; color: var(--bp-ink-2); line-height: 1.6; }
.bp-over-line { font-size: 16px !important; color: var(--bp-ink) !important; }
.bp-over-line b { font-size: 1.7rem; }
.bp-over-sub { font-size: 12.5px !important; }
.bp-over-new { color: #1b7a4f !important; font-weight: 700; }
.bp-over-ctrl { display: flex; gap: var(--bp-2); justify-content: center; flex-wrap: wrap; }
.bp-hint { font-size: 11.5px !important; margin: var(--bp-3) 0 0 !important; }
.bp-hint kbd {
  background: #f0eef5; border: 1px solid var(--bp-line);
  border-radius: 5px; padding: 1px 6px; font-size: 11px; font-family: inherit;
}

/* ── SETTINGS ───────────────────────────────────────────────────────── */
.bp-settings {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--bp-4); background: rgba(51, 48, 60, .45);
}
.bp-settings[hidden] { display: none; }
.bp-settings-card {
  background: #fff; border-radius: var(--bp-radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: var(--bp-5); width: min(400px, 100%);
  max-height: 90vh; overflow-y: auto;
}
.bp-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--bp-4);
}
.bp-settings-head h2 { font-family: var(--font-display, serif); font-size: 1.3rem; margin: 0; }
.bp-field { margin-bottom: var(--bp-4); }
.bp-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--bp-1); }
.bp-field select {
  width: 100%; min-height: var(--bp-tap);
  padding: var(--bp-2) var(--bp-3);
  border: 1px solid var(--bp-line); border-radius: var(--bp-radius-sm);
  background: #fff; font: inherit; font-size: 14px; color: var(--bp-ink);
}
.bp-field-check { display: flex; align-items: center; gap: var(--bp-3); }
.bp-field-check input { width: 20px; height: 20px; accent-color: #8c7ae6; flex-shrink: 0; }
.bp-field-check label { font-size: 14px; font-weight: 500; margin: 0; cursor: pointer; }
.bp-settings-foot {
  border-top: 1px solid var(--bp-line); padding-top: var(--bp-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bp-3); flex-wrap: wrap;
}

.bp-foot-note {
  text-align: center; font-size: 12.5px; color: var(--bp-ink-2);
  margin: var(--bp-4) 0 var(--bp-6);
}

.bp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── HIGH CONTRAST ──────────────────────────────────────────────────── */
.bp-app.bp-contrast {
  --bp-ink: #000; --bp-ink-2: #1d1d1d;
  --bp-line: rgba(0,0,0,.6); --bp-card: #fff;
}
.bp-app.bp-contrast .bp-area {
  background: #fff; animation: none; border: 2px solid #000;
}
.bp-app.bp-contrast .bp-bubble {
  border: 3px solid #000; opacity: 1;
  background: radial-gradient(circle at 30% 26%,
    #fff 0%, var(--bub, #a8d8f0) 60%, var(--bub, #a8d8f0) 100%);
  box-shadow: none;
}
.bp-app.bp-contrast .bp-bubble.is-bomb { border-color: #a01414; animation: none; }
.bp-app.bp-contrast .bp-bubble.is-golden { border-color: #8a6d00; }
.bp-app.bp-contrast .bp-mode.is-on { background: #000; color: #fff; }
.bp-app.bp-contrast .bp-btn-primary { background: #000; color: #fff; }
.bp-app.bp-contrast .bp-float { color: #000; text-shadow: none; }

/* ── REDUCED MOTION ─────────────────────────────────────────────────── */
/* Applied either by the setting or by the OS preference. Essential motion
   (bubbles drifting up) is kept so the game still makes sense; decorative
   motion is removed. */
.bp-app.bp-reduced .bp-area { animation: none; }
.bp-app.bp-reduced .bp-bubble.is-rainbow,
.bp-app.bp-reduced .bp-bubble.is-bomb { animation: none; }
.bp-app.bp-reduced .bp-wave.is-on { animation-duration: .6s; }
.bp-app.bp-reduced .bp-stat-combo.is-hot { animation: none; }
.bp-app.bp-reduced .bp-bubble.is-popping { animation-duration: 180ms; }
.bp-app.bp-reduced .bp-orb { transition-duration: .3s !important; }

@media (prefers-reduced-motion: reduce) {
  .bp-area { animation: none; }
  .bp-bubble.is-rainbow, .bp-bubble.is-bomb { animation: none; }
  .bp-stat-combo.is-hot { animation: none; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .bp-head { flex-direction: column; align-items: stretch; }
  .bp-modes { justify-content: stretch; }
  .bp-mode { flex: 1; padding-inline: var(--bp-2); font-size: 12.5px; }
  .bp-btn { padding-inline: var(--bp-4); font-size: 13.5px; }
  .bp-area { height: clamp(340px, 56vh, 520px); }
}
@media (max-width: 420px) {
  .bp-hud { grid-template-columns: repeat(3, 1fr); }
  .bp-controls { gap: var(--bp-1); }
  .bp-spacer { display: none; }
}
/* Mobile landscape — short viewport, keep the board usable */
@media (max-height: 520px) and (orientation: landscape) {
  .bp-tagline, .bp-foot-note { display: none; }
  .bp-area { height: 74vh; }
  .bp-hud { grid-template-columns: repeat(5, 1fr); }
}