/* hud.css — the game layer (hud.jsx): scene art behind the story, the portrait
   and level ring, item icons, the People panel, game toasts and the scene title
   card. Loads after styles.css + three-stage.css and only ADDS: it never names
   `.play-shell > *`, never puts transform/filter/backdrop-filter on .play-shell
   or .shell-body (contract SHELL-02 A4 — those would capture the phone drawer's
   position: fixed), and adds no scroller (A3). Frosting lives on the plates.

   Works over every palette: its own --hud-* tokens, art always behind a scrim. */

:root {
  --hud-glass: rgba(14, 12, 10, 0.62);
  --hud-glass-strong: rgba(12, 10, 9, 0.82);
  --hud-edge: rgba(214, 178, 110, 0.28);
  --hud-edge-strong: rgba(226, 190, 120, 0.55);
  --hud-gold: #d9b26a;
  --hud-gold-2: #f0d595;
  --hud-text: #f1e9d8;
  --hud-text-2: #c9bda5;
  --hud-good: #7fc28a;
  --hud-wary: #e0b45a;
  --hud-bad: #e06a5a;
  --hud-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --hud-radius: 14px;
}
:root[data-palette="parchment"] {
  --hud-glass: rgba(250, 243, 228, 0.78);
  --hud-glass-strong: rgba(250, 243, 228, 0.92);
  --hud-text: #2a2016;
  --hud-text-2: #5a4a36;
  --hud-edge: rgba(120, 90, 40, 0.3);
}

/* ------------------------------------------------------------------ *
 * 1. Scene art — a layer behind the whole play shell
 * ------------------------------------------------------------------ */
.hud-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #07080a;
}
.hud-scene-layer {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: 40% 50%;
  animation: hud-drift 60s ease-in-out infinite alternate, hud-fade-in 1.6s ease both;
  will-change: transform, opacity;
}
.hud-scene-layer.is-out { animation: hud-drift 60s ease-in-out infinite alternate, hud-fade-out 1.6s ease both; }
@keyframes hud-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
}
@keyframes hud-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hud-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* The scrim: art reads at the top-left, the story column is calm and dark. */
.hud-scene-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55) 100%);
}
:root[data-palette="parchment"] .hud-scene-scrim {
  background: linear-gradient(90deg, rgba(250,243,228,0) 0%, rgba(250,243,228,0.35) 60%, rgba(250,243,228,0.6) 100%);
}
.hud-scene-status {
  position: absolute;
  left: 20px;
  bottom: 120px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--hud-glass);
  border: 1px solid var(--hud-edge);
  color: var(--hud-text-2);
  font: italic 16px/1.2 'EB Garamond', Georgia, serif;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hud-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hud-gold);
  animation: hud-pulse 1.4s ease-in-out infinite;
}
@keyframes hud-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* The scene shows through: the shell's own ground goes away on the play screen,
   and the ambient candle layer (three-stage) dims so it doesn't fight the art. */
html[data-screen="play"] .play-shell { background: transparent; }
html[data-screen="play"] .shell-ambient { opacity: 0.35; }
html[data-screen="play"] body::before { opacity: 0.05; }

/* ------------------------------------------------------------------ *
 * 2. Plates over the art — header, story column, rail, dock
 * ------------------------------------------------------------------ */
html[data-screen="play"] .shell-hdr {
  background: linear-gradient(180deg, rgba(8,7,6,0.78), rgba(8,7,6,0.45));
  border-bottom: 1px solid var(--hud-edge);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
html[data-screen="play"] .shell-dock {
  background: linear-gradient(0deg, rgba(8,7,6,0.88), rgba(8,7,6,0.62));
  border-top: 1px solid var(--hud-edge);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* The story column. On a wide screen the page is dark glass set to the RIGHT of
   the reading column, so the scene stays visible on the left (Disco Elysium's
   column, BG3's world behind it). The aaa-preview "lit desk" sheet is the
   .shell-main::before plate; it becomes the glass. */
@media (min-width: 1100px) {
  html[data-screen="play"] .shell-main::before {
    font-size: var(--text-prose);
    left: auto !important;
    right: 20px !important;
    transform: none !important;
    margin: 0 !important;
    width: min(calc(var(--measure) + 2 * var(--space-7) + 40px), calc(100% - 40px)) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    border-left: 1px solid var(--hud-edge);
    border-right: 1px solid var(--hud-edge);
    background:
      radial-gradient(ellipse 80% 30% at 50% 0%, rgba(217, 178, 106, 0.08), transparent 80%),
      linear-gradient(180deg, rgba(12, 10, 9, 0.72), rgba(12, 10, 9, 0.82)) !important;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  html[data-screen="play"] .play-shell .feed {
    padding-left: max(var(--space-5), calc(100% - var(--measure) - 40px - var(--space-7))) !important;
    padding-right: calc(40px + var(--space-7)) !important;
    background-image: none !important;
  }
  html[data-palette="parchment"][data-screen="play"] .shell-main::before {
    background: linear-gradient(180deg, rgba(250, 243, 228, 0.86), rgba(244, 234, 212, 0.92)) !important;
  }
  /* The choice sheet rises inside the story column, as dark glass. */
  html[data-screen="play"] .actions-panel {
    left: auto !important;
    right: 20px !important;
    width: min(calc(var(--measure) + 2 * var(--space-7) + 40px), calc(100% - 40px));
    font-size: var(--text-prose);
    background: linear-gradient(180deg, rgba(20, 17, 14, 0.94), rgba(12, 10, 9, 0.97)) !important;
    border: 1px solid var(--hud-edge-strong);
    border-bottom: 0;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  html[data-palette="parchment"][data-screen="play"] .actions-panel { background: rgba(250, 243, 228, 0.97) !important; }
}
@media (min-width: 769px) {
  html[data-screen="play"] .side-pane {
    background: var(--hud-glass-strong);
    border-left: 1px solid var(--hud-edge);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* ------------------------------------------------------------------ *
 * 3. Character nameplate — portrait, level ring, name (over the art)
 * ------------------------------------------------------------------ */
.hud-portrait {
  position: fixed;
  z-index: 40;
  left: 24px;
  bottom: 118px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--hud-edge);
  border-radius: 60px;
  background: linear-gradient(90deg, rgba(10, 9, 8, 0.78), rgba(10, 9, 8, 0.5));
  box-shadow: var(--hud-shadow);
  color: var(--hud-text);
  cursor: pointer;
  text-align: left;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hud-portrait:hover { border-color: var(--hud-edge-strong); transform: translateY(-1px); }
.hud-portrait:focus-visible { outline: 2px solid var(--hud-gold-2); outline-offset: 3px; }
.hud-portrait-art { position: relative; display: inline-grid; }
.hud-nameplate { display: grid; gap: 2px; min-width: 0; max-width: 240px; }
.hud-nameplate-name { font: 600 21px/1.15 'Cinzel', Georgia, serif; color: var(--hud-gold-2); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-nameplate-sub { font: italic 17px/1.2 'EB Garamond', Georgia, serif; color: var(--hud-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-nameplate-up { font: 600 14px/1.2 system-ui, sans-serif; color: var(--hud-good); letter-spacing: 0.02em; }
.hud-portrait-frame {
  --pf-size: 64px;
  position: relative;
  width: var(--pf-size);
  height: var(--pf-size);
  border-radius: 50%;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #4a3a26, #1a140e 70%);
  box-shadow: 0 0 0 2px var(--hud-gold), 0 0 0 5px rgba(0,0,0,0.55), 0 0 0 6px var(--hud-edge-strong), var(--hud-shadow);
  flex: none;
}
.hud-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; animation: hud-fade-in 1.2s ease both; }
.hud-portrait-initials {
  font: 600 calc(var(--pf-size) * 0.36)/1 'Cinzel', Georgia, serif;
  color: var(--hud-gold-2);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.hud-portrait-frame.is-painting::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(240,213,149,0.55) 85%, transparent 100%);
  animation: hud-spin 2.4s linear infinite;
  mix-blend-mode: screen;
}
@keyframes hud-spin { to { transform: rotate(360deg); } }
.hud-level {
  position: absolute;
  right: -4px;
  bottom: -2px;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font: 700 16px/1 'Cinzel', Georgia, serif;
  color: #1a1209;
  background: linear-gradient(180deg, var(--hud-gold-2), var(--hud-gold));
  box-shadow: 0 0 0 2px rgba(0,0,0,0.65);
}
.hud-levelup-dot {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 16px/1 system-ui, sans-serif;
  color: #102010;
  background: var(--hud-good);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 14px rgba(127,194,138,0.8);
  animation: hud-pulse 1.6s ease-in-out infinite;
}
.hud-portrait.has-levelup { border-color: rgba(127,194,138,0.6); }
.hud-portrait.is-hit .hud-portrait-frame { animation: hud-hit 0.6s ease; }
.hud-portrait.is-heal .hud-portrait-frame { animation: hud-heal 0.9s ease; }
@keyframes hud-hit {
  0% { box-shadow: 0 0 0 2px var(--hud-bad), 0 0 0 5px rgba(0,0,0,0.55), 0 0 24px 6px rgba(224,106,90,0.9); transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
@keyframes hud-heal {
  40% { box-shadow: 0 0 0 2px var(--hud-good), 0 0 0 5px rgba(0,0,0,0.55), 0 0 26px 8px rgba(127,194,138,0.85); }
}
html[data-screen="play"] .shell-meter .m-fill { transition: width 0.7s cubic-bezier(.2,.8,.2,1); }

/* Where the left art area is too narrow for the nameplate, it shrinks to the
   portrait alone; on a phone it sits on the art banner. */
@media (max-width: 1599px) {
  .hud-nameplate { display: none; }
  .hud-portrait { padding: 6px; border-radius: 50%; }
}
@media (max-width: 1099px) {
  .hud-portrait { left: 16px; bottom: auto; top: calc(env(safe-area-inset-top) + 80px); }
  .hud-portrait .hud-portrait-frame { --pf-size: 56px !important; }
  .hud-level { min-width: 24px; height: 24px; font-size: 13px; }
}
/* The phone drawer and the open actions sheet own the screen. */
html[data-screen="play"]:has(.play-shell[data-drawer="open"]) .hud-portrait,
html[data-screen="play"]:has(.actions-panel.open) .hud-portrait { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ *
 * 4. Item icons in the Pack
 * ------------------------------------------------------------------ */
.hud-item-icon { flex: none; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }
.ledger-card-row:has(.ledger-card-icon) { display: flex; align-items: center; gap: 12px; }
.ledger-card-icon {
  width: 52px; height: 52px;
  padding: 2px;
  border-radius: 10px;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.08), rgba(0,0,0,0.25));
  box-shadow: inset 0 0 0 1px var(--hud-edge);
}
.ledger-card-row:has(.ledger-card-icon) .ledger-card-name { flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ *
 * 5. People
 * ------------------------------------------------------------------ */
.hud-people { display: grid; gap: 14px; padding: 6px 2px 18px; }
.hud-person {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-radius: var(--hud-radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hud-edge);
}
.hud-person .hud-portrait-frame { --pf-size: 72px; }
.hud-person-name { font: 600 19px/1.25 'Cinzel', Georgia, serif; color: var(--ink, var(--hud-text)); margin-bottom: 4px; }
.hud-person-note { margin: 6px 0 0; font-size: 17px; line-height: 1.45; color: var(--ink-2, var(--hud-text-2)); }
.hud-person-meta { margin: 6px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink-2, var(--hud-text-2)); }
.hud-person-meta strong { font-weight: 600; color: var(--gold, var(--hud-gold)); margin-right: 4px; }
.hud-disposition {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
}
.hud-disposition.is-good { color: var(--hud-good); }
.hud-disposition.is-wary { color: var(--hud-wary); }
.hud-disposition.is-bad { color: var(--hud-bad); }
.hud-disposition.is-neutral { color: var(--ink-2, var(--hud-text-2)); }
.hud-empty { padding: 24px 8px; font-size: 17px; font-style: italic; color: var(--ink-2, var(--hud-text-2)); }

/* ------------------------------------------------------------------ *
 * 6. Toasts
 * ------------------------------------------------------------------ */
.hud-toasts {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 60;
  display: grid;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}
.hud-toast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 16px 10px 10px;
  border-radius: var(--hud-radius);
  background: var(--hud-glass-strong);
  border: 1px solid var(--hud-edge-strong);
  box-shadow: var(--hud-shadow);
  color: var(--hud-text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: hud-toast-in 0.45s cubic-bezier(.2,.9,.25,1.2) both, hud-toast-out 0.5s ease 3.7s both;
}
@keyframes hud-toast-in { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes hud-toast-out { to { opacity: 0; transform: translateX(30px); } }
.hud-toast-glyph {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--hud-gold-2);
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.1), rgba(0,0,0,0.3));
  box-shadow: inset 0 0 0 1px var(--hud-edge);
}
.hud-toast-body { display: grid; gap: 2px; min-width: 0; }
.hud-toast-title { font: 600 18px/1.2 'Cinzel', Georgia, serif; color: var(--hud-gold-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-toast-detail { font-size: 15px; line-height: 1.3; color: var(--hud-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-toast--xp .hud-toast-title { font-size: 22px; }
.hud-toast--lost .hud-toast-title { color: var(--hud-text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.hud-toast--level { border-color: var(--hud-good); }
.hud-toast--level .hud-toast-title { color: var(--hud-good); font-size: 22px; }
@media (max-width: 768px) {
  .hud-toasts { top: calc(64px + env(safe-area-inset-top)); right: 50%; transform: translateX(50%); width: min(360px, calc(100vw - 24px)); }
  @keyframes hud-toast-in { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: none; } }
  @keyframes hud-toast-out { to { opacity: 0; transform: translateY(-10px); } }
}

/* ------------------------------------------------------------------ *
 * 7. Scene title card — a lower third
 * ------------------------------------------------------------------ */
.hud-titlecard {
  position: fixed;
  left: 0;
  right: 0;
  top: 32%;
  z-index: 55;
  display: grid;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
  text-align: center;
  animation: hud-card 4.2s ease both;
}
.hud-titlecard::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -40px; bottom: -40px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 40%, transparent 72%);
  z-index: -1;
}
.hud-titlecard-rule { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--hud-gold), transparent); }
.hud-titlecard-title {
  font: 600 clamp(30px, 4.6vw, 56px)/1.1 'Cinzel', Georgia, serif;
  letter-spacing: 0.06em;
  color: var(--hud-gold-2);
  text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.9);
  padding: 0 24px;
}
.hud-titlecard-world {
  font: italic 20px/1.2 'EB Garamond', Georgia, serif;
  color: var(--hud-text-2);
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
@keyframes hud-card {
  0% { opacity: 0; transform: translateY(14px); letter-spacing: 0.12em; }
  14% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ------------------------------------------------------------------ *
 * 8. Narrower screens: the art is a banner at the top and the story scrolls
 *    up into it, fading out before it reaches the picture (visual-novel feel).
 * ------------------------------------------------------------------ */
@media (max-width: 1099px) {
  html[data-screen="play"] .shell-main::before { background: linear-gradient(180deg, transparent 0, transparent 20vh, rgba(10,9,8,0.86) 30vh, rgba(10,9,8,0.92) 100%) !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html[data-screen="play"] .play-shell .feed {
    padding-top: 27vh !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 17vh, #000 27vh, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, transparent 17vh, #000 27vh, #000 calc(100% - 24px), transparent 100%);
  }
  .hud-scene-layer { inset: -2% -6% 50% -6%; background-position: 35% 60%; }
  .hud-scene-scrim { background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 26%, rgba(8,7,6,0.9) 40%, rgba(8,7,6,0.97) 100%); }
  .hud-scene-status { bottom: auto; top: calc(env(safe-area-inset-top) + 92px); left: 88px; font-size: 14px; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-scene-layer, .hud-scene-layer.is-out { animation: hud-fade-in 0.01s both; transform: none; }
  .hud-titlecard, .hud-toast { animation-duration: 0.01s; }
  .hud-portrait-frame.is-painting::after, .hud-dot, .hud-levelup-dot { animation: none; }
}

/* ------------------------------------------------------------------ *
 * 9. Front door — the title screen stands in the latest scene
 * ------------------------------------------------------------------ */
.hud-scene--menu { position: fixed; z-index: 0; }
.hud-scene--menu .hud-scene-scrim {
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,0,0,0.25), rgba(0,0,0,0.7) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.75) 100%);
}
.menu-screen .fd-folio-col { position: relative; z-index: 1; }
/* The candle stays as the ambient flourish but steps back behind the art. */
.menu-screen .fd-ambient { opacity: 0.55; }
.hud-thumb {
  position: relative;
  flex: none;
  width: 112px;
  height: 64px;
  border-radius: 10px;
  background-size: cover;
  background-position: 40% 55%;
  background-color: #14110d;
  box-shadow: inset 0 0 0 1px var(--hud-edge), 0 4px 12px rgba(0,0,0,0.45);
  margin-right: 14px;
}
.hud-thumb-portrait { position: absolute; right: -10px; bottom: -10px; }
.hud-thumb-portrait.hud-portrait-frame { box-shadow: 0 0 0 2px var(--hud-gold), 0 0 0 4px rgba(0,0,0,0.6); }
.save-row:has(.hud-thumb) .fd-entry-num { display: none; }
.save-row.fd-entry:has(.hud-thumb) { grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center; }
.save-row.fd-entry:has(.hud-thumb) > .hud-thumb { grid-column: 1; }
.save-row.fd-entry:has(.hud-thumb) > .fd-entry-main { grid-column: 2; }
.save-row.fd-entry:has(.hud-thumb) > .fd-entry-actions { grid-column: 3; }
.menu-screen .fd-entry { background: rgba(10, 9, 8, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 600px) {
  .hud-thumb { width: 72px; height: 54px; margin-right: 12px; }
  .hud-thumb-portrait { display: none; }
}

/* ------------------------------------------------------------------ *
 * 10. Settings rows (sound, art) and the sync banner
 * ------------------------------------------------------------------ */
.tw-slider { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; margin-top: 10px; font-size: 16px; }
.tw-slider input[type="range"] { width: 100%; accent-color: var(--hud-gold); min-height: 44px; }
.sync-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(640px, calc(100vw - 24px));
  padding: 10px 12px 10px 16px;
  border-radius: 12px;
  background: var(--hud-glass-strong);
  border: 1px solid rgba(224, 180, 90, 0.55);
  color: var(--hud-text);
  font-size: 16px;
  line-height: 1.35;
  box-shadow: var(--hud-shadow);
}
.sync-banner svg { flex: none; color: var(--hud-wary); }
.sync-banner span { flex: 1; min-width: 0; }
.sync-banner .fd-btn { flex: none; }
html[data-screen="play"] .sync-banner { bottom: auto; top: calc(env(safe-area-inset-top) + 76px); }