/* The app's own look: near-black wine, hot pink, Outfit display, flat surfaces with hairlines. */
:root { --bg:#050002; --surface:#140A0E; --hair:rgba(255,255,255,.08); --pink:#FF2D55; --ink:#EBEBF5; --muted:rgba(235,235,245,.6); --faint:rgba(235,235,245,.38); }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); color:var(--ink); }
body { font:16px/1.5 Inter, system-ui, sans-serif; min-height:100vh; min-height:100dvh; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:-30% -30% auto; height:70%; background:radial-gradient(closest-side, rgba(255,45,85,.22), transparent); pointer-events:none; }
main { position:relative; max-width:440px; margin:0 auto; padding:16px 16px calc(24px + env(safe-area-inset-bottom)); min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
a { color:inherit; }
[hidden] { display:none !important; }
.top { display:flex; align-items:center; gap:10px; font:600 15px Outfit, sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.top img { border-radius:9px; }
.invite { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 0 12px; }
.seats { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.seat { width:68px; height:68px; border-radius:50%; display:grid; place-items:center; font:700 26px Outfit, sans-serif; }
.seat.host { border:2.5px solid var(--pink); color:var(--ink); background:rgba(255,45,85,.12); animation:pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.seat.empty { border:2px dashed rgba(255,255,255,.28); animation:breathe 1.8s ease-in-out infinite; }
.link { display:flex; align-items:center; gap:6px; color:var(--pink); }
.link span { width:16px; height:2px; background:var(--pink); opacity:.5; border-radius:2px; }
.link b { font-size:18px; animation:beat 1.2s ease-in-out infinite; }
h1 { font:600 clamp(28px, 8.4vw, 36px)/1.12 Outfit, sans-serif; letter-spacing:-.01em; max-width:340px; animation:up .5s .1s ease-out both; }
h1 em { font-style:normal; color:var(--pink); }
.sub { color:var(--muted); margin-top:12px; max-width:320px; animation:up .5s .18s ease-out both; }
.deck { margin-top:16px; border:1px solid var(--hair); border-radius:999px; padding:6px 14px; font:600 12px Outfit, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--pink); }
.code { margin-top:26px; background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:12px 18px 14px; animation:up .5s .26s ease-out both; }
.code small { display:block; color:var(--faint); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.code div { font:600 28px Outfit, sans-serif; letter-spacing:.32em; margin-top:2px; margin-right:-.32em; }
.actions { width:100%; margin-top:30px; display:flex; flex-direction:column; gap:12px; animation:up .5s .34s ease-out both; }
.badges { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.badge { display:block; line-height:0; border-radius:9px; transition:transform .12s; -webkit-tap-highlight-color:transparent; }
.badge:active { transform:scale(.97); }
.badge img { height:56px; width:auto; display:block; }
.badges.one .badge img { height:64px; }
.open { align-self:center; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; padding:6px 10px; }
.note { color:var(--faint); font-size:13px; max-width:320px; align-self:center; }
.die { font-size:56px; margin-bottom:18px; }
footer { text-align:center; color:var(--faint); font-size:12px; padding-top:18px; }
footer a { text-decoration:none; }
[dir=rtl] .link { flex-direction:row-reverse; }
@keyframes up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes pop { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
@keyframes beat { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }
@keyframes breathe { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; } }