/* Is It Raining on Trump? v3 */

@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
}

:root {
  --amber: #ffb020;
  --rain-blue: #7dd3fc;
  --panel: #10141d;
  --panel-2: #181e2a;
  --panel-3: #2a3242;
  --live: #5ee39a;
  --searching: #f5b74a;
  --muted: #9aa6b8;
  --soft: #c3cbd8;
  /* iOS 27: installed apps with a translucent status bar get a system blur
     over the top ~65 px. The status-bar style is frozen at install, so instead
     of changing it, every screen and overlay starts 28 px below the inset. */
  --top-gap: 0px;
  --safe-top: calc(env(safe-area-inset-top) + var(--top-gap));
  --safe-bottom: env(safe-area-inset-bottom);
}
@media (display-mode: standalone) and (orientation: portrait) {
  /* min(): 0 when there is no top inset (env() * 100 is 0 or huge) */
  :root { --top-gap: min(28px, calc(env(safe-area-inset-top) * 100)); }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* iOS installed app with a translucent status bar: the page starts under the
   status bar but the viewport is measured without it, so 100% stops one top
   inset short of the bottom. Extend by that inset (v2 did the same). */
html { height: calc(100% + env(safe-area-inset-top)); }
body {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  color: #fff;
  background: transparent;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
a { color: #ffd27a; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rain-blue); outline-offset: 2px; }

/* ── Sky ─────────────────────────────────────────────────────────────── */
/* Full screen: viewport + the top inset the installed app leaves out (see html) */
.sky { position: fixed; top: 0; left: 0; right: 0; height: max(100lvh, calc(100% + env(safe-area-inset-top))); overflow: hidden; pointer-events: none; transition: background 1s; }
/* Whatever the sky layer doesn't cover (that strip, overscroll) shows the root
   background: paint it in the current sky's bottom colour so it continues the
   gradient instead of showing a dark band. */
html { background: #25305a; transition: background-color 1s; }
html:has(.sky-day) { background: #bfe2ff; }
html:has(.sky-day-wet) { background: #9aa8b6; }
html:has(.sky-dusk) { background: #e9895e; }
html:has(.sky-dusk-wet) { background: #7d5d63; }
html:has(.sky-night) { background: #25305a; }
html:has(.sky-night-wet) { background: #18202f; }
html:has(.sky-fog) { background: #6e737c; }
.sky-day { background: linear-gradient(180deg, #1f6fd1 0%, #5aa8f0 55%, #bfe2ff 100%); }
.sky-day-wet { background: linear-gradient(180deg, #465568 0%, #6d7d90 55%, #9aa8b6 100%); }
.sky-dusk { background: linear-gradient(180deg, #221a46 0%, #7b3f74 50%, #e9895e 100%); }
.sky-dusk-wet { background: linear-gradient(180deg, #1c1a2e 0%, #46384f 55%, #7d5d63 100%); }
.sky-night { background: linear-gradient(180deg, #060a1c 0%, #121a3d 60%, #25305a 100%); }
.sky-night-wet { background: linear-gradient(180deg, #030409 0%, #0b111e 55%, #18202f 100%); }
.sky-fog { background: linear-gradient(180deg, #2c3038 0%, #4a4f59 55%, #6e737c 100%); }

/* Full moon (v2 look). It sits in .moon-slot, the flexible space between the
   top bar and the question, and scales to it: it can't overlap text. */
.moon-slot { flex: 3 1 0; min-height: 0; position: relative; container-type: size; }
.moon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: min(100px, 70cqh); aspect-ratio: 1; }
@container (max-height: 56px) { .moon { display: none; } }
.moon-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,240,.35) 0%, rgba(255,255,220,.18) 40%, transparent 70%); }
.moon-face {
  position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbfbf0 0%, #ecebdc 55%, #d6d5c2 100%);
  box-shadow: 0 0 30px 6px rgba(255,255,230,.35), inset -6px -8px 14px rgba(150,150,130,.35);
}
.moon-face i { position: absolute; border-radius: 50%; background: rgba(170,170,150,.35); }
.moon-face i:nth-child(1) { width: 18%; height: 18%; top: 22%; left: 28%; }
.moon-face i:nth-child(2) { width: 26%; height: 26%; top: 48%; left: 52%; }
.moon-face i:nth-child(3) { width: 12%; height: 12%; top: 64%; left: 24%; }
.clouds i { position: absolute; border-radius: 50%; filter: blur(18px); }
.clouds i:nth-child(1) { top: -60px; left: -60px; width: 300px; height: 170px; background: rgba(8,10,16,.55); }
.clouds i:nth-child(2) { top: -40px; right: -80px; width: 320px; height: 190px; background: rgba(12,14,22,.6); }
.clouds i:nth-child(3) { top: 60px; left: 25%; width: 260px; height: 120px; background: rgba(20,24,34,.4); }

.stars { position: absolute; inset: 0; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: twinkle 3s linear infinite; }
.stars i.large { width: 3px; height: 3px; box-shadow: 0 0 6px 1px rgba(255,255,255,.6); }
.stars i.bright { width: 4px; height: 4px; box-shadow: 0 0 8px 2px rgba(255,255,255,.8); }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }

/* Rain and snow fall through the full (large) viewport height */
.particles { position: absolute; inset: 0; }
.wind-calm { transform: none; }
.wind-breezy { transform: rotate(9deg) scale(1.1); }
.wind-gusty { transform: rotate(19deg) scale(1.25); }

.rain { position: absolute; inset: -80px -70px; }
.rain i { position: absolute; top: -100px; width: 1.5px; height: 58px; border-radius: 1px; background: linear-gradient(rgba(200,222,255,0), rgba(200,222,255,.55)); animation: fall 1s linear infinite; }
.rain.near i { width: 2px; height: 96px; background: linear-gradient(rgba(220,235,255,0), rgba(220,235,255,.8)); }
@keyframes fall { to { transform: translateY(calc(100lvh + 260px)); } }
.rain i:nth-child(11n+1){left:3%}.rain i:nth-child(11n+2){left:12%}.rain i:nth-child(11n+3){left:21%}.rain i:nth-child(11n+4){left:30%}.rain i:nth-child(11n+5){left:39%}.rain i:nth-child(11n+6){left:48%}.rain i:nth-child(11n+7){left:57%}.rain i:nth-child(11n+8){left:66%}.rain i:nth-child(11n+9){left:75%}.rain i:nth-child(11n+10){left:84%}.rain i:nth-child(11n){left:93%}
.rain i:nth-child(7n+1){margin-left:1.3%;animation-delay:-.05s}.rain i:nth-child(7n+2){margin-left:4.1%;animation-delay:-.41s}.rain i:nth-child(7n+3){margin-left:2.2%;animation-delay:-.77s}.rain i:nth-child(7n+4){margin-left:6.4%;animation-delay:-.23s}.rain i:nth-child(7n+5){margin-left:.4%;animation-delay:-.59s}.rain i:nth-child(7n+6){margin-left:5.3%;animation-delay:-.95s}.rain i:nth-child(7n){margin-left:3.2%;animation-delay:-.14s}
.rain i:nth-child(5n+1){animation-duration:.82s}.rain i:nth-child(5n+2){animation-duration:.95s}.rain i:nth-child(5n+3){animation-duration:1.08s}.rain i:nth-child(5n+4){animation-duration:.88s}.rain i:nth-child(5n){animation-duration:1.15s}
.rain.near i:nth-child(5n+1){animation-duration:.52s}.rain.near i:nth-child(5n+2){animation-duration:.6s}.rain.near i:nth-child(5n+3){animation-duration:.66s}.rain.near i:nth-child(5n+4){animation-duration:.57s}.rain.near i:nth-child(5n){animation-duration:.7s}

.snow { position: absolute; inset: -40px; }
.snow i { position: absolute; top: -24px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .85; animation: flake 9s linear infinite; }
@keyframes flake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(14px, calc(25lvh + 25px)); }
  50% { transform: translate(-8px, calc(50lvh + 50px)); }
  75% { transform: translate(12px, calc(75lvh + 75px)); }
  100% { transform: translate(-4px, calc(100lvh + 100px)); }
}
.snow i:nth-child(13n+1){left:2%}.snow i:nth-child(13n+2){left:10%}.snow i:nth-child(13n+3){left:17%}.snow i:nth-child(13n+4){left:25%}.snow i:nth-child(13n+5){left:33%}.snow i:nth-child(13n+6){left:40%}.snow i:nth-child(13n+7){left:48%}.snow i:nth-child(13n+8){left:56%}.snow i:nth-child(13n+9){left:63%}.snow i:nth-child(13n+10){left:71%}.snow i:nth-child(13n+11){left:79%}.snow i:nth-child(13n+12){left:87%}.snow i:nth-child(13n){left:95%}
.snow i:nth-child(9n+1){animation-delay:-.4s}.snow i:nth-child(9n+2){animation-delay:-4.9s}.snow i:nth-child(9n+3){animation-delay:-2.2s}.snow i:nth-child(9n+4){animation-delay:-7.3s}.snow i:nth-child(9n+5){animation-delay:-1.1s}.snow i:nth-child(9n+6){animation-delay:-5.8s}.snow i:nth-child(9n+7){animation-delay:-3.4s}.snow i:nth-child(9n+8){animation-delay:-8.2s}.snow i:nth-child(9n){animation-delay:-6.5s}
.snow i:nth-child(3n+1){width:4px;height:4px;opacity:.6;animation-duration:12s}.snow i:nth-child(3n+2){width:7px;height:7px;animation-duration:8s}.snow i:nth-child(3n){width:5px;height:5px;animation-duration:10s}

.flash { position: absolute; inset: 0; background: #dbe6ff; opacity: 0; animation: flash 7s infinite; }
.bolt { position: absolute; top: calc(var(--safe-top) + 50px); right: 46px; opacity: 0; animation: flash 7s infinite; filter: drop-shadow(0 0 14px rgba(200,220,255,.9)); }
.storm-severe .flash, .storm-severe .bolt { animation-duration: 3.6s; }
@keyframes flash { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .6; } 88.5% { opacity: .08; } 90% { opacity: .45; } 92.5% { opacity: 0; } }

.fog i { position: absolute; left: -120px; right: -120px; border-radius: 50%; filter: blur(30px); animation: drift 18s ease-in-out infinite alternate; }
.fog i:nth-child(1) { top: 17%; height: 160px; background: rgba(200,205,214,.22); }
.fog i:nth-child(2) { top: 50%; height: 200px; background: rgba(210,214,222,.18); animation-delay: -6s; }
.fog i:nth-child(3) { bottom: 5%; height: 180px; background: rgba(220,224,230,.2); animation-delay: -11s; }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }

.flight { position: absolute; top: 72%; left: 0; width: 0; height: 0; transform: rotate(-7deg); transform-origin: 0 0; }
.mover { position: absolute; top: 0; left: 0; animation: cross 24s linear infinite; }
@keyframes cross { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 230px)); } }
.contrail { position: absolute; top: -1px; right: 100px; width: 420px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6)); }
.plane { position: absolute; top: -22px; left: -108px; }

@media (prefers-reduced-motion: reduce) {
  .rain i, .snow i, .stars i, .fog i, .mover, .flash, .bolt { animation: none; }
  .flash, .bolt { opacity: 0; }
  .particles { display: none; }
  .mover { transform: translateX(60vw); }
}

/* ── Main screen ─────────────────────────────────────────────────────── */
.screen {
  position: relative;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: max(12px, var(--safe-top)) 20px max(20px, calc(var(--safe-bottom) + 12px));
  display: flex;
  flex-direction: column;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.status-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--muted); }
#statusText { overflow: hidden; text-overflow: ellipsis; }
.status[data-tone="live"] .status-dot { background: var(--live); }
.status[data-tone="searching"] .status-dot { background: var(--searching); }
.status[data-tone="offline"] .status-dot { background: #f87171; }

.topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.round-btn {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(8,12,22,.35); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}
.round-btn-lg { width: 52px; height: 52px; border-radius: 26px; background: rgba(8,12,22,.45); }
.round-btn-flat { border: none; background: rgba(255,255,255,.08); }

.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.answer {
  margin: 4px 0 0;
  font-family: "Bricolage Grotesque", "Inter Tight", sans-serif; font-weight: 800;
  font-size: clamp(104px, 38vw, 168px); line-height: .85; letter-spacing: -.04em;
  text-shadow: 0 6px 40px rgba(0,0,0,.35);
}
.subline { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; max-width: 320px; color: rgba(255,255,255,.95); text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 16px; width: 100%; }
.readings:empty { display: none; }
.reading { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 16px; background: rgba(6,9,18,.5); border: 1px solid rgba(255,255,255,.14); }
button.reading { font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
button.reading:active { background: rgba(125,211,252,.18); border-color: var(--rain-blue); }
.reading-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.reading-value { font-size: 18px; font-weight: 700; margin-top: 2px; white-space: nowrap; }

.spacer { flex: 2 1 0; min-height: 0; }
.bottom { padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.location-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left;
  border-radius: 20px; background: rgba(6,9,18,.72); border: 1px solid rgba(255,255,255,.14); cursor: pointer;
}
.location-card[data-state="unknown"] { border-style: dashed; border-color: rgba(255,255,255,.3); }
.location-card:disabled { cursor: default; color: inherit; }
.location-card:disabled .chevron { display: none; }
.location-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.location-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.location-title { font-size: 17px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.location-meta { font-size: 13px; color: rgba(255,255,255,.78); }
.location-card[data-stale="true"] .location-meta { color: var(--searching); }
.chevron { color: rgba(255,255,255,.7); flex-shrink: 0; }

.actions { display: flex; gap: 10px; }
.primary-btn {
  flex-grow: 1; min-height: 52px; padding: 0 18px; border-radius: 26px; border: none;
  background: var(--amber); color: #1d1300; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.primary-btn[data-on="true"] { background: rgba(8,12,22,.55); color: #fff; border: 1px solid rgba(255,255,255,.22); }

/* ── Details sheet ───────────────────────────────────────────────────── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(4,6,12,.55); z-index: 20; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-width: 560px; margin: 0 auto;
  max-height: calc(100dvh - var(--safe-top) - 12px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px max(28px, calc(var(--safe-bottom) + 16px));
  border-radius: 28px 28px 0 0; background: var(--panel); border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 14px;
}
/* Slide up on open, down on close (dialog.js adds .closing, hides at the end) */
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.sheet:not([hidden]) { animation: sheet-in .32s cubic-bezier(.2,.8,.2,1); }
.sheet.closing { animation: sheet-out .24s ease-in forwards; }
.sheet-backdrop:not([hidden]) { animation: fade-in .25s ease; }
.sheet-backdrop.closing { animation: fade-out .24s ease forwards; }
.popup:not([hidden]) { animation: fade-in .2s ease; }
.popup:not([hidden]) .popup-card { animation: sheet-in .3s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.closing, .sheet-backdrop, .sheet-backdrop.closing, .popup, .popup .popup-card { animation: none !important; }
}
.sheet-handle { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.15; outline: none; }
.sheet-sub { margin: 4px 0 0; font-size: 14px; color: var(--soft); }
.eyebrow-muted { font-size: 12px; letter-spacing: .14em; color: var(--muted); text-shadow: none; }
.panel { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--panel-2); }
.panel-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--soft); }
.panel-row strong { color: #fff; }
.bar { height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--amber); width: 0; }
.panel-note { margin: 0; font-size: 13px; color: var(--muted); }
.timeline { list-style: none; margin: 10px 0 0; padding: 0; }
.timeline li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.timeline li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin: 5px 2px 0; flex-shrink: 0; background: var(--rain-blue); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 19px; bottom: 0; width: 2px; background: var(--panel-3); }
.timeline li[data-current="true"]::before { background: var(--amber); }
.timeline-title { font-size: 15px; font-weight: 600; display: block; }
.timeline-meta { font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.link-row { display: flex; gap: 8px; }
.link-btn { flex: 1 1 0; min-height: 44px; border-radius: 14px; background: var(--panel-2); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.link-btn:not([href]) { opacity: .4; pointer-events: none; }
.units { border: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.units legend { float: left; padding: 0; font-size: 16px; }
.segmented { display: flex; padding: 3px; border-radius: 12px; background: var(--panel-2); gap: 2px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { min-height: 38px; padding: 0 12px; border-radius: 9px; font-size: 14px; color: var(--soft); display: flex; align-items: center; cursor: pointer; }
.segmented input:checked + span { background: var(--panel-3); color: #fff; font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--rain-blue); }
.notify-prefs { display: flex; flex-direction: column; gap: 4px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 16px; }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: #3a4252; position: relative; margin: 0; cursor: pointer; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch:checked { background: var(--amber); }
.switch:checked::after { left: 23px; }
.switch:disabled { opacity: .4; }
.text-btn { min-height: 44px; padding: 0 12px; border: none; background: none; color: var(--rain-blue); font-size: 15px; font-weight: 600; cursor: pointer; }
.text-btn-danger { color: #f87171; align-self: flex-start; padding-left: 0; }
.confirm-row { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.confirm-row span { flex-grow: 1; }

/* ── Popups and toast ────────────────────────────────────────────────── */
.popup { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: max(20px, var(--safe-top)) 20px 20px; background: rgba(4,6,12,.6); }
.popup-card { width: 100%; max-width: 360px; padding: 24px; border-radius: 24px; background: var(--panel); border: 1px solid rgba(255,255,255,.1); }
.popup-card h2 { margin: 0 0 8px; font-size: 22px; }
.popup-card p, .steps { margin: 0 0 16px; color: var(--soft); font-size: 15px; line-height: 1.45; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 6px; }
.popup-actions { display: flex; flex-direction: column; gap: 4px; }
.toast {
  /* Above the location card and buttons, so it never covers a control */
  position: fixed; left: 50%; bottom: calc(max(20px, calc(var(--safe-bottom) + 12px)) + 160px); z-index: 40;
  transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .2s;
  width: max-content; max-width: calc(100vw - 40px); box-sizing: border-box; text-align: center;
  padding: 12px 18px; border-radius: 16px;
  background: #1d2433; color: #fff; font-size: 15px; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 700px) {
  .answer { font-size: clamp(88px, 30vw, 132px); }
  .subline { font-size: 18px; }
  .readings { margin-top: 10px; }
}