:root{
  --ink:#e8f4ff;
  --sky:#5aa9fb;
  --panel:#101820;
  --edge:#2d4356;
  --accent:#f2c14e;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background:#07090c;
  color:var(--ink);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
}

/* ─────────── game canvas ─────────── */

#stage{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
}

/* No image-rendering override: the backing store is already an integer multiple
   of the NES resolution, so the browser only ever scales it down, and a smooth
   downsample of sharp pixels beats a nearest-neighbour one. See renderer.js. */
#game{
  display:block;
  background:#000;
  box-shadow:0 0 0 2px #1b2a38, 0 24px 60px rgba(0,0,0,.7);
  cursor:none;
  touch-action:none;
}
#game.showcursor{cursor:crosshair}

/* ─────────── camera picture-in-picture ─────────── */

#cam{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:20;
  border-radius:10px;
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 1px var(--edge),0 10px 30px rgba(0,0,0,.6);
  pointer-events:none;
}
#cam[hidden]{display:none}
/* Sized in JS to the camera's own aspect ratio — see camPreview.js. */
#camView{display:block;width:280px;height:158px}
#camStatus{
  padding:5px 8px;
  font-size:11px;
  letter-spacing:.03em;
  color:#9fb4c6;
  background:#0c1218;
  text-align:center;
}
#camStatus.ok{color:#7ee08a}
#camStatus.fire{color:#ff8a5c}

/* ─────────── DOM menus ─────────── */

#ui{
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  pointer-events:none;
}
#ui:not(:has(.panel:not([hidden]))){display:none}

.panel{
  pointer-events:auto;
  width:min(440px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  overflow:auto;
  padding:26px 28px;
  background:rgba(16,24,32,.97);
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.75);
}
.panel[hidden]{display:none}

h1{
  margin:0 0 2px;
  font-size:40px;
  line-height:1;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--accent);
}
h1 span{color:var(--sky);margin-left:.28em}
h2{margin:0 0 14px;font-size:19px;letter-spacing:.02em}

.sub{margin:0 0 22px;color:#8ea6ba;font-size:13px}
.note{margin:14px 0 0;font-size:12px;color:#8ea6ba;min-height:1em}
.note.bad{color:#ff9d7a}

.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

button{
  flex:1 1 auto;
  padding:11px 16px;
  font:inherit;
  font-weight:600;
  color:var(--ink);
  background:#1b2836;
  border:1px solid var(--edge);
  border-radius:9px;
  cursor:pointer;
  transition:background .12s,border-color .12s,transform .06s;
}
button:hover{background:#243546;border-color:#3d5a72}
button:active{transform:translateY(1px)}
button[hidden]{display:none}
button.primary{background:var(--accent);border-color:var(--accent);color:#141007}
button.primary:hover{background:#ffd066;border-color:#ffd066}

label{display:block;margin:0 0 18px;font-size:13px;font-weight:600}
label small{display:block;margin-top:5px;font-weight:400;color:#7d93a6;font-size:11.5px}
label.row{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-weight:500}
label.row input{width:auto;margin:0}

output{float:right;color:var(--accent);font-variant-numeric:tabular-nums}

input[type=range]{width:100%;margin:9px 0 0;accent-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}

.keys{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin:20px 0 0;padding:16px 0 0;
  list-style:none;
  border-top:1px solid var(--edge);
  font-size:11.5px;color:#7d93a6;
}
.keys b{
  display:inline-block;min-width:15px;
  padding:1px 4px;margin-right:3px;
  text-align:center;
  color:var(--ink);background:#1b2836;
  border:1px solid var(--edge);border-radius:4px;
  font-size:10.5px;
}