: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.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, #signin { display: grid; gap: .6rem; }
#join label, #signin label { display: grid; gap: .3rem; }
button.link { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; }
#host { justify-self: center; margin-top: 6px; }
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: --w is set by app.js `layout` so that every tile fits the window. */
#grid { grid-row: 2; min-height: 0; position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; justify-content: center; align-content: center; overflow: hidden; }
.tile { position: relative; margin: 0; flex: 0 0 auto; width: var(--w, 100%); aspect-ratio: 16 / 9; background: var(--tile); border-radius: 10px; overflow: hidden; cursor: pointer; }
/* Spotlight: one tile fills the stage, the rest sit in a strip along the bottom. */
#grid[data-layout="spotlight"] { flex-wrap: nowrap; align-items: flex-end; align-content: normal; justify-content: safe center; overflow-x: auto; }
#grid[data-layout="spotlight"] .tile { width: auto; height: 110px; }
#grid[data-layout="spotlight"] .tile.big { position: absolute; inset: 8px 8px var(--strip, 8px); width: auto; height: auto; aspect-ratio: auto; }
#grid #self[data-place="corner"] { position: fixed; z-index: 1; right: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); width: min(30vw, 220px); height: auto; aspect-ratio: 16 / 9; box-shadow: 0 4px 16px #0008; }
#grid #self[data-place="hidden"] { display: none; }
.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, .tile.off video { visibility: hidden; }
.tile.off::before { content: 'Camera off'; position: absolute; inset: 0; display: grid; place-items: center; opacity: .6; font-size: .9rem; }
nav { grid-row: 3; justify-self: center; display: flex; gap: 14px; margin: 4px 16px calc(12px + env(safe-area-inset-bottom)); padding: 10px 14px; border-radius: 999px; background: #000c; }
nav button { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #ffffff26; color: #fff; transition: background .15s, color .15s; }
nav button:hover { background: #ffffff40; }
nav button[aria-pressed="false"] { background: #fff; color: #15171c; }
nav button.danger { background: var(--danger); }
nav button.danger:hover { background: #c93636; }
nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
nav svg .fill { fill: currentColor; stroke: none; }
nav button[aria-pressed="false"] .on, nav button:not([aria-pressed="false"]) .off { display: none; }
.sprite { position: absolute; width: 0; height: 0; }
.tile .more { position: absolute; left: 6px; top: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #000a; color: #fff; font-size: 1.1rem; line-height: 1; }
.tile.hidden-by-me canvas { visibility: hidden; }
.tile.hidden-by-me::before { content: 'Hidden for you'; position: absolute; inset: 0; display: grid; place-items: center; opacity: .6; font-size: .9rem; }
#peer-menu { margin: 0; inset: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--btn); color: var(--fg); box-shadow: 0 8px 24px #0006; }
#peer-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; }
#peer-menu button:hover { background: var(--line); }
#report { max-width: min(30rem, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 12px; background: var(--btn); color: var(--fg); }
#report form { display: grid; gap: .7rem; }
#report label { display: grid; gap: .3rem; }
#report h2 { margin: 0; font-size: 1.15rem; }
#report select, #report textarea { font: inherit; padding: .5em; border-radius: .5em; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
#report .actions { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 420px) { nav { gap: 10px; } nav button { width: 48px; height: 48px; } }
#layouts { margin: 0 auto; inset: auto 0 calc(100px + env(safe-area-inset-bottom)); padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--btn); color: var(--fg); box-shadow: 0 8px 24px #0006; }
#layouts fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
#layouts fieldset + fieldset { margin-top: 12px; }
#layouts legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
#layouts label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.doc { max-width: 42rem; margin: 0 auto; padding: 32px 16px 64px; }
.doc h2 { margin-top: 1.6em; font-size: 1.15rem; }
.doc li { margin: .4em 0; }
.doc a { color: var(--accent); }
#lobby a { color: var(--accent); }