:root { --bg:#0f0f12; --card:#17171c; --ink:#f4f2ee; --muted:#9a98a3; --accent:#ff4f79; --accent2:#ffd166; --ok:#3ddc97; --stamp:#e63946; --radius:18px; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.4 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:480px; margin:0 auto; padding:16px 16px calc(24px + env(safe-area-inset-bottom)); min-height:100dvh; }
.screen { display:none; animation:fade .25s ease; }
.screen.active { display:block; }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
h1 { font-size:2.6rem; line-height:1.05; margin:28px 0 12px; letter-spacing:-.02em; }
.lede { font-size:1.25rem; margin:0 0 6px; }
.sub { color:var(--muted); margin:0 0 20px; }
.fine { color:var(--muted); font-size:.78rem; line-height:1.35; margin-top:18px; }
.hidden { display:none !important; }
button { font:inherit; cursor:pointer; border:0; }
.primary { width:100%; padding:16px; border-radius:var(--radius); background:var(--accent); color:#fff; font-weight:700; font-size:1.1rem; margin-top:14px; }
.primary:disabled { opacity:.35; cursor:not-allowed; }
.secondary { width:100%; padding:14px; border-radius:var(--radius); background:var(--card); color:var(--ink); font-weight:600; margin-top:10px; border:1px solid #2a2a33; }
.link { background:none; color:var(--muted); text-decoration:underline; padding:10px 0; }
.pool { display:flex; align-items:center; gap:12px; margin:8px 0; }
.pool-label { color:var(--muted); }
.seg { display:flex; background:var(--card); border-radius:999px; padding:4px; gap:4px; }
.seg-btn { padding:8px 14px; border-radius:999px; background:transparent; color:var(--muted); font-weight:600; }
.seg-btn.active { background:var(--ink); color:#111; }
.age-gate { display:flex; gap:10px; align-items:center; margin:14px 0 4px; color:var(--muted); }
.age-gate input { width:20px; height:20px; accent-color:var(--accent); }
.banner { background:#2a1f2b; border:1px solid var(--accent); border-radius:var(--radius); padding:12px 14px; margin:10px 0; }
/* rules */
.counter-wrap { text-align:center; margin:6px 0 10px; }
.counter { font-size:4rem; font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.counter .of { font-size:1.1rem; color:var(--muted); font-weight:500; letter-spacing:0; }
.verdict-line { color:var(--accent2); font-weight:700; min-height:1.4em; margin-top:6px; }
.crowd { display:grid; grid-template-columns:repeat(20, 1fr); gap:4px; margin:6px 0 14px; }
.crowd i { display:block; aspect-ratio:1; border-radius:50% 50% 40% 40%; background:var(--ok); transition:background .5s, opacity .5s, transform .5s; position:relative; }
.crowd i::after { content:""; position:absolute; left:30%; right:30%; top:-22%; height:44%; border-radius:50%; background:inherit; }
.crowd i.out { background:#2a2a33; opacity:.55; transform:scale(.85); }
.rule-form { display:flex; gap:8px; }
.rule-form input { flex:1; padding:14px; border-radius:14px; border:1px solid #2a2a33; background:var(--card); color:var(--ink); font-size:1rem; }
.rule-form input.shake { animation:shake .4s; border-color:var(--stamp); }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.add { padding:0 18px; border-radius:14px; background:var(--ink); color:#111; font-weight:700; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip { padding:8px 12px; border-radius:999px; background:var(--card); color:var(--ink); border:1px solid #2a2a33; font-size:.92rem; }
.chip.on { background:var(--accent2); color:#111; border-color:var(--accent2); }
.active-rules { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; min-height:26px; }
.rule-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--accent2); color:#111; font-weight:600; font-size:.95rem; }
.rule-pill b { font-weight:500; opacity:.7; }
.rule-pill button { background:transparent; color:#111; font-size:1.1rem; padding:0 2px; }
.ask { background:var(--card); border:1px solid #2a2a33; border-radius:var(--radius); padding:12px; margin-top:10px; }
.ask .opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ask input { width:110px; padding:10px; border-radius:10px; border:1px solid #2a2a33; background:#0f0f12; color:var(--ink); font-size:1rem; }
.stamp { position:fixed; left:50%; top:38%; transform:translate(-50%,-50%) rotate(-8deg) scale(1); padding:14px 22px; border:5px solid var(--stamp); color:var(--stamp); font-weight:900; font-size:1.3rem; text-transform:uppercase; letter-spacing:.04em; border-radius:10px; background:rgba(15,15,18,.92); max-width:90vw; text-align:center; animation:slam .35s cubic-bezier(.2,1.4,.4,1); z-index:5; }
@keyframes slam { from{transform:translate(-50%,-50%) rotate(-8deg) scale(2.2); opacity:0} to{transform:translate(-50%,-50%) rotate(-8deg) scale(1); opacity:1} }
/* swipe */
.swipe-head { display:flex; justify-content:space-between; color:var(--muted); margin:8px 0; font-size:.9rem; }
.card-stack { position:relative; height:min(72dvh, 620px); }
.card { position:absolute; inset:0; border-radius:22px; overflow:hidden; background:var(--card); box-shadow:0 10px 40px rgba(0,0,0,.5); touch-action:none; user-select:none; transition:transform .25s ease, opacity .25s; }
.card.behind { transform:scale(.96) translateY(10px); opacity:.6; }
.card img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.card .noimg { width:100%; height:100%; display:grid; place-items:center; color:var(--muted); font-size:4rem; background:linear-gradient(160deg,#222 0%,#141418 100%); }
.card .meta { position:absolute; left:0; right:0; bottom:0; padding:70px 16px 16px; background:linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0)); }
.card .meta h2 { margin:0; font-size:1.5rem; }
.card .meta h2 small { font-weight:400; color:#ddd; }
.card .meta p { margin:6px 0 0; color:#eee; font-size:.98rem; }
.card .tag { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.55); color:#ddd; font-size:.7rem; padding:4px 8px; border-radius:999px; }
.card .decision { position:absolute; top:22px; font-size:2rem; font-weight:900; padding:6px 14px; border:4px solid; border-radius:10px; opacity:0; transform:rotate(-12deg); }
.card .decision.like { right:18px; color:var(--ok); border-color:var(--ok); }
.card .decision.pass { left:18px; color:var(--stamp); border-color:var(--stamp); transform:rotate(12deg); }
.swipe-actions { display:flex; justify-content:center; gap:36px; margin-top:16px; }
.round { width:70px; height:70px; border-radius:50%; font-size:1.8rem; font-weight:800; background:var(--card); border:2px solid #2a2a33; }
.round.like { color:var(--ok); } .round.pass { color:var(--stamp); }
/* reveal */
.beats { margin:24px 0 8px; }
.beat { font-size:1.35rem; line-height:1.3; margin:0 0 16px; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; }
.beat.show { opacity:1; transform:none; }
.beat b { color:var(--accent2); }
.stamp-final { display:inline-block; transform:rotate(-6deg); padding:12px 20px; border:6px solid var(--stamp); color:var(--stamp); font-weight:900; font-size:1.7rem; text-transform:uppercase; border-radius:12px; margin:8px 0 6px; animation:slam2 .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes slam2 { from{transform:rotate(-6deg) scale(2.4); opacity:0} to{transform:rotate(-6deg) scale(1); opacity:1} }
.final-sub { color:var(--muted); margin:4px 0 14px; }
.h2h { background:var(--card); border-radius:var(--radius); padding:14px; margin:10px 0; border:1px solid var(--accent); }
.h2h h3 { margin:0 0 6px; }
.share-row { display:flex; flex-direction:column; gap:4px; }
.name-label { color:var(--muted); font-size:.9rem; display:flex; align-items:center; gap:10px; margin-top:8px; }
.name-label input { flex:1; padding:10px; border-radius:10px; border:1px solid #2a2a33; background:var(--card); color:var(--ink); font-size:1rem; }
.toast { position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:var(--ink); color:#111; padding:10px 16px; border-radius:999px; font-weight:600; z-index:9; }

/* PWA: installed iOS app draws under the status bar (black-translucent), so clear the notch / Dynamic Island. */
main { padding-top:calc(16px + env(safe-area-inset-top)); padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
html, body { overscroll-behavior-y:none; }
/* PWA install card (built by pwa.js under the share buttons on the reveal screen) */
.install-card { position:relative; display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; margin-top:18px; padding:12px 40px 12px 12px; background:var(--card); border:1px solid #2a2a33; border-radius:var(--radius); animation:fade .35s ease; }
.install-card img { border-radius:10px; display:block; }
.install-copy b { display:block; }
.install-copy span { color:var(--muted); font-size:.85rem; }
.install-go { padding:10px 16px; border-radius:999px; background:var(--ink); color:#111; font-weight:700; }
.install-x { position:absolute; top:4px; right:4px; width:36px; height:36px; background:none; color:var(--muted); }
.ios-steps { grid-column:1 / -1; margin:4px 0 0; padding-left:20px; color:var(--muted); font-size:.9rem; line-height:1.6; }
.ios-steps b { color:var(--ink); }
/* legal */
.legal { max-width:480px; margin:0 auto; padding:0 16px calc(16px + env(safe-area-inset-bottom)); text-align:center; }
.legal a { color:inherit; }
.legal-page { max-width:680px; margin:0 auto; padding:24px 16px calc(24px + env(safe-area-inset-bottom)); line-height:1.5; }
.legal-page a { color:var(--ink); }
.fine a { color:inherit; }