/* 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: 797 / 1035;
  height: auto;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
  border: none;
  border-radius: 16px;
  padding: 0;
  background: none;
  outline: none;
}
.br-card-choice:hover  { transform: translateY(-6px); }
.br-card-choice.br-is-selected {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 8px 18px rgba(0,49,197,0.35));
}
.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"); }

@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: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    row-gap: 16px;
    justify-items: center;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
  .br-card-choice {
    width: 100%;
    aspect-ratio: 797 / 1035;
    height: auto;
    border-radius: 14px;
  }
  .br-card-choice.br-is-selected { transform: scale(1.03); }
}