:root {
  --black: #070708;
  --panel: #101012;
  --panel-raised: #161619;
  --ink: #f1eee9;
  --muted: #a8a5a4;
  --quiet: #8f8b8a;
  --line: #2b2b2e;
  --red: #f23636;
  --red-dark: #7f1b24;
  --cyan: #6ce8ed;
  --focus: #f4c15d;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand: "VT323", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--black); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--black);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
}

button, input { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 1rem;
  padding: .55rem .8rem;
  color: var(--black);
  background: var(--focus);
  transform: translateY(-120%);
}

.skip-link:focus { transform: translateY(0); }

.live-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.live-shell::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/minimized/bw-texture-symbols.png") center / 780px auto;
  content: "";
  opacity: .045;
  pointer-events: none;
}

.live-header, main, .live-footer {
  width: min(1400px, calc(100% - 3rem));
  margin-inline: auto;
}

.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  border-bottom: 1px solid var(--line);
}

.live-brand, .home-link { text-decoration: none; }

.live-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  font-family: var(--brand);
  font-size: 1.35rem;
  letter-spacing: .08em;
}

.live-brand img {
  width: 66px;
  height: 44px;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: screen;
}

.brand-divider { color: var(--red); }
.brand-live { color: var(--cyan); }

.header-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-link { color: var(--ink); font-size: .78rem; letter-spacing: .06em; }
.home-link:hover, .home-link:focus-visible { color: var(--cyan); }

main { padding: 3.5rem 0 5rem; }

.room-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.35rem;
}

.signal-kicker {
  margin: 0 0 .35rem;
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2, p { margin-block-start: 0; }

h1, h2 {
  margin-bottom: 0;
  font-weight: 650;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
h2 { font-size: 1.25rem; line-height: 1.1; }

.state-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 34px;
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.state-dot, .readout-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--quiet);
}

.state-pill[data-state="live"], .state-pill[data-state="live-muted"] { color: var(--ink); }
.state-pill[data-state="live"] .state-dot, .state-pill[data-state="live-muted"] .state-dot { background: var(--red); }
.state-pill[data-state="connecting"] .state-dot, .state-pill[data-state="buffering"] .state-dot, .state-pill[data-state="reconnect"] .state-dot { background: var(--cyan); }
.state-pill[data-state="error"] .state-dot { background: var(--red); }

.live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, .8fr);
  gap: 1.25rem;
  align-items: start;
}

.player-column, .chat-panel {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}

.video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #020203;
}

.reaction-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.reaction-burst {
  position: absolute;
  bottom: 4%;
  left: 8%;
  color: var(--red);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1;
  text-shadow: 0 2px 12px rgb(0 0 0 / 65%);
  animation: reaction-rise 1.6s ease-out forwards;
}

#live-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #020203;
  object-fit: contain;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 2rem;
  text-align: center;
  background: #0b0b0d;
  isolation: isolate;
}

.video-placeholder::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/gritty-red-symbols.png") center / cover;
  content: "";
  opacity: .1;
}

.video-placeholder img {
  width: min(220px, 45%);
  height: auto;
  margin-bottom: 1.2rem;
  mix-blend-mode: screen;
  opacity: .72;
}

.placeholder-label {
  margin-bottom: .4rem;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 750;
  letter-spacing: .14em;
}

.placeholder-copy { max-width: 37ch; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }

.telegram-link {
  color: var(--cyan);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.telegram-link:hover { color: var(--ink); }

.stage-state {
  position: absolute;
  right: .85rem;
  bottom: .75rem;
  padding: .32rem .5rem;
  max-width: calc(100% - 1.7rem);
  overflow: hidden;
  color: var(--muted);
  background: rgb(7 7 8 / 82%);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--line);
}

.technical-readout {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  color: var(--muted);
  font-size: .75rem;
}

.technical-readout span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readout-mark { background: var(--cyan); }

.video-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .45rem; }

.control-button, .send-button, .reaction-button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--panel-raised);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, opacity .18s ease;
}

.control-button {
  min-height: 44px;
  padding: .45rem .62rem;
  font-size: .7rem;
  white-space: nowrap;
}

.control-button:hover:not(:disabled), .control-button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.control-button--accent { border-color: var(--red-dark); color: var(--ink); }
.control-button--accent:hover:not(:disabled) { border-color: var(--red); color: var(--ink); background: var(--red-dark); }

button:disabled { cursor: not-allowed; opacity: .42; }

.signal-strip {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem .8rem;
  border-top: 1px solid var(--line);
}

.waveform { display: flex; align-items: center; gap: 3px; width: min(255px, 60%); height: 24px; }
.waveform span { display: block; width: 3px; height: var(--bar); min-height: 4px; background: var(--red); opacity: .8; transform-origin: center; animation: signal-wave 1.8s ease-in-out infinite alternate; }
.waveform span:nth-child(3n) { animation-delay: -.6s; }
.waveform span:nth-child(4n) { animation-delay: -1.1s; }
.signal-strip-label { color: var(--quiet); font-size: .65rem; letter-spacing: .1em; }

@keyframes signal-wave { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes reaction-rise { from { opacity: 0; transform: translateY(0) scale(.8); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-150px) scale(1.15); } }

.chat-panel { display: flex; min-height: 100%; flex-direction: column; }

.chat-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.connected-count { margin: 0; color: var(--quiet); font-size: .72rem; white-space: nowrap; }
.connected-count span { color: var(--cyan); font-weight: 700; }

.chat-notice {
  min-height: 2.35rem;
  margin: 0;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .76rem;
}

.chat-notice[data-tone="error"] { color: #ff9b9b; }
.chat-notice[data-tone="success"] { color: var(--cyan); }

.chat-messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .8rem;
  min-height: 310px;
  max-height: 52vh;
  margin: 0;
  padding: 1rem;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.chat-empty { align-self: center; max-width: 24ch; margin: auto; color: var(--quiet); font-size: .85rem; text-align: center; }
.chat-message { display: grid; gap: .12rem; }
.chat-message-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.chat-message-name { color: var(--cyan); font-size: .76rem; font-weight: 700; }
.chat-message-time { color: var(--quiet); font-size: .66rem; }
.chat-message-text { margin: 0; color: var(--ink); font-size: .88rem; overflow-wrap: anywhere; }

.name-gate, .chat-composer, .reactions { border-top: 1px solid var(--line); }
.name-gate { padding: .85rem 1rem; background: var(--panel-raised); }
.name-gate label, .composer-meta label { color: var(--muted); font-size: .74rem; font-weight: 650; }
.name-row, .composer-row { display: flex; gap: .45rem; margin-top: .45rem; }
input {
  min-height: 44px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--black);
}
input::placeholder { color: var(--quiet); opacity: 1; }
input:hover:not(:disabled) { border-color: #555256; }
input:focus { border-color: var(--cyan); }
.name-row input { width: 100%; padding: .55rem .65rem; }
.field-hint { margin: .45rem 0 0; color: var(--quiet); font-size: .68rem; }

.chat-composer { padding: .85rem 1rem; }
.composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#char-count { color: var(--quiet); font-size: .68rem; }
.composer-row input { width: 100%; padding: .62rem .65rem; }
.send-button { min-height: 44px; flex: 0 0 auto; padding: .55rem .72rem; color: var(--black); background: var(--cyan); border-color: var(--cyan); font-size: .76rem; font-weight: 750; }
.send-button:hover:not(:disabled) { color: var(--ink); background: var(--red-dark); border-color: var(--red); }

.reactions { padding: .85rem 1rem 1rem; }
.reactions > p { margin-bottom: .55rem; color: var(--muted); font-size: .72rem; }
.reaction-buttons { display: flex; gap: .45rem; }
.reaction-button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: .3rem; min-height: 44px; padding: .35rem .4rem; color: var(--muted); font-size: .7rem; }
.reaction-button span:first-child { color: var(--red); font-size: 1rem; line-height: 1; }
.reaction-button:hover:not(:disabled) { border-color: var(--red); color: var(--ink); }
.reaction-button[data-active="true"] { border-color: var(--red); color: var(--ink); background: var(--red-dark); }

.live-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

[hidden] { display: none !important; }

@media (max-width: 980px) {
  .live-layout { grid-template-columns: 1fr; }
  .chat-messages { max-height: 390px; }
}

@media (max-width: 640px) {
  .live-header, main, .live-footer { width: min(100% - 1.5rem, 1400px); }
  .live-header { min-height: 68px; }
  .header-note { display: none; }
  .header-meta { gap: 0; }
  .home-link { font-size: .7rem; }
  main { padding: 2.25rem 0 3rem; }
  .room-heading { align-items: start; flex-direction: column; gap: .9rem; margin-bottom: 1rem; }
  .state-pill { align-self: stretch; justify-content: center; }
  .stage-state { display: none; }
  .video-placeholder { padding: .5rem; }
  .video-placeholder img { display: none; }
  .placeholder-copy { margin-bottom: .35rem; font-size: .76rem; }
  .placeholder-label { margin-bottom: .2rem; font-size: .78rem; }
  .telegram-link { display: inline-flex; align-items: center; min-height: 44px; }
  .player-toolbar { align-items: stretch; flex-direction: column; }
  .video-actions { justify-content: stretch; }
  .control-button { flex: 1 1 auto; }
  .signal-strip { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .waveform { width: 100%; }
  .chat-messages { min-height: 260px; max-height: 46vh; }
  .live-footer { align-items: start; flex-direction: column; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reaction-burst { opacity: 1; animation: none !important; }
}