/* InStore surfaces: one radius scale, soft edges, distinct content layers.
   Artwork, motion transforms, modal behavior and review sizing stay untouched. */
:root {
  --surface-edge: #b7cee52b;
  --surface-highlight: #ffffff0b;
  --surface-well: #080d195c;
  --surface-layer: #abc5e509;
  --surface-layer-strong: #abc5e514;
  --surface-dialog: radial-gradient(ellipse at 0 0, #2d3b5559, transparent 58%), linear-gradient(145deg, #171d2c, #10131f 72%);
  --surface-shadow: 0 28px 80px #0007, inset 0 1px 0 #ffffff09;
}

html[data-color-mode=light] {
  --surface-edge: #7899bb38;
  --surface-highlight: #ffffffc9;
  --surface-well: #eaf0f98f;
  --surface-layer: #759bc70a;
  --surface-layer-strong: #759bc716;
  --surface-dialog: radial-gradient(ellipse at 0 0, #deebfb8c, transparent 60%), linear-gradient(145deg, #ffffff, #f5f8fc);
  --surface-shadow: 0 24px 70px #29496a1c, inset 0 1px 0 #fff;
}

/* Rounded controls share a consistent tactile silhouette. */
.header .login-button,
.theme-toggle,
.search,
.filters button,
.world-toolbar :is(.back-btn, .plain),
.category-all,
.category-breadcrumb button,
.secondary {
  border-radius: 15px;
}
.primary,
.hero-cta,
.hero-world {
  border-radius: 16px;
}
.search {
  box-shadow: inset 0 1px 0 var(--surface-highlight), 0 6px 18px #00000008;
}

/* Card corners are generous; inset artwork reads as a framed scene. */
.hero,
.game-card,
.category-card {
  border-radius: 26px;
}
html[data-color-mode] .product-card {
  border-radius: 25px;
  border-color: var(--surface-edge);
  background: linear-gradient(145deg, var(--surface-highlight), transparent 65%), var(--surface);
  box-shadow: 0 10px 28px #0000000d, inset 0 1px 0 var(--surface-highlight);
}
.product-card .product-thumb[data-product-motion] {
  width: calc(100% - 16px);
  margin: 8px 8px 0;
  border-radius: 19px;
}
.product-info {
  padding: 18px 20px 21px;
}
.world-category-hero {
  margin: 16px var(--side) 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ffffff0d;
}

/* Dialogs remain opaque enough for contrast, without a flat slab effect. */
html[data-color-mode] :is(.product-dialog, .auth-dialog, .account-dialog, .data-guide-dialog, .order-wait-dialog, .support-dialog) {
  border: 1px solid var(--surface-edge);
  border-radius: 30px;
  background: var(--surface-dialog);
  box-shadow: var(--surface-shadow);
}
html[data-color-mode] .product-details {
  background: transparent;
}
.close-btn {
  box-shadow: inset 0 1px 0 var(--surface-highlight), 0 4px 12px #0002;
}

/* Recipient, summary and payment remain quiet, stable form surfaces. */
html[data-color-mode] :is(.auth-dialog input, .checkout-form input, .checkout-form select, .wait-code input, #support-text) {
  border-radius: 15px;
  border-color: var(--surface-edge);
  box-shadow: inset 0 1px 3px #0000000d;
}
.checkout-steps {
  padding: 12px;
  border: 1px solid var(--surface-edge);
  border-radius: 17px;
  background: var(--surface-layer);
}
.checkout-summary {
  padding: 0 16px;
  border: 1px solid var(--surface-edge);
  border-radius: 19px;
  background: var(--surface-well);
}
.checkout-summary > div {
  padding-block: 15px;
}
.checkout-summary > div:last-child {
  border-bottom: 0;
}
html[data-color-mode] :is(.checkout-next, .checkout-preview, .wait-code) {
  border-radius: 20px;
  border-color: var(--surface-edge);
  background: linear-gradient(125deg, var(--surface-layer-strong), var(--surface-layer));
  box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.checkout-total {
  padding: 17px 18px;
  border: 1px solid var(--surface-edge);
  border-radius: 19px;
  background: var(--surface-layer);
}
.purchase-guide {
  padding: 20px;
  border: 1px solid var(--surface-edge);
  border-radius: 22px;
  background: var(--surface-layer);
}
.purchase-guide ol {
  gap: 15px;
}
.guide-number {
  border-radius: 10px;
}
.guide-illustration,
.guide-ui-window {
  border-radius: 20px;
}

/* Each saved order is its own card, rather than a row in a solid wall. */
.order-row {
  padding: 17px;
  margin-bottom: 11px;
  border: 1px solid var(--surface-edge);
  border-radius: 20px;
  background: var(--surface-layer);
  box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.order-row > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.order-row > div:last-child {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.order-row small {
  font-size: 11px;
  line-height: 1.5;
}
.order-row .secondary {
  margin-top: 13px;
}
.wait-product {
  padding: 18px;
  border: 1px solid var(--surface-edge);
  border-radius: 21px;
  background: var(--surface-layer);
}
.support-message {
  border-radius: 19px 19px 19px 7px;
}
.support-message.from-customer {
  border-radius: 19px 19px 7px 19px;
}
.support-message.from-system {
  border-radius: 17px;
}
.support-send,
#support-attach {
  border-radius: 14px;
}

@media (hover: hover) {
  html[data-color-mode] .product-card:hover {
    border-color: #a0bddb70;
    box-shadow: 0 14px 34px #00000024, inset 0 1px 0 var(--surface-highlight);
  }
}

@media (max-width: 760px) {
  .hero,
  .game-card,
  .category-card {
    border-radius: 22px;
  }
  html[data-color-mode] .product-card {
    border-radius: 22px;
  }
  .product-card .product-thumb[data-product-motion] {
    width: calc(100% - 12px);
    margin: 6px 6px 0;
    border-radius: 17px;
  }
  .product-info {
    padding: 14px 13px 17px;
  }
  .world-category-hero {
    margin: 12px 12px 0;
    border-radius: 22px;
  }
  html[data-color-mode] .product-dialog {
    border-radius: 28px 28px 0 0;
  }
  html[data-color-mode] .product-dialog:has(.checkout-layout),
  html[data-color-mode] :is(.auth-dialog, .account-dialog, .data-guide-dialog, .order-wait-dialog, .support-dialog) {
    border-radius: 27px;
  }
  .purchase-guide {
    padding: 17px;
  }
  .checkout-steps {
    padding: 10px 8px;
  }
  .checkout-summary {
    padding-inline: 13px;
  }
  .checkout-total {
    padding: 15px;
  }
  .order-row,
  .wait-product {
    padding: 15px;
    gap: 12px;
  }
}

@media (max-width: 359px) {
  .checkout-steps {
    padding-inline: 6px;
    gap: 5px;
  }
  .order-row {
    flex-wrap: wrap;
  }
}