/* 3D cinema lobby + hall */

.cinema-lobby {
  display: grid;
  gap: 18px;
  padding: 8px 0 32px;
}

.cinema-lobby-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
}

.cinema-lobby-head h1 {
  margin: 0;
  font-size: 1.6rem;
}

.cinema-create {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cinema-create input[type="text"] {
  min-width: 180px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--site-radius-md, 12px);
  border: 1px solid var(--site-border);
  background: var(--site-surface);
  color: var(--site-text);
}

.cinema-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.cinema-room-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: var(--site-radius-lg, 22px);
  border: 1px solid var(--site-border);
  background: var(--site-card);
  color: var(--site-text);
  text-decoration: none;
  box-shadow: var(--site-shadow);
}

.cinema-room-card:hover,
.cinema-room-card:focus-visible {
  border-color: var(--site-border-strong);
  outline: none;
}

.cinema-muted,
.cinema-empty {
  color: var(--site-text-soft);
  margin: 0;
}

.cinema-error {
  color: var(--site-warning, #c45c4a);
  margin: 0;
}

.cinema-hall {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050304;
  color: var(--site-text, #f4ece0);
}

.cinema-hall,
.cinema-hall body,
body.cinema-room-page {
  width: 100%;
  height: 100%;
  margin: 0;
}

body.cinema-room-page {
  overflow: hidden;
  background: #050304;
}

#cinema-scene {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

.cinema-hall.is-pointer-locked #cinema-scene {
  cursor: none;
}

.cinema-hall:not(.is-pointer-locked) .cinema-crosshair {
  display: none;
}

#cinema-media-host {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  overflow: hidden;
  opacity: 0.02;
  pointer-events: none !important;
  z-index: 0;
}

#cinema-media-host video,
#cinema-media-host audio {
  /* Keep the element tiny. A 1280×720 MSE video inside an 8px host still
     promotes a Chrome hardware overlay that punches through overflow:hidden
     and drops pointer lock — WASD then does nothing until reload. */
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  opacity: 0.01;
  pointer-events: none !important;
}

#cinema-css3d,
#cinema-labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none !important;
  overflow: hidden;
}

#cinema-css3d *,
#cinema-labels * {
  pointer-events: none !important;
}

.cinema-screen-dom,
.cinema-screen-dom iframe,
.cinema-screen-dom video,
.cinema-screen-dom audio {
  pointer-events: none !important;
  border: 0;
  background: #000;
}

.cinema-screen-dom video {
  /* Keep MSE/HLS from becoming a compositor overlay that eats lock and clicks. */
  opacity: 0.999;
  transform: translateZ(0.1px);
  filter: opacity(0.999);
  border-radius: 1px;
  backface-visibility: hidden;
}

.cinema-nick {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(8, 6, 7, 0.72);
  color: var(--site-text, #f4ece0);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.cinema-nick.is-local {
  display: none;
}

.cinema-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at center, rgba(40, 12, 16, 0.35), rgba(6, 3, 4, 0.92)),
    #090506;
  z-index: 30;
}

.cinema-overlay[hidden],
.cinema-hud[hidden],
.cinema-pause[hidden],
.cinema-expand[hidden] {
  display: none;
}

.cinema-ticket {
  width: min(440px, calc(100% - 32px));
  padding: 32px 28px 24px;
  border: 1px solid var(--site-border, rgba(226, 196, 138, 0.35));
  background: var(--site-surface, #1a1012);
  text-align: center;
  display: grid;
  gap: 12px;
}

.cinema-ticket h1 {
  margin: 0;
  font-weight: 500;
}

.cinema-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.cinema-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1px solid rgba(226, 196, 138, 0.7);
  border-radius: 50%;
}

.cinema-bar {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(14, 8, 10, 0.88);
  border: 1px solid rgba(226, 196, 138, 0.28);
}

.cinema-bar input[type="range"] {
  width: 110px;
  accent-color: var(--site-accent, #e2c48a);
}

.cinema-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  color: var(--site-text-soft, #b7a898);
}

.cinema-prompt {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border: 1px solid rgba(226, 196, 138, 0.45);
  background: rgba(14, 8, 10, 0.72);
  color: var(--site-accent, #e2c48a);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 14px;
}

.cinema-exit {
  pointer-events: auto;
  position: absolute;
  top: 16px;
  left: 16px;
  color: var(--site-accent, #e2c48a);
  text-decoration: none;
  border: 1px solid rgba(226, 196, 138, 0.4);
  padding: 6px 10px;
}

.cinema-now {
  position: absolute;
  top: 16px;
  right: 16px;
  max-width: min(420px, 46vw);
  text-align: right;
  font-size: 13px;
  color: var(--site-text-soft, #b7a898);
}

.cinema-expand {
  position: absolute;
  inset: 0;
  z-index: 18;
  background: #000;
}

.cinema-hall.is-expanded #cinema-scene,
.cinema-hall.is-expanded #cinema-css3d,
.cinema-hall.is-expanded #cinema-labels {
  visibility: hidden;
  pointer-events: none;
}

.cinema-hall.is-expanded .cinema-hud,
.cinema-hall.is-expanded .cinema-prompt {
  display: none;
}

.cinema-expand-stage {
  position: absolute;
  inset: 0;
  min-height: 0;
  background: #000;
}

.cinema-expand-stage video,
.cinema-expand-stage iframe,
.cinema-expand-stage > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none !important;
  border: 0;
  opacity: 1;
}

.cinema-expand-hud {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  transition: opacity .22s ease, transform .22s ease;
}

.cinema-expand.is-chrome-idle,
.cinema-expand.is-chrome-idle * {
  cursor: none;
}

.cinema-expand.is-chrome-idle .cinema-expand-hud {
  opacity: 0;
  transform: translateY(8px);
}

.cinema-expand.is-chrome-idle .cinema-expand-hud,
.cinema-expand.is-chrome-idle .cinema-expand-hud * {
  pointer-events: none;
}

.cinema-expand-now {
  pointer-events: none;
  position: absolute;
  right: 16px;
  bottom: calc(100% + 12px);
  max-width: min(520px, 70vw);
  margin: 0;
  text-align: right;
  font-size: 13px;
  color: var(--site-text-soft, #b7a898);
}

.cinema-expand-hud #cinema-expand-exit,
.cinema-expand-leave {
  pointer-events: auto;
  position: absolute;
  bottom: calc(100% + 12px);
  appearance: none;
  border: 1px solid rgba(226, 196, 138, 0.4);
  background: rgba(14, 8, 10, 0.88);
  color: var(--site-accent, #e2c48a);
  font: inherit;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
}

.cinema-expand-hud #cinema-expand-exit {
  left: 16px;
}

.cinema-expand-leave {
  left: 92px;
}

.cinema-expand-bar {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(14, 8, 10, 0.94);
  border-top: 1px solid rgba(226, 196, 138, 0.28);
}

.cinema-expand-bar input[type="range"] {
  flex: 1 1 160px;
  min-width: 120px;
  accent-color: var(--site-accent, #e2c48a);
}

.cinema-expand-bar #cinema-expand-volume {
  flex: 0 0 110px;
  width: 110px;
  min-width: 110px;
}

.cinema-pause {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  isolation: isolate;
  transform: translateZ(0);
}

.cinema-pause-actions {
  pointer-events: auto;
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1;
}

.cinema-resume,
.cinema-pause-actions button {
  pointer-events: auto;
  appearance: none;
  border: 1px solid var(--site-accent, #e2c48a);
  background: rgba(14, 8, 10, 0.92);
  color: var(--site-accent, #e2c48a);
  font: inherit;
  padding: 8px 16px;
  cursor: pointer;
}

.cinema-host {
  pointer-events: auto;
  position: absolute;
  top: 56px;
  right: 16px;
  width: min(340px, calc(100% - 32px));
  max-height: calc(100% - 120px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  background: rgba(14, 8, 10, 0.94);
  border: 1px solid rgba(226, 196, 138, 0.28);
}

.cinema-host h2 {
  margin: 0;
  font-size: 1rem;
}

.cinema-host input[type="text"],
.cinema-host input[type="search"] {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--site-radius-sm, 10px);
  border: 1px solid var(--site-border, rgba(226, 196, 138, 0.28));
  background: var(--site-surface, #1a1012);
  color: var(--site-text, #f4ece0);
}

.cinema-host-row {
  display: flex;
  gap: 8px;
}

.cinema-host-transport {
  align-items: center;
}

.cinema-host-transport #cinema-play {
  flex: 0 0 auto;
}

.cinema-time {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--site-text-soft, #b7a898);
  white-space: nowrap;
}

.cinema-host-seek {
  width: 100%;
  min-width: 220px;
}

.cinema-host-seek input[type="range"] {
  display: block;
  width: 100%;
  min-width: 220px;
  accent-color: var(--site-accent, #e2c48a);
}

.cinema-results {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.cinema-result,
.cinema-chip,
.cinema-ticket button,
.cinema-bar button,
.cinema-host button,
.cinema-expand-bar button,
.cinema-create button {
  appearance: none;
  border: 1px solid var(--site-accent, #e2c48a);
  background: transparent;
  color: var(--site-accent, #e2c48a);
  font: inherit;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}

.cinema-chip {
  margin: 4px 4px 0 0;
}

.cinema-source {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.cinema-gate {
  min-height: 40vh;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 40px 16px;
}

@media (max-width: 720px) {
  .cinema-rooms {
    grid-template-columns: 1fr;
  }

  .cinema-host {
    width: calc(100% - 24px);
    right: 12px;
  }
}

.cinema-lights-btn[aria-pressed="true"] {
  border-color: rgba(255, 220, 140, 0.55);
  color: #ffe6b0;
}