:root{
  --chrome:#c3c7cb; --chrome-dark:#7b7f83; --chrome-light:#fdfdfd;
  --neon:#00ffe1; --mag:#ff00c8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:#050508;
  color:#e0e0e0;
  font-family:'VT323',monospace;
  display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
  user-select:none;
}

/* ---- Title bar ---- */
#titlebar{
  background:linear-gradient(180deg,#1a1a2e,#0d0d1a);
  border-bottom:2px solid #000;
  padding:6px 12px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.tb-title{
  font-family:'Silkscreen',monospace; font-weight:700;
  font-size:18px; letter-spacing:1px; color:#fff;
  text-shadow:-2px 0 #ff00c8, 2px 0 #00ffe1;
}
.tb-status{
  font-size:18px; color:#00ff66;
  letter-spacing:.5px; opacity:.85;
  animation:flick 1.6s infinite steps(2);
}
@keyframes flick{0%,97%{opacity:.85}98%,100%{opacity:.3}}

/* ---- Stage ---- */
#stage{
  position:relative; flex:1; min-height:0;
  background:#0a0a12; overflow:hidden;
}
#canvas{ display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; }
#crtOverlay{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}

/* ---- Controls ---- */
#controls{
  background:var(--chrome);
  border-top:2px solid var(--chrome-light);
  padding:8px 12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:center;
}
.ctrl-group{
  display:flex; align-items:center; gap:8px;
  background:#a8acb0; padding:4px 10px;
  border:2px inset #eee;
}
.ctrl-group label{
  font-family:'Silkscreen',monospace; font-size:11px; color:#111;
}
.ctrl-group span{ font-size:18px; color:#000080; min-width:32px; }
input[type=range]{ width:120px; accent-color:#000080; }

.btn{
  font-family:'Silkscreen',monospace; font-size:11px;
  background:var(--chrome);
  border:2px outset var(--chrome-light);
  color:#111; padding:8px 12px; cursor:pointer;
  box-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.btn:active{ border-style:inset; transform:translate(1px,1px); box-shadow:none; }
.btn.crash{ background:#d43; color:#fff; border-color:#f66 #900 #900 #f66; }
.btn.crash:hover{ background:#e54; }

/* ---- Footer ---- */
#footer{
  background:#0d0d1a; border-top:2px solid #000;
  padding:5px 12px; display:flex; justify-content:space-between;
  align-items:center; font-size:16px; color:#666; flex-wrap:wrap; gap:6px;
}
#footer a{ color:#00ffe1; text-decoration:none; }
#footer a:hover{ text-decoration:underline; text-shadow:0 0 6px #00ffe1; }

/* ---- Splash ---- */
#splash{
  position:fixed; inset:0; z-index:100;
  background:linear-gradient(135deg,#2a2a3a,#0d0d15);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s, filter .6s;
}
#splash.dead{ opacity:0; filter:blur(8px) hue-rotate(90deg); pointer-events:none; }
.splash-inner{ text-align:center; }
.mm-logo{
  font-family:'Silkscreen',monospace; font-size:80px; font-weight:700;
  color:#fff; background:#c33; width:120px; height:120px; line-height:120px;
  margin:0 auto 20px; border-radius:12px;
  box-shadow:0 8px 30px rgba(204,51,51,.6);
  animation:pulse 1s infinite alternate;
}
@keyframes pulse{to{transform:scale(1.06);box-shadow:0 8px 45px rgba(204,51,51,.9);}}
.mm-text{ font-family:'Silkscreen',monospace; font-size:22px; color:#eee; letter-spacing:2px; }
.mm-text span{ font-size:12px; vertical-align:super; }
.mm-text sup{ font-size:11px; color:#c33; }
.mm-load{ margin-top:18px; font-size:22px; color:#00ff66; }

@media (max-width:520px){
  .tb-status{ font-size:14px; }
  .tb-title{ font-size:15px; }
  input[type=range]{ width:80px; }
  .btn{ font-size:9px; padding:6px 8px; }
}