:root {
  --clr-ocean-deep:  #0a1628;
  --clr-ocean-mid:   #0d2f5e;
  --clr-ocean-light: #1a5276;
  --clr-bubble:      #7fd8f5;
  --clr-bubble-glow: #a8efff;
  --clr-luma-pink:   #ff8fab;
  --clr-luma-accent: #ffcad4;
  --clr-gold:        #ffe066;
  --clr-success:     #6effc5;
  --clr-panel:       rgba(255,255,255,0.08);
  --clr-panel-border:rgba(127,216,245,0.25);
  --clr-text:        #e8f8ff;
  --clr-text-dim:    #a0c8d8;
  --radius-lg:       20px;
  --radius-xl:       32px;
  --shadow-glow:     0 0 24px rgba(127,216,245,0.4);
  --font-main:       'Nunito', sans-serif;
}

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

html, body {
  font-family: var(--font-main);
  background: var(--clr-ocean-deep);
  color: var(--clr-text);
  height: 100dvh;
  overflow: hidden;
}

/* Each screen fills the dynamic viewport exactly and never scrolls.
   Children that need scroll get overflow:auto on themselves. */
.screen { display: none; height: 100dvh; width: 100%; overflow: hidden; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

.panel {
  background: var(--clr-panel);
  border: 1.5px solid var(--clr-panel-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  backdrop-filter: blur(8px);
}

.btn {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 1.25rem;
  border: none;
  border-radius: var(--radius-lg);
  padding: 0.9rem 2.2rem;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  letter-spacing: 0.02em;
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--clr-gold);
  color: var(--clr-ocean-deep);
  box-shadow: 0 4px 20px rgba(255,224,102,0.4);
}
.btn-primary:hover { box-shadow: 0 6px 28px rgba(255,224,102,0.6); transform: translateY(-2px); }

.btn-secondary {
  background: var(--clr-panel);
  color: var(--clr-bubble);
  border: 1.5px solid var(--clr-panel-border);
}

.bg-bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-bubble {
  position: absolute;
  bottom: -180px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(168,239,255,0.55), rgba(127,216,245,0.2) 50%, transparent 75%);
  border: 1.5px solid rgba(168,239,255,0.45);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.15), 0 0 8px rgba(127,216,245,0.2);
  animation: bgBubbleRise linear infinite;
}

.luma-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; }
.luma-figure { width: 140px; height: 140px; transition: width 0.4s ease, height 0.4s ease; }

/* Larger Luma on game screen */
#screen-game .luma-figure { width: 260px; height: 260px; }
.luma-idle      { animation: lumaIdle 3s ease-in-out infinite; }
.luma-letter    { animation: lumaBounce 0.4s ease-in-out 1; }
.luma-bubble {
  display: none;
}

#screen-game {
  padding: 1.5rem 1rem 2rem;
  gap: 1.2rem;
  background: radial-gradient(ellipse at 50% 0%, #1a5276 0%, #0a1628 70%);
  position: relative;
}

.game-header {
  width: 100%;
  max-width: 900px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(8, 20, 38, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(127,216,245,0.28);
  border-radius: 999px;
  margin-top: 8px;
  position: relative; z-index: 2;
}

/* Two-column game body: Luma left, puzzle right */
.game-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.luma-col {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 1rem;
}

.puzzle-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.progress-bar-wrap {
  flex: 1;
  height: 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin: 0 0.75rem;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-success), var(--clr-bubble));
  border-radius: 99px;
  transition: width 0.5s ease;
}
.progress-label { font-size: 0.78rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

.machine-panel {
  width: 100%; max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(26,82,118,0.85), rgba(8,20,38,0.92));
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--clr-panel-border);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.6rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  position: relative;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.machine-panel::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(127,216,245,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.machine-lights { display: flex; gap: 0.5rem; }
.machine-light { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background 0.4s, box-shadow 0.4s; }
.machine-light.on { background: var(--clr-success); box-shadow: 0 0 8px var(--clr-success); }

.clue-text { width: 100%; min-height: 2.6em; font-size: 1.15rem; font-weight: 700; color: var(--clr-text); text-align: center; line-height: 1.4; display: flex; align-items: center; justify-content: center; }

.answer-slots { width: 100%; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.slot {
  width: 52px; height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(127,216,245,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 900; color: var(--clr-bubble);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  user-select: none;
}
.slot.filled { background: rgba(127,216,245,0.15); border-color: var(--clr-bubble); }
.slot.filled:hover { background: rgba(255,100,100,0.15); border-color: #ff6b6b; }
.slot.success-flash { animation: slotSuccess 0.4s ease-out; background: rgba(110,255,197,0.25); border-color: var(--clr-success); }

.tile-bank { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; max-width: 520px; }
.tile-bank-label {
  font-size: 0.8rem; font-weight: 700; color: #e2e8f0;
  text-align: center; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(8, 20, 38, 0.7);
  padding: 4px 14px;
  border-radius: 999px;
  display: inline-block;
  margin: 0 auto;
  border: 1px solid rgba(127,216,245,0.28);
}
.tile {
  width: 58px; height: 62px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1a5276, #0d2f5e);
  border: 2px solid rgba(127,216,245,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 900; color: var(--clr-bubble-glow);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
  user-select: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tile:hover:not(.used) { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(127,216,245,0.25); }
.tile:active:not(.used) { transform: scale(0.93); }
.tile.used { opacity: 0.25; pointer-events: none; }
.tile.shake { animation: tileShake 0.4s ease-out; }

.feedback-msg { font-size: 1.1rem; font-weight: 900; color: var(--clr-bubble-glow); min-height: 1.5rem; text-align: center; transition: color 0.3s; }
.feedback-msg.wrong { color: #ff6b6b; font-size: 1.25rem; text-shadow: 0 0 12px rgba(255,80,80,0.6); }
.feedback-msg.hint { color: var(--clr-bubble-glow); font-size: 1.1rem; text-shadow: 0 0 10px rgba(127,216,245,0.5); }
.feedback-msg.skip { color: var(--clr-gold); font-size: 1rem; }

.machine-panel.wrong-flash {
  animation: wrongFlash 0.6s ease-out;
}

@keyframes wrongFlash {
  0%   { box-shadow: 0 0 0 rgba(255,80,80,0); border-color: var(--clr-panel-border); }
  30%  { box-shadow: 0 0 32px rgba(255,80,80,0.7); border-color: #ff6b6b; }
  100% { box-shadow: 0 0 0 rgba(255,80,80,0); border-color: var(--clr-panel-border); }
}

.milestone-badge {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #ffe066, #ffcad4);
  color: var(--clr-ocean-deep);
  border-radius: var(--radius-xl);
  padding: 2rem 2.5rem; text-align: center;
  z-index: 1000;
  box-shadow: 0 0 60px rgba(255,224,102,0.6);
  animation: badgeReveal 0.6s ease-out;
}
.milestone-badge .badge-emoji { font-size: 3rem; }
.milestone-badge .badge-title { font-size: 1.5rem; font-weight: 900; margin-top: 0.5rem; }
.milestone-badge .badge-label { font-size: 0.95rem; font-weight: 700; opacity: 0.8; margin-top: 0.25rem; }

#screen-start {
  justify-content: flex-start; align-items: center;
  padding: 2rem 1rem;
  position: relative;
}

.start-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 400px;
  width: 100%;
  position: relative; z-index: 1;
}

#screen-start .luma-figure {
  width: min(380px, 32vh);
  height: min(380px, 32vh);
}


.start-logo { text-align: center; }
.start-logo .subtitle {
  font-size: 0.95rem; font-weight: 700;
  color: var(--clr-bubble-glow);
  margin-top: 0.3rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

.start-panel {
  width: 100%;
  background: rgba(4, 12, 28, 0.82);
  border: 1.5px solid rgba(127,216,245,0.28);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.6rem;
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  text-align: center;
}

.start-tagline {
  font-size: 0.97rem;
  color: var(--clr-text);
  line-height: 1.5;
}

/* Mobile: stack Luma above puzzle */
@media (max-width: 640px) {
  #screen-start .luma-figure { width: 320px; height: 320px; }

  .game-body {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 0.5rem;
  }
  .luma-col {
    flex: none;
    position: static;
    flex-direction: row;
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
  }
  .luma-figure { width: 90px; height: 90px; }
  #screen-game .luma-figure { width: 100px; height: 100px; }
  .luma-bubble { max-width: 200px; }
  .tile { width: 46px; height: 50px; font-size: 1.2rem; }
  .slot { width: 44px; height: 48px; font-size: 1.3rem; }
  .machine-panel { padding: 0.75rem; gap: 0.5rem; }
  .machine-illustration { display: none; }
  .game-header { padding: 0 0.5rem; }
}

.bg-bubbles { z-index: 0; }
.game-header, .game-body, .machine-panel, .tile-bank, .feedback-msg { position: relative; z-index: 1; }

/* ── Generated Assets ───────────────────────────── */

.luma-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.luma-figure img.luma-popin {
  animation: lumaPopIn 0.5s ease-out forwards;
}

@keyframes lumaPopIn {
  0%   { opacity: 0.5; transform: scale(0.96); }
  100% { opacity: 1;   transform: scale(1); }
}

.luma-figure.luma-tap {
  animation: lumaTap 0.4s ease-out forwards;
}

@keyframes lumaTap {
  0%   { transform: scale(1)    translateY(0); }
  35%  { transform: scale(1.06) translateY(-5px); }
  100% { transform: scale(1)    translateY(0); }
}

#screen-start {
  background-image: url('../assets/images/bg-start.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#screen-game {
  background-image: url('../assets/images/bg-lab.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Light overlay on game screen only - start screen stays vivid */
#screen-game::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.20);
  pointer-events: none;
  z-index: 0;
}

.machine-illustration {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(127,216,245,0.4));
}

/* Wordmark replaces text title */
.wordmark {
  max-width: 520px;
  width: 95%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(127,216,245,0.5));
}

/* Slot hint text */
.slot-hint {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--clr-text-dim);
  text-align: center;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* × indicator on filled slots */
.slot.filled::after {
  content: '×';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: rgba(255,107,107,0.85);
  color: white;
  border-radius: 50%;
  font-size: 0.6rem;
  line-height: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.slot.filled:hover::after { opacity: 1; }

/* Slots need position:relative for the × to anchor */
.slot { position: relative; }

/* ── Week Select Screen ─────────────────────────────────── */

#screen-weeks {
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 3rem;
  gap: 1.2rem;
  overflow-y: auto;
  background-image: url('../assets/images/bg-menu.jpg');
  background-size: cover;
  background-position: center center;
  position: relative;
}

#screen-weeks::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 28, 0.28);
  pointer-events: none;
  z-index: 0;
}

.weeks-header {
  width: 100%; max-width: 900px;
  display: flex; align-items: center; gap: 1rem;
  position: relative; z-index: 1;
}

.weeks-title-block { display: flex; flex-direction: column; gap: 0.1rem; }
.weeks-title {
  font-size: 1.5rem; font-weight: 900;
  color: var(--clr-bubble-glow);
  text-shadow: 0 0 20px rgba(127,216,245,0.5);
  line-height: 1.1;
}
.weeks-subtitle { font-size: 0.8rem; color: var(--clr-text-dim); font-weight: 700; }

.btn-back { font-size: 0.9rem; padding: 0.5rem 1rem; flex-shrink: 0; }

/* Game back button in header */
.game-back-btn { font-size: 0.8rem; padding: 0.35rem 0.75rem; flex-shrink: 0; }

/* ── Conveyor Belt System ─────────────────────────────────── */

.conveyor-wrap {
  width: 100%; max-width: 900px;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 0;
}

.belt-rail {
  width: 100%; height: 14px;
  background:
    linear-gradient(180deg, rgba(60,120,180,0.6) 0%, rgba(30,70,110,0.8) 50%, rgba(20,50,80,0.6) 100%);
  border-radius: 3px;
  position: relative; overflow: hidden;
}
.belt-rail::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 18px,
    rgba(0,0,0,0.35) 18px,
    rgba(0,0,0,0.35) 22px
  );
  animation: beltScroll 1.2s linear infinite;
}
.belt-rail::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(127,216,245,0.25) 0%, transparent 40%),
    linear-gradient(0deg, rgba(0,0,0,0.3) 0%, transparent 40%);
  pointer-events: none;
}
@keyframes beltScroll {
  from { background-position: 0 0; }
  to   { background-position: 22px 0; }
}

.weeks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
  padding: 0.6rem 0;
  position: relative; z-index: 1;
  background: rgba(10,22,40,0.15);
}

/* ── Week Cards ─────────────────────────────────────────────── */

.week-card {
  background: rgba(8,18,36,0.92);
  border: 1.5px solid rgba(127,216,245,0.3);
  border-top: 3px solid rgba(127,216,245,0.5);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.9rem 0.9rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: flex; flex-direction: column; gap: 0.4rem;
  position: relative;
}
.week-card:hover:not(.locked) {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(127,216,245,0.25);
  border-color: var(--clr-bubble);
  border-top-color: var(--clr-bubble);
}
.week-card.locked { opacity: 0.4; cursor: default; }
.week-card.completed {
  border-color: rgba(110,255,197,0.5);
  border-top-color: var(--clr-success);
  box-shadow: 0 0 12px rgba(110,255,197,0.15);
}
.week-card.completed:hover:not(.locked) {
  box-shadow: 0 8px 28px rgba(110,255,197,0.3);
}

.week-card-header { display: flex; align-items: center; justify-content: space-between; }
.week-card-num { font-size: 0.95rem; font-weight: 900; color: var(--clr-bubble-glow); }

.week-card-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.dot-charged {
  background: var(--clr-success);
  box-shadow: 0 0 6px var(--clr-success);
  animation: dotPulse 2s ease-in-out infinite;
}
.dot-ready { background: var(--clr-bubble); box-shadow: 0 0 4px var(--clr-bubble); }
.dot-locked { background: rgba(255,255,255,0.2); }

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.week-card-stars { font-size: 1.1rem; }
.week-card-stars .star { color: var(--clr-text-dim); }
.week-card-stars .star.earned { color: var(--clr-gold); }
.week-card-clue { font-size: 0.78rem; color: var(--clr-text); line-height: 1.35; opacity: 0.85; }

/* ── Mute Button ──────────────────────────────────────────── */

.audio-bar {
  position: fixed;
  bottom: 1rem; right: 1rem;
  display: flex;
  gap: 8px;
  z-index: 5000;
}
.btn-mute {
  position: static;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10,22,40,0.85);
  border: 1.5px solid rgba(127,216,245,0.4);
  color: var(--clr-text);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  backdrop-filter: blur(6px);
  padding: 0;
  font-family: var(--font-main);
}
.btn-mute:hover { background: rgba(127,216,245,0.15); border-color: var(--clr-bubble); }
.btn-mute.is-off { opacity: 0.55; border-style: dashed; }

/* Four buttons now live in the bar - shrink them on phones so they
   don't crowd the start panel's bottom corner. */
@media (max-width: 520px) {
  .audio-bar { gap: 5px; bottom: 0.6rem; right: 0.6rem; }
  .btn-mute { width: 37px; height: 37px; font-size: 1.05rem; }
}

/* Reader profile chips on the start screen */
.profile-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.45rem;
  margin: 0.2rem 0 0.75rem;
}
.profile-chips {
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem; flex-wrap: wrap;
}
.profile-chip-wrap { position: relative; display: inline-flex; }
.profile-row-label {
  font-size: 0.85rem; font-weight: 800;
  color: var(--clr-bubble);
  letter-spacing: 0.03em;
}
.profile-chip {
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.6rem;
  background: rgba(10,22,40,0.8);
  border: 2px solid rgba(127,216,245,0.35);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
  padding: 0;
  overflow: hidden;
}
.profile-chip img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
}
.profile-chip:hover { transform: scale(1.08); }
.profile-chip.is-active {
  border-color: var(--clr-success);
  box-shadow: 0 0 14px rgba(110,255,197,0.45);
}
.profile-add, .profile-manage {
  width: 40px; height: 40px;
  font-size: 1rem;
  opacity: 0.75;
}
.profile-del {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.7rem; font-weight: 800;
  background: #b91c1c;
  color: #fff;
  border: 2px solid #06101f;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  z-index: 1;
}
.profile-picker-card { align-items: center; }
.profile-picker-sub {
  margin: 0 0 0.3rem;
  font-size: 0.85rem; line-height: 1.4;
  color: var(--clr-text);
  text-align: center;
  max-width: 340px;
}
.profile-picker {
  display: flex; justify-content: center;
  gap: 0.7rem 0.8rem; flex-wrap: wrap;
  max-width: 360px;
  padding: 0.4rem 0;
}
.profile-pick-option {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.profile-pick-option .profile-chip {
  width: 64px; height: 64px;
  pointer-events: none;
}
.profile-pick-option:hover .profile-chip {
  transform: scale(1.08);
  border-color: var(--clr-success);
}
.profile-pick-name {
  font-size: 0.75rem; font-weight: 700;
  color: var(--clr-text);
  font-family: var(--font-main);
}

/* ⚙️ Sound mixer panel - anchors above the audio bar. */
.settings-panel {
  position: fixed;
  bottom: 4.5rem; right: 1rem;
  z-index: 5001;
  width: min(300px, calc(100vw - 2rem));
  background: rgba(10,22,40,0.96);
  border: 1.5px solid rgba(127,216,245,0.45);
  border-radius: 16px;
  padding: 1rem 1.1rem 0.9rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
}
.settings-panel h3 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem; font-weight: 900;
  color: var(--clr-bubble);
  letter-spacing: 0.04em;
}
.settings-row {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.65rem;
}
.settings-label {
  flex: 0 0 6.2em;
  font-size: 0.9rem; font-weight: 700;
  color: var(--clr-text);
}
.settings-row input[type="range"] {
  flex: 1;
  accent-color: var(--clr-success);
  height: 6px;
  cursor: pointer;
}
.settings-close {
  display: block;
  margin: 0.4rem auto 0;
  padding: 0.45rem 1.4rem;
  font-family: var(--font-main);
  font-size: 0.9rem; font-weight: 800;
  color: #06101f;
  background: linear-gradient(135deg, var(--clr-bubble), var(--clr-success));
  border: none; border-radius: 99px;
  cursor: pointer;
}
.settings-close:hover { filter: brightness(1.1); }

/* ❓ How-to-play overlay */
.help-overlay {
  position: fixed; inset: 0;
  z-index: 6000;
  background: rgba(4,10,20,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.help-card {
  width: min(460px, 100%);
  max-height: min(80dvh, 620px);
  display: flex; flex-direction: column;
  background: rgba(10,22,40,0.97);
  border: 1.5px solid rgba(127,216,245,0.45);
  border-radius: 18px;
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: 0 16px 50px rgba(0,0,0,0.55);
}
.help-card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.25rem; font-weight: 900;
  color: var(--clr-bubble);
  text-align: center;
}
.help-scroll {
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.4rem;
}
.help-scroll section { margin-bottom: 0.8rem; }
.help-scroll h3 {
  margin: 0 0 0.2rem;
  font-size: 0.98rem; font-weight: 800;
  color: var(--clr-success);
}
.help-scroll p {
  margin: 0;
  font-size: 0.88rem; line-height: 1.45;
  color: var(--clr-text);
}
.help-card .settings-close { margin-top: 0.8rem; }

.btn-echo {
  margin-top: 0.3rem;
  font-size: 0.78rem; font-weight: 800;
  padding: 0.35rem 0.75rem;
  background: rgba(110,255,197,0.15);
  color: var(--clr-success);
  border: 1px solid rgba(110,255,197,0.4);
  border-radius: 8px; cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-main);
}
.btn-echo:hover { background: rgba(110,255,197,0.25); }

/* ── Code Modal ─────────────────────────────────────────── */

.code-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.code-modal-box {
  max-width: 340px; width: 90%;
  display: flex; flex-direction: column; gap: 0.9rem;
  text-align: center;
}
.code-modal-title { font-size: 1.1rem; font-weight: 900; color: var(--clr-bubble-glow); }
.code-modal-input {
  font-family: var(--font-main);
  font-size: 1.6rem; font-weight: 900; letter-spacing: 0.12em;
  text-align: center; text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--clr-panel-border);
  border-radius: 12px; color: var(--clr-text);
  padding: 0.6rem; width: 100%;
}
.code-modal-hint { font-size: 0.82rem; color: #ff6b6b; min-height: 1.2em; }
.code-modal-btns { display: flex; gap: 0.6rem; justify-content: center; }

/* ── Chalkboard Badge ───────────────────────────────────── */

.chalkboard-badge {
  background: rgba(30,50,30,0.75);
  border: 2px solid rgba(180,200,150,0.4);
  border-radius: 8px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem; font-weight: 900;
  color: rgba(220,240,200,0.9);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Week-Complete Overlay ──────────────────────────────── */

.week-overlay {
  position: fixed; inset: 0;
  background: rgba(5,12,25,0.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2rem; z-index: 1500;
  animation: badgeReveal 0.5s ease-out;
}
.week-overlay-luma { width: 180px; height: 180px; }
.week-overlay-luma img { width: 100%; height: 100%; object-fit: contain; }
.week-overlay-title {
  font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900;
  color: var(--clr-gold);
  text-shadow: 0 0 30px rgba(255,224,102,0.6);
  text-align: center;
}
.week-overlay-stars { font-size: 2.5rem; letter-spacing: 0.15em; }
.week-overlay-code {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid var(--clr-panel-border);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1.5rem; text-align: center;
}
.week-overlay-code-label { font-size: 0.8rem; font-weight: 700; color: var(--clr-text-dim); }
.week-overlay-code-value {
  font-size: 1.8rem; font-weight: 900; letter-spacing: 0.15em;
  color: var(--clr-bubble-glow);
}
.week-overlay-code-hint { font-size: 0.72rem; color: var(--clr-text-dim); margin-top: 0.25rem; }

/* ── Machine Activated ──────────────────────────────────── */

.machine-illustration.activated {
  filter: brightness(1.35) saturate(1.3) drop-shadow(0 0 20px rgba(110,255,197,0.6));
  transition: filter 0.3s;
}

/* ── Word Echo Mode ─────────────────────────────────────── */

.echo-panel {
  width: 100%; max-width: 500px;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  position: relative; z-index: 1;
  background: rgba(8, 20, 38, 0.78);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(127,216,245,0.32);
  border-radius: 22px;
  padding: 22px 24px 26px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.echo-prompt { font-size: 1.15rem; font-weight: 700; color: var(--clr-bubble-glow); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.echo-play-btn {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-bubble), var(--clr-ocean-light));
  border: none; cursor: pointer; font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(127,216,245,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.echo-play-btn:hover { transform: scale(1.08); box-shadow: 0 0 32px rgba(127,216,245,0.6); }
.echo-choices { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; }
.echo-choice {
  padding: 1rem 1.5rem;
  background: linear-gradient(160deg, rgba(26,82,118,0.6), rgba(10,22,40,0.8));
  border: 2px solid rgba(127,216,245,0.3);
  border-radius: var(--radius-lg);
  font-size: 1.4rem; font-weight: 900; color: var(--clr-bubble-glow);
  cursor: pointer; text-align: center; font-family: var(--font-main);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.echo-choice:hover { border-color: var(--clr-bubble); transform: scale(1.02); }
.echo-choice.correct { border-color: var(--clr-success); background: rgba(110,255,197,0.15); }
.echo-choice.wrong { border-color: #ff6b6b; background: rgba(255,80,80,0.1); animation: tileShake 0.4s ease-out; }

/* ── Sentence Builder ───────────────────────────────────── */

.sentence-display {
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.55;
  text-align: center;
  padding: 0.5rem 0.25rem;
  margin-bottom: 0.5rem;
}

.sentence-blank {
  color: var(--clr-gold);
  font-weight: 900;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--clr-gold);
  padding-bottom: 1px;
  animation: blankPulse 2s ease-in-out infinite;
}

@keyframes blankPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

.btn-sentence {
  margin-top: 0.3rem;
  font-size: 0.78rem; font-weight: 800;
  padding: 0.35rem 0.75rem;
  background: rgba(255,224,102,0.12);
  color: var(--clr-gold);
  border: 1px solid rgba(255,224,102,0.4);
  border-radius: 8px; cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-main);
  display: block;
  width: 100%;
}
.btn-sentence:hover { background: rgba(255,224,102,0.22); }

/* ── Charge Bar (week-complete overlay) ───────────────────────────────────── */

.charge-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0.5rem 0;
}

.charge-bar-machine-name {
  font-size: 0.85rem;
  color: #fbd76b;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.charge-bar-track {
  width: 100%;
  max-width: 260px;
  height: 14px;
  background: rgba(4, 12, 28, 0.7);
  border: 1px solid rgba(127,216,245,0.3);
  border-radius: 999px;
  overflow: hidden;
}

.charge-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.charge-bar-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  background: rgba(8, 20, 38, 0.6);
  padding: 2px 10px;
  border-radius: 999px;
}

.charge-bar-label.online {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74,222,128,0.6);
}

/* ── Lab Hub Screen ───────────────────────────────────────────────────────── */

#screen-weeks {
  gap: 1rem;
  padding: 1rem 1rem 2rem;
}

.lab-header {
  width: 100%; max-width: 860px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
  flex-shrink: 0;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 8px;
  background: rgba(8, 20, 38, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(127,216,245,0.32);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.lab-header-actions {
  display: flex; gap: 6px; align-items: center;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  /* Collapse header buttons to emoji-only and shorten the title so the
     lab-header pill fits within a 375px viewport. */
  .lab-header-actions .btn { font-size: 1.05rem; padding: 0.25rem 0.55rem; }
  #btn-brews { font-size: 0; }
  #btn-brews::after { content: '🫧'; font-size: 1.1rem; }
  #btn-past-weeks { font-size: 0; }
  #btn-past-weeks::after { content: '📋'; font-size: 1.1rem; }
  .lab-header .lab-title { font-size: 0; min-width: 0; }
  .lab-header .lab-title::after {
    content: "Luma's Lab";
    font-size: 0.95rem;
    font-weight: 900;
    color: #f1f5f9;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 16px rgba(127,216,245,0.4);
  }

  /* Shrink the lab so the full screen (header + hero + panorama +
     week activities) fits within 100dvh - no-scroll lock means
     anything past the viewport bottom is unreachable. */
  #screen-weeks { gap: 0.4rem; padding: 0.4rem 0.6rem; }
  .machine-hero { gap: 0.3rem; }
  .machine-hero-img-wrap { width: 110px; height: 110px; }
  .machine-hero-img { width: 110px; height: 110px; }
  .machine-hero-name { font-size: 1.05rem; }
  .machine-node { width: 38px; height: 38px; }
  .lab-panorama { padding: 5px 10px; }
  .week-activities { padding: 0.65rem 1rem; gap: 0.35rem; }
  .week-act-num { font-size: 1.1rem; }
  .week-act-clue { font-size: 0.85rem; line-height: 1.3; }
  .week-act-stars { font-size: 1.1rem; }
  .week-act-btns .btn { font-size: 0.95rem; padding: 0.55rem 1.1rem; }
}

/* Desktop also gets a height cap so the whole lab fits without
   scrolling at common laptop heights (700-900px). */
@media (min-width: 521px) {
  #screen-weeks { gap: 0.6rem; padding: 0.6rem 1rem; justify-content: flex-start; }
}

.lab-title {
  font-size: clamp(0.85rem, 2.6vw, 1.1rem);
  font-weight: 900;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 16px rgba(127,216,245,0.4);
  flex: 1; text-align: center;
  white-space: nowrap;
  overflow: visible;
}

.btn-sm { font-size: 0.78rem; padding: 0.35rem 0.75rem; }

/* ── Machine Hero ─────────────────────────────────────────────────────────── */

.machine-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.machine-hero-img-wrap {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.machine-hero-glow {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mc, #60a5fa) 0%, transparent 68%);
  opacity: 0.35;
  animation: heroGlow 2.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroGlow {
  from { opacity: 0.2; transform: scale(0.9); }
  to   { opacity: 0.5; transform: scale(1.1); }
}

.machine-hero-img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(127, 216, 245, 0.3);
  position: relative;
  z-index: 1;
}

.machine-hero-img.online {
  border-color: #4ade80;
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.5);
}

.machine-hero-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--clr-text);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

.machine-hero-charge { margin-top: 0.1rem; }

/* ── Lab Panorama ─────────────────────────────────────────────────────────── */

.lab-panorama {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 8px 14px;
  position: relative;
  z-index: 1;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 860px;
  width: 100%;
  flex-shrink: 0;
  background: rgba(8, 20, 38, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(127,216,245,0.3);
  border-radius: 999px;
  justify-content: center;
}
.lab-panorama::-webkit-scrollbar { display: none; }

.machine-node {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(127,216,245,0.35);
  overflow: hidden;
  position: relative;
  cursor: default;
  background: rgba(8, 20, 38, 0.55);
}

.machine-node img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.machine-node.online {
  border-color: #4ade80;
  box-shadow: 0 0 10px rgba(74,222,128,0.55);
}

.machine-node.charging {
  border-color: var(--mc, #60a5fa);
  box-shadow: 0 0 14px var(--mc, #60a5fa);
  animation: nodeCharge 1.6s ease-in-out infinite;
}

.machine-node.dormant {
  opacity: 0.7;
  filter: grayscale(0.5) brightness(0.85);
}

@keyframes nodeCharge {
  0%, 100% { box-shadow: 0 0 6px var(--mc, #60a5fa); }
  50%       { box-shadow: 0 0 22px var(--mc, #60a5fa); }
}

/* ── Week Activities Panel ────────────────────────────────────────────────── */

.week-activities {
  background: rgba(4, 12, 28, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(127,216,245,0.2);
  border-radius: 20px;
  padding: 1.1rem 1.4rem;
  max-width: 460px;
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.week-act-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.week-act-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--clr-bubble-glow);
}

.week-act-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.week-act-badge.charged {
  background: rgba(74,222,128,0.2);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.4);
}

.week-act-badge.ready {
  background: rgba(127,216,245,0.1);
  color: var(--clr-bubble-glow);
  border: 1px solid rgba(127,216,245,0.3);
}

.week-act-clue {
  font-size: 0.88rem;
  color: var(--clr-text);
  text-align: center;
  opacity: 0.85;
  line-height: 1.4;
}

.week-act-stars { font-size: 1.2rem; }

.week-act-btns {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.2rem;
}

/* ── Past Weeks Overlay (modal) ──────────────────────────────────────────── */

.past-weeks-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(5, 12, 24, 0.7);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}
.past-weeks-card {
  position: relative;
  background: rgba(8, 20, 38, 0.96);
  border: 2px solid rgba(127,216,245,0.45);
  border-radius: 22px;
  padding: 22px 26px 24px;
  max-width: 540px;
  width: 100%;
  max-height: 84vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65);
}
.past-weeks-card h2 {
  margin: 0;
  color: var(--clr-bubble-glow);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
.past-weeks-hint {
  margin: 4px 0 12px;
  color: rgba(241,245,249,0.7);
  font-size: 0.9rem;
}
.past-weeks-empty {
  color: rgba(241,245,249,0.6);
  text-align: center;
  padding: 24px 0;
}
.past-weeks-close {
  position: absolute;
  top: 10px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(127,216,245,0.12);
  border: 1px solid rgba(127,216,245,0.4);
  color: #e2e8f0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.past-weeks-close:hover {
  background: rgba(127,216,245,0.25);
}
.past-weeks-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  margin-right: -6px;
}

.past-week-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.past-week-row:last-child { border-bottom: none; }

.past-week-num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-bubble-glow);
  min-width: 50px;
}

.past-week-stars {
  font-size: 0.85rem;
  color: var(--clr-gold);
  min-width: 44px;
}

.past-week-btns {
  display: flex; gap: 0.25rem; margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.past-week-btns .btn-chip { flex-shrink: 0; }
@media (max-width: 480px) {
  .past-week-row {
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
  }
  .past-week-btns {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    padding-left: calc(50px + 44px + 1rem);
  }
}

.btn-chip {
  background: rgba(127,216,245,0.12);
  border: 1px solid rgba(127,216,245,0.28);
  color: var(--clr-text);
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-chip:hover { background: rgba(127,216,245,0.28); }

/* ── Machine Splash Screen ────────────────────────────────────────────────── */

.machine-splash {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 18, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  animation: splashFadeIn 0.45s ease;
}

@keyframes splashFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.machine-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  padding: 1rem;
}

.machine-splash-img-wrap {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.machine-splash-glow {
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mc, #60a5fa) 0%, transparent 65%);
  opacity: 0.55;
  animation: splashGlowPulse 1.4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes splashGlowPulse {
  from { opacity: 0.35; transform: scale(0.88); }
  to   { opacity: 0.75; transform: scale(1.12); }
}

.machine-splash-img {
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--mc, #60a5fa);
  position: relative;
  z-index: 1;
  animation: splashImgPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes splashImgPop {
  from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.machine-splash-online {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  color: #e8fff0;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0.28rem 1.2rem;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(74,222,128,0.55);
  animation: splashOnlinePop 0.4s 0.3s ease backwards;
}

@keyframes splashOnlinePop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.machine-splash-name {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--clr-text);
  text-shadow: 0 0 28px rgba(127,216,245,0.6);
  line-height: 1.1;
}

.machine-splash-luma {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.machine-splash-line {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #c4d8f0;
  margin: 0;
}

/* ── Lab Hub: no-scroll layout ───────────────────────────────────────────── */
/* All elements must fit within one viewport - no vertical scroll on lab screen */

#screen-weeks {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  padding: 0.55rem 1rem 0.4rem;
  gap: 0.45rem;
}

.machine-hero { gap: 0.3rem; }

.machine-hero-img-wrap {
  width: 110px;
  height: 110px;
}

.machine-hero-img {
  width: 110px;
  height: 110px;
}

.machine-hero-name {
  font-size: 1rem;
}

.machine-hero-charge { margin-top: 0; }

.lab-panorama {
  padding: 0.25rem 0.75rem;
}

.machine-node {
  width: 46px;
  height: 46px;
}

.week-activities {
  flex: 1;
  min-height: 0;
  padding: 0.75rem 1.2rem;
  gap: 0.4rem;
  flex-shrink: 1;
}

.week-act-clue {
  font-size: 0.84rem;
}

.week-act-btns { margin-top: 0.1rem; }

/* ── Start Screen: fit-to-viewport layout ──────────────────────────────── */

#screen-start {
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: flex-start;
  padding: 1.5rem 1rem;
}

.start-center { gap: 0.5rem; margin: auto 0; }

#screen-start .luma-figure {
  width: min(380px, 32vh);
  height: min(380px, 32vh);
}

@media (max-height: 820px) {
  #screen-start { padding: 0.5rem 1rem; }
  .start-center { gap: 0.35rem; }
  #screen-start .luma-figure { width: min(320px, 26vh); height: min(320px, 26vh); }
  .start-panel { padding: 0.85rem 1.2rem; gap: 0.55rem; }
  .start-tagline { font-size: 0.85rem; }
  .wordmark { max-width: 320px; }
}

/* Short phones: everything (wordmark, Luma, panel with profile chips)
   must fit with no scroll, and the floating audio bar in the bottom
   corner must never sit on the panel's buttons. Shrink the art first,
   the chrome second, and reserve the bar's strip with bottom padding. */
@media (max-height: 700px) {
  #screen-start { padding: 0.4rem 0.8rem calc(56px + env(safe-area-inset-bottom)); }
  #screen-start .luma-figure { width: min(220px, 21vh); height: min(220px, 21vh); }
  .wordmark { max-width: 250px; }
  .start-logo .subtitle { font-size: 0.8rem; margin-top: 0.15rem; }
  .start-panel { padding: 0.65rem 0.9rem; gap: 0.4rem; }
  .start-panel .btn { font-size: 1.05rem; padding: 0.6rem 1.6rem; }
  .start-tagline { font-size: 0.78rem; line-height: 1.35; }
}

/* ---------- Cutscene Engine ---------- */
.cutscene {
  position: fixed;
  inset: 24px;
  z-index: 1000;
  background: #0a1628;
  border: 6px solid #1a2a3e;
  border-radius: 28px;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
}
@media (max-width: 640px) {
  .cutscene {
    inset: 12px;
    border-width: 4px;
    border-radius: 20px;
  }
}
.cutscene.is-visible { opacity: 1; pointer-events: auto; }
.cutscene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: cutsceneBgDrift 38s ease-in-out infinite alternate;
}
@keyframes cutsceneBgDrift {
  0%   { transform: scale(1.04) translate(-1%, 0.5%); }
  100% { transform: scale(1.10) translate(1.5%, -1%); }
}
.cutscene-stage {
  position: absolute;
  inset: 0;
}
.cutscene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(5,12,24,0.55) 100%);
}
.cutscene-bubble {
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  width: auto;
  background: #fffaf0;
  border: 4px solid #1a2a3e;
  border-radius: 24px;
  padding: 22px 32px 26px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
  color: #1a2a3e;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  z-index: 5;
}
.cutscene-bubble[data-tail="down"]::before,
.cutscene-bubble[data-tail="down"]::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
}
/* Tail points toward Luma's standing position (default x:72%). Bubble
   spans 5%-95%, so the tail at left: calc(72% - 5%) / 90% inside bubble
   resolves to roughly 74% of the bubble width. */
.cutscene-bubble[data-tail="down"]::before {
  bottom: -26px;
  left: 74%;
  transform: translateX(-50%);
  border-width: 24px 18px 0 18px;
  border-color: #1a2a3e transparent transparent transparent;
}
.cutscene-bubble[data-tail="down"]::after {
  bottom: -18px;
  left: 74%;
  transform: translateX(-50%);
  border-width: 18px 14px 0 14px;
  border-color: #fffaf0 transparent transparent transparent;
}
.cutscene-text {
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.45;
  text-align: center;
  min-height: 3em;
}
.cutscene-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  z-index: 6;
}
.cutscene-controls > * { pointer-events: auto; }
.cutscene-skip {
  background: rgba(15, 30, 50, 0.78);
  color: #e2e8f0;
  border: 1px solid rgba(127, 216, 245, 0.4);
  padding: 8px 16px;
  border-radius: 99px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  /* Sit above the fixed audio bar (44px buttons + 1rem inset) that
     shares this corner, instead of underneath it. */
  margin-bottom: 52px;
}
.cutscene-skip[hidden] { display: none; }
.cutscene-advance {
  position: absolute;
  bottom: 4px;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(241, 245, 249, 0.7);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: cutsceneAdvancePulse 1.4s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
}
.cutscene-advance.is-ready { opacity: 1; }
@keyframes cutsceneAdvancePulse {
  50% { opacity: 0.4; }
}
.cutscene-sprite {
  --sprite-scale: 1;
  --sprite-platform-scale: 1;
  position: absolute;
  bottom: 20%;
  left: 50%;
  height: 50vh;
  width: auto;
  max-width: 60vw;
  transform: translate(-50%, 0) scale(calc(var(--sprite-scale) * var(--sprite-platform-scale)));
  transform-origin: bottom center;
  transition: opacity 0.3s ease, transform 0.4s ease, left 0.6s ease, bottom 0.6s ease, filter 0.7s ease;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}
/* Dormant machine in the hall - greyed out until its awakening scene. */
.cutscene-sprite.is-dim {
  filter: grayscale(1) brightness(0.55) drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  opacity: 0.55;
}
.cutscene-sprite[data-kind="luma"] {
  height: 48vh;
  width: 48vh;
  object-fit: contain;
}
/* Machine circles: sized in vmin so they scale with the same unit the
   machine-hall ring radius uses (machine-hall.js BOX must match this),
   keeping ring spacing even on every aspect ratio. The 36vw cap keeps
   portrait phones sane. */
.cutscene-sprite[data-kind="machine"] {
  height: min(46vmin, 36vw);
  width: auto;
}
/* The revealed machine takes centre stage alone, so it is sized off
   viewport HEIGHT rather than the ring's narrow vmin cap - otherwise a
   portrait phone (where vmin is the short width) shrinks it to a
   thumbnail floating on an empty wall. */
.cutscene-sprite[data-kind="machine-hero"] {
  height: min(46vh, 70vw);
  width: auto;
}
@media (max-width: 640px) {
  .cutscene-sprite {
    max-width: 70vw;
  }
  .cutscene-sprite[data-kind="luma"] {
    --sprite-platform-scale: 0.7;
  }
}

/* ---------- Cutscene Picker (QA: ?cutscene=menu) ---------- */
#cutscene-menu {
  position: fixed; inset: 0; z-index: 900;
  background: radial-gradient(ellipse at center, #0f2238 0%, #06101f 80%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  padding: 24px;
  overflow: auto;
}
#cutscene-menu .cutscene-menu-card {
  background: rgba(15, 30, 50, 0.85);
  border: 1px solid rgba(127, 216, 245, 0.3);
  border-radius: 18px;
  padding: 28px 32px;
  max-width: 520px;
  width: 100%;
  color: #f1f5f9;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
#cutscene-menu h2 {
  color: #7fd8f5;
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
}
#cutscene-menu p {
  color: rgba(241,245,249,0.7);
  margin: 0 0 20px;
  font-size: 0.95rem;
}
#cutscene-menu ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
}
@media (min-width: 700px) {
  #cutscene-menu .cutscene-menu-card { max-width: 720px; }
  #cutscene-menu ul { grid-template-columns: 1fr 1fr; }
}
#cutscene-menu button.is-reviewed {
  border-color: rgba(110,255,197,0.5);
  color: var(--clr-success);
  background: rgba(110,255,197,0.08);
}
#cutscene-menu li { margin: 0; }
#cutscene-menu button {
  width: 100%;
  text-align: left;
  background: rgba(127, 216, 245, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(127, 216, 245, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
#cutscene-menu button:hover {
  background: rgba(127, 216, 245, 0.18);
  border-color: rgba(127, 216, 245, 0.55);
}
#cutscene-menu button:active { transform: translateY(1px); }

/* ── Intro Title Card (shown before the first-launch intro cutscene) ────── */
.intro-title-card {
  position: fixed; inset: 0; z-index: 950;
  background: radial-gradient(ellipse at center, #0f2238 0%, #06101f 80%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.intro-title-card.is-visible { opacity: 1; }
.intro-title-inner {
  text-align: center;
  padding: 24px;
  animation: introTitleRise 0.7s ease-out 0.1s both;
}
.intro-title-wordmark {
  max-width: min(560px, 80vw);
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(127,216,245,0.45));
}
.intro-title-tagline {
  color: var(--clr-bubble-glow);
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  margin: 14px 0 28px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.intro-title-hint {
  color: rgba(241,245,249,0.6);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  animation: introTitlePulse 1.6s ease-in-out infinite;
}
.intro-title-btn {
  margin-top: 1.4rem;
  font-size: 1.05rem;
  padding: 0.7rem 2rem;
  letter-spacing: 0.08em;
  animation: introTitlePulse 1.8s ease-in-out infinite;
}
@keyframes introTitleRise {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes introTitlePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── Bubble Brews mini-game ─────────────────────────────────────── */

/* Lock the surrounding page while brews is open so the phone toolbar
   showing/hiding can't expose any scrollable area beneath the game. */
body.is-brews-active { overflow: hidden; height: 100dvh; }
body.is-brews-active #screen-game { overflow: hidden; height: 100dvh; }

.brews-stage {
  position: relative;
  width: 100%; max-width: 900px;
  /* 100dvh tracks the dynamic viewport on iOS Safari so the play area
     stays fully visible whether or not the URL bar is showing. */
  height: 100dvh; max-height: 100dvh;
  margin: 0 auto;
  display: flex; flex-direction: column;
  /* Same bookshelf/library scene as the menu - light + warm and
     consistent with the rest of the game. A faint navy tint at the
     bottom keeps the slot row + buttons readable. */
  background:
    linear-gradient(180deg, rgba(8,20,38,0.05) 0%, rgba(8,20,38,0.35) 100%),
    url('../assets/images/bg-menu.jpg') center / cover no-repeat,
    linear-gradient(180deg, #0b2740 0%, #0a1830 55%, #06101e 100%);
  overflow: hidden;
  color: var(--clr-text);
  font-family: var(--font-main);
}

.brews-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(8,20,38,0.55);
  border-bottom: 1px solid rgba(127,216,245,0.18);
  z-index: 5;
}
.brews-header .btn-back { padding: 0.35rem 0.75rem; font-size: 0.85rem; }

.brews-meter {
  position: relative; flex: 0 0 auto;
}
.brews-meter-bubble {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(127,216,245,0.18) 60%, rgba(8,20,38,0.7) 100%);
  border: 2px solid rgba(127,216,245,0.55);
  box-shadow: 0 0 18px rgba(127,216,245,0.35), inset 0 -8px 14px rgba(0,0,0,0.25);
  overflow: hidden;
  isolation: isolate;
}
.brews-meter-grey,
.brews-meter-color {
  position: absolute; inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: contain;
  user-select: none; pointer-events: none;
}
.brews-meter-grey {
  filter: grayscale(100%) brightness(0.78) contrast(0.85);
  z-index: 1;
}
.brews-meter-color {
  z-index: 3;
  transition: clip-path 0.55s ease;
}
.brews-meter-water {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(127,216,245,0.0) 0%, rgba(110,255,197,0.35) 30%, rgba(127,216,245,0.55) 100%);
  z-index: 2;
  transition: height 0.55s ease;
  border-top: 1.5px solid rgba(174,255,231,0.55);
}
.brews-meter-water.is-full {
  background: linear-gradient(180deg, rgba(255,220,120,0.4), rgba(255,200,80,0.7));
  animation: brewsMeterPulse 0.7s ease-in-out 2;
}
@keyframes brewsMeterPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,220,120,0); }
  50% { box-shadow: inset 0 0 24px 6px rgba(255,220,120,0.5); }
}

.brews-score-card {
  margin-left: auto;
  background: rgba(8,20,38,0.7);
  border: 1.5px solid rgba(127,216,245,0.3);
  border-radius: 12px;
  padding: 6px 12px;
  min-width: 110px;
  font-weight: 800;
  display: flex; flex-direction: column; gap: 2px;
}
.brews-score-row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 0.9rem;
  color: #f1f5f9;
}
.brews-score-row span:first-child { color: rgba(168,239,255,0.7); font-weight: 700; letter-spacing: 0.05em; font-size: 0.7rem; text-transform: uppercase; }
.brews-score-row-small { font-size: 0.75rem; opacity: 0.85; }
.brews-score-row-small span:last-child { color: var(--clr-gold); }

.brews-pool {
  position: relative;
  flex: 1 1 0;
  /* min-height: 0 is required so the pool can shrink in a flex column
     whose children are otherwise sized by content (header, builder). */
  min-height: 0;
  overflow: hidden;
}

.brews-hint {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: rgba(8,20,38,0.55);
  border-bottom: 1px solid rgba(127,216,245,0.18);
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(241,245,249,0.9);
  flex: 0 0 auto;
  z-index: 4;
}
.brews-hint-label { color: var(--clr-bubble); text-shadow: 0 0 8px rgba(127,216,245,0.3); }
.brews-hint-letters { display: flex; gap: 4px; letter-spacing: 0.05em; }
.brews-hint-letter {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(127,216,245,0.12);
  border: 1px solid rgba(127,216,245,0.28);
  color: #f1f5f9;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
}
.brews-hint-letter.is-spawned {
  background: linear-gradient(180deg, rgba(110,255,197,0.35), rgba(127,216,245,0.2));
  border-color: var(--clr-success);
  color: var(--clr-success);
}

.brews-bubble {
  position: absolute;
  /* Strong outline so the bubble reads against the bright bookshelf
     background. Was previously borderless; on the library bg the
     translucent fill blended into book spines. */
  border: 2px solid rgba(8, 32, 60, 0.7);
  background: radial-gradient(circle at 30% 28%,
    rgba(255,255,255,0.95),
    rgba(170,225,250,0.85) 45%,
    rgba(85,170,220,0.78) 75%,
    rgba(50,120,180,0.72) 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 -10px 20px rgba(20,60,110,0.5),
    inset 0 4px 12px rgba(255,255,255,0.55),
    0 5px 14px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.25);
  cursor: pointer;
  font-family: var(--font-main);
  font-weight: 900;
  color: #0a1628;
  display: flex; align-items: center; justify-content: center;
  will-change: top, transform;
  padding: 0;
}
.brews-bubble:hover { filter: brightness(1.08); }
.brews-bubble-letter {
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  /* White halo so the dark letter stays readable against the
     translucent bubble fill + busy bookshelf background. */
  text-shadow:
    0 1px 2px rgba(255,255,255,0.9),
    0 0 6px rgba(255,255,255,0.75);
}
.brews-bubble.is-popped {
  animation: brewsBubblePop 0.22s ease forwards;
  pointer-events: none;
}
.brews-bubble.is-floated-away {
  animation: brewsBubbleFloat 0.22s ease forwards;
  pointer-events: none;
}
/* These keyframes only animate scale + opacity. The bubble's vertical
   position is owned by JS via `top` so the keyframe cannot snap the
   bubble to a wrong location during the pop. The inline `transform:
   translateX(...)` is also preserved because we use `scale()` here,
   which sits in the same transform property and is replaced cleanly
   when the animation ends (the element gets removed anyway). */
@keyframes brewsBubblePop {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 0.6; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(0.3); }
}
@keyframes brewsBubbleFloat {
  to { opacity: 0; transform: scale(1.08); }
}

.brews-builder {
  flex: 0 0 auto;
  padding: 10px 12px 14px;
  background: rgba(8,20,38,0.6);
  border-top: 1.5px solid rgba(127,216,245,0.25);
}

.brews-slots {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 10px;
}
.brews-slots.is-shaking { animation: brewsShake 0.4s ease; }
@keyframes brewsShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.brews-slot {
  width: 38px; height: 44px;
  border-radius: 8px;
  border: 2px dashed rgba(127,216,245,0.35);
  background: rgba(8,20,38,0.45);
  color: #f1f5f9;
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 1.2rem;
  cursor: default;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: transform 0.1s ease, background 0.15s ease;
}
.brews-slot-filled {
  border: 2px solid var(--clr-bubble);
  background: linear-gradient(180deg, #7fd8f5, #6effc5);
  color: #0a1628;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(127,216,245,0.35);
  user-select: none;
  -webkit-user-select: none;
}
.brews-slot-filled:hover { transform: translateY(-2px); }
.brews-slot.is-dragging {
  cursor: grabbing;
  z-index: 30;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.4);
  transition: none;
  opacity: 0.92;
  /* So elementFromPoint sees the slot *underneath* the dragged tile
     when figuring out the drop target. Without this the dragged tile
     overlays the destination and the drop silently no-ops. */
  pointer-events: none;
}
.brews-slot.is-drop-target {
  border-color: var(--clr-success);
  box-shadow: 0 0 0 3px rgba(110,255,197,0.5), 0 2px 8px rgba(110,255,197,0.4);
  background: linear-gradient(180deg, rgba(110,255,197,0.5), rgba(127,216,245,0.4));
}

.brews-actions {
  display: flex; gap: 8px; justify-content: center;
}
.brews-submit {
  font-size: 1rem;
  padding: 0.55rem 1.5rem;
  letter-spacing: 0.06em;
}
.brews-clear {
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
}

.brews-feedback {
  position: absolute;
  top: 96px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(8,20,38,0.92);
  border: 2px solid var(--clr-bubble);
  border-radius: 14px;
  padding: 0.5rem 1.2rem;
  font-weight: 900;
  font-size: 1.05rem;
  color: #f1f5f9;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
  white-space: nowrap;
  max-width: 90vw;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.brews-feedback.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.brews-feedback-ok { border-color: var(--clr-success); color: var(--clr-success); }
.brews-feedback-bad { border-color: #f87171; color: #fecaca; }
.brews-feedback-warn { border-color: var(--clr-gold); color: var(--clr-gold); }

@media (max-width: 480px) {
  .brews-meter-bubble { width: 60px; height: 60px; }
  .brews-score-card { padding: 4px 10px; min-width: 96px; }
  .brews-slot { width: 32px; height: 40px; font-size: 1.05rem; }
  .brews-bubble-letter { font-size: 1.3rem; }
  .brews-submit { font-size: 0.9rem; padding: 0.5rem 1.1rem; }
}

.brews-help-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(127,216,245,0.5);
  background: rgba(8,20,38,0.7);
  color: var(--clr-bubble);
  font-family: var(--font-main);
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.1s;
}
.brews-help-btn:hover { background: rgba(127,216,245,0.18); transform: scale(1.05); }

.brews-help-overlay {
  position: absolute; inset: 0;
  background: rgba(6,16,30,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 120;
  backdrop-filter: blur(8px);
  animation: badgeReveal 0.35s ease-out;
  padding: 16px;
}
.brews-help-card {
  position: relative;
  background: rgba(10,22,42,0.96);
  border: 2px solid rgba(127,216,245,0.5);
  border-radius: 18px;
  padding: 1.4rem 1.6rem 1.2rem;
  max-width: 360px;
  width: 100%;
  color: #f1f5f9;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  max-height: 90vh;
  overflow-y: auto;
}
.brews-help-card h2 {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
  color: var(--clr-bubble);
  text-align: center;
  letter-spacing: 0.04em;
}
.brews-help-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(8,20,38,0.7);
  color: rgba(241,245,249,0.7);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.brews-help-close:hover { background: rgba(248,113,113,0.4); color: #fff; }
.brews-help-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.brews-help-list li {
  display: flex; gap: 10px;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(127,216,245,0.12);
}
.brews-help-list li:last-child { border-bottom: none; }
.brews-help-list .hk-ico {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.brews-help-list b { color: var(--clr-success); }
.brews-help-ok {
  display: block;
  margin: 0 auto;
  padding: 0.55rem 1.8rem;
  font-size: 0.95rem;
}

.brews-over-overlay {
  position: absolute; inset: 0;
  background: rgba(6,16,30,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  backdrop-filter: blur(6px);
  animation: badgeReveal 0.45s ease-out;
}
.brews-over-card {
  background: rgba(8,20,38,0.95);
  border: 2px solid rgba(248,113,113,0.55);
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  max-width: 320px;
  text-align: center;
  color: #f1f5f9;
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
}
.brews-over-card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  color: #fecaca;
}
.brews-over-card p {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  color: rgba(241,245,249,0.85);
}

/* Round-end overlay shown when Luma's meter fills. Celebratory tone
   (mint green border, gold score) vs. the red 'closed for now'
   overlay used for unrelated game-over paths. */
.brews-round-end {
  position: absolute; inset: 0;
  background: rgba(6,16,30,0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 110;
  backdrop-filter: blur(8px);
  animation: badgeReveal 0.5s ease-out;
  padding: 16px;
}
.brews-round-card {
  background: rgba(8,20,38,0.96);
  border: 2.5px solid var(--clr-success);
  border-radius: 22px;
  padding: 1.8rem 2rem 1.6rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
  color: #f1f5f9;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 24px rgba(110,255,197,0.25);
}
.brews-round-card h2 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  color: var(--clr-success);
  text-shadow: 0 0 12px rgba(110,255,197,0.4);
}
.brews-round-score {
  background: rgba(127,216,245,0.08);
  border: 1.5px solid rgba(127,216,245,0.3);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  margin: 0 0 1.2rem;
  display: flex; flex-direction: column; gap: 4px;
}
.brews-round-score-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 900;
  font-size: 1.15rem;
}
.brews-round-score-row span:first-child {
  color: rgba(168,239,255,0.7);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.brews-round-score-row-small { font-size: 0.9rem; opacity: 0.85; }
.brews-round-score-row-small span:last-child { color: var(--clr-gold); }
.brews-round-prompt {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(241,245,249,0.95);
}
.brews-round-actions {
  display: flex; gap: 10px; justify-content: center;
}
.brews-round-actions .btn { padding: 0.6rem 1.4rem; font-size: 0.95rem; }

/* Post-game hub: the activity panel once all 50 weeks are charged. */
.week-activities.lab-complete {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.12);
}
.week-activities.lab-complete .week-act-stars {
  color: #fbbf24;
  font-weight: 700;
}

/* ---------- Dev Mode (⚙️ tapped 5x) ---------- */
/* Deliberately unlovely: an all-green terminal so it can never be
   mistaken for part of the game, readable on a phone in a dark room. */
.dev-panel {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 8, 2, 0.95);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #22ff77;
}
.dev-card {
  width: 100%; max-width: 560px; max-height: 100%;
  background: #000; border: 1px solid #22ff77;
  border-radius: 6px;
  display: flex; flex-direction: column;
  box-shadow: 0 0 24px rgba(34, 255, 119, 0.25);
}
.dev-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #22ff77;
  font-size: 0.8rem; letter-spacing: 1px;
}
.dev-x {
  background: none; border: 1px solid #22ff77; color: #22ff77;
  font-family: inherit; font-size: 0.75rem; padding: 2px 6px;
  cursor: pointer; border-radius: 3px;
}
.dev-scroll { overflow-y: auto; padding: 10px; }
.dev-sec {
  font-size: 0.7rem; letter-spacing: 2px; color: #0f9e4a;
  margin: 12px 0 6px; border-bottom: 1px dashed #0f5c2c; padding-bottom: 3px;
}
.dev-sec:first-child { margin-top: 0; }
.dev-sec em { color: #0a7a38; font-style: normal; letter-spacing: 0; }
.dev-env {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px 12px; font-size: 0.72rem;
}
.dev-kv { display: flex; justify-content: space-between; gap: 8px; }
.dev-kv span { color: #0f9e4a; }
.dev-kv b { color: #22ff77; font-weight: 600; text-align: right; }
.dev-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.dev-btn {
  background: #001a08; border: 1px solid #0f9e4a; color: #22ff77;
  font-family: inherit; font-size: 0.7rem;
  padding: 6px 9px; border-radius: 3px; cursor: pointer;
  flex: 0 1 auto;
}
.dev-btn:active { background: #22ff77; color: #000; }
.dev-note {
  margin-top: 12px; padding: 6px 8px;
  border: 1px dashed #0f5c2c; border-radius: 3px;
  font-size: 0.72rem; color: #b6ffcf; word-break: break-word;
}

/* ---------- Bottom nav clearance ----------------------------------------
   The audio bar is position:fixed in the bottom-right corner, and every
   screen is height-locked with overflow hidden, so anything that reaches
   the bottom of the viewport is both covered by the bar AND unreachable.
   That put the word-builder hints under the bar, ran the Word Echo panel
   off the bottom of a phone, and hid the week-complete "Next Week"
   button. One clearance value, applied wherever content stacks downward. */
:root { --nav-clear: 68px; }

.game-body { padding-bottom: var(--nav-clear); }
.week-overlay { padding-bottom: var(--nav-clear); }
.brews-over-overlay { padding-bottom: var(--nav-clear); }

/* Short screens: the panels have to give up some padding to fit. */
@media (max-height: 760px) {
  .echo-panel { gap: 0.7rem; padding: 14px 16px 16px; }
  .echo-play-btn { width: 62px; height: 62px; font-size: 1.6rem; }
  .echo-choice { padding: 0.62rem 1rem; font-size: 1.15rem; }
  .echo-choices { gap: 0.5rem; }
  .echo-prompt { font-size: 1rem; }
  .week-overlay { gap: 0.7rem; }
  .week-overlay-luma { width: 110px; height: 110px; }
  .week-overlay-title { font-size: 1.4rem; }
  .week-overlay-stars { font-size: 1.8rem; }
}
@media (max-height: 640px) {
  .echo-panel { gap: 0.5rem; padding: 10px 12px 12px; }
  .echo-play-btn { width: 52px; height: 52px; font-size: 1.3rem; }
  .echo-choice { padding: 0.5rem 0.8rem; font-size: 1.05rem; }
  .week-overlay-luma { width: 84px; height: 84px; }
  .week-overlay-code { transform: scale(0.9); }
}

/* The panorama centres its nodes, but a centred flex row that overflows
   pushes its first items to a NEGATIVE offset where they are clipped and
   cannot be scrolled back into view - the first machine simply vanished
   once the strip was wider than the screen. `safe center` falls back to
   flex-start exactly when that would happen. */
.lab-panorama { justify-content: safe center; }

/* An awakened machine in the panorama can be replayed - the Skip button
   can otherwise destroy an eight-line scene the player earned over five
   weeks, with no way to see it again. */
.machine-node.online {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.machine-node-replay {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(6, 16, 30, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.8);
  color: #4ade80;
  font-size: 7px;
  line-height: 13px;
  text-align: center;
  pointer-events: none;
}
.machine-node.online:hover,
.machine-node.online:focus-visible {
  transform: scale(1.08);
  outline: none;
}
.machine-node.online { transition: transform 0.15s ease; }

/* Countdown while tapping ⚙️ toward dev mode, so the taps are not silent. */
.dev-tap-hint {
  position: fixed;
  bottom: 4.6rem; right: 1rem;
  z-index: 5002;
  background: rgba(6, 20, 12, 0.92);
  border: 1px solid #22ff77;
  color: #22ff77;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  padding: 4px 9px;
  border-radius: 999px;
  pointer-events: none;
  animation: devHintIn 0.18s ease-out;
}
@keyframes devHintIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Title screen: bigger wordmark ---------------------------------
   Luma no longer stands in the middle of this screen, so the wordmark is
   the hero and can take the room she was using. */
.wordmark {
  max-width: 680px;
  width: 100%;
}
@media (max-height: 700px) {
  .wordmark { max-width: 520px; }
}

/* ---------- First-launch walkthrough --------------------------------------
   Luma in the bottom-left corner with a speech bubble, stepping a new
   reader through the four activities. */
/* A scrim behind the tour so the title panel reads as deliberately
   backgrounded rather than accidentally covered. */
#start-tour::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(4, 14, 26, 0.55);
  z-index: -1;
}
#start-tour {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 14px 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
#start-tour.is-visible { opacity: 1; transform: none; }
#start-tour.is-leaving { opacity: 0; transform: translateY(14px); }
#start-tour > * { pointer-events: auto; }

.tour-luma {
  width: clamp(88px, 18vw, 132px);
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
  order: -1;                 /* Luma sits left of her bubble */
  margin-bottom: -6px;       /* let her stand on the very bottom edge */
}

.tour-bubble {
  position: relative;
  max-width: 420px;
  background: #fffaf0;
  color: #14283c;
  border: 3px solid #14283c;
  border-radius: 18px;
  padding: 13px 15px 11px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 26px;
}
/* Tail pointing down-left toward Luma. */
.tour-bubble::before,
.tour-bubble::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  bottom: -20px;
  left: 22px;
}
.tour-bubble::before {
  border-width: 20px 15px 0 0;
  border-color: #14283c transparent transparent transparent;
}
.tour-bubble::after {
  bottom: -14px;
  border-width: 15px 11px 0 0;
  border-color: #fffaf0 transparent transparent transparent;
}
.tour-text {
  margin: 0 0 9px;
  font-size: clamp(0.86rem, 2.6vw, 1rem);
  font-weight: 700;
  line-height: 1.4;
}
.tour-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tour-dots { display: flex; gap: 5px; flex: 1; }
.tour-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(20,40,60,0.25);
}
.tour-dots i.on { background: #14283c; }
.tour-next {
  background: #ffd54a;
  color: #14283c;
  border: 2px solid #14283c;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 16px;
  cursor: pointer;
}
.tour-next:active { transform: translateY(1px); }
.tour-skip {
  position: absolute;
  top: -11px; right: 8px;
  background: #14283c;
  color: #cfe6f2;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
}
@media (max-width: 420px) {
  .tour-luma { width: 84px; }
  .tour-bubble { margin-bottom: 18px; }
}

/* ---------- Kill the mobile tap square -----------------------------------
   Mobile browsers paint a translucent grey rectangle over whatever you
   tap, and it ignores border-radius, so tapping a round Brews bubble
   flashed the square box it sits in. Suppress it everywhere interactive
   and keep a real focus ring for keyboard users, who still need one. */
button,
a,
[role="button"],
input,
label {
  -webkit-tap-highlight-color: transparent;
}
.brews-bubble {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.brews-bubble:focus { outline: none; }
.brews-bubble:focus-visible {
  outline: 3px solid rgba(127, 216, 245, 0.9);
  outline-offset: 2px;
}