:root{
  --accent:#39ff88;
  --green:var(--accent);
  --accent-rgb:57,255,136;
  --accent2:#1a7a48;
  --accent2-rgb:26,122,72;
  --bg:#030504;
  --panel:#0a0e0b;
  --panel2:#0e1410;
  --panel3:#111814;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.065);
  --muted:#839089;
  --shadow:0 30px 80px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:#000;color:#fff}
body.room-page,body.landing-page{
  background:
    radial-gradient(circle at 10% 0%,rgba(var(--accent-rgb),.075),transparent 28%),
    radial-gradient(circle at 100% 100%,rgba(var(--accent-rgb),.035),transparent 25%),
    #000;
  background-attachment:fixed;
}
body.movie-theme{
  background:
    radial-gradient(ellipse 70% 55% at 4% -5%,rgba(var(--accent-rgb),.22),transparent 58%),
    radial-gradient(ellipse 68% 52% at 101% 8%,rgba(var(--accent2-rgb),.18),transparent 60%),
    radial-gradient(ellipse 65% 48% at 58% 106%,rgba(var(--accent-rgb),.08),transparent 64%),
    #000;
  background-attachment:fixed;
}
button,input{font:inherit}
button:disabled{opacity:.55;cursor:not-allowed}
input{text-transform:none}
[hidden]{display:none!important}

h1{font-size:clamp(42px,8vw,74px);letter-spacing:-.055em;line-height:.96;margin:8px 0 18px}
.eyebrow{font-size:11px;font-weight:850;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.lead{color:#b2bcb7;font-size:17px;line-height:1.65;max-width:650px;margin:0}
.site-icon{display:block;width:52px;height:52px;object-fit:contain}
.tv-icon{
  background:linear-gradient(135deg,var(--accent) 5%,var(--accent2) 95%);
  -webkit-mask:url("tv-icon.svg") center/contain no-repeat;
  mask:url("tv-icon.svg") center/contain no-repeat;
}

/* ---------------- LANDING ---------------- */
.landing-page{min-height:100vh;display:grid;place-items:center;padding:34px 20px}
.landing-shell{width:min(100%,720px)}
.landing-clean{width:min(100%,540px)}
.landing-intro{max-width:700px;margin-bottom:24px}
.landing-intro-clean{text-align:center;margin:0 0 25px}
.landing-intro-clean h1{font-size:clamp(42px,9vw,62px);margin-bottom:0}
.landing-tv{width:64px;height:64px;margin:0 auto 18px;filter:drop-shadow(0 0 20px rgba(var(--accent-rgb),.15))}

.landing-action-card{display:grid;gap:10px}
.landing-action{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;text-align:left;background:rgba(10,14,11,.92);border:1px solid var(--line);border-radius:16px;color:#fff;padding:17px 18px;cursor:pointer;box-shadow:0 18px 45px rgba(0,0,0,.24);transition:.18s transform,.18s border-color,.18s background}
.landing-action:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.32);background:rgba(14,20,16,.96)}
.landing-action .action-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.18);color:var(--accent);font-size:21px;font-weight:800}
.landing-action strong{display:block;font-size:16px;letter-spacing:-.015em}
.landing-action small{display:block;color:#75817a;font-size:11px;margin-top:3px}
.action-arrow{color:#738078;font-size:19px}

.create-card{background:rgba(10,14,11,.95);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.room-entry-card.clean-entry{position:relative;overflow:visible;padding:0}
.entry-back{appearance:none;border:0;background:transparent;color:#8d9992;cursor:pointer;padding:17px 20px 0;font-size:12px;font-weight:750}
.entry-back:hover{color:#fff}
.entry-form{display:grid;gap:17px;padding:18px 28px 28px}
.entry-heading{margin-bottom:2px}
.entry-heading h2{font-size:27px;letter-spacing:-.035em;margin:5px 0 0}
.entry-form label,.gate-label{display:grid;gap:8px}
.entry-form label>span,.gate-label>span{font-size:12px;font-weight:700;color:#a9b4ae}
.mode-field[hidden]{display:none!important}
.entry-form .primary-btn{margin-top:2px}

input{width:100%;border:1px solid var(--line);border-radius:11px;background:#070a08;color:#fff;padding:14px 15px;outline:none;transition:.18s border-color,.18s box-shadow,.18s background}
input:focus{border-color:rgba(var(--accent-rgb),.60);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.075);background:#090d0a}
.room-id-input{text-transform:uppercase;letter-spacing:.12em;font-weight:800}

.theme-fieldset{margin:0;padding:0;border:0}
.theme-fieldset legend{font-size:12px;font-weight:700;color:#a9b4ae;margin-bottom:8px}
.theme-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.theme-choice{display:block!important;cursor:pointer}
.theme-choice input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.theme-choice-ui{display:flex!important;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:#090d0a;padding:12px;transition:.18s border-color,.18s background,.18s box-shadow}
.theme-choice input:checked+.theme-choice-ui{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.055);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.08)}
.theme-choice-ui strong{display:block;font-size:12px;color:#fff}
.theme-choice-ui small{display:block;color:#707c75;font-size:10px;margin-top:2px}
.theme-swatch{display:block;width:24px;height:24px;border-radius:7px;flex:0 0 24px;border:1px solid rgba(255,255,255,.1)}
.classic-swatch{background:linear-gradient(135deg,#39ff88,#0d6f39)}
.movie-swatch{background:conic-gradient(from 25deg,#ff4d67,#8c5dff,#00b7ff,#ffc247,#ff4d67)}

.primary-btn,.secondary-btn,.ghost-btn,.danger-btn{border:0;border-radius:10px;cursor:pointer;font-weight:800;transition:.18s transform,.18s opacity,.18s background,.18s border-color}
.primary-btn{background:var(--accent);color:#031108;padding:14px 18px}
.secondary-btn{background:#fff;color:#050706;padding:11px 14px;white-space:nowrap}
.ghost-btn{background:rgba(255,255,255,.055);border:1px solid var(--line);color:#fff;padding:9px 12px}
.danger-btn{background:rgba(255,74,84,.10);border:1px solid rgba(255,91,101,.24);color:#ff9da2;padding:10px 13px}
.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover,.danger-btn:hover{transform:translateY(-1px)}
.link-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.full-width-btn{width:100%}

.alert{font-size:13px;border-radius:12px;padding:12px 14px;margin:0 0 12px}
.alert.error,.form-error{color:#ff9da2}
.alert.error{background:rgba(255,95,104,.08);border:1px solid rgba(255,95,104,.25)}
.alert.room-ended{background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.16);color:#d8ffe7}
.inspect-kick-alert{background:rgba(255,178,71,.07);border:1px solid rgba(255,178,71,.2);color:#ffd8a2;text-align:center}
.landing-error{text-align:center}

/* ---------------- JOIN GATE ---------------- */
.gate{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.94);backdrop-filter:blur(18px);display:grid;place-items:center;padding:24px}
.gate-card{width:min(100%,440px);display:grid;gap:17px;background:rgba(10,14,11,.96);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.gate-card h1{font-size:clamp(31px,7vw,48px);margin:2px 0 4px}
.gate-tv{width:54px;height:54px;margin-bottom:2px}
.form-error{font-size:12px;min-height:1em}
.room-missing-card{padding:30px}
.room-missing-card .site-icon{margin-bottom:18px}

/* ---------------- ROOM HEADER ---------------- */
.room-shell{width:min(1500px,100%);margin:0 auto;padding:18px clamp(14px,3vw,34px) 42px}
.room-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 0 17px;border-bottom:1px solid var(--line2)}
.brand-row{display:flex;align-items:center;gap:13px}
.room-tv{width:42px;height:42px;filter:drop-shadow(0 0 13px rgba(var(--accent-rgb),.12))}
.room-code{font-size:11px;color:#7d8982;margin-top:4px;letter-spacing:.04em}
.room-code strong{font-size:12px;letter-spacing:.12em;color:#fff;margin-left:4px}
.header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
.settings-toggle-btn{display:flex;gap:8px;align-items:center}
.settings-wrap{position:relative}
.settings-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(92vw,420px);background:#0c110e;border:1px solid var(--line);border-radius:15px;padding:15px;box-shadow:0 24px 55px rgba(0,0,0,.55)}
.settings-panel-head{display:flex;justify-content:space-between;align-items:center;padding:1px 1px 13px;margin-bottom:13px;border-bottom:1px solid var(--line2)}
.settings-panel-head strong{display:block;font-size:15px;margin-top:3px}
.settings-block{display:grid;gap:8px;margin-bottom:13px}
.settings-block>label{font-size:11px;color:#aeb8b2;font-weight:750}
.settings-inline{display:flex;gap:8px}
.settings-inline input{flex:1;padding:11px 12px}
.settings-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:1px}
.settings-actions-grid .danger-btn{grid-column:1/-1}

/* custom server dropdown */
.server-picker{position:relative}
.server-picker-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;background:#080c09;color:#fff;padding:12px 13px;font-weight:750;cursor:pointer;text-align:left;transition:.18s border-color,.18s background,.18s box-shadow}
.server-picker-btn:hover,.server-picker-btn[aria-expanded="true"]{border-color:rgba(var(--accent-rgb),.40);background:#0b100c;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.045)}
.server-picker-btn svg{width:18px;height:18px;fill:#7f8a84;transition:.16s transform}
.server-picker-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.server-picker-menu{position:absolute;z-index:45;left:0;right:0;top:calc(100% + 6px);display:grid;gap:5px;background:#101612;border:1px solid var(--line);border-radius:11px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.42)}
.server-choice{appearance:none;width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:8px;background:transparent;color:#cfd8d3;padding:10px 11px;cursor:pointer;text-align:left;font-weight:700}
.server-choice:hover{background:rgba(255,255,255,.05);color:#fff}
.server-choice.selected{border-color:rgba(var(--accent-rgb),.24);background:rgba(var(--accent-rgb),.065);color:#fff}
.server-choice-dot{width:8px;height:8px;border-radius:50%;background:#657069}
.server-choice.selected .server-choice-dot{background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.55)}

/* ---------------- PARTICIPANTS ---------------- */
.status-bar{display:grid;grid-template-columns:1fr;gap:14px;padding:14px 0}
.participants-wrap.participants-only{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:13px 14px}
.participants-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#87928c;margin-bottom:9px}
.participants-head strong{font-size:13px;color:#fff}
.participants{display:flex;gap:7px;flex-wrap:wrap;min-height:31px;align-items:center}
.person-pill{display:flex;align-items:center;gap:7px;background:#101612;border:1px solid var(--line2);border-radius:10px;padding:7px 9px;font-size:11px;color:#d6ddd9}
.person-pill.is-host{border-color:rgba(var(--accent-rgb),.20)}
.person-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.55)}
.mini-host{font-size:7px;font-weight:900;letter-spacing:.10em;color:#041208;background:var(--accent);padding:3px 5px;border-radius:6px;margin-left:1px}

/* ---------------- PLAYER ---------------- */
.player-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.movie-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;padding:15px 17px;border-bottom:1px solid var(--line2)}
.movie-heading h2{font-size:clamp(18px,3vw,25px);letter-spacing:-.02em;margin:4px 0 0}
.sync-pill{font-size:10px;color:#aab5af;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:7px 10px;white-space:nowrap}
.sync-pill.live{color:#d8ffe7;border-color:rgba(var(--accent-rgb),.22);background:rgba(var(--accent-rgb),.06)}
.sync-pill.bad{color:#ff9da2;border-color:rgba(255,95,104,.25);background:rgba(255,95,104,.08)}

.player-box{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;user-select:none;-webkit-user-select:none}
#watchFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:1}
.video-shield{position:absolute;inset:0;z-index:2;background:transparent;cursor:default}
.player-box::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 27%,transparent 66%);opacity:1;transition:.2s opacity}
.player-box.hide-controls::after{opacity:0}
.pause-art{position:absolute;inset:0;z-index:3;display:grid;place-items:center;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.player-box.is-paused .pause-art.has-art{opacity:1;visibility:visible}
.player-box.is-playing .pause-art,.player-box.is-playing .pause-art.has-art{opacity:0!important;visibility:hidden!important}
.pause-art-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:brightness(.47) saturate(.96);transform:scale(1.01)}
.pause-art-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.70),rgba(0,0,0,.10) 58%,rgba(0,0,0,.25))}
.player-loading{position:absolute;top:15px;left:50%;z-index:5;transform:translateX(-50%);color:rgba(255,255,255,.66);font-size:10px;pointer-events:none;background:rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 10px;backdrop-filter:blur(8px)}
.player-loading.hidden{display:none}
.center-play{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border:0;border-radius:50%;background:rgba(0,0,0,.58);backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.13);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s transform,.18s opacity}
.center-play:hover{transform:translate(-50%,-50%) scale(1.05)}
.center-play svg{width:40px;height:40px;fill:currentColor;margin-left:5px}
.player-box.is-playing .center-play{opacity:0;pointer-events:none}

.custom-controls{position:absolute;left:0;right:0;bottom:0;z-index:8;padding:18px 20px 16px;transition:.2s opacity}
.player-box.hide-controls .custom-controls{opacity:0;pointer-events:none}
.progress-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.time{font-variant-numeric:tabular-nums;font-size:11px;color:#fff;min-width:43px}
.time.right{text-align:right}
.seek,.volume{appearance:none;-webkit-appearance:none;height:4px;background:rgba(255,255,255,.28);border:0;border-radius:999px;padding:0;box-shadow:none;cursor:pointer}
.seek{flex:1}
.volume{width:95px}
.seek::-webkit-slider-thumb,.volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:0}
.seek::-moz-range-thumb,.volume::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
.button-row{display:flex;align-items:center;gap:6px}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border:0;background:transparent;color:#fff;border-radius:9px;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.icon-btn svg{width:23px;height:23px;fill:currentColor}
.icon-btn.main-play{width:48px;height:48px}
.icon-btn.main-play svg{width:29px;height:29px}
.pause-icon{display:none}
.player-box.is-playing .main-play .play-icon{display:none}
.player-box.is-playing .main-play .pause-icon{display:block}
.volume-off{display:none}
.icon-btn.is-muted .volume-on{display:none}
.icon-btn.is-muted .volume-off{display:block}
.control-spacer{flex:1}
.skip-btn svg{width:27px;height:27px}
.skip-btn .skip-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-42%);font-size:7px;line-height:1;font-weight:950;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.player-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 17px;color:#6f7973;font-size:10px;border-top:1px solid var(--line2)}

/* ---------------- BELOW PLAYER ---------------- */
.below-grid{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(320px,1.05fr);gap:16px;margin-top:16px}
.info-card,.activity-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.split-card{margin-top:0}
.info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 18px 13px;border-bottom:1px solid var(--line2)}
.info-head h3{font-size:18px;letter-spacing:-.02em;margin:4px 0 0}
.genre-list{display:flex;flex-wrap:wrap;gap:8px;padding:13px 18px 12px}
.genre-pill{display:inline-flex;align-items:center;min-height:28px;background:#101612;border:1px solid var(--line2);border-radius:9px;padding:6px 10px;font-size:10px;color:#dde5e0}
.genre-pill.ghost{opacity:.72}
.movie-overview{padding:4px 18px 17px;color:#c3ccc7;font-size:13px;line-height:1.62;min-height:106px;margin:0}
.movie-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 18px 18px}
.meta-cell{background:#0f1511;border:1px solid var(--line2);border-radius:11px;padding:12px 13px}
.meta-cell span{display:block;font-size:9px;letter-spacing:.13em;color:#758079;text-transform:uppercase;margin-bottom:6px}
.meta-cell strong{display:block;font-size:14px;color:#fff}

.activity-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line2)}
.activity-head h3{font-size:18px;letter-spacing:-.02em;margin:4px 0 0}
.activity-live-dot{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:900;letter-spacing:.13em;color:#93a099}
.activity-live-dot i{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.65)}
.activity-feed{max-height:316px;overflow:auto}
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.045)}
.activity-item:last-child{border-bottom:0}
.activity-icon{width:9px;height:9px;margin-top:5px;border-radius:50%;background:#7c8982;box-shadow:0 0 0 4px rgba(255,255,255,.035);flex:0 0 auto}
.activity-play,.activity-forward,.activity-sync{background:var(--accent)}
.activity-pause{background:#ffd166}
.activity-back,.activity-seek{background:#79b8ff}
.activity-movie{background:#e59cff}
.activity-server{background:#ffd166}
.activity-restart{background:#ffa559}
.activity-join,.activity-create{background:#fff}
.activity-copy{font-size:11px;line-height:1.45;color:#aeb8b2}
.activity-copy strong{color:#fff}
.activity-copy time{display:block;color:#5f6964;font-size:9px;margin-top:2px}
.activity-empty{padding:22px 18px;color:#66716b;font-size:11px}

.toast{position:fixed;z-index:1500;left:50%;bottom:24px;transform:translate(-50%,20px);background:#fff;color:#050706;border-radius:999px;padding:10px 14px;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:.2s opacity,.2s transform;box-shadow:0 10px 35px rgba(0,0,0,.35)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:980px){
  .below-grid{grid-template-columns:1fr}
  .settings-panel{width:min(94vw,420px)}
}

@media (max-width:760px){
  .landing-page{padding:22px 14px}
  .landing-intro-clean{margin-bottom:19px}
  .landing-action{padding:14px 14px;grid-template-columns:39px 1fr auto}
  .landing-action .action-icon{width:38px;height:38px}
  .entry-form{padding:17px 20px 22px}
  .theme-choice-grid{grid-template-columns:1fr}

  .room-shell{padding:10px 8px 24px}
  .room-header{padding:6px 6px 11px;align-items:flex-start}
  .room-tv{width:34px;height:34px}
  .brand-row{gap:9px}
  .brand-row .eyebrow{font-size:9px}
  .room-code{font-size:9px}
  .room-code strong{font-size:9px;letter-spacing:.08em}
  .header-actions{gap:5px}
  .header-actions .ghost-btn{font-size:10px;padding:8px 8px}
  .settings-toggle-btn span:first-child{display:none}
  .settings-panel{right:0;padding:12px;border-radius:13px}
  .settings-inline{flex-direction:column}
  .settings-actions-grid{grid-template-columns:1fr}
  .settings-actions-grid .danger-btn{grid-column:auto}

  .status-bar{gap:8px;padding:8px 0}
  .participants-wrap.participants-only{padding:10px;border-radius:12px}
  .person-pill{border-radius:9px;padding:6px 8px}
  .player-card{border-radius:13px}
  .movie-heading{padding:11px 12px}
  .movie-heading .eyebrow{font-size:9px}
  .sync-pill{font-size:9px;padding:6px 8px}
  .custom-controls{padding:12px 10px 9px}
  .progress-row{gap:8px;margin-bottom:6px}
  .time{font-size:9px;min-width:35px}
  .button-row{gap:1px}
  .icon-btn{width:36px;height:36px}
  .icon-btn.main-play{width:40px;height:40px}
  .volume{display:none}
  .center-play{width:66px;height:66px}
  .center-play svg{width:32px;height:32px}
  .player-foot{padding:9px 12px;font-size:9px}
  .player-foot span:last-child{display:none}

  .below-grid{gap:10px;margin-top:10px}
  .info-card,.activity-card{border-radius:13px}
  .info-head,.activity-head{padding:13px}
  .genre-list{padding:12px 13px 10px}
  .movie-overview{padding:4px 13px 12px;min-height:auto}
  .movie-meta-grid{padding:0 13px 13px}
  .activity-item{padding:11px 13px}
}

@media (orientation:landscape) and (max-height:620px){
  .room-page .room-header,
  .room-page .status-bar,
  .room-page .movie-heading,
  .room-page .player-foot,
  .room-page .below-grid{display:none}
  .room-shell{padding:0;max-width:none}
  .player-card{border:0;border-radius:0}
  .player-box{height:100vh;aspect-ratio:auto}
}


/* ---------------- V7 MOVIE COLOR DEPTH ---------------- */
body.movie-theme .player-card,
body.movie-theme .participants-wrap,
body.movie-theme .info-card,
body.movie-theme .activity-card,
body.movie-theme .settings-panel{
  background:
    linear-gradient(145deg,rgba(var(--accent-rgb),.050),rgba(var(--accent2-rgb),.028) 52%,rgba(6,9,7,.96) 100%),
    var(--panel);
  border-color:rgba(var(--accent-rgb),.17);
}
body.movie-theme .movie-heading,
body.movie-theme .activity-head,
body.movie-theme .info-head{
  background:linear-gradient(100deg,rgba(var(--accent-rgb),.055),rgba(var(--accent2-rgb),.025) 60%,transparent);
}
body.movie-theme .server-picker-btn:hover,
body.movie-theme .server-picker-btn[aria-expanded="true"]{
  border-color:rgba(var(--accent2-rgb),.40);
  box-shadow:0 0 0 3px rgba(var(--accent2-rgb),.045);
}
body.movie-theme .person-pill.is-host{
  border-color:rgba(var(--accent2-rgb),.25);
}
body.movie-theme .landing-tv,
body.movie-theme .room-tv{
  filter:drop-shadow(0 0 20px rgba(var(--accent-rgb),.22)) drop-shadow(0 0 24px rgba(var(--accent2-rgb),.10));
}

/* ---------------- V8 ROOM RULES + USER COLORS ---------------- */
.person-dot{background:var(--user-color,var(--accent));box-shadow:0 0 10px color-mix(in srgb,var(--user-color,var(--accent)) 55%,transparent)}
.person-pill.is-host .person-name{font-weight:900;color:#fff}
.activity-item .activity-icon{background:var(--user-color,#7c8982)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--user-color,#7c8982) 12%,transparent)}
.activity-item .activity-copy strong{color:var(--user-color,#fff)}

body.movie-theme{
  background:
    linear-gradient(132deg,rgba(var(--accent-rgb),.16) 0%,rgba(0,0,0,.84) 34%,rgba(0,0,0,.91) 63%,rgba(var(--accent2-rgb),.15) 100%),
    radial-gradient(ellipse 78% 62% at 0% -8%,rgba(var(--accent-rgb),.38),transparent 61%),
    radial-gradient(ellipse 75% 58% at 105% 7%,rgba(var(--accent2-rgb),.31),transparent 63%),
    radial-gradient(ellipse 72% 52% at 52% 108%,rgba(var(--accent-rgb),.15),transparent 66%),
    #000;
  background-attachment:fixed;
}

body.movie-theme::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34));
}