@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Bebas+Neue&family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --red:#FF2E63;
  --mango:#FF8C1A;
  --teal:#00C2B2;
  --gold:#FFC93C;
  --gray:#f4f4f4;
  --line:#e5e5e5;
  --text-gray:#666666;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', sans-serif;
  color:var(--white);
  background:var(--black);
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
h1,h2,.display{font-family:'Bungee', sans-serif; letter-spacing:0.5px; text-transform:uppercase;}
h3,h4{font-family:'Bebas Neue', sans-serif; letter-spacing:0.5px; text-transform:uppercase;}
.container{max-width:1280px; margin:0 auto; padding:0 24px;}

.btn{
  display:inline-block; padding:12px 20px; border:1px solid var(--white); background:transparent;
  color:var(--white); font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; transition:0.2s; border-radius:2px;
}
.btn:hover{background:var(--white); color:var(--black);}
.btn-red{background:var(--red); border-color:var(--red); color:var(--white);}
.btn-red:hover{background:var(--white); color:var(--red);}
.btn-outline{background:transparent; color:var(--white);}
.btn-outline:hover{background:var(--white); color:var(--black);}
.btn:disabled{opacity:0.4; cursor:not-allowed;}
.btn:disabled:hover{background:inherit; color:inherit;}

header.live-header{
  border-bottom:1px solid #262626; padding:18px 0; position:sticky; top:0; background:var(--black); z-index:50;
}
.live-header .nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.logo{font-family:'Bungee', sans-serif; font-size:20px; line-height:1.1; text-transform:uppercase;}
.logo .red{color:var(--red);}
.live-header .back-link{font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#999;}
.live-header .back-link:hover{color:var(--teal);}

.section{padding:48px 0;}
.eyebrow{
  font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--mango);
}
.section-head{margin-bottom:24px;}
.section-head h2{font-size:clamp(22px,3.2vw,32px); margin-top:10px;}

.status-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; padding:5px 12px; border-radius:2px;
}
.status-badge.scheduled{background:#333; color:#ccc;}
.status-badge.live{background:var(--red); color:var(--white);}
.status-badge.live::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--white); animation:pulse 1.4s infinite;}
.status-badge.ended{background:var(--teal); color:var(--black);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.25;}}

.empty-note{color:#777; font-size:13.5px;}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px;}
.media-card{
  display:block; background:#111; border:1px solid #262626; overflow:hidden; transition:0.2s;
}
.media-card:hover{border-color:var(--red);}
.media-card .thumb{
  aspect-ratio:16/9; background:linear-gradient(135deg,#1a0508,#0a0a0a 55%,#0a1f1c);
  display:flex; align-items:center; justify-content:center; font-size:32px; position:relative;
}
.media-card .badge-kind{
  position:absolute; top:10px; left:10px; background:#222; color:var(--white); font-size:10px; font-weight:800;
  letter-spacing:1px; padding:4px 8px; border-radius:2px; text-transform:uppercase;
}
.media-card .body{padding:14px 16px;}
.media-card .body h3{font-size:18px; color:var(--white);}
.media-card .body p{font-size:12px; color:#888; margin-top:4px; text-transform:uppercase; letter-spacing:0.5px;}

/* ---- Live room / host layout ---- */
.live-grid{display:grid; grid-template-columns:1.4fr 0.9fr; gap:24px; align-items:start;}
@media (max-width: 860px){ .live-grid{grid-template-columns:1fr;} }

.live-stage{
  position:relative; background:#000; border:1px solid #262626; aspect-ratio:16/9; overflow:hidden;
}
.live-stage video, .live-stage canvas{width:100%; height:100%; object-fit:cover; display:block; background:#000;}
.live-stage .waiting{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:20px; color:#bbb; font-size:13.5px; line-height:1.5; background:rgba(0,0,0,0.55);
}
.live-stage .waiting.overlay-error{color:var(--mango); font-weight:700;}

.stage-controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px;}
#filter-select{
  background:#111; border:1px solid #333; color:var(--white); padding:11px 14px; font-size:11px;
  font-family:'Inter'; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; border-radius:2px;
  cursor:pointer;
}
#filter-select:hover, #filter-select:focus{border-color:var(--teal); outline:none;}
.hidden{display:none !important;}

.chat-panel{
  background:#111; border:1px solid #262626; display:flex; flex-direction:column; height:520px;
}
.chat-head{
  padding:14px 16px; border-bottom:1px solid #262626; font-family:'Bebas Neue'; letter-spacing:1px;
  font-size:16px; color:var(--gold);
}
.chat-messages{flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:8px;}
.chat-messages .msg{font-size:13px; line-height:1.4;}
.chat-messages .msg strong{color:var(--teal); margin-right:6px;}
.chat-input-row{display:flex; gap:8px; padding:12px 16px; border-top:1px solid #262626;}
.chat-input-row input{
  flex:1; background:#0a0a0a; border:1px solid #333; color:var(--white); padding:10px 12px;
  font-size:12px; border-radius:2px; font-family:'Inter';
}
.chat-input-row input::placeholder{color:#666;}

.camera-request-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:#111; border:1px solid var(--mango); padding:10px 14px; margin-bottom:8px; font-size:13px;
}
.camera-request-row .btn{padding:6px 12px; font-size:10px;}
.camera-request-row .actions{display:flex; gap:8px; flex-shrink:0;}
.camera-request-info{flex:1;}
.camera-preview-video{
  width:96px; height:72px; object-fit:cover; background:#000; border:1px solid var(--teal);
  border-radius:2px; flex-shrink:0;
}

.inline-field{display:flex; gap:10px;}
.inline-field input{
  flex:1; background:#0a0a0a; border:1px solid #333; color:var(--white); padding:12px; font-size:13px;
  border-radius:2px; font-family:'Inter';
}

#name-modal{position:fixed; inset:0; background:rgba(0,0,0,0.8); display:none; align-items:center; justify-content:center; z-index:200;}
#name-modal.open{display:flex;}
.name-modal-box{background:#111; border:1px solid var(--red); border-radius:4px; padding:32px; width:100%; max-width:360px;}
.name-modal-box h3{color:var(--white); font-size:22px; margin-bottom:6px;}
.name-modal-box p{color:#999; font-size:13px; margin-bottom:18px; line-height:1.5;}

.player-shell{background:#000; border:1px solid #262626;}
.player-shell video{width:100%; display:block; aspect-ratio:16/9; background:#000;}