/* ═══════════════════════════════════════════════════════════
   THE CHALLENGERS — shared button system
   Two variants share IDENTICAL geometry (height, font, padding):
     .btn-normal   — rectangular, gold outline + gold text
     .btn-proceed  — right-tilted spike, cyan outline + cyan text
   Both use the dual-pseudo technique:
     element itself paints in OUTLINE colour and is shaped via
     clip-path (or no clip-path for the rectangle); ::before is
     inset 2px and paints the dark FILL inside it. The 2px
     differential renders as a single continuous outline that
     follows the silhouette — no `border`, no detached corners.
   ─────────────────────────────────────────────────────────── */

.btn-normal,
.btn-proceed {
  /* shared geometry — heights line up exactly */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 42px;
  padding: 0 1.8rem;
  min-width: 150px;
  border: none;

  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;

  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition:
    background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inset fill panel — both variants share this; the only difference is which
   clip-path applies (parent's). For .btn-normal there's no clip-path so the
   inset is a regular rectangle. For .btn-proceed the inset chevron uses a
   slightly smaller clip-path to maintain a uniform 2px stroke around the V. */
.btn-normal::before,
.btn-proceed::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  pointer-events: none;
}

/* ═══ NORMAL — square rectangle, gold outline + gold text ═══ */
.btn-normal {
  background: #785a28;                              /* outline colour (visible 2px sliver) */
  color: #c89b3c;                                   /* text matches outline (brighter shade) */
}
.btn-normal::before {
  background: linear-gradient(180deg, #1a1610 0%, #0e0a06 100%); /* warm dark fill */
}
.btn-normal:hover:not(:disabled) {
  background: #c89b3c;
  color: #f0e6d2;
  filter: drop-shadow(0 0 10px rgba(200, 155, 60, 0.55));
  animation: btnGoldPulse 1.4s ease-in-out infinite;
}
.btn-normal:active:not(:disabled) {
  background: #5a5a5a;
  color: #7a7a7a;
  filter: drop-shadow(0 0 14px rgba(200, 155, 60, 0.85));
  animation: none;
}
.btn-normal:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

@keyframes btnGoldPulse {
  0%, 100% { background: #785a28; filter: drop-shadow(0 0 6px rgba(200, 155, 60, 0.30)); }
  50%      { background: #c89b3c; filter: drop-shadow(0 0 14px rgba(200, 155, 60, 0.65)); }
}

/* ═══ PROCEED — right-tilted spike, cyan outline + cyan text ═══ */
.btn-proceed {
  /* slightly more right-padding to keep text centred over the rectangle body
     and not crowd the V-tip */
  padding-right: 2.6rem;
  background: #0ac8b9;                              /* outline colour */
  color: #ffffff;                                   /* white text — applies to ALL teal buttons */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.btn-proceed::before {
  /* lighter cyan fill — sits in the cyan family, not navy */
  background: linear-gradient(180deg, #2d6f72 0%, #133a3d 100%);
  /* smaller chevron — tip 2px short, top/bottom corners 2px in. This produces
     a continuous ~2px outline that traces the entire silhouette including the V */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.btn-proceed:hover:not(:disabled) {
  background: #cdfaff;
  color: #ffffff;
  filter: drop-shadow(0 0 10px rgba(10, 200, 185, 0.65));
}
.btn-proceed:active:not(:disabled) {
  background: #5a5a5a;
  color: #7a7a7a;
  filter: drop-shadow(0 0 14px rgba(10, 200, 185, 0.9));
}
.btn-proceed:disabled { opacity: 0.32; cursor: not-allowed; filter: none; }

.btn-proceed.ready { animation: btnCyanPulse 1.8s ease-in-out infinite; }
@keyframes btnCyanPulse {
  0%, 100% { background: #0ac8b9; filter: drop-shadow(0 0 6px rgba(10, 200, 185, 0.25)); }
  50%      { background: #cdfaff; filter: drop-shadow(0 0 14px rgba(10, 200, 185, 0.6)); }
}

/* ═══ Larger hero variant — for primary CTA on page (Engage / Spin) ═══ */
.btn-proceed.lg {
  height: 48px;
  font-size: 0.88rem;
  letter-spacing: 0.32em;
  padding: 0 3rem 0 2rem;
  min-width: 200px;
}
.btn-normal.lg {
  height: 48px;
  font-size: 0.88rem;
  letter-spacing: 0.28em;
  padding: 0 2.6rem;
  min-width: 180px;
}

/* ═══════════════════════════════════════════════════════════
   MATCH — primary champ-select CTA (Accept / Spin / Engage / Re-roll).
   Shape: flat top, sharp top corners, sides slant OUTWARD to wider
   sharp bottom corners, bottom edge is a smooth curve dipping in the
   middle. Drawn via inline SVG background so the curve is exact.
   Banner gradient fill (darker through middle), white text, cyan stroke.
   ─────────────────────────────────────────────────────────── */
.btn-match {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 60px;
  padding: 0 4rem;
  min-width: 320px;
  border: none;
  background: transparent;

  /* SVG-rendered shape — geometry traced from the user's reference.
     Proportions in a 400 × 80 viewBox (5:1):
       • Top edge is flat and INSET from the sides.
       • Sides slope OUTWARD going down (~9° from vertical) to sharp
         bottom corners that extend wider than the top.
       • Bottom edge is a smooth curve dipping ~10% of height in the middle.
     stroke-width=2 with non-scaling-stroke keeps the cyan outline crisp
     regardless of rendered button width. */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%234a9095'/%3E%3Cstop offset='48%25' stop-color='%231a3e44'/%3E%3Cstop offset='56%25' stop-color='%231a3e44'/%3E%3Cstop offset='100%25' stop-color='%233a8088'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 16 1 L 384 1 L 399 65 Q 200 80 1 65 Z' fill='url(%23g)' stroke='%230ac8b9' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  line-height: 1;
  color: #ffffff;

  cursor: pointer;
  text-decoration: none;

  filter: drop-shadow(0 0 6px rgba(10, 200, 185, 0.35));
  transition:
    color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: btnMatchPulse 2.2s ease-in-out infinite;
}
.btn-match:hover:not(:disabled) {
  filter: drop-shadow(0 0 16px rgba(10, 200, 185, 0.85));
}
.btn-match:active:not(:disabled) {
  color: #cccccc;
  filter: drop-shadow(0 0 20px rgba(10, 200, 185, 1));
  animation: none;
}
.btn-match:disabled { opacity: 0.4; cursor: not-allowed; filter: none; animation: none; }

@keyframes btnMatchPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(10, 200, 185, 0.35)); }
  50%      { filter: drop-shadow(0 0 18px rgba(10, 200, 185, 0.75)); }
}