/* Customer artwork. Stable slots; no dependency on draw probabilities or inventory. */
:root {
  --brand-ink: #351224;
  --site-header-image: url("artwork/header-new.webp?v=20261023");
  --page-background-image: url("artwork/background-mobile.webp?v=20261012");
  --box-lid-image: url("artwork/box-lid.webp?v=20261012");
  --box-body-image: url("artwork/box-body.webp?v=20261012");
}
body { isolation: isolate; background: var(--cream); }
body::before {
  display: block;
  opacity: 1;
  mask-image: none;
  background: var(--page-background-image) center / cover no-repeat;
}
.site-header {
  min-height: 88px;
  background: var(--site-header-image) center / auto 100% repeat-x;
  background-color: var(--surface-blush);
}
.site-header .brand {
  flex: 0 0 auto;
  max-width: none;
  padding: 0;
  background: transparent;
}
.site-header .brand .brand-wordmark {
  padding: .375rem .875rem;
  border: 1px solid var(--berry-650);
  border-radius: 12px;
  color: var(--brand-ink);
  background: var(--surface-blush);
  font-family: var(--font-welcome);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-shadow: none;
  max-width: none;
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  white-space: nowrap;
  overflow-wrap: normal;
}
.site-header .language-inline { border-radius: 12px; background: var(--paper); }
.box-stage { border: 2px solid var(--berry-650); }
.lucky-box { aspect-ratio: 1020 / 1132; padding: 0; }
.box-illustration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Both supplied parts have transparent padding, including in gray/filtered states. */
}
.box-body-art, .box-lid-art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.box-body-art { background-image: var(--box-body-image); }
.box-lid-art { background-image: var(--box-lid-image); transform-origin: 18% 42%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.box-number {
  position: absolute;
  inset: auto .25rem .25rem auto;
  display: grid;
  width: 1.5rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--berry-950);
  background: var(--paper);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
}
.lucky-box.is-opening .box-lid-art { transform: translate(-5%, -16%) rotate(-18deg); }
@media (max-width: 680px) {
  .site-header { flex-wrap: wrap; gap: .75rem; }
  .site-header .brand { flex: 0 0 100%; font-size: clamp(.9rem, 2.5vw, 1.16rem); }
  .site-header .header-actions { margin-left: auto; }
}
@media (min-width: 768px) {
  :root { --page-background-image: url("artwork/background.webp?v=20261012"); }
}
@media (prefers-reduced-motion: reduce) {
  .box-lid-art { transition: none; }
  .lucky-box.is-opening .box-lid-art { transform: translateY(-8%); }
}