:root{
  --bg:#0b0f17;
  --panel:#101827;
  --panel2:#0e1524;
  --text:#e8eefc;
  --muted:#9aa7c7;
  --accent:#4da6ff;
  --danger:#ff4d4d;
  --good:#6bff6b;
  --line: rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(900px 600px at 20% 0%, rgba(77,166,255,.18), transparent 60%),
              radial-gradient(700px 500px at 80% 20%, rgba(199,77,255,.12), transparent 55%),
              var(--bg);
  color:var(--text);
}
#app{min-height:100%; display:flex; flex-direction:column}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,24,39,.95), rgba(16,24,39,.75));
  backdrop-filter: blur(6px);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, rgba(77,166,255,1), rgba(107,255,107,1));
  box-shadow: 0 10px 30px rgba(77,166,255,.18);
}
.title{font-weight:800; letter-spacing:.2px}
.subtitle{color:var(--muted); font-size:12px; margin-top:2px}
.status{
  font-size:12px; color:var(--muted);
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background: rgba(0,0,0,.2);
}
.status.ok{color:#cfe6ff; border-color: rgba(77,166,255,.35)}
.status.bad{color:#ffd2d2; border-color: rgba(255,77,77,.35)}

.main{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:14px;
  padding:14px;
}

.gameWrap{
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(16,24,39,.5), rgba(16,24,39,.25));
  min-height: 420px;
}
canvas{display:block; width:100%; height:100%; background:#05070c}

.hud{position:absolute; inset:12px; pointer-events:none; display:flex; justify-content:space-between; align-items:flex-start}
.pill{
  pointer-events:none;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(0,0,0,.32);
  color: var(--muted);
  font-size:12px;
}

.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(600px 400px at 50% 40%, rgba(0,0,0,.65), rgba(0,0,0,.85));
}
.overlay.hidden{display:none}
.card{
  width:min(520px, calc(100% - 24px));
  border:1px solid var(--line);
  background: rgba(16,24,39,.88);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}
.card h1{margin:0 0 6px 0}
.muted{color:var(--muted)}
.formRow{display:grid; grid-template-columns: 90px 1fr; gap:10px; align-items:center; margin-top:10px}
label{color:#cbd7f0; font-size:13px}
input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}
input:focus{border-color: rgba(77,166,255,.45); box-shadow: 0 0 0 3px rgba(77,166,255,.12)}
.btnRow{display:flex; gap:10px; margin-top:14px}
button{
  cursor:pointer;
  border:none;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
}
button.primary{background: linear-gradient(135deg, rgba(77,166,255,1), rgba(77,166,255,.8)); color:#03101f}
button.ghost{background: rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.12)}
button:disabled{opacity:.6; cursor:not-allowed}
.small{font-size:12px; margin-top:10px; color:#cbd7f0}
hr{border:none; border-top:1px solid var(--line); margin:14px 0}

.side{display:flex; flex-direction:column; gap:14px}
.panel{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(16,24,39,.72);
  overflow:hidden;
}
.panelTitle{padding:12px 12px; border-bottom:1px solid var(--line); font-weight:800}
.scoreboard{padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.tag{display:flex; align-items:center; gap:8px; min-width:0}
.dot{width:10px; height:10px; border-radius:99px; box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700}
.meta{color:var(--muted); font-size:12px}

.log{height:200px; overflow:auto; padding:10px 12px; font-size:12px; color:#cbd7f0}
.log .line{margin-bottom:6px; color:#cbd7f0}
.log .sys{color:#d7e9ff}
.controls{padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.check{display:flex; gap:8px; align-items:center; color:#cbd7f0; font-size:13px}

.footer{
  padding:10px 14px;
  color:var(--muted);
  font-size:12px;
  border-top:1px solid var(--line);
  display:flex; gap:10px; align-items:center;
}
.sep{opacity:.7}

@media (max-width: 980px){
  .main{grid-template-columns:1fr;}
  .side{order:2}
  .gameWrap{min-height:60vh}
}