/* Task 7 — arcade skin for the EmulatorJS virtual gamepad.
   Targets the generated DOM: .ejs_virtualGamepad_parent > .ejs_virtualGamepad_{left,right,bottom}
   with .ejs_virtualGamepad_button (+ per-button b_attack/b_jump/b_special/b_coin/b_start), and the
   nipplejs joystick zone (.nipple > .back = gate ring, .front = ball).
   All rules are scoped under .ejs_virtualGamepad_parent so they beat emulator.css's single-class
   base rules on specificity regardless of stylesheet load order (no !important needed for those). */

/* ---- Round arcade button caps (colour-coded, >=56px targets) ---- */
.ejs_virtualGamepad_parent .ejs_virtualGamepad_button {
  --cap: #d0d0d0;
  --cap-hi: #ffffff;
  width: 64px;
  height: 64px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
  /* EmulatorJS inlines font-size:30px on each button, so !important is required here.
     Narrow-ish sans at 11px so the longest label ("SPECIAL") fits inside a 64px cap. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #191919;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  border: 3px solid rgba(0, 0, 0, .55);
  border-radius: 50%;
  /* glossy cap: bright highlight top, colour body, dark rim shadow + drop for depth */
  background:
    radial-gradient(circle at 50% 32%, var(--cap-hi), var(--cap) 62%, color-mix(in srgb, var(--cap) 70%, #000) 100%);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, .45),
    0 6px 10px rgba(0, 0, 0, .45),
    inset 0 3px 4px rgba(255, 255, 255, .65),
    inset 0 -5px 8px rgba(0, 0, 0, .30);
  transition: transform .05s ease, box-shadow .05s ease, filter .05s ease;
}

/* colour-coded caps */
.ejs_virtualGamepad_parent .b_attack  { --cap: #e0332f; --cap-hi: #ff9a86; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.ejs_virtualGamepad_parent .b_jump    { --cap: #f2b90c; --cap-hi: #fff3b0; }
.ejs_virtualGamepad_parent .b_special { --cap: #2f7de0; --cap-hi: #9fc6ff; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); }

/* pressed state — cap sinks into its rim */
.ejs_virtualGamepad_parent .ejs_virtualGamepad_button_down {
  transform: translateY(4px);
  filter: brightness(.9);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .45),
    0 2px 4px rgba(0, 0, 0, .45),
    inset 0 3px 6px rgba(0, 0, 0, .40);
}

/* ---- Coin / Start pills. These are EmulatorJS "block" buttons: it inlines
   position:absolute + height:31px + magic left-offsets on them. Override to flow them as a
   centered flex row (see .ejs_virtualGamepad_bottom below) at a >=56px tap height. ---- */
.ejs_virtualGamepad_parent .b_coin,
.ejs_virtualGamepad_parent .b_start {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto;
  min-width: 74px;
  height: 56px !important;
  line-height: normal !important;
  padding: 0 16px;
  border-radius: 28px;
  font-size: 13px !important;
  background: radial-gradient(circle at 50% 30%, #4a4a4a, #202020 70%);
  color: #f4f4f4;
  border-color: rgba(0, 0, 0, .7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, .5),
    0 5px 9px rgba(0, 0, 0, .45),
    inset 0 2px 3px rgba(255, 255, 255, .25);
}
.ejs_virtualGamepad_parent .b_start { color: #7CFC9A; }

/* ---- Joystick: chrome ball + dark gate ring (nipplejs) ----
   nipplejs sets size/position inline, so override those with !important. */
.ejs_virtualGamepad_parent .nipple .back {
  width: 118px !important;
  height: 118px !important;
  margin-left: -59px !important;
  margin-top: -59px !important;
  opacity: .55 !important;
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 54%, rgba(0, 0, 0, .8) 100%) !important;
  border: 4px solid rgba(20, 20, 20, .85) !important;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .5) !important;
}
.ejs_virtualGamepad_parent .nipple .front {
  width: 62px !important;
  height: 62px !important;
  margin-left: -31px !important;
  margin-top: -31px !important;
  opacity: 1 !important;
  background: radial-gradient(circle at 38% 30%, #ffffff, #b8b8b8 40%, #444 100%) !important;
  border: 2px solid #111 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 -6px 10px rgba(0, 0, 0, .45) !important;
}

/* ---- Sit the pads in the bottom corners, out of the central playfield ----
   Slightly lower + inset; the whole pad is translucent so the action reads through it. */
.ejs_virtualGamepad_parent .ejs_virtualGamepad_left  { bottom: 26px; left: max(12px, env(safe-area-inset-left)); }
.ejs_virtualGamepad_parent .ejs_virtualGamepad_right { bottom: 26px; right: max(12px, env(safe-area-inset-right)); }
/* Center Coin+Start as a flex row (override EmulatorJS's fixed 124px / -62px margin bar). */
.ejs_virtualGamepad_parent .ejs_virtualGamepad_bottom {
  bottom: 10px;
  height: auto;
  width: auto;
  left: 50%;
  margin-left: 0;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}

/* Short viewports (landscape phones): pull everything tighter to the edges. */
@media (max-height: 480px) {
  .ejs_virtualGamepad_parent .ejs_virtualGamepad_left,
  .ejs_virtualGamepad_parent .ejs_virtualGamepad_right { bottom: 14px; }
  .ejs_virtualGamepad_parent .ejs_virtualGamepad_button { width: 58px; height: 58px; font-size: 11px !important; }
}