: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; }
  /* ---------- iPhone / iOS Safari fit ---------- */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; height:-webkit-fill-available; }
  html, body{ overscroll-behavior-y:none; }
  body{ min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased; }
  button, .icon-btn, .btn, .copy-btn, .leave-btn, .tab, .sticker-grid button, .speed-grid button, .reaction-chip{
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  input, textarea{ -webkit-tap-highlight-color: transparent; }
  /* iOS Safari zooms the page in if a focused input's font-size is under 16px —
     force 16px on any text input while a touch/coarse pointer is the primary input. */
  @media (pointer:coarse){
    input[type=text], input[type=url], input[type=search], .chat-foot input{ font-size:16px !important; }
  }
  /* 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; position:relative;
    padding: calc(28px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(60px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
  }
  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;
    -webkit-appearance:none; appearance:none; background: var(--teal-light); touch-action: pan-x;
  }
  input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:999px; background:transparent; }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
    background: var(--marquee); margin-top:-5.5px; box-shadow: 0 2px 6px -1px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.25);
  }
  input[type=range]::-moz-range-track{ height:5px; border-radius:999px; background: var(--teal-light); }
  input[type=range]::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%; background: var(--marquee); border: 2px solid rgba(255,255,255,0.25);
  }
  @media (max-width: 760px){
    input[type=range]::-webkit-slider-thumb{ width:20px; height:20px; margin-top:-7.5px; }
    input[type=range]::-moz-range-thumb{ width:20px; height:20px; }
  }
  .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); }
  .participant-name{ display:flex; align-items:center; gap:1px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .participants-empty{ font-size:12.5px; color: var(--cream-dim); }

  /* ---------- verified tick / admin badge ---------- */
  .verified-badge{ display:inline-flex; flex-shrink:0; margin-left:3px; vertical-align:-2px; }
  .verified-badge svg{ width:14px; height:14px; }
  .admin-badge{
    display:inline-flex; align-items:center; flex-shrink:0; margin-left:5px; padding:1px 6px 2px;
    border-radius:999px; font-family: var(--body); font-size:9.5px; font-weight:800; letter-spacing:.04em;
    background: linear-gradient(120deg, var(--marquee-bright), var(--marquee)); color:#1a1206;
  }
  .msg .who .verified-badge svg, .msg .who .admin-badge{ transform: translateY(1px); }

  /* ---------- code word box ---------- */
  .code-popover{ width:190px; }
  .code-popover input[type=text]{
    width:100%; background: var(--teal); border:1px solid var(--line); border-radius:9px; color:var(--cream);
    font-family: var(--body); font-size:13px; padding:9px 10px; outline:none; margin-bottom:8px;
  }
  .code-popover input[type=text]:focus{ border-color: var(--sky); }
  .code-submit-btn{
    width:100%; appearance:none; border:none; border-radius:9px; padding:8px 4px; cursor:pointer;
    background: linear-gradient(120deg, var(--marquee-bright), var(--marquee)); color:#1a1206;
    font-family: var(--body); font-weight:800; font-size:12.5px;
  }
  .code-submit-btn:hover{ filter:brightness(1.06); }
  .code-feedback{ font-size:11.5px; color: var(--cream-dim); margin-top:8px; text-align:center; min-height:14px; }
  .code-feedback.ok{ color: var(--mint); }
  .code-feedback.err{ color: var(--velvet); }

  /* ---------- admin popover ---------- */
  .admin-popover{ width:240px; }
  .ai-mode-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
  .ai-mode-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:11px; padding:7px 3px; border-radius:9px; cursor:pointer;
  }
  .ai-mode-grid button:hover{ background: var(--teal); color: var(--cream); }
  .ai-mode-grid button.active{ background: var(--marquee); color:#1a1206; border-color: transparent; }
  .admin-popover textarea{
    width:100%; resize:vertical; min-height:56px; background: var(--teal); border:1px solid var(--line);
    border-radius:9px; color:var(--cream); font-family: var(--body); font-size:12.5px; padding:8px 10px;
    outline:none; margin-bottom:8px;
  }
  .admin-popover textarea:focus{ border-color: var(--sky); }
  .admin-kick-list{ display:flex; flex-direction:column; gap:7px; max-height:150px; overflow-y:auto; }
  .admin-kick-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-family: var(--chat-font); }
  .admin-kick-row .participant-name{ flex:1; }
  .kick-btn{
    appearance:none; border:1px solid rgba(196,69,61,0.5); background: rgba(196,69,61,0.15); color: var(--velvet);
    font-family: var(--body); font-weight:800; font-size:10.5px; letter-spacing:.03em; padding:4px 8px; border-radius:7px;
    cursor:pointer; flex-shrink:0;
  }
  .kick-btn:hover{ background: var(--velvet); color:#fff; }
  .admin-kick-empty{ font-size:12px; 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); }

  /* ================= ON-SCREEN (VIRTUAL) KEYBOARD ================= */
  /* A compact, semi-transparent keyboard that sits below the chat box,
     toggled from #vkbd-toggle-btn. While it's open the real chat input
     gets inputmode="none", so the device's own keyboard never pops up —
     that's the point: on a tablet like iPad the native keyboard is huge
     and swallows a big chunk of the screen, this panel only takes the
     little bit of room it actually needs. */
  #vkbd-toggle-btn.on{ background: var(--marquee); color:#1a1206; border-color:transparent; }
  .vkbd{
    display:flex; flex-direction:column; gap:6px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: rgba(18,22,31,0.55);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    flex-shrink: 0;
  }
  .vkbd[hidden]{ display:none; }
  .vkbd-row{ display:flex; gap:5px; }
  .vkbd-key{
    appearance:none; border:1px solid var(--line); background: rgba(242,239,233,0.07); color: var(--cream);
    border-radius:8px; font-family: var(--body), var(--emoji-font); font-size:14px; font-weight:600;
    min-width:0; flex:1; height:38px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
    transition: background .1s, transform .1s;
  }
  .vkbd-key:hover{ background: rgba(242,239,233,0.12); }
  .vkbd-key:active{ background: var(--teal); transform: scale(0.94); }
  .vkbd-key.vkbd-func{ background: rgba(242,239,233,0.03); color: var(--cream-dim); font-size:12px; flex:1.3; }
  .vkbd-key.active{ background: var(--marquee); color:#1a1206; border-color:transparent; }
  .vkbd-key.vkbd-space{ flex:5; }
  .vkbd-key.vkbd-enter{ flex:1.6; background: linear-gradient(120deg, var(--marquee-bright), var(--marquee)); color:#1a1206; border:none; }

  /* keep the see-through look consistent in floating/see-through chat mode too */
  #screen-room.chat-floating .vkbd{
    background: rgba(8,10,14,0.55) !important; border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.14) !important; border-top:none !important;
    margin-top:6px; pointer-events:auto;
  }

  @media (max-width: 1024px) and (pointer: coarse){
    .vkbd-key{ height:42px; font-size:15.5px; }
  }

  ::-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; }
  /* Popovers are positioned with `position:fixed` and placed by JS
     (positionPopover() in script.js) every time they open — clamped to
     stay fully inside the viewport, flipped above/below the button
     depending on available space, and capped to scroll internally if
     they're taller than the screen. This keeps every options panel
     (brightness, stickers, participants, admin, code box, etc.) fully
     reachable on any window size or device, instead of relying on a
     fixed anchor offset that can push tall panels off-screen. */
  .popover{
    position: fixed; top:0; left:0;
    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: 300;
    display:none; max-width: calc(100vw - 20px);
    max-height: calc(var(--app-vh, 100vh) - 20px); overflow-y:auto; -webkit-overflow-scrolling: touch;
    opacity:0; transform: translateY(6px) scale(.96);
    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: translateY(6px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } }
  .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; }

  #captions-position-popover input[type=range]{ width:150px; }
  #captions-position-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; height:100dvh;
  }
  #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; max-height:100dvh; height:100vh; height:100dvh; 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 calc(18px + env(safe-area-inset-bottom, 0px));
    transition: right .25s ease, opacity .35s ease, transform .35s ease;
    opacity:1; transform: translateY(0);
  }
  #screen-room.theater.controls-idle .controls{
    opacity:0; transform: translateY(14px); pointer-events:none;
  }
  #screen-room.theater.controls-idle .theater-exit{
    opacity:0; pointer-events:none;
  }
  #screen-room.theater.controls-idle{ cursor:none; }
  .theater-exit{ transition: opacity .35s 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: calc(16px + env(safe-area-inset-top, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); 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: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
      right: calc(10px + env(safe-area-inset-right, 0px)) !important;
      width: min(320px, 88vw) !important;
    }
  }

  /* ================= iPHONE / SMALL-SCREEN PLAYER TUNING ================= */
  @media (max-width: 760px){
    .app{ padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); }
    .brand-name{ font-size:22px; }
    .hero p{ font-size:14.5px; }
    .ticket{ padding: 20px 16px 18px; }
    .code-input{ font-size:24px; letter-spacing:5px; padding:12px 8px; }
    .room-top{ margin-bottom:14px; }
    .code-chip{ padding:8px 8px 8px 12px; gap:6px; }
    .code-chip .val{ font-size:16px; letter-spacing:2.5px; }
    .copy-btn{ padding:6px 9px; font-size:11px; }
    .leave-btn{ padding:9px 12px; font-size:12px; }

    .screen-frame video{ max-height: 40vh; max-height: 40dvh; }
    .controls{ padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }

    /* Icon buttons grow to a comfortable 44px tap target, and the row
       scrolls horizontally instead of wrapping into a cramped grid. */
    .icon-btn{ width:44px; height:44px; flex-shrink:0; }
    .ctl-row{
      flex-wrap: nowrap; overflow-x: auto; overflow-y:hidden;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding-bottom: 2px; margin: 12px -12px 0; padding-left:12px; padding-right:12px;
    }
    .ctl-row::-webkit-scrollbar{ display:none; }
    .ctl-row .sync-note{ display:none; } /* redundant on phones, saves space */
    .vol-wrap input[type=range]{ width:56px; }
    .speed-btn{ width:auto; padding:0 10px; }

    /* Popover placement itself is handled by JS (positionPopover()) at
       every breakpoint now — no viewport-specific override needed here. */
  }

  /* ================= MOBILE CHAT ================= */
  /* pointer:coarse (not just a raw width cutoff) so this also catches
     iPad in portrait — where the chat panel would otherwise stay a
     plain, non-fixed panel that the on-screen keyboard can overlap —
     while a narrow desktop/laptop browser window (mouse = pointer:fine)
     keeps the normal side-by-side layout instead of getting the phone
     treatment. */
  @media (max-width: 1024px) and (pointer: coarse){
    .chat-panel{
      position: fixed; left:0; right:0; bottom: var(--kbd-inset, 0px); top:auto;
      height:78vh; height:78dvh;
      max-height: min(78vh, calc(var(--app-vh, 100vh) - var(--kbd-inset, 0px) - 8px));
      border-radius: 16px 16px 0 0; z-index:150;
      transform: translateY(100%); transition: transform .25s ease, bottom .15s ease;
      box-shadow: 0 -20px 50px -20px rgba(0,0,0,0.6);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #screen-room.chat-open .chat-panel{ transform: translateY(0); }
    #chat-close-btn{ display:flex; }
    #chat-toggle-btn{
      display:flex !important; position:fixed;
      right: calc(16px + env(safe-area-inset-right, 0px));
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      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-head{ padding: 14px 14px; }
    .chat-head span{ font-size:15px; }
    .chat-head-actions .icon-btn{ width:36px; height:36px; }
    .chat-foot{ padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px)); gap:8px; }
    .chat-foot input, .send-btn, .chat-foot .icon-btn{ min-height:44px; }
    .send-btn{ padding: 0 16px; }
    .reaction-chip{ padding:6px 10px; font-size:13px; min-height:30px; }
    .msg{ max-width: 92%; }
    .msg .bubble{ padding: 10px 13px; }
  }

  /* ================= 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: calc(18px + env(safe-area-inset-top, 0px)); right: calc(18px + env(safe-area-inset-right, 0px)); 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: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); 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); }

  /* ---------- captions ---------- */
  #captions-btn{ width:auto; padding:0 10px; }
  #captions-upload-btn svg{ width:15px; height:15px; }
  video::cue{
    background: rgba(11,14,20,0.72);
    color: var(--cream);
    font-family: var(--chat-font);
    font-weight:600;
    font-size: 0.82em;
    line-height:1.4;
    padding: 3px 9px;
    letter-spacing:.1px;
  }
  #screen-room.theater video::cue{ font-size: 1.05em; padding: 4px 12px; }