:root{
  --bg:#05060a;
  --fg:#d7d7e0;
  --muted:#8b8ba0;
  --accent:#ff2b6a;
  --accent2:#21e6c1;
  --panel: rgba(10,12,18,.78);
  --panel2: rgba(10,12,18,.92);
  --line: rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius: 14px;
  --font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html,body{height:100%; background:var(--bg); margin:0; overflow:hidden; color:var(--fg); font-family:var(--font);}
#vox-root{position:fixed; inset:0; display:block;}
#vox-canvas{position:absolute; inset:0; display:block; width:100%; height:100%; image-rendering:pixelated;} /* Pixelated for retro feel */

.vox-ui{position:absolute; inset:0; pointer-events:none;}
.vox-hud{
  position:absolute; top:12px; left:12px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px 12px; min-width:240px;
  pointer-events:none;
}
.vox-hud .row{display:flex; gap:12px; align-items:center; justify-content:space-between;}
.vox-hud .label{color:var(--muted); font-size:12px; letter-spacing:.5px;}
.vox-hud .val{font-size:14px;}
.vox-bar{height:8px; width:100%; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.06);}
.vox-bar > i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition: width 0.2s;}

.vox-topbtns{
  position:absolute; top:12px; right:12px; display:flex; gap:10px;
  pointer-events:auto;
}
.vox-btn{
  appearance:none; border:1px solid var(--line);
  background:var(--panel); color:var(--fg);
  border-radius:12px; padding:10px 12px;
  font-family:var(--font); font-size:12px;
  box-shadow:var(--shadow); cursor:pointer;
}
.vox-btn:hover{border-color:rgba(255,255,255,.18);}
.vox-btn:active{transform:translateY(1px);}

.vox-overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  pointer-events:auto;
}
.vox-overlay.active{display:flex;}
.vox-card{
  width:min(720px, calc(100vw - 28px));
  background:var(--panel2); border:1px solid rgba(255,255,255,.14);
  border-radius:18px; box-shadow:var(--shadow);
  padding:18px 18px 14px;
}
.vox-card h1{margin:0 0 8px; font-size:16px; letter-spacing:.6px;}
.vox-card p{margin:0 0 10px; color:var(--muted); font-size:13px; line-height:1.4;}
.vox-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.vox-kbd{
  display:inline-flex; gap:6px; flex-wrap:wrap;
  padding:8px 10px; border:1px dashed rgba(255,255,255,.18); border-radius:14px;
  background:rgba(255,255,255,.04);
}
.vox-key{
  font-size:12px; padding:6px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.18);
}

.vox-toast{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:16px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; box-shadow:var(--shadow);
  color:var(--muted); font-size:12px;
  pointer-events:none; opacity:0; transition:opacity .18s ease;
}
.vox-toast.show{opacity:1;}

.vox-touch{
  position:absolute; inset:auto 10px 10px 10px; display:none;
  grid-template-columns: 1fr 1fr;
  gap:10px; pointer-events:auto;
}
.vox-touch.active{display:grid;}
.vox-pad, .vox-actions2{
  background:var(--panel); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow);
  padding:10px; display:grid; gap:10px;
}
.vox-pad{grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; max-width:320px;}
.vox-actions2{grid-template-columns:1fr 1fr; align-content:start; max-width:320px; justify-self:end;}
.vox-tbtn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  border-radius:16px; color:var(--fg);
  font-family:var(--font); font-size:12px;
  padding:14px 10px; cursor:pointer;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
.vox-tbtn:active{transform:translateY(1px);}
.vox-tbtn.small{padding:10px 10px;}
.vox-center{opacity:.25; pointer-events:none;}