:root {
  --warm: #ffd28a;
  --hot: #ff6f9c;
  --leaf-green: #6fcf6a;
  --ink: #1c1330;
  --paper: #fff6e6;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

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

html,
body {
  width: 100%;
  /* iOS Safari collapses the URL bar mid-session — vh is wrong there. dvh
     tracks the visible viewport. Fall back to vh on older browsers. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Kill pull-to-refresh + rubber-band overscroll on iOS/Android. */
  overscroll-behavior: none;
  background: #1a1430;
  color: var(--paper);
  font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* All gestures on the canvas are ours — no scroll, pinch, or double-tap zoom. */
  touch-action: none;
}

/* ---------- HUD ---------- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

#status-rail {
  position: absolute;
  top: calc(22px + env(safe-area-inset-top, 0));
  left: calc(22px + env(safe-area-inset-left, 0));
  display: flex;
  align-items: center;
  gap: 7px;
}

.hud-chip {
  height: 42px;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, rgba(40, 28, 66, 0.6), rgba(22, 16, 40, 0.62));
  backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 246, 230, 0.16);
  border-radius: 14px;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.28);
}

.smile-status {
  gap: 6px;
  padding: 4px 9px 4px 6px;
}

.smile-mark {
  width: 28px;
  height: 28px;
  color: var(--warm);
  filter: drop-shadow(0 0 7px rgba(255, 210, 138, 0.4));
}

.smile-value {
  min-width: 1ch;
  color: var(--paper);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 210, 138, 0.38);
}

.best-score {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 2px;
  margin: 0 0 5px -2px;
  color: rgba(255, 210, 138, 0.66);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ----- Bubble-juice meter ----- */
#juice-meter {
  position: relative;
  width: 118px;
  gap: 7px;
  padding: 0 10px;
}

/* Stockpile reserve — spare whole meters beyond the working one, shown as a
   small badge above the meter. Hidden when you have no spares. */
.juice-reserve {
  position: absolute;
  top: -7px;
  right: -5px;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 8px;
  background: rgba(25, 31, 57, 0.94);
  border: 1px solid rgba(127, 232, 255, 0.36);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}
.juice-reserve.has-reserve {
  display: flex;
}
.rsv-n {
  font-size: 9px;
  font-weight: 700;
  color: #aef0ff;
  font-variant-numeric: tabular-nums;
}
.rsv-jug {
  display: block;
  filter: drop-shadow(0 0 3px rgba(127, 232, 255, 0.55));
}

.juice-dot {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, #7fe8ff 38%, #2bb8e6 100%);
  box-shadow: 0 0 8px rgba(127, 232, 255, 0.8);
}

.juice-track {
  flex: 1;
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: rgba(10, 14, 26, 0.7);
  border: 1px solid rgba(127, 232, 255, 0.22);
  overflow: hidden;
}

.juice-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left center;
  border-radius: 6px;
  background: linear-gradient(90deg, #1f9fd6 0%, #43c9f0 55%, #9af1ff 100%);
  box-shadow: 0 0 12px rgba(67, 201, 240, 0.6) inset, 0 0 9px rgba(127, 232, 255, 0.45);
  transition: transform 0.18s ease-out, background 0.4s ease, box-shadow 0.4s ease;
}

/* Glossy highlight across the top of the fill. */
.juice-fill::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 1px;
  height: 3px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}

/* The full day/night cycle is the dial face; the pip orbits to the live t value. */
.cycle-status {
  --cycle-turn: 0.15turn;
  width: 42px;
  justify-content: center;
}

.cycle-dial {
  position: relative;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: conic-gradient(
    #8d77b7 0% 7%,
    #ffd98c 7% 43%,
    #d58c80 43% 55%,
    #67538f 55% 95%,
    #8d77b7 95% 100%
  );
  box-shadow: 0 0 10px rgba(255, 210, 138, 0.2);
}

.cycle-dial::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(27, 21, 47, 0.92);
}

.cycle-symbol {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #ffd98c;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(255, 217, 140, 0.58);
}

.cycle-status.is-night .cycle-symbol {
  color: #d9d3ff;
  text-shadow: 0 0 7px rgba(185, 174, 255, 0.62);
}

.cycle-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #fff9df;
  box-shadow: 0 0 5px rgba(255, 249, 223, 0.9);
  transform: rotate(var(--cycle-turn)) translateY(-13px);
}

.lurleen-status {
  display: none;
  width: 42px;
  justify-content: center;
  border-color: rgba(255, 111, 156, 0.32);
  background: linear-gradient(160deg, rgba(83, 34, 72, 0.72), rgba(39, 21, 48, 0.68));
}

.lurleen-status.visible {
  display: flex;
  animation: lurleen-arrive 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.25);
}

.lurleen-heart {
  color: #ff80ae;
  font-size: 23px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 111, 156, 0.74);
  animation: lurleen-heartbeat 1.8s ease-in-out infinite;
}

@keyframes lurleen-arrive {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes lurleen-heartbeat {
  0%, 45%, 100% { transform: scale(1); }
  12% { transform: scale(1.13); }
  24% { transform: scale(0.98); }
}

/* Running low: amber fill + a clear amber border on the track. */
#juice-meter.low .juice-fill,
#juice-meter.empty .juice-fill {
  background: linear-gradient(90deg, #d68a1f 0%, #f0a83f 60%, #ffd27a 100%);
  box-shadow: 0 0 12px rgba(240, 168, 63, 0.6) inset, 0 0 11px rgba(255, 210, 122, 0.6);
}
#juice-meter.low .juice-track {
  border-color: rgba(255, 180, 70, 0.95);
  box-shadow: 0 0 10px rgba(255, 180, 70, 0.6);
}
#juice-meter.low .juice-dot {
  background: radial-gradient(circle at 32% 30%, #fff 0%, #ffd27a 38%, #d68a1f 100%);
  box-shadow: 0 0 8px rgba(255, 210, 122, 0.85);
}

/* Bone dry: red, and the whole meter pulses as an unmissable warning. */
#juice-meter.empty .juice-fill {
  background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
}
#juice-meter.empty .juice-track {
  border-color: rgba(231, 76, 60, 1);
  box-shadow: 0 0 14px rgba(231, 76, 60, 0.85);
}
#juice-meter.empty .juice-dot {
  background: radial-gradient(circle at 32% 30%, #fff 0%, #ff8a7a 38%, #c0392b 100%);
  box-shadow: 0 0 9px rgba(231, 76, 60, 0.95);
}
#juice-meter.empty {
  animation: juice-empty-pulse 0.85s ease-in-out infinite;
}

@keyframes juice-empty-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

#toast {
  position: absolute;
  top: calc(80px + env(safe-area-inset-top, 0));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 19, 48, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 111, 156, 0.4);
  color: var(--paper);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.35s ease;
  white-space: nowrap;
}

#toast.show {
  opacity: 1;
}

/* Tappable toast — used for the wook trip offer so touch devices can accept.
   #hud is pointer-events: none, so we have to re-enable it here. The pulsing
   border + cursor:pointer signal that this toast is interactive (the other
   200ms drive-by toasts in the game are not). */
#toast.tappable {
  pointer-events: auto;
  cursor: pointer;
  border-color: rgba(111, 207, 106, 0.85);
  box-shadow: 0 0 0 0 rgba(111, 207, 106, 0.55);
  animation: toast-tap-pulse 1.4s ease-out infinite;
}

#toast.tappable:active {
  transform: translateX(-50%) scale(0.96);
}

@keyframes toast-tap-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111, 207, 106, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(111, 207, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 207, 106, 0); }
}

#hit-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 60, 90, 0) 35%, rgba(255, 60, 90, 0.45) 100%);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  mix-blend-mode: screen;
}

#hit-flash.on {
  opacity: 1;
}

/* ---------- Star power vignette ---------- */
#star-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 210, 90, 0) 55%, rgba(255, 196, 60, 0.5) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  mix-blend-mode: screen;
}
#star-vignette.on {
  opacity: 1;
  animation: star-vignette-pulse 1.1s ease-in-out infinite;
}
@keyframes star-vignette-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---------- Title card ---------- */

#title-card {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  background: radial-gradient(ellipse at center, rgba(26, 19, 50, 0.25), rgba(26, 19, 50, 0.85));
  backdrop-filter: blur(6px);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#title-card.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#title-card .card {
  max-width: 520px;
  padding: 36px 38px;
  background: rgba(28, 19, 48, 0.85);
  border: 1px solid rgba(255, 246, 230, 0.12);
  border-radius: 26px;
  box-shadow: var(--shadow);
  text-align: center;
}

#title-card h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #ffd28a 0%, #ff6f9c 50%, #b285ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#title-card .leaf {
  display: inline-block;
  transform: rotate(-3deg);
  background: linear-gradient(135deg, #ffd28a 0%, #ff6f9c 50%, #b285ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#title-card .tag {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(255, 246, 230, 0.7);
  margin-bottom: 22px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 246, 230, 0.85);
  margin-bottom: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 246, 230, 0.08);
  border-bottom: 1px solid rgba(255, 246, 230, 0.08);
}

kbd {
  display: inline-block;
  background: rgba(255, 246, 230, 0.08);
  border: 1px solid rgba(255, 246, 230, 0.2);
  border-radius: 6px;
  padding: 2px 7px;
  margin: 0 2px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 600;
}

#title-card .hint {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 246, 230, 0.65);
  margin-bottom: 24px;
}

#boot-status {
  width: min(280px, 80vw);
  max-height: 34px;
  margin: -5px auto 13px;
  overflow: visible;
  color: rgba(255, 246, 230, 0.72);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.035em;
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.28s ease,
    max-height 0.35s ease, margin 0.35s ease;
}

.boot-gauge {
  position: relative;
  height: 11px;
  margin-bottom: 7px;
  overflow: visible;
  border: 1px solid rgba(111, 224, 255, 0.35);
  border-radius: 999px;
  background: rgba(8, 16, 40, 0.62);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.45), 0 0 12px rgba(111, 224, 255, 0.08);
}

.boot-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 36%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fe0ff, #b285ff 58%, #ff6f9c);
  box-shadow: 0 0 10px rgba(111, 224, 255, 0.48);
  animation: boot-charge 2.4s ease-in-out infinite;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.boot-bubble {
  position: absolute;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(214, 247, 255, 0.82);
  border-radius: 50%;
  background: rgba(111, 224, 255, 0.18);
  box-shadow: inset -1px -1px 2px rgba(178, 133, 255, 0.35), 0 0 6px rgba(111, 224, 255, 0.3);
  animation: boot-bubble-rise 1.8s ease-in infinite;
}

.boot-bubble.b1 { left: 24%; animation-delay: -0.2s; }
.boot-bubble.b2 { left: 51%; width: 5px; height: 5px; animation-delay: -1.1s; }
.boot-bubble.b3 { left: 74%; width: 9px; height: 9px; animation-delay: -0.65s; }

#boot-status.is-ready {
  color: var(--warm);
  transform: scale(1.015);
}

#boot-status.is-ready .boot-fill {
  width: calc(100% - 4px);
  animation: none;
  background: linear-gradient(90deg, #6fe0ff, #b285ff 45%, #ff6f9c 72%, #ffd28a);
}

#boot-status.is-ready .boot-bubble {
  animation: boot-bubble-pop 0.45s ease-out forwards;
}

#boot-status.is-done {
  max-height: 0;
  margin: -5px auto 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px) scale(0.985);
  pointer-events: none;
}

@keyframes boot-charge {
  0%, 100% { width: 24%; opacity: 0.76; }
  50% { width: 78%; opacity: 1; }
}

@keyframes boot-bubble-rise {
  0% { transform: translateY(1px) scale(0.65); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: translateY(-19px) scale(1.08); opacity: 0; }
}

@keyframes boot-bubble-pop {
  0% { transform: translateY(-8px) scale(0.8); opacity: 0.7; }
  65% { transform: translateY(-18px) scale(1.5); opacity: 0.9; }
  100% { transform: translateY(-22px) scale(2); opacity: 0; }
}

#start-btn {
  pointer-events: auto;
  background: linear-gradient(135deg, #ff6f9c, #ffd28a);
  color: #1c1330;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, filter 0.2s ease;
  box-shadow: 0 6px 24px rgba(255, 111, 156, 0.45);
}

#start-btn:disabled {
  cursor: wait;
  opacity: 0.52;
  filter: saturate(0.45);
  box-shadow: 0 4px 16px rgba(178, 133, 255, 0.16);
}

#start-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(255, 111, 156, 0.55);
}

#start-btn.is-ready {
  animation: start-ready-pop 0.48s cubic-bezier(0.22, 1.45, 0.36, 1);
}

@keyframes start-ready-pop {
  0% { transform: scale(0.96); }
  55% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Touch controls ---------- */

/* Touch overlay hidden by default; revealed when body.is-touch.game-started is set.
   Children (#stick-base, .touch-btn) each apply safe-area insets themselves, so
   the container intentionally has no padding — otherwise we'd double-count
   env(safe-area-inset-*) on notched devices. */
#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  display: none;
}

/* Only visible after the user hits Start — otherwise the stick + buttons would
   ghost through the title-card's backdrop-filter and be tappable through it. */
body.is-touch.game-started #touch-controls {
  display: block;
}

/* Hide kbd-list on touch; hide touch-list on desktop. */
.controls-touch {
  display: none;
}

body.is-touch .controls-kbd {
  display: none;
}

body.is-touch .controls-touch {
  display: flex;
}

/* First-paint correctness for the title-card controls swap. `body.is-touch`
   is added by JS in touch.js install(), which can't run until the ~70-file
   module graph + CDN three.js finish loading — slow enough on iPad that the
   player watches the card render in keyboard mode, then relayout to touch mode
   ("desktop title card, THEN mobile title card"). This media query resolves
   the same `(pointer: coarse)` signal touch.js uses, but before first paint,
   so the correct controls list shows immediately. The JS class still drives
   the in-game #touch-controls overlay (it also needs .game-started). */
@media (pointer: coarse) {
  .controls-kbd { display: none; }
  .controls-touch { display: flex; }
}

.tag-key {
  display: inline-block;
  background: rgba(255, 246, 230, 0.08);
  border: 1px solid rgba(255, 246, 230, 0.2);
  border-radius: 6px;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

#stick-base {
  position: absolute;
  left: calc(28px + env(safe-area-inset-left, 0));
  bottom: calc(28px + env(safe-area-inset-bottom, 0));
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(28, 19, 48, 0.45);
  border: 1px solid rgba(255, 246, 230, 0.18);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  pointer-events: auto;
  touch-action: none;
}

#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 210, 138, 0.95), rgba(255, 111, 156, 0.95));
  box-shadow: 0 4px 18px rgba(255, 111, 156, 0.45);
  pointer-events: none;
}

.touch-btn {
  position: absolute;
  right: calc(28px + env(safe-area-inset-right, 0));
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(255, 246, 230, 0.22);
  background: rgba(28, 19, 48, 0.55);
  backdrop-filter: blur(6px);
  color: var(--paper);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, background 0.12s ease, box-shadow 0.12s ease;
}

#btn-honk {
  bottom: calc(28px + env(safe-area-inset-bottom, 0));
  background: rgba(255, 111, 156, 0.55);
  border-color: rgba(255, 111, 156, 0.6);
}

#btn-boost {
  bottom: calc(132px + env(safe-area-inset-bottom, 0));
  background: rgba(255, 210, 138, 0.45);
  border-color: rgba(255, 210, 138, 0.6);
  color: #1c1330;
}

#btn-cam {
  bottom: calc(236px + env(safe-area-inset-bottom, 0));
  background: rgba(120, 200, 255, 0.45);
  border-color: rgba(120, 200, 255, 0.65);
  color: #0c1a30;
  font-size: 14px;
}

#btn-music {
  bottom: calc(340px + env(safe-area-inset-bottom, 0));
  background: rgba(192, 128, 255, 0.45);
  border-color: rgba(192, 128, 255, 0.65);
  color: #1a0c30;
  font-size: 22px;
}

.touch-btn.pressed {
  transform: scale(0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  filter: brightness(1.2);
}

/* ---- Opening reveal: 2D Zerble cutout over the matched 3D model ----
   Sits above the (fading) title card at z-index 25, centred and sized to a
   viewport fraction tuned so the cutout lines up with the 3D model at the
   camera's match pose. Shown opaque the instant Start is tapped, then
   cross-dissolved out via .is-fading to reveal the real model behind it. */
#intro-zerble {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-51%, -31%);   /* positioned to sit on the low-angle 3D model */
  height: 68vh;
  max-width: 94vw;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 25;
  will-change: opacity;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
#intro-zerble.is-shown {
  opacity: 1;
  visibility: visible;
}
#intro-zerble.is-fading {
  opacity: 0;
  transition: opacity var(--intro-fade, 1s) ease-in;
}

/* ---------- Settings panel ---------- */

/* Title-card trigger — a subtle pill under the start button. */
.settings-trigger {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: rgba(255, 246, 230, 0.05);
  border: 1px solid rgba(255, 246, 230, 0.18);
  color: rgba(255, 246, 230, 0.82);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-trigger:hover { background: rgba(255, 246, 230, 0.12); }
.settings-trigger:disabled {
  pointer-events: none;
  cursor: wait;
  opacity: 0.38;
}

@media (prefers-reduced-motion: reduce) {
  .boot-fill,
  .boot-bubble,
  #boot-status.is-ready .boot-bubble,
  #start-btn.is-ready {
    animation: none;
  }

  #boot-status {
    transition: none;
  }
}

/* In-game gear — top-right, clear of the top-left score panel. Hidden until
   game-started, same gating as the touch overlay. */
#settings-gear {
  position: fixed;
  top: calc(22px + env(safe-area-inset-top, 0));
  right: calc(22px + env(safe-area-inset-right, 0));
  z-index: 16;
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(28, 19, 48, 0.85);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 246, 230, 0.16);
  box-shadow: var(--shadow);
  color: var(--paper);
  cursor: pointer;
  transition: transform 0.15s ease;
}
body.game-started #settings-gear { display: flex; }
#settings-gear:hover { transform: translateY(-1px); }

@media (max-width: 600px) {
  #status-rail {
    top: calc(8px + env(safe-area-inset-top, 0));
    left: calc(8px + env(safe-area-inset-left, 0));
    gap: 4px;
  }

  .hud-chip {
    height: 36px;
    border-radius: 12px;
  }

  .smile-status {
    gap: 4px;
    padding: 3px 7px 3px 5px;
  }

  .smile-mark {
    width: 23px;
    height: 23px;
  }

  .smile-value { font-size: 20px; }
  .best-score { font-size: 8px; margin-bottom: 4px; }

  #juice-meter {
    width: 100px;
    gap: 5px;
    padding: 0 8px;
  }

  .juice-dot {
    width: 11px;
    height: 11px;
  }

  .juice-track { height: 8px; }
  .rsv-jug { display: none; }

  .cycle-status,
  .lurleen-status {
    width: 36px;
  }

  .cycle-dial {
    width: 28px;
    height: 28px;
  }

  .cycle-marker {
    transform: rotate(var(--cycle-turn)) translateY(-11.5px);
  }

  .lurleen-heart { font-size: 20px; }

  #settings-gear {
    top: calc(8px + env(safe-area-inset-top, 0));
    right: calc(8px + env(safe-area-inset-right, 0));
    width: 36px;
    height: 36px;
  }

  #toast {
    top: calc(58px + env(safe-area-inset-top, 0));
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 350px) {
  #settings-gear {
    top: calc(52px + env(safe-area-inset-top, 0));
  }
}

#settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#settings-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.settings-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(26, 19, 50, 0.35), rgba(26, 19, 50, 0.88));
  backdrop-filter: blur(6px);
}
.settings-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(42, 29, 72, 0.95), rgba(28, 19, 48, 0.95));
  border: 1px solid rgba(255, 246, 230, 0.14);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 26px 24px 22px;
  color: var(--paper);
}
.settings-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 246, 230, 0.16);
  background: rgba(255, 246, 230, 0.06);
  color: var(--paper);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.settings-close:hover { background: rgba(255, 246, 230, 0.14); }
.settings-accent {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(135deg, #ffd28a 0%, #ff6f9c 50%, #b285ff 100%);
  margin-bottom: 13px;
}
.settings-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: rgba(255, 246, 230, 0.7);
  font-weight: 600;
}
.settings-title {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.settings-sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 246, 230, 0.65);
}
.settings-section { margin-top: 20px; }
.settings-section-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: rgba(255, 246, 230, 0.7);
  font-weight: 600;
  margin-bottom: 10px;
}
.settings-reload-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: rgba(255, 210, 138, 0.7);
  margin-left: 6px;
}

/* Quality radio rows */
.settings-radio {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(255, 246, 230, 0.12);
  background: rgba(255, 246, 230, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.settings-radio + .settings-radio { margin-top: 9px; }
.settings-radio input { position: absolute; opacity: 0; pointer-events: none; }
.settings-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 246, 230, 0.32);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.settings-radio input:checked ~ .settings-dot {
  border-color: transparent;
  background: linear-gradient(135deg, #ff6f9c, #ffd28a);
}
.settings-radio input:checked ~ .settings-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ink);
}
.settings-radio:has(input:checked) {
  border-color: rgba(255, 210, 138, 0.55);
  background: rgba(255, 210, 138, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 210, 138, 0.22);
}
.settings-radio-body { flex: 1; min-width: 0; }
.settings-radio-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settings-radio-label { font-weight: 700; font-size: 15px; }
.settings-chip {
  background: rgba(255, 246, 230, 0.08);
  border: 1px solid rgba(255, 246, 230, 0.2);
  border-radius: 6px;
  padding: 2px 7px;
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 246, 230, 0.82);
}
.settings-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 246, 230, 0.55);
}
.settings-warn-ico { color: #ffd28a; }

/* Effects mode switch */
.settings-modeswitch {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.settings-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 246, 230, 0.14);
  background: rgba(255, 246, 230, 0.04);
  color: var(--paper);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.settings-mode span {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 246, 230, 0.55);
}
.settings-mode.active {
  border-color: rgba(255, 210, 138, 0.55);
  background: rgba(255, 210, 138, 0.1);
}

/* Toggle rows */
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 2px;
  cursor: pointer;
}
.settings-toggle-row + .settings-toggle-row { border-top: 1px solid rgba(255, 246, 230, 0.08); }
.settings-toggle-body { flex: 1; min-width: 0; }
.settings-toggle-label { display: block; font-weight: 600; font-size: 14.5px; }
.settings-toggle-sub { display: block; font-size: 12px; color: rgba(255, 246, 230, 0.5); margin-top: 1px; }
.settings-effects.is-locked { opacity: 0.45; }
.settings-effects.is-locked .settings-toggle-row { cursor: default; }

/* Switch checkbox */
.settings-switch {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 246, 230, 0.14);
  border: 1px solid rgba(255, 246, 230, 0.18);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper);
  transition: transform 0.15s ease;
}
.settings-switch:checked {
  background: linear-gradient(135deg, #ff6f9c, #ffd28a);
  border-color: transparent;
}
.settings-switch:checked::after { transform: translateX(18px); }
.settings-switch:disabled { cursor: default; }

/* Volume sliders */
.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
}
.settings-slider-label {
  flex: none;
  width: 110px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 246, 230, 0.85);
}
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 246, 230, 0.16);
  outline: none;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6f9c, #ffd28a);
  cursor: pointer;
  border: none;
}
.settings-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6f9c, #ffd28a);
  cursor: pointer;
  border: none;
}

/* Footer */
.settings-foot { margin-top: 22px; }
.settings-apply {
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 15px;
  color: var(--ink);
  background: linear-gradient(135deg, #ff6f9c, #ffd28a);
  box-shadow: 0 6px 24px rgba(255, 111, 156, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.settings-apply:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 9px 28px rgba(255, 111, 156, 0.5);
}
.settings-apply:disabled {
  background: rgba(255, 246, 230, 0.08);
  color: rgba(255, 246, 230, 0.4);
  box-shadow: none;
  cursor: default;
}
.settings-apply-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 246, 230, 0.55);
  margin-top: 9px;
}

/* ---------- Reduced motion ---------- */

/* Set by A11y when the player opts in (or the OS prefers-reduced-motion). Holds
   the pulsing overlays steady — they still SHOW (the gold star vignette, the
   amber empty-juice warning, the tappable-toast highlight) but stop flashing.
   The star-power end strobe + trip warp are damped in JS (starPower.js /
   trip.js read A11y.reducedMotion). */
body.reduced-motion #star-vignette.on,
body.reduced-motion #juice-meter.empty,
body.reduced-motion #toast.tappable,
body.reduced-motion .lurleen-heart,
body.reduced-motion .lurleen-status.visible {
  animation: none;
}

/* ---------- Settings: tabbed layout ---------- */

/* Wider than the single-column original so the tabs have room to breathe. */
.settings-card { max-width: 600px; }

.settings-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 2px;
  border-bottom: 1px solid rgba(255, 246, 230, 0.1);
}
.settings-tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255, 246, 230, 0.6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 6px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.settings-tab-btn:hover { color: rgba(255, 246, 230, 0.85); }
.settings-tab-btn.active { color: var(--paper); border-bottom-color: #ffd28a; }
.settings-tab.is-hidden { display: none; }

/* Two columns on wide, stacking on narrow (mobile). */
.settings-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.settings-col { flex: 1 1 240px; min-width: 0; }
.settings-col .settings-section:first-child { margin-top: 16px; }

.settings-hint {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 246, 230, 0.5);
  margin: -2px 0 8px;
}

/* Tri-state segmented control: Off · Auto · On */
.settings-tri-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 0;
}
.settings-tri-row + .settings-tri-row { border-top: 1px solid rgba(255, 246, 230, 0.08); }
.settings-tri-body { flex: 1; min-width: 0; }
.settings-tri-label { display: block; font-weight: 600; font-size: 14.5px; }
.settings-tri-sub { display: block; font-size: 12px; color: rgba(255, 246, 230, 0.5); margin-top: 1px; }
.settings-tri {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 246, 230, 0.06);
  border: 1px solid rgba(255, 246, 230, 0.14);
}
.settings-tri button {
  border: none;
  background: none;
  color: rgba(255, 246, 230, 0.6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.settings-tri button.active {
  background: linear-gradient(135deg, #ff6f9c, #ffd28a);
  color: var(--ink);
}

/* Contextual restart bar — sticky at the card bottom, shown ONLY when a
   reload-required change (quality tier, extra lights, low-tier shadows-on) is
   pending. Everything else applies live, so there's no permanent button. */
.settings-restart {
  position: sticky;
  bottom: 0;
  margin-top: 18px;
  padding: 14px 0 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(28, 19, 48, 0) 0%, rgba(28, 19, 48, 0.97) 26%);
  border-top: 1px solid rgba(255, 246, 230, 0.12);
}
.settings-restart.is-hidden { display: none; }
.settings-restart-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 246, 230, 0.72);
}
.settings-restart .settings-apply {
  width: auto;
  flex: none;
  min-height: 44px;
  padding: 11px 20px;
  font-size: 14px;
}