/* Screw Art Coin Shop: stepped single column, 3 x 3 parts-bin bundles and a sticky receipt bar. */
.screw-shop.coin-shop {
  padding-block: clamp(1.75rem, 4vw, 3rem) 0;
}
.shop-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.25rem 2.5rem;
  margin-bottom: 1.75rem;
}
.shop-top h1 {
  margin-top: 0.9rem;
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
}
.shop-top p:not(.eyebrow) {
  margin-top: 0.5rem;
  color: var(--muted);
  font-weight: 600;
}
.shop-progress {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-progress a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.shop-progress a:hover {
  border-color: var(--blue);
}
.screw-shop .nut:has(> span) {
  --s: 30px;
}
.screw-shop .nut:has(> span)::after {
  display: none;
}
.screw-shop .nut > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 0.85rem/1 var(--display);
  text-shadow: 0 1px 0 rgb(10 20 50 / 0.4);
}
.shop-noscript {
  padding: 1rem 1.25rem;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}

/* Step cards. Fieldset legends float so they sit inside the card rather than on its border. */
.screw-shop .shop-step {
  margin: 0 0 1.25rem;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 2px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 5px 0 var(--line);
}
.screw-shop .shop-step > legend,
.screw-shop .shop-step > h2 {
  float: left;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0;
  font: 800 clamp(1.25rem, 2.6vw, 1.55rem) / 1.2 var(--display);
  letter-spacing: -0.01em;
}
.screw-shop .shop-step > legend + *,
.screw-shop .shop-step > h2 + * {
  clear: both;
}

/* Bundles: a 3 x 3 parts box at every width. */
.screw-shop .shop-packages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 1rem);
}
.screw-shop .shop-package:nth-child(1) {
  --level: 1;
}
.screw-shop .shop-package:nth-child(2) {
  --level: 2;
}
.screw-shop .shop-package:nth-child(3) {
  --level: 3;
}
.screw-shop .shop-package:nth-child(4) {
  --level: 4;
}
.screw-shop .shop-package:nth-child(5) {
  --level: 5;
}
.screw-shop .shop-package:nth-child(6) {
  --level: 6;
}
.screw-shop .shop-package:nth-child(7) {
  --level: 7;
}
.screw-shop .shop-package:nth-child(8) {
  --level: 8;
}
.screw-shop .shop-package:nth-child(n + 9) {
  --level: 9;
}
.screw-shop .shop-package > span {
  --u: 15px;
  position: relative;
  justify-items: start;
  gap: 0;
  min-height: 100%;
  padding: 1.1rem 1.15rem 1rem;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--line);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.screw-shop .shop-package > span::before,
.screw-shop .shop-package > span::after {
  content: "";
  height: var(--u);
  background-repeat: repeat-x;
  background-size: var(--u) var(--u);
}
.screw-shop .shop-package > span::before {
  width: calc(9 * var(--u));
  max-width: 100%;
  margin-bottom: 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 2.5h8.8l5.1 5.1v8.8l-5.1 5.1H7.6l-5.1-5.1V7.6z' fill='%23dbe7f6'/%3E%3C/svg%3E");
}
.screw-shop .shop-package > span::after {
  position: absolute;
  top: 1.1rem;
  left: 1.15rem;
  width: calc(var(--level, 1) * var(--u));
  max-width: calc(100% - 2.3rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 2.5h8.8l5.1 5.1v8.8l-5.1 5.1H7.6l-5.1-5.1V7.6z' fill='%231d86e8'/%3E%3Cpath d='M10 10l4 4m0-4-4 4' stroke='%230a1432' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.screw-shop .shop-package strong {
  font: 800 clamp(1.25rem, 2.6vw, 1.9rem) / 1.1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.screw-shop .shop-package small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}
.screw-shop .shop-package b {
  margin-top: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--board);
  color: var(--blue-deep);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.screw-shop .shop-package:hover > span {
  border-color: #9fc6ef;
}
.screw-shop .shop-package input:checked + span {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 4px 0 var(--blue);
  transform: translateY(-2px);
}
.screw-shop .shop-package input:checked + span::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 2.5h8.8l5.1 5.1v8.8l-5.1 5.1H7.6l-5.1-5.1V7.6z' fill='%23ff8a1c'/%3E%3Cpath d='M10 10l4 4m0-4-4 4' stroke='%230a1432' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.screw-shop .shop-package input:checked + span b {
  background: var(--orange);
  color: #fff;
}
.screw-shop .shop-packages > p {
  color: var(--muted);
}
.screw-shop:has(#shop-error:not(:empty))
  .shop-packages:not(:has(label))::before {
  content: "Coin bundles could not be loaded. Use Try again below.";
  grid-column: 1 / -1;
  color: var(--muted);
}

/* Player details */
.shop-hint {
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.screw-shop .shop-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
.screw-shop .shop-fields label {
  font-weight: 750;
}
.screw-shop .shop-fields label small {
  color: var(--muted);
  font-weight: 600;
}
.screw-shop .shop-fields input {
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
}
.screw-shop .shop-fields input:focus {
  border-color: var(--blue);
  background: #fff;
}
.screw-shop .shop-fields input:user-invalid {
  border-color: var(--red);
}

/* Payment */
.screw-shop .shop-methods-field legend {
  margin-bottom: 0.7rem;
  font-weight: 750;
}
.screw-shop .shop-methods {
  gap: 0.6rem;
}
.screw-shop .shop-methods span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.6rem 1.1rem 0.6rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-weight: 750;
}
.screw-shop .shop-methods span::before {
  content: "";
  width: 18px;
  height: 18px;
  clip-path: var(--octagon);
  background: var(--hole);
}
.screw-shop .shop-methods input:checked + span {
  border-color: var(--blue);
  background: #fff;
}
.screw-shop .shop-methods input:checked + span::before {
  background: var(--orange);
}
.screw-shop .shop-methods:not(:has(label:not([hidden])))::before {
  content: "Payment methods appear here when checkout is available.";
  color: var(--muted);
  font-size: 0.95rem;
}
.screw-shop .shop-terms {
  margin-top: 1rem;
}
.screw-shop .shop-terms a {
  color: var(--blue-deep);
  font-weight: 650;
}

/* Receipt bar: sticks to the viewport bottom while the form is on screen, then rests above the footer. */
.shop-receipt {
  position: sticky;
  z-index: 5;
  bottom: 0;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.receipt-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 0.9rem 0.9rem 1.5rem;
  border-radius: 24px;
  background: var(--navy);
  color: #fff;
  box-shadow:
    0 6px 0 #050c26,
    0 18px 40px -12px rgb(19 32 80 / 0.55);
}
.receipt-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}
.receipt-lines dt {
  color: #b9c8ea;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.receipt-lines dt span {
  color: #8fa3cf;
}
.receipt-lines dd {
  font: 800 1.2rem/1.25 var(--display);
  font-variant-numeric: tabular-nums;
}
.receipt-status {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.45;
}
.screw-shop .shop-error {
  display: inline;
  margin-right: 0.6rem;
  color: #ffd166;
  font-weight: 650;
}
.screw-shop .shop-error:empty {
  display: none;
}
.screw-shop .shop-reload {
  display: inline;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: inherit;
}
.shop-receipt .button {
  min-width: 13rem;
  cursor: pointer;
}
.shop-receipt .button:disabled {
  background: #44507a;
  box-shadow: 0 5px 0 #2b3560;
  color: #c8d2ec;
  cursor: not-allowed;
  transform: none;
}
.screw-shop .shop-support {
  margin-top: 1.5rem;
  color: var(--muted);
}
.screw-shop .shop-support a {
  color: var(--blue-deep);
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .shop-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .receipt-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .receipt-status {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .receipt-status:not(:has(.shop-error:not(:empty))):not(
      :has(.shop-reload:not([hidden]))
    ) {
    display: none;
  }
}

@media (max-width: 680px) {
  .shop-progress {
    gap: 0.35rem;
  }
  .shop-progress a {
    gap: 0.35rem;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    font-size: 0.76rem;
  }
  .shop-progress .nut:has(> span) {
    --s: 24px;
  }
  .screw-shop .shop-step {
    border-radius: 22px;
  }
  .screw-shop .shop-package > span {
    --u: 9px;
    justify-items: center;
    padding: 0.8rem 0.4rem 0.7rem;
    border-radius: 16px;
    text-align: center;
  }
  .screw-shop .shop-package > span::before {
    margin-bottom: 0.55rem;
  }
  .screw-shop .shop-package > span::after {
    top: 0.8rem;
    left: calc(50% - 4.5 * var(--u));
    max-width: calc(9 * var(--u));
  }
  .screw-shop .shop-package strong {
    font-size: 1.15rem;
  }
  .screw-shop .shop-package small {
    font-size: 0.72rem;
  }
  .screw-shop .shop-package b {
    margin-top: 0.5rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
  }
  .screw-shop .shop-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .receipt-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.85rem;
    border-radius: 20px;
  }
  .receipt-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-inline: 0.35rem;
  }
  .receipt-lines dd {
    font-size: 1.05rem;
  }
  .receipt-status {
    grid-row: auto;
    padding-inline: 0.35rem;
  }
  .shop-receipt .button {
    width: 100%;
    min-width: 0;
  }
}