/* style.css — Unlikely Hero */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#0d0820; overflow:hidden;
  font-family:'Courier New',monospace;
  touch-action:none; user-select:none;
  display:flex; flex-direction:column; height:100dvh;
}
#game-wrapper { flex:1; min-height:0; position:relative; overflow:hidden; }
canvas#game { display:block; width:100%; height:100%; image-rendering:pixelated; }
#controls {
  height:170px; flex-shrink:0; background:rgba(0,0,0,0.6);
  border-top:1px solid rgba(140,100,255,0.2);
  display:flex; align-items:center; justify-content:space-between; padding:0 44px;
}
#joystick-zone {
  width:130px; height:130px;
  display:flex; align-items:center; justify-content:center; touch-action:none;
}
#joystick-base {
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:2px solid rgba(255,255,255,0.14);
  position:relative;
}
#joystick-knob {
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffd66b,#d4620a);
  border:2px solid rgba(255,255,255,0.22); box-shadow:0 4px 14px rgba(0,0,0,0.5);
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.joystick-label {
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  color:rgba(255,214,107,0.55); font-size:9px; letter-spacing:1px;
  text-transform:uppercase; white-space:nowrap; pointer-events:none;
}
#jump-zone {
  width:130px; height:130px;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; position:relative;
}
#jump-btn {
  width:78px; height:78px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#a78bfa,#5b21b6);
  border:2px solid rgba(255,255,255,0.2); box-shadow:0 4px 18px rgba(109,40,217,0.45);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:white; pointer-events:none; gap:2px;
  transition:transform 0.08s, box-shadow 0.08s, background 0.08s;
  position:relative; z-index:1;
}
#jump-btn.charging {
  transform:scale(0.86);
  box-shadow:0 2px 8px rgba(109,40,217,0.25);
  background:radial-gradient(circle at 35% 35%,#7c3aed,#3b0764);
}
.btn-icon  { font-size:22px; line-height:1; }
.btn-label { font-size:9px; letter-spacing:1px; opacity:0.8; text-transform:uppercase; }
#charge-canvas {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:0;
}