:root{
  --bg: #131019;
  --bg-elev: #1b1723;
  --bg-elev-2: #241f2e;
  --line: rgba(241,237,228,0.09);
  --line-strong: rgba(241,237,228,0.16);
  --ink: #f1ede4;
  --ink-dim: #a79f97;
  --ink-faint: #6f6960;
  --gold: #e3a83b;
  --gold-dim: rgba(227,168,59,0.14);
  --danger: #d1503f;
  --radius: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(1200px 800px at 15% -10%, #1b1626 0%, var(--bg) 55%);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}
.mono{font-family:'JetBrains Mono', monospace; letter-spacing:0.01em;}
.serif{font-family:'Fraunces', serif;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  flex-wrap:wrap; gap:12px;
}
.brand{display:flex; align-items:baseline; gap:8px;}
.brand .mark{
  width:22px; height:22px; border-radius:6px;
  background: linear-gradient(135deg, var(--gold), #c98a2a);
  display:inline-block;
}
.brand-name{font-family:'Fraunces', serif; font-weight:700; font-size:20px; letter-spacing:-0.01em;}
.brand-sub{color:var(--ink-faint); font-size:12px;}
.btn{
  border:1px solid var(--line-strong); background:var(--bg-elev);
  color:var(--ink); padding:10px 16px; border-radius:10px;
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  transition: border-color .15s, background .15s, transform .1s;
}
.btn:hover{border-color: var(--gold); background: var(--bg-elev-2);}
.btn:active{transform: scale(0.98);}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.btn-primary{background: var(--gold); border-color: var(--gold); color:#1c1408;}
.btn-primary:hover{background:#edb753; border-color:#edb753;}
.btn-ghost{background:transparent; border-color:transparent;}
.btn-ghost:hover{background: var(--bg-elev); border-color: var(--line);}
.btn-danger{background:transparent; border-color:var(--line-strong); color:var(--danger);}
.btn-danger:hover{background:rgba(209,80,63,0.12); border-color:var(--danger);}
.btn-icon{width:40px; height:40px; padding:0; justify-content:center; border-radius:50%;}
.btn-icon.active{background:var(--gold); border-color:var(--gold); color:#1c1408;}
select.btn{appearance:auto; -webkit-appearance:auto;}

/* ---------- Lobby ---------- */
.lobby{max-width:920px; margin:0 auto; padding: 36px 24px 80px;}
.lobby-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap;}
.lobby-head h1{font-family:'Fraunces', serif; font-weight:600; font-size:28px; margin:0 0 6px;}
.lobby-head p{color:var(--ink-dim); margin:0; font-size:14px;}
.section-label{
  display:flex; align-items:center; gap:10px;
  color: var(--ink-faint); font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  margin: 30px 0 12px;
}
.section-label::after{content:''; flex:1; height:1px; background:var(--line);}
.empty-hint{color:var(--ink-faint); font-size:14px; padding:24px 4px;}
.locked-notice{padding:60px 4px; text-align:center;}
.locked-notice h2{font-family:'Fraunces', serif; font-size:24px; margin:0 0 10px;}
.locked-notice .hint{color:var(--ink-faint); font-size:14px; margin:0;}

.entry{display:flex; gap:18px; padding:18px 4px; border-bottom:1px solid var(--line); transition: background .15s;}
.entry:hover{background: rgba(241,237,228,0.02);}
.entry-no{color: var(--ink-faint); font-size:13px; padding-top:3px; min-width:52px;}
.entry-body{flex:1; min-width:0;}
.entry-title{font-family:'Fraunces', serif; font-size:18px; font-weight:600; margin:0 0 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--danger); display:inline-block; position:relative;}
.badge{font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em;}
.badge-live{background:rgba(209,80,63,0.14); color:#ef8a7c;}
.badge-mine{background:var(--gold-dim); color:var(--gold);}
.entry-desc{color:var(--ink-dim); font-size:14px; margin:0 0 8px; line-height:1.5;}
.entry-meta{color:var(--ink-faint); font-size:13px; display:flex; gap:14px; align-items:center;}
.entry-meta .author{color:var(--gold);}
.entry-actions{display:flex; align-items:center; gap:10px; padding-top:4px;}
.viewer-count{color:var(--ink-faint); font-size:13px; white-space:nowrap;}

/* ---------- Modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(10,8,14,0.6); backdrop-filter: blur(3px); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.overlay.open{display:flex;}
.modal{background: var(--bg-elev); border:1px solid var(--line-strong); border-radius: var(--radius); width:100%; max-width:440px; padding:26px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);}
.modal h2{font-family:'Fraunces', serif; font-size:22px; margin:0 0 4px;}
.modal .hint{color:var(--ink-faint); font-size:13px; margin:0 0 20px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; color:var(--ink-dim); margin-bottom:6px; font-weight:600;}
.field input[type=text], .field textarea{width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:10px; padding:11px 12px; color:var(--ink); font-family:inherit; font-size:14px;}
.field textarea{resize:vertical; min-height:60px;}
.field input:focus, .field textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.error-text{color:var(--danger); font-size:13px; margin:8px 0 0;}

/* ---------- Room view ---------- */
.room-wrap{height:100vh; display:flex; flex-direction:column;}
.room-topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap;}
.room-title-wrap{display:flex; align-items:center; gap:12px; min-width:0;}
.room-title{font-family:'Fraunces', serif; font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.room-id{color:var(--ink-faint); font-size:12px;}
.room-main{flex:1; display:flex; min-height:0;}
.stage{flex:1; display:flex; flex-direction:column; padding:18px; gap:14px; min-width:0;}

/* Ana yayin + katilimci kutulari yan yana (katilimcilar sagda, dikey
   sutun) - viewer-strip sabit genislikte oldugu icin bcast-main geri
   kalan alani kaplar, dolayisiyla eskisinden biraz daha dar gorunur. */
.stage-row{flex:1; display:flex; gap:14px; min-height:0;}

.bcast-main{flex:1; background:var(--bg-elev); border-radius:var(--radius); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; min-height:0;}
.bcast-main video{width:100%; height:100%; object-fit:cover; border-radius:var(--radius);}
.avatar-glow{width:96px; height:96px; border-radius:50%; background: linear-gradient(160deg, var(--gold), #8a5a1c); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:34px; font-weight:700; color:#1c1408;}
.bcast-tag{position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.4); padding:6px 12px; border-radius:20px; font-size:12px; font-weight:700; z-index:2;}
.bcast-name{position:absolute; bottom:14px; left:14px; font-size:14px; font-weight:600; background:rgba(0,0,0,0.35); padding:6px 12px; border-radius:8px; z-index:2;}
.conn-status{position:absolute; top:14px; right:14px; background:rgba(0,0,0,0.4); padding:6px 12px; border-radius:20px; font-size:12px; z-index:2;}

/* Sagda dikey sutun - sahne en fazla 4 katilimciyla sinirli (bkz.
   MAX_STAGE_PARTICIPANTS), bu yuzden scroll'a nadiren ihtiyac olur. */
.viewer-strip{flex:0 0 220px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding-right:2px;}
.thumb{flex:0 0 auto; width:100%; height:150px; border-radius:10px; background:var(--bg-elev); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:13px; color:var(--ink-dim); position:relative; overflow:hidden;}
.thumb video{width:100%; height:100%; object-fit:cover;}
.thumb.you{border-color:var(--gold); color:var(--gold);}
.thumb .tname{position:absolute; bottom:4px; left:6px; font-size:10px; color:var(--ink-faint); font-family:'Manrope'; z-index:2;}

.controls{display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 0 2px; flex-wrap:wrap;}
.controls .divider{width:1px; height:26px; background:var(--line-strong); margin:0 6px;}

.chat-panel{width:320px; flex:0 0 320px; border-left:1px solid var(--line); display:flex; flex-direction:column; background:var(--bg-elev); min-height:0;}
.chat-head{padding:16px 18px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:space-between;}
.chat-head .count{color:var(--ink-faint); font-weight:500; font-size:12px;}
.chat-messages{flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px;}
.msg .who{font-size:12.5px; font-weight:700; margin-bottom:2px;}
.msg .who span{color:var(--ink-faint); font-weight:500; font-size:11px; margin-left:6px;}
.msg .body{font-size:14px; line-height:1.45; color:var(--ink); word-break:break-word;}
.msg.system{color:var(--ink-faint); font-size:12.5px; font-style:italic;}
.chat-input-row{display:flex; gap:8px; padding:14px; border-top:1px solid var(--line);}
.chat-input-row input{flex:1; background:var(--bg); border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; color:var(--ink); font-family:inherit; font-size:14px;}
.chat-input-row input:focus{outline:2px solid var(--gold); outline-offset:1px;}
.send-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--gold); background:var(--gold); color:#1c1408; display:flex; align-items:center; justify-content:center;}

.stage-requests{border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px; padding:14px 18px;}
.stage-requests-list{display:flex; flex-direction:column; gap:8px;}
.stage-request-row{display:flex; align-items:center; justify-content:space-between; font-size:13px;}
.stage-request-row .name{color:var(--gold); font-weight:600;}
.stage-request-row .actions{display:flex; gap:6px;}
.stage-request-row .actions .btn{padding:4px 10px; font-size:12px;}

.chat-toggle-mobile{display:none;}
.chat-close-mobile{display:none;}

@media (max-width: 820px){
  .chat-panel{position:fixed; right:0; top:0; bottom:0; z-index:40; transform: translateX(100%); transition: transform .2s ease; box-shadow: -12px 0 30px rgba(0,0,0,0.35);}
  .chat-panel.mobile-open{transform:translateX(0);}
  .chat-toggle-mobile{display:flex;}
  .chat-close-mobile{display:flex;}
  .entry{gap:12px;}
  .entry-no{min-width:38px; font-size:12px;}

  /* Dar ekranda katilimcilar sagda sutun degil, altta yatay serit olarak
     kalir - yan yana koymak icin yeterli genislik yok. */
  .stage-row{flex-direction:column;}
  .viewer-strip{flex:0 0 auto; flex-direction:row; overflow-x:auto; overflow-y:visible; padding-right:0; padding-bottom:2px;}
  .thumb{width:110px; height:78px; flex:0 0 auto;}
}

svg{display:block;}