@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Content sits in a comfortable column: at most --col wide, never closer than 18px to the edge */
  --col: 354px;
  --gutter: max(18px, calc((100% - var(--col)) / 2));
  --bg: #07070C;
  --tile: #15151D;
  --ink: #F4F1FF;
  --soft: #D6D0EC;
  --muted: #A9A3C4;
  --dim: #8A85A6;
  --lilac: #C9B6FF;
  --pink: #FFB3CB;
  --blush: #FFD6E8;
  --orange: #FFB07A;
  --glow: linear-gradient(90deg, #FFB3CB 0%, #EEDCFF 50%, #FFC49A 100%);
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); }
/* Colours Safari shows behind its top and bottom bars, matched to each page's edges */
html { --top: #100F14; --bot: #281B36; background: var(--bot); }
html.p-lost { --top: #2D263F; --bot: #4A2A33; }
html.p-reading { --top: #2D263F; --bot: #4A2A34; }
html.p-blame { --top: #2B1824; --bot: #4D302A; }
body { background: linear-gradient(180deg, var(--top) 0%, var(--top) 50%, var(--bot) 50%, var(--bot) 100%) fixed; background-color: var(--top); }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
button { font: inherit; color: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* App shell: always full width so the background reaches both edges; content stays in the centred column */
.app {
  position: relative;
  overflow: hidden;
  overflow: clip; /* hidden still lets focus and overflowing cards scroll it; clip doesn't */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.1; pointer-events: none; z-index: 9; }
.deco { position: absolute; pointer-events: none; }

/* Back and close buttons sit in the corners; the status date lines up with the content */
@media (max-width: 767px) { .topbar { width: 100%; max-width: 480px; margin: 0 auto; } .status .topbar { max-width: none; } }
.topbar { position: relative; z-index: 3; height: 56px; flex-shrink: 0; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.screen {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  display: flex; flex-direction: column; gap: clamp(9px, 1.7dvh, 14px);
  padding: 4px var(--gutter) max(20px, env(safe-area-inset-bottom));
}
.screen::-webkit-scrollbar { display: none; }
/* Screens are split into two panes; on phones the panes disappear and everything stacks */
.pane { display: contents; }
.screen.enter > .pane > * { animation: rise 0.7s var(--ease-out) both; }
.screen.enter > .pane > :nth-child(2) { animation-delay: 0.06s; }
.screen.enter > .pane > :nth-child(3) { animation-delay: 0.12s; }
.screen.enter > .pane-r > * { animation-delay: 0.16s; }
.screen.enter > .pane-r > :nth-child(2) { animation-delay: 0.22s; }
.screen.enter > .pane-r > :nth-child(n+3) { animation-delay: 0.28s; }
.out .pane-l > .cta { order: 3; }

/* Type */
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--lilac); text-transform: uppercase; }
.label.grey { color: var(--muted); }
.sub { margin: 0; font-family: var(--mono); font-size: 16px; line-height: 1.42; color: var(--soft); }
h1 { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }

.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--blush);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 7px 12px;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #FF8FC0; box-shadow: 0 0 10px #FF8FC0; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

/* Buttons */
.cta {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 18px; font-weight: 600; color: #0B0B12; text-decoration: none;
  height: 60px; border: 0; border-radius: 999px; background: var(--glow);
  box-shadow: 0 0 30px rgba(255,120,190,0.5), 0 0 70px rgba(255,160,110,0.4);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 26px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover { box-shadow: 0 0 36px rgba(255,120,190,0.65), 0 0 80px rgba(255,160,110,0.5); }
.cta:active { transform: scale(0.98); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ghost {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted);
  background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  min-height: 44px; padding: 0 18px; cursor: pointer;
}
.ghost:hover { color: var(--ink); border-color: rgba(255,255,255,0.3); }
.round { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); }
.round.next { width: 64px; height: 64px; margin-top: 6px; align-self: flex-end; flex-shrink: 0; }
.round.glow { border: 0; background: linear-gradient(135deg, #FFB3CB 0%, #EEDCFF 50%, #FFC49A 100%); box-shadow: 0 0 24px rgba(255,120,190,0.45); }
.round[aria-busy="true"] { opacity: 0.5; pointer-events: none; }

/* Toast */
.toast {
  position: absolute; z-index: 20; left: var(--gutter); right: var(--gutter); bottom: calc(96px + env(safe-area-inset-bottom));
  font-family: var(--mono); font-size: 13px; line-height: 1.4; text-align: center; color: #0B0B12;
  background: var(--glow); border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,120,190,0.35);
  opacity: 0; transform: translateY(24px) scale(0.92); pointer-events: none; transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.toast.on { opacity: 1; transform: none; }


/* 01 Status */
.status .screen { padding-top: 18px; }
/* Content sits as one group in the middle; the star and horizon are placed around it by status.js */
.status .screen { padding-top: clamp(60px, 15dvh, 140px); }
/* Everything left aligned, arrows and icons pushed to the right edge */

.status h1 { font-size: clamp(27px, 4.2dvh, 34px); max-width: 230px; position: relative; }
.status .topbar { justify-content: space-between !important; padding: 0 var(--gutter); }
.answer {
  margin: 0; font-weight: 700; font-size: min(25vw, clamp(64px, 12dvh, 100px)); line-height: 0.9; letter-spacing: -0.06em;
  background: linear-gradient(180deg, #FFFFFF 10%, #EADFFF 55%, #C9B6FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,130,150,0.55));
  padding-bottom: 6px; white-space: nowrap;
}
.bottom { margin-top: clamp(14px, 3dvh, 28px); display: flex; flex-direction: column; gap: clamp(10px, 1.8dvh, 16px); flex-shrink: 0; }
/* Countdown: plain numbers, no boxes, with what it's counting to on the right */
.timer { display: flex; align-items: flex-start; gap: 16px; margin-top: clamp(6px, 1.4dvh, 12px); }
.countdown { display: flex; align-items: flex-start; gap: clamp(14px, 4.4vw, 20px); flex-shrink: 0; }
.countdown div { text-align: left; overflow: hidden; }
.countdown div + div { position: relative; overflow: visible; }
.countdown div + div::before { content: ':'; position: absolute; left: calc(clamp(14px, 4.4vw, 20px) / -2); transform: translateX(-50%); top: -1px; font-family: var(--mono); font-size: clamp(22px, 3.4dvh, 30px); line-height: 1; color: rgba(255,255,255,0.25); }
.countdown b { display: block; font-family: var(--mono); font-size: clamp(24px, 3.8dvh, 32px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.countdown div:last-child b { color: var(--pink); }
.countdown span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--muted); margin-top: 6px; }
.count-label { flex: 1 1 auto; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.14); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; line-height: 1.55; color: var(--muted); }
.count-label b { font-weight: 500; color: var(--ink); }
.count-label .lbl-long { display: none; }
/* Countdown woven into the paragraph */
.status .sub.story { font-size: 14px; line-height: 1.5; }
.story #countText { color: var(--muted); }
.story #countText b { display: inline-block; font-weight: 500; color: var(--pink); font-variant-numeric: tabular-nums; }
.story #countText b.tick { animation: tick 0.45s var(--ease-out); }
/* Footer on the status page */
.status .screen { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
.site-url { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom)); text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(244,241,255,0.55); pointer-events: none; } /* the content column is narrow, so the short label always fits best */
.ctas { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.cta.alt { background: rgba(255,255,255,0.05); color: var(--ink); border: 1px solid rgba(255,179,203,0.45); box-shadow: 0 0 24px rgba(255,120,190,0.15); }
.cta.alt svg { color: var(--pink); }
.cta.alt::after { display: none; }
#close { margin-left: auto; }
.tagline { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--dim); margin-top: -4px; }

/* 02 Reading */
.reading h1.big { font-size: clamp(36px, 5.6dvh, 46px); line-height: 0.98; letter-spacing: -0.04em; }
.reading h1.q { font-size: clamp(29px, 4.6dvh, 38px); }
@keyframes spin { to { transform: rotate(360deg); } }
.dots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.dots i { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); transition: background 0.3s; }
.dots i.on { background: var(--pink); }
.options { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.option {
  text-align: left; color: var(--ink); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 10px 18px; min-height: clamp(52px, 7.8dvh, 66px); cursor: pointer; display: flex; align-items: center; gap: 14px;
  transition: background 0.15s, border-color 0.15s;
}
/* Hover only on real pointers: on phones it sticks to whatever sits under the last tap */
@media (hover: hover) { .option:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,179,203,0.5); } }
.option .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--lilac); }
.option .t { font-family: var(--mono); font-size: 16px; line-height: 1.35; }
/* Pill fields */
.name-input, .sheet input, .sheet textarea {
  font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--pink);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  padding: 0 24px; height: 62px; width: 100%; outline: none; resize: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.name-input::placeholder, .sheet input::placeholder, .sheet textarea::placeholder { color: rgba(255,179,203,0.4); }
.name-input:focus, .sheet input:focus, .sheet textarea:focus { border-color: var(--pink); background: rgba(255,179,203,0.08); box-shadow: 0 0 0 4px rgba(255,179,203,0.12), 0 0 30px rgba(255,120,190,0.25); }
.loader { align-self: center; width: min(340px, 86vw, 40dvh); height: auto; flex-shrink: 0; }
.load-lines { display: flex; flex-direction: column; gap: 12px; width: min(290px, 100%); align-self: center; }
.loading { align-items: center; }
.loading .load-title, .loading .load-lines { width: min(290px, 100%); align-self: center; }
.load-lines div { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--dim); border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px; transition: color 0.3s; }
/* Status: the diamond star, top right */
.star-hero { right: calc(50% - var(--col) / 2 - 80px); top: -54px; width: min(250px, 34dvh); aspect-ratio: 1; z-index: 1; display: flex; align-items: center; justify-content: center; }
.star-hero .halo { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(255,110,190,0.55) 0%, rgba(200,150,255,0.25) 50%, rgba(7,7,12,0) 72%); animation: breathe 4s ease-in-out infinite; }
.star-hero .diamond { position: relative; width: 86%; height: 86%; animation: spin 40s linear infinite; filter: drop-shadow(0 0 24px rgba(255,120,190,0.45)); }
.star-hero .spark-a { position: absolute; left: 2%; top: 20%; width: 16px; height: 16px; animation: twinkle 3s ease-in-out infinite; }
.star-hero .spark-b { position: absolute; right: 20%; bottom: 4%; width: 11px; height: 11px; animation: twinkle 4s ease-in-out -1.5s infinite; }
.orbits .orbit { transform-origin: 150px 150px; animation: spin 6s linear infinite; }
.orbits .orbit.slow { animation-duration: 11s; animation-direction: reverse; }
.date-input { color-scheme: dark; -webkit-appearance: none; appearance: none; text-align: left; display: flex; align-items: center; line-height: 60px; }
.date-input::-webkit-date-and-time-value { text-align: left; }
.date-input::-webkit-calendar-picker-indicator { filter: invert(80%) sepia(30%) saturate(400%) hue-rotate(290deg); opacity: 0.8; cursor: pointer; }

/* Shareable 9:16 cards. Built at natural size, scaled to fit the stage. */
.result { padding: 0 14px 18px; gap: 10px; overflow: visible; }
.stage { flex: 1 1 auto; min-height: 0; position: relative; }
.stage::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 300px; height: 40px; margin-left: -150px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(200,150,255,0.5) 0%, rgba(7,7,12,0) 70%); z-index: -1; }
.stage > .fit { position: absolute; left: 50%; top: 50%; transform-origin: center; }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-shrink: 0; }
/* Tip jar link: quiet, mono, never louder than the buttons */
.tip { pointer-events: auto; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,179,203,0.4); transition: color 0.2s, border-color 0.2s; }
.tip:hover { color: var(--pink); border-color: var(--pink); }
.actions .tip { margin-right: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(244,241,255,0.55); padding: 6px 0; white-space: nowrap; }
@media (max-width: 374px) { .actions .tip { letter-spacing: 0.06em; font-size: 9px; } }

.card {
  width: 315px; height: 560px; border-radius: 26px; overflow: hidden;
  background: var(--bg); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px rgba(0,0,0,0.75), 0 10px 20px rgba(0,0,0,0.5), 0 0 70px rgba(200,150,255,0.35);
  padding: 10px; display: flex; flex-direction: column; gap: 7px; color: var(--ink); font-family: var(--sans);
}
.card .hero { height: 240px; flex-shrink: 0; border-radius: 20px; position: relative; overflow: hidden; background: var(--tile); padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.card .hero .shape { position: absolute; left: 24px; top: -50px; width: 290px; height: 290px; }
.card .hero .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(180deg, rgba(21,21,29,0) 0%, rgba(21,21,29,0.92) 60%); }
.card .meta { position: relative; display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; line-height: 1.3; }
.card .meta { text-shadow: 0 1px 2px rgba(7,7,12,0.85), 0 0 12px rgba(7,7,12,0.7); }
.card .meta i { font-style: normal; color: rgba(244,241,255,0.62); }
.card .meta .title { font-size: 10px; color: var(--blush); margin-bottom: 4px; }
.card .meta .title { margin-bottom: 0; }
.card > .meta { height: 16px; flex-shrink: 0; padding: 4px 6px 0; justify-content: center; text-shadow: none; }
.card .facts { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; line-height: 1.3; text-shadow: 0 1px 2px rgba(7,7,12,0.85), 0 0 12px rgba(7,7,12,0.7); }
.card .facts i { font-style: normal; color: rgba(244,241,255,0.62); }
.card .hero-text { position: relative; display: flex; flex-direction: column; gap: 8px; }
.card .arch { display: block; font-weight: inherit; color: var(--orange); }
.card .facts .v { font-weight: inherit; color: var(--orange); }
.card .head { margin: 0; font-weight: 700; font-size: 27px; line-height: 1.02; letter-spacing: -0.035em; }
.card .tiles { height: 104px; flex-shrink: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.card .mood { border-radius: 20px; position: relative; overflow: hidden; background: linear-gradient(160deg, #C7A8FF 0%, #9C7BEB 55%, #5E3FA8 100%); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.card .mood svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.card .tile-l { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; line-height: 1.5; }
.card .tile-v { position: relative; font-weight: 700; font-size: 34px; line-height: 0.9; letter-spacing: -0.04em; }
.card .energy { border-radius: 20px; background: linear-gradient(160deg, #FFDBAD 0%, #FFB3CB 55%, #F49AD8 100%); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; color: #171836; }
.card .energy .row { display: flex; justify-content: space-between; gap: 6px; }
.card .energy .row:first-child { align-items: flex-start; }
.card .energy .row:last-child { align-items: flex-end; }
.card .badge { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; background: #171836; color: #FFDBAD; border-radius: 999px; padding: 4px 8px; }
.card .rules { flex: 1 1 auto; border-radius: 20px; background: var(--tile); border: 1px solid rgba(255,255,255,0.08); padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card .rules > div { display: flex; flex-direction: column; gap: 6px; }
.card .rules > div + div { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 12px; }
.card .rules b { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.14em; }
.card .rules span { font-family: var(--mono); font-size: 8.5px; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.card .rules .ax { font-style: normal; color: var(--orange); }
.card .foot { height: 16px; flex-shrink: 0; padding: 0 6px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--dim); }

/* 03 Blame */
.sentence { margin: 0; font-weight: 700; font-size: clamp(24px, 3.8dvh, 30px); line-height: 1.55; letter-spacing: -0.03em; }
/* Tappable pills inside the sentence. They wrap across lines as pills too. */
.sentence a, .sentence .pill-edit {
  font-weight: 500; color: #E3D6FF; text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
  background: rgba(201,182,255,0.14); border: 1px solid rgba(201,182,255,0.4); border-radius: 999px;
  padding: 0.04em 0.42em 0.08em; margin: 0 0.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background 0.2s, border-color 0.2s;
}
.sentence .pill-edit { outline: none; caret-color: var(--pink); -webkit-user-select: text; user-select: text; cursor: text; }
.sentence .pill-edit:empty::before { content: attr(data-placeholder); color: rgba(227,214,255,0.45); }
.sentence .pill-edit:focus { background: rgba(255,179,203,0.16); border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,179,203,0.12), 0 0 24px rgba(255,120,190,0.25); color: #FFFFFF; }
.sentence .pill-edit.swap { animation: swap 0.5s var(--spring); }
.sentence .pill-edit::selection { background: rgba(255,179,203,0.35); color: #FFFFFF; }
/* Name in peach, incident in lilac, format in pink */
.sentence .pill-edit[data-edit="name"] { color: #FFE6D6; background: rgba(255,196,154,0.16); border-color: rgba(255,196,154,0.5); }
.sentence .pill-edit[data-edit="name"]:empty::before { color: rgba(255,214,190,0.5); }
.sentence .pill-edit[data-edit="name"]:focus { background: rgba(255,196,154,0.24); border-color: #FFC49A; box-shadow: 0 0 0 3px rgba(255,196,154,0.14), 0 0 24px rgba(255,160,110,0.3); caret-color: #FFC49A; }
.sentence a:hover, .sentence a:active { background: rgba(201,182,255,0.24); border-color: rgba(201,182,255,0.7); }
.sentence a.fmt { color: #FFE0EA; background: rgba(255,179,203,0.16); border-color: rgba(255,179,203,0.5); }
.tries { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.tries button { letter-spacing: inherit; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: #E8E4F6; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 0 14px; height: 40px; cursor: pointer; }
.tries button:hover { border-color: rgba(255,179,203,0.5); }
.tries.empty { display: none; }
.tries.picker button { display: inline-flex; align-items: center; gap: 8px; }
.tries.picker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tries.picker button[aria-checked="true"] { color: #FFE0EA; background: rgba(255,179,203,0.18); border-color: rgba(255,179,203,0.6); }
.tries.swap-in > * { animation: rise 0.45s var(--ease-out) both; }
.tries.swap-in > :nth-child(2) { animation-delay: 0.04s; } .tries.swap-in > :nth-child(3) { animation-delay: 0.08s; }
.tries.swap-in > :nth-child(4) { animation-delay: 0.12s; } .tries.swap-in > :nth-child(5) { animation-delay: 0.16s; } .tries.swap-in > :nth-child(6) { animation-delay: 0.2s; }
.sentence a.fmt[aria-expanded="true"] { background: rgba(255,179,203,0.28); border-color: var(--pink); box-shadow: 0 0 20px rgba(255,120,190,0.3); }
.helper { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--pink); }
.blame .screen.input { padding-top: clamp(40px, 12dvh, 120px); }
.blame .screen.input > .pane-l > :first-child, .status .screen > :first-child { margin-top: auto; }
.blame .screen.input > .pane-r > :last-child, .status .screen > :last-child { margin-bottom: auto; }
.blame .screen.input .cta { margin-top: clamp(14px, 3dvh, 28px); }
.blame .cta svg { color: currentColor; }
.app.is-output .star-hero, .app.is-output .horizon { opacity: 0; transition: opacity 0.3s ease; }
.star-hero, .horizon { transition: opacity 0.4s ease, top 0.45s var(--ease-out), bottom 0.45s var(--ease-out); }
/* The moon on the blame page */
.moon-hero .diamond { animation: float 9s ease-in-out infinite; }

.scrim { position: absolute; inset: 0; z-index: 5; background: rgba(7,7,12,0.5); border: 0; padding: 0; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: -60px; z-index: 6; max-height: calc(92% + 60px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--tile); border-top: 1px solid rgba(255,255,255,0.1); border-radius: 30px 30px 0 0;
  padding: 10px 20px calc(60px + max(30px, env(safe-area-inset-bottom))); display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
  transform: translateY(100%); transition: transform 0.55s cubic-bezier(0.22, 1.25, 0.36, 1);
}
.sheet-open .scrim { opacity: 1; }
.sheet-open .sheet { transform: none; }
.sheet .grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.22); margin-bottom: 10px; flex-shrink: 0; }
.sheet .field-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); }
.sheet input, .sheet textarea { font-size: 21px; font-weight: 500; }
.sheet input { height: 56px; margin-bottom: 10px; }
.sheet textarea { height: 96px; border-radius: 28px; padding: 16px 22px; line-height: 1.3; }
.sheet .cta { margin-top: 12px; }
.formats { display: flex; flex-direction: column; }
.formats button { text-align: left; color: var(--soft); background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); height: 62px; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 14px; }
.formats button svg.ic { width: 22px; height: 22px; fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.formats button span { flex: 1 1 auto; font-size: 20px; }
.formats button .tick { visibility: hidden; }
.formats button[aria-checked="true"] { color: var(--ink); }
.formats button[aria-checked="true"] span { font-weight: 500; }
.formats button[aria-checked="true"] svg.ic { stroke: var(--pink); }
.formats button[aria-checked="true"] .tick { visibility: visible; }

.out h1 { font-size: clamp(32px, 5dvh, 42px); line-height: 0.98; letter-spacing: -0.04em; }
.doc { margin-top: 6px; background: #FFFFFF; color: #15151D; border-radius: 22px; overflow: hidden; box-shadow: 0 0 60px rgba(200,150,255,0.25); flex-shrink: 0; }
.doc .bar { padding: 12px 18px; border-bottom: 1px solid #EBEAF0; }
.doc .body { margin: 0; padding: 16px 18px 20px; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.slack .bar { font-weight: 600; font-size: 15px; color: #1D1C1D; }
.slack .msg { padding: 16px 18px 20px; display: flex; gap: 12px; color: #1D1C1D; }
.slack .av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(140deg, #B48CFF, #FF7AC6 60%, #FF8A4C); }
.slack .who { display: flex; align-items: baseline; gap: 8px; }
.slack .who strong { font-size: 15px; }
.slack .who span { font-size: 12px; color: #616061; }
.slack .body { padding: 4px 0 0; font-size: 16px; }
.email .bar { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #55536A; }
.email .bar strong { color: #15151D; }
.ooo .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ooo .bar strong { display: block; font-size: 15px; }
.ooo .bar small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: #55536A; }
.toggle { width: 44px; height: 26px; border-radius: 13px; background: #B48CFF; position: relative; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; }
.out .cta { margin-top: auto; height: 58px; }

.cert {
  position: relative; width: 300px; height: 533px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(165deg, #E8663F 0%, #C93E86 50%, #4A1E66 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.75), 0 10px 20px rgba(0,0,0,0.5), 0 0 70px rgba(200,150,255,0.4);
  padding: 40px 22px 20px; display: flex; flex-direction: column; gap: 10px; color: #FFFFFF; font-family: var(--sans);
}
.cert .glow { position: absolute; inset: 0; background: radial-gradient(circle at 25% 12%, rgba(255,190,120,0.5) 0%, rgba(255,190,120,0) 55%); }
.cert .lines { position: absolute; left: 0; top: 0; }
.cert .notch { position: absolute; left: 50%; top: 14px; width: 46px; height: 9px; margin-left: -23px; border-radius: 5px; background: var(--bg); }
.cert .top { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; }
.cert .title { position: relative; margin-top: 6px; font-weight: 700; font-size: 46px; line-height: 0.92; letter-spacing: -0.04em; }
.cert .dates { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; line-height: 1.5; color: #FFEDE6; }
.cert .fields { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.cert .f { display: flex; flex-direction: column; gap: 2px; }
.cert .f small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: #FFD9E8; }
.cert .f .v1 { font-size: 19px; font-weight: 500; overflow-wrap: anywhere; }
.cert .f .v2 { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cert .f .v3 { font-size: 14px; line-height: 1.3; color: #FFF0F5; }
.cert .sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid rgba(255,255,255,0.22); padding-top: 12px; }
.cert .sign b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; }
.cert .sign small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: #FFD9E8; }
.stamp { width: 82px; height: 82px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--pink); color: var(--pink); font-family: var(--mono); font-size: 9px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-14deg); padding: 10px; }

/* 404 */
.lost h1 { font-size: clamp(36px, 5.6dvh, 46px); line-height: 0.98; letter-spacing: -0.04em; }
.lost .cta { margin-top: auto; }

/* iPhone SE and mini in Safari, with browser bars showing */
@media (max-height: 640px) {
  .blame .screen.input { padding-top: 0; gap: 12px !important; }
  .blame .tries button { height: 34px; }
  .status .screen { padding-top: 40px; }
  .status .sub { font-size: 14px; line-height: 1.38; }
  .answer { font-size: min(22vw, 58px); }
  .star-hero { width: 190px; right: -30px; }
  .load-lines { gap: 8px; }
  .load-lines div { padding-bottom: 7px; }
  .result .round { width: 46px; height: 46px; }
  .topbar { height: 48px; }
  .sheet input { height: 50px; margin-bottom: 4px; font-size: 19px; }
  .sheet textarea { height: 84px; font-size: 19px; }
  .formats button { height: 54px; }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */
:root { --spring: cubic-bezier(0.22, 1.25, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

/* Page to page: cross-fade through a soft blur, tab bar stays put */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.32s ease both; }
::view-transition-new(root) { animation: vt-in 0.6s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.97); filter: blur(8px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.03); filter: blur(10px); } }

/* Screen contents rise in one after another */
.screen.enter > * { animation: rise 0.7s var(--ease-out) both; }
.screen.enter > :nth-child(2) { animation-delay: 0.06s; }
.screen.enter > :nth-child(3) { animation-delay: 0.12s; }
.screen.enter > :nth-child(4) { animation-delay: 0.18s; }
.screen.enter > :nth-child(5) { animation-delay: 0.24s; }
.screen.enter > :nth-child(6) { animation-delay: 0.3s; }
.screen.enter > :nth-child(7) { animation-delay: 0.36s; }
.screen.enter > :nth-child(8) { animation-delay: 0.42s; }
.screen.enter > :nth-child(n+9) { animation-delay: 0.48s; }
.screen.enter.result > * { animation: none; }
.options > * { animation: rise 0.6s var(--ease-out) both; }
.options > :nth-child(1) { animation-delay: 0.16s; }
.options > :nth-child(2) { animation-delay: 0.22s; }
.options > :nth-child(3) { animation-delay: 0.28s; }
.options > :nth-child(4) { animation-delay: 0.34s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* Leaving a screen */
.app.leaving .screen > * { animation: leave 0.24s ease-in both !important; }
.app.leaving .topbar > * { animation: leave 0.24s ease-in both; }
@keyframes leave { to { opacity: 0; transform: translateY(-10px); filter: blur(6px); } }

/* Starfield */
.stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #FFF; opacity: 0.15; animation: twinkle var(--d) ease-in-out var(--delay) infinite; }
@keyframes twinkle { 50% { opacity: 0.85; transform: scale(1.4); } }
.stars b { position: absolute; top: 12%; left: 110%; width: 90px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), #FFD6E8); transform: rotate(-24deg); animation: shoot 11s linear 3s infinite; }
@keyframes shoot { 0% { transform: translate(0, 0) rotate(-24deg); opacity: 0; } 2% { opacity: 1; } 9% { transform: translate(-560px, 250px) rotate(-24deg); opacity: 0; } 100% { opacity: 0; transform: translate(-560px, 250px) rotate(-24deg); } }

/* Status: planets drift, the answer spells itself in, the seconds roll */
.horizon { animation: glow 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translate(-6px, 10px) scale(1.03); } }
@keyframes glow { 50% { box-shadow: 0 -22px 120px rgba(255,140,190,0.7), inset 0 18px 50px rgba(255,205,225,0.75); } }
.answer { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.answer span {
  /* Padding gives overhanging glyphs room so tight letters aren't clipped by their neighbour's box */
  display: inline-block; white-space: pre; padding: 0.06em 0.1em 0.16em; margin: -0.06em -0.1em -0.16em;
  background: linear-gradient(180deg, #FFE3EE 8%, #FFB3CB 48%, #FF9466 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: letter 0.9s var(--spring) both; animation-delay: calc(0.25s + var(--i) * 0.055s);
}
.answer span.p { margin-left: -0.03em; }
@keyframes letter { from { opacity: 0; transform: translateY(0.45em) rotate(8deg) scale(0.6); filter: blur(10px); } }
.countdown b.tick { animation: tick 0.45s var(--ease-out); }
@keyframes tick { from { transform: translateY(-40%); opacity: 0; filter: blur(3px); } }

/* Buttons: soft press and a shimmer */
.cta, .option, .round, .ghost, .tries button, .formats button, .icon-btn { position: relative; overflow: hidden; transition: transform 0.25s var(--spring), background 0.15s, border-color 0.15s, box-shadow 0.2s; }
.cta:active, .option:active, .round:active, .ghost:active, .tries button:active, .icon-btn:active { transform: scale(0.96); }
.cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shimmer 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes shimmer { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.ripple { position: absolute; border-radius: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: rgba(255,255,255,0.55); pointer-events: none; animation: ripple 0.65s ease-out forwards; }
@keyframes ripple { to { transform: scale(40); opacity: 0; } }

/* Reading: answers light up, dots fill, cosmos breathes */
.option.picked { background: rgba(255,179,203,0.16); border-color: var(--pink); box-shadow: 0 0 30px rgba(255,120,190,0.35); transform: scale(1.02); }
.option.picked .l { color: var(--pink); }
.options.chosen .option:not(.picked) { opacity: 0.35; transform: scale(0.98); transition: opacity 0.25s, transform 0.25s; }
.dots i.now { transform-origin: left; animation: fill 0.6s var(--ease-out) 0.1s both; }
@keyframes fill { from { transform: scaleX(0); } }
.orbits > circle:nth-of-type(5) { transform-origin: 150px 150px; animation: breathe 2.4s ease-in-out infinite; }
.orbits > circle:nth-of-type(-n+4) { transform-origin: 150px 150px; animation: ring-pulse 2.4s ease-out infinite; }
.orbits > circle:nth-of-type(2) { animation-delay: 0.2s; } .orbits > circle:nth-of-type(3) { animation-delay: 0.4s; } .orbits > circle:nth-of-type(4) { animation-delay: 0.6s; }
@keyframes breathe { 50% { transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(255,140,190,0.9)); } }
@keyframes ring-pulse { 0% { stroke: rgba(255,255,255,0.12); } 30% { stroke: rgba(255,179,203,0.7); } 100% { stroke: rgba(255,255,255,0.12); } }
/* Loading lines: the active line draws its underline, then the dots hand over to a drawn tick */
.load-lines div { position: relative; }
.load-lines div::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, #B48CFF, var(--pink), #FF8A4C); transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.6s; }
.load-lines div.active::after { transform: scaleX(1); }
.load-lines div.done::after { opacity: 0.45; }
.load-lines div.active > span:first-child { color: var(--ink); transition: color 0.4s; }
.load-lines div.done > span:first-child { color: var(--pink); }
.load-lines div { align-items: center; }
.load-lines div > span:first-child { flex: 1 1 auto; min-width: 0; }
.load-lines .st { position: relative; flex: 0 0 auto; text-align: right; white-space: nowrap; }
.load-lines .st > * { display: inline-block; font-style: normal; font-weight: inherit; transition: opacity 0.35s ease, transform 0.45s var(--ease-out); }
.load-lines .st > .ok { position: absolute; right: 0; top: 0; bottom: 0; }
.load-lines .dots { letter-spacing: 0.2em; }
.load-lines div.active:not(.done) .dots { animation: breathe 1.1s ease-in-out infinite; }
.load-lines .ok { display: inline-flex !important; align-items: center; gap: 6px; opacity: 0; transform: translateY(5px); }
.load-lines .ok svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.load-lines .ok path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 0.5s var(--ease-out) 0.15s; }
.load-lines div.done .dots { opacity: 0; transform: translateY(-5px); }
.load-lines div.done .ok { opacity: 1; transform: none; }
.load-lines div.done .ok path { stroke-dashoffset: 0; }
@keyframes breathe { 50% { opacity: 0.35; } }

/* Shareable cards fly in, the shape spins awake, a glint passes */
.stage { perspective: 1200px; }
.float > .card, .float > .cert { animation: card-in 1.1s var(--ease-out) both; }
@keyframes card-in {
  0% { opacity: 0; transform: translateY(80px) rotateX(24deg) rotateY(-18deg) scale(0.82); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.card .shape { animation: shape-in 1.4s var(--spring) 0.35s both; transform-origin: 50% 50%; }
@keyframes shape-in { from { opacity: 0; transform: scale(0.3) rotate(-120deg); } }
.card .hero-text, .card .meta { animation: rise 0.8s var(--ease-out) 0.7s both; }
.card .tiles > *, .card .rules, .card .foot { animation: rise 0.7s var(--ease-out) both; }
.card .tiles > :first-child { animation-delay: 0.85s; } .card .tiles > :last-child { animation-delay: 0.95s; }
.card .rules { animation-delay: 1.05s; } .card .foot { animation-delay: 1.15s; }
.card .energy circle + circle { animation: draw 1.4s var(--ease-out) 1s both; }
@keyframes draw { from { stroke-dasharray: 0 201; } }
.card::after, .cert::after { content: ''; position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 60%); transform: translateX(-100%); opacity: 0; animation: glint 1.6s ease-in-out 1.5s both; }
.card { position: relative; }
@keyframes glint { 0% { opacity: 1; transform: translateX(-100%); } 99% { opacity: 1; transform: translateX(100%); } 100% { opacity: 0; transform: translateX(100%); } }
/* Saving an image: freeze everything in its final state */
.exporting, .exporting *, .exporting::after { animation: none !important; transition: none !important; }
.exporting .gloss, .exporting::before, .exporting .card::before, .exporting .cert::before { display: none; }
.cert .stamp { animation: stamp 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1.2s both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-40deg); } 100% { opacity: 1; transform: scale(1) rotate(-14deg); } }
.cert .fields .f { animation: rise 0.6s var(--ease-out) both; }
.cert .fields .f:nth-child(1) { animation-delay: 0.6s; } .cert .fields .f:nth-child(2) { animation-delay: 0.7s; } .cert .fields .f:nth-child(3) { animation-delay: 0.8s; }
.actions > * { animation: rise 0.6s var(--spring) both; }
.actions > :first-child { animation-delay: 1.3s; } .actions > :last-child { animation-delay: 1.4s; }

/* Sparkle burst */
.spark { position: absolute; left: 50%; top: 50%; width: var(--z); height: var(--z); pointer-events: none; z-index: 4; animation: spark 1.1s var(--ease-out) var(--delay) both; }
.spark svg { width: 100%; height: 100%; display: block; }
@keyframes spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(160deg); } }

/* Blame: cosmic flash between sentence and output */
.flash { position: absolute; inset: 0; z-index: 15; pointer-events: none; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 80%), rgba(255,255,255,0.95) 0%, rgba(255,179,203,0.7) 18%, rgba(200,150,255,0.35) 40%, rgba(7,7,12,0) 70%); animation: flash 0.75s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
.doc { animation: doc-in 0.9s var(--spring) 0.15s both; transform-origin: 50% 100%; }
@keyframes doc-in { from { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(0.9); } }
.sentence a.swap { display: inline; animation: swap 0.5s var(--spring); }
@keyframes swap { from { opacity: 0; filter: blur(6px); } }
.formats button[aria-checked="true"] .tick { animation: pop 0.4s var(--spring); }
.pill::before { animation: pulse 2s ease-in-out infinite; }
.toast.on { animation: toast-glow 1.6s ease-in-out infinite alternate; }
@keyframes toast-glow { to { box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 46px rgba(255,120,190,0.55); } }

/* Glossy hovering cards */
.stage { touch-action: none; }
.float { transform-style: preserve-3d; will-change: transform; }
/* Shine, driven by tilt from js/core.js: --shine (0 to 1), --mx/--my (highlight), --bx/--by (holographic band) */
.gloss {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 16%), rgba(255,255,255,calc(0.06 + var(--shine, 0) * 0.21)) 0%, rgba(255,255,255,calc(0.015 + var(--shine, 0) * 0.06)) 24%, rgba(255,255,255,0) 46%),
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,190,220,calc(0.03 + var(--shine, 0) * 0.16)) 41%, rgba(214,196,255,calc(0.05 + var(--shine, 0) * 0.2)) 50%, rgba(255,196,150,calc(0.03 + var(--shine, 0) * 0.15)) 59%, rgba(255,255,255,0) 70%);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, var(--bx, 50%) var(--by, 50%);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}
/* The certificate is bright pink, so its shine needs to be stronger to read as glossy */
.cert .gloss {
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 16%), rgba(255,255,255,calc(0.14 + var(--shine, 0) * 0.42)) 0%, rgba(255,255,255,calc(0.04 + var(--shine, 0) * 0.14)) 24%, rgba(255,255,255,0) 46%),
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,230,240,calc(0.08 + var(--shine, 0) * 0.34)) 41%, rgba(235,225,255,calc(0.12 + var(--shine, 0) * 0.42)) 50%, rgba(255,226,200,calc(0.08 + var(--shine, 0) * 0.32)) 59%, rgba(255,255,255,0) 70%);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, var(--bx, 50%) var(--by, 50%);
  background-repeat: no-repeat;
}

/* Loading to card: a hyperspace jump */
.warp { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.warp i { position: absolute; left: 0; top: 0; width: var(--w); height: 2px; border-radius: 2px; transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), #FFD6E8 60%, #FFFFFF); }
.warping .warp i { animation: streak 0.75s cubic-bezier(0.5, 0, 0.9, 0.5) var(--d) forwards; }
@keyframes streak {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scaleX(0.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(320px) scaleX(2.2); }
}
.loader > circle, .loader g { transition: transform 0.9s cubic-bezier(0.6, 0, 0.8, 0.4), opacity 0.7s ease; }
.warping .loader { animation: none; }
.warping .loader > circle:nth-of-type(5) { animation: swell 1.1s cubic-bezier(0.55, 0, 0.75, 0.3) forwards; }
.warping .loader > circle:nth-of-type(-n+4), .warping .loader g { animation: none; transform: scale(2.4); opacity: 0; }
@keyframes swell { 0% { transform: scale(1); } 100% { transform: scale(9); filter: brightness(1.8) drop-shadow(0 0 40px #FFB3CB); } }
.warping > :not(.loader):not(.warp) { transition: opacity 0.5s ease, transform 0.6s ease, filter 0.5s ease; opacity: 0; transform: translateY(30px); filter: blur(6px); }
/* The card spins in out of the flash */
.float > .card.warp-in, .float > .cert.warp-in { animation: warp-in 1.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* No filters here: Safari stutters and flickers when blur runs on a 3D-spinning layer */
@keyframes warp-in {
  0% { opacity: 0; transform: scale(0.15) rotateY(-200deg); }
  35% { opacity: 1; }
  65% { transform: scale(1.03) rotateY(6deg); }
  100% { opacity: 1; transform: none; }
}
.float > .card, .float > .cert { will-change: transform, opacity; -webkit-transform-style: preserve-3d; }
/* A white wash stands in for the old brightness filter as the card arrives */
.card.warp-in::before, .cert.warp-in::before { content: ''; position: absolute; inset: 0; z-index: 7; border-radius: inherit; background: #FFF3F8; pointer-events: none; animation: wash 1.1s ease-out both; }
@keyframes wash { from { opacity: 0.85; } to { opacity: 0; } }
/* Arriving through the warp, the card's contents are already there */
.card.warp-in .hero-text, .card.warp-in .meta, .card.warp-in .tiles > *, .card.warp-in .rules, .card.warp-in .foot, .card.warp-in .shape { animation: none; }
/* The certificate's fields are already there too; the stamp lands once the spin settles */
.cert.warp-in .fields .f { animation: none; }
.cert.warp-in .stamp { animation-delay: 1.55s; }
.flash.soft { animation: flash-soft 1.5s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes flash-soft { 0% { opacity: 0; transform: scale(0.3); } 22% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ------------------------------------------------------------------ */
/* Desktop and tablet browsers: full screen, a wider column, bigger type */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
  :root { --col: 440px; }
  .app { max-width: none; }
  body { background: var(--bg); }
  /* Corner buttons stay close to the content instead of the far window edges */
  .topbar { width: 100%; max-width: 820px; margin: 0 auto; height: 72px; padding: 0 24px; }
  .status .topbar { padding: 0 calc((min(100vw, 820px) - var(--col)) / 2); }
  .screen { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .site-url { bottom: 24px; }

  .status h1 { font-size: clamp(34px, 5dvh, 46px); max-width: 340px; }
  .answer { font-size: clamp(96px, 15dvh, 136px); }
  .status .sub.story { font-size: 16px; }
  .cta { height: 64px; font-size: 19px; }

  .reading h1.q { font-size: clamp(36px, 5.4dvh, 48px); }
  .option { min-height: 68px; }
  .option .t { font-size: 17px; }
  .sentence { font-size: clamp(30px, 4.4dvh, 40px); }
  .out h1 { font-size: clamp(40px, 6dvh, 54px); }
  .doc .body { font-size: 16px; }

  /* Hero star / moon sit beside the column, the planet rises off its right edge */
  .star-hero { width: min(360px, 42dvh); right: calc(50% - var(--col) / 2 - 300px); }
  .horizon { left: calc(50% + var(--col) * 0.42) !important; width: 760px !important; height: 760px !important; margin-left: -380px !important; }
  .loader { width: min(380px, 44dvh); }
}
@media (min-width: 768px) and (max-width: 979px) {
  .star-hero { right: -60px; }
}

/* Wide screens: one column, roughly as wide as the window is tall */
@media (min-width: 1024px) {
  :root { --col: clamp(560px, calc(100dvh - 140px), 780px); }
  .topbar { max-width: calc(var(--col) + 160px); }
  .status .topbar { padding: 0 80px; }
  .result .actions { justify-content: center; }
  .result .actions .tip { margin-right: 14px; }

  .status h1 { font-size: clamp(40px, 5.6dvh, 54px); max-width: 420px; }
  .answer { font-size: clamp(120px, 19dvh, 180px); }
  .status .sub.story { font-size: 17px; max-width: 560px; }
  /* Every pill button the same length, sitting on the left of the column */
  .status .ctas { max-width: 400px; }
  .cta { width: 400px; max-width: 100%; align-self: flex-start; }
  .status .star-hero { width: min(420px, 46dvh); right: calc(50% - var(--col) / 2 - 40px); }
  .horizon { left: calc(50% + var(--col) * 0.36) !important; width: 1000px !important; height: 1000px !important; margin-left: -500px !important; }

  .reading h1.q { font-size: clamp(44px, 6.4dvh, 64px); }
  /* Sit the steps in the middle of the window, not at the top */
  .reading .screen.split, .blame .screen.out { justify-content: center; }
  .reading .screen.split > .pane > *, .blame .screen.out > .pane > * { margin-top: 0; margin-bottom: 0; }
  .blame .screen.out .cta { margin-top: 12px; }
  .reading .screen.split .pane .options { gap: 16px; margin-top: 36px; }
  .reading .option { min-height: 80px; }
  .reading .screen.split .pane .dots { margin-bottom: 20px; }
  /* Loading: full column width, bigger orbit and type */
  .loading .loader { width: min(440px, 42dvh); }
  .loading .load-title, .loading .load-lines { width: 100%; }
  .loading .load-title h1 { font-size: clamp(48px, 7dvh, 68px) !important; }
  .load-lines { gap: 6px; }
  .load-lines div { font-size: 13px; padding-bottom: 14px; }
  .sentence { font-size: clamp(38px, 5.6dvh, 54px); }
  .blame .moon-hero { width: min(300px, 34dvh); right: calc(50% - var(--col) / 2 - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}