/* =========================================================
   Invite page: one flow engine, five visual worlds.
   Each [data-theme] only redefines tokens + a few signature pieces.
   ========================================================= */

:root, body[data-theme="loading"], body[data-theme="custom"]{
  --ground:#0b1020;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.14);
  --edge:rgba(255,255,255,.13); --edge-hi:rgba(255,255,255,.28);
  --text:#eef2ff; --muted:#a3acc7; --dim:#6f7894;
  --a1:#2dd4bf; --a1-soft:rgba(45,212,191,.35);
  --a2:#818cf8; --a2-soft:rgba(129,140,248,.35);
  --orb3:#f472b6;
  --yes-1:#7ff0dd; --yes-2:#2dd4bf; --yes-3:#0f9f8f; --yes-ink:#032320;
  --next-1:#c7cbff; --next-2:#818cf8; --next-3:#5b5fd6; --next-ink:#0d0f33;
  --pick:var(--a2); --pick-bg:rgba(129,140,248,.2); --pick-ink:#0d0f33;
  --display:"Unbounded", system-ui, sans-serif;
  --body:"Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --h-transform:none; --h-weight:700; --h-spacing:-.01em; --h-style:normal;
  --radius:26px; --r-sm:16px;
  --grid-op:.04;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}

body[data-theme="cs"]{
  --ground:#07090d; --text:#eef0f3; --muted:#9aa3ae; --dim:#6b7480;
  --a1:#5b8cff; --a1-soft:rgba(91,140,255,.35);
  --a2:#ffae3d; --a2-soft:rgba(255,174,61,.35);
  --orb3:#8a5bff;
  --yes-1:#6cf5a0; --yes-2:#4fe38a; --yes-3:#1fae5c; --yes-ink:#032212;
  --next-1:#ffcf7a; --next-2:#ffae3d; --next-3:#e3801a; --next-ink:#2a1600;
  --pick:#ffae3d; --pick-bg:rgba(255,174,61,.2); --pick-ink:#2a1600;
  --display:"Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --body:"Barlow", system-ui, sans-serif;
  --h-transform:uppercase; --h-spacing:.01em;
  --radius:28px;
}

body[data-theme="date"]{
  --ground:#1a0912; --text:#fff0f4; --muted:#e0a9ba; --dim:#a8738a;
  --glass:rgba(255,220,232,.07); --glass-2:rgba(255,220,232,.12); --glass-hi:rgba(255,220,232,.18);
  --edge:rgba(255,200,220,.18); --edge-hi:rgba(255,200,220,.38);
  --a1:#ff5c8a; --a1-soft:rgba(255,92,138,.4);
  --a2:#ffb3c7; --a2-soft:rgba(255,179,199,.35);
  --orb3:#c026d3;
  --yes-1:#ff9ab7; --yes-2:#ff5c8a; --yes-3:#e11d63; --yes-ink:#fff;
  --next-1:#ffd1dd; --next-2:#ff8fb0; --next-3:#f0527f; --next-ink:#3a0716;
  --pick:#ff5c8a; --pick-bg:rgba(255,92,138,.22); --pick-ink:#fff;
  --display:"Playfair Display", Georgia, serif;
  --body:"Nunito", system-ui, sans-serif;
  --h-style:italic; --h-spacing:0;
  --radius:32px; --r-sm:20px;
  --grid-op:0;
}

body[data-theme="dinner"]{
  --ground:#120a0b; --text:#f6ead7; --muted:#c7ad8c; --dim:#8f7a63;
  --glass:rgba(255,236,210,.05); --glass-2:rgba(255,236,210,.09); --glass-hi:rgba(255,236,210,.14);
  --edge:rgba(232,184,107,.2); --edge-hi:rgba(232,184,107,.45);
  --a1:#e8b86b; --a1-soft:rgba(232,184,107,.35);
  --a2:#9b2c3f; --a2-soft:rgba(155,44,63,.4);
  --orb3:#5a1a25;
  --yes-1:#f6d9a2; --yes-2:#e8b86b; --yes-3:#b98335; --yes-ink:#2a1606;
  --next-1:#c85a6b; --next-2:#9b2c3f; --next-3:#6e1f2e; --next-ink:#fff3e6;
  --pick:#e8b86b; --pick-bg:rgba(232,184,107,.16); --pick-ink:#2a1606;
  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Manrope", system-ui, sans-serif;
  --h-weight:600; --h-spacing:0;
  --radius:22px; --r-sm:12px;
  --grid-op:0;
}

body[data-theme="birthday"]{
  --ground:#1b0f3a; --text:#fff8e7; --muted:#cdbdf5; --dim:#9384c4;
  --glass:rgba(255,255,255,.08); --glass-2:rgba(255,255,255,.13); --glass-hi:rgba(255,255,255,.2);
  --edge:rgba(255,255,255,.2); --edge-hi:rgba(255,255,255,.4);
  --a1:#8b5cf6; --a1-soft:rgba(139,92,246,.45);
  --a2:#ffd23f; --a2-soft:rgba(255,210,63,.4);
  --orb3:#ff6b9d;
  --yes-1:#ffe588; --yes-2:#ffd23f; --yes-3:#f5a623; --yes-ink:#3a2300;
  --next-1:#ff9cc0; --next-2:#ff6b9d; --next-3:#e23d7a; --next-ink:#fff;
  --pick:#ffd23f; --pick-bg:rgba(255,210,63,.18); --pick-ink:#3a2300;
  --display:"Baloo 2", system-ui, sans-serif;
  --body:"Nunito", system-ui, sans-serif;
  --h-weight:800; --h-spacing:-.01em;
  --radius:34px; --r-sm:22px;
  --grid-op:0;
}

*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%; margin:0}
body{
  background:var(--ground); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.5;
  padding-inline:16px;
  padding-block:calc(24px + env(safe-area-inset-top, 0px)) calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-x:hidden;
  transition:background .6s ease;
}
[hidden]{display:none!important}

/* ---------- Atmosphere ---------- */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; transition:background .6s}
.o1{width:55vmax; height:55vmax; left:-18vmax; top:-20vmax; background:radial-gradient(circle, var(--a1) 0%, transparent 65%); animation:drift1 22s ease-in-out infinite alternate}
.o2{width:50vmax; height:50vmax; right:-20vmax; bottom:-22vmax; background:radial-gradient(circle, var(--a2) 0%, transparent 65%); animation:drift2 26s ease-in-out infinite alternate}
.o3{width:32vmax; height:32vmax; left:40%; top:35%; background:radial-gradient(circle, var(--orb3) 0%, transparent 65%); opacity:.25; animation:drift3 30s ease-in-out infinite alternate}
.grid{position:absolute; inset:-2px; opacity:calc(var(--grid-op) * 25);
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 10%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 10%, transparent 70%);
  animation:gridmove 18s linear infinite}
#ambient{position:absolute; inset:0; width:100%; height:100%}
#burst{position:fixed; inset:0; width:100%; height:100%; z-index:50; pointer-events:none}
@keyframes drift1{to{transform:translate(14vmax, 10vmax) scale(1.1)}}
@keyframes drift2{to{transform:translate(-12vmax, -12vmax) scale(1.15)}}
@keyframes drift3{from{transform:translate(-50%,-50%)} to{transform:translate(-20%,-70%) scale(1.3)}}
@keyframes gridmove{to{background-position:44px 44px}}

/* dinner: warm vignette */
body[data-theme="dinner"] .bg::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 110%, rgba(232,184,107,.18), transparent 55%), radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.6))}
body[data-theme="dinner"] .orb{opacity:.35}

.wrap{position:relative; z-index:1; max-width:540px; margin:0 auto; display:flex; flex-direction:column; gap:14px}

/* ---------- Glass ---------- */
.glass{
  background:linear-gradient(145deg, var(--glass-2), var(--glass) 55%);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(20,20,30,.92)}
}

.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 16px; border-radius:999px;
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase;
  animation:rise .7s var(--ease) both}
.live{display:inline-flex; align-items:center; gap:8px; min-width:0}
.live i{flex:none; width:7px; height:7px; border-radius:50%; background:var(--a1); animation:ping 1.8s infinite}
.from{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text)}

.card{position:relative; border-radius:var(--radius); overflow:hidden; --mx:50%; --my:0%;
  animation:rise .8s .1s var(--ease) both}
.card::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.09), transparent 60%)}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(120deg, var(--a1), transparent 30%, transparent 70%, var(--a2)) 0 0/200% 200%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:edge 8s linear infinite}
@keyframes edge{to{background-position:200% 200%}}

.screen{position:relative; padding:30px 26px 26px; display:flex; flex-direction:column; gap:18px}
.screen > *{animation:rise .6s var(--ease) both; animation-delay:calc(var(--i, 0) * 70ms)}
.screen.leaving > *{animation:leave .22s ease-in both; animation-delay:0ms}
.loading-screen{min-height:320px; align-items:center; justify-content:center}
.spinner{width:36px; height:36px; border-radius:50%; border:3px solid var(--edge); border-top-color:var(--a1); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.eyebrow{display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin:0; max-width:100%;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text);
  padding:6px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--edge)}
.eyebrow::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--a2); box-shadow:0 0 10px var(--a2)}

h1,h2{font-family:var(--display); font-weight:var(--h-weight); font-style:var(--h-style); margin:0; line-height:1.05;
  text-wrap:balance; text-transform:var(--h-transform); letter-spacing:var(--h-spacing); overflow-wrap:anywhere}
h1{font-size:clamp(30px, 8vw, 44px)}
h2{font-size:clamp(26px, 6.5vw, 34px)}
body[data-theme="dinner"] h1{font-size:clamp(36px, 9.5vw, 54px)}
body[data-theme="dinner"] h2{font-size:clamp(30px, 7.5vw, 40px)}
body[data-theme="custom"] h1{font-size:clamp(26px, 7vw, 38px)}
body[data-theme="custom"] h2{font-size:clamp(22px, 5.5vw, 30px)}
.grad{background:linear-gradient(90deg, var(--a2), var(--a1), var(--a2)) 0 0/200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 4s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.lead{margin:0; color:var(--muted); max-width:46ch; white-space:pre-line}

/* Event info chips */
.info{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:var(--glass); border:1px solid var(--edge); font-size:14px; font-weight:600}
.chip small{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500}

/* ---------- Emblems (hero art per theme) ---------- */
.emblem{position:relative; height:96px; display:grid; place-items:center}

.heart{position:relative; width:64px; height:58px; animation:beat 1.2s ease-in-out infinite; filter:drop-shadow(0 8px 24px var(--a1-soft))}
.heart::before,.heart::after{content:""; position:absolute; top:0; width:34px; height:54px; border-radius:34px 34px 0 0; background:linear-gradient(180deg, var(--yes-1), var(--a1))}
.heart::before{left:32px; transform:rotate(-45deg); transform-origin:0 100%}
.heart::after{left:-2px; transform:rotate(45deg); transform-origin:100% 100%}
@keyframes beat{0%,100%{transform:scale(1)} 15%{transform:scale(1.15)} 30%{transform:scale(.98)} 45%{transform:scale(1.1)}}

.candles{display:flex; align-items:flex-end; gap:22px}
.candle{position:relative; width:16px; border-radius:4px 4px 2px 2px; background:linear-gradient(90deg, #f3e6cf, #fffaf0 40%, #d9c6a5)}
.candle:nth-child(1){height:46px} .candle:nth-child(2){height:66px} .candle:nth-child(3){height:38px}
.candle::before{content:""; position:absolute; left:50%; top:-4px; width:2px; height:6px; background:#3b2a1e; translate:-50% 0}
.candle::after{content:""; position:absolute; left:50%; bottom:calc(100% + 1px); width:12px; height:22px; translate:-50% 0;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%, #fff 0 15%, #ffd27a 35%, #ff8a2a 70%, transparent 72%);
  box-shadow:0 0 30px 10px rgba(255,190,90,.35); animation:flame 1.4s ease-in-out infinite alternate; transform-origin:50% 100%}
.candle:nth-child(2)::after{animation-duration:1.1s} .candle:nth-child(3)::after{animation-duration:1.7s}
@keyframes flame{0%{transform:scale(1) rotate(-2deg)} 50%{transform:scale(1.08,.94) rotate(2deg)} 100%{transform:scale(.95,1.06) rotate(-1deg)}}

.balloons{display:flex; align-items:flex-end; gap:6px; height:96px}
.balloon{position:relative; width:42px; height:52px; border-radius:50% 50% 48% 48% / 55% 55% 45% 45%;
  animation:sway 3s ease-in-out infinite; transform-origin:50% 160%}
.balloon::after{content:""; position:absolute; left:50%; top:100%; width:1px; height:40px; background:rgba(255,255,255,.4)}
.balloon::before{content:""; position:absolute; left:10px; top:9px; width:9px; height:14px; border-radius:50%; background:rgba(255,255,255,.45); rotate:25deg}
.balloon:nth-child(1){background:var(--a1); margin-bottom:18px; animation-delay:-.6s}
.balloon:nth-child(2){background:var(--a2); margin-bottom:34px}
.balloon:nth-child(3){background:var(--orb3); margin-bottom:12px; animation-delay:-1.4s}
@keyframes sway{0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-6px)}}

.orbit{position:relative; width:84px; height:84px}
.orbit::before{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--edge-hi); animation:spin 6s linear infinite; border-top-color:var(--a1); border-right-color:var(--a2)}
.orbit::after{content:""; position:absolute; inset:24px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff, var(--a1) 40%, var(--a2)); box-shadow:0 0 40px var(--a1-soft); animation:beat 3s ease-in-out infinite}

/* ---------- CS roster slots ---------- */
.slots{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.slot{position:relative; padding:12px 4px 10px; text-align:center; border-radius:16px; min-width:0;
  background:var(--glass); border:1px solid var(--edge);
  animation:slotIn .55s var(--ease) both; animation-delay:calc(var(--j,0) * 80ms + 250ms)}
.slot .av{width:36px; height:36px; margin:0 auto 8px; border-radius:50%; display:grid; place-items:center;
  font:700 14px var(--display); color:#fff;
  background:linear-gradient(135deg, var(--a1), #2b4fb8); box-shadow:0 0 0 2px rgba(255,255,255,.12), 0 6px 18px -4px var(--a1-soft)}
.slot .nm{font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slot.empty{border:1px dashed var(--a2); background:rgba(255,174,61,.07); animation:slotIn .55s var(--ease) both, breathe 2.2s 1s ease-in-out infinite}
.slot.empty .av{background:transparent; color:var(--a2); box-shadow:inset 0 0 0 1px var(--a2)}
.slot.empty .nm{color:var(--a2)}
.slot.filled{border-color:var(--yes-2); background:rgba(79,227,138,.1); box-shadow:0 0 24px -6px var(--yes-2)}
.slot.filled .av{background:linear-gradient(135deg, var(--yes-2), var(--yes-3)); color:var(--yes-ink); animation:popIn .6s .7s var(--ease) both}
@keyframes slotIn{from{opacity:0; transform:translateY(12px) scale(.9)}}
@keyframes breathe{50%{box-shadow:0 0 22px -2px var(--a2-soft)}}
@keyframes popIn{0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)}}

/* ---------- Buttons ---------- */
.btn{position:relative; overflow:hidden; font-family:var(--display); font-weight:700; font-style:normal;
  text-transform:var(--h-transform); letter-spacing:.03em; cursor:pointer;
  border:0; border-radius:var(--r-sm); padding:15px 26px; font-size:18px; color:var(--text);
  transition:translate .2s var(--ease), scale .35s var(--ease), box-shadow .25s, opacity .2s}
body[data-theme="date"] .btn, body[data-theme="dinner"] .btn{font-family:var(--body); font-weight:800; letter-spacing:.01em}
body[data-theme="custom"] .btn{font-size:16px}
.btn:hover:not(:disabled){translate:0 -2px}
.btn:active:not(:disabled){translate:0 1px}
.btn:focus-visible{outline:2px solid #fff; outline-offset:3px}
.btn::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg)}
.btn:hover:not(:disabled)::after{animation:sweep .7s ease}
@keyframes sweep{to{left:130%}}

.yes{background:linear-gradient(135deg, var(--yes-1), var(--yes-2) 45%, var(--yes-3)); color:var(--yes-ink);
  box-shadow:0 10px 30px -8px var(--yes-2), inset 0 1px 0 rgba(255,255,255,.5); transform-origin:left center}
.yes.glow{animation:glow 1.8s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 10px 44px -2px var(--yes-2), inset 0 1px 0 rgba(255,255,255,.5)}}
.no{background:var(--glass); color:var(--muted); border:1px solid var(--edge); font-size:15px; padding:12px 20px; white-space:nowrap;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.no.flee{position:absolute; transition:left .25s var(--ease), top .25s var(--ease), rotate .25s}
.next{background:linear-gradient(135deg, var(--next-1), var(--next-2) 50%, var(--next-3)); color:var(--next-ink);
  box-shadow:0 10px 30px -10px var(--next-2), inset 0 1px 0 rgba(255,255,255,.4)}
.next:disabled{background:var(--glass); color:var(--dim); box-shadow:none; border:1px solid var(--edge); cursor:not-allowed}
.secondary{background:var(--glass-2); color:var(--text); border:1px solid var(--edge)}

.arena{position:relative; min-height:160px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.taunt{font-family:var(--mono); font-size:13px; color:var(--a2); min-height:1.5em; margin:0}
body[data-theme="date"] .taunt{color:var(--a2)}
body[data-theme="dinner"] .taunt{color:var(--a1)}
.taunt.shake{animation:shake .4s}
@keyframes shake{20%,60%{translate:-5px 0} 40%,80%{translate:5px 0}}

/* ---------- Choice tiles ---------- */
.choices{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.choices.tight{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.opt{position:relative; overflow:hidden; text-align:left; color:var(--text); font:inherit; font-weight:600; cursor:pointer;
  padding:14px 30px 14px 14px; border-radius:var(--r-sm); min-height:52px;
  background:var(--glass); border:1px solid var(--edge);
  animation:tileIn .5s var(--ease) both; animation-delay:calc(var(--j,0) * 45ms + 120ms);
  transition:translate .25s var(--ease), background .25s, border-color .25s, box-shadow .25s}
.opt:hover{translate:0 -3px; background:var(--glass-hi); border-color:var(--edge-hi); box-shadow:0 12px 30px -14px rgba(0,0,0,.8)}
.opt:focus-visible{outline:2px solid var(--a1); outline-offset:2px}
.opt[aria-pressed="true"]{border-color:var(--pick); background:linear-gradient(145deg, var(--pick-bg), transparent);
  box-shadow:0 0 0 3px var(--pick-bg), 0 14px 34px -14px var(--pick)}
.opt::after{content:"✓"; position:absolute; top:50%; right:10px; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  display:grid; place-items:center; font:800 11px var(--body); color:var(--pick-ink); background:var(--pick);
  transform:scale(0); transition:transform .35s var(--ease)}
.opt[aria-pressed="true"]::after{transform:scale(1)}
.opt.tap{animation:tap .3s var(--ease)}
@keyframes tap{50%{scale:.95}}
@keyframes tileIn{from{opacity:0; transform:translateY(14px) scale(.96)}}
body[data-theme="cs"] .opt{font-family:var(--display); text-transform:uppercase; letter-spacing:.02em; font-size:15px}
.sub{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:4px 0 -8px}
.hint{margin:-8px 0 0; font-size:13px; color:var(--muted)}

.nav{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:4px; flex-wrap:wrap}
.ghost{background:none; border:0; color:var(--muted); font:500 14px var(--body); cursor:pointer; padding:8px 4px; border-radius:8px; transition:color .2s, translate .2s}
.ghost:hover{color:var(--text); translate:-3px 0}
.ghost:focus-visible{outline:2px solid var(--a1)}
.steps{display:flex; gap:6px}
.steps i{position:relative; width:26px; height:5px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden}
.steps i.on::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, var(--next-2), var(--next-1)); animation:fill .6s .3s var(--ease) both; transform-origin:left}
.steps i.done::after{animation:none}
@keyframes fill{from{transform:scaleX(0)}}

/* ---------- CS match found ---------- */
.found{text-align:center; align-items:center}
.found .eyebrow{align-self:center}
.found h1{font-size:clamp(36px,10vw,56px); color:var(--yes-2); text-shadow:0 0 30px var(--yes-2); animation:rise .6s var(--ease) both, flicker 2.5s 1s infinite}
@keyframes flicker{0%,92%,96%,100%{opacity:1} 94%{opacity:.55} 98%{opacity:.7}}
.ring{position:relative; width:150px; height:150px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.ring circle{fill:none; stroke-width:8}
.ring .track{stroke:rgba(255,255,255,.1)}
.ring .prog{stroke:var(--yes-2); stroke-linecap:round; stroke-dasharray:339.3; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear, stroke .3s}
.ring .num{position:absolute; inset:0; display:grid; place-items:center; font:500 46px var(--mono); font-variant-numeric:tabular-nums}
.ring::before{content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid var(--yes-2); animation:ripple 2s ease-out infinite}
@keyframes ripple{from{transform:scale(.85); opacity:1} to{transform:scale(1.25); opacity:0}}
.accept{width:100%; font-size:22px; padding:20px}

/* ---------- Final ticket ---------- */
.ticket{width:100%; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; text-align:left; margin:0;
  background:rgba(0,0,0,.22); border:1px solid var(--edge); padding:16px 20px; border-radius:18px; position:relative}
.ticket::before,.ticket::after{content:""; position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:var(--ground); border:1px solid var(--edge); translate:0 -50%}
.ticket::before{left:-10px} .ticket::after{right:-10px}
.ticket dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.ticket dd{margin:0; font-weight:700; overflow-wrap:anywhere}
.row{display:flex; gap:10px; width:100%; flex-wrap:wrap}
.row .btn{flex:1 1 160px; font-size:15px}
.status{display:flex; align-items:center; gap:10px; margin:0; font-size:14px; color:var(--muted)}
.status i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--dim)}
.status.ok i{background:var(--yes-2); box-shadow:0 0 10px var(--yes-2)}
.status.err i{background:#ff6b6b}
.toast{font-family:var(--mono); font-size:12px; color:var(--yes-2); min-height:1.4em; margin:0}

.notfound{min-height:340px; justify-content:center}

.foot{text-align:center; font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.08em; margin:0; animation:rise .8s .4s var(--ease) both}

@keyframes rise{from{opacity:0; transform:translateY(16px); filter:blur(6px)}}
@keyframes leave{to{opacity:0; transform:translateY(-10px); filter:blur(6px)}}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--a1-soft)} 100%{box-shadow:0 0 0 10px transparent}}

@media (max-width:420px){
  .slots{gap:5px}
  .slot{border-radius:12px}
  .slot .av{width:28px; height:28px; font-size:12px}
  .slot .nm{font-size:10px}
  .screen{padding:24px 18px 20px}
  .btn{padding:14px 20px; font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  #ambient{display:none}
}

/* ---------- Demo mode ---------- */
.demobar{position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); translate:-50% 0; z-index:40;
  width:min(640px, calc(100% - 24px)); display:flex; align-items:center; gap:12px; padding:8px 8px 8px 16px; border-radius:999px;
  animation:rise .6s .6s var(--ease) both}
.demobar a{color:var(--text); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap}
.demo-back:hover{color:var(--a1)}
.demo-note{flex:1; min-width:0; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.demobar .demo-cta{padding:10px 16px; font-size:14px; border-radius:999px; font-family:var(--body); text-transform:none; letter-spacing:0}
body.has-demobar{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
@media (max-width:520px){ .demo-note{display:none} .demobar{justify-content:space-between} }

/* Embedded in the showcase: tighter, no footer */
.embedded body{padding-block:14px 16px}
.embedded .foot{display:none}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
.embedded .glass{-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}