/* Card-color select screen: title and card-swatch row. */
.br-section-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.br-title-chon-the {
  top: 102px;
  width: 730px;
  height: 89px;
  background: url("../../images/title-chon-the.png") center / contain no-repeat;
}

.br-card-row {
  position: absolute;
  left: 50%;
  top: 222px;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
}
.br-card-choice {
  position: relative;
  width: 236px;
  aspect-ratio: 716 / 954;
  height: auto;
  cursor: pointer;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  background: none;
  outline: none;
  filter: drop-shadow(0px 0px 13.5px rgba(0, 49, 197, 0.3));
}
.br-card-choice[data-color="pink"]   .br-card-frame-overlay { background-image: url("../../images/card-b.png"); }
.br-card-choice[data-color="orange"] .br-card-frame-overlay { background-image: url("../../images/card-a.png"); }
.br-card-choice[data-color="green"]  .br-card-frame-overlay { background-image: url("../../images/card-green.png"); }
.br-card-choice[data-color="purple"] .br-card-frame-overlay { background-image: url("../../images/card-c.png"); }
.br-card-choice[data-color="blue"]   .br-card-frame-overlay { background-image: url("../../images/card-d.png"); }
/* Active-color ring, drawn as a real border on a ::after layered on top of
   .br-card-frame-overlay - not a border/box-shadow/outline on the card
   itself. The frame art is a fully opaque rectangle now, so an inset
   box-shadow on the card would just paint underneath it and never show;
   outline gets clipped by the card's own overflow:hidden in Chromium; and a
   real border on the card would eat into the box (box-sizing:border-box),
   shrinking the padding-box the frame art contain-fits into and letterboxing
   it as the width grows. This pseudo-element has no content of its own, so
   its border can freely grow inward (position:absolute + inset:0 pins its
   outer edge to the card's fixed edge regardless of border-width) with zero
   effect on the card's size or the art beneath it. border-radius:inherit
   keeps it in sync with the card's own rounding automatically. */
.br-card-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  transition: border-color .2s ease, border-width .2s ease;
  pointer-events: none;
}
/* Every card shows its own thin colored ring at rest, not just on
   hover/selection - only the width (1.5px -> 6px below) marks "active". */
.br-card-choice[data-color="pink"]::after   { border-color: rgb(255, 129, 199); }
.br-card-choice[data-color="orange"]::after { border-color: rgb(241, 150, 70); }
.br-card-choice[data-color="green"]::after  { border-color: rgb(0, 178, 49); }
.br-card-choice[data-color="purple"]::after { border-color: rgb(123, 80, 255); }
.br-card-choice[data-color="blue"]::after   { border-color: rgb(26, 146, 248); }
/* Hover previews the same full-width ring as selecting it - no separate
   hover-only style, no movement, just the ring growing in a beat early
   (1.5px resting -> 6px active, always growing inward). */
.br-card-choice:hover::after,
.br-card-choice.br-is-selected::after {
  border-width: 6px;
}

/* On wide monitors the whole stage is scaled to fit by height (see stage.js),
   so past a point a wider viewport just adds empty side margin instead of the
   card row actually using it. Let the row grow with real viewport width up to
   1920px so the 5 cards spread out and feel balanced instead of clustered. */
@media (min-width: 1440px) {
  .br-card-row {
    gap: clamp(24px, 2.08vw, 40px);
  }
  .br-card-choice {
    width: clamp(236px, 15.625vw, 300px);
  }
}

@media (max-width: 720px) {
  .br-title-chon-the-mobile {
    width: 280px;
    max-width: 78%;
    aspect-ratio: 248 / 83;
    margin: 20px auto 30px;
    background-image: url("../../images/title-chon-the-mobile.png");
  }
  .br-card-row {
    position: static;
    top: auto;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    row-gap: 16px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
  /* Fixed per-row width (not grid's 1fr) so a short last row - 5 cards over
     3 columns leaves 2 - centers via justify-content instead of hugging the
     grid's left edge. */
  .br-card-choice {
    width: calc((100% - 24px) / 3);
    aspect-ratio: 716 / 954;
    height: auto;
    border-radius: 14px;
  }
  .br-card-choice:hover::after,
  .br-card-choice.br-is-selected::after {
    border-width: 3px;
  }
}