:root { --bg:#0b1220; --card:#121a2b; --text:#e7ecf7; --muted:#a9b3c7; --accent:#4da3ff; --danger:#ff6b6b; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
html,body{height:100%;}
.container{max-width:1000px;margin:0 auto;padding:16px 16px calc(72px + env(safe-area-inset-bottom,0));background:var(--bg);}
.row{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.card{flex:1;min-width:300px;padding:16px;background:var(--card);border-radius:16px;border:1px solid #222f49;box-shadow:0 10px 24px rgba(0,0,0,.25)}
h1,h2,h3{margin:0 0 10px}
label{font-weight:600}
input,button,select,textarea{padding:12px;border-radius:12px;border:1px solid #26324a;background:#0c1424;color:var(--text);font-size:16px}
button{background:var(--accent);border:none;color:#081120;font-weight:700;cursor:pointer;min-height:44px;border-radius:12px}
button.secondary{background:#20304f;color:var(--text)}
button.danger{background:var(--danger);color:#200}
button:active{transform:translateY(1px)}
.list{display:flex;flex-direction:column;gap:8px;max-height:40vh;overflow:auto;-webkit-overflow-scrolling:touch}
.user{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #2a3858;border-radius:12px}
video{width:100%;background:#000;border-radius:12px;display:block;object-fit:cover}
small.muted{color:var(--muted)}
hr{border-color:#22324f}
.hidden{display:none !important}
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid #2a3858;background:#0c1424;margin:8px 0}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{width:min(92vw,360px);background:var(--card);border:1px solid #22324f;border-radius:16px;padding:16px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.controls{position:fixed;left:0;right:0;bottom:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0));background:rgba(10,16,30,.85);backdrop-filter:blur(6px);border-top:1px solid #1d2942;display:flex;gap:10px;justify-content:space-between;z-index:999}
.controls button{flex:1}
@media (max-width: 768px){
  .row{flex-direction:column}
  .card{min-width:100%}
  #localVideo{aspect-ratio: 3/4}
  #remotes video{aspect-ratio: 16/9}
}
@media (min-width: 769px){
  #localVideo{aspect-ratio: 16/9}
  #remotes video{aspect-ratio: 16/9}
}
/* Fullscreen CSS fallback */
.fs-sim-open { overflow: hidden; }
video.fs-sim {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  object-fit: contain;
  z-index: 2000;
}
#mainRemote {
  display:block;
  background:#000;
  object-fit: contain;              /* preserve ratio inside the box */
  max-height: calc(100svh - 220px); /* keep controls/header space */
  max-width: 100%;                  /* don't overflow horizontally */
  width: auto;                      /* <-- don't force stretch on portrait */
  height: auto;                     /* natural height, scaled by max-height */
  margin: 0 auto;                   /* center horizontally when narrower */
}