:root{
  --bg:#0a0616;
  --panel:#160c2e;
  --accent:#fde047;
  --accent2:#22d3ee;
  --purple:#a78bfa;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  height:100%;
  background:
    radial-gradient(circle at 20% 10%, #241148 0%, transparent 55%),
    radial-gradient(circle at 85% 90%, #0e2a3a 0%, transparent 55%),
    var(--bg);
  color:#e9d5ff;
  font-family:"Space Mono", monospace;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
#game-wrap{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px;
  gap:8px;
}
#stage{
  position:relative;
  flex:1;
  width:100%;
  max-width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
#canvas{
  display:block;
  border-radius:8px;
  box-shadow:
    0 0 0 3px #3b2168,
    0 0 30px rgba(167,139,250,0.45),
    0 18px 50px rgba(0,0,0,0.6);
  image-rendering:pixelated;
}
#scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.10) 3px
  );
  border-radius:8px;
  mix-blend-mode:multiply;
  z-index:5;
}
#touch-controls{
  position:absolute;
  bottom:6px;
  left:0; right:0;
  display:none;
  justify-content:space-between;
  padding:0 6px;
  z-index:10;
  gap:6px;
}
.tbtn{
  font-family:"Press Start 2P", monospace;
  font-size:12px;
  color:var(--accent);
  background:rgba(59,33,104,0.7);
  border:2px solid var(--purple);
  border-radius:12px;
  padding:16px 0;
  flex:1;
  backdrop-filter:blur(2px);
  cursor:pointer;
  transition:transform .06s, background .1s;
}
.tbtn:active{ transform:scale(0.94); background:rgba(167,139,250,0.4); }
#btn-jump{ flex:1.3; color:#4ade80; border-color:#4ade80; }
#controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
.hint{
  font-size:11px;
  color:#8b7bb8;
  letter-spacing:0.5px;
}
#remix{
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  color:var(--accent2);
  text-decoration:none;
  padding:4px 8px;
  border:1px solid rgba(34,211,238,0.4);
  border-radius:6px;
  transition:all .15s;
}
#remix:hover{
  color:#fff;
  background:rgba(34,211,238,0.15);
  border-color:var(--accent2);
}
@media (hover:none), (max-width:640px){
  #touch-controls{ display:flex; }
  .hint{ display:none; }
}