*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;overflow:hidden;font-family:'Courier New',monospace;cursor:crosshair}
canvas{display:block;image-rendering:pixelated}
#file-input{display:none}

/* ── Tuning Toggle Button ── */
#tun-toggle{
  position:fixed;top:10px;right:10px;
  width:28px;height:28px;
  background:rgba(4,8,18,0.88);
  border:1px solid rgba(0,255,200,0.25);
  color:#00ffcc;font-size:14px;line-height:1;
  cursor:pointer;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  z-index:11;
  font-family:'Courier New',monospace;
  transition:background 0.15s,border-color 0.15s;
  backdrop-filter:blur(2px);
}
#tun-toggle:hover{
  background:rgba(0,255,200,0.15);
  border-color:rgba(0,255,200,0.6);
}
#tun-toggle.panel-open{
  right:198px;
  border-color:rgba(0,255,200,0.5);
}

/* ── Tuning Panel ── */
#tuning{
  position:fixed;top:10px;right:10px;
  width:188px;
  background:rgba(4,8,18,0.88);
  border:1px solid rgba(0,255,200,0.18);
  padding:8px 0 6px;
  font-family:'Courier New',monospace;
  font-size:11px;
  color:#6a8a9a;
  user-select:none;
  pointer-events:auto;
  z-index:10;
  backdrop-filter:blur(2px);
  transform-origin:top right;
  transition:opacity 0.18s ease, transform 0.18s ease;
  opacity:1;
  transform:scale(1);
}
#tuning.hidden{
  opacity:0;
  transform:scale(0.92) translateX(8px);
  pointer-events:none;
}
#tuning.hidden{display:none}
.tun-title{
  color:#00ffcc;font-size:10px;font-weight:bold;
  text-align:center;letter-spacing:2px;
  padding:0 10px 6px;border-bottom:1px solid rgba(0,255,200,0.12);
  margin-bottom:4px;
}
.tun-row{
  display:flex;align-items:center;
  padding:2px 8px;gap:3px;
  transition:background 0.1s;
}
.tun-row:hover{background:rgba(0,255,200,0.04)}
.tun-label{
  flex:1;color:#445566;font-size:10px;
  white-space:nowrap;overflow:hidden;
}
.tun-val{
  min-width:46px;text-align:center;
  color:#88bbcc;font-size:11px;font-weight:bold;
}
.btn-m,.btn-p{
  width:18px;height:17px;
  background:rgba(0,180,140,0.12);
  border:1px solid rgba(0,200,160,0.25);
  color:#00cc99;font-size:12px;line-height:1;
  cursor:pointer;border-radius:2px;
  flex-shrink:0;
  transition:background 0.1s,color 0.1s;
  font-family:'Courier New',monospace;
  display:flex;align-items:center;justify-content:center;
}
.btn-m:hover,.btn-p:hover{
  background:rgba(0,255,200,0.22);color:#fff;
  border-color:rgba(0,255,200,0.6);
}
.btn-m:active,.btn-p:active{background:rgba(0,255,200,0.38)}
.tun-sep{
  border-top:1px solid rgba(0,255,200,0.1);
  margin:5px 8px 3px;
}
.tun-info{
  padding:2px 12px;
  display:flex;justify-content:space-between;
  color:#334455;font-size:10px;
}
.tun-info span{color:#6699aa}
.tun-fog-pct .tun-label{color:#aaff0088}
.tun-fog-pct .tun-val{color:#aaff00}
.tun-fog-pct .btn-m,.tun-fog-pct .btn-p{
  border-color:rgba(170,255,0,0.3);color:#88cc00;
  background:rgba(100,200,0,0.08);
}
.tun-fog-pct .btn-m:hover,.tun-fog-pct .btn-p:hover{
  background:rgba(170,255,0,0.2);color:#ccff00;
  border-color:rgba(170,255,0,0.7);
}
.zoom-derived{
  padding:2px 12px;display:flex;justify-content:space-between;
  color:#334455;font-size:10px;margin-top:1px;
}
.zoom-derived span{color:#aaff0077}

/* ── Volume Slider ── */
.vol-slider{
  flex:1;height:3px;-webkit-appearance:none;appearance:none;
  background:rgba(0,255,200,0.2);border-radius:2px;cursor:pointer;margin:0 4px;
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:10px;
  background:#00ffcc;border-radius:50%;cursor:pointer;
}
.vol-slider::-moz-range-thumb{
  width:10px;height:10px;background:#00ffcc;border-radius:50%;cursor:pointer;border:none;
}

/* ── Start Screen ── */
#start-screen{
  position:fixed;inset:0;z-index:200;
}
#start-bg{
  position:absolute;inset:0;
  background:url('../gfx/cover2.jpeg') center/cover no-repeat;
}
#start-center{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:22px;text-align:center;
}
#start-logo{
  font-family:'Courier New',monospace;
  font-size:54px;font-weight:bold;
  color:#00ffcc;letter-spacing:12px;
  text-shadow:0 0 30px rgba(0,255,200,0.5),0 0 60px rgba(0,255,200,0.25);
}
@keyframes rainbow-btn{
  0%  {color:#ff2244;border-color:#ff2244;box-shadow:0 0 18px #ff2244,0 0 40px rgba(255,34,68,0.3)}
  14% {color:#ff8800;border-color:#ff8800;box-shadow:0 0 18px #ff8800,0 0 40px rgba(255,136,0,0.3)}
  28% {color:#ffee00;border-color:#ffee00;box-shadow:0 0 18px #ffee00,0 0 40px rgba(255,238,0,0.3)}
  42% {color:#aaff00;border-color:#aaff00;box-shadow:0 0 18px #aaff00,0 0 40px rgba(170,255,0,0.3)}
  57% {color:#00ffcc;border-color:#00ffcc;box-shadow:0 0 18px #00ffcc,0 0 40px rgba(0,255,200,0.3)}
  71% {color:#4488ff;border-color:#4488ff;box-shadow:0 0 18px #4488ff,0 0 40px rgba(68,136,255,0.3)}
  85% {color:#dd44ff;border-color:#dd44ff;box-shadow:0 0 18px #dd44ff,0 0 40px rgba(221,68,255,0.3)}
  100%{color:#ff2244;border-color:#ff2244;box-shadow:0 0 18px #ff2244,0 0 40px rgba(255,34,68,0.3)}
}
#start-btn{
  font-family:'Courier New',monospace;
  font-size:15px;font-weight:bold;letter-spacing:4px;
  background:rgba(0,0,0,0.3);
  border:1px solid;
  padding:12px 48px;cursor:pointer;
  animation:rainbow-btn 0.4s linear infinite;
}
#start-btn:hover{background:rgba(255,255,255,0.08)}
#start-btn:active{background:rgba(255,255,255,0.18)}
#level-select{
  font-family:'Courier New',monospace;
  font-size:12px;color:#00ffcc;
  background:rgba(2,5,14,0.88);
  border:1px solid rgba(0,255,200,0.25);
  padding:7px 16px;cursor:pointer;
  min-width:200px;text-align:center;
  -webkit-appearance:none;appearance:none;
  outline:none;
}
#level-select option{background:#02050e;color:#00ffcc}
#level-select:focus{border-color:rgba(0,255,200,0.55)}
#start-info{
  position:absolute;
  bottom:20px;right:20px;
  width:340px;
  max-height:52vh;
  display:flex;flex-direction:column;
  background:rgba(2,5,14,0.9);
  border:1px solid rgba(0,255,200,0.2);
  backdrop-filter:blur(4px);
}
#start-info-title{
  padding:9px 16px 7px;
  border-bottom:1px solid rgba(0,255,200,0.12);
  font-family:'Courier New',monospace;
  font-size:10px;font-weight:bold;
  color:#00ffcc;letter-spacing:2px;flex-shrink:0;
}
#start-help-body{
  flex:1;overflow-y:auto;
  padding:10px 16px 12px;
  scrollbar-width:thin;scrollbar-color:rgba(0,255,200,0.3) transparent;
}
#start-help-body::-webkit-scrollbar{width:5px}
#start-help-body::-webkit-scrollbar-track{background:transparent}
#start-help-body::-webkit-scrollbar-thumb{background:rgba(0,255,200,0.3);border-radius:3px}
.sc-gap{height:14px}
.sc-head{
  font-family:'Courier New',monospace;
  font-size:13px;font-weight:bold;
  color:#00ffcc;margin:10px 0 5px;
}
.sc-ctrl{
  display:flex;align-items:baseline;gap:12px;
  font-family:'Courier New',monospace;font-size:12px;
  margin:3px 0;
}
.sc-key{
  color:rgba(0,255,200,0.75);font-weight:bold;
  min-width:148px;flex-shrink:0;
}
.sc-desc{color:rgba(210,225,235,0.8)}
.sc-tile-row{
  display:flex;align-items:center;gap:10px;
  font-family:'Courier New',monospace;font-size:12px;
  margin:3px 0;
}
.sc-tile-col{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:bold;
  font-family:'Courier New',monospace;
}
.sc-tile-img{
  width:22px;height:22px;flex-shrink:0;
  image-rendering:pixelated;
}
.sc-tile-name{
  color:rgba(255,255,255,0.9);font-weight:bold;min-width:130px;flex-shrink:0;
}
.sc-tile-desc{color:rgba(160,185,205,0.75)}
.sc-rule{
  display:flex;gap:8px;align-items:baseline;
  font-family:'Courier New',monospace;font-size:12px;
  margin:2px 0;color:rgba(185,205,220,0.8);
}
.sc-bullet{color:rgba(0,255,200,0.5)}