:root { --bg:#fff7f0; --fg:#2a2118; --muted:#7a6a5c; --card:#fff; --accent:#e8590c; --yes:#2f9e44; --no:#e03131; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1a1613; --fg:#f3ece4; --muted:#a8998a; --card:#2a2420; }
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overscroll-behavior:none; }
body { background:var(--bg); color:var(--fg); font:16px/1.4 system-ui, sans-serif; }
#app { max-width:480px; margin:0 auto; padding:16px; min-height:100%; }
.hidden { display:none !important; }
h1 { margin:24px 0 4px; font-size:2rem; }
h2 { font-size:1.1rem; margin:24px 0 8px; }
.sub { color:var(--muted); margin:4px 0 16px; }
.msg { color:var(--no); min-height:1.4em; }
.note { background:#fff3bf; color:#5c4a00; padding:8px 12px; border-radius:8px; font-size:.9rem; }
.or { text-align:center; color:var(--muted); margin:20px 0 10px; }
input { width:100%; padding:14px; font-size:1rem; border:1px solid #cdbfb2; border-radius:12px; background:var(--card); color:var(--fg); margin-bottom:10px; }
#joinForm { display:flex; gap:8px; }
#joinForm input { margin:0; letter-spacing:.3em; text-align:center; font-size:1.2rem; }
button { font:inherit; cursor:pointer; border:0; border-radius:12px; padding:14px 18px; }
button.primary { width:100%; background:var(--accent); color:#fff; font-weight:600; }
button.secondary { background:var(--fg); color:var(--bg); font-weight:600; }
button.link { background:none; color:var(--accent); padding:6px; font-weight:600; }
button:disabled { opacity:.5; cursor:default; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.code { font-size:1.3rem; letter-spacing:.2em; color:var(--accent); }

#deck { position:relative; height:min(60vh, 440px); margin:12px 0; touch-action:pan-y; }
.card { position:absolute; inset:0; background:var(--card); border-radius:20px; padding:24px; box-shadow:0 8px 24px rgba(0,0,0,.15);
  display:flex; flex-direction:column; justify-content:flex-end; user-select:none; touch-action:none; cursor:grab; overflow:hidden;
  background-image:linear-gradient(160deg, var(--hue1), var(--hue2)); color:#fff; }
.card h3 { font-size:1.8rem; margin:0 0 6px; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.card .meta { opacity:.95; font-size:1rem; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.card .emoji { position:absolute; top:24px; left:0; right:0; text-align:center; font-size:6rem; }
.card .stamp { position:absolute; top:24px; padding:4px 12px; border:4px solid; border-radius:10px; font-weight:800; font-size:1.6rem; opacity:0; transform:rotate(-12deg); background:rgba(0,0,0,.2); }
.card .stamp.like { left:20px; color:#8ce99a; border-color:#8ce99a; }
.card .stamp.nope { right:20px; color:#ffa8a8; border-color:#ffa8a8; transform:rotate(12deg); }
.card.fly { transition:transform .3s ease-out, opacity .3s; }
.card.snap { transition:transform .2s ease-out; }
.empty { position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:var(--muted); }
.actions { display:flex; justify-content:center; gap:40px; margin:8px 0; }
.round { width:68px; height:68px; border-radius:50%; font-size:1.8rem; padding:0; background:var(--card); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.round.yes { color:var(--yes); } .round.no { color:var(--no); }
#progress { text-align:center; }

ol#top { padding:0; list-style:none; margin:0; }
ol#top li { background:var(--card); border-radius:14px; padding:12px 14px; margin-bottom:10px; display:flex; gap:12px; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.rank { font-size:1.4rem; font-weight:800; color:var(--accent); width:1.6em; text-align:center; }
.info { flex:1; min-width:0; } .info b { display:block; } .info small { color:var(--muted); }
.score { text-align:right; font-weight:700; color:var(--yes); white-space:nowrap; } .score small { display:block; color:var(--muted); font-weight:400; }
ul#people { list-style:none; padding:0; margin:0; } ul#people li { padding:6px 0; color:var(--muted); }

#settings { margin-top:24px; color:var(--muted); }
#settings summary { cursor:pointer; padding:6px 0; }
#settings label { display:block; font-size:.9rem; margin:8px 0; }