:root { --bg: #f4f5f7; --fg: #15171c; --tile: #d9dce2; --btn: #fff; --line: #c3c7cf; --accent: #2f6fde; --danger: #c93636; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #111318; --fg: #e8eaee; --tile: #1e2128; --btn: #262a33; --line: #383d48; --accent: #6c9cf0; --danger: #e05c5c; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui, sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; padding: .6em 1.1em; border-radius: .6em; border: 1px solid var(--line); background: var(--btn); color: var(--fg); cursor: pointer; }
button[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#lobby { max-width: 26rem; margin: 0 auto; padding: 15vh 16px 0; display: grid; gap: 1rem; }
#lobby h1 { margin: 0; }
.note { opacity: .75; margin: 0; }
#join { display: grid; gap: .6rem; }
#join label { display: grid; gap: .3rem; }
input { font: inherit; padding: .6em; border-radius: .6em; border: 1px solid var(--line); background: var(--btn); color: var(--fg); }
#err { color: var(--danger); min-height: 1.4em; margin: 0; }
#call { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
#status { margin: 0; padding: 10px 16px 0; text-align: center; opacity: .8; }
#grid { display: grid; gap: 8px; padding: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-content: center; overflow: auto; }
.tile { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--tile); border-radius: 10px; overflow: hidden; }
.tile video, .tile canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
#self video { transform: scaleX(-1); }
.tile figcaption { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: #000a; color: #fff; font-size: .85rem; }
.tile[data-path]::after { content: attr(data-path); position: absolute; right: 8px; top: 8px; padding: 1px 6px; border-radius: 6px; background: #000a; color: #fff; font-size: .75rem; }
.tile.off canvas { visibility: hidden; }
nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }