/* Movie-theatre look: red velvet walls, a dark glowing screen, brass trim. */
:root {
  --velvet: #6e0f17;
  --velvet-deep: #3a060b;
  --velvet-dark: #22040a;
  --seat: #2a070c;
  --seat-edge: #4a0f16;
  --gold: #e8b45a;
  --gold-soft: #f3d391;
  --text: #f6e9d9;
  --muted: #c9a99a;
  --danger: #ff6b6b;
  --glow: rgba(255, 196, 120, 0.22);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, sans-serif;
  background-color: var(--velvet-deep);
  /* Curtain folds, lit from above, with a dark vignette at the edges. */
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(255, 170, 110, 0.18), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(10, 0, 2, 0.75) 100%),
    repeating-linear-gradient(90deg,
      var(--velvet-dark) 0px, var(--velvet) 22px, #8a1a22 34px, var(--velvet) 46px, var(--velvet-dark) 68px);
  background-attachment: fixed;
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--seat-edge); background: rgba(15, 2, 4, 0.75); color: var(--text); font: inherit;
}
input::placeholder { color: #9b7b70; }
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 180, 90, 0.2); }

button {
  padding: 9px 14px; border-radius: 10px; font: inherit; cursor: pointer;
  border: 1px solid rgba(232, 180, 90, 0.45);
  background: linear-gradient(#4a0d15, #2c060b);
  color: var(--gold-soft);
  transition: border-color .15s, box-shadow .15s;
}
button:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(232, 180, 90, 0.25); }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }
button.primary {
  background: linear-gradient(#f1c873, #c98d2e); border-color: #f5d79a; color: #2a0508; font-weight: 600;
}
button.danger { color: var(--danger); border-color: rgba(255, 107, 107, 0.45); }
button.on { background: #170306; border-color: var(--gold); }

/* ---------- lobby: the box office ---------- */
#lobby {
  max-width: 480px; margin: 10vh auto; padding: 28px 24px 22px; display: grid; gap: 12px;
  background: linear-gradient(rgba(34, 4, 9, 0.92), rgba(20, 2, 5, 0.94));
  border: 1px solid rgba(232, 180, 90, 0.35); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px var(--glow);
}
#lobby h1 {
  margin: 4px auto 6px; padding: 6px 26px;
  font: 600 34px/1.2 var(--serif); letter-spacing: 6px; text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 0 10px rgba(255, 200, 120, 0.7), 0 0 26px rgba(255, 150, 60, 0.4);
  /* Marquee bulbs */
  outline: 5px dotted #ffdf9a; outline-offset: 6px; border-radius: 6px;
  box-shadow: 0 0 22px rgba(255, 200, 120, 0.35);
}
#lobby p { margin: 0; text-align: center; }
#lobby label { font-family: var(--serif); color: var(--gold); letter-spacing: 1px; }
#invite p { text-align: left; }
.msg { min-height: 1.4em; color: var(--muted); }
.msg.err { color: var(--danger); }

/* ---------- the auditorium ---------- */
#app { display: grid; grid-template-columns: minmax(0, 1fr) 10px var(--side-w, 350px); height: 100vh; }
#stage { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; min-width: 0; }
#stageArea {
  flex: 1; position: relative; overflow: hidden; display: grid; place-items: center;
  background: #050102; border-radius: 6px;
  border: 3px solid #1a0306;
  box-shadow:
    0 0 0 2px rgba(232, 180, 90, 0.35),
    0 0 50px rgba(255, 190, 120, 0.18),
    0 25px 60px rgba(0, 0, 0, 0.7);
}
/* Valance: a scalloped curtain across the top of the screen. */
#stageArea::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 18px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, #8a1a22 0 13px, transparent 14px) 0 0 / 34px 18px repeat-x,
    linear-gradient(#5a0c13, #5a0c13) 0 0 / 100% 4px no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6));
}
#stageEmpty {
  font: italic 20px var(--serif); color: var(--muted); letter-spacing: .5px; text-align: center; padding: 0 20px;
}
#stageArea video, #ytWrap, #ytWrap iframe { width: 100%; height: 100%; border: 0; }
#stageArea video { object-fit: contain; }
#loadForm input { background: rgba(15, 2, 4, 0.85); }

/* Sidebar: a row of plush seats. */
aside {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; min-height: 0; min-width: 0;
  background: linear-gradient(180deg, rgba(42, 7, 12, 0.94), rgba(22, 3, 6, 0.97));
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}

/* ---------- resize handles ---------- */
.gutter { position: relative; touch-action: none; outline: none; }
.gutter::after {
  content: ""; position: absolute; background: rgba(232, 180, 90, 0.3); border-radius: 2px;
  transition: background .15s, box-shadow .15s;
}
.gutter:hover::after, .gutter:focus-visible::after, .gutter.dragging::after {
  background: var(--gold); box-shadow: 0 0 10px rgba(232, 180, 90, 0.6);
}
.gutter-main { cursor: col-resize; }
.gutter-main::after { top: 0; bottom: 0; left: 4px; width: 2px; }
.gutter-y { flex: none; height: 10px; margin: -5px 0; cursor: row-resize; }
.gutter-y::after { left: 35%; right: 35%; top: 4px; height: 2px; }
body.resizing { user-select: none; }
/* Keep iframes/videos from swallowing pointer events mid-drag. */
body.resizing iframe, body.resizing video { pointer-events: none; }
aside p { margin: 0; }
#status { font-family: var(--serif); font-style: italic; }
#sas {
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(232, 180, 90, 0.35); background: rgba(10, 1, 3, 0.5);
}
#sasCode { font-family: ui-monospace, monospace; font-size: 18px; letter-spacing: 2px; color: var(--gold-soft); }
.cams { position: relative; flex: none; }
.cams video {
  display: block; width: 100%; border-radius: 12px; background: #050102; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(232, 180, 90, 0.3), 0 10px 25px rgba(0, 0, 0, 0.5);
}
#remoteCam { height: var(--cam-h, auto); aspect-ratio: 4 / 3; }
.pip { position: absolute; right: 8px; bottom: 8px; width: var(--pip-w, 32%); }
#localCam { aspect-ratio: 4 / 3; border: 2px solid var(--seat); transform: scaleX(-1); }
.pip-handle {
  position: absolute; left: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--seat); cursor: nwse-resize; touch-action: none;
  opacity: 0; transition: opacity .15s; outline: none;
}
.pip:hover .pip-handle, .pip-handle:focus-visible, .pip-handle.dragging { opacity: 1; }
@media (hover: none) { .pip-handle { opacity: .8; } }
.controls button { flex: 1; padding: 8px 6px; font-size: 13px; }

#chatLog {
  flex: 1; overflow-y: auto; margin: 0; padding: 8px; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(8, 1, 2, 0.45); border-radius: 12px; border: 1px solid rgba(74, 15, 22, 0.8);
}
#chatLog li {
  padding: 6px 11px; border-radius: 12px; max-width: 85%;
  background: #3a0a11; overflow-wrap: anywhere; white-space: pre-wrap;
}
#chatLog li.me { align-self: flex-end; background: linear-gradient(#7a5a22, #5e4216); color: #fff3dc; }
#chatLog li.sys { align-self: center; background: none; color: var(--muted); font: italic 13px var(--serif); }

@media (max-width: 800px) {
  body { background-attachment: scroll; }
  #lobby { margin: 6vh 16px; }
  #app { grid-template-columns: minmax(0, 1fr); height: auto; }
  #stage { padding: 12px; }
  #stageArea { flex: none; height: var(--stage-h, 56vw); }
  /* Single column: the main handle sits between screen and sidebar and resizes the screen's height. */
  .gutter-main { height: 14px; cursor: row-resize; }
  .gutter-main::after { left: 35%; right: 35%; top: 6px; bottom: auto; width: auto; height: 2px; }
  aside { box-shadow: none; }
  #chatLog { min-height: 200px; }
}