:root {
  --warm: linear-gradient(150deg, #ff2e63 0%, #ff7a3d 60%, #ffb21c 100%);
  --cool: linear-gradient(150deg, #3a86ff 0%, #6a4cff 55%, #a238ec 100%);
  --yellow: #ffe94d;
  --ink: #111;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: #fff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100dvh; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, rgba(255, 46, 99, .35), transparent 60%),
    radial-gradient(40vmax 40vmax at 85% 80%, rgba(106, 76, 255, .4), transparent 60%),
    #0e0e10;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }

/* ---------- Story frame (9:16) ---------- */
.story {
  position: relative; display: flex; flex-direction: column;
  width: min(430px, 100vw, calc((100dvh - 32px) * 9 / 16));
  height: min(calc(100dvh - 32px), 900px);
  aspect-ratio: 9 / 16;
  background: #161618; border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  padding: 12px 12px 14px;
}
@media (max-width: 500px) {
  .story { width: 100vw; height: 100dvh; border-radius: 0; aspect-ratio: auto; padding-top: max(12px, env(safe-area-inset-top)); }
}

.bars { display: flex; gap: 4px; position: relative; z-index: 3; }
.bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.bars i::after { content: ""; display: block; height: 100%; width: 0; background: #fff; transition: width .35s ease; }
.bars i.done::after { width: 100%; }
.bars i.now::after { width: 100%; animation: breathe 1.4s ease-in-out infinite alternate; }

.who { display: flex; align-items: center; gap: 8px; padding: 10px 4px 6px; font-size: 14px; position: relative; z-index: 3; }
.who .muted { opacity: .6; font-weight: 500; }
.ring { width: 32px; height: 32px; border-radius: 50%; padding: 2px; background: conic-gradient(#ffb21c, #ff2e63, #a238ec, #ffb21c); }
.ring span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #161618; font-size: 15px; border: 2px solid #161618; }

.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; animation: slideIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.screen.center { align-items: center; justify-content: center; gap: 22px; }

/* ---------- Shared bits ---------- */
.chip { display: inline-block; background: #fff; color: var(--ink); font-weight: 800; padding: 6px 12px; border-radius: 10px; font-size: 17px; line-height: 1.2; }
.sticker { display: inline-block; margin: 0; background: #fff; color: var(--ink); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; padding: 7px 14px; border-radius: 12px; font-size: 15px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.sticker.yellow { background: var(--yellow); }
.tilt { transform: rotate(-4deg); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 13px 20px; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .12s; }
.pill:active { transform: scale(.96); }
.pill.white { background: #fff; color: var(--ink); }
.pill.yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 10px 30px rgba(255, 233, 77, .3); animation: nudge 2.6s ease-in-out infinite; }
.pill.big { font-size: 18px; padding: 17px 30px; }
.pill.glass { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ghost { background: none; border: 0; opacity: .7; cursor: pointer; padding: 8px 4px; font-weight: 600; font-size: 14px; }
.ghost:hover { opacity: 1; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- Start screen ---------- */
#intro { align-items: center; justify-content: center; text-align: center; gap: 26px; }
.intro-art { width: 100%; height: 200px; border-radius: 22px; overflow: hidden; }
.intro-art svg { width: 100%; height: 100%; display: block; }
#start { min-width: 200px; }
.hero { text-align: center; padding: 0 6px; }
.hero h1 { margin: 0; font-weight: 900; font-size: clamp(32px, 9.4vw, 42px); line-height: 1.02; letter-spacing: -.035em; }
.hero h1 em { font-style: normal; display: inline-block; background: var(--yellow); color: var(--ink); padding: 0 10px 2px; border-radius: 12px; transform: rotate(-2deg); margin-top: 4px; }
.hero p { margin: 10px auto 0; max-width: 30ch; font-size: 15px; line-height: 1.35; opacity: .85; }

/* ---------- Rounds ---------- */
.prompt { text-align: center; margin: 4px 0 10px; }
.chip.story-line { background: var(--yellow); max-width: 92%; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.halves { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; min-height: 0; touch-action: none; transition: transform .2s; }
.halves.dragging { transition: none; }
.half.lean { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.swipe-hint { font-size: 12px; font-weight: 700; opacity: .65; letter-spacing: .04em; }
.half {
  flex: 1; position: relative; border: 0; border-radius: 22px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 14px 18px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s, filter .25s;
}
.half.a { background: var(--warm); justify-content: flex-start; padding: 18px 14px 14px; }
.half.b { background: var(--cool); }
.half:hover { transform: scale(1.012); }
.half:active { transform: scale(.98); }
.half .label { background: #fff; color: var(--ink); font-weight: 900; font-size: clamp(17px, 4.8vw, 21px); line-height: 1.2; text-align: center; letter-spacing: -.01em; padding: 6px 14px; border-radius: 12px; position: relative; z-index: 1; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); max-width: 90%; }
.half .label i { font-style: normal; margin-right: 6px; }
.half .art { position: absolute; inset: 0; pointer-events: none; }
.half .art svg { width: 100%; height: 100%; display: block; }
.half.picked { transform: scale(1.03); box-shadow: 0 0 0 4px #fff; }
.half.picked::after { content: "✓"; position: absolute; top: 12px; left: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 20px; animation: pop .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.half.dim { opacity: .3; filter: grayscale(.7); transform: scale(.96); }
.or {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 2;
  background: #111; color: #fff; font-weight: 900; font-size: 18px; letter-spacing: .04em;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  border: 4px solid #161618; pointer-events: none;
}
.halves.leaving { animation: slideOut .28s ease-in both; }
.halves.entering { animation: slideIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.under { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px 0; }
.count { font-weight: 800; font-size: 13px; opacity: .7; letter-spacing: .06em; }

/* ---------- Thinking ---------- */
.orb { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.orb i { position: absolute; inset: 0; border-radius: 50%; opacity: .85; filter: blur(1px); animation: morph 2.4s ease-in-out infinite alternate, spin 3s linear infinite; }
.orb i:nth-child(1) { background: var(--warm); }
.orb i:nth-child(2) { background: var(--cool); animation-delay: -.8s, -1s; animation-direction: alternate-reverse, reverse; }
.orb i:nth-child(3) { inset: 28%; background: var(--yellow); animation-delay: -1.6s, -2s; }
.orb span { position: relative; font-size: 46px; animation: jiggle .3s ease-in-out infinite alternate; }

/* ---------- Result ---------- */
#result { position: static; animation: none; padding: 0 6px; }  /* bg bleeds to the whole story frame */
.result-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(28px) saturate(1.3) brightness(.55); transform: scale(1.25); }
.result-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)); }
.result-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; overflow-y: auto; padding: 8px 0 6px; scrollbar-width: none; }
.result-body::-webkit-scrollbar { display: none; }
.result-body.pop { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.cover { flex: none; width: min(40%, 170px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 22px 50px rgba(0, 0, 0, .55); margin: 6px 0 4px; }
#r-title { margin: 4px 0 0; font-size: clamp(22px, 6vw, 28px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.author { margin: 0; font-weight: 600; opacity: .8; font-size: 15px; }
.pitch { margin: 4px 0 6px; font-size: 15px; line-height: 1.45; font-weight: 500; background: rgba(0, 0, 0, .35); padding: 10px 14px; border-radius: 14px; }
/* persona + taste match */
.vibe { width: 100%; background: rgba(255, 255, 255, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 18px; padding: 14px 16px; text-align: left; }
.persona { margin: 0; font-weight: 900; font-size: 19px; letter-spacing: -.01em; }
.persona-line { margin: 2px 0 10px; font-size: 14px; opacity: .85; }
.match-top { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.match-top b { font-size: 26px; font-weight: 900; color: var(--yellow); }
.meter { height: 8px; background: rgba(255, 255, 255, .18); border-radius: 99px; overflow: hidden; margin: 6px 0 6px; }
.meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ff2e63, #ffb21c, var(--yellow)); transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .3s; }
.split { margin: 0; font-size: 13px; opacity: .8; }
#chat { width: 100%; }

/* chat bottom sheet */
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); z-index: 5; animation: fadeIn .2s both; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 92%; overflow-y: auto;
  background: #1d1d21; border-radius: 26px 26px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); animation: sheetUp .35s cubic-bezier(.2, .9, .2, 1) both; text-align: left;
}
.grab { width: 40px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .25); margin: 0 auto 12px; }
.sheet h3 { margin: 0 0 6px; font-size: 21px; font-weight: 900; letter-spacing: -.01em; }
.sheet-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.45; opacity: .85; }
.sheet-lead a { color: var(--yellow); }
.sheet label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.sheet label i { font-weight: 500; opacity: .6; font-style: normal; }
.sheet input, .sheet select, .sheet textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; font-weight: 500; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 11px 12px; outline: none;
}
.sheet input:focus, .sheet select:focus, .sheet textarea:focus { border-color: var(--yellow); }
.sheet textarea { resize: none; }
.where { display: flex; gap: 8px; }
.where select { width: 38%; flex: none; }
.sheet select option { color: #111; }
.sheet .pill.big { width: 100%; margin-top: 4px; }
.sheet .pill:disabled { opacity: .6; cursor: wait; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sheet-error { color: #ff8a8a; font-size: 13px; font-weight: 600; min-height: 1em; margin: 8px 0 0; }
.sheet-fine { font-size: 12px; opacity: .55; margin: 4px 0 0; text-align: center; }
#sheet-done { text-align: center; padding: 10px 0 6px; }
.done-emoji { font-size: 56px; margin: 0; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }

.row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.row .pill { padding: 10px 14px; font-size: 14px; }
.toast { min-height: 1.1em; margin: 0; font-weight: 700; font-size: 14px; color: var(--yellow); opacity: 0; transition: opacity .2s; }
.toast.on { opacity: 1; }
.fine { margin: 0; font-size: 13px; opacity: .75; }
.fine a { color: #fff; }

/* ---------- Art animations ---------- */
.tw { animation: twinkle 2.2s ease-in-out infinite alternate; }
.fl { animation: floaty 3s ease-in-out infinite alternate; }
.pl { animation: pulse 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.sp { animation: spin 40s linear infinite; }
.orbit { animation: spin 9s linear infinite; }
.bob { animation: bob 1.6s ease-in-out infinite alternate; }
.wig { animation: floaty 1.2s ease-in-out infinite alternate; }
.spin { animation: spin 3s linear infinite; }
.ripple { animation: ripple 3.2s ease-out infinite; }
.drop { animation: fall 2.6s linear infinite; }
.zoom { animation: zoom 1.4s linear infinite; }
.grow { animation: grow 2.4s ease-in-out infinite alternate; }
.drift { animation: drift 7s ease-in-out infinite alternate; }
.look { animation: look 4s ease-in-out infinite; }
.steam { animation: steam 2.7s ease-in-out infinite; }

@keyframes twinkle { from { opacity: .2; } to { opacity: 1; } }
@keyframes pulse { from { transform: scale(.88); } to { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { from { translate: 0 -6px; } to { translate: 0 8px; } }
@keyframes ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }
@keyframes fall { from { translate: 0 -40px; opacity: 0; } 15% { opacity: 1; } to { translate: 0 120px; opacity: 0; } }
@keyframes zoom { from { translate: -60px 0; opacity: 0; } 30% { opacity: 1; } to { translate: 120px 0; opacity: 0; } }
@keyframes grow { from { transform: scaleY(.75); } to { transform: scaleY(1); } }
@keyframes drift { from { translate: -30px 0; } to { translate: 30px 0; } }
@keyframes look { 0%, 40% { translate: 0 0; } 50%, 70% { translate: -14px 2px; } 80%, 100% { translate: 12px -2px; } }
@keyframes steam { from { translate: 0 10px; opacity: 0; } 40% { opacity: 1; } to { translate: 0 -30px; opacity: 0; } }
@keyframes morph { from { border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; } to { border-radius: 63% 37% 38% 62% / 58% 63% 37% 42%; } }

@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes nudge { 0%, 85%, 100% { transform: none; } 90% { transform: rotate(-2deg) scale(1.03); } 95% { transform: rotate(2deg) scale(1.03); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes slideOut { to { opacity: 0; transform: translateX(-40px); } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes floaty { from { translate: 0 0; } to { translate: 0 -8px; } }
@keyframes jiggle { from { transform: rotate(-4deg) scale(.98); } to { transform: rotate(4deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }