html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #000; color: #b2b2b2;
  font-family: "C64", "Courier New", monospace;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
canvas#screen { display: block; outline: none; image-rendering: pixelated; }
body.modern canvas#screen { image-rendering: auto; }
.hidden { display: none !important; }

/* ---------- settings / menu overlay (C64 look by default) ---------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); z-index: 10;
}
.panel {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  background: #2e2c9b; color: #706deb; border: 12px solid #706deb;
  padding: 18px 22px; box-sizing: border-box;
  font-family: "Courier New", monospace; font-weight: bold; letter-spacing: 1px;
}
.panel h1 { margin: 0 0 12px; font: 18px 'Press Start 2P', 'Courier New', monospace; color: #fff; text-align: center; letter-spacing: 2px; }
.panel h2 { margin: 14px 0 8px; font: 11px 'Press Start 2P', 'Courier New', monospace; color: #edf171; text-transform: uppercase; }
.panel section { border-top: 2px dashed #706deb; padding-top: 4px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 7px 0; font-size: 14px; color: #b2b2ff; }
.row input[type=range] { width: 180px; accent-color: #edf171; }
.row input[type=checkbox] { width: 20px; height: 20px; accent-color: #edf171; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choices button, .buttons button {
  font: inherit; font-size: 14px; cursor: pointer; padding: 8px 14px;
  background: #2e2c9b; color: #b2b2ff; border: 2px solid #706deb;
}
.choices.small button { padding: 4px 10px; font-size: 13px; }
.choices button.active { background: #706deb; color: #fff; }
.choices button:hover, .buttons button:hover { background: #4b49c8; color: #fff; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.buttons button.primary { background: #edf171; color: #000; border-color: #edf171; }
.keys { font-size: 12px; color: #9a98f0; line-height: 1.5; }

.corner-btn {
  position: fixed; top: 10px; right: 12px; z-index: 5;
  width: 38px; height: 38px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.55); font-size: 20px; cursor: pointer;
}
.corner-btn:hover { color: #fff; background: rgba(0,0,0,0.6); }

/* ---------- modern theme ---------- */
body.modern .panel {
  background: linear-gradient(160deg, rgba(22,28,48,0.96), rgba(10,12,22,0.97));
  color: #cfd8ff; border: 1px solid rgba(140,170,255,0.25); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif; letter-spacing: 0.3px; font-weight: 600;
  backdrop-filter: blur(10px);
}
body.modern .panel h1 { font-family: "Orbitron", sans-serif; font-weight: 900; color: #ffd43a; text-shadow: 0 0 18px rgba(255,190,40,0.5); }
body.modern .panel h2 { font-family: "Orbitron", sans-serif; font-size: 13px; color: #8fb0ff; letter-spacing: 2px; }
body.modern .panel section { border-top: 1px solid rgba(255,255,255,0.08); }
body.modern .row { color: #dfe6ff; font-size: 16px; }
body.modern .row input[type=range], body.modern .row input[type=checkbox] { accent-color: #ffd43a; }
body.modern .choices button, body.modern .buttons button {
  background: rgba(255,255,255,0.06); color: #dfe6ff; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; font-size: 15px;
}
body.modern .choices button.active { background: #ffd43a; color: #1a1300; border-color: #ffd43a; }
body.modern .choices button:hover, body.modern .buttons button:hover { background: rgba(255,255,255,0.14); color: #fff; }
body.modern .choices button.active:hover { background: #ffe066; color: #1a1300; }
body.modern .buttons button.primary { background: #ffd43a; color: #1a1300; border-color: #ffd43a; }
body.modern .keys { color: #8f9bc4; font-size: 14px; }
body.modern .c64only { display: none; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: auto 0 0 0; height: 0; z-index: 4; }
#stick {
  position: fixed; left: 24px; bottom: 24px; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.18); touch-action: none;
}
#stick .knob {
  position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,0.28);
}
#firebtn {
  position: fixed; right: 28px; bottom: 36px; width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255,60,60,0.3); border: 2px solid rgba(255,120,120,0.5); color: rgba(255,255,255,0.8);
  display: flex; align-items: center; justify-content: center; font: bold 15px sans-serif; touch-action: none;
}