:root{
  --bg:#07070f;
  --panel:#0d0d1c;
  --cyan:#00e5ff;
  --magenta:#ff4fd8;
  --lime:#7cff00;
  --dim:#5a6182;
  --line:rgba(120,140,255,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(circle at 20% -10%, rgba(0,229,255,.10), transparent 45%),
    radial-gradient(circle at 90% 110%, rgba(255,79,216,.10), transparent 45%),
    var(--bg);
  color:#e6ecff;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* topbar */
#topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,229,255,.05),transparent);
}
.title{font-weight:800;font-size:clamp(15px,2.4vw,22px);letter-spacing:2px;
  text-shadow:0 0 14px rgba(0,229,255,.6);}
.title .accent{color:var(--magenta)}
.stats{display:flex;gap:14px;font-size:11px;color:var(--dim);flex-wrap:wrap;letter-spacing:1px}
.stats b{color:var(--cyan);font-weight:700;margin-left:4px}

/* layout */
#layout{flex:1;display:grid;grid-template-columns:210px 1fr 240px;gap:10px;
  padding:10px;min-height:0}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px;display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.panel h2{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--dim);
  margin-bottom:4px}
.retina-label{font-size:9px;color:var(--cyan);letter-spacing:1px;margin-bottom:6px;opacity:.8}
#retina{width:100%;aspect-ratio:20/12;image-rendering:pixelated;border:1px solid var(--line);border-radius:4px}
#brain{width:100%;flex:1;min-height:160px;border:1px solid var(--line);border-radius:4px}

.stage{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;position:relative;min-height:0}
#game{display:block;width:100%;height:100%}

/* labels */
.labels{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.lab{font-size:9px;color:var(--dim);letter-spacing:.5px}
.lab span{display:block;margin-bottom:2px}
.bar{height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transition:width .08s linear}
.quip{margin-top:auto;font-size:10px;color:var(--lime);opacity:.85;padding-top:10px;
  font-style:italic;line-height:1.4}

.legend{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:9px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block}
.legend i.pos{background:var(--cyan)}
.legend i.neg{background:var(--magenta)}
.legend i.jump{background:var(--lime);width:8px;height:8px;border-radius:50%}

/* controls */
#controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  padding:10px 14px;border-top:1px solid var(--line);background:rgba(13,13,28,.6)}
.btn{
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:1px;
  background:transparent;color:var(--cyan);border:1px solid var(--cyan);
  padding:7px 12px;border-radius:6px;cursor:pointer;transition:.15s;
}
.btn:hover{background:rgba(0,229,255,.12);box-shadow:0 0 14px rgba(0,229,255,.35)}
.btn.primary{color:#07070f;background:var(--cyan);border-color:var(--cyan)}
.btn.primary:hover{box-shadow:0 0 18px rgba(0,229,255,.6)}
.btn.danger{color:var(--magenta);border-color:var(--magenta)}
.btn.danger:hover{background:rgba(255,79,216,.12);box-shadow:0 0 14px rgba(255,79,216,.35)}
.ctrl{font-size:9px;color:var(--dim);letter-spacing:1px;display:flex;flex-direction:column;
  gap:3px;align-items:center}
.ctrl select,.ctrl input[type=range]{accent-color:var(--cyan)}
.ctrl select{font-family:inherit;background:#0d0d1c;color:var(--cyan);
  border:1px solid var(--line);border-radius:4px;padding:3px}
.ctrl input[type=range]{width:90px}
.ctrl.toggle{flex-direction:row;color:var(--dim)}
.ctrl.toggle input{accent-color:var(--cyan)}

/* footer */
#foot{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;
  font-size:9px;color:var(--dim);border-top:1px solid var(--line);gap:10px}
#foot a{color:var(--magenta);text-decoration:none;letter-spacing:1px}
#foot a:hover{text-shadow:0 0 10px rgba(255,79,216,.6)}
#modeNote{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* responsive: stack panels below the game on narrow screens */
@media (max-width:820px){
  body{overflow:auto}
  #app{height:auto;min-height:100dvh}
  #layout{grid-template-columns:1fr;grid-template-rows:none}
  .stage{order:-1;height:46vh;min-height:260px}
  .panel-left,.panel-right{max-height:none}
  #brain{min-height:200px}
  .stats{font-size:9px;gap:8px}
}
@media (max-width:820px){
  #controls .ctrl input[type=range]{width:110px}
}
</style>