:root{
  --bg:#0f1115;
  --panel:#141924;
  --panel-elev:#171d2a;
  --text:#e7eaf1;
  --muted:#9aa3b2;
  --accent:#7c9cff;
  --border:#283042;
  --ok:#4ade80;
  --warn:#fbbf24;
  --danger:#fb7185;
}

.logo-text {
  font-family: "Cinzel", serif;
  font-weight: bold;
  font-size: 35px;
  background: linear-gradient(
    90deg,
    #F0AA41 0%,
    #F3B847 20%,
    #F7C64D 40%,
    #FBD453 60%,
    #FFE359 80%,
    #F0AA41 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0e1118 0%, #0b0e14 100%);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
}

/* Header */
.lt-header{
  padding:14px 18px;
  border-bottom:1px solid rgba(40,48,66,.6);
  background:radial-gradient(1200px 600px at 10% -20%, rgba(124,156,255,.12), transparent 55%), #0f1320;
}
.lt-header h1{
  margin:0;
  font-size:18px;
  letter-spacing:.3px;
  color:#dfe6ff;
}

/* Utilities / gating */
.hidden{ display:none !important; }
body:not(.joined) #table{ display:none !important; }  /* hide stage before join */
body.joined #table{ display:grid; }

/* Panels */
.panel{
  max-width:780px;
  margin:24px auto;
  background:var(--panel);
  border:1px solid var(--border);
  padding:16px;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.err{color:#ff8686;min-height:1.2em}
.join-status,
.call-status{
  border:1px solid rgba(124,156,255,.28);
  background:rgba(15,19,32,.82);
  color:var(--text);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.join-status{
  margin-top:12px;
  min-height:1.2em;
  padding:10px 12px;
}
.call-status{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  width:min(92%, 540px);
  padding:10px 14px;
  text-align:center;
  backdrop-filter: blur(6px);
}
.join-status[data-tone="info"],
.call-status[data-tone="info"]{ border-color:rgba(124,156,255,.34); color:#dfe6ff; }
.join-status[data-tone="success"],
.call-status[data-tone="success"]{ border-color:rgba(74,222,128,.4); color:#d7ffe5; }
.join-status[data-tone="warn"],
.call-status[data-tone="warn"]{ border-color:rgba(251,191,36,.45); color:#ffe8b3; }
.join-status[data-tone="error"],
.call-status[data-tone="error"]{ border-color:rgba(251,113,133,.5); color:#ffd3da; }

/* Lobby form */
#lobbyForm label{display:block;margin:10px 0}
#lobbyForm input{
  width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);
  background:#0b0d14;color:var(--text);outline:none
}
.checkbox-row{
  display:flex !important;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.checkbox-row input{
  width:auto !important;
  margin:0;
}
#lobbyForm input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,156,255,.15)
}
#lobbyForm .row{display:flex;gap:8px;margin-top:8px}
button{
  cursor:pointer;padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:linear-gradient(180deg,#1b2132,#141a28);color:var(--text);
  transition:.15s transform ease, .15s background ease
}
button:hover{transform:translateY(-1px); background:linear-gradient(180deg,#21283b,#161d2c)}
button:active{transform:translateY(0) scale(.98)}
button:disabled{
  cursor:progress;
  opacity:.65;
  transform:none;
}

.lobby-list{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(124,156,255,.12);
}
.lobby-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.lobby-list-head h3{
  margin:0;
  font-size:15px;
}
.active-lobbies{
  display:grid;
  gap:10px;
}
.lobby-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:12px;
  border:1px solid rgba(124,156,255,.18);
  border-radius:12px;
  background:rgba(11,13,20,.72);
}
.lobby-card strong{
  display:block;
  margin-bottom:4px;
}
.lobby-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:13px;
}
.lobby-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.empty-lobbies{
  color:var(--muted);
  padding:12px;
  border:1px dashed rgba(124,156,255,.18);
  border-radius:12px;
}

/* Stage layout (centered, wide) */
.table{
  width:100%;
  margin:0 auto;
  max-width: clamp(1100px, 92vw, 1800px);
  display:grid;
  grid-template-columns: minmax(0,1fr) clamp(320px, 24vw, 380px);
  gap:18px;
  padding:16px;
  align-items:start;
}

/* Video area */
.video-wrap{position:relative;width:100%}
.remote-area{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#0a0c11;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}

/* Fixed 16:9 frame for remote video */
.remote-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;       /* wide rectangle */
  max-height:90vh;
  background:#000;
}
.remote-frame > video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
body.spectating #remoteVideo{
  display:none;
}
body.spectating .remote-frame{
  aspect-ratio:16 / 11;
}
body.spectating .remote-frame.spectator-focus-active{
  aspect-ratio:16 / 9;
}
.spectator-grid{
  position:absolute;
  inset:0;
  display:none;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  padding:14px;
  background:#06080d;
}
body.spectating .spectator-grid{
  display:grid;
}
.spectator-slot{
  position:relative;
  min-width:0;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(16,22,35,.92), rgba(8,12,20,.96));
  border:1px solid rgba(124,156,255,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}
.spectator-slot:hover{
  border-color:rgba(255,215,122,.38);
  transform:translateY(-1px);
}
.spectator-slot:focus-visible{
  outline:2px solid rgba(255,215,122,.6);
  outline-offset:2px;
}
.spectator-slot video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}
.spectator-label{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(10,14,24,.72);
  border:1px solid rgba(124,156,255,.22);
  color:#eef3ff;
  font-size:12px;
  letter-spacing:.18px;
}
.spectator-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.18px;
}
.spectator-slot.has-video .spectator-empty{
  display:none;
}
.spectator-grid[data-view="split"] .spectator-slot{
  min-height:0;
}
body.spectating .spectator-grid[data-view^="focus-"]{
  display:block;
  padding:0;
}
.spectator-grid[data-view^="focus-"] .spectator-slot{
  position:absolute;
}
.spectator-grid[data-view="focus-host"] .spectator-slot[data-seat="host"],
.spectator-grid[data-view="focus-guest"] .spectator-slot[data-seat="guest"]{
  inset:12px;
  z-index:1;
  cursor:zoom-out;
  transform:none;
}
.spectator-grid[data-view="focus-host"] .spectator-slot[data-seat="guest"],
.spectator-grid[data-view="focus-guest"] .spectator-slot[data-seat="host"]{
  right:18px;
  bottom:18px;
  width:clamp(180px, 25%, 320px);
  aspect-ratio:16 / 9;
  z-index:2;
  box-shadow:0 18px 36px rgba(0,0,0,.42);
}
.spectator-grid[data-view="focus-host"] .spectator-slot[data-seat="host"],
.spectator-grid[data-view="focus-guest"] .spectator-slot[data-seat="guest"]{
  border-color:rgba(255,215,122,.44);
  box-shadow:0 22px 46px rgba(0,0,0,.34);
}
.spectator-grid[data-view="focus-host"] .spectator-slot[data-seat="guest"] .spectator-label,
.spectator-grid[data-view="focus-guest"] .spectator-slot[data-seat="host"] .spectator-label{
  font-size:11px;
  padding:5px 9px;
}

/* Lore overlay (top-left) */
.scorebar{position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:10px; z-index:3}
.scorebar h4{width:60px; margin:0; font-size:12px; color:var(--muted); letter-spacing:.2px}
.score{
  display:flex; align-items:center; gap:6px;
  background:rgba(20,26,40,.65);
  border:1px solid rgba(124,156,255,.25);
  padding:6px 8px; border-radius:10px;
  backdrop-filter: blur(6px);
}
.score .btns{display:flex; align-items:center; gap:6px}
.score input{
  width:62px; text-align:center; padding:6px; border-radius:8px;
  border:1px solid var(--border); background:#0b0d14; color:var(--text);
}
.score button{padding:6px 10px}

/* Small toolbar (top-right) */
.toolbar.top-right{position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:8px; z-index:3;}
.toolbar.top-right h4{width:105px; margin:0; font-size:12px; color:var(--muted); letter-spacing:.2px}

/* Local thumbnail — hidden until joined, then floats above video */
#localThumb{ display:none; }
body.joined #localThumb{ display:block; }
body.spectating #localThumb{ display:none !important; }
#localThumb{
  position:absolute; right:16px; bottom:16px;
  width:26%; max-width:360px; min-width:120px; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  user-select:none; touch-action:none; cursor:move; z-index:30;
}
#localThumb video{width:100%; height:100%; object-fit:cover}
#localThumb video.flip-h { transform: scaleX(-1); }
#localThumb video.flip-v { transform: scaleY(-1); }
#localThumb video.flip-h.flip-v { transform: scaleX(-1) scaleY(-1); }
#localThumb .thumb-ui{position:absolute; top:6px; right:6px; display:flex; gap:6px; z-index:11}
#localThumb .thumb-btn{
  background:rgba(17,17,17,.7); color:#fff; border:1px solid rgba(255,255,255,.15);
  border-radius:8px; padding:2px 8px; line-height:1.2;
}
#localThumb.min{width:140px; opacity:.92}
#localThumb.cam-off::after{
  content:"Camera off"; position:absolute; inset:0; background:rgba(0,0,0,.65);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; letter-spacing:.3px;
}
#localThumb.mic-off .thumb-ui::before{
  content:"Mic off"; position:absolute; left:8px; top:8px; background:rgba(17,17,17,.75);
  color:#fff; font-size:12px; padding:2px 6px; border-radius:6px; border:1px solid rgba(255,255,255,.15);
}

/* Bottom toolbar */
#bottomBar{
  margin-top:10px;
  display:grid; grid-template-columns: 1.2fr 1fr auto auto auto; gap:10px;
  align-items:center; padding:10px;
  background:linear-gradient(180deg, rgba(18,24,38,.65), rgba(14,18,28,.65));
  border:1px solid var(--border); border-radius:12px;
  backdrop-filter: blur(6px);
}
#bottomBar .field{display:flex; gap:8px; align-items:center}
#bottomBar label{font-size:12px; color:var(--muted)}
#bottomBar select{
  width:100%; padding:8px; border-radius:10px; border:1px solid var(--border);
  background:#0b0d14; color:var(--text); outline:none
}
#bottomBar .actions{display:flex; gap:8px; justify-self:end}
#bottomBar .toggles{display:flex; gap:8px; justify-self:end}
body.spectating #bottomBar .field,
body.spectating #bottomBar .actions{
  opacity:.45;
  pointer-events:none;
}

@media (max-width: 900px){
  body.spectating .remote-frame{
    aspect-ratio:16 / 12;
  }
  .spectator-grid{
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr;
  }
  .spectator-grid[data-view="focus-host"] .spectator-slot[data-seat="guest"],
  .spectator-grid[data-view="focus-guest"] .spectator-slot[data-seat="host"]{
    width:clamp(140px, 38%, 220px);
  }
}

/* Sidebar (scan only) */
.side{
  background:var(--panel-elev);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.side h3{margin:6px 0 10px; font-size:14px; color:#d6dcff; letter-spacing:.25px}
.side .scan-card{
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, #151c2b, #101522);
  border:1px dashed rgba(124,156,255,.35);
  border-radius:12px; padding:12px;
}
#scanLocal{background:linear-gradient(180deg,#2a3560,#202846); border-color:#2b3550}
#scanResult{min-height:1.2em; color:var(--muted)}
.scan-preview{display:flex; gap:8px; align-items:center; margin-top:4px}
.scan-preview .title{font-weight:600}
.scan-preview img{
  width:300px;aspect-ratio:63/88; object-fit:cover; border-radius:8px; border:1px solid var(--border);
  background:#0b0d14;
}

/* Responsive */
@media (max-width: 1024px){
  .table{grid-template-columns: 1fr}
  #bottomBar{grid-template-columns: 1fr}
  #localThumb{width:34%}
}