/* Coin Shop: a velvet boutique, with sculpted coin displays on gold shelves.
   Full-screen navigation and safe-area header belong to screens.css. */
#shop.destination-screen {
  --shop-velvet-deep: #210914;
  --shop-velvet: #580c2b;
  --shop-velvet-lit: #9b2050;
  --shop-display-top: #6b1647;
  --shop-display-base: #300d25;
  --shop-glass: #240a19;
  --shop-gold-hairline: rgba(255, 212, 90, 0.24);
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 212, 90, 0.13), transparent 45%),
    radial-gradient(ellipse at 50% 65%, var(--shop-velvet-lit), transparent 72%),
    linear-gradient(180deg, var(--shop-velvet), var(--shop-velvet-deep));
  background-color: var(--shop-velvet-deep);
}

#shop.destination-screen .shop-panel {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 12% 88%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 0, 0, 0.04) 20px 26px, transparent 32px 48px),
    radial-gradient(ellipse at 50% 8%, rgba(255, 212, 90, 0.13), transparent 45%),
    radial-gradient(ellipse at 50% 65%, var(--shop-velvet-lit), transparent 72%),
    linear-gradient(180deg, var(--shop-velvet), var(--shop-velvet-deep));
  background-color: var(--shop-velvet-deep);
}

#shop.destination-screen .shop-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--safe-top) + 72px);
  background:
    linear-gradient(180deg, transparent 60%, var(--shop-velvet-deep)),
    repeating-linear-gradient(90deg, var(--shop-velvet-deep) 0, var(--shop-velvet) 12px, var(--shop-velvet-lit) 18px, var(--shop-velvet) 24px, var(--shop-velvet-deep) 38px);
  opacity: 0.55;
  pointer-events: none;
}

#shop.destination-screen .shop-panel::after {
  content: "";
  position: absolute;
  top: calc(var(--safe-top) + 70px);
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark) 20% 80%, transparent);
  pointer-events: none;
}

#shop.destination-screen .sheet-title {
  letter-spacing: 0.12em;
}

#shop.destination-screen .screen-close {
  background: linear-gradient(180deg, var(--shop-velvet-lit), var(--shop-velvet-deep));
  color: var(--gold-light);
}

#shop.destination-screen .shop-body {
  position: relative;
  width: 100%;
  max-width: 1100px;
  align-self: center;
  margin: 0;
  padding: 5px 4px 20px;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) transparent;
}

/* The piggy and the long glass gauge form the boutique's feature display. */
#shop.destination-screen .bank-row {
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 12px;
  margin: 0 0 13px;
  padding: 10px 12px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 0 35%, rgba(255, 212, 90, 0.15), transparent 65%),
    linear-gradient(180deg, var(--shop-display-top), var(--shop-glass));
  border: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 3px 0 var(--gold-deep);
}

#shop.destination-screen .bank-vault {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 68px;
  height: 74px;
}

#shop.destination-screen .bank-body {
  grid-column: 2;
  gap: 4px;
}

#shop.destination-screen .bank-name {
  font-size: 21px;
  letter-spacing: 0.08em;
}

#shop.destination-screen .bank-text {
  font-size: 12px;
  column-gap: 9px;
}

#shop.destination-screen .bank-gauge {
  grid-column: 2;
  width: 100%;
  gap: 7px;
}

#shop.destination-screen .bank-gauge-bar {
  height: 36px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--shop-glass), var(--shop-display-base));
}

#shop.destination-screen .bank-gauge .bank-coins {
  font-size: 16px;
  line-height: 34px;
}

#shop.destination-screen .bank-open {
  width: 82px;
  min-height: 44px;
  border-radius: 5px;
}

#shop.destination-screen .bank-open:disabled {
  background: linear-gradient(180deg, var(--shop-display-top), var(--shop-glass));
}

#shop.destination-screen .bank-open-label {
  width: 100%;
  overflow: visible;
  white-space: normal;
}

#shop.destination-screen .bank-open-main {
  white-space: normal;
}

/* Membership benefits read as gold hairline ledgers, with a separate key. */
#shop.destination-screen .allowance-row {
  grid-template-columns: 45px minmax(0, 1fr) 82px;
  gap: 10px;
  margin: 0;
  padding: 3px 0 13px;
  border-bottom-color: var(--shop-gold-hairline);
}

#shop.destination-screen .allowance-name {
  font-size: 15px;
  letter-spacing: 0.06em;
}

#shop.destination-screen .allowance-value {
  font-size: 17px;
}

#shop.destination-screen .allowance-key {
  width: 82px;
  min-height: 46px;
  border-radius: 5px;
}

#shop.destination-screen .allowance-key.wait {
  background: var(--shop-glass);
}

#shop.destination-screen .loyalty {
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 0 12px;
  border-bottom-color: var(--shop-gold-hairline);
}

#shop.destination-screen .loyalty-icon {
  width: 30px;
  height: 30px;
}

#shop.destination-screen .loyalty-name {
  font-size: 16px;
}

#shop.destination-screen .loyalty-bar {
  height: 6px;
  border-radius: 3px;
}

#shop.destination-screen .loyalty-fill {
  background: linear-gradient(90deg, var(--shop-velvet-lit), var(--gold));
}

#shop.destination-screen .shop-bonus {
  margin: 0 0 14px;
  font-size: 14px;
}

/* Packs are freestanding display cases: coins, a silk ribbon, a broad
   amount and a price key on the shelf. Their frames are the shop exception. */
#shop.destination-screen .pack-list {
  gap: 15px 13px;
  padding: 0 1px 6px;
}

#shop.destination-screen .pack {
  min-height: 194px;
  padding: 2px 9px 10px;
  border-radius: 9px;
  border: 2px solid var(--gold);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 212, 90, 0.14), transparent 58%),
    linear-gradient(180deg, var(--shop-display-top), var(--shop-display-base) 75%, var(--shop-glass));
  box-shadow: 0 0 0 1px var(--gold-deep), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.4), 0 4px 0 var(--gold-deep);
}

#shop.destination-screen .pack::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--shop-gold-hairline);
  border-radius: 5px;
  pointer-events: none;
}

#shop.destination-screen .pack-art {
  width: 124px;
  margin: 0 0 -31px;
  filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.5));
}

#shop.destination-screen .pack-art::before {
  font-size: 14px;
}

#shop.destination-screen .pack-art::after {
  font-size: 11px;
}

#shop.destination-screen .pack-ribbon {
  width: calc(100% + 10px);
  padding: 4px 13px 5px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

#shop.destination-screen .pack-ribbon::before {
  background:
    linear-gradient(180deg, var(--gold), var(--gold-dark)) top / 100% 1px no-repeat,
    linear-gradient(180deg, var(--gold), var(--gold-dark)) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, var(--shop-velvet-lit), var(--shop-velvet) 60%, var(--shop-velvet-deep));
}

#shop.destination-screen .pack-amount {
  gap: 4px;
  margin-top: 6px;
  min-height: 26px;
}

#shop.destination-screen .pack-coin.credits-coin {
  width: 17px;
  height: 17px;
}

#shop.destination-screen .pack-coins {
  max-width: calc(100% - 21px);
  font-size: 21px;
  letter-spacing: 0.01em;
}

#shop.destination-screen .pack-price {
  min-height: 44px;
  margin-top: 6px;
  border-radius: 5px;
  font-size: 21px;
}

#shop.destination-screen .pack-tag {
  top: 18px;
  left: 4px;
  padding: 4px 5px;
  font-size: 11px;
  border-radius: 3px;
  transform: rotate(-7deg);
}

#shop.destination-screen .pack-info::before {
  background: linear-gradient(180deg, var(--shop-display-top), var(--shop-glass));
}

#shop.destination-screen .pack:focus-visible,
#shop.destination-screen .pack-info:focus-visible,
#shop.destination-screen .bank-open:focus-visible,
#shop.destination-screen .allowance-key:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

@media (max-height: 720px) and (max-width: 699px) {
  #shop.destination-screen .bank-row {
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  #shop.destination-screen .allowance-row {
    padding-bottom: 10px;
  }

  #shop.destination-screen .loyalty {
    margin-bottom: 13px;
    padding: 9px 0 10px;
  }

  #shop.destination-screen .pack-list {
    gap: 13px 12px;
  }

  #shop.destination-screen .pack {
    min-height: 182px;
    padding-bottom: 9px;
  }

  #shop.destination-screen .pack-art {
    width: 102px;
    margin-bottom: -36px;
    clip-path: inset(0 0 10px);
  }

  #shop.destination-screen .pack-art img {
    transform: translateY(-10px);
  }
}

@media (min-width: 1000px) and (max-height: 650px) {
  #shop.destination-screen .pack-art {
    width: 110px;
    margin-bottom: -36px;
    clip-path: inset(0 0 10px);
  }

  #shop.destination-screen .pack-art img {
    transform: translateY(-10px);
  }
}

@media (min-width: 700px) {
  #shop.destination-screen .shop-body {
    display: grid;
    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
    align-content: start;
    align-items: start;
    column-gap: 28px;
    padding: 12px 8px 24px;
  }

  #shop.destination-screen .bank-row {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 22px;
  }

  #shop.destination-screen .allowance-row {
    grid-column: 1;
    grid-row: 2;
  }

  #shop.destination-screen .loyalty {
    grid-column: 1;
    grid-row: 3;
  }

  #shop.destination-screen .shop-bonus {
    grid-column: 1;
    grid-row: 4;
  }

  #shop.destination-screen .pack-list {
    grid-column: 2;
    grid-row: 1 / 5;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
  }

  #shop.destination-screen .allowance-row {
    grid-template-columns: 38px minmax(0, 1fr) 70px;
    column-gap: 8px;
  }

  #shop.destination-screen .allowance-name {
    font-size: 13px;
    letter-spacing: 0.03em;
  }

  #shop.destination-screen .allowance-key {
    width: 70px;
  }

  #shop.destination-screen .allowance-mark,
  #shop.destination-screen .allowance-crown {
    width: 38px;
  }
}

@media (min-width: 700px) and (max-width: 999px) {
  #shop.destination-screen .shop-body {
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 20px;
  }

  #shop.destination-screen .pack-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}