/* ==================================================
   frankie.co — interactive walking-F scene
   Palette: red #e54a45 / black #0a0a0a / white #fffcf7
   ================================================== */

:root {
  --red: #e54a45;
  --black: #0a0a0a;
  --white: #fffcf7;
  --paper: #fffcf7;
  --char-w: clamp(34px, 5.2vmin, 56px);
  --stage-w: min(72vmin, 520px);
  --audio-light: #ef746f;
  --audio-highlight: #ffd5cf;
  --border-hard: rgba(10,10,10,0.32);
}

body.dark-mode {
  --red: #1bb6ba;
  --black: #fffcf7;
  --white: #0a0a0a;
  --paper: #0a0a0a;
  --audio-light: rgba(27,182,186,.65);
  --audio-highlight: rgba(255,255,255,.65);
  --border-hard: rgba(255,252,247,0.24);
}
body.dark-mode::before {
  background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
}

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

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--black);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* Subtle paper grain — adds character without being heavy. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
  opacity: .8;
}

/* ==================================================
   TOPBAR
   ================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem;
  font-weight: 700;
  pointer-events: none; /* let stuff under be clickable, but children re-enable */
}
.topbar > * { pointer-events: auto; }

.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark { width: 28px; height: 28px; display: block; }
.brand-text { letter-spacing: .14em; font-size: .9rem; display: inline-flex; }
.brand-letter {
  display: inline-block;
  transition: transform .25s ease;
  will-change: transform;
}
/* Continuous wave on hover (desktop only — touch devices skip the effect). */
@media (hover: hover) {
  .brand:hover .brand-letter {
    animation: brand-wave 1.1s ease-in-out infinite;
    /* stagger each letter by 80ms so the bump travels left-to-right */
    animation-delay: calc(var(--i, 0) * 80ms);
  }
}
@keyframes brand-wave {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-5px); }
  70%      { transform: translateY(0); }
}

.email-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem; font-weight: 500;
  border-bottom: 1.5px solid transparent;
  transition: color .15s, border-color .15s;
}
.email-link:hover { color: var(--red); border-bottom-color: var(--red); }

/* ==================================================
   STAGE — big F + hotspots + character
   ================================================== */
.stage {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--stage-w);
  aspect-ratio: 100 / 160;
  z-index: 2;
}

.big-f { width: 100%; height: 100%; display: block; }
/* Two F renderings — inline polygon for light mode, white SVG file for dark.
   Stack them; toggle visibility based on body.dark-mode. */
.f-dark {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
  object-fit: contain;
  /* Anchor to the top of the stage so it lines up exactly with the
     inline polygon F (which renders at viewBox y=0). */
  object-position: 50% 0%;
  pointer-events: none;
}
body.dark-mode .f-light { display: none; }
body.dark-mode .f-dark { display: block; }

/* ---- Hotspots ---- */
.hotspot {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer; padding: 6px;
  font: inherit; color: var(--black);
  z-index: 4;
}
.hotspot:focus-visible { outline: 2px dashed var(--red); outline-offset: 4px; border-radius: 8px; }

.hotspot .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(229,74,69,.55);
  animation: pulse 2.2s ease-out infinite;
  transition: transform .2s ease;
}
.hotspot:hover .dot { transform: scale(1.25); }
.hotspot.active .dot {
  background: var(--white); border: 2px solid var(--red);
  animation: none; transform: scale(1.2);
}

.hotspot-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(229,74,69,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(229,74,69,0); }
  100% { box-shadow: 0 0 0 0   rgba(229,74,69,0); }
}

/* ---- Character ---- */
.character {
  position: absolute;
  left: var(--x); top: var(--y);
  /* feet sit at (x,y) — translate up by 100% so SVG bottom = y */
  transform: translate(-50%, -100%);
  width: var(--char-w);
  z-index: 5;
  pointer-events: auto;
  cursor: grab;
  /* default transition; script overrides per-mode */
  transition: left 600ms linear, top 500ms cubic-bezier(.55,0,.7,1);
}
.character.dragging { cursor: grabbing; }
.character.facing-left .char-svg-wrap { transform: scaleX(-1); }
.char-svg-wrap { display: block; transform-origin: 50% 100%; }
.char-svg { width: 100%; height: auto; display: block; }

/* Idle: slight bob */
.character.idle .char-svg { animation: idle-bob 2.4s ease-in-out infinite; }
@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2%); }
}

/* Walking: leg + arm swing + body bob */
.character.walking .char-svg { animation: walk-bob .42s linear infinite; }
.character.walking .leg-back  { animation: leg-back  .42s linear infinite; }
.character.walking .leg-front { animation: leg-front .42s linear infinite; }
.character.walking .arm-back  { animation: arm-back  .42s linear infinite; }
.character.walking .arm-front { animation: arm-front .42s linear infinite; }

@keyframes walk-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3%); }
}
@keyframes leg-back  { 0%, 100% { transform: rotate( 22deg); } 50% { transform: rotate(-22deg); } }
@keyframes leg-front { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate( 22deg); } }
@keyframes arm-back  { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate( 18deg); } }
@keyframes arm-front { 0%, 100% { transform: rotate( 18deg); } 50% { transform: rotate(-18deg); } }

/* Jumping/falling: tilt + no leg swing */
.character.jumping .leg, .character.jumping .arm { animation: none; }
.character.jumping .char-svg { transform: rotate(-6deg); }

.character.drop-pose .leg-back  { transform: rotate(8deg); }
.character.drop-pose .leg-front { transform: rotate(-8deg); }
.character.drop-pose .arm-back  { transform: rotate(0deg); }
.character.drop-pose .arm-front { transform: rotate(0deg); }

/* Dust puff on landing */
.dust {
  position: absolute; bottom: -2px; left: 50%;
  width: 60%; height: 18%;
  transform: translateX(-50%) scale(0);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.18), transparent 70%);
  pointer-events: none;
  opacity: 0;
}
.character.dusting .dust { animation: dust-puff .55s ease-out; }
@keyframes dust-puff {
  0%   { transform: translateX(-50%) scale(.4); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateX(-50%) scale(1.6); opacity: 0; }
}

/* ==================================================
   HINT
   ================================================== */
.hint {
  position: fixed; bottom: 4.2rem; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 500;
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--black);
  padding: .45rem .85rem;
  border-radius: 999px;
  z-index: 25;
  pointer-events: none;
  animation: hint-life 11s ease-in forwards;
}
@keyframes hint-life {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
}

/* ==================================================
   BOTTOM BAR
   ================================================== */
.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; color: var(--black);
  pointer-events: none;
}
.kbd-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  min-height: 1.7em;
  padding: 2px 6px; margin: 0 2px;
  border: none;
  border-radius: 5px;
  font-size: .78rem;
  background: var(--black); color: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
@media (max-width: 640px) {
  .kbd-hint { display: none; }
  .bottombar { justify-content: center; }
}

/* ==================================================
   PANEL — content drawer
   ================================================== */
.panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 3px solid var(--black);
  padding: 0.55rem 1.4rem 2rem;  /* top padding reduced — drag handle sits above content */
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.6,0,.2,1);
  z-index: 40;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 -10px 30px rgba(0,0,0,.06);
}
.panel.open { transform: translateY(0); }

.panel-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  background: var(--black);
  color: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 50%;
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.panel-close:hover {
  background: var(--red);
  color: #fffcf7;
  border-color: var(--red);
}

.panel-content { max-width: 56ch; }

.kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: .9rem;
}

.panel-title {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.panel-title .accent { color: var(--red); }

.panel-content p {
  font-size: 1rem; line-height: 1.55;
  color: var(--black);
  margin-bottom: .9rem;
}
.panel-content p strong { font-weight: 700; }
.panel-content p a { color: var(--red); border-bottom: 1.5px solid var(--red); }

.panel-sub {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  /* signature accent — red in light mode, teal in dark mode (via var swap) */
  color: var(--red);
  margin: 1.4rem 0 .6rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--red);
}

.client-list {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1.2rem;
}
.client-list li {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem; font-weight: 500;
  padding: .35rem .65rem;
  border: 1px solid var(--black);
  border-radius: 4px;
  background: var(--white);
}

/* ==================================================
   BUTTONS — unified system
   --------------------------------------------------
   Primary filled: var(--black) bg + var(--white) text + 1.5px var(--black) border.
     Light mode → dark pill. Dark mode (vars swap) → light pill.
   Secondary outlined: transparent bg + var(--black) text + 1.5px var(--black) border.
     Light mode → dark outline pill. Dark mode → light outline pill.
   Hover: every interactive button shifts to red (teal in dark) with literal
     light text (#fffcf7), for one consistent accent treatment site-wide.
   ================================================== */
.cta {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  padding: .8rem 1.2rem;
  font-weight: 700;
  font-size: .92rem;
  border: 1.5px solid var(--black);
  border-radius: 999px;
  letter-spacing: .02em;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.cta:hover {
  background: var(--red);
  color: #fffcf7;
  border-color: var(--red);
  transform: translateY(-1px);
}

.big-email {
  display: block;
  font-size: clamp(1.15rem, 3.2vw, 1.7rem);
  font-weight: 700;
  color: var(--black);
  border-bottom: 2.5px solid var(--red);
  padding-bottom: .15rem;
  margin-bottom: 1.4rem;
  word-break: break-all;
}
.big-email:hover { color: var(--red); }

.socials { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.socials a {
  display: inline-block;
  padding: .5rem .85rem;
  background: var(--black);
  color: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.socials a:hover {
  background: var(--red);
  color: #fffcf7;
  border-color: var(--red);
  transform: translateY(-1px);
}

/* Mobile drag-handle pill — gives users the visual cue to swipe down */
@media (max-width: 879px) {
  .panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-hard);
    border-radius: 2px;
    margin: 0 auto 1.1rem;
    flex-shrink: 0;
  }
}

/* Desktop: panel becomes a side drawer */
@media (min-width: 880px) {
  .panel {
    bottom: 0; top: 0; right: 0; left: auto;
    width: 420px; max-height: 100vh; height: 100%;
    border-top: 0; border-left: 3px solid var(--black);
    transform: translateX(101%);
    padding: 4rem 2rem 2rem;
    box-shadow: -10px 0 30px rgba(0,0,0,.06);
  }
  .panel.open { transform: translateX(0); }
  .panel-close { top: 16px; right: 16px; }

  /* shift stage left when panel open so F isn't covered */
  .panel.open ~ main.stage,
  body:has(.panel.open) .stage { transform: translate(calc(-50% - 210px), -50%); }
  .stage { transition: transform .5s cubic-bezier(.6,0,.2,1); }
}

/* ==================================================
   ACCESSIBILITY
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  .character, .panel, .stage { transition: none !important; }
  .hotspot .dot { animation: none !important; }
  .character.idle .char-svg,
  .character.walking .char-svg,
  .character.walking .leg, .character.walking .arm { animation: none !important; }
  .hint { animation: none; opacity: 1; }
}

/* Hide hint immediately if user already interacted */
.user-interacted .hint { display: none; }

/* ==================================================
   AUDIO BARS
   ================================================== */
.audio-bars {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(92px, 17vh, 160px);
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, .36vw, 5px);
  padding: 0 clamp(12px, 2vw, 30px);
  z-index: 3;
  pointer-events: none;
  opacity: .92;
}

.audio-bar {
  flex: 1 1 0;
  min-width: 2px;
  height: calc(var(--level, .18) * 100%);
  background: linear-gradient(180deg, var(--red) 0%, var(--audio-light) 56%, var(--audio-highlight) 100%);
  border-radius: 2px 2px 0 0;
  transform-origin: 50% 100%;
  transition: height 90ms linear;
}

/* ==================================================
   DARK MODE
   --------------------------------------------------
   Variables flip in dark mode (--white = dark surface,
   --black = light text), so most components Just Work
   from the base rules. Below we only override the
   things that actually need to change in dark mode:
     - red → teal accent
     - element-specific touch-ups
   ================================================== */

/* Hotspot label stays light text on its colored badge in both modes */
body.dark-mode .hotspot-label { color: #fffcf7; }

/* Pulse ring uses teal in dark mode */
body.dark-mode .hotspot .dot {
  box-shadow: 0 0 0 0 rgba(27,182,186,.55);
}
@keyframes pulse-dark {
  0%   { box-shadow: 0 0 0 0   rgba(27,182,186,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(27,182,186,0); }
  100% { box-shadow: 0 0 0 0   rgba(27,182,186,0); }
}
body.dark-mode .hotspot .dot { animation-name: pulse-dark; }

/* Character: flip the leg + shoe colors so they remain visible. */
body.dark-mode .char-svg .hoodie,
body.dark-mode .char-svg .arm-shape,
body.dark-mode .char-svg .hood { fill: var(--red); }
body.dark-mode .char-svg .face { fill: var(--white); }
body.dark-mode .char-svg .eye  { fill: var(--black); }
body.dark-mode .char-svg .shadow { fill: var(--white); opacity: .18; }
body.dark-mode .char-svg .leg rect:first-child { fill: var(--black); }
body.dark-mode .char-svg .leg rect:last-child  { fill: var(--white); }

/* Slightly brighter shadow under primary buttons in dark mode so the
   light pill still has a sense of weight against the dark page. */
body.dark-mode .cta,
body.dark-mode .panel-close,
body.dark-mode .track-button,
body.dark-mode .sound-toggle {
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
body.dark-mode .theme-toggle .theme-icon {
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}

.audio-controls {
  position: fixed;
  right: clamp(12px, 1.7vw, 24px);
  bottom: clamp(12px, 1.7vw, 22px);
  /* Above the panel (z-index: 40) so it's still tappable when content is open. */
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  /* Match the panel's transition so they slide in unison. */
  transition: right .55s cubic-bezier(.6,0,.2,1),
              bottom .55s cubic-bezier(.6,0,.2,1);
}

/* Desktop: panel slides in from the right (420px wide). Tuck the audio
   controls just outside the panel's left edge so they remain accessible
   and visually paired with the panel as it expands. */
@media (min-width: 880px) {
  body.panel-open .audio-controls,
  body:has(.panel.open) .audio-controls {
    right: calc(420px + clamp(12px, 1.7vw, 24px));
  }
}

/* Mobile / tablet: panel slides up from the bottom. Its actual height
   varies by section (max-height is 70vh, but content is often shorter),
   so script.js writes the measured height to --panel-h on body. We park
   the audio controls 1rem above that — never higher, never covered. */
@media (max-width: 879px) {
  body.panel-open .audio-controls,
  body:has(.panel.open) .audio-controls {
    bottom: calc(var(--panel-h, 70vh) + 1rem);
  }
}
.audio-control-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Audio buttons (prev / sound / next) share the primary-button system. */
.track-button,
.sound-toggle {
  background: var(--black);
  color: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  transition: background .15s, color .15s, border-color .15s, transform .25s ease;
}
.track-button {
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  font-size: 1.05rem;
}
.sound-toggle {
  padding: .55rem .85rem;
  font-size: .72rem;
  letter-spacing: .03em;
}
.sound-toggle:hover,
.track-button:hover,
.sound-toggle[aria-pressed="true"] {
  background: var(--red);
  color: #fffcf7;
  border-color: var(--red);
}
.sound-toggle:active,
.track-button:active {
  transform: translateY(1px);
}
.sound-toggle:focus-visible,
.track-button:focus-visible {
  outline: 2px dashed var(--red);
  outline-offset: 4px;
}

/* ==================================================
   THEME TOGGLE (top-right of header)
   --------------------------------------------------
   Square icon box + DAY/NIGHT label. Icon and label
   swap automatically based on body.dark-mode via
   pseudo-element content.
   ================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  /* Match the panel's transition timing so the toggle slides in unison
     with the panel (and the audio controls) on desktop. */
  transition: color .15s, transform .55s cubic-bezier(.6,0,.2,1);
}

/* Desktop only: when the side panel opens (420px wide from the right),
   slide the theme toggle left by the panel's width so it sits just
   outside the panel's edge instead of being covered. Mobile leaves the
   toggle in place — the panel slides up from the bottom there. */
@media (min-width: 880px) {
  body.panel-open .theme-toggle,
  body:has(.panel.open) .theme-toggle {
    transform: translateX(-420px);
  }
}
.theme-toggle .theme-icon {
  /* Box that holds the symbol — flex centers it in both axes. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--black);
  color: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 6px;
  /* Force monospace metrics so ◨ and ◧ render at consistent glyph size
     and the box's flex centering lands the symbol exactly in the middle. */
  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.theme-toggle .theme-label {
  /* Label sits to the LEFT of the icon (icon stays anchored in the corner).
     Reserve a fixed slot just wide enough for the longer word ('NIGHT') so
     the button width never changes between modes — icon never shifts.
     Right-align the text so the trailing letter of DAY (Y) and NIGHT (T)
     end at the same x-coordinate, just before the gap to the icon. */
  display: inline-block;
  min-width: 3.6em;
  text-align: right;
  text-transform: uppercase;
}
.theme-icon::before { content: '◐'; }
.theme-label::before { content: 'DAY'; }
body.dark-mode .theme-icon::before { content: '◑'; }
body.dark-mode .theme-label::before { content: 'NIGHT'; }

.theme-toggle:hover { color: var(--red); }
.theme-toggle:hover .theme-icon {
  background: var(--red);
  color: #fffcf7;
  border-color: var(--red);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px dashed var(--red);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .audio-bars {
    height: clamp(70px, 13vh, 118px);
    gap: 2px;
    padding-inline: 8px;
  }
  .theme-toggle {
    font-size: .7rem;
    gap: .4rem;
  }
  .theme-toggle .theme-icon {
    width: 30px;
    height: 30px;
    font-size: 1.05rem;
  }
  .track-button {
    min-width: 2.3rem;
    min-height: 2.3rem;
    font-size: .95rem;
  }
  .sound-toggle {
    font-size: .68rem;
    padding: .48rem .72rem;
  }
}

/* ==================================================
   OVERVIEW OVERLAY — full-screen seamless takeover
   --------------------------------------------------
   Mirrors the panel's slide direction so the expand
   feels like the panel physically growing to fill
   the viewport. Mobile: panel slides up → overlay
   slides up. Desktop: panel slides in from right →
   overlay slides in from right.
   ================================================== */
#overview-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;          /* above panel (40) and audio (50), below nothing */
  pointer-events: none;

  /* Mobile default — slide from below (matches panel's slide-up) */
  transform: translateY(calc(100% + 3px));
  transition: transform .58s cubic-bezier(.6,0,.2,1);
  will-change: transform;
}

/* Desktop: slide from right (matches panel's slide-in-from-right) */
@media (min-width: 880px) {
  #overview-overlay {
    transform: translateX(calc(100% + 3px));
  }
}

#overview-overlay.open {
  transform: translate(0, 0);
  pointer-events: all;
}

#overview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* ==================================================
   EXPAND BUTTON — "+ Full overview" in the hi panel
   ================================================== */
.overview-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.1rem;
  padding: .52rem .9rem .52rem 1rem;
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.overview-expand-btn:hover {
  background: var(--red);
  color: #fffcf7;
  border-color: var(--red);
  transform: translateY(-1px);
}

.expand-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.overview-expand-btn:hover .expand-plus {
  background: rgba(255,255,255,.22);
  color: #fffcf7;
  transform: rotate(45deg);
}

/* ==================================================
   GAME OVERLAY — full-screen canvas runner
   --------------------------------------------------
   z-index 90: above panel (40) and audio controls (50),
   below overview overlay (450).
   ================================================== */
#game-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.38s ease;
  /* Prevent double-tap zoom, text selection, and iOS overscroll */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#game-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;   /* block all browser touch gestures on the canvas */
}

/* Phaser game iframe — fills the overlay */
#game-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  touch-action: none;
}

/* Close button — top-left, compact */
.game-close-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  /* Visual size — half of the original */
  width: 18px;
  height: 18px;
  /* Padding keeps the tap target comfortable on touch */
  padding: 8px;
  box-sizing: content-box;
  background: rgba(10, 10, 10, 0.72);
  color: #fffcf7;
  border: 1px solid rgba(255, 252, 247, 0.28);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 91;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.game-close-btn:hover,
.game-close-btn:active {
  background: #e54a45;
  border-color: #e54a45;
}
body.dark-mode .game-close-btn:hover,
body.dark-mode .game-close-btn:active {
  background: #1bb6ba;
  border-color: #1bb6ba;
}

/* When game is open: kill body overscroll, raise audio controls,
   hide topbar + bottombar for full immersion.
   Also nuke text selection on every descendant so mobile taps
   never trigger the browser selection UI or copy/paste menu. */
body.game-open {
  overscroll-behavior: none;
}
body.game-open,
body.game-open * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}
body.game-open .audio-controls {
  z-index: 95;
  /* Remove panel-driven offset — game always takes full screen */
  right: clamp(12px, 1.7vw, 24px) !important;
  bottom: clamp(12px, 1.7vw, 22px) !important;
}
body.game-open .topbar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.game-open .bottombar {
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.game-open .hint {
  display: none;
}