:root {
  color-scheme: dark;
  --bg: #0b0e22;
  --ink: #f3ecd8;
  --muted: #b9b4c8;
  --tram: #f2bf2a;
  --azul: #2d5da8;
  --rosa: #e0588f;
  --line: rgba(243, 236, 216, 0.3);
}
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body {
  font-family: Chivo, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  touch-action: none;
}
#game {
  position: fixed;
  top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
}
#game canvas { display: block; outline: none; }

/* controlos tácteis */
#touch { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; }
body.touch.playing #touch { display: block; }
#stickZone { position: absolute; left: 0; top: 22%; bottom: 0; width: 48%; pointer-events: auto; touch-action: none; }
#stickGhost {
  position: absolute; width: 112px; height: 112px; border-radius: 50%;
  left: calc(34px + env(safe-area-inset-left, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  border: 2px dashed var(--line); opacity: 0.8; transition: opacity 0.2s;
}
#stickZone.active #stickGhost { opacity: 0; }
#stick {
  position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%;
  border: 2px solid var(--line); background: rgba(11, 14, 34, 0.35);
}
#knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(243, 236, 216, 0.88); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
#pad {
  position: absolute; width: 164px; height: 160px; pointer-events: none;
  right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.btn {
  position: absolute; width: 70px; height: 70px; border-radius: 50%; border: 0; padding: 0;
  font: 400 10px/1 Bungee, Impact, "Arial Black", sans-serif; letter-spacing: 0.03em;
  color: var(--bg); pointer-events: auto; touch-action: none;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.18);
  opacity: 0.62; display: grid; place-items: center; cursor: pointer;
}
.btn.on { transform: translateY(4px) scale(0.96); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); opacity: 1; }
.btn[data-b="punch"] { left: 0; bottom: 0; width: 80px; height: 80px; background: var(--tram); font-size: 12px; }
.btn[data-b="kick"] { left: 92px; bottom: 36px; background: var(--azul); color: var(--ink); }
.btn[data-b="jump"] { left: 8px; top: 0; background: var(--rosa); color: var(--ink); }
.btn[data-b="duck"] { left: 104px; top: -30px; width: 58px; height: 58px; background: #9dff8a; color: #0b0e22; font-size: 9px; }