@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  color-scheme: light;
  --ink: #17302c;
  --muted: #65736e;
  --paper: #f2f1e9;
  --white: #fcfbf6;
  --green: #173c34;
  --green-2: #215449;
  --lime: #d5ef81;
  --orange: #ef784a;
  --line: #d9ded4;
  --soft: #e7ece2;
  --danger: #893f26;
  --radius-control: 3px;
  --radius-poster: 2px;
  --content-width: 1320px;
  --shadow-poster: 0 20px 44px rgba(23,48,44,.17);
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: var(--paper); min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #9ec14a; outline-offset: 3px; }
a { color: inherit; }
.site-shell { min-height: 100vh; overflow: hidden; }
.topbar { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 76px); border-bottom: 1px solid rgba(23,48,44,.11); background: rgba(242,241,233,.92); position: relative; z-index: 3; }
.brand { display: flex; align-items: center; gap: 11px; border: 0; background: transparent; padding: 0; color: var(--ink); font-weight: 700; font-size: 16px; letter-spacing: -.035em; }
.brand-logo { display:block; width:174px; height:38px; }
.topbar-note { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.eyebrow { margin: 0 0 15px; font: 500 10px/1.2 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--green-2); }
.home-hero { min-height: 552px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(350px, .98fr); max-width: 1320px; margin: 0 auto; padding: 70px clamp(20px, 7.3vw, 108px) 52px; align-items: center; gap: 5vw; }
.hero-copy { max-width: 500px; position: relative; z-index: 1; animation: rise .55s ease both; }
.hero-copy h1 { font: 400 clamp(48px, 6vw, 79px)/.99 var(--serif); letter-spacing: -.055em; margin: 0 0 22px; max-width: 590px; }
.hero-copy h1 em { color: var(--green-2); font-weight: 400; }
.hero-copy > p:not(.eyebrow) { max-width: 420px; color: #52635d; font-size: 15px; line-height: 1.65; margin: 0 0 27px; }
.hero-art { height: 394px; position: relative; display: grid; place-items: center; isolation: isolate; animation: appear .75s .12s ease both; }
.art-orbit { position: absolute; width: min(37vw, 430px); aspect-ratio: 1; border: 1px solid rgba(23,60,52,.17); border-radius: 50%; transform: rotate(-19deg) scaleY(.63); }
.art-orbit::before, .art-orbit::after { content:''; position:absolute; border: 1px solid rgba(23,60,52,.1); border-radius:50%; inset: 21px; }
.art-orbit::after { inset: 43px; }
.art-sun { position: absolute; width: 204px; height: 204px; border-radius: 50%; background: var(--lime); right: 11%; top: 10%; z-index: -1; }
.poster-stack { height: 330px; width: 100%; max-width: 450px; position: relative; }
.poster { position: absolute; top: 20px; width: 174px; height: 258px; border-radius: var(--radius-poster); padding: 17px 14px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-poster); overflow: hidden; transition: transform .35s cubic-bezier(.2,.75,.2,1); }
.poster::before { content: ''; position:absolute; inset:0; background: linear-gradient(155deg, rgba(255,255,255,.16), transparent 35%, rgba(0,0,0,.18)); pointer-events: none; }
.poster-title { position: relative; font: 400 26px/.96 var(--serif); max-width: 140px; color: #fffaf0; letter-spacing: -.04em; }
.poster-meta { position: relative; color: rgba(255,250,240,.8); text-transform: uppercase; letter-spacing: .15em; font: 9px var(--mono); }
.poster-one { left: 4%; transform: rotate(-12deg) translateY(22px); background: radial-gradient(ellipse at 67% 31%, #e3a969 0 6%, transparent 6.5%), linear-gradient(145deg,#0e403e,#14302e 55%,#d7754b); }
.poster-two { left: 33%; top: 55px; transform: rotate(8deg); z-index: 2; background: radial-gradient(ellipse at 50% 43%, #e4b9a4 0 11%, transparent 11.5%), linear-gradient(20deg,#354d74,#bd755e 55%,#ddc5a1); }
.poster-three { right: 1%; top: 30px; transform: rotate(15deg) translateY(31px); background: radial-gradient(ellipse at 48% 34%, #f2c956 0 18%, transparent 18.5%), linear-gradient(160deg,#263e39,#4e6f50 58%,#b9a35a); }
.poster-stack:hover .poster-one { transform: rotate(-15deg) translate(-4px,16px); }
.poster-stack:hover .poster-two { transform: rotate(5deg) translateY(-4px); }
.poster-stack:hover .poster-three { transform: rotate(18deg) translate(5px,24px); }
.art-ticket { position: absolute; z-index: 3; left: 4%; bottom: 0; background: var(--white); box-shadow: 0 9px 24px rgba(23,48,44,.1); padding: 13px 16px; display: flex; align-items: center; gap: 12px; transform: rotate(-3deg); }
.ticket-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--lime); font-size: 17px; }
.art-ticket strong { display:block; font-size: 11px; letter-spacing: .01em; }
.art-ticket span:last-child { display:block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.button { border: 0; min-height: 48px; border-radius: var(--radius-control); padding: 0 20px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .18s ease, background .18s ease, opacity .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:disabled { cursor: not-allowed; opacity: .43; }
.button-primary { background: var(--green); color: #fff; }
.button-primary:hover:not(:disabled) { background: var(--green-2); }
.button-light { background: var(--white); color: var(--green); border: 1px solid var(--line); }
.button-small { min-height: 38px; padding: 0 13px; font-size: 12px; }
.link-button { border:0; background:transparent; color:var(--green-2); font-size:12px; font-weight:700; padding:10px 5px; }
.join-panel { display: none; width: min(100%, 500px); gap: 9px; margin-top: 14px; animation: rise .25s ease both; }
.join-panel.active { display:flex; }
.text-field { min-width: 0; height: 48px; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 2px; padding: 0 14px; font-size: 13px; }
.text-field::placeholder { color: #8a958d; }
.join-code { max-width: 144px; text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono); }
.home-steps { border-top: 1px solid rgba(23,48,44,.13); border-bottom: 1px solid rgba(23,48,44,.13); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 23px clamp(20px, 7.3vw, 108px); max-width: 1110px; margin: 0 auto; }
.step { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-right: 1px solid var(--line); }
.step:first-child { padding-left: 0; }
.step:last-child { border: 0; }
.step-num { width: 28px; height: 28px; border: 1px solid #bac7bb; color: var(--green-2); border-radius: 50%; flex: 0 0 28px; display: grid; place-items: center; font: 10px var(--mono); }
.step-copy strong { font-size: 11px; display:block; }
.step-copy span { color: var(--muted); font-size:10px; display:block; margin-top:3px; }
.home-footer { max-width: 1110px; margin: 0 auto; padding: 20px clamp(20px, 7.3vw, 108px); display:flex; justify-content:space-between; gap:15px; color:#7f8b83; font-size:10px; }
.home-footer a { text-decoration: none; }
.footer-attribution { display:flex; align-items:center; justify-content:flex-end; gap:8px; max-width:510px; }
.footer-attribution .tmdb-logo { width:48px; flex:0 0 48px; }

.room-shell { max-width: 1240px; margin:0 auto; padding: 38px clamp(18px, 5vw, 68px) 64px; animation: rise .35s ease both; }
.room-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.room-title { margin:0; font: 400 37px/.98 var(--serif); letter-spacing:-.04em; }
.room-subtitle { font-size:12px; color:var(--muted); margin:9px 0 0; }
.room-tools { display:flex; gap:8px; align-items:center; }
.room-code { font:500 12px var(--mono); letter-spacing:.12em; }
.code-copy { min-height:36px; background:var(--white); color:var(--green); border:1px solid var(--line); border-radius:2px; padding:0 11px; font-size:11px; font-weight:600; }
.room-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:42px; padding-top:28px; }
.main-panel { min-width:0; }
.phase-line { display:flex; align-items:center; gap:8px; color:var(--green-2); font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin-bottom:13px; }
.phase-dot { width:7px; height:7px; border-radius:50%; background:#81a73a; box-shadow:0 0 0 3px rgba(129,167,58,.16); }
.phase-line.done .phase-dot { background:var(--orange); box-shadow:0 0 0 3px rgba(239,120,74,.15); }
.main-panel h2 { font:400 clamp(30px, 4vw, 45px)/1.05 var(--serif); letter-spacing:-.04em; margin:0 0 10px; }
.section-intro { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 23px; max-width:610px; }
.search-row { display:flex; gap:8px; max-width:650px; position:relative; }
.search-row .text-field { width:100%; padding-left:43px; }
.search-icon { position:absolute; left:15px; top:13px; color:#819087; font-size:16px; }
.search-results { max-width:650px; margin-top:9px; border-top:1px solid var(--line); }
.search-hint { color:#738078; font-size:11px; padding:13px 2px; }
.search-result { width:100%; display:flex; align-items:center; gap:13px; text-align:left; border:0; border-bottom:1px solid var(--line); padding:10px 4px; background:transparent; color:var(--ink); transition:padding .16s ease, background .16s ease; }
.search-result:hover { padding-left:9px; background:rgba(255,255,255,.45); }
.mini-poster { width:37px; height:51px; flex:0 0 37px; background:#d7dfd4; border-radius:1px; overflow:hidden; }
.mini-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.search-result-title { font-weight:700; font-size:12px; display:block; }
.search-result-meta { color:var(--muted); font-size:10px; display:block; margin-top:3px; }
.search-result-action { margin-left:auto; color:var(--green-2); font-size:11px; font-weight:700; }
.letterboxd-panel { max-width:650px; margin-top:16px; padding:16px; border:1px solid var(--line); background:rgba(252,251,246,.68); }
.letterboxd-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.letterboxd-head h3 { margin:0; font-size:12px; }
.letterboxd-head p,.letterboxd-foot { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.letterboxd-upload { position:relative; overflow:hidden; flex:0 0 auto; min-height:38px; padding:0 13px; font-size:11px; }
.letterboxd-upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.letterboxd-filter-label { display:block; margin-top:14px; color:var(--muted); font-size:10px; }
.letterboxd-filter-label .text-field { width:100%; margin-top:5px; }
.letterboxd-list { max-height:235px; overflow:auto; margin-top:7px; border-top:1px solid var(--line); }
.letterboxd-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; border-bottom:1px solid var(--line); font-size:11px; }
.letterboxd-row small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.letterboxd-row .link-button { flex:0 0 auto; }
.letterboxd-row .link-button:disabled { opacity:.45; cursor:not-allowed; }
.letterboxd-error { margin:12px 0 0; color:var(--danger); font-size:11px; }
.letterboxd-foot { margin-top:8px; }
.your-picks { margin-top:31px; max-width:650px; }
.subheading { display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding-bottom:10px; border-bottom:1px solid var(--line); }
.subheading h3 { margin:0; font-size:12px; }
.subheading span { color:var(--muted); font:10px var(--mono); }
.pick-row { min-height:62px; display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line); padding:8px 2px; }
.pick-row .mini-poster { width:31px; height:43px; flex-basis:31px; }
.pick-row-title { font-size:11px; font-weight:700; flex:1; }
.pick-row-meta { display:block; color:var(--muted); font-size:10px; font-weight:400; margin-top:3px; }
.remove-pick { border:0; background:transparent; color:#819087; font-size:17px; padding:4px 8px; }
.remove-pick:hover { color:#a94427; }
.empty-picks { display:flex; align-items:center; gap:11px; padding:17px 3px; color:#7c8980; font-size:11px; }
.empty-star { font-size:19px; color:#9daf9f; }
.host-action { border-top:1px solid var(--line); margin-top:24px; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.host-action p { font-size:11px; color:var(--muted); margin:0; line-height:1.5; }
.person-sidebar { border-left:1px solid var(--line); padding-left:25px; }
.sidebar-label { display:flex; align-items:center; justify-content:space-between; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding-bottom:11px; border-bottom:1px solid var(--line); }
.count-bubble { display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:50%; background:var(--soft); font:10px var(--mono); }
.people-list { list-style:none; margin:0; padding:7px 0 21px; }
.person-item { display:flex; align-items:center; gap:9px; min-height:35px; color:#40534c; font-size:11px; }
.person-avatar { width:21px; height:21px; border-radius:50%; display:grid; place-items:center; background:#dde5d5; font:9px var(--mono); color:var(--green-2); }
.person-badge { margin-left:auto; font-size:9px; color:#7d8a81; }
.people-tip { color:#728078; font-size:10px; line-height:1.55; border-top:1px solid var(--line); padding-top:13px; }
.nomination-list { margin-top:18px; }
.nominee-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.nominee-item .mini-poster { width:26px; height:37px; flex-basis:26px; }
.nominee-text { font-size:10px; flex:1; }
.nominee-text small { display:block; color:var(--muted); margin-top:3px; }
.nominee-count { color:var(--green-2); font:10px var(--mono); }
.shortlist { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:18px; margin:27px 0 0; }
.film-option { border:0; padding:0; text-align:left; background:transparent; color:var(--ink); position:relative; min-width:0; transition:transform .18s ease; }
.film-option:hover { transform:translateY(-4px); }
.film-option.selected .film-cover { outline:3px solid var(--green-2); outline-offset:3px; }
.film-cover { position:relative; width:100%; aspect-ratio:2 / 2.85; overflow:hidden; border-radius:2px; background:linear-gradient(145deg,#24433d,#b77d5d); box-shadow:0 8px 18px rgba(23,48,44,.12); }
.film-cover::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(11,29,26,.72)); }
.film-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cover-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:15px; text-align:center; color:#fff8eb; font:400 clamp(19px,2.3vw,28px)/1 var(--serif); letter-spacing:-.03em; }
.cover-fallback::before { content:''; position:absolute; width:90%; aspect-ratio:1; border-radius:50%; background:rgba(213,239,129,.62); top:13%; left:25%; mix-blend-mode:screen; }
.cover-fallback span { position:relative; margin-top:40%; }
.film-cover[data-tone="1"] { background:linear-gradient(160deg,#ca8059,#202f40 70%); }
.film-cover[data-tone="2"] { background:linear-gradient(155deg,#465b48,#8c7942 78%); }
.film-cover[data-tone="3"] { background:linear-gradient(155deg,#384d76,#bb7661); }
.film-cover[data-tone="4"] { background:linear-gradient(145deg,#24564e,#ad6c51); }
.film-cover[data-tone="5"] { background:linear-gradient(150deg,#8b5361,#293b48); }
.film-cover[data-tone="6"] { background:linear-gradient(145deg,#c39048,#3c453d 72%); }
.cover-rating { position:absolute; z-index:1; top:9px; right:9px; border-radius:2px; background:rgba(16,37,33,.78); color:#e7f5c0; padding:5px 7px; font:10px var(--mono); backdrop-filter:blur(5px); }
.film-info { padding-top:11px; }
.film-title { display:block; font:400 17px/1.05 var(--serif); letter-spacing:-.02em; }
.film-year { display:block; margin-top:5px; color:var(--muted); font:10px var(--mono); }
.film-note { display:block; margin-top:7px; color:var(--green-2); font-size:10px; font-weight:600; }
.vote-button { margin-top:9px; min-height:34px; width:100%; background:var(--white); color:var(--green); border:1px solid var(--line); font-size:10px; font-weight:700; }
.film-option.selected .vote-button { background:var(--green); color:#fff; border-color:var(--green); }
.vote-status { margin-top:23px; border-top:1px solid var(--line); padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.vote-status p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.result-feature { display:grid; grid-template-columns:minmax(175px, .7fr) 1fr; gap:26px; align-items:center; margin-top:26px; max-width:680px; }
.result-feature .film-cover { max-width:240px; }
.result-copy .eyebrow { margin-bottom:11px; color:#72883e; }
.result-copy h3 { font:400 clamp(32px,5vw,50px)/.98 var(--serif); letter-spacing:-.045em; margin:0; }
.result-copy p { color:var(--muted); font-size:12px; line-height:1.6; margin:13px 0 0; }
.tally-list { margin-top:29px; max-width:680px; border-top:1px solid var(--line); }
.tally-row { display:grid; grid-template-columns:minmax(0,1fr) 1fr 28px; gap:12px; align-items:center; padding:12px 1px; border-bottom:1px solid var(--line); font-size:11px; }
.tally-bar { height:4px; background:#dce3d8; position:relative; }
.tally-bar i { display:block; height:100%; background:var(--green-2); }
.tally-value { text-align:right; font:10px var(--mono); }
.notice { color:#66736c; font-size:10px; line-height:1.5; margin-top:15px; }
.setup-notice { display:flex; gap:10px; align-items:flex-start; max-width:500px; margin:16px 0 0; padding:12px 14px; border:1px solid #d8dfce; border-radius:var(--radius-control); background:rgba(252,251,246,.76); color:#53655d; font-size:11px; line-height:1.55; }
.setup-notice strong { color:var(--ink); }
.setup-notice code { color:var(--green-2); font:10px var(--mono); }
.setup-mark { width:18px; height:18px; flex:0 0 18px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--green-2); font:500 11px var(--mono); }
.error-banner { display:none; max-width:650px; margin:14px 0; padding:10px 12px; color:var(--danger); background:#f3ded2; border-left:2px solid var(--orange); font-size:11px; line-height:1.5; }
.error-banner.active { display:block; animation:appear .2s ease; }
.success-toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,10px); z-index:8; padding:11px 15px; border-radius:2px; background:var(--green); color:#fff; font-size:11px; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; box-shadow:0 8px 22px rgba(10,32,27,.17); }
.success-toast.active { opacity:1; transform:translate(-50%,0); }
.loading-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); display:inline-block; margin-right:6px; animation:pulse 1s ease infinite alternate; }
.tmdb-credit { display:flex; align-items:center; gap:8px; color:#69776e; font-size:9px; margin-top:18px; }
.tmdb-logo { display:block; width:54px; max-height:23px; object-fit:contain; }
.demo-label { color:#977044; font:9px var(--mono); letter-spacing:.04em; }
.join-room { max-width:590px; margin:50px auto; padding:0 20px; }
.join-room h1 { font:400 clamp(42px,7vw,63px)/.98 var(--serif); margin:0 0 12px; letter-spacing:-.04em; }
.join-room p { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 23px; }
.join-room-form { display:flex; gap:9px; }
.join-room-form .text-field { flex:1; }
.join-room-form .code-field { max-width:138px; text-transform:uppercase; font-family:var(--mono); letter-spacing:.12em; }

@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes appear { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { from { transform:scale(.82); opacity:.45; } to { transform:scale(1.12); opacity:1; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (max-width: 850px) {
  .home-hero { min-height:0; grid-template-columns:1fr 320px; gap:2vw; padding-top:55px; padding-bottom:38px; }
  .hero-art { height:330px; }
  .poster-stack { transform:scale(.83); }
  .art-orbit { width:300px; }
  .art-sun { width:160px; height:160px; }
  .room-grid { grid-template-columns:minmax(0,1fr) 210px; gap:26px; }
  .person-sidebar { padding-left:18px; }
}
@media (max-width: 650px) {
  .topbar { height:62px; padding:0 18px; }
  .brand-logo { width:150px; height:34px; }
  .topbar-note { font-size:10px; }
  .home-hero { display:flex; flex-direction:column; align-items:stretch; padding:46px 22px 23px; gap:4px; }
  .hero-copy { max-width:none; }
  .hero-copy h1 { font-size:clamp(51px,13vw,68px); max-width:470px; }
  .hero-copy > p:not(.eyebrow) { max-width:390px; font-size:13px; }
  .hero-art { height:278px; margin-top:10px; }
  .poster-stack { transform:scale(.72); margin-top:-10px; }
  .art-orbit { width:270px; }
  .art-sun { width:134px; height:134px; right:12%; top:0; }
  .art-ticket { left:calc(50% - 150px); bottom:4px; }
  .home-steps { margin:0 20px; padding:17px 0; grid-template-columns:1fr; gap:0; }
  .step { padding:10px 1px; border-right:0; }
  .step:first-child { padding-left:1px; }
  .step-num { width:25px; height:25px; flex-basis:25px; }
  .home-footer { padding:17px 20px; flex-direction:column; }
  .footer-attribution { justify-content:flex-start; }
  .letterboxd-panel { padding:13px; }
  .letterboxd-head { align-items:flex-start; flex-direction:column; }
  .room-shell { padding:25px 18px 48px; }
  .room-head { flex-direction:column; gap:14px; padding-bottom:18px; }
  .room-title { font-size:32px; }
  .room-grid { display:flex; flex-direction:column; gap:25px; padding-top:22px; }
  .person-sidebar { order:-1; border-left:0; padding-left:0; border-bottom:1px solid var(--line); padding-bottom:12px; }
  .people-list { display:flex; flex-wrap:wrap; gap:0 13px; padding-bottom:9px; }
  .people-tip { display:none; }
  .person-item { min-height:30px; }
  .sidebar-label { max-width:none; }
  .nomination-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
  .host-action { align-items:flex-start; flex-direction:column; }
  .host-action .button { width:100%; }
  .shortlist { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 13px; }
  .film-title { font-size:15px; }
  .result-feature { grid-template-columns:minmax(100px, .7fr) 1fr; gap:18px; }
  .result-copy h3 { font-size:34px; }
  .vote-status { align-items:flex-start; flex-direction:column; }
  .vote-status .button { width:100%; }
  .join-room { margin:35px auto; }
  .join-room-form { flex-direction:column; }
  .join-room-form .code-field { max-width:none; }
}

/* A friendly, simpler movie-night look: the real film artwork carries the colour. */
:root {
  --ink: #26332d;
  --muted: #737d76;
  --paper: #fffaf0;
  --white: #ffffff;
  --green: #275d49;
  --green-2: #367b5c;
  --lime: #f4cf64;
  --orange: #ed7658;
  --line: #e8e2d6;
  --soft: #f2ebde;
  --danger: #9a402f;
  --radius-control: 12px;
  --radius-poster: 8px;
  --shadow-poster: 0 12px 25px rgba(61, 55, 39, .13);
}
body { background: var(--paper); }
.topbar { height: 66px; max-width: 1280px; margin: 0 auto; padding: 0 28px; background: transparent; border: 0; }
.topbar-note { font-size: 12px; }
.home-hero { min-height: 500px; max-width: 1120px; padding: 54px 42px 42px; grid-template-columns: 1.1fr .9fr; gap: 6vw; }
.hero-copy { max-width: 540px; }
.eyebrow { color: var(--green-2); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: none; margin-bottom: 13px; }
.hero-copy h1 { font-family: var(--sans); font-size: clamp(44px, 6vw, 70px); font-weight: 700; line-height: 1.02; letter-spacing: -.065em; margin-bottom: 18px; }
.hero-copy h1 em { color: var(--orange); font-style: normal; }
.hero-copy > p:not(.eyebrow) { max-width: 390px; color: #65716a; font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
.home-actions { gap: 10px; }
.button { border-radius: 12px; min-height: 46px; padding: 0 18px; font-size: 13px; }
.button-primary { background: var(--green); }
.button-primary:hover:not(:disabled) { background: #1e4d3b; }
.button-light { background: #fff; }
.join-panel { margin-top: 13px; }
.text-field { background: #fff; border-radius: 11px; }
.hero-art { width: min(100%, 390px); height: 330px; justify-self: center; border-radius: 30px; background: #f7e8b9; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; animation: appear .45s ease both; }
.hero-art::before, .hero-art::after { content: ''; position: absolute; border: 1px solid rgba(39,93,73,.12); border-radius: 50%; width: 320px; height: 320px; }
.hero-art::after { width: 255px; height: 255px; }
.movie-note { position: relative; z-index: 1; display:flex; flex-direction:column; justify-content:space-between; width: 218px; height: 252px; padding: 20px; border-radius: 14px; transform: rotate(-4deg); background: #fffdf6; box-shadow: 0 12px 28px rgba(77,63,25,.15); }
.movie-note-kicker { color: var(--green-2); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.movie-note strong { color: var(--ink); font-size: 31px; line-height: .98; letter-spacing: -.06em; }
.movie-note-footer { display:flex; gap:8px; align-items:center; color:#6d746d; font-size: 11px; }
.movie-note-footer span:first-child, .movie-note-footer span:last-child { background:#f2ead8; border-radius: 20px; padding:6px 9px; }
.popcorn-bucket { position:absolute; z-index:2; right:24px; top:17px; font-size: 46px; transform: rotate(9deg); filter: drop-shadow(0 4px 3px rgba(55,47,29,.1)); }
.sparkle { position:absolute; z-index:2; color:var(--orange); }
.sparkle-one { left:26px; top:42px; font-size:22px; }
.sparkle-two { right:28px; bottom:31px; color:var(--green-2); font-size:25px; }
.poster-stack, .art-orbit, .art-sun, .art-ticket { display:none; }
.home-steps { max-width: 1020px; border: 0; border-radius: 16px; background: rgba(255,255,255,.7); padding: 16px 24px; }
.step { gap: 11px; }
.step-num { border:0; background:#f8e6b2; color:#644d16; font-family:var(--sans); font-weight:700; }
.step-copy strong { font-size: 12px; }
.step-copy span { font-size: 11px; }
.home-footer { max-width:1020px; padding:20px 24px; color:#81867f; }
.room-shell { max-width:1120px; padding: 28px 32px 52px; }
.room-head { align-items:center; border:0; padding:12px 0 20px; }
.room-title { font:700 30px/1 var(--sans); letter-spacing:-.055em; }
.room-head .eyebrow { margin-bottom:8px; }
.room-tools { background:#fff; border:1px solid var(--line); border-radius:12px; padding:5px; }
.room-code { padding:0 6px 0 9px; }
.code-copy { border-radius:9px; min-height:34px; background:#f4efe5; }
.room-grid { grid-template-columns:minmax(0,1fr) 230px; gap:34px; padding-top:18px; }
.main-panel h2 { font:700 clamp(29px,3.5vw,40px)/1.08 var(--sans); letter-spacing:-.06em; }
.section-intro { font-size:14px; max-width:630px; }
.phase-line { font:700 11px var(--sans); letter-spacing:.03em; }
.phase-dot { background:var(--orange); box-shadow:0 0 0 3px rgba(237,118,88,.14); }
.search-row .text-field { border-radius:12px; }
.search-results { border:0; margin-top:10px; }
.search-result { border:1px solid var(--line); border-radius:12px; background:#fff; padding:9px; margin-bottom:7px; }
.search-result:hover { padding-left:12px; background:#fffefa; }
.search-result-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.search-result-title { font-size:13px; }
.search-result-meta { font-size:11px; }
.search-result-action { border-radius:9px; background:#edf3ec; padding:8px 10px; }
.mini-poster { border-radius:5px; background:#f1e7d2; }
.letterboxd-panel { border-radius:14px; background:#fff; }
.letterboxd-upload { border-radius:10px; }
.your-picks { margin-top:25px; }
.subheading { padding-bottom:11px; }
.subheading h3 { font-size:14px; }
.subheading span { font-family:var(--sans); font-size:11px; }
.pick-row { border-color:var(--line); }
.pick-row-title { font-size:12px; }
.pick-row-meta { font-size:11px; }
.genre-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.genre-chip { display:inline-flex; width:max-content; border-radius:30px; background:#f4efe5; color:#59645c; padding:4px 8px; font-size:9px; font-weight:600; line-height:1.1; }
.pick-row .genre-list { margin-top:4px; }
.nominee-item .genre-chip { padding:3px 7px; font-size:8px; }
.empty-picks { font-size:12px; }
.host-action { border-top:0; border-radius:14px; background:#f4eedf; margin-top:20px; padding:15px; }
.host-action p { font-size:12px; }
.host-action .button { border-radius:10px; }
.person-sidebar { border-left:1px solid var(--line); padding-left:22px; }
.sidebar-label { font-size:11px; letter-spacing:0; text-transform:none; }
.person-item { font-size:12px; }
.person-avatar { background:#f6e6bb; color:#5f4b17; font-family:var(--sans); font-weight:700; }
.person-badge { font-size:10px; }
.people-tip { font-size:11px; }
.nomination-list { margin-top:16px; }
.nominee-item { align-items:flex-start; }
.nominee-text { font-size:11px; }
.nominee-text small { font-size:10px; }
.shortlist { grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:13px; margin-top:20px; }
.film-option { padding:9px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.film-option:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(48,56,45,.08); }
.film-option.selected { border-color:var(--green-2); background:#fbfff8; }
.film-cover { border-radius:8px; box-shadow:none; }
.cover-rating { border-radius:20px; }
.film-info { padding:10px 3px 2px; }
.film-title { font:700 15px/1.15 var(--sans); letter-spacing:-.025em; }
.film-year { font:11px var(--sans); }
.film-note { color:var(--green-2); font-size:10px; }
.vote-button { border-radius:9px; min-height:35px; }
.jev-explainer { max-width:660px; margin:16px 0 20px; padding:12px 14px; border:1px solid #eee3ca; border-radius:12px; background:#fff9e8; color:#526158; }
.jev-explainer summary { color:#675418; cursor:pointer; font-size:12px; font-weight:700; }
.jev-explainer p { margin:9px 0 1px; max-width:590px; font-size:12px; line-height:1.6; }
.vote-status { border-color:var(--line); }
.vote-status p { font-size:12px; }
.vote-status .button { border-radius:10px; }
.result-feature { grid-template-columns:minmax(155px,.55fr) 1fr; max-width:720px; }
.result-feature .film-cover { border-radius:10px; }
.result-copy h3 { font:700 clamp(30px,4vw,46px)/1.02 var(--sans); letter-spacing:-.06em; }
.result-copy p { font-size:13px; }
.tally-list { margin-top:24px; }
.tally-row { grid-template-columns:minmax(0,1fr) 1fr 25px; font-size:12px; gap:14px; }
.tally-row > span:first-child .genre-list { margin-top:4px; }
.tally-bar { height:7px; border-radius:6px; overflow:hidden; }
.tally-bar i { background:var(--orange); border-radius:6px; }
.tally-value { font-family:var(--sans); font-weight:700; }
.setup-notice, .error-banner { border-radius:12px; }
.setup-notice { background:#fff; font-size:12px; }
.error-banner { font-size:12px; }
.success-toast { border-radius:12px; background:var(--green); font-size:12px; }
.tmdb-credit { font-size:10px; }
.tmdb-logo { width:58px; }
@media (max-width:850px) {
  .home-hero { grid-template-columns:1fr 320px; gap:28px; }
  .room-grid { grid-template-columns:minmax(0,1fr) 205px; gap:24px; }
}
@media (max-width:650px) {
  .topbar { height:60px; padding:0 18px; }
  .topbar-note { font-size:10px; }
  .home-hero { padding:38px 20px 24px; gap:17px; }
  .hero-copy h1 { font-size:clamp(43px,12vw,60px); }
  .hero-copy > p:not(.eyebrow) { font-size:15px; }
  .hero-art { width:100%; height:230px; border-radius:22px; }
  .hero-art::before { width:245px; height:245px; }
  .hero-art::after { width:190px; height:190px; }
  .movie-note { width:165px; height:190px; padding:15px; }
  .movie-note strong { font-size:25px; }
  .popcorn-bucket { font-size:36px; right:18px; top:11px; }
  .sparkle-one { left:17px; top:25px; }
  .sparkle-two { right:18px; bottom:19px; }
  .home-steps { margin:0 18px; padding:10px 15px; }
  .step { border:0; padding:8px 0; }
  .home-footer { padding:16px 20px; }
  .room-shell { padding:19px 18px 40px; }
  .room-head { align-items:flex-start; }
  .room-title { font-size:26px; }
  .room-tools { gap:2px; }
  .room-grid { gap:18px; padding-top:10px; }
  .person-sidebar { border:0; border-radius:13px; background:#fff; padding:12px; }
  .people-list { padding-bottom:4px; }
  .nomination-list { grid-template-columns:1fr; }
  .shortlist { gap:10px; }
  .film-option { padding:7px; }
  .film-info { padding-top:8px; }
  .film-title { font-size:13px; }
  .genre-chip { padding:4px 7px; font-size:8px; }
  .result-feature { grid-template-columns:110px 1fr; gap:15px; }
  .result-copy h3 { font-size:29px; }
  .result-copy p { font-size:11px; }
  .tally-row { grid-template-columns:minmax(0,1fr) 75px 20px; gap:8px; font-size:10px; }
}
.genre-preferences { max-width:650px; margin:14px 0 8px; border:1px solid var(--line); border-radius:13px; background:#fff; padding:12px 14px; }
.genre-preferences summary { display:flex; justify-content:space-between; gap:12px; cursor:pointer; color:var(--ink); font-size:12px; font-weight:700; }
.genre-preferences summary span { color:var(--muted); font-weight:500; }
.genre-preferences > p { margin:9px 0 10px; color:var(--muted); font-size:11px; }
.genre-options { display:flex; flex-wrap:wrap; gap:7px; }
.genre-choice { border:1px solid var(--line); border-radius:99px; background:#fff; color:#59645c; padding:7px 10px; font-size:11px; }
.genre-choice:hover { border-color:#b4c9b8; }
.genre-choice.selected { border-color:#bdd1c2; background:#eaf3e9; color:var(--green); font-weight:700; }
.host-action { align-items:flex-start; flex-direction:column; gap:10px; }
.pick-mode-actions { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.pick-mode-actions .button { min-height:42px; }
.host-action > small { color:var(--muted); font-size:10px; }
@media (max-width:650px) {
  .genre-preferences { padding:11px; }
  .pick-mode-actions { flex-direction:column; }
  .pick-mode-actions .button { width:100%; }
}

/* A little game-night energy in the shared room, while keeping the film list easy to scan. */
.room-head { border-bottom:0; padding-bottom:18px; }
.room-title { font-size:clamp(30px, 4vw, 42px); letter-spacing:-.055em; }
.room-subtitle { display:flex; align-items:center; gap:7px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#f07b59; box-shadow:0 0 0 4px rgba(240,123,89,.14); animation: live-pulse 1.8s ease-out infinite; }
.room-tools { background:#fffefa; border:1px solid #e7ddc8; border-radius:999px; padding:5px 6px 5px 14px; }
.room-code { color:#866944; }
.code-copy { border:0; border-radius:999px; background:#f2d876; color:#3e3823; padding:0 15px; min-height:38px; font-size:11px; }
.phase-line { gap:10px; font:700 11px var(--sans); letter-spacing:.055em; }
.phase-dot { background:#f07b59; box-shadow:0 0 0 4px rgba(240,123,89,.12); }
.main-panel h2 { font-size:clamp(32px, 4vw, 46px); }
.person-sidebar { border-left:0; border-radius:18px; background:#fbf8ed; padding:18px 18px 20px; }
.sidebar-label { letter-spacing:.03em; text-transform:none; font-size:12px; }
.count-bubble { border-radius:999px; background:#f2d876; color:#564a20; font-weight:700; }
.people-list { padding:9px 0 15px; }
.person-item { min-height:41px; gap:10px; }
.person-avatar { width:29px; height:29px; flex:0 0 29px; font:700 10px var(--sans); color:#342f27; background:#ffd69a; animation: avatar-pop .35s both; }
.person-item:nth-child(5n + 2) .person-avatar { background:#cfe5b7; }
.person-item:nth-child(5n + 3) .person-avatar { background:#f6c9bd; }
.person-item:nth-child(5n + 4) .person-avatar { background:#d9c9ed; }
.person-item:nth-child(5n + 5) .person-avatar { background:#bfe2dd; }
.host-tag { color:#7c8a80; }
.person-badge { border-radius:999px; background:#f0ebdc; color:#736b57; padding:4px 8px; font-size:9px; font-weight:700; }
.people-tip { border-radius:12px; background:#fffefa; padding:11px 12px; color:#726a58; font-size:11px; line-height:1.5; }
.nomination-list { margin-top:19px; }
.nominee-item { animation: arrive .35s both; }
.genre-preferences { border-color:#eadfc8; background:#fbf8ed; }
.genre-choice.selected { background:#f2d876; border-color:#e1c75c; color:#43391d; }
.host-action { border-top:1px dashed #d7c9ac; }
.pick-mode-actions .button-primary { background:#ed7959; }
.pick-mode-actions .button-primary:hover:not(:disabled) { background:#d9684b; }
.button-primary { border-radius:999px; }
.button-light { border-radius:999px; }
@keyframes live-pulse { 0% { box-shadow:0 0 0 0 rgba(240,123,89,.3); } 100% { box-shadow:0 0 0 7px rgba(240,123,89,0); } }
@keyframes avatar-pop { from { opacity:0; transform:scale(.65) rotate(-10deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .live-dot, .person-avatar, .nominee-item { animation:none; }
}
@media (max-width:650px) {
  .room-head { gap:12px; }
  .room-tools { align-self:stretch; justify-content:space-between; }
  .person-sidebar { border-radius:16px; padding:14px; }
}
:root {
  --party-butter: #f2d876;
  --party-tomato: #ed7959;
  --party-lilac: #d9c9ed;
  --party-mint: #bfe2dd;
  --party-paper: #fff9ec;
}
.sound-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:0 10px;
  border:1px solid #eadfc8;
  border-radius:999px;
  background:#fffefa;
  color:#5f6557;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  transition:background .18s ease, transform .18s ease;
}
.sound-toggle:hover { background:var(--party-paper); transform:translateY(-1px); }
.sound-toggle[aria-pressed="false"] { color:#89877e; background:#f5f2ea; }
.sound-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.sound-toggle svg path:first-child { fill:currentColor; stroke:none; }
.sound-toggle .sound-wave { stroke-width:1.4; }
.sound-toggle:focus-visible { outline-color:var(--party-tomato); }
.code-copy { background:var(--party-butter); }
.pick-mode-actions .button-primary { background:var(--party-tomato); }
.pick-mode-actions .button-primary:hover:not(:disabled) { background:#d9684b; }
.result-feature { animation: winner-arrives .55s cubic-bezier(.2,.75,.2,1) both; }
@keyframes winner-arrives { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:650px) {
  .sound-toggle { min-height:34px; padding:0 8px; }
  .room-tools { gap:5px; flex-wrap:wrap; }
  .room-tools .room-code { margin-right:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .result-feature { animation:none; }
}

/* Responsive finish + a little motion for the shared movie-night rhythm. */
@keyframes note-float {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 0 -7px; rotate: -2deg; }
}
@keyframes popcorn-wiggle {
  0%, 100% { rotate: 9deg; translate: 0 0; }
  35% { rotate: 15deg; translate: 1px -3px; }
  70% { rotate: 5deg; translate: -1px 0; }
}
@keyframes sparkle-twinkle {
  0%, 100% { opacity: .45; scale: .78; }
  50% { opacity: 1; scale: 1.12; }
}
@keyframes card-arrive { from { opacity:0; translate:0 9px; } to { opacity:1; translate:0 0; } }
@keyframes tally-fill { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

.movie-note { animation: note-float 4.8s ease-in-out infinite; }
.popcorn-bucket { animation: popcorn-wiggle 3.8s ease-in-out infinite; transform-origin: 70% 90%; }
.sparkle-one { animation: sparkle-twinkle 2.1s ease-in-out infinite; }
.sparkle-two { animation: sparkle-twinkle 2.6s .45s ease-in-out infinite; }
.film-option { transition: transform .22s cubic-bezier(.2,.75,.2,1), box-shadow .22s ease, border-color .22s ease; }
.film-option { animation:card-arrive .42s cubic-bezier(.2,.75,.2,1) both; }
.film-option:nth-child(2) { animation-delay:.05s; }
.film-option:nth-child(3) { animation-delay:.1s; }
.film-option:nth-child(4) { animation-delay:.15s; }
.film-option:nth-child(5) { animation-delay:.2s; }
.film-option:nth-child(6) { animation-delay:.25s; }
.film-option .film-cover img { transition: transform .45s cubic-bezier(.2,.75,.2,1); }
.film-option:hover .film-cover img, .film-option:focus-visible .film-cover img { transform: scale(1.045); }
.tally-bar i { transform-origin:left; animation: tally-fill .7s cubic-bezier(.2,.75,.2,1) both; }

@media (max-width: 980px) {
  .home-hero { grid-template-columns:minmax(0,1fr) minmax(260px,.8fr); gap:32px; padding-inline:32px; }
  .hero-art { max-width:360px; }
  .room-shell { padding-inline:26px; }
  .room-grid { grid-template-columns:minmax(0,1fr) 205px; gap:23px; }
  .shortlist { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .topbar { padding-inline:22px; }
  .home-hero { grid-template-columns:minmax(0,1fr) 260px; gap:22px; padding:40px 26px 30px; }
  .hero-art { height:280px; }
  .home-steps { margin-inline:24px; }
  .room-shell { padding:22px 22px 42px; }
  .room-head { align-items:flex-start; }
  .room-grid { display:flex; flex-direction:column; gap:22px; }
  .person-sidebar { order:-1; padding:14px 16px; }
  .people-list { display:flex; flex-wrap:wrap; gap:2px 14px; padding:8px 0 10px; }
  .person-item { min-height:35px; }
  .people-tip { display:none; }
  .nomination-list { margin-top:8px; }
  .nomination-list > .sidebar-label { padding-top:12px; border-top:1px solid var(--line); }
  .nomination-list .nominee-item { display:none; }
  .nomination-list:has(.nominee-item) { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .nomination-list:has(.nominee-item) > .sidebar-label { width:100%; }
  .nomination-list .nominee-item { display:flex; max-width:calc(50% - 5px); }
  .nomination-list .nominee-item .genre-list { display:none; }
  .room-tools { flex-wrap:wrap; justify-content:flex-end; }
  .shortlist { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .topbar { height:58px; padding-inline:16px; }
  .brand-logo { width:138px; height:31px; }
  .topbar-note { max-width:126px; text-align:right; line-height:1.25; }
  .home-hero { padding:30px 18px 22px; gap:13px; }
  .hero-copy h1 { font-size:clamp(42px,12vw,58px); }
  .hero-copy > p:not(.eyebrow) { font-size:14px; }
  .hero-art { height:210px; border-radius:19px; }
  .movie-note { width:150px; height:174px; padding:13px; }
  .movie-note strong { font-size:23px; }
  .movie-note-footer { gap:5px; font-size:9px; }
  .popcorn-bucket { right:14px; top:8px; font-size:32px; }
  .sparkle-one { left:13px; top:18px; }
  .sparkle-two { right:14px; bottom:15px; }
  .home-actions { gap:8px; }
  .home-actions .button { flex:1 1 auto; padding-inline:13px; }
  .join-panel.active { flex-wrap:wrap; }
  .join-panel .join-code { flex:0 0 112px; }
  .join-panel .text-field:not(.join-code) { flex:1 1 120px; }
  .join-panel .button { width:100%; }
  .home-steps { margin-inline:16px; padding:9px 14px; }
  .home-footer { padding:15px 18px; }
  .footer-attribution { align-items:flex-start; flex-wrap:wrap; line-height:1.5; }
  .room-shell { padding:16px 16px 36px; }
  .room-head { gap:12px; }
  .room-head > div:first-child { min-width:0; }
  .room-head .eyebrow { font-size:10px; }
  .room-title { font-size:clamp(25px,7vw,32px); line-height:1.04; }
  .room-subtitle { flex-wrap:wrap; font-size:11px; }
  .room-tools { align-self:stretch; justify-content:flex-start; gap:6px; padding:5px 7px; }
  .room-tools .room-code { margin-right:auto; padding-inline:3px; }
  .code-copy { min-height:34px; padding-inline:11px; }
  .sound-toggle { min-height:34px; }
  .person-sidebar { border-radius:14px; padding:12px; }
  .people-list { flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:7px 1px 10px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .people-list::-webkit-scrollbar { display:none; }
  .person-item { flex:0 0 auto; max-width:none; min-height:35px; gap:6px; padding:3px 8px 3px 3px; border-radius:999px; background:#fffefa; font-size:11px; scroll-snap-align:start; }
  .person-badge { padding:3px 6px; font-size:8px; }
  .nomination-list .nominee-item { max-width:100%; }
  .nomination-list .nominee-item:nth-of-type(n+5) { display:none; }
  .shortlist { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .film-option { padding:7px; }
  .film-title { font-size:13px; overflow-wrap:anywhere; }
  .film-year { font-size:10px; }
  .film-info .genre-list { gap:4px; }
  .film-note { line-height:1.35; }
  .result-feature { grid-template-columns:minmax(94px,.55fr) minmax(0,1fr); gap:13px; }
  .result-feature .film-cover { width:100%; }
  .result-copy { min-width:0; }
  .result-copy h3 { font-size:clamp(23px,7vw,30px); overflow-wrap:anywhere; }
  .result-copy p { overflow-wrap:anywhere; }
  .tally-row { grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; }
  .tally-row > span:first-child { grid-column:1; min-width:0; overflow-wrap:anywhere; }
  .tally-row .tally-bar { grid-column:1 / -1; grid-row:2; }
  .tally-row .tally-value { grid-column:2; grid-row:1; }
}
@media (max-width: 360px) {
  .topbar-note { display:none; }
  .home-actions { flex-direction:column; align-items:stretch; }
  .home-actions .button { width:100%; }
  .room-shell { padding-inline:12px; }
  .room-tools { flex-wrap:wrap; }
  .room-tools .room-code { flex-basis:36px; }
  .room-tools .code-copy { flex:1; }
  .room-grid { gap:16px; }
  .sidebar-label { gap:8px; }
  .person-item { width:auto; }
  .result-feature { grid-template-columns:86px minmax(0,1fr); gap:10px; }
  .result-copy h3 { font-size:23px; }
  .cover-rating { font-size:9px; }
}
@media (prefers-reduced-motion: reduce) {
  .movie-note, .popcorn-bucket, .sparkle-one, .sparkle-two, .tally-bar i { animation:none; }
  .film-option { animation:none; transition:none; }
  .film-option .film-cover img { transition:none; }
}

/* Popcorn Pact wordmark spacing */
.brand-logo { width:190px; height:auto; }
@media (max-width: 850px) { .brand-logo { width:164px; } }
@media (max-width: 520px) { .brand-logo { width:148px; } }
@media (max-width: 360px) { .brand-logo { width:138px; } }

.footer-cookie-settings { border:0; padding:0 0 0 8px; color:var(--green-2); font:600 10px var(--sans); text-decoration:underline; background:transparent; }
.footer-legal-links { display:inline-flex; gap:10px; margin-left:12px; }
.footer-legal-links a,.cookie-provider-link a { color:var(--green-2); text-underline-offset:2px; }
.footer-legal-links a { text-decoration:underline; }
.cookie-provider-link { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
.cookie-banner { position:fixed; z-index:20; left:18px; right:18px; bottom:18px; margin:0 auto; max-width:1040px; padding:18px 20px; border:1px solid var(--line); background:var(--white); box-shadow:0 12px 40px rgba(23,48,44,.2); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cookie-copy { max-width:560px; }
.cookie-copy strong { font:400 20px/1.1 var(--serif); }
.cookie-copy p,.cookie-dialog-intro { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.cookie-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.cookie-actions .button,.cookie-dialog-actions .button { min-height:38px; padding:0 12px; font-size:10px; }
.cookie-settings-fab { position:fixed; z-index:15; left:16px; bottom:16px; padding:9px 12px; color:var(--green); background:var(--white); border:1px solid var(--line); font-size:10px; box-shadow:0 3px 14px rgba(23,48,44,.1); }
.cookie-dialog[hidden] { display:none; }
.cookie-dialog { position:fixed; z-index:30; inset:0; padding:20px; display:grid; place-items:center; background:rgba(16,32,29,.46); }
.cookie-dialog-card { position:relative; width:min(100%,470px); padding:28px; background:var(--white); box-shadow:0 18px 60px rgba(0,0,0,.24); }
.cookie-dialog-card h2 { margin:0; font:400 34px/1 var(--serif); }
.cookie-dialog-card .eyebrow { margin-bottom:9px; }
.cookie-close { position:absolute; right:15px; top:11px; border:0; background:transparent; color:var(--muted); font-size:25px; }
.cookie-option { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.cookie-option:first-of-type { margin-top:14px; border-top:1px solid var(--line); }
.cookie-option strong,.cookie-option small { display:block; }
.cookie-option strong { font-size:12px; }
.cookie-option small { margin-top:3px; color:var(--muted); font-size:10px; }
.cookie-option input { width:17px; height:17px; accent-color:var(--green); }
.cookie-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
@media (max-width:650px) {
  .cookie-banner { left:10px; right:10px; bottom:10px; padding:15px; display:block; }
  .cookie-copy strong { font-size:18px; }
  .cookie-actions { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; }
  .cookie-actions .button:last-child { grid-column:1/-1; }
  .cookie-actions .button { min-height:40px; }
  .cookie-dialog-card { padding:24px 19px; }
  .cookie-dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
  .cookie-dialog-actions .button { padding:0 8px; }
}