:root{
  --bg:#0f1113;
  --panel:#111418;
  --accent:#2ec4b6;
  --muted:#9aa4ad;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#e6eef3;-webkit-tap-highlight-color:transparent}
canvas#c{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;touch-action:none;z-index:0}

#ui{
  position: absolute;
  left: 8px;
  top: 8px;
  display:flex;
  gap:8px;
  align-items:flex-start;
  z-index:50; /* keep UI above the canvas so controls are clickable */
}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border:1px solid rgba(255,255,255,0.04);
  padding:10px;
  border-radius:10px;
  min-width:160px;
  backdrop-filter: blur(6px);
}
.panel.small{min-width:120px;text-align:center}
.row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
label{font-size:13px;color:var(--muted);min-width:36px}
select,input,button{font-size:14px;padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
button{cursor:pointer;background:var(--accent);color:#021012;border:none}
#info{font-size:13px;color:var(--muted)}

@media (min-width:700px){
  /* joystick removed for desktop */
}

/* overlays for coding / blocks */
.overlay {
  position: absolute;
  right: 8px;
  top: 8px;
  width: min(560px, 92vw);
  height: min(76vh, 520px);
  background: linear-gradient(180deg, rgba(10,12,14,0.95), rgba(6,8,10,0.95));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  z-index: 50;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap:8px;
}

.overlay.hidden { display: none; }

.overlay .header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.overlay .tabs {
  display:flex;
  gap:6px;
  margin-bottom:6px;
}

.tab {
  padding:6px 10px;
  border-radius:6px;
  background: rgba(255,255,255,0.02);
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
}

.tab.active { background: rgba(255,255,255,0.04); color: #fff; }

/* code editor textarea */
.code-area {
  width:100%;
  height:100%;
  resize:none;
  background: #081014;
  color: #e6eef3;
  border:1px solid rgba(255,255,255,0.04);
  border-radius:6px;
  padding:8px;
  font-family: monospace;
  font-size:12px;
  flex:1;
  overflow:auto;
}

/* blocks UI */
.blocks-area {
  display:flex;
  gap:8px;
  height:100%;
  flex:1;
}

.block-palette {
  width:160px;
  background: rgba(255,255,255,0.02);
  border-radius:6px;
  padding:8px;
  overflow:auto;
}

.block-palette h4 { margin:6px 0 8px 0; font-size:13px; color:var(--muted); }

.block-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border:1px solid rgba(255,255,255,0.03);
  padding:8px;
  border-radius:6px;
  margin-bottom:8px;
  cursor:grab;
  font-size:13px;
  color:#e6eef3;
}

.block-canvas {
  flex:1;
  background: rgba(0,0,0,0.2);
  border-radius:6px;
  padding:8px;
  overflow:auto;
  min-height:120px;
}

.block-node {
  background:#122426;
  padding:8px;
  color:#e6eef3;
  border-radius:6px;
  margin-bottom:6px;
  font-size:13px;
}

/* small close button */
.close-btn {
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  color:var(--muted);
  padding:4px 8px;
  border-radius:6px;
  cursor:pointer;
}

/* version label at bottom-left */
#version{
  position:fixed;
  left:8px;
  bottom:8px;
  z-index:999;
  font-size:12px;
  color:#ffffff;
  background:rgba(0,0,0,0.55);
  padding:6px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.06);
  pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
}