#app {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh;
  background: #274a1f;
}

#gameCanvas {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
}

.joystick {
  position: fixed;
  left: 26px; bottom: 26px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 3px solid rgba(255,255,255,0.35);
  z-index: 40;
  touch-action: none;
}
.joystick-knob {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  border: 3px solid rgba(255,255,255,0.9);
  transform: translate(-50%, -50%);
  transition: transform 0.03s linear;
  pointer-events: none;
}

@media (min-width: 900px) {
  .joystick { display: none !important; }
}

.dash-btn {
  position: fixed;
  right: 26px; bottom: 26px;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
  z-index: 40;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
  padding: 0;
  overflow: hidden;
}
.dash-btn:active:not(.on-cooldown) { transform: translateY(2px); box-shadow: none; }
.dash-btn.on-cooldown { opacity: 0.85; }
.dash-btn-icon {
  font-size: 30px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
  position: relative;
  z-index: 2;
  transform: scaleX(-1); /* dash icon reads better facing the player's forward direction */
}
.dash-btn-cooldown {
  position: absolute; inset: 0;
  border-radius: 50%;
  /* Radial "pie" wipe: fully covers the button right after a dash, then
     shrinks smoothly back to nothing as --pct counts down to 0 (ready). */
  background: conic-gradient(rgba(40,30,20,0.55) calc(var(--pct, 0) * 360deg), transparent 0);
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 900px) {
  .dash-btn { width: 64px; height: 64px; right: 22px; bottom: 22px; }
  .dash-btn-icon { font-size: 24px; }
}