/* Customer artwork. Stable slots; no dependency on draw probabilities or inventory. */
:root {
  --brand-ink: #330c15;
  --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: .5rem .875rem .5rem .5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.site-header .brand .brand-wordmark {
  display: grid;
  gap: .125rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--brand-ink);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: none;
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}
.brand-name { font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 550; font-style: italic; }
.brand-tagline { font-size: .625rem; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; }
.brand-logo { display: block; flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; }
.site-header .brand-logo { width: 44px; height: 44px; }
.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 1 auto; max-width: 100%; }
  .site-header .header-actions { margin-left: auto; }
  .site-header .brand-logo { width: 40px; height: 40px; }
}
@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%); }
}