/* ===================== Buttons Styling (Outset / Raised) ===================== */
:root {
  /* Radius from tire center to buttons (relative to .tire-wrapper) */
  --orbit-r: 41%;

  /* Button size (keep vh or switch to % of tire wrapper if desired) */
  --btn-size: 8vh;

  /* Micro-nudges (px or %) to fine-tune each button after math) */
  --btn-top-nx: 0;    --btn-top-ny: 0;
  --btn-1h-nx: 0;     --btn-1h-ny: 0;
  --btn-2h-nx: 0;     --btn-2h-ny: 0;
}

.button {
  position: absolute;      /* polar anchoring around tire center */
  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: auto;           /* ✅ clickable even if parent was blocking */
  z-index: 10;                    /* ✅ above tire/chain */
  transform: translate(-50%, -50%);

  /* Base look */
  background-color: #b8b5b9;
  color: #252446 !important;
  border-radius: 50%;
  width: var(--btn-size);
  height: var(--btn-size);
  font-size: clamp(12px, 2.2vmin, 22px);
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;

  /* Keep geometry fixed (no jiggle) */
  border: 0.5vh solid transparent;      /* constant border width */
  transform: translate(-50%, -50%);

  /* Outset appearance: layered highlights + shadow */
  /* Subtle sheen + top-left highlight, bottom-right depth */
  background-image:
    linear-gradient(145deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 45%),
    radial-gradient(120% 120% at 32% 26%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
  box-shadow:
    0.8vh 1.2vh 1.6vh rgba(0,0,0,0.35),       /* drop shadow */
    inset 0 0 0 0.25vh rgba(0,0,0,0.06);      /* faint inner darkening */

  /* Pleasant but stable transitions (no movement) */
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

/* Optional glossy ring */
.button::before {
  content: "";
  position: absolute;
  inset: 0.55vh;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.75), rgba(255,255,255,0));
  opacity: 0.45;
  pointer-events: none;
}

/* Disabled */
.button:disabled {
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  background-color: #b8b5b9;
  color: #5f556a !important;
}

/* Hover (slightly brighter & higher) */
.button:hover {
  box-shadow:
    1.0vh 1.5vh 2.0vh rgba(0,0,0,0.38),
    -0.55vh -0.55vh 1.0vh rgba(255,255,255,0.6),
    inset 0 0 0 0.25vh rgba(0,0,0,0.05);
}

/* Focus (accessible ring, no movement) */
.button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.35vh rgba(162, 220, 199, 0.85),   /* mint ring */
    0.9vh 1.3vh 1.8vh rgba(0,0,0,0.34),
    -0.5vh -0.5vh 0.9vh rgba(255,255,255,0.5),
    inset 0 0 0 0.25vh rgba(0,0,0,0.06);
}

/* Active / Pressed (inset for “pressed” look, same border width) */
.button:active,
.button.active {
  background-color: #203562 !important;
  color: #0ce6f2 !important;
  border-color: #0ce6f2;   /* only color changes; width constant */
  box-shadow:
    inset 0.7vh 0.7vh 1.2vh rgba(0,0,0,0.45),
    inset -0.6vh -0.6vh 1.2vh rgba(255,255,255,0.2);
}

/* (Legacy) .bottom:hover kept for compatibility */
.bottom:hover {
  background-color: #b8b5b9 !important;
  color: #4b80ca !important;
}

/* ===================== Positions (12:00, ~1:00, ~2:00) ===================== */
/* Using your tuned multipliers (kept exactly) + per-button micro-nudges. */
.button-top {
  top:  calc(50% - calc(var(--orbit-r) * 1.07));
  left: calc(50% + calc(var(--orbit-r) * -0.18));
  transform: translate(calc(-50% + var(--btn-top-nx)),
                       calc(-50% + var(--btn-top-ny)));
}
.button-1oclock {
  top:  calc(50% - calc(var(--orbit-r) * 0.9));
  left: calc(50% + calc(var(--orbit-r) * 0.32));
  transform: translate(calc(-50% + var(--btn-1h-nx)),
                       calc(-50% + var(--btn-1h-ny)));
}
.button-2oclock {
  top:  calc(50% - calc(var(--orbit-r) * 0.5));
  left: calc(50% + calc(var(--orbit-r) * 0.63));
  transform: translate(calc(-50% + var(--btn-2h-nx)),
                       calc(-50% + var(--btn-2h-ny)));
}

:root {
  /* existing nudge vars */
  --btn-top-nx: 0;    --btn-top-ny: 0;
  --btn-1h-nx: 0;     --btn-1h-ny: 0;
  --btn-2h-nx: 0;     --btn-2h-ny: 0;

  /* ⬇️ new nudge vars for 3:00 and ~4:00 */
  --btn-3h-nx: 0;     --btn-3h-ny: 0;
  --btn-4h-nx: 0;     --btn-4h-ny: 0;
}

/* already have: .button-top, .button-1oclock, .button-2oclock */

/* 3 o’clock (right side). Slight vertical bias keeps it inside the rim. */
.button-3oclock {
  top:  calc(50% + calc(var(--orbit-r) * 0.00));
  left: calc(50% + calc(var(--orbit-r) * 0.64));
  transform: translate(calc(-50% + var(--btn-3h-nx)),
                       calc(-50% + var(--btn-3h-ny)));
}

/* ~4 o’clock (mirror of your 2 o’clock below the centerline) */
.button-4oclock {
  top:  calc(50% + calc(var(--orbit-r) * 0.50));
  left: calc(50% + calc(var(--orbit-r) * 0.63));
  transform: translate(calc(-50% + var(--btn-4h-nx)),
                       calc(-50% + var(--btn-4h-ny)));
}