/* ── Cardboard box interior (Cut the Rope style) — background only ── */

.screen-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.screen-bg-sky {
  --card-top: #fae5b8;
  --card-light: #f5ddb0;
  --card-mid: #e8c078;
  --card-warm: #d4a860;
  --card-dark: #b88040;
  --card-deep: #9a6830;
  --card-edge: #8b5a28;
  --card-glow: rgba(255, 228, 165, 0.82);
  --card-glow-mid: rgba(255, 205, 130, 0.45);
  --card-glow-edge: rgba(255, 185, 110, 0.12);
  --cup-blue: #5aadc4;
  --cup-blue-light: #7ec8dc;
  --cup-blue-dark: #4490a8;

  background-color: var(--card-mid);
  background-image:
    radial-gradient(ellipse 6% 5% at 50% 4.5%, rgba(126, 200, 220, 0.32) 0%, rgba(90, 173, 196, 0.14) 45%, transparent 72%),
    radial-gradient(ellipse 28% 22% at 50% 32%, rgba(255, 240, 190, 0.5) 0%, rgba(255, 220, 160, 0.1) 55%, transparent 100%),
    radial-gradient(ellipse 72% 58% at 50% 36%, var(--card-glow) 0%, var(--card-glow-mid) 28%, var(--card-glow-edge) 52%, transparent 72%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(139, 90, 40, 0.07) 2px,
      rgba(139, 90, 40, 0.07) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 22px,
      rgba(160, 110, 45, 0.055) 22px,
      rgba(160, 110, 45, 0.055) 23px
    ),
    linear-gradient(
      168deg,
      var(--card-top) 0%,
      var(--card-light) 18%,
      var(--card-mid) 42%,
      var(--card-warm) 68%,
      var(--card-dark) 88%,
      var(--card-deep) 100%
    );
}

/* Side-wall depth + top/bottom flaps */
.screen-bg-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(58, 36, 18, 0.36) 0%, rgba(58, 36, 18, 0.14) 8%, transparent 16%),
    linear-gradient(270deg, rgba(58, 36, 18, 0.32) 0%, rgba(58, 36, 18, 0.12) 7%, transparent 14%),
    linear-gradient(180deg, rgba(52, 32, 16, 0.24) 0%, transparent 9%, transparent 86%, rgba(48, 28, 14, 0.28) 100%);
}

/* Top flap fold */
.screen-bg-mesh::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10%;
  background:
    linear-gradient(180deg, rgba(90, 55, 25, 0.34) 0%, rgba(110, 70, 35, 0.14) 55%, transparent 100%);
  border-bottom: 4px solid rgba(110, 70, 35, 0.26);
  box-shadow: 0 6px 18px rgba(48, 28, 14, 0.1);
}

/* Shipping stamp icons (left wall) */
.screen-bg-mesh::after {
  content: '';
  position: absolute;
  left: 7%;
  top: 19%;
  width: 54px;
  height: 132px;
  opacity: 0.22;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 130' fill='none' stroke='%237a4e28' stroke-width='2'%3E%3Cpath d='M26 18a10 10 0 0 1 0 20v12M26 18v-4'/%3E%3Cpath d='M14 52l12-10 12 10M14 66l12-10 12 10'/%3E%3Cpath d='M18 88h16v18H18zM26 88v-6'/%3E%3C/svg%3E")
      center / contain no-repeat;
}

/* Suction cup at top (classic CTR anchor) */
.bg-orb {
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.bg-orb-a {
  top: 3.2%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(38px, 7.5vw, 58px);
  height: clamp(38px, 7.5vw, 58px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, var(--cup-blue-light) 0%, var(--cup-blue) 48%, var(--cup-blue-dark) 100%);
  box-shadow:
    0 4px 10px rgba(48, 28, 14, 0.24),
    inset 0 -5px 10px rgba(40, 80, 95, 0.22),
    inset 0 3px 6px rgba(255, 255, 255, 0.32);
  border: 2px solid rgba(68, 144, 168, 0.6);
}

.bg-orb-b {
  top: 3.8%;
  left: 50%;
  transform: translateX(-42%);
  width: clamp(10px, 2vw, 14px);
  height: clamp(10px, 2vw, 14px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
  filter: blur(0.5px);
}

/* Box floor panel */
.screen-bg-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15%;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, rgba(110, 70, 35, 0.16) 25%, rgba(80, 50, 25, 0.34) 100%);
  border-top: 5px solid rgba(110, 70, 35, 0.28);
  box-shadow: inset 0 10px 28px rgba(0, 0, 0, 0.1);
}

/* Packing tape — bottom corners */
.screen-bg-wave::before,
.screen-bg-wave::after {
  content: '';
  position: absolute;
  top: -18px;
  width: clamp(32px, 7vw, 48px);
  height: clamp(44px, 9vw, 64px);
  opacity: 0.32;
  background: linear-gradient(
    180deg,
    rgba(190, 155, 100, 0.6) 0%,
    rgba(150, 115, 70, 0.5) 100%
  );
  border: 1px solid rgba(110, 80, 45, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.2);
}

.screen-bg-wave::before {
  left: 2.5%;
  transform: rotate(-4deg);
}

.screen-bg-wave::after {
  right: 2.5%;
  transform: rotate(4deg);
}

/* Corrugated edge — corners */
.screen-bg-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(48, 28, 14, 0.18) 0%, transparent 20%),
    linear-gradient(225deg, rgba(48, 28, 14, 0.16) 0%, transparent 18%),
    linear-gradient(315deg, rgba(48, 28, 14, 0.2) 0%, transparent 20%),
    linear-gradient(45deg, rgba(48, 28, 14, 0.17) 0%, transparent 17%);
  pointer-events: none;
}

/* Inner vignette — cozy box depth */
.screen-bg-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 74% 62% at 50% 40%, transparent 18%, rgba(48, 30, 14, 0.38) 100%);
}

#screen-levels .screen-bg-sky::after {
  background:
    radial-gradient(ellipse 78% 66% at 50% 38%, transparent 14%, rgba(48, 30, 14, 0.4) 100%);
}