@font-face {
  font-family: "Upheaval";
  src: url("/fonts/Upheaval.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Modern DOS";
  src: url("/fonts/ModernDOS9x16.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f3f0e8;
  --muted: #8d96a4;
  --canvas: #090a0d;
  --panel: #101218;
  --line: #373d49;
  --line-dark: #1c2029;
  --pink: #d91d65;
  --pink-soft: #f05a94;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 400 16px/1.35 "Monocraft", "Modern DOS", monospace;

}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: #a9ccef; }

.icon { image-rendering: pixelated; image-rendering: crisp-edges; }

#app { min-height: 100dvh; }
.home { width: min(690px, calc(100% - 30px)); margin: 38px auto 70px; }
.home > h1 {
  margin: 0 0 5px;
  font: 400 clamp(38px, 7vw, 54px)/.9 "Pikselator Wide", "Upheaval", monospace;
  letter-spacing: .4px;
}
.panel, .owned-list {
  position: relative;
  padding: 25px;
  background: var(--panel);
  border: 1px dotted var(--line);
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  outline-offset: 0;
}
.panel h2, .owned-list h2, .dialog-top h2 {
  font: 400 29px/.9 "Pikselator Wide", "Upheaval", monospace;
  margin: 0 0 20px;
}
.field { margin-bottom: 17px; }
.field label, .label-small { display: block; font: 400 16px/1.2 "Monocraft", "Modern DOS", monospace; margin: 0 0 6px; color: #c5cbd5; }
input, select, textarea {
  width: 100%;
  min-height: 39px;
  color: var(--ink);
  background: #090b10;
  border: 1px dotted #353b48;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 10px;
  outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: #626b7c; box-shadow: none; }
.hint, .section-note { display: block; color: var(--muted); font-size: 15px; margin-top: 6px; }
.error { color: #ff8aa9; }

.password-input { position: relative; }
.password-input input { padding-right: 47px; }
.password-toggle {
  position: absolute;
  right: 3px;
  top: 2px;
  width: 38px;
  height: 35px;
  padding: 3px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.password-toggle.revealed { background: rgb(217 29 101 / .2); }
.password-toggle .icon { width: 28px; height: 28px; }

.primary, .secondary, .control-button, .icon-button {
  min-height: 40px;
  color: var(--ink);
  background: #181b22;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  padding: 7px 12px;
}
.primary { background: #7d1740; box-shadow: none; }
.primary:hover { background: #a71950; }
.secondary:hover, .control-button:hover, .icon-button:hover { background: #242936; }
.with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.icon { width: 26px; height: 26px; flex: none; object-fit: contain; }
.icon-button { width: 40px; height: 40px; padding: 6px; }
.icon-button .icon { width: 28px; height: 28px; }
.owned-list { margin-top: 30px; padding: 20px; }
.owned-list h2 { font-size: 19px; margin-bottom: 12px; }
#owned-items { display: grid; gap: 7px; }
#owned-items a { display: flex; justify-content: space-between; padding: 9px 11px; text-decoration: none; color: var(--ink); background: #0b0d12; border: 1px dotted #4d5663; }
#owned-items a:hover { border-color: var(--pink-soft); }
.section-note { margin: 17px 0 0; }

.room { padding: 9px 11px 13px; }
.room-top { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.room-title { min-width: 0; }
.room-title h1 { margin: 0 0 1px; font: 400 30px/.9 "Pikselator Wide", "Upheaval", monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-sub { color: var(--muted); font-size: 14px; }
.room-actions { display: flex; gap: 8px; align-items: center; }
.room-actions button { min-height: 40px; padding: 6px 12px; font-size: 16px; }
.room-actions #share-button, .room-actions #broadcast-button { width: 40px; height: 40px; padding: 6px; }
.room-actions #screen-stop { background: #521529; color: #ff9ab5; border: 1px dotted #d94a70; }
.room-actions #screen-stop:hover { background: #762039; }
.room-actions #screen-stop .icon { filter: brightness(0) saturate(100%) invert(76%) sepia(24%) saturate(1215%) hue-rotate(290deg) brightness(103%) contrast(102%); }
.people-badge { display: flex; align-items: center; gap: 3px; color: var(--muted); }
.people-badge .icon { width: 24px; height: 24px; }
.room-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 10px; align-items: stretch; }
.watch-column { min-width: 0; }
.stage {
  position: relative;
  width: 100%;
  height: calc(100dvh - 80px);
  min-height: 420px;
  overflow: hidden;
  background: #000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  outline-offset: 0;
}
.stage:fullscreen { height: 100%; min-height: 0; border: 0; outline: 0; box-shadow: none; padding: 0; background: #000; }
.streams-grid { position: relative; height: 100%; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); padding: 0; }
.streams-grid[data-count="1"] { grid-template-columns: 1fr; }
.streams-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.streams-grid[data-count="3"], .streams-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.streams-grid[data-count="3"] .stream-card, .streams-grid[data-count="4"] .stream-card { grid-column: span 2; }
.streams-grid[data-count="3"] .stream-card:nth-child(3) { grid-column: 2 / span 2; }
.streams-grid[data-count="5"], .streams-grid[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.streams-grid[data-count="5"] .stream-card, .streams-grid[data-count="6"] .stream-card { grid-column: span 2; }
.streams-grid[data-count="5"] .stream-card:nth-child(4) { grid-column: 2 / span 2; }
.streams-grid.has-focus { display: grid; grid-template-columns: repeat(var(--other-count, 1), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 130px; gap: 7px; }
.streams-grid.has-focus .stream-card.focused { order: -1; grid-column: 1 / -1; height: 100%; }
.streams-grid.has-focus .stream-card:not(.focused) { grid-column: auto; height: 130px; cursor: pointer; }
.streams-grid.has-focus .stream-card:not(.focused) .stream-head { opacity: 1; }
.streams-grid.has-focus .stream-card:not(.focused) .stream-foot { display: none; }
.streams-grid.has-focus .stream-card:not(.focused) .stream-message strong { display: none; }
.streams-grid.has-focus.hide-other-streams, .streams-grid.has-focus[data-count="1"] { grid-template-rows: minmax(0, 1fr); }
.streams-grid.has-focus.hide-other-streams .stream-card:not(.focused) { position: absolute; left: -10000px; top: 0; width: 240px; height: 130px; opacity: 0; pointer-events: none; }
.focus-tray-toggle { position: absolute; z-index: 12; left: 50%; bottom: 140px; transform: translate(-50%, 50%); width: 42px; height: 29px; min-height: 29px; padding: 2px; display: grid; place-items: center; color: var(--ink); background: #11141aee; border: 1px dotted #454d5b; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.stage:hover .focus-tray-toggle, .stage:has(:focus-visible) .focus-tray-toggle { opacity: 1; pointer-events: auto; }
.focus-tray-toggle:hover { background: #282d39; }
.focus-tray-toggle .icon { width: 22px; height: 22px; }
.stage:has(.hide-other-streams) .focus-tray-toggle { bottom: 0; transform: translate(-50%, 0); }
.streams-grid[data-count="1"] .focus-stream { display: none; }
.stream-card { position: relative; min-width: 0; min-height: 0; background: #000; border: 0; overflow: hidden; }
.stream-card:fullscreen { height: 100%; border: 0; background: #000; }
.stream-card:fullscreen .stream-head { display: none; }
.stream-card:not(.watching) video { display: none; }
.stream-head { position: absolute; z-index: 11; top: calc(var(--media-y, 0px) + 7px); left: calc(var(--media-x, 0px) + 7px); max-width: calc(var(--media-width, 100%) - 14px); padding: 5px 9px; background: #090b10df; border: 1px dotted #454d5b; opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.stream-name { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.stream-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 20px/.9 "Pikselator Wide", "Upheaval", monospace; }
.stream-name span { white-space: nowrap; color: var(--muted); font: 400 13px/1 "Monocraft", "Modern DOS", monospace; }
.stream-label { font: 400 14px/1.3 "Monocraft", "Modern DOS", monospace; color: var(--muted); max-width: 380px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 4px; }
.stream-viewers { position: relative; margin-left: 8px; }
.stream-viewers summary { display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.stream-viewers summary::-webkit-details-marker { display: none; }
.stream-viewers summary .icon { width: 18px; height: 18px; }
.viewer-list { position: absolute; top: 28px; left: 0; min-width: 170px; max-width: 250px; max-height: 180px; overflow-y: auto; padding: 10px; background: #101218; border: 1px dotted var(--line); }
.viewer-list span { display: block; white-space: normal; overflow-wrap: anywhere; font-size: 16px; margin: 4px 0; }
.stream-card.playback-blocked .stream-message { pointer-events: auto; }
.stream-card:not(.watching) .stream-head, .stream-card:has(.stream-viewers[open]) .stream-head { opacity: 1; pointer-events: auto; }
.stream-card:not(.watching) .stream-foot .pip, .stream-card:not(.watching) .stream-foot .volume-wrap { display: none; }
.room-members { margin: 0 0 18px; max-height: 220px; overflow: auto; }
.room-members > div { padding: 4px 0; overflow-wrap: anywhere; }
.video-shell { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.video-shell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain !important; background: #000; }
.stream-message, .empty-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--muted); }
.empty-stage { pointer-events: none; }
.stream-message { background: transparent; }
.stream-card.watching .stream-message { pointer-events: none; }
.stream-card.watching .stream-message:not(.hidden) { background: transparent; }
.stream-card.watching .stream-message strong { padding: 7px 10px; background: #05070acc; }
.stream-message strong, .empty-stage strong { color: var(--ink); font: 400 27px/.9 "Pikselator Wide", "Upheaval", monospace; }
.stream-foot { position: absolute; z-index: 10; right: calc(var(--media-x, 0px) + 7px); bottom: calc(var(--media-y, 0px) + 7px); max-width: calc(var(--media-width, 100%) - 14px); opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.stream-foot-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; padding: 4px; background: #090b10e8; border: 1px dotted #454d5b; }
.stream-foot .icon-button { width: 33px; height: 33px; min-height: 33px; padding: 5px; background: #181b22; border: 0; }
.stream-foot .icon { width: 23px; height: 23px; }
.stream-card:hover .stream-head, .stream-card:hover .stream-foot, .stream-card:focus-within .stream-head, .stream-card:focus-within .stream-foot { opacity: 1; pointer-events: auto; }
.volume-wrap { display: flex; align-items: center; gap: 4px; }
.volume-slider { width: 0; min-width: 0; height: 18px; padding: 0; opacity: 0; accent-color: var(--pink-soft); transition: width .16s ease, opacity .16s ease; }
.volume-wrap:hover .volume-slider, .volume-wrap:focus-within .volume-slider { width: 66px; opacity: 1; }
.streams-grid.has-focus .stream-card:not(.focused) .stream-foot-right { transform: scale(.85); transform-origin: right bottom; }
.streams-grid.has-focus .stream-card:not(.focused) .stream-name strong { font-size: 16px; }
.stream-foot .focus-stream[aria-pressed="true"] { background: #4d1830; box-shadow: none; }
.mode-toggle { background: transparent; box-shadow: none; }
.stream-foot .stop-stream { background: #521529; box-shadow: none; }
.stream-foot .stop-stream:hover { background: #762039; }
.stream-foot .stop-stream .icon { filter: brightness(0) saturate(100%) invert(67%) sepia(46%) saturate(2362%) hue-rotate(299deg) brightness(100%) contrast(104%); }

.chat { height: calc(100dvh - 80px); min-height: 420px; display: flex; flex-direction: column; background: var(--panel); border: 1px dotted #343a47; box-shadow: none; outline: 0; outline-offset: 0; }
.messages { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.message { margin-bottom: 13px; overflow-wrap: anywhere; line-height: 1.4; }
.message-name { margin-right: 7px; font-weight: 700; }
.message-time { color: #737c87; font-size: 13px; }
.message-text { color: #dce0e5; white-space: pre-wrap; }
.chat-day { margin: 13px 0; display: flex; align-items: center; gap: 8px; color: #a3acba; text-align: center; font-size: 13px; }
.chat-day::before, .chat-day::after { content: ''; height: 1px; flex: 1; background: #353b48; }
.chat-form { display: flex; align-items: flex-end; gap: 7px; padding: 10px; border-top: 1px dotted #343b47; }
.chat-form textarea { flex: 1; min-width: 0; width: auto; height: 40px; min-height: 40px; max-height: 144px; resize: none; overflow-y: auto; line-height: 20px; padding: 8px 10px; }
.chat-form button { padding: 6px; }
.chat-collapse {
  position: absolute;
  z-index: 12;
  top: 50%;
  right: 305px;
  width: 28px;
  height: 50px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink);
  background: #0d1016;
  border: 1px dotted #363c48;
  box-shadow: none;
  transform: translateY(-50%);
  clip-path: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.chat-collapse:hover { background: #1a1e27; }
.chat-collapse .icon { width: 20px; height: 20px; transform: rotate(180deg); }
.room.chat-collapsed .room-layout { grid-template-columns: 1fr; }
.room.chat-collapsed .chat { display: none; }
.room.chat-collapsed .chat-collapse { right: 4px; }
.room.chat-collapsed .chat-collapse .icon { transform: rotate(0); }

body:has(#room-root) { overflow: hidden; background: #000; }
body:has(#room-root) #app { min-height: 100dvh; height: 100dvh; }
.room { height: 100dvh; padding: 0; }
.room .room-layout, .room .watch-column { height: 100%; }
.room .stage { height: 100dvh; min-height: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; }
.room .chat { height: 100dvh; min-height: 0; }

.c-blue { color: #70aaf5; }
.c-green { color: #68c995; }
.c-violet { color: #ae8ee9; }
.c-orange { color: #efa365; }
.c-pink { color: #e988b1; }
.c-teal { color: #61c5cd; }
.c-brown { color: #ca9d76; }
.c-red { color: #ee8178; }

dialog { width: min(480px, calc(100vw - 30px)); padding: 0; color: var(--ink); background: #11141a; border: 1px dotted #383f4c; border-radius: 0; box-shadow: none; outline: 0; outline-offset: 0; }
dialog::backdrop { background: rgb(2 3 5 / .82); }
.dialog-inner { padding: 22px; }
.dialog-top { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.dialog-top h2 { margin: 0; }
.dialog-copy { color: #aab1bd; font-size: 16px; line-height: 1.35; }
dialog.broadcast-dialog { width: min(970px, calc(100vw - 24px)); max-height: 90dvh; }
.broadcast-dialog .dialog-inner { max-height: 90dvh; overflow-y: auto; }
.broadcast-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.broadcast-option { min-width: 0; min-height: 370px; padding: 8px 18px 0; display: flex; flex-direction: column; border-right: 1px dotted #454d5b; }
.broadcast-option:first-child { padding-left: 0; }
.broadcast-option:last-child { padding-right: 0; border-right: 0; }
.broadcast-option h3 { margin: 0 0 12px; font: 400 23px/.9 "Pikselator Wide", "Upheaval", monospace; }
.broadcast-option .dialog-copy { margin: 0 0 16px; }
.broadcast-option #obs-url { margin-top: auto; }
.broadcast-option #screen-start, .broadcast-option > button { align-self: center; margin-top: auto; }
.broadcast-option .copy-row { flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
.broadcast-option .copy-row code { flex: 1 0 100%; max-width: 100%; }
.broadcast-option button:disabled { color: #7f8894; background: #171a20; border-color: #363d49; cursor: default; }
.app-code-row { display: flex; justify-content: center; align-items: stretch; gap: 8px; margin: auto 0 10px; }
.app-pair-code { display: block; width: 112px; padding: 8px 6px; color: #f3f0e8; background: #090b10; border: 1px dotted #62bd88; text-align: center; user-select: text; letter-spacing: .12em; font: 400 34px/1 "Pikselator Wide", "Upheaval", monospace; }
.app-download { display: inline-block; align-self: center; margin: 0 0 12px; padding: 10px 12px; text-decoration: none; }
.home-footer { margin-top: 30px; color: var(--muted); text-align: center; line-height: 1.4; font-size: 15px; }
.app-download.download-disabled { color: #707782; background: #171a20; border-color: #343944; cursor: not-allowed; opacity: .65; }
#app-code-status { min-height: 20px; margin: 0 0 10px; text-align: center; }
.copy-row { display: flex; gap: 8px; margin: 8px 0 15px; }
.copy-row code { flex: 1; min-width: 0; overflow: auto; white-space: nowrap; padding: 10px; color: #dce2e8; background: #080a0e; border: 1px dotted #343b47; font: 400 13px/1.3 "Monocraft", "Modern DOS", monospace; }
.copy-row button { flex: none; }
.share-password-row { display: flex; gap: 8px; }
.share-password-row input { min-width: 0; }
.info-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 15px 0; border-top: 1px dotted #343b47; font-size: 16px; }
.info-grid span:nth-child(even) { font-weight: 700; }
.danger { color: #ff9ab5; box-shadow: none; }
.danger .icon { filter: brightness(0) saturate(100%) invert(76%) sepia(24%) saturate(1215%) hue-rotate(290deg) brightness(103%) contrast(102%); }
.room-actions #info-button { width: 38px; height: 38px; min-height: 38px; padding: 5px; background: #11141a; box-shadow: none; }
.room-actions #info-button .icon { opacity: .62; }
.room-actions #info-button:hover { background: #20242d; }
.room-actions #streams-badge .icon { filter: brightness(0) saturate(100%) invert(56%) sepia(92%) saturate(1717%) hue-rotate(310deg) brightness(101%) contrast(102%); }
.chat-form .icon-only { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 5px; flex: none; }
.hidden { display: none !important; }

@media (max-width: 760px) {
  .broadcast-options { grid-template-columns: 1fr; }
  .broadcast-option { min-height: 0; padding: 18px 0; border-right: 0; border-bottom: 1px dotted #454d5b; }
  .broadcast-option:first-child { padding-top: 0; }
  .broadcast-option:last-child { padding-bottom: 0; border-bottom: 0; }
  .broadcast-option #obs-url, .broadcast-option #screen-start, .broadcast-option > button { margin-top: 12px; }
}

@media (max-width: 900px) {
  .room-layout, .room.chat-collapsed .room-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 36px auto; gap: 0; }
  .watch-column { grid-row: 1; }
  .chat { grid-row: 3; }
  .room-layout .chat-collapse, .room.chat-collapsed .chat-collapse { position: static; grid-row: 2; justify-self: stretch; width: 100%; height: 36px; min-height: 36px; transform: none; opacity: 1; pointer-events: auto; border-left: 0; border-right: 0; }
  .room-layout .chat-collapse .icon { transform: rotate(90deg); }
  .room.chat-collapsed .chat-collapse .icon { transform: rotate(-90deg); }
  .room-actions button span { display: none; }
  .room-actions button, .room-actions #info-button { width: 40px; height: 40px; min-height: 40px; padding: 6px; }
  .room-actions { gap: 6px; }
  .stage { height: calc(100dvh - 80px); min-height: 310px; }
  .chat { height: 390px; min-height: 0; margin-top: 4px; }
  .room-top { min-height: 42px; }
  .room:not(.chat-collapsed) .room-layout { grid-template-rows: minmax(0, 7fr) 36px minmax(140px, 3fr); }
  .room.chat-collapsed .room-layout { grid-template-rows: minmax(0, 1fr) 36px; }
  .room.chat-collapsed .stage { height: 100%; }
  .room:not(.chat-collapsed) .stage, .room:not(.chat-collapsed) .chat { height: 100%; min-height: 0; margin-top: 0; }
  .streams-grid.has-focus .stream-card:not(.focused) { flex-basis: min(28%, 210px); }
}

@media (max-width: 600px) {
  .home { margin-top: 31px; }
  .panel { padding: 20px; }
  .room-top { display: block; padding: 3px 2px; }
  .room-actions { margin-top: 8px; }
  .room-title h1 { font-size: 20px; }
  .stage { width: calc(100% + 14px); height: 70dvh; min-height: 300px; margin-left: -7px; border-left: 0; border-right: 0; outline: 0; }
  .stage:has(.streams-grid[data-count="0"]), .stage:has(.streams-grid[data-count="1"]) { height: 56.25vw; min-height: 225px; }
  .streams-grid:not(.has-focus)[data-count="2"], .streams-grid:not(.has-focus)[data-count="3"], .streams-grid:not(.has-focus)[data-count="4"], .streams-grid:not(.has-focus)[data-count="5"], .streams-grid:not(.has-focus)[data-count="6"] { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(180px, 56vw); overflow-y: auto; }
  .streams-grid:not(.has-focus)[data-count="3"] .stream-card, .streams-grid:not(.has-focus)[data-count="4"] .stream-card, .streams-grid:not(.has-focus)[data-count="5"] .stream-card, .streams-grid:not(.has-focus)[data-count="6"] .stream-card { grid-column: 1; }
  .streams-grid.has-focus { grid-template-rows: minmax(0, 1fr) 105px; }
  .streams-grid.has-focus .stream-card:not(.focused) { flex-basis: min(42%, 180px); height: 105px; }
  .streams-grid.has-focus.hide-other-streams, .streams-grid.has-focus[data-count="1"] { grid-template-rows: minmax(0, 1fr); }
  .focus-tray-toggle { bottom: 115px; }
  .room .stage { width: 100%; margin: 0; }
  .room-actions { flex-wrap: wrap; }
}

.primary, .secondary, .icon-button { border: 1px dotted #454d5b; }
.primary { border-color: var(--pink-soft); }
.stream-foot .stop-stream { border-color: #d94a70; }
.stream-foot .focus-stream[aria-pressed="true"] { border-color: var(--pink-soft); }
.stream-card:fullscreen .stream-foot { bottom: calc(var(--media-y, 0px) + 7px); right: calc(var(--media-x, 0px) + 7px); }
@media (hover: none) {
  .stream-card.watching .stream-head, .stream-card .stream-foot,
  .stream-card:is(:hover, :focus-within) .stream-foot { opacity: 0; pointer-events: none; }
  .stream-card.touch-controls .stream-head, .stream-card.touch-controls .stream-foot,
  .stream-card:has(:focus-visible) .stream-head, .stream-card:has(:focus-visible) .stream-foot,
  .stream-card:has(.stream-viewers[open]) .stream-head { opacity: 1; pointer-events: auto; }
  .stage .focus-tray-toggle { opacity: 0; pointer-events: none; }
  .stage.touch-controls .focus-tray-toggle, .stage:has(:focus-visible) .focus-tray-toggle { opacity: 1; pointer-events: auto; }
  .volume-wrap:focus-within .volume-slider { width: 52px; opacity: 1; }
}
.global-counts { color: var(--muted); margin: 10px 0 24px; }
.admin-page { width: min(1100px, calc(100% - 30px)); }
.admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.admin-actions p { margin-right: auto; }
.admin-room { margin: 16px 0; overflow-wrap: anywhere; }
.admin-room li { margin: 8px 0; }
.admin-app { margin-top: 20px; }
.admin-app h2 { margin-top: 0; }
.admin-app-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-app-actions .app-download { margin: 0; }
.stream-message strong:empty { display: none; }

.home > h1, .global-counts { text-align: center; }
.typing-status { min-height: 24px; padding: 3px 12px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.admin-usage, .admin-limited { margin-bottom: 20px; }
.usage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.usage-grid > div { min-width: 0; padding: 13px; border: 1px dotted var(--line); background: #090b10; }
.usage-grid span { display: block; color: var(--muted); font-size: 14px; }
.usage-grid strong { display: block; font-size: 20px; font-weight: normal; overflow-wrap: anywhere; }
.usage-toolbar, .usage-periods, .usage-date { display: flex; align-items: center; gap: 7px; }
.usage-toolbar { justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.usage-periods button[aria-pressed="true"] { border-color: var(--pink-soft); color: var(--pink-soft); background: #341221; }
.usage-date input { width: 160px; height: 40px; padding: 5px 8px; }
.usage-date button { width: 40px; height: 40px; min-height: 40px; padding: 6px; }
#usage-next .icon { transform: rotate(180deg); }
.usage-charts { display: grid; gap: 14px; margin-top: 18px; }
.usage-chart { min-width: 0; padding: 14px; background: #090b10; border: 1px dotted var(--line); overflow-x: auto; }
.usage-chart h3 { margin: 0 0 10px; font: 400 22px/1 "Pikselator Wide", "Upheaval", monospace; }
.usage-chart svg { display: block; width: 100%; min-width: 560px; height: auto; }
.usage-chart svg text { fill: var(--muted); font: 14px "Monocraft", "Modern DOS", monospace; }
.chart-guide { stroke: #343a47; stroke-dasharray: 2 4; }
.chart-legend { display: flex; gap: 20px; margin: 4px 0 12px; font-size: 14px; }
.usage-chart summary { cursor: pointer; color: var(--muted); }
.usage-chart table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.usage-chart th, .usage-chart td { padding: 6px; border-bottom: 1px dotted var(--line); text-align: left; white-space: nowrap; }
.usage-grid meter { width: 100%; height: 10px; accent-color: var(--pink-soft); }
.usage-grid meter::-webkit-meter-bar { border: 0; border-radius: 0; background: #252a33; }
.usage-grid meter::-webkit-meter-optimum-value { background: var(--pink-soft); }
.usage-grid meter::-moz-meter-bar { background: var(--pink-soft); }
.limited-toggle { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.limited-toggle input { width: 20px; height: 20px; accent-color: var(--pink-soft); }
@media (max-width: 600px) { .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* SwiftUI design units. At 1999 × 976, one unit is one CSS pixel. */
@font-face { font-family: Monocraft; src: url('/stream-assets/fonts/Monocraft.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Monocraft; src: url('/stream-assets/fonts/Monocraft-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pikselator Wide'; src: local('Pikselator Wide'), local('PikselatorWide'); font-weight: 400; }
:root {
  --u: min(calc(100vw / 1999), calc(100dvh / 976));
  --canvas: rgb(4% 4% 5%); --panel: rgb(6% 7% 9%); --input: rgb(4% 4% 5%);
  --button: rgb(10% 11% 14%); --line: rgb(22% 24% 29%);
  --ink: rgb(88% 87% 90%); --stage-label: rgb(22% 24% 29% / .5); --label: rgb(59% 61% 68%);
  --pink-soft: rgb(100% 21% 41%); --icon-ink: rgb(95% 94% 91%);
  --room-inset: calc(28 * var(--u)); --room-heading: rgb(88% 87% 90% / .8); --chat-font-size: max(14px, calc(16 * var(--u)));
  --stroke: inset 0 0 0 calc(.5 * var(--u)) var(--line);
}
.beta-home { width: min(calc(722 * var(--u)), calc(100% - 32px)); margin: 0 auto; padding-top: max(24px, calc((100dvh - 576 * var(--u)) / 2)); }
.beta-home .panel { padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(80 * var(--u)); border: 0; box-shadow: var(--stroke); }
.beta-home h1 { text-align: center; font: 400 calc(40 * var(--u))/calc(28 * var(--u)) 'Pikselator Wide', Upheaval, monospace; margin: 0 0 calc(40 * var(--u)); }
.beta-home .field { margin: 0 0 calc(26 * var(--u)); }
.beta-home .field label { font: 600 calc(20 * var(--u))/calc(29 * var(--u)) Monocraft, monospace; margin: 0 0 calc(7 * var(--u)); color: var(--label); }
.beta-home .field input { height: calc(54 * var(--u)); min-height: 0; font-size: calc(20 * var(--u)); background: var(--input); border: 0; box-shadow: var(--stroke); }
.beta-home input:focus-visible, .chat-form textarea:focus-visible { outline: 1px solid var(--label); outline-offset: -1px; }
.beta-home .beta-code { display: grid; grid-template-columns: minmax(0, 1fr) calc(54 * var(--u)); gap: calc(15 * var(--u)); align-items: end; }
.beta-home .beta-code .field { margin: 0; }
.beta-code .password-toggle { width: calc(54 * var(--u)); height: 100%; top: 0; right: 0; display: grid; place-items: center; }
.beta-code .password-toggle .icon { opacity: .65; }
.beta-code #generate-code { width: calc(54 * var(--u)); height: calc(54 * var(--u)); min-height: 0; background: var(--button); border: 0; box-shadow: var(--stroke); }
#generate-code .icon { opacity: .5; }
.beta-home #creation-password-field:not(.hidden) { margin: calc(26 * var(--u)) 0 0; }
.beta-home .beta-create, .watch-stream {
  display: flex; width: max-content; max-width: 100%; min-height: calc(54 * var(--u)); gap: calc(10 * var(--u));
  font: 600 calc(20 * var(--u))/1.4 Monocraft, monospace; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u));
  color: var(--pink-soft); background: rgb(49% 10% 20% / .5); border: 0;
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--pink-soft);
}
.beta-home .beta-create { width: calc(256 * var(--u)); justify-content: flex-start; white-space: nowrap; margin: calc(40 * var(--u)) auto 0; }
.watch-stream { padding: calc(12 * var(--u)); min-height: 0; max-width: calc(100% - 16px); }
.watch-stream span { min-width: 0; overflow-wrap: anywhere; }
.beta-create .icon, .watch-stream .icon { flex: none; }
.beta-create:hover, .watch-stream:hover { background: rgb(49% 10% 20% / .65); }
.room-layout { grid-template-columns: minmax(0, 1fr) calc(306 * var(--u)); gap: calc(12 * var(--u)); }
.room-top { position: absolute; z-index: 13; top: calc(28 * var(--u)); left: var(--room-inset); right: var(--room-inset); padding: 0; pointer-events: none; align-items: flex-start; margin: 0; }
.room-title h1 { font-size: calc(40 * var(--u)); line-height: calc(28 * var(--u)); color: var(--room-heading); }
.beta-counts { display: flex; gap: calc(14 * var(--u)); margin-top: calc(6 * var(--u)); }
.beta-counts .people-badge { gap: calc(5 * var(--u)); font: 600 calc(15 * var(--u))/1 Monocraft, monospace; color: rgb(88% 87% 90% / .8); }
.beta-counts #streams-badge .people-badge { color: rgb(100% 21% 41% / .8); }
.count-category { position: relative; }
.room:not(.room-idle) .count-category { pointer-events: auto; }
.count-category summary { cursor: pointer; list-style: none; }
.count-category summary::-webkit-details-marker { display: none; }
.count-category summary[inert] { cursor: default; }
.count-list { position: absolute; z-index: 1; left: 0; top: 100%; margin: 0; padding: 8px 10px; min-width: 120px; width: max-content; max-width: min(260px, 60vw); max-height: 180px; overflow: auto; overflow-wrap: anywhere; list-style: none; background: var(--panel); color: var(--ink); box-shadow: var(--stroke); font: 400 calc(14 * var(--u))/1.5 Monocraft, monospace; }
.stream-viewers summary[inert] { cursor: default; }
.room .icon, .beta-home button .icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.room-title { opacity: 0; }
.room:not(.room-idle) .room-title { opacity: 1; }
.empty-stage strong { color: var(--room-heading); }
.stage > .room-actions { position: absolute; z-index: 13; right: calc(28 * var(--u)); bottom: calc(28 * var(--u));  }
.room-actions :is(#broadcast-button, #screen-stop) { display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); min-height: 0; padding: 0; border: 0; background: var(--panel); box-shadow: var(--stroke); }
.room-actions button:hover { background: var(--button); }
.room-actions { gap: 0; }
.room-actions #screen-stop { order: -1; background: rgb(49% 10% 20% / .5); }
.room-actions #screen-stop .icon { opacity: .75; }
.chat-collapse { right: calc(288 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-height: 0; padding: 0; background: var(--panel); border: 0; box-shadow: var(--stroke); }
.chat-collapse .icon { opacity: .5; }
.chat-form { min-height: calc(60 * var(--u)); padding: calc(10 * var(--u)) calc(9 * var(--u)); gap: calc(2 * var(--u)); border: 0; box-shadow: var(--stroke); }
.chat-form textarea { min-height: calc(40 * var(--u)); height: calc(40 * var(--u)); font: 400 var(--chat-font-size)/1.5 Monocraft, monospace; padding: calc(10 * var(--u)); background: var(--input); border: 0; box-shadow: var(--stroke); }
.chat-form textarea::placeholder { color: var(--line); opacity: 1; }
.chat-form .icon-only { display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); min-width: 0; min-height: 0; padding: 0; background: var(--button); border: 0; box-shadow: var(--stroke); }
.chat-form button .icon { opacity: .5; }
.typing-status:empty { min-height: 0; padding: 0; }
.streams-grid:not(.has-focus) .stream-card:first-child .stream-head,
.streams-grid .stream-card.focused .stream-head {
  top: max(calc(var(--room-inset) + var(--room-header-height, 50px) + 14 * var(--u)), calc(var(--media-y, 0px) + 7px));
}
.stream-card .stream-foot { right: calc(var(--media-x, 0px) + 28 * var(--u)); bottom: calc(var(--media-y, 0px) + 28 * var(--u)); max-width: calc(var(--media-width, 100%) - 56 * var(--u)); }
.stream-card:not(.watching) .stream-foot { right: calc(28 * var(--u)); bottom: calc(28 * var(--u)); max-width: calc(100% - 56 * var(--u)); }
.stream-foot-right { padding: 0; gap: 0; border: 0; background: transparent; }
.stream-foot .icon-button { display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); min-height: 0; border: 0; padding: 0; background: var(--panel); box-shadow: var(--stroke); }
.stream-foot .icon-button:hover { background: var(--button); }
.stream-foot .stop-stream .icon { filter: none; }
.stream-foot .volume-wrap { position: relative; }
@media (max-width: 900px) {
  :root { --u: 1px; --room-inset: 10px; }
  .beta-home { padding-top: max(24px, calc((100dvh - 604px) / 2)); }
  .room-layout { grid-template-columns: 1fr; gap: 0; }
  .room-top { display: flex; top: 10px; }
  .room-title h1 { font-size: 26px; }
  .stream-card .stream-foot, .stream-card:not(.watching) .stream-foot { right: calc(var(--media-x, 0px) + 6px); bottom: calc(var(--media-y, 0px) + 6px); max-width: calc(var(--media-width, 100%) - 12px); }
  .stream-foot .icon-button { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  .beta-home .panel { padding: 28px 18px 36px; }
  .beta-home h1 { margin-bottom: 28px; }
  .beta-home .field label { font-size: 16px; }
  .beta-home .beta-create { font-size: 17px; margin-top: 24px; }
}

@media (max-width: 900px) {
  .stage > .room-actions { right: 6px; bottom: 6px; }
  .room-actions :is(#broadcast-button, #screen-stop) { width: 44px; height: 44px; }
}
.room :is(.room-title, .chat-collapse, .stream-head, .stream-foot, .stage > .room-actions, .focus-tray-toggle) {
  transition: opacity .3s ease;
}
.room:not(.room-idle) .room-layout .chat-collapse,
.room:not(.room-idle) .stream-card:fullscreen .stream-foot,
.room:not(.room-idle) .stream-card:has(.room-actions) .stream-foot { opacity: 1; pointer-events: auto; }
.room.room-idle :is(.room-title, .room-layout .chat-collapse, .stream-card .stream-head, .stream-card .stream-foot, .stage > .room-actions, .focus-tray-toggle) {
  opacity: 0;
  pointer-events: none;
}
.room.room-idle .stream-card:fullscreen { cursor: none; }

.room-description { margin: 6px 0 0; color: rgb(88% 87% 90% / .72); font-size: calc(12 * var(--u)); }
.messages { font: 400 var(--chat-font-size)/1.5 Monocraft, monospace; }
.message-time { font-size: inherit; }
.stream-head { left: max(var(--room-inset), calc(var(--media-x, 0px) + 7px)); background: rgb(6% 7% 9% / .72); border: 0; box-shadow: var(--stroke); }
.stream-name strong { font: 400 calc(20 * var(--u))/1.1 "Pikselator Wide", Upheaval, monospace; color: var(--ink); }
.stream-label { font: 400 calc(12 * var(--u))/1.5 Monocraft, monospace; color: var(--label); }
.stream-label:empty { display: none; }
.stream-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .4; filter: blur(calc(4 * var(--u))); clip-path: inset(0); pointer-events: none; }