/* ==========================================================
   "Play now" button — navy plate, chamfered ends, gold frame
   <a class="cof-btn"><span class="cof-btn__plate">Play now</span></a>
   ========================================================== */

.cof-btn {
  --h: 48px;               /* plate height */
  --pad: 34px;             /* horizontal padding */
  --fs: 20px;              /* label size */
  --k: .28;                /* chamfer depth as a share of the height */
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 0 rgba(233, 190, 110, 0));
  transition: filter .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.cof-btn--sm { --h: 40px; --pad: 24px; --fs: 17px; }
.cof-btn--lg { --h: 62px; --pad: 52px; --fs: 26px; }

.cof-btn__plate {
  --cut: calc(var(--h) * var(--k));
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  padding: 0 var(--pad);
  white-space: nowrap;
  font-family: var(--font--h1-h3, "Baker Signet"), Georgia, serif;
  font-size: var(--fs);
  line-height: 1;
  letter-spacing: .03em;
  color: #f2cf85;
  text-shadow: 0 1px 0 #1a1206, 0 0 10px rgba(242, 190, 100, .35);
  /* outer gold frame */
  background: linear-gradient(180deg, #fff0c4 0%, #e6bf6d 28%, #a8732f 52%, #d9ad5c 76%, #fbe3a3 100%);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
}
/* dark separation line */
.cof-btn__plate::before,
.cof-btn__plate::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%);
}
.cof-btn__plate::before {
  --i: 2px;
  --c: calc((var(--h) - 2 * var(--i)) * var(--k));
  inset: var(--i);
  background: #2a1c0a;
}
/* navy plate with a soft sheen and two small gold studs at the points */
.cof-btn__plate::after {
  --i: 3.5px;
  --c: calc((var(--h) - 2 * var(--i)) * var(--k));
  inset: var(--i);
  background:
    radial-gradient(circle at calc(var(--c) * .75) 50%, #f6d68f 0 1.6px, rgba(246, 214, 143, .35) 2.4px, transparent 4px),
    radial-gradient(circle at calc(100% - var(--c) * .75) 50%, #f6d68f 0 1.6px, rgba(246, 214, 143, .35) 2.4px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 45%, transparent 50%),
    radial-gradient(120% 140% at 50% 120%, #22335e 0%, #121c38 55%, #0b1226 100%);
  transition: filter .25s ease;
}

.cof-btn:hover,
.cof-btn:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(240, 195, 110, .55));
}
.cof-btn:hover .cof-btn__plate,
.cof-btn:focus-visible .cof-btn__plate { color: #ffe3a6; }
.cof-btn:hover .cof-btn__plate::after,
.cof-btn:focus-visible .cof-btn__plate::after { filter: brightness(1.25); }
.cof-btn:active { transform: translateY(1px); }
.cof-btn:focus-visible { outline: none; }

/* placements that used to hold image buttons */
.hero__play-button.cof-btn,
.hero__play-button-m.cof-btn { height: auto; text-align: center; }
.play__button-bottom.cof-btn { align-self: center; position: relative; z-index: 2; }

@media screen and (max-width: 767px) {
  .cof-btn--lg { --h: 54px; --pad: 40px; --fs: 22px; }
  .hero__play-button-m.cof-btn { width: auto; }
}

@media screen and (max-width: 479px) {
  /* phones: the header button would take a whole row; the hero and menu already have one */
  .hero__play-button.cof-btn { display: none; }
}