:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --surface: #171a22;
  --surface-2: #222631;
  --text: #f5f6f8;
  --muted: #9da3b2;
  --accent: #ff4d73;
  --accent-2: #ff7a45;
  --yes: #2dd4a0;
  --no: #ff5470;
  --radius: 26px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #2c1930 0, var(--bg) 42%); color: var(--text); overscroll-behavior: none; }
button, input { font: inherit; }
button { color: inherit; }
#app { width: min(100%, 520px); min-height: 100vh; margin: 0 auto; }
.screen { min-height: 100vh; padding: max(20px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom)); }
.center { display: grid; place-content: center; text-align: center; color: var(--muted); }
.loader { width: 42px; height: 42px; margin: auto; border: 3px solid #ffffff22; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero { padding: 22px 0 12px; }
.eyebrow { color: #ff9eb2; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 8px 0 5px; font-size: clamp(30px, 9vw, 44px); line-height: .98; letter-spacing: -.045em; }
h2 { margin: 8px 0; font-size: 24px; }
p { line-height: 1.45; }
.muted { color: var(--muted); }
.panel { background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid #ffffff12; border-radius: var(--radius); padding: 18px; box-shadow: 0 20px 60px #00000030; }
.room-code { display: inline-flex; padding: 7px 10px; border-radius: 99px; background: #ffffff10; font-weight: 800; letter-spacing: .08em; }
.participants { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 22px; }
.person { display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border-radius: 99px; background: var(--surface-2); font-size: 13px; }
.avatar { width: 28px; height: 28px; display: grid; place-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 800; }
.primary { width: 100%; border: 0; border-radius: 17px; padding: 15px 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 800; box-shadow: 0 10px 30px #ff4d7340; }
.primary:disabled { opacity: .45; box-shadow: none; }
.primary.ready { background: linear-gradient(135deg, #18b981, var(--yes)); box-shadow: 0 10px 30px #2dd4a040; }
.progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.progress { height: 5px; background: #ffffff15; border-radius: 9px; overflow: hidden; flex: 1; margin-right: 12px; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; transition: width .25s ease; }
.deck { position: relative; min-height: min(70vh, 670px); }
.card { position: relative; height: min(68vh, 650px); min-height: 500px; overflow: hidden; border-radius: 30px; background: var(--surface); box-shadow: 0 26px 80px #0009; touch-action: none; transition: transform .25s ease, opacity .25s ease; }
.card.dragging { transition: none; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-fallback { width: 100%; height: 100%; display: grid; place-content: center; font-size: 70px; background: linear-gradient(155deg, #3a203d, #141820); }
.shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, #080a0dcc 67%, #080a0d 100%); }
.card-copy { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.title-row { display: flex; align-items: baseline; gap: 10px; }
.title-row h2 { margin: 0; font-size: 28px; line-height: 1.05; letter-spacing: -.025em; }
.year { color: #d3d5db; font-size: 18px; }
.description { margin: 10px 0 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #e0e2e7; font-size: 14px; }
.actors { margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vote-actions { display: flex; justify-content: center; gap: 26px; padding-top: 17px; }
.vote-btn { width: 62px; height: 62px; border: 1px solid #ffffff15; border-radius: 50%; background: var(--surface); font-size: 26px; box-shadow: 0 12px 30px #0005; }
.vote-btn.no { color: var(--no); }
.vote-btn.yes { color: var(--yes); }
.stamp { position: absolute; top: 28px; z-index: 2; padding: 7px 12px; border: 4px solid; border-radius: 10px; font-size: 22px; font-weight: 900; opacity: 0; }
.stamp.no { left: 24px; color: var(--no); transform: rotate(-10deg); }
.stamp.yes { right: 24px; color: var(--yes); transform: rotate(10deg); }
.result { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #ffffff10; color: inherit; text-decoration: none; }
.result:last-child { border-bottom: 0; }
.result:active { opacity: .72; }
.result img, .result .mini-poster { width: 58px; height: 78px; object-fit: cover; border-radius: 11px; background: var(--surface-2); }
.result strong { display: block; }
.score { font-weight: 900; color: var(--yes); white-space: nowrap; }
.match { border: 1px solid #2dd4a055; background: linear-gradient(135deg, #16382e, #171a22); }
.close-room { margin-top: 18px; background: var(--surface-2); box-shadow: none; border: 1px solid #ffffff18; }
.close-hint { margin: 9px 10px 0; text-align: center; font-size: 12px; }
.empty { text-align: center; padding: 30px 10px; color: var(--muted); }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); width: min(calc(100% - 36px), 480px); padding: 13px 16px; border-radius: 15px; background: #f7f7fa; color: #15171c; box-shadow: 0 14px 40px #0009; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 20; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.join-box { display: grid; gap: 10px; margin-top: 18px; }
.join-box input { width: 100%; padding: 14px 16px; border: 1px solid #ffffff18; border-radius: 15px; background: var(--surface); color: var(--text); text-transform: uppercase; }
@media (max-height: 700px) { .card { min-height: 430px; height: 61vh; } .description { -webkit-line-clamp: 2; } }