:root {
  --bg-main: #0d1520;
  --bg-panel: rgba(10,18,35,0.92);
  --bg-panel-2: rgba(8,14,28,0.95);
  --bg-row: rgba(8,14,28,0.6);
  --border-soft: rgba(255,255,255,0.1);
  --border-mid: rgba(255,255,255,0.18);
  --border-strong: #f5a800;
  --text-main: #dce8f5;
  --text-muted: #7a9ab8;
  --text-strong: #f0ebe0;
  --accent: #f5a800;
  --accent-dark: #c47f00;
  --accent-text: #0d1520;
  --danger: #c0392b;
  --success: #2dc653;
  --shadow-hard: #040a12;
  --font-main: 'Exo 2', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-display: 'Bangers', cursive;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font-main);font-weight:400;
  background:var(--bg-main);color:var(--text-main);
  min-height:100dvh;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(245,168,0,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(30,60,120,0.25) 0%, transparent 55%),
    linear-gradient(160deg, #0d1520 0%, #0a1228 55%, #060d1a 100%);
}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#login-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login-card{
  background:var(--bg-panel);border:1.5px solid var(--border-soft);border-top:2px solid var(--accent);
  border-radius:6px;box-shadow:5px 5px 0 var(--shadow-hard),0 24px 80px rgba(0,0,0,0.55);
  padding:2.5rem 2rem;width:100%;max-width:380px;display:flex;flex-direction:column;gap:1.5rem;
}
.login-title{font-family:var(--font-display);font-size:28pt;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);text-shadow:3px 3px 0 var(--shadow-hard);line-height:1}
.login-subtitle{font-size:9pt;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-family:var(--font-mono);margin-top:.25rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-label{font-size:8pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-family:var(--font-mono)}
.form-input{
  background:rgba(8,14,28,0.8);border:1.5px solid var(--border-soft);border-radius:4px;padding:.65rem .9rem;
  font-size:11pt;font-family:var(--font-mono);color:var(--text-main);width:100%;transition:border-color .15s,box-shadow .15s;
}
.form-input::placeholder{color:rgba(122,154,184,0.45)}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(245,168,0,0.15);outline:none}
.form-input.error{border-color:var(--danger)}
.form-error{font-size:8.5pt;color:var(--danger);font-family:var(--font-mono);display:none;margin-top:.2rem}
.form-error.visible{display:block}
.login-hint{font-size:8.5pt;color:var(--text-muted);line-height:1.6}
.login-hint strong{color:var(--accent);font-family:var(--font-mono)}
.btn-primary{
  background:linear-gradient(160deg,#1c2a3e 0%,#141e2e 60%,#0d1520 100%);border:2px solid var(--accent);border-radius:4px;
  padding:.75rem 1.2rem;font-family:var(--font-display);font-size:14pt;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);width:100%;box-shadow:3px 3px 0 var(--shadow-hard);transition:transform .12s,box-shadow .12s,background .12s;
}
.btn-primary:hover{background:linear-gradient(160deg,#263548 0%,#1c2a3e 60%,#141e2e 100%);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-hard)}
.btn-primary:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow-hard)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}

#dashboard{display:none;flex-direction:column;min-height:100dvh}
#dashboard.visible{display:flex}
.topbar{
  height:48px;background:rgba(8,14,28,0.95);border-bottom:1.5px solid var(--border-soft);border-top:2px solid var(--accent);
  display:flex;align-items:center;padding:0 1.25rem;gap:.75rem;position:sticky;top:0;z-index:100;
}
.topbar-title{font-family:var(--font-display);font-size:16pt;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);text-shadow:2px 2px 0 var(--shadow-hard)}
.topbar-sep{width:1px;height:18px;background:var(--border-soft);margin:0 .25rem}
.status-badge{display:flex;align-items:center;gap:.4rem;background:rgba(245,168,0,0.1);border:1px solid rgba(245,168,0,0.3);border-radius:3px;padding:2px 10px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.status-text{font-family:var(--font-mono);font-size:9pt;color:var(--accent);font-weight:700;letter-spacing:.08em}
.topbar-spacer{flex:1}
.conn-status{display:flex;align-items:center;gap:.4rem;font-size:8pt;font-family:var(--font-mono);color:var(--text-muted)}
.conn-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);transition:background .2s}
.conn-dot.ok{background:var(--success)}
.conn-dot.err{background:var(--danger)}
.btn-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:3px;color:var(--text-muted);transition:background .15s,color .15s}
.btn-icon:hover{background:rgba(255,255,255,0.06);color:var(--text-main)}
.topbar-back{font-family:var(--font-mono);font-size:8pt;color:var(--text-muted);letter-spacing:.06em;text-decoration:none;padding:4px 10px;border:1px solid var(--border-soft);border-radius:3px;transition:border-color .15s,color .15s}
.topbar-back:hover{border-color:var(--accent);color:var(--accent)}

.dash-body{flex:1;padding:1.75rem 1.5rem;max-width:1300px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.75rem}
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.sec-title{font-family:var(--font-mono);font-size:8pt;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.sec-action{font-family:var(--font-mono);font-size:8pt;color:var(--accent);border:1px solid rgba(245,168,0,0.3);border-radius:3px;padding:3px 10px;display:flex;align-items:center;gap:.35rem;transition:background .15s;cursor:pointer;background:none}
.sec-action:hover{background:rgba(245,168,0,0.1)}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem}
.kpi-card{background:var(--bg-panel);border:1.5px solid var(--border-soft);border-radius:5px;padding:1rem 1.1rem;box-shadow:3px 3px 0 var(--shadow-hard);display:flex;flex-direction:column;gap:.35rem}
.kpi-label{font-size:8pt;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.kpi-value{font-family:var(--font-mono);font-size:15pt;font-weight:700;color:var(--text-strong)}
.kpi-sub{font-size:8pt;color:var(--text-muted);font-family:var(--font-mono)}

.lobbies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1rem}
.lobby-card{
  background:var(--bg-panel);border:1.5px solid var(--border-soft);border-top:2px solid var(--accent);border-radius:5px;
  box-shadow:3px 3px 0 var(--shadow-hard);overflow:hidden;display:flex;flex-direction:column;min-height:280px;
}
.lobby-head{padding:1rem 1rem .75rem 1rem;border-bottom:1px solid var(--border-soft);display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.lobby-code{font-family:var(--font-display);font-size:20pt;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);text-shadow:2px 2px 0 var(--shadow-hard);line-height:1}
.lobby-meta{margin-top:.25rem;font-family:var(--font-mono);font-size:8pt;color:var(--text-muted);line-height:1.6}
.lobby-live{display:flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:8pt;color:var(--text-muted)}
.lobby-live-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted)}
.lobby-live-dot.ok{background:var(--success)}
.lobby-live-dot.err{background:var(--danger)}
.lobby-body{padding:1rem;display:flex;flex-direction:column;gap:.9rem}
.lobby-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.mini-stat{background:rgba(8,14,28,0.58);border:1px solid var(--border-soft);border-radius:4px;padding:.55rem .65rem}
.mini-label{font-family:var(--font-mono);font-size:7.5pt;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.mini-value{font-family:var(--font-mono);font-size:11pt;color:var(--text-strong);font-weight:700;margin-top:.2rem}
.vars-wrap{border:1px solid var(--border-soft);border-radius:4px;overflow:hidden}
.vars-table{width:100%;border-collapse:collapse}
.vars-table th{font-family:var(--font-mono);font-size:7.5pt;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;padding:.55rem .75rem;border-bottom:1px solid var(--border-soft);text-align:left;background:rgba(8,14,28,0.6)}
.vars-table td{padding:.48rem .75rem;border-bottom:1px solid rgba(255,255,255,0.06);font-size:9pt;vertical-align:middle}
.vars-table tr:last-child td{border-bottom:none}
.vars-table tr.flash td{background:rgba(245,168,0,0.08)}
.var-name{font-family:var(--font-mono);font-size:8.5pt;color:var(--accent)}
.var-value{font-family:var(--font-mono);font-size:9pt;color:var(--text-strong)}
.type-chip{display:inline-block;padding:1px 7px;border-radius:2px;font-size:7.5pt;font-family:var(--font-mono);font-weight:700;letter-spacing:.06em}
.type-number{background:rgba(245,168,0,0.12);color:var(--accent)}
.type-boolean{background:rgba(45,198,83,0.12);color:var(--success)}
.type-string{background:rgba(168,196,232,0.12);color:#a8c4e8}
.type-list{background:rgba(30,60,120,0.3);color:#7aadde}
.type-null,.type-other{background:rgba(255,255,255,0.06);color:var(--text-muted)}
.var-ts{font-family:var(--font-mono);font-size:7.5pt;color:var(--text-muted)}
.empty-lobby{padding:1.25rem;text-align:center;color:var(--text-muted);font-family:var(--font-mono);font-size:8.5pt}

.log-panel{background:var(--bg-panel);border:1.5px solid var(--border-soft);border-radius:5px;overflow:hidden;box-shadow:3px 3px 0 var(--shadow-hard)}
.log-list{max-height:240px;overflow-y:auto}
.log-entry{display:flex;align-items:baseline;gap:.75rem;padding:.45rem 1rem;border-bottom:1px solid rgba(255,255,255,0.04);font-size:9pt;animation:logIn 250ms ease}
.log-entry:last-child{border-bottom:none}
@keyframes logIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.log-time{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;min-width:65px;font-size:8pt}
.log-msg{color:var(--text-muted);flex:1;font-family:var(--font-mono);font-size:8.5pt}
.log-msg .lv{color:var(--accent);font-weight:700}.log-msg .lk{color:#a8c4e8}.log-msg .lc{color:var(--text-strong)}
.log-empty{padding:2rem;text-align:center;color:var(--text-muted);font-family:var(--font-mono);font-size:9pt}

.toast-wrap{position:fixed;bottom:1.25rem;right:1.25rem;display:flex;flex-direction:column;gap:.5rem;z-index:999}
.toast{background:var(--bg-panel-2);border:1.5px solid var(--border-soft);border-radius:4px;padding:.6rem 1rem;font-family:var(--font-mono);font-size:9pt;box-shadow:3px 3px 0 var(--shadow-hard);animation:toastIn 200ms ease}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:3px}
@media(max-width:760px){.topbar{padding:0 .75rem}.dash-body{padding:1rem .75rem}.lobbies-grid{grid-template-columns:1fr}.lobby-mini-grid{grid-template-columns:1fr 1fr 1fr}}

.chapter-section{display:flex;flex-direction:column;gap:.55rem;background:rgba(8,14,28,0.58);border:1px solid var(--border-soft);border-left:2px solid var(--accent);border-radius:4px;padding:.75rem .9rem}
.chapter-row{display:flex;flex-direction:column;gap:.3rem}
.chapter-info{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.chapter-player-label{font-family:var(--font-mono);font-size:7.5pt;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.15rem}
.chapter-name{font-family:var(--font-mono);font-size:9.5pt;color:var(--text-strong)}
.chapter-count{font-family:var(--font-mono);font-size:8pt;color:var(--accent);white-space:nowrap;font-weight:700}
.prog-bar{height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s ease}

.log-toggle{
  background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:8pt;
  font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;
  padding:0;display:flex;align-items:center;transition:color .15s;
}
.log-toggle:hover{color:var(--accent)}

.lobby-card--empty{border-top-color:var(--text-muted);opacity:.75}

.lobby-dismiss{
  font-size:11pt;color:var(--text-muted);padding:2px 6px;border-radius:3px;
  transition:background .15s,color .15s;line-height:1;
}
.lobby-dismiss:hover{background:rgba(192,57,43,0.15);color:var(--danger)}

.lobby-dismiss.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.lobby-live-dot.warn {
  background: var(--warning, #f5a623);
  box-shadow: 0 0 6px var(--warning, #f5a623);
}

.debrief-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(6,13,26,0.88);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.debrief-modal-inner {
  width: 100%; max-width: 1100px;
  background: var(--bg-main);
  border: 1.5px solid var(--border-soft);
  border-top: 2px solid var(--accent);
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--shadow-hard);
  overflow: hidden;
}
.debrief-modal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem;
  background: rgba(8,14,28,0.95);
  border-bottom: 1px solid var(--border-soft);
}
.debrief-modal-title {
  font-family: var(--font-display); font-size: 14pt;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-strong); text-shadow: 2px 2px 0 var(--shadow-hard);
}
.debrief-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
}
/* Button in lobby card */
.debrief-btn {
  font-family: var(--font-mono); font-size: 8pt; font-weight: 700;
  color: var(--accent); border: 1px solid rgba(245,168,0,0.35);
  border-radius: 3px; padding: 4px 10px;
  background: rgba(245,168,0,0.08);
  transition: background .15s;
}
.debrief-btn:hover { background: rgba(245,168,0,0.18); }