* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#0a0a0a; color:#00ff41;
  font-family:'Courier New',Courier,monospace;
  height:100vh; display:flex; flex-direction:column; overflow:hidden;
}

#toolbar { flex-shrink:0; display:flex; flex-direction:column; }

#statusbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:3px 10px; background:#00ff41; color:#000;
  font-size:10px; font-weight:bold; letter-spacing:.04em;
  gap:6px; flex-wrap:wrap; flex-shrink:0;
}
#statusbar .left { display:flex; gap:10px; align-items:center; }
#statusbar .right { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
#fps-display { min-width:54px; }
#audio-viz { font-size:9px; letter-spacing:0; color:#000; min-width:60px; opacity:.7; }

#controls-row {
  display:flex; flex-wrap:wrap; gap:0;
  padding:3px 6px; align-items:center;
  background:#0c0c0c; border-bottom:1px solid #1a1a1a;
}
.ctrl-group {
  display:flex; align-items:center; gap:3px;
  padding:1px 8px; border-right:1px solid #1e1e1e;
}
.ctrl-group:last-child { border-right:none; }
.ctrl-label {
  font-size:8.5px; color:#444; text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap;
}

button {
  background:#161616; color:#666; border:1px solid #222;
  padding:2px 7px; font-family:inherit; font-size:9.5px;
  font-weight:bold; cursor:pointer; transition:all .1s; white-space:nowrap;
}
button:hover { background:#222; color:#ccc; border-color:#333; }
button.active { background:#00ff41; color:#000; border-color:#00ff41; }
button.warn { background:#ff4444; color:#fff; border-color:#ff4444; }

input[type=range] {
  width:55px; height:3px; accent-color:#00ff41; cursor:pointer;
}
select {
  background:#161616; color:#777; border:1px solid #222;
  padding:2px 4px; font-family:inherit; font-size:9.5px;
  cursor:pointer; outline:none;
}
select:hover { color:#ccc; border-color:#333; }

/* --- CANVAS AREA --- */
#canvas-wrap {
  flex:1; position:relative; overflow:hidden; display:flex;
}
#main-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  display:block; image-rendering:pixelated;
}
#pip-canvas {
  position:absolute; bottom:8px; right:8px;
  width:200px; height:120px; display:none;
  border:1px solid #333; background:#000;
  image-rendering:pixelated; z-index:5;
}
#pip-label {
  position:absolute; bottom:132px; right:8px;
  font-size:8px; color:#555; display:none; z-index:5;
}

/* --- PEER PANEL --- */
#peer-panel {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#0f0f0f; border:1px solid #222; padding:20px 24px;
  display:none; flex-direction:column; gap:12px;
  z-index:20; min-width:280px;
}
#peer-panel h3 { color:#00ff41; font-size:11px; letter-spacing:.1em; }
.peer-row { display:flex; gap:8px; align-items:center; }
.peer-row label { font-size:10px; color:#555; min-width:80px; }
#room-code-display {
  font-size:16px; letter-spacing:.2em; color:#00ff41;
  background:#161616; padding:6px 12px; border:1px solid #333;
  cursor:pointer; flex:1; text-align:center;
}
#room-code-display:hover { border-color:#00ff41; }
#join-input {
  background:#161616; color:#00ff41; border:1px solid #333;
  padding:4px 8px; font-family:inherit; font-size:13px;
  letter-spacing:.15em; width:100px; outline:none; text-transform:uppercase;
}
#join-input:focus { border-color:#00ff41; }
#peer-status { font-size:10px; color:#555; text-align:center; }
#peer-status.connected { color:#00ff41; }
#peer-status.error { color:#ff4444; }
.close-btn {
  position:absolute; top:8px; right:8px;
  background:none; border:none; color:#444; font-size:14px;
  cursor:pointer; padding:2px 6px;
}
.close-btn:hover { color:#ccc; background:none; }

/* --- START SCREEN --- */
#start-screen {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  background:#0a0a0a; z-index:10;
}
#start-screen h1 {
  color:#00ff41; font-size:20px; line-height:1.1; text-align:center;
  letter-spacing:.12em; text-transform:lowercase; font-weight:bold;
  text-shadow:0 0 10px #00ff4170;
}
#start-screen pre { color:#00b32d; font-size:9px; line-height:1.1; text-align:center; }
#start-btn {
  background:#00ff41; color:#000; border:none; padding:10px 32px;
  font-size:14px; font-family:inherit; font-weight:bold;
  cursor:pointer; letter-spacing:.1em;
}
#start-btn:hover { background:#00ff80; }
#error-msg { color:#ff4141; font-size:12px; display:none; text-align:center; max-width:400px; }
.hotkeys { color:#2a2a2a; font-size:9px; text-align:center; line-height:2.2; max-width:660px; }
kbd {
  display:inline-block; background:#111; color:#00ff41;
  border:1px solid #1e1e1e; padding:0 4px;
  font-family:inherit; font-size:9px;
}

#palette-strip { display:flex; gap:3px; align-items:center; flex-wrap:wrap; }
.pal-dot {
  width:10px; height:10px; border-radius:50%; cursor:pointer;
  border:1px solid transparent; transition:transform .1s,border-color .1s; flex-shrink:0;
}
.pal-dot:hover { transform:scale(1.4); }
.pal-dot.active { border-color:#fff; transform:scale(1.4); }

.value-small { font-size:9px; color:#444; }
.size-value { min-width:14px; }
.brightness-value { min-width:28px; text-align:center; }
.select-compact { width:52px; }
.select-medium { width:60px; }
.call-status { font-size:9px; color:#444; }
[hidden] { display:none !important; }