:root{
    --bg: #0B0E14;
    --bg-raised: #12161f;
    --velvet: #C4453D;
    --marquee: #E8A33D;
    --marquee-bright: #F4C566;
    --cream: #F2EFE9;
    --cream-dim: #9BA1AE;
    --teal: #223341;
    --teal-light: #2B3A45;
    --line: rgba(242,239,233,0.12);
    --blush: #F2A6C6;
    --mint: #65B891;
    --lilac: #8E7CC3;
    --sky: #63A4FF;
    --radius-lg: 22px;
    --radius-md: 15px;
    --radius-sm: 10px;
    --ease-bounce: cubic-bezier(.34,1.56,.64,1);
    --ease-smooth: cubic-bezier(.22,.85,.35,1);
    --shadow-glow: 0 10px 30px -12px rgba(232,163,61,0.35);
    --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --body: 'Inter', system-ui, sans-serif;
    --chat-font: 'Quicksand', 'Baloo 2', 'Inter', system-ui, sans-serif;
    --chat-display: 'Baloo 2', 'Quicksand', var(--display);
    /* Real color-emoji fonts appended last so 😂🔥❤️ etc. always render as
       full-color glyphs instead of empty boxes, no matter what the primary
       font stack above is. */
    --emoji-font: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  *{ scroll-behavior:smooth; }
  /* Buttons/inputs don't inherit font-family by default in most browsers —
     without this reset they fall back to the OS UI font, which is where
     emoji glyphs were breaking (stickers, reaction chips, emoji pickers). */
  button, input, textarea, select{
    font-family: var(--body), var(--emoji-font);
  }
  html.booting .app{ visibility:hidden; }
  body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(196,69,61,0.18), transparent 60%),
      radial-gradient(ellipse 900px 600px at 100% 0%, rgba(232,163,61,0.12), transparent 55%),
      radial-gradient(ellipse 700px 500px at 50% 110%, rgba(142,124,195,0.10), transparent 60%),
      var(--bg);
    color: var(--cream);
    font-family: var(--body), var(--emoji-font);
    min-height: 100vh;
    background-attachment: fixed;
  }
  .app{ max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; position:relative; }
  a{ color: var(--marquee-bright); }
  button{ transition: transform .18s var(--ease-bounce), filter .15s, background .15s, border-color .15s, box-shadow .2s, opacity .15s; }
  input, textarea{ transition: border-color .18s, box-shadow .18s; }

  /* ---------- top marquee brand ---------- */
  .brand{ display:flex; align-items:center; gap:12px; margin-bottom: 34px; position:relative; z-index:1; }
  .brand-mark{
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(155deg, var(--velvet), #8f2e28);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 0 0 1px var(--line), 0 8px 20px -6px rgba(196,69,61,0.6);
    flex-shrink:0;
    transition: transform .3s var(--ease-bounce);
  }
  .brand:hover .brand-mark{ transform: rotate(-6deg) scale(1.06); }
  .brand-mark svg{ width:20px; height:20px; }
  .brand-name{ font-family: var(--display); font-size: 26px; letter-spacing: 1.5px; line-height:1; }
  .brand-tag{ color: var(--cream-dim); font-size: 12.5px; margin-top:2px; letter-spacing:.02em; }

  /* ---------- screen switching ---------- */
  .screen{ display:none; }
  .screen.active{ display:block; animation: screen-in .4s var(--ease-smooth); }
  @keyframes screen-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

  /* ================= HOME ================= */
  .hero{ margin-bottom: 36px; position:relative; z-index:1; }
  .hero-badge{
    display:inline-flex; align-items:center; gap:6px; font-family: var(--chat-font);
    font-weight:700; font-size:12.5px; letter-spacing:.02em; color: var(--marquee-bright);
    background: rgba(232,163,61,0.12); border:1px solid rgba(232,163,61,0.3);
    padding: 6px 13px; border-radius: 999px; margin-bottom: 16px;
  }
  .hero h1{
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 68px);
    letter-spacing: 1px;
    line-height: 0.95;
    margin: 0 0 10px;
    background: linear-gradient(100deg, var(--cream) 40%, var(--marquee-bright) 100%);
    -webkit-background-clip: text; background-clip:text; color: transparent;
  }
  .hero p{ color: var(--cream-dim); font-size: 16px; max-width: 560px; line-height:1.55; margin:0; }

  /* soft decorative blobs behind the home screen — purely cosmetic */
  .blob{
    position:absolute; border-radius:50%; filter: blur(60px); pointer-events:none; z-index:0;
    opacity:.55; animation: blob-float 9s ease-in-out infinite;
  }
  .blob-a{ width:280px; height:280px; top:-80px; right:6%; background: radial-gradient(circle, rgba(196,69,61,0.35), transparent 70%); }
  .blob-b{ width:320px; height:320px; top:220px; left:-100px; background: radial-gradient(circle, rgba(142,124,195,0.28), transparent 70%); animation-delay: -4s; }
  @keyframes blob-float{ 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-22px) scale(1.05); } }
  @media (prefers-reduced-motion: reduce){ .blob{ animation:none; } }

  .cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; position:relative; z-index:1; }
  @media (max-width: 800px){ .cards{ grid-template-columns: 1fr; } }

  .ticket{
    position: relative;
    background: linear-gradient(165deg, var(--bg-raised), rgba(18,22,31,0.88));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 26px 26px;
    overflow: hidden;
    box-shadow: 0 20px 50px -30px rgba(0,0,0,0.6);
    transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth), border-color .3s;
  }
  .ticket:hover{
    transform: translateY(-3px);
    border-color: rgba(232,163,61,0.35);
    box-shadow: 0 26px 60px -28px rgba(0,0,0,0.65), var(--shadow-glow);
  }
  .ticket::before{
    content:"";
    position:absolute; top:0; bottom:0; right: -1px; width: 1px;
    background-image: radial-gradient(circle, var(--bg) 3px, transparent 3.2px);
    background-size: 1px 16px;
    background-repeat: repeat-y;
  }
  .ticket-eyebrow{
    font-family: var(--display); letter-spacing: 2px; font-size: 13px;
    color: var(--marquee); text-transform: uppercase; margin-bottom: 6px;
  }
  .ticket h2{ font-family: var(--display); font-size: 28px; letter-spacing:.5px; margin: 0 0 6px; }
  .ticket .sub{ color: var(--cream-dim); font-size: 13.5px; margin-bottom: 20px; line-height:1.5; }

  label{ display:block; font-size: 12.5px; color: var(--cream-dim); margin: 14px 0 6px; font-weight:600; letter-spacing:.02em; }
  input[type=text], input[type=url]{
    width:100%; background: #0d1119; border: 1px solid var(--line); color: var(--cream);
    padding: 12px 13px; border-radius: var(--radius-sm); font-family: var(--body); font-size: 14.5px;
    outline: none;
  }
  input[type=text]:focus, input[type=url]:focus{ border-color: var(--marquee); box-shadow: 0 0 0 3px rgba(232,163,61,0.15); }
  input[type=text]::placeholder, input[type=url]::placeholder{ color: #5b6270; }

  .tabs{ display:flex; gap:6px; background:#0d1119; padding:4px; border-radius: 9px; border:1px solid var(--line); }
  .tab{
    flex:1; text-align:center; padding: 8px 6px; border-radius:7px; font-size: 13px; font-weight:600;
    color: var(--cream-dim); cursor:pointer; user-select:none; transition: all .15s;
  }
  .tab.active{ background: var(--teal-light); color: var(--cream); }

  .filepick{
    margin-top: 10px; border: 1px dashed var(--line); border-radius: 9px; padding: 16px;
    text-align:center; cursor:pointer; font-size: 13px; color: var(--cream-dim); transition: border-color .15s, background .15s;
  }
  .filepick:hover{ border-color: var(--marquee); background: rgba(232,163,61,0.04); }
  .filepick strong{ color: var(--cream); }

  .code-input{
    font-family: var(--display); font-size: 30px; letter-spacing: 8px; text-align:center;
    text-transform:uppercase; padding: 14px 10px;
  }

  .btn{
    appearance:none; border:none; cursor:pointer; font-family: var(--body); font-weight:700;
    font-size: 14.5px; padding: 14px 20px; border-radius: 999px; width:100%; margin-top: 18px;
    transition: transform .18s var(--ease-bounce), filter .12s, box-shadow .2s; letter-spacing:.01em;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn:active{ transform: scale(0.97); }
  .btn-primary{ background: linear-gradient(120deg, var(--velvet), #a83730); color: #fff; box-shadow: 0 10px 24px -8px rgba(196,69,61,.7); }
  .btn-primary:hover{ filter: brightness(1.08); box-shadow: 0 14px 30px -8px rgba(196,69,61,.8); }
  .btn-secondary{ background: linear-gradient(120deg, var(--marquee-bright), var(--marquee)); color: #1a1206; box-shadow: 0 10px 24px -8px rgba(232,163,61,.6); }
  .btn-secondary:hover{ filter: brightness(1.05); box-shadow: 0 14px 30px -8px rgba(232,163,61,.7); }
  .btn:disabled{ opacity:.45; cursor:not-allowed; filter:none; transform:none; }

  .hint-error{ color: #ef8b84; font-size: 12.5px; margin-top: 8px; min-height: 16px; }

  .howrow{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; position:relative; z-index:1; }
  .howcell{ flex:1; min-width: 220px; padding:18px 16px; border-top:1px solid var(--line); border-radius: var(--radius-sm); transition: background .2s; }
  .howcell:hover{ background: rgba(242,239,233,0.03); }
  .howcell .num{ font-family: var(--display); color: var(--marquee); font-size:13px; letter-spacing:2px; }
  .howcell p{ margin:6px 0 0; font-size: 13.5px; color: var(--cream-dim); line-height:1.5; }

  /* ================= ROOM ================= */
  .room-top{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap:wrap; margin-bottom: 20px; }
  .code-chip{
    display:flex; align-items:center; gap: 10px; background: var(--bg-raised);
    border:1px solid var(--line); padding: 9px 10px 9px 16px; border-radius: 999px;
    flex-wrap: wrap; box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
  }
  .code-chip .lbl{ font-size:11px; color: var(--cream-dim); letter-spacing:1px; text-transform:uppercase; }
  .code-chip .val{ font-family: var(--display); font-size:20px; letter-spacing:4px; color: var(--marquee-bright); }
  .copy-btn{
    background: var(--teal-light); border:1px solid var(--line); color: var(--cream); font-size:12px;
    padding: 7px 12px; border-radius:999px; cursor:pointer; font-weight:600;
  }
  .copy-btn:hover{ background: var(--teal); transform: translateY(-1px); }
  .copy-btn-ghost{ background:transparent; border-color: rgba(232,163,61,0.35); color: var(--marquee-bright); }
  .copy-btn-ghost:hover{ background: rgba(232,163,61,0.12); }
  .leave-btn{ background:none; border:1px solid var(--line); color:var(--cream-dim); font-size:12.5px; padding:10px 16px; border-radius:999px; cursor:pointer; }
  .leave-btn:hover{ color: var(--cream); border-color: var(--velvet); background: rgba(196,69,61,0.1); transform: translateY(-1px); }

  .room-grid{ display:grid; grid-template-columns: 1fr 320px; gap: 20px; align-items:start; }
  @media (max-width: 900px){ .room-grid{ grid-template-columns: 1fr; } }

  .screen-frame{
    position: relative;
    background: #000; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line);
    box-shadow: 0 24px 70px -24px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.03) inset;
  }
  .screen-frame video{ width:100%; display:block; max-height: 62vh; background:#000; cursor:pointer; filter: brightness(1); }

  .controls{ background: var(--bg-raised); border:1px solid var(--line); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); padding: 14px 18px 18px; }
  .seek-row{ display:flex; align-items:center; gap:10px; }
  input[type=range]{
    flex:1; accent-color: var(--marquee); height: 5px; border-radius: 999px; cursor:pointer;
  }
  .time{ font-size:12px; color: var(--cream-dim); font-variant-numeric: tabular-nums; min-width:38px; }
  .ctl-row{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; row-gap:10px; }
  .ctl-row .sync-note{ order:99; }
  .icon-btn{
    background: var(--teal-light); border:1px solid var(--line); color:var(--cream); width:38px; height:38px;
    border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    position:relative;
  }
  .icon-btn:hover{ background: var(--teal); transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px -10px rgba(0,0,0,0.6); }
  .icon-btn:active{ transform: scale(0.94); }
  .icon-btn svg{ width:16px; height:16px; }
  .icon-btn.on{ box-shadow: 0 0 0 2px rgba(196,69,61,0.35); }
  .security-btn{
    background: #C4453D; border-color: #C4453D; color:#fff;
  }
  .security-btn:hover{ background:#a8362f; box-shadow: 0 8px 18px -8px rgba(196,69,61,0.7); }
  .security-btn:active{ transform: scale(0.94); }

  #security-overlay{
    display:none; position:fixed; inset:0; background:#000; z-index:2000;
  }
  html.security-blackout, body.security-blackout{ overflow:hidden; }
  body.security-blackout #security-overlay{ display:block; }

  .speed-btn span{ font-family: var(--display); font-size:12.5px; letter-spacing:.5px; }
  .kbd-btn{ font-family: var(--chat-display); font-weight:700; font-size:14px; }
  .sync-note{ font-size:11.5px; color:var(--cream-dim); margin-left:auto; display:flex; align-items:center; gap:7px; }
  .sync-dot{
    width:7px; height:7px; border-radius:50%; background: var(--mint); flex-shrink:0;
    box-shadow: 0 0 0 3px rgba(101,184,145,0.18);
    animation: sync-pulse 2s ease-in-out infinite;
  }
  @keyframes sync-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.8); } }

  .count-badge{
    position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 3px;
    border-radius:999px; background: var(--velvet); color:#fff; font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 2px var(--bg-raised);
    font-family: var(--body);
  }
  #participants-btn .count-badge{ background: var(--mint); }

  .speed-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; width: 190px; }
  .speed-grid button{
    appearance:none; border:1px solid var(--line); background: var(--teal-light); color: var(--cream-dim);
    font-family: var(--body); font-weight:700; font-size:12.5px; padding:7px 4px; border-radius:9px; cursor:pointer;
  }
  .speed-grid button:hover{ background: var(--teal); color: var(--cream); }
  .speed-grid button.active{ background: var(--marquee); color:#1a1206; border-color: transparent; }

  .participants-popover{ width:200px; max-height:220px; overflow-y:auto; }
  .participants-list{ display:flex; flex-direction:column; gap:8px; }
  .participant-row{ display:flex; align-items:center; gap:9px; font-size:13px; font-family: var(--chat-font); }
  .participant-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
  .participants-empty{ font-size:12.5px; color: var(--cream-dim); }

  .kbd-popover{ width:210px; }
  .kbd-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--cream-dim); padding:4px 0; }
  .kbd-row span{ margin-left:2px; }
  kbd{
    background: var(--teal-light); border:1px solid var(--line); border-radius:5px; padding:2px 6px;
    font-family: var(--body); font-size:11px; color: var(--cream); box-shadow: 0 1px 0 var(--line);
  }

  .chat-panel{
    background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius-lg);
    display:flex; flex-direction:column; height: 62vh; min-height: 420px;
    box-shadow: 0 20px 60px -30px rgba(0,0,0,0.6);
  }
  .chat-head{ padding: 15px 16px; border-bottom:1px solid var(--line); font-family: var(--display); letter-spacing:1px; font-size:16px; display:flex; align-items:center; justify-content:space-between; }
  #chat-close-btn{ display:none; width:32px; height:32px; }
  .chat-body{ flex:1; overflow-y:auto; padding: 14px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
  .msg{ max-width: 86%; animation: msg-in .25s var(--ease-smooth); }
  @keyframes msg-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
  .msg .who{ font-size:11px; color: var(--marquee); font-weight:700; margin-bottom:2px; }
  .msg .bubble{ background: var(--teal-light); padding: 9px 12px; border-radius: 14px; font-size:13.5px; line-height:1.4; }
  .msg.me{ align-self:flex-end; }
  .msg.me .who{ color: var(--cream-dim); text-align:right; }
  .msg.me .bubble{ background: var(--velvet); }
  .msg.sys{ align-self:center; font-size:11.5px; color:var(--cream-dim); background:none; text-align:center; }
  .msg-reactions{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
  .msg.me .msg-reactions{ justify-content:flex-end; }
  .reaction-chip{
    appearance:none; border:1px solid var(--line); background: var(--bg-raised); color:var(--cream-dim);
    border-radius:999px; padding:2px 7px; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:4px;
    transition: background .12s, border-color .12s; opacity:.6;
  }
  .reaction-chip:hover{ opacity:1; border-color: var(--marquee); }
  .reaction-chip .c{ font-size:11px; font-variant-numeric:tabular-nums; min-width:2px; }
  .reaction-chip .c:empty{ display:none; }
  .reaction-chip.mine{ opacity:1; background: rgba(232,163,61,0.18); border-color: var(--marquee); color: var(--marquee-bright); }
  .chat-foot{ padding: 12px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; }
  .chat-foot input{ flex:1; border-radius: 999px; }
  #chat-emoji-btn{ font-size:18px; flex-shrink:0; }
  #chat-emoji-popover .sticker-grid{ width:220px; }
  .send-btn{
    background: linear-gradient(120deg, var(--marquee-bright), var(--marquee)); border:none; color:#1a1206;
    font-weight:700; padding:0 18px; border-radius:999px; cursor:pointer; font-size:13px; flex-shrink:0;
    height:38px; box-shadow: 0 8px 18px -10px rgba(232,163,61,0.6);
  }
  .send-btn:hover{ filter:brightness(1.06); transform: translateY(-1px); }
  .send-btn:active{ transform: scale(0.95); }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background: var(--teal-light); border-radius:999px; }
  ::-webkit-scrollbar-thumb:hover{ background: var(--marquee); }
  ::-webkit-scrollbar-track{ background: transparent; }

  @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

  .setup-banner{
    background: linear-gradient(120deg, rgba(196,69,61,0.16), rgba(232,163,61,0.12));
    border: 1px solid rgba(232,163,61,0.4);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 26px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cream);
  }
  .setup-banner strong{ color: var(--marquee-bright); }
  .setup-banner code{
    background: rgba(0,0,0,0.35); padding: 1px 6px; border-radius: 5px; font-size: 12.5px;
  }
  .setup-banner a{ color: var(--marquee-bright); }

  /* ================= LIGHT / NIGHT TOGGLE ================= */
  body.light{
    --bg: #F2EFE9;
    --bg-raised: #FFFFFF;
    --cream: #1B1E24;
    --cream-dim: #6A6F7B;
    --teal: #E4E0D8;
    --teal-light: #ECE9E2;
    --line: rgba(27,30,36,0.12);
  }
  body.light .screen-frame{ background:#000; }
  body.light .setup-banner{ color: var(--cream); }

  /* ================= EXTRA CONTROL BUTTONS ================= */
  .ctl-spacer{ flex:1; }
  .vol-wrap{ display:flex; align-items:center; gap:6px; }
  .vol-wrap input[type=range]{ width:80px; flex:none; }
  .icon-btn.on{ background: var(--velvet); border-color: transparent; }
  .icon-btn.on:hover{ background: var(--velvet); filter:brightness(1.1); }

  .popover-wrap{ position:relative; }
  .popover{
    position:absolute; bottom: calc(100% + 12px); left:50%; transform: translateX(-50%) translateY(6px) scale(.96);
    background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius-md);
    padding: 13px; box-shadow: 0 20px 50px -18px rgba(0,0,0,0.65); z-index: 50;
    display:none; width: max-content; opacity:0;
    transition: opacity .16s var(--ease-smooth), transform .16s var(--ease-smooth);
  }
  .popover.open{ display:block; animation: popover-in .18s var(--ease-bounce) forwards; }
  @keyframes popover-in{ from{ opacity:0; transform: translateX(-50%) translateY(6px) scale(.96); } to{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); } }
  .popover::after{
    content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color: var(--bg-raised);
  }
  .popover .p-label{ font-size:11px; color:var(--cream-dim); letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
  .brightness-popover input[type=range]{ width:150px; }
  .brightness-popover .p-val{ font-size:12px; color:var(--cream-dim); margin-top:6px; text-align:center; }

  .sticker-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:4px; }
  .sticker-grid button{
    appearance:none; border:none; background:none; font-size:22px; cursor:pointer;
    padding:6px; border-radius:10px; line-height:1; transition: background .12s, transform .18s var(--ease-bounce);
  }
  .sticker-grid button:hover{ background: var(--teal-light); transform: scale(1.22) rotate(-6deg); }

  /* ================= STICKERS OVERLAY (floats over the video) ================= */
  .stickers-layer{
    position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index: 5;
  }
  .floating-sticker{
    position:absolute; bottom: 8%; font-size: 40px; animation: sticker-float 2.6s ease-out forwards;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
  }
  @keyframes sticker-float{
    0%{ transform: translateY(0) scale(0.6) rotate(0deg); opacity:0; }
    12%{ opacity:1; transform: translateY(-10%) scale(1) rotate(-4deg); }
    100%{ transform: translateY(-320%) scale(1.05) rotate(6deg); opacity:0; }
  }

  /* ================= THEATER / FULL VIEW MODE ================= */
  #screen-room.theater .room-grid{ display:block; }
  #screen-room.theater .room-top{ display:none; }
  #screen-room.theater{
    position:fixed; inset:0; z-index: 200; margin:0; padding:0; background:#000;
    max-width:none; width:100vw; height:100vh;
  }
  #screen-room.theater > .room-grid{ height:100%; }
  #screen-room.theater .screen-frame{
    position:fixed; inset:0; border-radius:0; border:none; z-index:1;
    display:flex; align-items:center; justify-content:center;
  }
  #screen-room.theater .screen-frame video{ max-height:100vh; height:100vh; width:100%; object-fit:contain; }
  #screen-room.theater .controls{
    position:fixed; left:0; right:0; bottom:0; z-index:20; border-radius:0;
    background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0.0) 100%);
    border:none; padding: 30px 20px 18px;
    transition: right .25s ease;
  }
  #screen-room.theater.chat-open .controls{ right: 340px; }
  #screen-room.theater .chat-panel{
    position:fixed; top:0; right:0; height:100vh; width:340px; z-index:30;
    border-radius:0; border-left:1px solid var(--line);
    background: rgba(18,22,31,0.32); backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    transform: translateX(100%); transition: transform .25s ease;
  }
  #screen-room.theater .chat-head{ background: rgba(0,0,0,0.15); }
  #screen-room.theater .chat-foot{ background: rgba(0,0,0,0.15); }
  body.light #screen-room.theater .chat-panel{ background: rgba(255,255,255,0.35); }
  #screen-room.theater.chat-open .chat-panel{ transform: translateX(0); box-shadow: -20px 0 50px -20px rgba(0,0,0,0.6); }
  .theater-exit{
    position:fixed; top:16px; left:16px; z-index:40; background: rgba(0,0,0,0.55); border:1px solid var(--line);
    color:#fff; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .theater-exit:not(.show){ display:none; }
  .theater-exit svg{ width:16px; height:16px; }

  /* ================= FLOATING / SEE-THROUGH CHAT MODE ================= */
  /* Toggled from the chat header. Chat becomes a transparent popup that
     floats over the movie, anchored to the bottom and growing upward as
     messages arrive, so the video stays visible behind it. Overrides
     apply regardless of theater/mobile layout, hence the !important. */
  #screen-room.chat-floating .room-grid{ grid-template-columns: 1fr !important; }
  #screen-room.chat-floating .chat-panel{
    position: fixed !important; left:auto !important; right: 22px !important; top:auto !important;
    transform: none !important; bottom: 92px !important;
    width: min(360px, 92vw) !important; height:auto !important; min-height:0 !important; max-height:54vh !important;
    background: transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    z-index: 25; display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none;
  }
  #screen-room.theater.chat-floating .controls{ right:0 !important; }
  #screen-room.chat-floating .chat-head{
    background:transparent !important; border:none !important; padding: 0 4px 8px !important;
    justify-content:flex-end !important; pointer-events:none;
  }
  #screen-room.chat-floating .chat-head > span{ display:none; }
  #screen-room.chat-floating .chat-head-actions{ pointer-events:auto; }
  #screen-room.chat-floating #chat-color-btn{ display:none; }
  #screen-room.chat-floating .chat-overlay-btn,
  #screen-room.chat-floating #chat-close-btn{
    background: rgba(8,10,14,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,0.14); display:flex !important;
  }
  #screen-room.chat-floating .chat-body{
    flex: 0 1 auto !important; overflow-y:auto; max-height: calc(54vh - 56px);
    background:transparent !important; padding: 8px 2px; pointer-events:auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 22px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 22px, black 100%);
  }
  #screen-room.chat-floating .msg .bubble{ background: rgba(10,12,16,0.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow:0 6px 18px -10px rgba(0,0,0,0.6); }
  #screen-room.chat-floating .msg.sys{ background: rgba(0,0,0,0.4); padding:4px 10px; border-radius:999px; }
  #screen-room.chat-floating .chat-foot{
    background: rgba(8,10,14,0.55) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: 999px !important; border:1px solid rgba(255,255,255,0.14) !important; margin-top:8px;
    pointer-events:auto;
  }
  #screen-room.chat-floating .chat-foot input{ background:transparent; color:#fff; }
  #screen-room.chat-floating .msg-reactions{ opacity:0.85; }
  .chat-overlay-btn.on{ background: var(--marquee); color:#1a1206; border-color:transparent; }
  @media (max-width: 760px){
    #screen-room.chat-floating .chat-panel{ bottom: 78px !important; right: 10px !important; width: min(320px, 88vw) !important; }
  }

  /* ================= MOBILE CHAT ================= */
  @media (max-width: 760px){
    .chat-panel{
      position: fixed; left:0; right:0; bottom:0; top:auto; height:78vh; max-height:78vh;
      border-radius: 16px 16px 0 0; z-index:150;
      transform: translateY(100%); transition: transform .25s ease;
      box-shadow: 0 -20px 50px -20px rgba(0,0,0,0.6);
    }
    #screen-room.chat-open .chat-panel{ transform: translateY(0); }
    #chat-close-btn{ display:flex; }
    #chat-toggle-btn{
      display:flex !important; position:fixed; right:16px; bottom:16px; z-index:160;
      width:52px; height:52px; border-radius:50%;
      box-shadow: 0 10px 26px -8px rgba(0,0,0,0.6);
    }
    #screen-room.chat-open #chat-toggle-btn{ display:none !important; }
    .chat-foot{ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .chat-foot input, .send-btn, .chat-foot .icon-btn{ min-height:42px; }
    .reaction-chip{ padding:4px 9px; font-size:13px; }
    .msg{ max-width: 92%; }
  }

  /* ================= BOOT LOADER (reload -> straight back into the room) ================= */
  .boot-loader{
    position:fixed; inset:0; z-index:999; background: var(--bg);
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  }
  .boot-mark{
    width: 46px; height: 46px; border-radius: 10px;
    background: linear-gradient(155deg, var(--velvet), #8f2e28);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 0 0 1px var(--line), 0 8px 20px -6px rgba(196,69,61,0.6);
  }
  .boot-mark svg{ width:24px; height:24px; }
  .boot-spinner{
    width:22px; height:22px; border-radius:50%;
    border: 2.5px solid var(--line); border-top-color: var(--marquee);
    animation: boot-spin .8s linear infinite;
  }
  @keyframes boot-spin{ to{ transform: rotate(360deg); } }
  .boot-text{ color: var(--cream-dim); font-size: 13.5px; letter-spacing:.02em; }

  /* ================= TOASTS (join / leave popups) ================= */
  .toast-stack{
    position: fixed; top: 18px; right: 18px; z-index: 400;
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
    pointer-events:none; max-width: calc(100vw - 36px);
  }
  .toast{
    display:flex; align-items:center; gap:10px;
    background: var(--bg-raised); border:1px solid var(--line); border-radius: 999px;
    padding: 11px 18px 11px 14px; box-shadow: 0 16px 40px -14px rgba(0,0,0,0.6);
    font-family: var(--chat-font); font-size: 13.5px; font-weight:600; color: var(--cream);
    animation: toast-in .4s var(--ease-bounce) forwards, toast-out .3s ease forwards var(--toast-life, 3.2s);
    max-width: 320px;
  }
  .toast .dot{
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
    background: #65B891; box-shadow: 0 0 0 3px rgba(101,184,145,0.18);
  }
  .toast.leave .dot{ background: var(--velvet); box-shadow: 0 0 0 3px rgba(196,69,61,0.18); }
  @keyframes toast-in{
    from{ transform: translateX(30px); opacity:0; }
    to{ transform: translateX(0); opacity:1; }
  }
  @keyframes toast-out{
    to{ transform: translateX(30px); opacity:0; }
  }
  @media (max-width: 760px){
    .toast-stack{ left:12px; right:12px; align-items:stretch; }
    .toast{ max-width:none; }
  }

  /* ================= CUTE / PREMIUM CHAT STYLING ================= */
  .chat-head{ font-family: var(--chat-display); font-weight:600; letter-spacing:.5px; }
  .chat-head-actions{ display:flex; align-items:center; gap:6px; }
  .chat-body, .chat-foot input, .msg .who, .msg .bubble{ font-family: var(--chat-font), var(--emoji-font); }
  .msg .who{ font-weight:700; font-size:11.5px; letter-spacing:.03em; }
  .msg .bubble{
    font-size:14px; font-weight:500; line-height:1.5;
    border-radius: 14px; border-left: 3px solid var(--marquee);
    box-shadow: 0 3px 10px -6px rgba(0,0,0,0.5);
    background: linear-gradient(155deg, var(--teal-light), var(--teal));
  }
  .msg.me .bubble{
    border-left: 3px solid var(--cream-dim);
    background: linear-gradient(155deg, var(--velvet), #9c342e);
  }
  .chat-foot input{ font-weight:600; font-size:14px; }
  .send-btn{ font-family: var(--chat-font); letter-spacing:.02em; }

  .color-btn{ position:relative; }
  .color-dot{
    width:16px; height:16px; border-radius:50%;
    background: var(--marquee); box-shadow: 0 0 0 2px rgba(242,239,233,0.25);
  }
  .color-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; }
  .color-swatch{
    appearance:none; width:26px; height:26px; border-radius:50%; cursor:pointer;
    border: 2px solid transparent; transition: transform .12s, border-color .12s;
  }
  .color-swatch:hover{ transform: scale(1.12); }
  .color-swatch.active{ border-color: var(--cream); box-shadow: 0 0 0 2px var(--bg-raised), 0 0 0 3px var(--cream); }