/* DreamCatcher styles.
 *
 * Tailwind (cdn.tailwindcss.com) does the layout; this file holds
 *  1. the design's own CSS, copied from the <style> blocks of
 *     design/uxpilot/html/*.html (glows, glass, shimmer, mic, ripples, nav), and
 *  2. what the design does not have: the comic page grid, "living" motion,
 *     safe-area spacing, sheets, the level meter, pressed states.
 */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --nav-bottom: max(2rem, calc(var(--sab) + 0.75rem));
  color-scheme: dark;
}

html, body { background: #000000; }
body {
  margin: 0;
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
.font-serif-dream { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }
[hidden] { display: none !important; }
input:focus, textarea:focus { outline: none; }
button, a { -webkit-touch-callout: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, .consent-box:focus-visible {
  outline: 2px solid rgba(251, 146, 60, 0.7);
  outline-offset: 2px;
}
::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
summary::-webkit-details-marker { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- 1. the design's CSS ---------- */

/* glows: one per design file; sized to one screen so tall pages keep the same light */
.glow-welcome {                 /* onboarding-welcome, setup */
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 180, 80, 0.1) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(circle at 50% 100%, rgba(255, 100, 50, 0.05) 0%, rgba(0, 0, 0, 0) 60%);
}
.glow-corners {                 /* onboarding-visuals */
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 180, 80, 0.1) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 0% 100%, rgba(255, 100, 50, 0.1) 0%, rgba(0, 0, 0, 0) 50%);
}
.glow-center {                  /* onboarding-start */
  background: radial-gradient(circle at 50% 50%, rgba(255, 140, 50, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
}
.warm-glow {                    /* capture */
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 180, 80, 0.1) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(circle at 50% 110%, rgba(255, 100, 50, 0.05) 0%, rgba(0, 0, 0, 0) 60%);
}
.glow-top {                     /* manual entry, who was it, nights */
  background: radial-gradient(circle at 50% -10%, rgba(255, 180, 80, 0.1) 0%, rgba(0, 0, 0, 0) 60%);
  background-repeat: no-repeat;
  background-size: 100% 900px;
}
.opal-glow {                    /* dream card, cast */
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.1) 0%, rgba(0, 0, 0, 0) 50%);
  background-repeat: no-repeat;
  background-size: 100% 900px;
}

.glass-card {
  background: rgba(40, 30, 20, 0.3);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-card-cool {              /* capture's variant */
  background: rgba(28, 28, 30, 0.4);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}
.floating { animation: float 10s ease-in-out infinite; }

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.infinite-scroll { animation: slide 30s linear infinite; width: max-content; }

.glass-input {
  background: rgba(40, 30, 20, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s ease;
}
.glass-input:focus-within {
  border-color: rgba(255, 180, 80, 0.3);
  background: rgba(40, 30, 20, 0.6);
  box-shadow: 0 0 30px rgba(255, 180, 80, 0.1);
}

.shimmer-btn {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 180, 80, 0.08) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 180, 80, 0.08) 75%,
    rgba(255, 255, 255, 0.03) 100%);
  background-size: 200% 100%;
  animation: shimmer 8s linear infinite;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-btn:active { background: rgba(255, 255, 255, 0.2); transform: scale(0.97); }

.focus-glow:focus-within {
  box-shadow: 0 0 30px rgba(255, 180, 80, 0.1);
  border-color: rgba(255, 180, 80, 0.2);
}

.action-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}
.action-btn:active { background: rgba(255, 255, 255, 0.1); transform: scale(0.96); }

.floating-nav {
  background: rgba(20, 15, 10, 0.8);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 40px;
}
.nav-active { background: rgba(255, 255, 255, 0.1); border-radius: 32px; }
.nav-active-warm { background: rgba(255, 140, 50, 0.15); border-radius: 32px; }

/* capture: pulse ring, rotating glow, ripples (verbatim from dreamcatcher-capture) */
@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(251, 146, 60, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); }
}
.mic-container {
  animation: pulse-ring 3s infinite;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.15) 0%, rgba(251, 146, 60, 0.05) 50%, rgba(0, 0, 0, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes glow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotating-glow {
  position: absolute;
  inset: -20px;
  background: conic-gradient(from 0deg, transparent 0%, rgba(251, 146, 60, 0.2) 20%, transparent 40%);
  animation: glow-spin 4s linear infinite;
  filter: blur(15px);
  pointer-events: none;
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.6; border-width: 1px; }
  100% { transform: scale(2.8); opacity: 0; border-width: 0.5px; }
}
.ripple {
  position: absolute;
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 50%;
  animation: ripple 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}
.ripple-2 { animation-delay: 1.3s; }
.ripple-3 { animation-delay: 2.6s; }

/* ---------- 2. what the design does not have ---------- */

/* capture aura (design: dreamcatcher-capture-aura, violet tinted to amber) */
@keyframes aura-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); filter: blur(40px) opacity(0.5); }
  50% { transform: scale(1.1) rotate(180deg); filter: blur(60px) opacity(0.8); }
}
.aura-blob { animation: aura-pulse 10s infinite linear; }
.aura-size { width: min(320px, 78vw, 36vh); height: min(320px, 78vw, 36vh); min-width: 220px; min-height: 220px; }
/* a notice above the buttons (queue, error, unfinished dream): the aura gives up the room */
.capture:has([data-notice] > *) .aura-size { width: min(320px, 78vw, 26vh); height: min(320px, 78vw, 26vh); margin-bottom: 1rem; }

/* recording: the aura breathes with the voice level (--level 0..1, set per frame) */
.mic-core { transform: scale(calc(1 + var(--level, 0) * 0.25)); transition: transform 0.08s linear, opacity 0.4s ease; }
.capture.is-paused .mic-core { opacity: 0.45; }
[data-meter] span { transition: height 0.08s linear; }
.capture.is-recording [data-meter] span { background: rgba(251, 146, 60, 0.8); }
body.recording #tabbar { opacity: 0.3; }
body.recording #tabbar nav { pointer-events: none; }
/* while recording, only the mic and the send arrow take taps: a stray tap
   on the type bar, the gear or a notice must not leave the screen */
body.recording [data-typebar], body.recording [data-notice],
body.recording a[href="#/settings"] { pointer-events: none; opacity: 0.4; }

/* hero orbs: the design's 340 / 280 px circles, shrunk on short phones */
.orb-340 { width: min(340px, 82vw, 38vh); height: min(340px, 82vw, 38vh); }
.orb-280 { width: min(280px, 72vw, 34vh); height: min(280px, 72vw, 34vh); }
.orb-220 { width: min(220px, 60vw, 30vh); height: min(220px, 60vw, 30vh); }

/* safe areas (iOS standalone, notch, home indicator) */
.st-10 { padding-top: calc(var(--sat) + 2.5rem); }
.st-12 { padding-top: calc(var(--sat) + 3rem); }
.st-16 { padding-top: calc(var(--sat) + 4rem); }
.pb-safe-10 { padding-bottom: max(2.5rem, calc(var(--sab) + 1.5rem)); }
.pb-safe-16 { padding-bottom: max(4rem, calc(var(--sab) + 2rem)); }
.tabbar-pad { padding-bottom: var(--nav-bottom); }
.above-tabbar { padding-bottom: calc(var(--nav-bottom) + 72px + 2rem); }
.above-tabbar-tight { padding-bottom: calc(var(--nav-bottom) + 72px + 1.25rem); }
.fab-pos { bottom: calc(var(--nav-bottom) + 72px + 1.5rem); }
.above-fab { padding-bottom: calc(var(--nav-bottom) + 72px + 1.5rem + 56px + 2rem); }
.cta-pad { padding-bottom: max(2.5rem, calc(var(--sab) + 1.25rem)); }
.pb-cta { padding-bottom: calc(max(2.5rem, calc(var(--sab) + 1.25rem)) + 64px + 2.5rem); }
.sheet-pad { padding-bottom: max(2rem, calc(var(--sab) + 1rem)); }

#tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; transition: opacity 0.3s ease; }
#toast { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-bottom) + 72px + 1rem); z-index: 60; display: flex; justify-content: center; padding: 0 24px; pointer-events: none; }
#offline { position: fixed; left: 0; right: 0; top: calc(var(--sat) + 0.5rem); z-index: 60; display: flex; justify-content: center; pointer-events: none; }

/* blurred silhouette (who was it?, empty drawings) */
.silhouette-blur { filter: blur(3px); }

/* who was it? immersive cards (design: dreamcatcher-who-was-it-immersive-visual-cards, tinted warm) */
.who-card {
  min-height: 440px;
  min-height: clamp(400px, calc(100dvh - 370px), 480px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.who-card.is-dim { opacity: 0.4; transform: scale(0.9); cursor: pointer; }
.who-card.is-dim button { pointer-events: none; }
.who-visual {
  background:
    radial-gradient(circle at 62% 28%, rgba(251, 146, 60, 0.30) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(circle at 18% 78%, rgba(180, 83, 9, 0.28) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #2b1c11 0%, #150e09 60%, #0b0806 100%);
}
.who-silhouette { filter: blur(10px); }
.who-dot { width: 4px; background: rgba(255, 255, 255, 0.2); }
.who-dot.is-done { background: rgba(253, 186, 116, 0.6); }
[aria-current="true"] > .who-dot { width: 24px; background: #fb923c; }

/* consent checkbox */
.consent-box {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255, 180, 80, 0.35);
  background: rgba(40, 30, 20, 0.6);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.consent-box:checked { background: #fb923c; border-color: #fb923c; }
.consent-box:checked::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-1px) rotate(-45deg);
}

/* pressed states */
.chip-tag[aria-pressed="true"] { color: #fed7aa; background: rgba(251, 146, 60, 0.15); border-color: rgba(251, 146, 60, 0.3); }
.acc-btn[aria-pressed="true"] { background: #fff; color: #000; border-color: transparent; }
.ws-btn[aria-pressed="true"] { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.35); color: #fff; }

/* sheets and appear */
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-in { animation: sheet-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.appear { animation: appear 0.8s ease both; }

/* ---------- comic page ----------
 * vertical 9:16: wide, two small, wide, two small
 * horizontal 16:9: two large on top, four small below
 * fewer panels (4-5) degrade gracefully */
.comic-page { display: grid; gap: 8px; width: 100%; }
.comic-page.vertical {
  aspect-ratio: 9 / 16;
  max-width: 460px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.25fr 1fr 1.25fr 1fr;
}
.comic-page.vertical .panel:nth-child(3n + 1) { grid-column: span 2; }
.comic-page.vertical[data-count="5"] .panel:nth-child(5) { grid-column: span 2; }
.comic-page.vertical[data-count="4"] { grid-template-rows: 1.25fr 1fr 1.25fr; aspect-ratio: 3 / 4; }
.comic-page.vertical[data-count="3"] { grid-template-rows: 1.25fr 1fr; aspect-ratio: 1 / 1; }
.comic-page.vertical[data-count="2"] { grid-template-rows: 1fr 1fr; }
.comic-page.vertical[data-count="2"] .panel { grid-column: span 2; }
.comic-page.vertical[data-count="1"] { grid-template-rows: 1fr; aspect-ratio: 4 / 5; }

.comic-page.horizontal {
  aspect-ratio: 16 / 9;
  gap: 5px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1.45fr 1fr;
}
.comic-page.horizontal .panel { grid-column: span 3; border-radius: 12px; }
.comic-page.horizontal .panel:nth-child(-n + 2) { grid-column: span 6; }
.comic-page.horizontal[data-count="5"] .panel:nth-child(n + 3) { grid-column: span 4; }
.comic-page.horizontal[data-count="4"] .panel:nth-child(n + 3) { grid-column: span 6; }
.comic-page.horizontal[data-count="3"] .panel:nth-child(3) { grid-column: span 12; }
.comic-page.horizontal[data-count="2"] { grid-template-rows: 1fr; }
.comic-page.horizontal[data-count="1"] { grid-template-rows: 1fr; }
.comic-page.horizontal[data-count="1"] .panel { grid-column: span 12; }

@supports not (aspect-ratio: 1 / 1) {
  .comic-page.vertical { height: 158vw; max-height: 820px; }
  .comic-page.horizontal { height: 50vw; max-height: 260px; }
}

.panel {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  background: #1c1c1e;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: calc(var(--i, 0) * 320ms);
  isolation: isolate;
  cursor: pointer;
}
.panel.shown { opacity: 1; transform: none; }
.panel img, .panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}
.panel.skeleton {
  opacity: 1;
  transform: none;
  cursor: default;
  background: linear-gradient(100deg, #1c1c1e 20%, #2a2420 45%, #1c1c1e 70%);
  background-size: 300% 100%;
  animation: skeleton 2.4s ease-in-out infinite;
}
.panel.blank { cursor: default; background: linear-gradient(160deg, #221c18, #121010); }
@keyframes skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* "living" motion: slow zoom and pan, different per panel, no AI */
.panel.live-1 img { animation: live-zoom-in 17s ease-in-out infinite alternate; }
.panel.live-2 img { animation: live-pan-left 21s ease-in-out infinite alternate; }
.panel.live-3 img { animation: live-rise 15s ease-in-out infinite alternate; }
.panel.live-4 img { animation: live-zoom-out 23s ease-in-out infinite alternate; }
.panel.live-5 img { animation: live-pan-right 19s ease-in-out infinite alternate; }
.panel.live-6 img { animation: live-drift 25s ease-in-out infinite alternate; }
@keyframes live-zoom-in { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.15) translate(-1.5%, -1.5%); } }
@keyframes live-zoom-out { from { transform: scale(1.17) translate(1.5%, -1%); } to { transform: scale(1.04) translate(0, 0.5%); } }
@keyframes live-pan-left { from { transform: scale(1.12) translate(3%, 0); } to { transform: scale(1.12) translate(-3%, 0); } }
@keyframes live-pan-right { from { transform: scale(1.1) translate(-3%, 1%); } to { transform: scale(1.14) translate(3%, -1%); } }
@keyframes live-rise { from { transform: scale(1.12) translate(0, 3%); } to { transform: scale(1.12) translate(0, -3%); } }
@keyframes live-drift { from { transform: scale(1.08) translate(-2%, 2%) rotate(-0.4deg); } to { transform: scale(1.16) translate(2%, -2%) rotate(0.4deg); } }

@media (prefers-reduced-motion: reduce) {
  .floating, .infinite-scroll, .ripple, .rotating-glow, .mic-container, .shimmer-btn, .panel img, .aura-blob { animation: none !important; }
  .who-card { transition: none; }
  .panel { transition-duration: 0.01s; transition-delay: 0s; }
  .appear, .sheet-in { animation: none !important; }
}

/* Round 3 B: dream details, reference placeholders (place: blurred doorway, pet: paw, object: soft glow) */
.ref-blur { filter: blur(6px); }
.ref-glow {
  width: 62%; aspect-ratio: 1 / 1; border-radius: 9999px;
  background: radial-gradient(circle, rgba(255, 224, 170, 0.85) 0%, rgba(251, 146, 60, 0.45) 30%, rgba(180, 83, 9, 0.12) 60%, rgba(0, 0, 0, 0) 72%);
  filter: blur(8px);
}

/* ---------- fixed-height screens: language, onboarding, join, you ----------
 * One viewport tall, never scrolls or rubber-bands (html.no-scroll is set by
 * the router). --app-h / --vv-top follow window.visualViewport, so with the
 * keyboard open the join form is laid out above it instead of scrolled to. */
html.no-scroll, html.no-scroll body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.no-scroll #screen {
  position: fixed;
  top: var(--vv-top, 0px);
  left: 0;
  right: 0;
  height: var(--app-h, 100dvh);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
.fit-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}
.fit-screen input, .fit-screen textarea { -webkit-user-select: text; user-select: text; }

/* vertical rhythm scales with the screen height: 667 (SE) … 932 (Pro Max) */
.fit-top {
  position: relative; z-index: 20; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(calc(var(--sat) + 10px), clamp(18px, 4.6dvh, 52px)) 28px 0;
  min-height: 40px;
}
.fit-art { position: relative; flex: 1 1 0; min-height: 0; margin: clamp(10px, 2.2dvh, 28px) 0; }
.fit-copy { position: relative; z-index: 10; flex: none; padding: 0 28px; }
.fit-foot { position: relative; z-index: 20; flex: none; padding: clamp(12px, 2.6dvh, 32px) 28px max(calc(var(--sab) + 14px), clamp(18px, 4dvh, 48px)); }
@media (min-width: 390px) {
  .fit-top, .fit-copy, .fit-foot { padding-left: 32px; padding-right: 32px; }
}

.ob-kicker { font-size: clamp(10px, 1.5dvh, 12px); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: rgba(253, 186, 116, 0.75); }
.ob-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: #fff; line-height: 1.08; font-size: clamp(27px, 4.7dvh, 40px); letter-spacing: -0.01em; }
.ob-title em { font-style: italic; color: #fed7aa; }
.ob-lead { margin-top: clamp(6px, 1.3dvh, 14px); color: #9ca3af; font-weight: 300; line-height: 1.45; font-size: clamp(14px, 2.2dvh, 18px); }
.ob-list { margin-top: clamp(8px, 1.7dvh, 18px); display: flex; flex-direction: column; gap: clamp(5px, 1.05dvh, 10px); }
.ob-list li { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(12.5px, 1.9dvh, 15px); line-height: 1.35; color: rgba(255, 237, 213, 0.78); }
.ob-list i { width: 16px; flex: none; text-align: center; margin-top: 0.2em; color: #fdba74; font-size: 0.9em; }

.ob-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: clamp(12px, 2.6dvh, 32px); }
.ob-dots span { width: 6px; height: 6px; border-radius: 9999px; background: #27272a; transition: all 0.3s ease; }
.ob-dots span.is-done { background: rgba(253, 186, 116, 0.45); }
.ob-dots span.is-on { width: 28px; height: 4px; background: #fff; }
.ob-btn {
  width: 100%; height: clamp(52px, 7.4dvh, 64px); border-radius: 24px; background: #fff; color: #000;
  font-weight: 700; font-size: clamp(16px, 2.3dvh, 18px);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.08); transition: transform 0.15s ease;
}
.ob-btn:active { transform: scale(0.98); }
.ob-icon-btn { width: 40px; height: 40px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.ob-skip { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 0 10px 10px; }
@keyframes ob-in { from { opacity: 0; transform: translateX(var(--ob-from, 24px)); } to { opacity: 1; transform: none; } }
.ob-in > .fit-art, .ob-in > .fit-copy { animation: ob-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ob-in > .fit-copy { animation-delay: 0.05s; }

/* the art: a stage of a fixed aspect ratio (--ar = width / height) that fills
 * the free height, shrinks to the width, and scales its insides with cqh */
.ob-stage {
  position: absolute; inset: 0; margin: auto;
  height: min(100%, var(--max-h, 400px), calc((min(100vw, 430px) - 56px) / var(--ar, 1)));
  aspect-ratio: var(--ar, 1);
  container-type: size;
}
.ob-abs { position: absolute; }
.ob-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-shot { position: absolute; overflow: hidden; border-radius: 6cqh; border: 1px solid rgba(255, 255, 255, 0.08); background: #1c1c1e; box-shadow: 0 3cqh 8cqh rgba(0, 0, 0, 0.55); }
.ob-glass { background: rgba(28, 22, 16, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.08); }
.ob-label { font-size: 3.2cqh; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: rgba(253, 186, 116, 0.8); }
.ob-serif { font-family: 'Fraunces', Georgia, serif; }
.ob-pill { display: inline-flex; align-items: center; gap: 1.6cqh; height: 7.6cqh; padding: 0 3.2cqh; border-radius: 9999px; font-size: 3.3cqh; font-weight: 700; white-space: nowrap; }
.ob-pill-light { background: #fff; color: #000; }
.ob-pill-glass { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }

/* voice: the capture aura in miniature */
.ob-mic { position: absolute; left: 50%; top: 40%; width: 56cqh; height: 56cqh; transform: translate(-50%, -50%); }
.ob-mic .ripple { inset: 0; }
.ob-bars { display: flex; align-items: center; justify-content: center; gap: 1.1cqh; height: 8cqh; }
.ob-bars span { width: 0.9cqh; border-radius: 9999px; background: rgba(251, 146, 60, 0.75); animation: ob-bar 1.2s ease-in-out infinite alternate; }
@keyframes ob-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

/* details: dream-detail cards */
.ob-q { position: absolute; left: 0; right: 0; display: flex; gap: 3cqh; align-items: center; padding: 2.6cqh; border-radius: 5cqh; }
.ob-q .ob-thumb { position: relative; width: 17cqh; height: 17cqh; border-radius: 3.4cqh; overflow: hidden; flex: none; background: linear-gradient(160deg, #2b1c11, #0b0806); }
.ob-q p { font-size: 3.7cqh; line-height: 1.3; color: #fff; }

/* hero: the comic page in miniature */
.ob-page { position: absolute; display: grid; gap: 1.4cqh; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ob-page > div { position: relative; overflow: hidden; border-radius: 2.6cqh; background: #1c1c1e; }
.ob-page > div:first-child { grid-row: span 2; }

/* share: a story cover in miniature (Round 3 D direction) */
.ob-story { position: absolute; overflow: hidden; border-radius: 5cqh; background: radial-gradient(circle at 50% 0%, rgba(251, 146, 60, 0.25), rgba(0, 0, 0, 0) 60%), #140e0a; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4cqh 10cqh rgba(0, 0, 0, 0.6); }
.ob-mast { font-family: Impact, 'Arial Narrow Bold', 'Helvetica Neue', sans-serif; font-weight: 900; letter-spacing: 0.02em; font-size: 6.4cqh; line-height: 1; background: linear-gradient(90deg, #fbbf24, #fb923c, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.25cqh #000; }
.ob-frame { position: absolute; overflow: hidden; border: 0.9cqh solid #f5ecd9; outline: 0.4cqh solid #000; border-radius: 1cqh; background: #222; }

/* privacy rows */
.ob-rows { display: flex; flex-direction: column; gap: clamp(6px, 1.2dvh, 12px); }
.ob-row { display: flex; align-items: flex-start; gap: 12px; padding: clamp(6px, 1.2dvh, 15px) 2px; font-size: clamp(12.5px, 1.95dvh, 15px); line-height: 1.36; color: rgba(255, 237, 213, 0.85); }
.ob-row i { width: 18px; flex: none; text-align: center; margin-top: 0.15em; color: #fdba74; }

/* permissions cards (start) */
.ob-perm { border-radius: 28px; padding: clamp(12px, 2.2dvh, 24px) clamp(14px, 2.4dvh, 24px); display: flex; align-items: center; gap: clamp(12px, 2dvh, 20px); }
.ob-perm .ob-perm-ico { width: clamp(40px, 6.4dvh, 56px); height: clamp(40px, 6.4dvh, 56px); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.ob-perm h3 { font-weight: 700; color: #fff; font-size: clamp(14px, 2.1dvh, 16px); }
.ob-perm p { color: #6b7280; font-size: clamp(12px, 1.8dvh, 14px); margin-top: 2px; line-height: 1.35; }
.ob-perm .ob-perm-status { color: rgba(254, 215, 170, 0.8); margin-top: 6px; font-size: clamp(11px, 1.7dvh, 12px); }

/* language picker */
.lang-btn { width: 100%; height: clamp(58px, 8.6dvh, 72px); border-radius: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: clamp(18px, 2.7dvh, 21px); font-weight: 700; transition: transform 0.15s ease; }
.lang-btn:active { transform: scale(0.98); }
.lang-btn.is-pre { background: #fff; color: #000; box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1); }

/* join / you: the art gives up its room first when space is short */
.fit-orb { position: absolute; inset: 0; margin: auto; height: min(100%, var(--max-h, 280px), 72vw); aspect-ratio: 1; }
.fit-h { height: clamp(50px, 7.4dvh, 64px); }
html.kb-open .kb-hide { display: none !important; }
html.kb-open .fit-top { padding-top: 10px; }
html.kb-open .join-form { padding-top: calc(var(--sat) + 12px); padding-bottom: 12px; }
html.kb-open .fit-h { height: 50px; }

@media (prefers-reduced-motion: reduce) {
  .ob-in > .fit-art, .ob-in > .fit-copy, .ob-bars span { animation: none !important; }
}

/* phones shorter than an iPhone SE (320×568 and the like): the bullet lists
   step aside so the art and the cards keep their room; nothing may overlap */
@media (max-height: 620px) {
  .ob-list, .fit-screen .ob-short-hide { display: none; }
  .ob-row { padding-top: 4px; padding-bottom: 4px; font-size: 11.5px; line-height: 1.3; }
  .ob-perm p { display: none; }
}
@media (max-width: 350px) {
  .fit-top .font-serif-dream { display: none; }
  .ob-skip { letter-spacing: 0.04em; }
}

/* ================================================================== Rounds 4–5 (2026-09-29) */

/* language screen: three languages */
.lang-alt { margin-top: clamp(4px, 0.9dvh, 8px); font-family: 'Fraunces', Georgia, serif; font-style: italic; color: rgba(254, 215, 170, 0.72); font-size: clamp(16px, 2.6dvh, 21px); line-height: 1.25; }
.lang-list { display: flex; flex-direction: column; gap: clamp(8px, 1.3dvh, 12px); }
.lang-list .lang-btn { height: clamp(52px, 7.8dvh, 66px); }

/* ---------- install guide (Round 4 F): a looping CSS film of the iPhone steps ---------- */
.install-screen .fit-top .ob-kicker { font-size: 10px; }
.ip-stage { position: absolute; inset: 0; display: flex; align-items: center; gap: 18px; padding: 0 28px; }
@media (min-width: 390px) { .ip-stage { padding: 0 32px; } }
.ip-phone {
  position: relative; flex: none; height: min(100%, 300px); aspect-ratio: 0.5;
  border-radius: 26px; background: linear-gradient(160deg, #2a211a, #0e0a08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(251, 146, 60, 0.1);
  container-type: size;
}
.ip-screen { position: absolute; inset: 4px; border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 28%, rgba(255, 170, 80, 0.16), rgba(0, 0, 0, 0) 60%), #0b0806; }
.ip-page { position: absolute; left: 0; right: 0; top: 12%; display: flex; flex-direction: column; align-items: center; }
.ip-orb { width: 52cqw; height: 52cqw; border-radius: 999px; overflow: hidden; opacity: 0.85; }
.ip-orb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.ip-lines { width: 70%; margin-top: 8cqh; display: flex; flex-direction: column; gap: 2.4cqh; }
.ip-lines i { display: block; height: 2.2cqh; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.ip-lines i.short { width: 60%; }
.ip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqh; padding: 2cqh 5cqw 0; background: rgba(28, 28, 30, 0.92); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ip-url { height: 5.4cqh; border-radius: 2cqh; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; gap: 1.5cqw; font-size: 3cqh; color: rgba(255, 255, 255, 0.75); }
.ip-url i { font-size: 2.4cqh; color: rgba(255, 255, 255, 0.5); }
.ip-tools { display: flex; align-items: center; justify-content: space-between; margin-top: 2.2cqh; padding: 0 2cqw; font-size: 3.6cqh; color: #60a5fa; }
.ip-share { position: relative; display: inline-flex; width: 7cqh; height: 7cqh; margin: -1.4cqh 0; align-items: center; justify-content: center; border-radius: 999px; color: #fdba74; animation: ip-pulse 1.3s ease-in-out infinite; }
@keyframes ip-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.55); background: rgba(251, 146, 60, 0.12); } 50% { box-shadow: 0 0 0 2.2cqh rgba(251, 146, 60, 0); background: rgba(251, 146, 60, 0.3); } }
.ip-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; border-radius: 5cqh 5cqh 0 0; background: #1c1c1e; padding: 3cqh 4cqw; transform: translateY(105%); animation: ip-sheet 12s ease-in-out infinite; }
.ip-sheet-head { display: flex; align-items: center; gap: 3cqw; font-size: 3.4cqh; font-weight: 700; color: #fff; padding-bottom: 2.4cqh; margin-bottom: 1.6cqh; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ip-app { display: inline-block; width: 8cqh; height: 8cqh; border-radius: 1.8cqh; overflow: hidden; flex: none; }
.ip-app.big { width: 13cqh; height: 13cqh; border-radius: 3cqh; }
.ip-app img { width: 100%; height: 100%; object-fit: cover; }
.ip-row { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; height: 9.4cqh; padding: 0 4cqw; margin-top: 1.4cqh; border-radius: 2.4cqh; background: rgba(255, 255, 255, 0.07); font-size: 3.1cqh; color: #fff; white-space: nowrap; }
.ip-row span { overflow: hidden; text-overflow: ellipsis; }
.ip-row i { color: rgba(255, 255, 255, 0.7); flex: none; }
.ip-row.ip-hl { box-shadow: 0 0 0 0.5cqh #fb923c inset; animation: ip-hl 12s linear infinite; }
.ip-dialog { position: absolute; inset: 0; background: #1c1c1e; opacity: 0; animation: ip-dialog 12s ease-in-out infinite; }
.ip-dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 4cqh 4cqw 3cqh; font-size: 2.8cqh; color: #60a5fa; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; }
.ip-dlg-bar b { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ip-add { font-weight: 700; color: #fdba74; padding: 0.8cqh 2cqw; border-radius: 99px; animation: ip-add 12s linear infinite; }
.ip-dlg-body { display: flex; align-items: center; gap: 4cqw; margin: 4cqh 4cqw; padding: 3cqh 4cqw; border-radius: 3cqh; background: rgba(255, 255, 255, 0.06); }
.ip-dlg-body p { font-size: 3.4cqh; color: #fff; font-weight: 600; }
.ip-dlg-body i { display: block; margin-top: 1.4cqh; width: 26cqw; height: 1.8cqh; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.ip-home { position: absolute; inset: 0; opacity: 0; padding: 9cqh 6cqw 0; background: radial-gradient(circle at 30% 20%, rgba(251, 146, 60, 0.35), rgba(0, 0, 0, 0) 55%), radial-gradient(circle at 80% 90%, rgba(56, 189, 248, 0.22), rgba(0, 0, 0, 0) 55%), #120c09; animation: ip-home 12s ease-in-out infinite; }
.ip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4cqh 4cqw; }
.ip-ico { display: block; aspect-ratio: 1; border-radius: 2.6cqh; background: hsla(var(--h, 30), 45%, 55%, 0.35); position: relative; }
.ip-mine { background: none; animation: ip-mine 12s ease-in-out infinite; }
.ip-mine img { width: 100%; height: 100%; border-radius: 2.6cqh; box-shadow: 0 0 0 0.5cqh rgba(251, 146, 60, 0.8), 0 0 4cqh rgba(251, 146, 60, 0.6); }
.ip-mine em { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 0.8cqh; font-style: normal; font-size: 2.3cqh; color: #fff; white-space: nowrap; }
.ip-finger { position: absolute; left: 50%; top: 94%; width: 9cqh; height: 9cqh; border-radius: 999px; background: rgba(255, 255, 255, 0.45); border: 0.5cqh solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 3cqh rgba(0, 0, 0, 0.4); opacity: 0; transform: translate(-50%, -50%); animation: ip-finger 12s ease-in-out infinite; pointer-events: none; }
@keyframes ip-sheet { 0%, 23% { transform: translateY(105%); opacity: 1; } 29%, 50% { transform: translateY(0); opacity: 1; } 53%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes ip-hl { 0%, 42% { background: rgba(255, 255, 255, 0.07); } 44%, 47% { background: rgba(251, 146, 60, 0.45); } 49%, 100% { background: rgba(251, 146, 60, 0.2); } }
@keyframes ip-dialog { 0%, 50% { opacity: 0; transform: translateY(6%); } 54%, 76% { opacity: 1; transform: none; } 79%, 100% { opacity: 0; transform: none; } }
@keyframes ip-add { 0%, 66% { background: rgba(251, 146, 60, 0); } 68%, 72% { background: rgba(251, 146, 60, 0.4); } 74%, 100% { background: rgba(251, 146, 60, 0); } }
@keyframes ip-home { 0%, 76% { opacity: 0; } 79%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ip-mine { 0%, 81% { transform: scale(0); opacity: 0; } 86% { transform: scale(1.18); opacity: 1; } 89%, 100% { transform: scale(1); opacity: 1; } }
@keyframes ip-finger {
  0% { left: 62%; top: 104%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  9% { left: 50%; top: 91%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  15% { left: 50%; top: 91%; opacity: 1; transform: translate(-50%, -50%) scale(0.72); }
  19% { left: 50%; top: 91%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  24% { left: 50%; top: 91%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  32% { left: 70%; top: 92%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  38% { left: 48%; top: 80%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  44% { left: 48%; top: 80%; opacity: 1; transform: translate(-50%, -50%) scale(0.72); }
  47% { left: 48%; top: 80%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  51% { left: 48%; top: 80%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  58% { left: 70%; top: 22%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  63% { left: 86%; top: 6.5%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  69% { left: 86%; top: 6.5%; opacity: 1; transform: translate(-50%, -50%) scale(0.72); }
  72% { left: 86%; top: 6.5%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  76%, 100% { left: 86%; top: 6.5%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* the step captions light up in time with the film */
.ip-steps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.8dvh, 16px); }
.ip-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(13px, 2dvh, 15px); line-height: 1.3; color: rgba(255, 255, 255, 0.4); }
.ip-n { flex: none; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.ip-ios .ip-s1 { animation: ip-on-1 12s linear infinite; } .ip-ios .ip-s1 .ip-n { animation: ip-n-1 12s linear infinite; }
.ip-ios .ip-s2 { animation: ip-on-2 12s linear infinite; } .ip-ios .ip-s2 .ip-n { animation: ip-n-2 12s linear infinite; }
.ip-ios .ip-s3 { animation: ip-on-3 12s linear infinite; } .ip-ios .ip-s3 .ip-n { animation: ip-n-3 12s linear infinite; }
.ip-ios .ip-s4 { animation: ip-on-4 12s linear infinite; } .ip-ios .ip-s4 .ip-n { animation: ip-n-4 12s linear infinite; }
@keyframes ip-on-1 { 0%, 24% { color: #fff; } 25.5%, 100% { color: rgba(255, 255, 255, 0.4); } }
@keyframes ip-on-2 { 0%, 24% { color: rgba(255, 255, 255, 0.4); } 25.5%, 49% { color: #fff; } 50.5%, 100% { color: rgba(255, 255, 255, 0.4); } }
@keyframes ip-on-3 { 0%, 49% { color: rgba(255, 255, 255, 0.4); } 50.5%, 74% { color: #fff; } 75.5%, 100% { color: rgba(255, 255, 255, 0.4); } }
@keyframes ip-on-4 { 0%, 74% { color: rgba(255, 255, 255, 0.4); } 75.5%, 100% { color: #fff; } }
@keyframes ip-n-1 { 0%, 24% { background: #fb923c; color: #000; } 25.5%, 100% { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } }
@keyframes ip-n-2 { 0%, 24% { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } 25.5%, 49% { background: #fb923c; color: #000; } 50.5%, 100% { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } }
@keyframes ip-n-3 { 0%, 49% { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } 50.5%, 74% { background: #fb923c; color: #000; } 75.5%, 100% { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } }
@keyframes ip-n-4 { 0%, 74% { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } 75.5%, 100% { background: #fb923c; color: #000; } }
.ip-inapp .ip-steps li, .ip-android .ip-steps li { color: rgba(255, 255, 255, 0.85); }
.ip-inapp .ip-n, .ip-android .ip-n { background: rgba(251, 146, 60, 0.9); color: #000; }
/* in-app browser: the "···" menu with "Open in Safari" */
.ia-top { position: absolute; left: 0; right: 0; top: 0; height: 11cqh; padding: 3.5cqh 5cqw 0; display: flex; align-items: center; justify-content: space-between; font-size: 3cqh; color: rgba(255, 255, 255, 0.8); background: rgba(28, 28, 30, 0.95); }
.ia-dots { display: inline-flex; width: 7cqh; height: 7cqh; align-items: center; justify-content: center; border-radius: 999px; color: #fdba74; animation: ip-pulse 1.3s ease-in-out infinite; }
.ia-menu { position: absolute; right: 4cqw; top: 12cqh; width: 82%; padding: 1.5cqh 3cqw 3cqh; border-radius: 3cqh; background: #2a2a2d; box-shadow: 0 3cqh 8cqh rgba(0, 0, 0, 0.6); transform-origin: 90% 0; animation: ia-menu 6s ease-in-out infinite; }
.ia-menu .ip-hl { animation: ia-hl 6s linear infinite; }
.ia-finger { position: absolute; width: 9cqh; height: 9cqh; border-radius: 999px; background: rgba(255, 255, 255, 0.45); border: 0.5cqh solid rgba(255, 255, 255, 0.85); opacity: 0; transform: translate(-50%, -50%); animation: ia-finger 6s ease-in-out infinite; pointer-events: none; }
@keyframes ia-menu { 0%, 28% { opacity: 0; transform: scale(0.85); } 34%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes ia-hl { 0%, 62% { background: rgba(255, 255, 255, 0.07); } 66%, 72% { background: rgba(251, 146, 60, 0.45); } 76%, 100% { background: rgba(251, 146, 60, 0.2); } }
@keyframes ia-finger {
  0% { left: 70%; top: 30%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  12% { left: 88%; top: 6%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  20% { left: 88%; top: 6%; opacity: 1; transform: translate(-50%, -50%) scale(0.72); }
  26% { left: 88%; top: 6%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { left: 50%; top: 32%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  66% { left: 50%; top: 32%; opacity: 1; transform: translate(-50%, -50%) scale(0.72); }
  72% { left: 50%; top: 32%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%, 100% { left: 50%; top: 32%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* Android: the install window */
.ad-dialog { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqh; padding: 3cqh 4cqw; border-radius: 4cqh; background: #2a2a2d; display: flex; flex-direction: column; align-items: center; gap: 2cqh; box-shadow: 0 3cqh 8cqh rgba(0, 0, 0, 0.6); animation: ad-up 6s ease-in-out infinite; }
.ad-dialog p { font-size: 3.4cqh; color: #fff; font-weight: 700; }
.ad-dialog > div { display: flex; gap: 3cqw; font-size: 3cqh; color: rgba(255, 255, 255, 0.7); align-items: center; }
.ad-dialog .ip-add { background: #fb923c; color: #000; padding: 1.2cqh 3cqw; animation: none; }
@keyframes ad-up { 0%, 10% { transform: translateY(130%); } 22%, 90% { transform: none; } 100% { transform: translateY(130%); } }

/* ---------- guided photos (Round 5 L) ---------- */
.gp-slot { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 24px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.05); }
.gp-thumb { position: relative; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #2b1c11, #0b0806); border: 1px dashed rgba(255, 255, 255, 0.2); transition: transform 0.15s ease; }
.gp-thumb:active { transform: scale(0.95); }
.gp-thumb.big { width: 76px; height: 76px; border-radius: 20px; }
.gp-thumb.gp-ok, .gp-thumb.gp-warn, .gp-thumb.gp-block, .gp-thumb.gp-error, .gp-thumb.gp-uploading { border-style: solid; }
.gp-thumb.gp-ok { border-color: rgba(251, 146, 60, 0.6); }
.gp-thumb.gp-warn { border-color: rgba(250, 204, 21, 0.6); }
.gp-thumb.gp-block, .gp-thumb.gp-error { border-color: rgba(248, 113, 113, 0.7); }
.gp-badge { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 10px; background: rgba(0, 0, 0, 0.65); color: #fff; }
.gp-badge.ok { background: #fb923c; color: #000; }
.gp-badge.warn { background: #facc15; color: #000; }
.gp-badge.bad { background: #f87171; color: #000; }
.gp-title { font-size: 14px; font-weight: 700; color: #fff; }
.gp-hint { font-size: 12.5px; color: #9ca3af; line-height: 1.4; margin-top: 3px; }
.gp-line { font-size: 12.5px; line-height: 1.4; margin-top: 3px; color: #9ca3af; }
.gp-line.ok { color: #fdba74; }
.gp-line.warn { color: #fde68a; }
.gp-line.bad { color: #fca5a5; }
.gp-replace { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fdba74; padding: 6px 0; }
.gp-meter { display: flex; gap: 4px; flex: none; }
.gp-meter i { width: 18px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.gp-meter i.on { background: #fb923c; }

/* ---------- dream cast (Round 5 I + J + K) ---------- */
.dc-progress { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dc-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #fdba74, #fb923c); transition: width 0.4s ease; }
.dc-card { flex: none; width: 136px; scroll-snap-align: start; text-align: left; border-radius: 28px; background: #141110; border: 1px solid rgba(255, 255, 255, 0.06); padding: 8px 8px 12px; transition: transform 0.15s ease, border-color 0.3s ease; }
.dc-card:active { transform: scale(0.97); }
.dc-card.is-open { border-color: rgba(251, 146, 60, 0.35); }
.dc-card-art { position: relative; width: 100%; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #1c1612; }
.dc-card-label { font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: #fff; margin: 10px 4px 3px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dc-state { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 0; font-size: 10.5px; font-weight: 700; color: #9ca3af; letter-spacing: 0.02em; line-height: 1.25; }
.dc-state.is-need { color: #fdba74; }
.dc-state.is-ok { color: #fed7aa; }
.dc-state.is-you { color: #fb923c; }
.dc-place .dc-state, .dc-moment .dc-state { margin-left: 0; }
.dc-place { position: relative; display: flex; width: 100%; aspect-ratio: 16 / 8; min-height: 150px; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); background: #141110; transition: transform 0.15s ease; }
.dc-place:active, .dc-moment:active { transform: scale(0.98); }
.dc-place.is-open, .dc-moment.is-open { border-color: rgba(251, 146, 60, 0.35); }
.dc-moment { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; background: #141110; border: 1px solid rgba(255, 255, 255, 0.06); transition: transform 0.15s ease; }
.dc-moment-ico { width: 36px; height: 36px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(251, 146, 60, 0.12); color: #fdba74; font-size: 14px; }
.dc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-radius: 22px; background: rgba(40, 30, 20, 0.45); border: 1px solid rgba(251, 146, 60, 0.25); }
.dc-confirm-thumb { position: relative; width: 40px; height: 40px; border-radius: 14px; overflow: hidden; flex: none; background: #1c1612; }
.dc-confirm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-confirm-actions { flex-basis: 100%; display: flex; gap: 6px; padding-left: 50px; }
.dc-pill { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #d1d5db; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap; }
.dc-pill[aria-pressed="true"] { background: #fb923c; color: #000; border-color: transparent; }
.dc-chip { min-height: 42px; padding: 9px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); text-align: left; line-height: 1.25; transition: background 0.15s ease, transform 0.15s ease; }
.dc-chip:active { transform: scale(0.96); }
.dc-chip[aria-pressed="true"] { background: #fb923c; color: #000; border-color: transparent; }
.dc-chip.is-cast { color: #fdba74; }
.dc-chip.is-cast[aria-pressed="true"] { color: #000; }
.dc-own { display: block; max-height: 120px; }
.dc-mic { width: 54px; min-height: 52px; border-radius: 20px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fdba74; background: rgba(251, 146, 60, 0.14); border: 1px solid rgba(251, 146, 60, 0.3); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.15s ease, background 0.15s ease; }
.dc-mic.is-live { background: #fb923c; color: #000; transform: scale(1.08); animation: dc-live 1.1s ease-in-out infinite; }
@keyframes dc-live { 0%, 100% { box-shadow: 0 0 0 6px rgba(251, 146, 60, 0.2), 0 0 24px rgba(251, 146, 60, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(251, 146, 60, 0.08), 0 0 36px rgba(251, 146, 60, 0.55); } }
.dc-dot { width: 6px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); transition: all 0.3s ease; }
.dc-dot.is-done { background: rgba(253, 186, 116, 0.6); }
.dc-dot.is-on { width: 18px; background: #fb923c; }
.dc-sheet-thumb { position: relative; width: 48px; height: 48px; border-radius: 16px; overflow: hidden; flex: none; background: #1c1612; }
.dc-option { width: 100%; min-height: 56px; padding: 12px 16px; border-radius: 20px; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); text-align: left; line-height: 1.25; transition: transform 0.15s ease; }
.dc-option:active { transform: scale(0.98); }
.dc-option.is-muted { color: rgba(255, 255, 255, 0.55); justify-content: center; }
/* "Add a photo" on the question itself, beside the chips, the mic and the text (app.js photoRowHTML);
 * with "From my people" beside it, the two share a line when both labels fit, else stack */
.dc-photo-add { flex: 1 1 auto; min-height: 56px; white-space: nowrap; padding: 10px 14px 10px 10px; border-radius: 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(251, 146, 60, 0.08); border: 1px solid rgba(251, 146, 60, 0.3); text-align: left; line-height: 1.2; transition: transform 0.15s ease, background 0.15s ease; }
.dc-photo-add:active { transform: scale(0.98); background: rgba(251, 146, 60, 0.16); }
.dc-photo-add.is-cast { flex: 1 0 auto; justify-content: center; min-height: 48px; padding: 8px 14px; font-size: 13.5px; color: #fdba74; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.dc-photo-ico { width: 36px; height: 36px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fdba74; background: rgba(251, 146, 60, 0.16); }
.dc-photo-hint { margin-top: 8px; font-size: 12px; line-height: 1.45; color: #6b7280; }
.dc-photo { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 22px; background: rgba(40, 30, 20, 0.45); border: 1px solid rgba(251, 146, 60, 0.3); }
.dc-photo.is-error { border-color: rgba(248, 113, 113, 0.4); }
.dc-photo-thumb { position: relative; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; flex: none; background: #1c1612; }
.dc-photo-title { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.dc-photo.is-error .dc-photo-title { color: #fca5a5; }
.dc-photo-sub { margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: rgba(254, 215, 170, 0.75); }

/* ---------- feedback sheet (Round 4 E) ---------- */
.fs-face { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; border-radius: 18px; color: #d1d5db; }
.fs-face-ico { width: 54px; height: 54px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 27px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.15s ease, background 0.15s ease; }
.fs-face:active .fs-face-ico { transform: scale(0.9); }
.fs-face[aria-pressed="true"] .fs-face-ico { background: #fb923c; color: #000; border-color: transparent; }
.fs-face-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; text-align: center; line-height: 1.2; }
.fs-panel { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 2px solid transparent; background: #1c1c1e; }
.fs-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-panel-n { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 99px; padding: 1px 7px; }
.fs-panel-x { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(127, 29, 29, 0.45); color: #fff; font-size: 22px; }
.fs-panel[aria-pressed="true"] { border-color: #f87171; }
.fs-panel[aria-pressed="true"] .fs-panel-x { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .ip-sheet, .ip-dialog, .ip-home, .ip-mine, .ip-finger, .ip-share, .ip-row.ip-hl, .ip-add, .ia-menu, .ia-finger, .ia-dots, .ad-dialog, .dc-mic.is-live,
  .ip-steps li, .ip-n { animation: none !important; }
  .ip-sheet { transform: none; }
}
@media (max-height: 620px) {
  .ip-steps li { font-size: 12px; }
}

/* ---------- pictures that do not load (app.js, "pictures that do not load") ----------
 * No browser glyph and no alt text over a card: alt text is never painted, a picture is
 * hidden while it is tried again, then a drawn picture gets .img-fb in its place:
 * absolute over the same box (.abs) or in the flow (.flow), with the retry arrow only
 * on a thumbnail (.is-small). */
#screen img, #overlay img { color: transparent; }
img[data-img-try], img[data-img-broken] { visibility: hidden; }
img[data-img-broken="card"] { display: none !important; }
.img-fb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px;
  text-align: center;
  background: #1c1c1e;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.img-fb.abs { position: absolute; inset: 0; }
.img-fb.flow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 100%;
  min-height: 120px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.img-fb:focus-visible { outline: 2px solid rgba(251, 146, 60, 0.7); outline-offset: -2px; }
.img-fb-pic { width: 28px; height: 28px; flex: none; }
.img-fb-title { font-size: 13px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }
.img-fb-sub { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; color: rgba(253, 186, 116, 0.85); }
.img-fb-sub .img-fb-spin { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -0.12em; }
.img-fb.is-small { padding: 4px; }
.img-fb.is-small .img-fb-pic, .img-fb.is-small .img-fb-title, .img-fb.is-small .img-fb-sub span { display: none; }
.img-fb.is-small .img-fb-spin { width: 18px; height: 18px; margin: 0; vertical-align: middle; }
.img-fb.is-busy { cursor: default; }
.img-fb.is-busy .img-fb-spin { animation: img-fb-spin 0.9s linear infinite; }
.img-fb.is-busy .img-fb-title, .img-fb.is-busy .img-fb-sub span { opacity: 0.5; }
@keyframes img-fb-spin { to { transform: rotate(360deg); } }