/* ============================================================
   beloved 2026 — official brand palette (Brand Guide v1.0)
   Deep Pink #ba5461 · Off White #ffebdb · Black #000 · Pastel grey red #ce9a9d
   Type: Playfair Display (primary web) · Radley (supporting)
   ============================================================ */
:root {
  --ink: #181114;          /* brand black, softened a hair for body text */
  --ink-soft: #4a363c;
  --offwhite: #ffebdb;     /* brand off white — page background */
  --paper: #fffaf5;        /* cards */
  --dusty: #ce9a9d;        /* pastel grey red */
  --deep: #ba5461;         /* deep pink — primary */
  --deep-press: #9e4452;
  --muted: #866269;        /* darkened for WCAG AA contrast on paper (5.1:1) */
  --line: #ecd5cc;
  --ok: #3e7d5a;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Radley", Georgia, serif;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(24, 17, 20, 0.08), 0 8px 24px rgba(186, 84, 97, 0.07);
}

* { box-sizing: border-box; }
html { background: var(--offwhite); } /* iOS Safari overscroll matches the app */
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--offwhite);
  color: var(--ink);
  min-height: 100dvh;
  padding-bottom: 84px;
  touch-action: manipulation; /* no double-tap zoom */
  -webkit-text-size-adjust: 100%;
}

/* Home (Tonight) logo */
.home-logo { width: min(50vw, 190px); height: auto; display: block; margin: 2px auto 4px; }
.home-card .badge { margin-top: 2px; }

/* Scoring key — aligned points column, easy to scan */
.score-key { list-style: none; padding: 0; margin: 12px auto 6px; max-width: 290px; text-align: left; }
.score-key li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 5px 0; align-items: baseline; font-size: 15px; }
.score-key .pts { font-family: var(--font-display); font-weight: 600; color: var(--deep-press); text-align: right; font-variant-numeric: tabular-nums; }

/* Schedule — aligned time column */
.sched { text-align: left; margin-top: 4px; }
.sched-row { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.sched-row:first-child { border-top: none; }
.sched-time { font-weight: 600; color: var(--deep-press); font-variant-numeric: tabular-nums; }
.sched-what { color: var(--ink); }

/* ---------- Masthead ---------- */
.masthead {
  position: relative;
  background: linear-gradient(165deg, var(--deep) 0%, #a84a57 100%);
  color: var(--offwhite);
  text-align: center;
  padding: calc(15px + env(safe-area-inset-top)) 44px 15px; /* sides clear the sync dot; top clears the notch */
}
.masthead-org {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--offwhite);
  white-space: nowrap;
}

.sync-dot {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  font-size: 12px;
  color: #d9f0e2;
  transition: color 0.3s;
}
.sync-dot.pending { color: var(--offwhite); }
.sync-dot.offline { color: rgba(255, 235, 219, 0.45); }

/* ---------- Intro animation (5s cinematic scroll + typewriter) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--deep) 0%, #a84a57 100%);
  overflow: hidden;
}
.intro.done { animation: introOut 0.8s ease forwards; }
@keyframes introOut { to { opacity: 0; } }

.intro-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  will-change: transform, opacity;
  transform: translateY(34%);
  opacity: 0;
}
.intro.run .intro-stage { animation: introScroll 5s cubic-bezier(0.33, 0, 0.2, 1) forwards; }
@keyframes introScroll {
  0%   { transform: translateY(34%); opacity: 0; }
  14%  { opacity: 1; }
  24%  { transform: translateY(0); }
  72%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-46%); opacity: 0; }
}
.intro-logo {
  width: 64%;
  max-width: 300px;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.28));
}
.intro-tag {
  min-height: 1.4em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.08em;
  color: var(--offwhite);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.intro-tag.typing::after {
  content: "|";
  margin-left: 2px;
  opacity: 0.85;
  animation: introCaret 0.7s step-end infinite;
}
@keyframes introCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .intro.run .intro-stage { animation: none; opacity: 1; transform: none; }
}

/* ---------- Prize redeemed ---------- */
.prize-badge {
  display: inline-block;
  margin: 8px 0 2px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ok);
  background: #eef7f0;
  border: 1px solid #bfe0cb;
  border-radius: 999px;
  padding: 6px 16px;
}
.prize-pop {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 8, 9, 0.55);
  animation: prizeFade 0.3s ease;
}
@keyframes prizeFade { from { opacity: 0; } }
.prize-pop-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 28px 30px;
  text-align: center;
  max-width: 80%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: prizePop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes prizePop { from { transform: scale(0.7); opacity: 0; } }
.prize-pop-emoji { font-size: 56px; line-height: 1; }
.prize-pop-card h2 { font-family: var(--font-display); font-weight: 500; color: var(--deep); margin: 10px 0 4px; }
.prize-pop-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

/* ---------- Connect "Profile" link + Tonight team header ---------- */
.connect-head { position: relative; }
.profile-link {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--deep);
  background: none;
  border: 1px solid var(--dusty);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.profile-link:active { background: #fbece9; }
.team-name { margin: 2px 0 2px; }
.team-daughters { font-style: italic; color: var(--muted); margin: 0 0 6px; }

/* ---------- Superlative Shout-Outs ---------- */
.cheer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cheer-pick {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--offwhite);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
}
.cheer-pick:active { background: var(--deep); border-color: var(--deep-press); color: var(--offwhite); }
.team-qr { display: flex; justify-content: center; margin: 12px 0 2px; }
.team-qr img, .team-qr canvas { width: 168px !important; height: 168px !important; border-radius: 8px; }
.cheer-got { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.cheer-got .cheer-n { color: var(--deep); font-family: var(--font-display); }

/* ---------- In-app QR scanner ---------- */
.scanner { position: fixed; inset: 0; z-index: 320; background: #0c0809; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: relative; width: 66%; max-width: 280px; aspect-ratio: 1; border: 3px solid rgba(255, 235, 219, 0.92); border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(12, 8, 9, 0.55); }
.scan-hint { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); width: 84%; text-align: center; z-index: 2; font-family: var(--font-display); font-size: 18px; color: var(--offwhite); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75); }
.scan-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 235, 219, 0.4); background: rgba(12, 8, 9, 0.45); color: var(--offwhite); font-size: 19px; cursor: pointer; }

/* ---- Fairy-door scan mode ---- */
.scan-title { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 86%; text-align: center; z-index: 3; font-family: var(--font-display); font-size: 24px; color: var(--offwhite); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); }
.scanner-quest .scan-frame { border-color: #e7c98f; animation: fairyglow 1.7s ease-in-out infinite; }
.scanner-quest .scan-hint { bottom: 122px; }
@keyframes fairyglow {
  0%, 100% { border-color: rgba(255, 235, 219, 0.9); filter: drop-shadow(0 0 6px rgba(231, 201, 143, 0.45)); }
  50% { border-color: #e7c98f; filter: drop-shadow(0 0 18px rgba(231, 201, 143, 0.85)); }
}
.slide-exit { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(26px + env(safe-area-inset-bottom)); width: min(86%, 360px); height: 60px; border-radius: 32px; background: rgba(12, 8, 9, 0.5); border: 1px solid rgba(255, 235, 219, 0.35); overflow: hidden; z-index: 4; }
.slide-fill { position: absolute; left: 4px; top: 4px; height: 52px; width: 40px; border-radius: 26px; background: linear-gradient(90deg, #9e4452, #c98a93); opacity: 0.55; }
.slide-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--offwhite); font-family: var(--font-display); font-size: 15px; opacity: 0.92; pointer-events: none; padding-left: 30px; }
.slide-knob { position: absolute; left: 2px; top: 2px; width: 56px; height: 56px; border-radius: 50%; background: var(--offwhite); color: var(--deep-press); font-size: 28px; line-height: 56px; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); touch-action: none; cursor: grab; z-index: 2; }
.quest-pop { position: absolute; inset: 0; z-index: 6; background: rgba(12, 8, 9, 0.8); display: flex; align-items: center; justify-content: center; padding: 24px; }
.quest-pop-card { background: linear-gradient(160deg, #2a1a20, #160e11); border: 1px solid rgba(255, 235, 219, 0.25); border-radius: 24px; padding: 30px 26px; text-align: center; max-width: 340px; width: 100%; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); }
.qp-emoji { font-size: 62px; line-height: 1; }
.qp-got { font-family: var(--font-display); font-size: 30px; color: var(--offwhite); margin-top: 8px; }
.qp-name { font-family: var(--font-display); font-style: italic; font-size: 20px; color: #e7c98f; margin-top: 4px; }
.qp-prog { color: rgba(255, 235, 219, 0.82); font-size: 15px; margin: 12px 0 18px; }
.quest-pop-card .btn { margin: 0; }
.quest-scan { font-size: 18px; }
.quest-progress { margin-top: 12px; color: var(--muted); }

/* ---- Games menu (two clear games) ---- */
.games-head { margin-bottom: 2px; }
.game-tile { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px; margin: 12px 0 0; cursor: pointer; font: inherit; color: var(--ink); }
.game-tile:active { transform: scale(.99); }
.game-emoji { font-size: 40px; line-height: 1; flex: none; }
.game-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.game-txt b { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--deep-press); }
.game-txt small { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.game-go { font-size: 28px; color: var(--dusty); flex: none; }
.gv-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--deep-press); font: inherit; font-size: 15px; cursor: pointer; padding: 6px 2px; margin: 0 0 8px; }
.gv-back:active { opacity: .7; }

/* ---- Fairy Quest holding page ---- */
.fq-head h2 { margin-bottom: 6px; }
.fq-dots { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.fq-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--paper); border: 1px solid var(--line); }
.fq-dot.on { background: #ffe1ea; border-color: var(--dusty); }
.fq-next .fq-clue { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.42; color: var(--ink); margin: 10px 6px 14px; }
.fq-reveal { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }
.fq-reveal summary { cursor: pointer; color: var(--deep-press); list-style: none; }
.fq-reveal summary::-webkit-details-marker { display: none; }
.fq-reveal p { margin: 8px 0 0; }
.fq-trophies ul { list-style: none; padding: 0; margin: 8px 0 0; }
.fq-trophies li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-family: var(--font-display); }
.fq-trophies li:first-child { border-top: none; }
.fq-trophies li b { margin-left: auto; color: var(--ok); }
.fq-tro-e { font-size: 18px; }
.fq-done .fq-done-mark { font-size: 40px; color: var(--deep); }

/* ---- Fairy Quest celebration (slow, huge, over-the-top) ---- */
.fq-cel { position: absolute; inset: 0; z-index: 6; background: radial-gradient(120% 95% at 50% 22%, #4b2a44 0%, #371f33 55%, #281625 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; animation: fqFade .4s ease; }
.fq-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 5; pointer-events: none; animation: fqFlash .9s ease-out both; }
.fq-cel-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; color: #ffe39a; }
.fq-cel-sky .cf { position: absolute; top: -12%; border-radius: 2px; animation-name: fqConfetti; animation-timing-function: linear; animation-iteration-count: infinite; }
.fq-cel-sky .bf { position: absolute; bottom: -12%; animation-name: fqRise; animation-timing-function: ease-in; animation-iteration-count: infinite; }
.fq-cel-sky .sp { position: absolute; animation-name: fqTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fq-cel-sky .fl { position: absolute; left: 0; animation-name: fqFly; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform; }
.fq-cel-card { position: relative; z-index: 2; text-align: center; padding: 26px; max-width: 360px; }
.fq-door { position: relative; width: 168px; height: 210px; margin: 8px auto 14px; perspective: 900px; z-index: 1; animation: fqDoorIn .8s cubic-bezier(.2,1.5,.35,1) .2s both; }
.fq-aura { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; z-index: 0; background: radial-gradient(circle, rgba(255,228,150,.6) 0%, rgba(255,228,150,0) 68%); animation: fqAura 3s ease-in-out .6s infinite; }
.fq-ring { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 3px solid rgba(231,201,143,.85); opacity: 0; z-index: 0; animation: fqRing 2.8s ease-out infinite; }
.fq-door-rays { position: absolute; left: 50%; top: 47%; width: 360px; height: 360px; margin: -180px 0 0 -180px; z-index: 0; opacity: 0; animation: fqRaysFade 3s ease 1s both; }
.fq-door-rays::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: fqSpinSlow 12s linear infinite; background:
  conic-gradient(from 0deg, rgba(255,240,200,0) 0 10deg, rgba(255,240,200,.6) 14deg, rgba(255,240,200,0) 20deg 40deg, rgba(255,240,200,.6) 44deg, rgba(255,240,200,0) 50deg 70deg, rgba(255,240,200,.6) 74deg, rgba(255,240,200,0) 80deg 100deg, rgba(255,240,200,.6) 104deg, rgba(255,240,200,0) 110deg 130deg, rgba(255,240,200,.6) 134deg, rgba(255,240,200,0) 140deg 160deg, rgba(255,240,200,.6) 164deg, rgba(255,240,200,0) 170deg 190deg, rgba(255,240,200,.6) 194deg, rgba(255,240,200,0) 200deg 220deg, rgba(255,240,200,.6) 224deg, rgba(255,240,200,0) 230deg 250deg, rgba(255,240,200,.6) 254deg, rgba(255,240,200,0) 260deg 280deg, rgba(255,240,200,.6) 284deg, rgba(255,240,200,0) 290deg 310deg, rgba(255,240,200,.6) 314deg, rgba(255,240,200,0) 320deg 340deg, rgba(255,240,200,.6) 344deg, rgba(255,240,200,0) 350deg 360deg); }
.fq-door-glow { position: absolute; left: 50%; top: 50%; width: 150px; height: 186px; transform: translate(-50%, -50%); border-radius: 75px 75px 10px 10px; z-index: 1; opacity: 0; background: radial-gradient(circle at 50% 58%, #fff9e6 0%, #ffe39a 45%, rgba(255,227,154,0) 82%); animation: fqGlow 2.4s ease 1s both; }
.fq-door-pop { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0); z-index: 2; font-size: 66px; line-height: 1; animation: fqDoorPop 1.1s cubic-bezier(.2,1.5,.4,1) 2s both; }
.fq-door-pop span { display: inline-block; animation: fqFloat 3s ease-in-out 3.1s infinite; }
.fq-door-frame { position: absolute; left: 50%; top: 50%; width: 168px; height: 210px; transform: translate(-50%, -50%); border: 10px solid #9a7b3e; border-radius: 86px 86px 12px 12px; background: transparent; z-index: 3; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.fq-door-leaf { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; border-radius: 78px 78px 6px 6px; background: linear-gradient(135deg, #c65866 0%, #9e4452 100%); transform-origin: left center; transform: rotateY(0deg); backface-visibility: hidden; box-shadow: inset 0 0 0 3px rgba(231,201,143,.55); z-index: 4; animation: fqDoorOpen 1.5s cubic-bezier(.45,0,.2,1) 1s both; }
.fq-door-knob { position: absolute; right: 10px; top: 52%; width: 10px; height: 10px; border-radius: 50%; background: #e7c98f; }
.fq-door-heart { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); color: #e7c98f; font-size: 22px; line-height: 1; }
.fq-cel-h { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 600; font-size: 34px; color: #fff4cf; margin-top: 8px; animation: fqPopIn .7s cubic-bezier(.2,1.5,.4,1) 2.6s both; }
.fq-cel-name { position: relative; z-index: 2; font-family: var(--font-display); font-style: italic; font-size: 23px; color: #ffe7ef; margin-top: 3px; animation: fqUp .6s ease 2.95s both; }
.fq-cel-prog { position: relative; z-index: 2; color: rgba(255,244,207,.85); margin: 10px 0 18px; animation: fqUp .6s ease 3.25s both; }
.fq-bigstar { display: inline-block; color: #ffe39a; font-size: 96px; line-height: 1; text-shadow: 0 0 26px rgba(255,227,154,.95), 0 0 60px rgba(255,210,122,.6); }
.fq-cel-go { position: relative; z-index: 2; margin-top: 4px; animation: fqUp .6s ease 3.7s both; }
@keyframes fqFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fqFlash { 0% { opacity: 0; } 18% { opacity: .85; } 100% { opacity: 0; } }
@keyframes fqConfetti { 0% { transform: translateY(-12%) rotate(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(760px) rotate(680deg); opacity: 0; } }
@keyframes fqRise { 0% { transform: translateY(0) rotate(-12deg); opacity: 0; } 14% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(-640px) rotate(16deg); opacity: 0; } }
@keyframes fqTwinkle { 0%, 100% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes fqFly { 0% { transform: translate(-14vw, 0) rotate(-8deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(52vw, -30px) rotate(8deg); } 90% { opacity: 1; } 100% { transform: translate(124vw, 0) rotate(-8deg); opacity: 0; } }
@keyframes fqDoorIn { 0% { transform: scale(.4) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes fqDoorOpen { from { transform: rotateY(0deg); } to { transform: rotateY(-125deg); } }
@keyframes fqAura { 0%, 100% { opacity: .3; transform: scale(.9); } 50% { opacity: .7; transform: scale(1.08); } }
@keyframes fqRing { 0% { transform: scale(.25); opacity: 0; } 14% { opacity: .75; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes fqRaysFade { 0% { opacity: 0; transform: scale(.3); } 45% { opacity: .9; } 100% { opacity: .6; transform: scale(1); } }
@keyframes fqSpinSlow { to { transform: rotate(360deg); } }
@keyframes fqGlow { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: .9; } }
@keyframes fqDoorPop { 0% { transform: translate(-50%, -20%) scale(0) rotate(-30deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
@keyframes fqFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fqUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fqPopIn { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---- Map the Night — constellation holding panel ---- */
.sky-panel { margin: 12px auto 6px; width: 100%; max-width: 330px; border-radius: 16px; overflow: hidden; background: radial-gradient(130% 100% at 50% 0%, #4b2a44 0%, #311b2d 70%, #241525 100%); border: 1px solid var(--line); box-shadow: inset 0 0 32px rgba(0,0,0,.4); }
.sky-svg { width: 100%; height: auto; display: block; }
.sky-svg .cstar { animation: cstarTwinkle 2.6s ease-in-out infinite; }
/* subtle sponsor credit (HNL Photo Booth) — dark chip so the white/gold logo reads on the light card */
.fq-sponsor { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px auto 2px; background: #2a1830; border: 1px solid #6b4a5e; border-radius: 12px; padding: 9px 18px; }
.fq-sponsor span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #cdbfe0; }
.fq-sponsor img { width: 156px; height: auto; display: block; }
/* sponsor credit inside the (dark) catch celebration */
.fq-credit { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 2px 0 14px; animation: fqUp .6s ease 3.4s both; }
.fq-credit span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,244,207,.72); }
.fq-credit img { width: 168px; height: auto; }
@keyframes cstarTwinkle { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* ---------- Screen / cards ---------- */
.screen { padding: 16px; max-width: 560px; margin: 0 auto; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.card h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  margin: 0 0 6px;
}
.card h3 { font-family: var(--font-display); font-weight: 500; font-size: 17px; margin: 0 0 4px; }
.card p { margin: 6px 0; font-size: 14.5px; color: var(--ink-soft); }
.card .hint { font-size: 14px; color: var(--muted); }

.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  border: 1px solid var(--dusty);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 8px;
}

/* ---------- Forms ---------- */
label { display: block; font-size: 13.5px; font-weight: 400; margin: 12px 0 4px; color: var(--ink); }
input[type="text"], input[type="email"], input[type="number"], input[type="tel"] {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
input:focus { outline: 2px solid var(--dusty); border-color: var(--deep); }

.daughter-row { display: flex; gap: 8px; margin-bottom: 8px; }
.daughter-row input[data-field="name"] { flex: 1; }
.daughter-row input[data-field="age"] { width: 76px; }
.daughter-row .remove {
  border: none; background: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #fff;                 /* white on deep-press = 6.2:1 (WCAG AA) */
  background: var(--deep-press);
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  min-height: 48px;            /* comfortable mobile touch target */
  margin-top: 14px;
  cursor: pointer;
  width: 100%;
}
.btn:active { background: #8a3a45; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn.secondary {
  background: none;
  color: var(--deep-press);    /* 5.95:1 on paper */
  border: 1.5px solid var(--deep-press);
}
.btn.ghost {
  background: none;
  color: var(--deep-press);
  border: none;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 400;
  width: auto;
  min-height: 0;
  padding: 10px 4px;
}
.btn:disabled { opacity: 0.5; }

.error { color: var(--deep); font-size: 13px; margin-top: 8px; }
.success { color: var(--ok); font-size: 13.5px; margin-top: 8px; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
/* `display:flex` above outranks the bare [hidden] attribute, so hide explicitly
   — the nav must disappear on the setup / pre-register / holding screens. */
.tabbar[hidden] { display: none !important; }
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 10px 0 8px;
  cursor: pointer;
}
.tab .tab-ico { font-size: 17px; line-height: 1; }
.tab.active { color: var(--deep); }
.tab.active .tab-ico { color: var(--dusty); }

/* ---------- Misc ---------- */
.daughter-chip {
  display: inline-block;
  background: var(--dusty);
  color: #fff;
  font-size: 14px;
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
}
.points {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--deep);
  font-weight: 500;
}
.divider { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.center { text-align: center; }

/* ---------- Connect: age band selector ---------- */
.age-card { padding: 14px 16px; }
.age-label {
  margin: 0 0 9px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.age-row { display: flex; gap: 8px; }
.age-chip {
  flex: 1 1 0;
  padding: 11px 8px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.age-chip:active { border-color: var(--deep); }
.age-chip.on { background: var(--deep); border-color: var(--deep-press); color: var(--offwhite); }
.age-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.age-set .age-label { margin: 0 0 2px; }
.age-current { font-family: var(--font-display); font-size: 18px; color: var(--deep); font-weight: 500; }
.age-reset { width: auto; margin-top: 0; padding: 8px 14px; flex: 0 0 auto; }

/* ---------- Connect: team slogan ---------- */
.slogan-row { margin: 10px 0; }
.slogan-row input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.slogan-row input:focus { outline: none; border-color: var(--deep); }
.slogan-show { font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--ink); margin: 8px 0 12px; }
.slogan-help { margin: 2px 0 12px; }
.slogan-help summary { cursor: pointer; color: var(--deep); font-size: 14px; list-style: none; }
.slogan-help summary::-webkit-details-marker { display: none; }
.spark-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.spark-chip { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 999px; padding: 8px 12px; font-family: var(--font-body); font-size: 13.5px; cursor: pointer; }
.spark-chip:active { border-color: var(--deep); }
.slogan-actions { display: flex; gap: 10px; }
.slogan-actions .btn { margin-top: 2px; }

/* ---------- Connect: decks ---------- */
.deck-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.deck-kind {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 8px;
  color: #fff;
  background: var(--dusty);
}
.deck-kind.kind-ask { background: var(--deep); }
.deck-kind.kind-her { background: var(--ink); color: var(--offwhite); }
.deck-text {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  margin: 4px 0 10px;
}
.deck-actions { display: flex; gap: 10px; }
.deck-actions .btn { margin-top: 4px; }

/* ---------- Connect: polls ---------- */
.match-q { font-weight: 400; font-size: 15.5px; color: var(--ink); margin: 14px 0 6px; }
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 8px 0;
}
.option {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--offwhite);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
}
.option:active { border-color: var(--deep); }
.option.picked { background: var(--deep); border-color: var(--deep-press); color: var(--offwhite); }

.polls-more { width: 100%; margin-top: 6px; }
.polls-end { margin-top: 10px; opacity: 0.75; }

.word-row { display: flex; gap: 8px; align-items: stretch; }
.word-row input { flex: 1; }
.word-row .btn { width: auto; margin-top: 0; padding: 10px 20px; }

/* ---------- Quest ---------- */
.quest-banner { text-align: center; border-color: var(--dusty); background: #fff5ec; }
.quest-emoji { font-size: 38px; line-height: 1.2; }
.quest-item.found { border-color: var(--dusty); background: #fff5ec; }
.quest-row { display: flex; gap: 12px; align-items: flex-start; }
.quest-row .quest-emoji { font-size: 28px; width: 40px; text-align: center; }

/* ---------- Selfie Studio: full-screen layer ---------- */
/* black backdrop so Safari's floating bottom bar goes dark too */
body.studio-open { overflow: hidden; background: #0c0809; }
html:has(body.studio-open) { background: #0c0809; }

.studio-full {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0c0809;
}
/* the hidden attribute must beat display:flex on overlay chrome */
.studio-full [hidden] { display: none !important; }
.studio-full video,
.studio-full #sfPreview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.studio-full #sfPreview { object-fit: contain; background: #0c0809; }
.studio-full video.mirror { transform: scaleX(-1); }
.studio-full.flash::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  animation: flashfade 0.35s ease-out forwards;
  pointer-events: none;
}
@keyframes flashfade { from { opacity: 0.95; } to { opacity: 0; } }

.sf-scrim {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center;
  z-index: 3;
}
.sf-top {
  top: 0;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 26px;
  background: linear-gradient(rgba(12, 8, 9, 0.75), transparent);
}
.sf-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--offwhite);
}
.sf-title span { font-style: italic; color: var(--dusty); }
.sf-close, .sf-flip {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 235, 219, 0.4);
  background: rgba(12, 8, 9, 0.45);
  color: var(--offwhite);
  font-size: 19px;
  cursor: pointer;
}

.sf-prompt {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  z-index: 2;
  text-align: center;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
  background: rgba(12, 8, 9, 0.32);
  border-radius: 16px;
  padding: 12px 16px;
}
.sf-count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 130px;
  color: var(--offwhite);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}
.sf-count.pop { animation: pop 0.9s ease; }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(1.7); opacity: 0.3; } 30% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.sf-toast {
  position: absolute;
  top: calc(70px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--deep);
  color: var(--offwhite);
  font-size: 15px;
  border-radius: 999px;
  padding: 8px 20px;
  opacity: 0;
}
.sf-toast.show { animation: toastin 1.9s ease forwards; }
@keyframes toastin { 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

.sf-denied {
  position: absolute; inset: 30% 10% auto;
  z-index: 2;
  text-align: center;
  color: var(--offwhite);
  background: rgba(12, 8, 9, 0.7);
  border-radius: 16px;
  padding: 18px;
}
.sf-denied .sf-small { font-size: 13px; color: var(--dusty); }

.sf-bottom {
  bottom: 0;
  justify-content: space-around;
  padding: 22px 22px calc(20px + env(safe-area-inset-bottom));
  background: rgba(12, 8, 9, 0.78);
}
/* one continuous fade that rises up behind the lens carousel — no seam */
.sf-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 118px;
  background: linear-gradient(transparent, rgba(12, 8, 9, 0.78));
  pointer-events: none;
}
.sf-shutter {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 5px solid var(--offwhite);
  background: var(--deep);
  box-shadow: 0 0 0 4px rgba(12, 8, 9, 0.35);
  cursor: pointer;
}
.sf-shutter:active { transform: scale(0.92); }
.sf-side {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 84px;
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--offwhite);
  background: none;
  border: none;
  cursor: pointer;
}
.sf-side span { font-size: 13px; color: var(--dusty); }
.sf-points { font-family: var(--font-display); }

.sf-review { flex-direction: column; gap: 10px; }
.sf-frames { justify-content: center; margin: 0; }
.sf-frames .frame-pick {
  background: rgba(255, 235, 219, 0.12);
  border-color: rgba(255, 235, 219, 0.35);
  color: var(--offwhite);
}
.sf-frames .frame-pick.active { background: var(--deep); border-color: var(--deep); }
.sf-review-actions { display: flex; gap: 10px; width: 100%; }
.sf-action {
  flex: 1;
  font-family: var(--font-body);
  font-size: 15.5px;
  border-radius: 999px;
  padding: 13px 10px;
  cursor: pointer;
  border: none;
}
.sf-action.primary { background: var(--deep); color: var(--offwhite); }
.sf-action.ghosted {
  background: rgba(255, 235, 219, 0.12);
  color: var(--offwhite);
  border: 1px solid rgba(255, 235, 219, 0.35);
}
.sf-keep {
  background: none; border: none;
  color: var(--dusty);
  font-family: var(--font-body);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* live effects overlay */
.studio-full #sfFx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* faces badge (crowns mode) */
.sf-badge {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  right: 14px;
  z-index: 3;
  font-size: 13px;
  color: var(--offwhite);
  background: rgba(12, 8, 9, 0.5);
  border: 1px solid rgba(206, 154, 157, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
}

/* persistent current-filter chip, top center under the title */
.sf-current {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--offwhite);
  background: rgba(186, 84, 97, 0.75);
  border: 1px solid rgba(255, 235, 219, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}
.sf-current.is-natural {
  background: rgba(12, 8, 9, 0.45);
  color: rgba(255, 235, 219, 0.8);
}

/* filter panel: category tabs + lens carousel (hidden until ✨ Filters) */
.sf-lenspanel {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(116px + env(safe-area-inset-bottom));
  z-index: 3;
}
.sf-cats {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-bottom: 6px;
}
.sf-cat {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 235, 219, 0.85);
  background: rgba(12, 8, 9, 0.45);
  border: 1px solid rgba(255, 235, 219, 0.3);
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
}
.sf-cat.active {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--offwhite);
}
.sf-lenses {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 14px 6px;
}
.sf-lenses::-webkit-scrollbar { display: none; }
.lens {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 62px;
}
.lens-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 24px;
  background: rgba(12, 8, 9, 0.4);
  border: 2px solid rgba(255, 235, 219, 0.35);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.lens-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 235, 219, 0.8);
  white-space: nowrap;
}
.lens.active .lens-circle {
  border-color: var(--deep);
  background: rgba(186, 84, 97, 0.45);
  transform: scale(1.12);
}
.lens.active .lens-label { color: var(--offwhite); }
.lens:active .lens-circle { transform: scale(0.94); }

/* lens name flash (center screen on change) */
.sf-lensname {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--offwhite);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
  background: rgba(12, 8, 9, 0.35);
  border-radius: 999px;
  padding: 8px 22px;
  opacity: 0;
  pointer-events: none;
}
.sf-lensname.show { animation: lensname 1.4s ease forwards; }
@keyframes lensname {
  0% { opacity: 0; transform: translateX(-50%) scale(1.15); }
  12% { opacity: 1; transform: translateX(-50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

/* gallery delete */
.gallery-item { position: relative; }
.gallery-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(24, 17, 20, 0.65);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- Frames / gallery ---------- */
.frame-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.frame-pick {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--offwhite);
  color: var(--ink);
  cursor: pointer;
}
.frame-pick.active { border-color: var(--deep); background: var(--deep); color: var(--offwhite); }

.preview-canvas {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gallery-item { margin: 0; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.gallery-item figcaption { font-size: 13px; margin-top: 2px; color: var(--muted); }
.status-approved { color: var(--ok); }
.status-pending { color: var(--deep); }
.status-rejected { color: var(--muted); }

/* ---------- Title sponsor (quiet) ---------- */
.sponsor-card {
  background: #fff;
  text-align: center;
  padding: 18px 16px 14px;
}
.sponsor-label {
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.sponsor-card img { max-width: 78%; max-height: 130px; object-fit: contain; }
.sponsor-name {
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: 0.08em;
  color: #4d8f88;
}
.sponsor-name::after {
  content: "";
  display: block;
  width: 140px;
  height: 2px;
  background: #e8c34a;
  margin: 6px auto;
}
.sponsor-sub { font-size: 12px; letter-spacing: 0.3em; color: rgba(77, 143, 136, 0.85); }
.sponsor-thanks { font-size: 14px; font-style: italic; color: var(--muted); margin: 10px 0 0; }

.presented-by {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin: 2px 0 10px;
}

/* ---------- Portrait-only guard (phones in landscape) ---------- */
.rotate-block {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(165deg, var(--deep) 0%, #a84a57 100%);
  color: var(--offwhite);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.rotate-block h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  margin: 6px 0 0;
}
.rotate-block p { font-style: italic; font-size: 15px; color: #ecd0d4; margin: 0; }
.rotate-logo { width: 150px; height: auto; margin: 4px 0 2px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.3)); }
.rotate-phone {
  width: 52px;
  height: 30px;
  border: 3px solid var(--offwhite);
  border-radius: 8px;
  animation: rotate-hint 1.6s ease-in-out infinite alternate;
}
@keyframes rotate-hint {
  from { transform: rotate(0deg); }
  to { transform: rotate(-90deg); }
}
/* phones only — tall desktop windows stay unaffected */
@media (orientation: landscape) and (max-height: 520px) {
  .rotate-block { display: flex; }
}

/* ---------- Desktop "glass" device frame ----------
   On wide screens the app is meant to be a phone, so we frame it as one:
   a centered handset on a dusky backdrop, with a glass bezel. The transform
   on <body> makes it the containing block for every position:fixed layer
   (tab bar, intro, scanner, studio, celebrations), so they all stay inside
   the device instead of escaping to the full window. */
@media (min-width: 760px) {
  html {
    min-height: 100dvh;
    background:
      radial-gradient(1100px 720px at 50% -8%, #7a4151 0%, rgba(122, 65, 81, 0) 58%),
      linear-gradient(165deg, #2c1922 0%, #3b2531 48%, #221019 100%);
    background-attachment: fixed;
  }
  body {
    position: relative;
    width: 412px;
    height: min(884px, calc(100dvh - 44px));
    min-height: 0;                       /* override the mobile 100dvh floor */
    margin: 24px auto;
    padding-bottom: 0;                   /* mobile reserves tab-bar space; not needed here */
    background: var(--offwhite);
    border: 9px solid #140e12;           /* solid black bezel — a continuous ring, no corner slivers */
    border-radius: 50px;
    overflow: hidden;                    /* clips children to the rounded inner edge */
    /* paint containment corrals the fixed overlays + tab bar inside the device
       WITHOUT a transform — so overflow's rounded clipping stays reliable on
       every child (the transform was what let corners escape). */
    contain: paint;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);   /* depth on the backdrop */
  }
  /* thin inner glass rim + faint top sheen, just inside the bezel */
  body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 6%);
  }
  .masthead { flex: 0 0 auto; }
  .screen {
    flex: 1 1 auto;
    min-height: 0;                       /* let the scroll area shrink within the flex column */
    max-width: none;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;               /* hide the scroll track for an app-like look */
    padding-bottom: 96px;                /* clear the bottom tab bar */
  }
  .screen::-webkit-scrollbar { display: none; }
  .tabbar { position: absolute; }        /* rides the device's bottom edge; clip-path rounds it */
}