/* ==========================================================================
   JUNGLE SAFARI — GEL BUTTON SYSTEM
   Loaded AFTER style.css, so it overrides the flat pills without editing a
   single line of the original stylesheet. Delete this file and the game
   reverts exactly as it was.

   The anatomy of a button that feels good to press:

     1. A HARD BOTTOM EDGE (box-shadow 0 Npx 0 <dark>) — the button has a
        physical side wall, so it reads as a solid object sitting on the page.
     2. A SPECULAR HIGHLIGHT across the top half (::before) — the gel gloss.
     3. AN INNER RIM: white inset at the top, dark inset at the bottom.
     4. ON PRESS: the button travels DOWN by exactly the height of its side
        wall, and the wall shrinks to nothing. It genuinely bottoms out
        against the page. That 1:1 relationship is the whole trick — get it
        wrong and the press feels mushy.
     5. A RIPPLE from the exact point of contact (added by js/buttons.js).

   Motion is disabled under prefers-reduced-motion; the bevel stays.
   ========================================================================== */

:root {
  --btn-drop: 6px;          /* height of the side wall = travel on press */
  --btn-drop-sm: 4px;
  --btn-ease: cubic-bezier(0.2, 0.9, 0.25, 1.1);
}

/* --------------------------------------------------------------------------
   SHARED CHASSIS
   -------------------------------------------------------------------------- */
.primary-btn,
.secondary-btn,
.ghost-btn,
.shop-btn,
.grade-chip,
.name-chip,
.studio-tab,
.sound-btn,
.avatar-pick,
.comp-pick {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-style: solid;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 0.12s var(--btn-ease),
    box-shadow 0.12s var(--btn-ease),
    filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* The gel gloss: a soft specular sheen across the upper half. */
.primary-btn::before,
.secondary-btn::before,
.ghost-btn::before,
.shop-btn::before,
.sound-btn::before,
.grade-chip::before,
.name-chip::before {
  content: "";
  position: absolute;
  inset: 2px 2px 45% 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.14) 55%,
    rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Hover: the button rises a little and brightens. */
.primary-btn:hover:not(:disabled),
.secondary-btn:hover:not(:disabled),
.ghost-btn:hover:not(:disabled),
.shop-btn:hover:not(:disabled),
.sound-btn:hover:not(:disabled),
.grade-chip:hover,
.name-chip:hover,
.studio-tab:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.04);
}

/* --------------------------------------------------------------------------
   THE PRESS — travel down by exactly the side-wall height
   -------------------------------------------------------------------------- */
.primary-btn:active:not(:disabled),
.secondary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.shop-btn:active:not(:disabled),
.sound-btn:active:not(:disabled),
.grade-chip:active,
.name-chip:active,
.primary-btn.is-pressing,
.secondary-btn.is-pressing,
.ghost-btn.is-pressing,
.shop-btn.is-pressing,
.sound-btn.is-pressing,
.grade-chip.is-pressing,
.name-chip.is-pressing {
  transform: translateY(var(--btn-drop));
  filter: brightness(0.97);
  transition-duration: 0.04s;   /* down fast, up slow — that is what "snappy" is */
}

/* --------------------------------------------------------------------------
   PRIMARY — polished gold gel on a wooden wall
   -------------------------------------------------------------------------- */
.primary-btn {
  border-width: 2px;
  border-color: #f7e3ac;
  border-radius: 0.85rem;
  padding: 0.72rem 1.5rem;
  color: #3f2c07;
  background:
    linear-gradient(180deg, #ffe9a8 0%, #f1d281 38%, #d9a93f 62%, #c08f28 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 3px rgba(120, 84, 12, 0.35),
    0 var(--btn-drop) 0 #8a640f,
    0 calc(var(--btn-drop) + 2px) 10px rgba(30, 20, 4, 0.4);
}

.primary-btn:active:not(:disabled),
.primary-btn.is-pressing {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 3px 7px rgba(120, 84, 12, 0.45),
    0 0 0 #8a640f,
    0 1px 3px rgba(30, 20, 4, 0.4);
}

/* --------------------------------------------------------------------------
   SECONDARY — deep emerald gel
   -------------------------------------------------------------------------- */
.secondary-btn {
  border-width: 2px;
  border-color: rgba(126, 214, 160, 0.55);
  border-radius: 0.85rem;
  padding: 0.72rem 1.5rem;
  color: #eafbf1;
  background:
    linear-gradient(180deg, #45a06d 0%, #2f8a58 38%, #1d5638 64%, #163f2b 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    0 var(--btn-drop) 0 #0f2f21,
    0 calc(var(--btn-drop) + 2px) 10px rgba(4, 18, 10, 0.45);
}

.secondary-btn::before { background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0)); }

.secondary-btn:active:not(:disabled),
.secondary-btn.is-pressing {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 3px 7px rgba(0, 0, 0, 0.4),
    0 0 0 #0f2f21,
    0 1px 3px rgba(4, 18, 10, 0.4);
}

/* --------------------------------------------------------------------------
   GHOST — carved parchment. Used all over the header.
   -------------------------------------------------------------------------- */
.ghost-btn {
  border-width: 2px;
  border-color: #d9c091;
  border-radius: 0.75rem;
  padding: 0.55rem 1.1rem;
  color: #5a4520;
  background:
    linear-gradient(180deg, #fdf6e4 0%, #f4e6c4 45%, #e6d2a6 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(140, 108, 50, 0.22),
    0 var(--btn-drop-sm) 0 #b39a68,
    0 calc(var(--btn-drop-sm) + 2px) 8px rgba(40, 28, 10, 0.3);
}

.ghost-btn:active:not(:disabled),
.ghost-btn.is-pressing {
  transform: translateY(var(--btn-drop-sm));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 3px 6px rgba(140, 108, 50, 0.3),
    0 0 0 #b39a68,
    0 1px 2px rgba(40, 28, 10, 0.3);
}

.ghost-btn:disabled,
.primary-btn:disabled,
.secondary-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.45);
  opacity: 0.55;
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   SIZES & VARIANTS
   -------------------------------------------------------------------------- */
.large-btn {
  --btn-drop: 7px;
  padding: 0.95rem 2rem;
  font-size: 1.06rem;
  border-radius: 1rem;
}

.shop-btn { --btn-drop: 4px; border-width: 2px; border-radius: 0.6rem; }
.shop-btn.is-equipped { --btn-drop: 0px; transform: none; }

.sound-btn { --btn-drop: 4px; border-width: 2px; }

/* The boss CTA keeps its red, but gains the same physical wall. */
.boss-cta {
  border-color: #ffb9a4 !important;
  background: linear-gradient(180deg, #f4826c 0%, #e8624a 40%, #b8341f 100%) !important;
  color: #fff4ee !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 3px rgba(90, 20, 8, 0.4),
    0 var(--btn-drop) 0 #7e1f12,
    0 calc(var(--btn-drop) + 2px) 12px rgba(60, 12, 6, 0.5) !important;
}
.boss-cta:active,
.boss-cta.is-pressing {
  box-shadow:
    inset 0 3px 7px rgba(90, 20, 8, 0.5),
    0 0 0 #7e1f12 !important;
}

/* Chips: smaller wall, same physics. */
.grade-chip,
.name-chip { --btn-drop: 3px; border-width: 2px; }

.grade-chip {
  border-color: rgba(226, 187, 87, 0.5);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.grade-chip.is-on {
  border-color: #f7e3ac;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 0 #8a640f, 0 0 0 3px rgba(226,187,87,0.18);
}

.name-chip {
  border-color: #d9c091;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 0 #b39a68;
}
.name-chip.is-on { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 0 #8a640f, 0 0 0 3px rgba(226,187,87,0.22); }

/* Avatar & companion picks: pop rather than travel. */
.avatar-pick:active,
.comp-pick:not(.is-locked):active { transform: scale(0.93); transition-duration: 0.04s; }

/* --------------------------------------------------------------------------
   LETTER TILES — the most-pressed object in the game.
   Keep the wood, add the gloss and a real bottom-out.
   -------------------------------------------------------------------------- */
.tile-btn {
  position: relative;
  isolation: isolate;
  transition: transform 0.1s var(--btn-ease), box-shadow 0.1s var(--btn-ease), filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tile-btn::after {
  content: "";
  position: absolute;
  inset: 3px 3px 52% 3px;
  z-index: -1;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.tile-btn:hover:not(.used) { transform: translateY(-2px); filter: brightness(1.07); }

.tile-btn:active:not(.used),
.tile-btn.is-pressing {
  transform: translateY(6px);
  transition-duration: 0.04s;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 4px 8px rgba(74, 44, 16, 0.5),
    0 0 0 var(--wood-800),
    0 2px 4px rgba(60, 38, 14, 0.4);
}

/* --------------------------------------------------------------------------
   THE RIPPLE — spawned by js/buttons.js at the exact point of contact
   -------------------------------------------------------------------------- */
.btn-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: btn-ripple 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.secondary-btn .btn-ripple,
.boss-cta .btn-ripple {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
}

@keyframes btn-ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   HEADER
   The header is navigation, not a call to action. Its buttons were carrying
   the full 46px chassis and 800-weight display type, so the toolbar wrapped
   onto a second row and swallowed the title. Here they get their own smaller
   scale: shorter, tighter, lighter, and never allowed to wrap on desktop.
   -------------------------------------------------------------------------- */
.top-actions { gap: 0.4rem; flex-wrap: nowrap; align-items: center; }

.top-actions .ghost-btn {
  --btn-drop-sm: 3px;
  min-height: 34px;
  padding: 0.3rem 0.72rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-width: 1px;
  border-radius: 0.55rem;
  white-space: nowrap;
}

/* Sound is a square icon toggle — the label is carried by aria-label. */
#sound-toggle-btn {
  width: 2.2rem;
  min-height: 34px;
  padding: 0.3rem 0;
  font-size: 0;
  display: inline-grid;
  place-items: center;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9v6h3.5L13 20V4L7.5 9H4z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' d='M16.5 8.5a5 5 0 010 7M19 6a8.5 8.5 0 010 12'/%3E%3C/svg%3E");
}

#sound-toggle-btn::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

#sound-toggle-btn[aria-pressed="false"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9v6h3.5L13 20V4L7.5 9H4z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M17 9.5l5 5m0-5l-5 5'/%3E%3C/svg%3E");
  opacity: 0.62;
}

/* Four text buttons, a purse and a sound toggle is a lot of header. Above
   1100px it all fits on one line; below that, let it wrap rather than overflow. */
@media (max-width: 1100px) {
  .top-actions { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.ghost-btn:focus-visible,
.shop-btn:focus-visible,
.tile-btn:focus-visible,
.grade-chip:focus-visible,
.name-chip:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the bevel — it is information, not decoration. Drop the travel. */
  .primary-btn, .secondary-btn, .ghost-btn, .shop-btn, .tile-btn,
  .grade-chip, .name-chip, .sound-btn, .avatar-pick, .comp-pick {
    transition: filter 0.15s ease;
  }
  .primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover,
  .shop-btn:hover, .tile-btn:hover, .grade-chip:hover, .name-chip:hover {
    transform: none;
  }
  .btn-ripple { display: none; }
}

@media print {
  .btn-ripple { display: none !important; }
}