/* =============================================================================
   Velorex Music — Spin & Win game styles
   Used by: index.html, built by src/js/storefront/spin-games.js

   Owns every .sg-* class. Lives inside the Spin & Win modal, which is dark
   in both themes, so colours here are literals (CLAUDE.md §42 reasoning).
   Every looping animation stops under prefers-reduced-motion at the bottom.
   ============================================================================= */

.sg-spark {
  position: absolute;
  z-index: 30;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px currentColor;
  animation: sg-spark 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes sg-spark {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.sg-hint { margin-top: 12px; text-align: center; color: #a79fb4; font-size: 0.8rem; min-height: 1.2em; }

/* ============================================================== 1. Wheel == */
.sg-wheel { position: relative; width: min(360px, 100%); }
.sg-wheel-svg {
  display: block;
  width: 100%;
  font-family: var(--font-body, 'Poppins', sans-serif);
  transition: transform 5.2s cubic-bezier(0.12, 0.72, 0.08, 1);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.sg-bulb { animation: sg-bulb 1.2s ease-in-out infinite; }
.sg-bulb:nth-of-type(2n) { animation-delay: 0.6s; }
@keyframes sg-bulb { 50% { opacity: 0.35; } }
.sg-pointer {
  position: absolute; top: -4px; left: 50%; z-index: 2;
  transform: translateX(-50%);
  border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-top: 30px solid #ffd700;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.sg-hub {
  position: absolute; inset: 0; margin: auto; width: 22%; height: 22%;
  display: grid; place-items: center; border-radius: 50%;
  border: 3px solid #ffd700;
  background: radial-gradient(circle at 35% 30%, #3a2c4d, #0d0a14 70%);
}
.sg-hub img { width: 86%; height: 86%; display: block; }

/* ============================================================ 2. Jackpot == */
.sg-slot {
  position: relative;
  width: min(400px, calc(100% - 30px));
  padding: 18px 16px 22px;
  border: 3px solid #ffd700;
  border-radius: 22px;
  background: linear-gradient(180deg, #2a1d3a, #120d18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 6px #1a1224;
}
.sg-slot-top { text-align: center; font-weight: 800; letter-spacing: 0.2em; color: #ffd700; margin-bottom: 10px; font-size: 0.95rem; }
.sg-slot-top span { color: #ed2c15; }
.sg-slot-lights { display: flex; justify-content: space-between; margin-bottom: 10px; }
.sg-slot-lights i { width: 9px; height: 9px; border-radius: 50%; background: #ffd700; opacity: 0.35; animation: sg-blink 1s infinite; }
.sg-slot-lights i:nth-child(even) { animation-delay: 0.5s; }
@keyframes sg-blink { 50% { opacity: 1; box-shadow: 0 0 10px #ffd700; } }
.sg-reels { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; border-radius: 12px; background: #0a0710; }
.sg-reels::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px;
  background: rgba(237, 44, 21, 0.75); transform: translateY(-50%); pointer-events: none; z-index: 3;
}
/* 150px window, 100px symbols: neighbours peek in above and below the payline,
   and the gradients shade the window into a cylinder. */
.sg-reel {
  position: relative; height: 150px; overflow: hidden; border-radius: 8px;
  background: linear-gradient(180deg, #8f879c 0%, #f3f0f7 30%, #fff 50%, #f3f0f7 70%, #8f879c 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.sg-reel::before, .sg-reel::after { content: ''; position: absolute; left: 0; right: 0; height: 44px; z-index: 2; pointer-events: none; }
.sg-reel::before { top: 0; background: linear-gradient(rgba(10, 7, 16, 0.85), transparent); }
.sg-reel::after { bottom: 0; background: linear-gradient(transparent, rgba(10, 7, 16, 0.85)); }
.sg-strip { will-change: transform, filter; }
.sg-sym { height: 100px; display: grid; place-items: center; text-align: center; color: #1a0a2e; line-height: 1.05; padding: 4px; }
.sg-sym i { display: block; font-size: 1.75rem; color: #ed2c15; margin-bottom: 4px; }
.sg-sym b { display: block; font-size: 0.98rem; font-weight: 800; }
.sg-sym small { display: block; font-size: 0.6rem; font-weight: 700; color: #6b5b80; margin-top: 2px; letter-spacing: 0.04em; }
.sg-lever {
  position: absolute; right: -28px; top: 70px; width: 12px; height: 110px; cursor: pointer;
  border-radius: 6px; background: linear-gradient(90deg, #999, #eee, #999);
  transform-origin: bottom; transition: transform 0.25s;
}
.sg-lever::before {
  content: ''; position: absolute; top: -18px; left: 50%; width: 28px; height: 28px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #ed2c15);
}
.sg-lever.is-pulled { transform: scaleY(0.5); }
.sg-slot.is-win { animation: sg-winflash 0.5s 4; }
@keyframes sg-winflash { 50% { box-shadow: 0 0 0 6px #1a1224, 0 0 46px #ffd700; } }

/* ============================================================ 3. Scratch == */
.sg-scratch-wrap { width: min(380px, 100%); }
.sg-scratch {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border: 2px solid #ffd700; border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, #4a2d63, #120d18 75%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  user-select: none; -webkit-user-select: none;
}
.sg-scratch-under { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; }
.sg-scratch-wait { color: #a79fb4; font-size: 1.6rem; }
.sg-face-big { font-size: 2.3rem; font-weight: 800; color: #ffd700; line-height: 1.05; }
.sg-face-sub { margin-top: 6px; font-size: 0.9rem; font-weight: 600; color: #e9e4f0; letter-spacing: 0.06em; }
.sg-face.is-none .sg-face-big { color: #e9e4f0; font-size: 1.8rem; }
.sg-scratch.is-revealed .sg-face-big { animation: sg-glow 1.4s ease-in-out infinite; }
.sg-scratch.is-revealed .sg-face { animation: sg-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes sg-glow { 50% { text-shadow: 0 0 22px rgba(255, 215, 0, 0.95); } }
@keyframes sg-pop { from { transform: scale(0.7); } }
.sg-scratch canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity 0.7s ease; }
@media (hover: hover) and (pointer: fine) { .sg-scratch canvas { cursor: none; } }
.sg-scratch.is-revealed canvas { opacity: 0; pointer-events: none; }
/* A light sweep across the untouched foil. Gone as soon as scratching starts. */
.sg-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sg-shine 2.8s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes sg-shine { 60%, 100% { transform: translateX(120%); } }
.sg-scratch.is-scratching .sg-shine { display: none; }
.sg-coin {
  position: absolute; left: 0; top: 0; z-index: 5; width: 38px; height: 38px; pointer-events: none;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #d4a017 58%, #8a6508);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  color: #6b4b00; font-weight: 800; font-size: 1rem;
  opacity: 0; transition: opacity 0.15s;
}
.sg-coin.is-on { opacity: 1; }
.sg-flake {
  position: absolute; z-index: 4; width: 5px; height: 3px; margin: -1px 0 0 -2px; pointer-events: none;
  border-radius: 1px; background: #e8c35a;
  animation: sg-flake 0.85s ease-in forwards;
}
@keyframes sg-flake { to { transform: translate(var(--dx), 70px) rotate(var(--rot)); opacity: 0; } }

/* ======================================================== 4. Mystery box == */
.sg-boxes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: min(430px, 100%); padding-top: 50px; }
.sg-rays {
  position: absolute; left: 50%; top: 58%; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 0, 0.3) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%);
          mask: radial-gradient(circle, #000 12%, transparent 66%);
  animation: sg-rays 7s linear infinite;
}
.sg-rays.is-on { opacity: 1; }
@keyframes sg-rays { to { transform: rotate(360deg); } }
.sg-gift {
  position: relative; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; color: inherit;
  animation: sg-bob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.35s);
  transition: transform 0.65s cubic-bezier(0.3, 1.2, 0.5, 1), opacity 0.5s;
}
.sg-gift:focus-visible { outline: 3px solid #ffd700; outline-offset: 4px; border-radius: 8px; }
@keyframes sg-bob { 50% { transform: translateY(-9px); } }
.sg-gift:hover:not(:disabled) .sg-gift-body, .sg-gift:hover:not(:disabled) .sg-gift-lid { filter: brightness(1.18); }
.sg-gift-in { position: absolute; inset: 0; display: block; }
.sg-gift-body {
  position: absolute; left: 10%; right: 10%; bottom: 6%; height: 58%; border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 42%, #ffd700 42% 58%, transparent 58%),
    linear-gradient(135deg, #ff3b25, #a3160b);
  box-shadow: inset -10px -8px 0 rgba(0, 0, 0, 0.18);
}
.sg-gift-lid {
  position: absolute; left: 4%; right: 4%; bottom: 60%; height: 18%; z-index: 3; border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 42%, #ffe45c 42% 58%, transparent 58%),
    linear-gradient(135deg, #ff5a42, #c81d0e);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.75s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.sg-bow { position: absolute; left: 50%; bottom: 88%; width: 0; height: 0; }
.sg-bow::before, .sg-bow::after {
  content: ''; position: absolute; bottom: 0; width: 26px; height: 18px; border: 5px solid #ffd700; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.sg-bow::before { right: 0; transform: rotate(-24deg); transform-origin: right bottom; }
.sg-bow::after { left: 0; transform: rotate(24deg); transform-origin: left bottom; }
.sg-gift-shadow { position: absolute; left: 18%; right: 18%; bottom: -4px; height: 10px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, 0.55), transparent 70%); }
.sg-gift-beam {
  position: absolute; left: 50%; bottom: 60%; width: 70%; height: 0; transform: translateX(-50%);
  background: linear-gradient(to top, rgba(255, 225, 120, 0.95), rgba(255, 215, 0, 0));
  filter: blur(6px); border-radius: 50% 50% 0 0; transition: height 0.7s ease-out; z-index: 1;
}
.sg-gift-card {
  position: absolute; left: 50%; bottom: 40%; z-index: 2; min-width: 88%;
  padding: 6px 8px; border-radius: 8px; background: #fffaf0; color: #1a0a2e; border: 2px solid #ffd700;
  text-align: center; line-height: 1.1; white-space: nowrap;
  transform: translate(-50%, 30%) scale(0.4); opacity: 0;
  transition: transform 0.7s 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.3s 0.2s;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.sg-gift-card b { display: block; font-size: 0.78rem; font-weight: 800; }
.sg-gift-card small { display: block; font-size: 0.5rem; font-weight: 700; color: #6b5b80; }
.sg-gift.is-away { opacity: 0; transform: translateY(40px) scale(0.7) !important; pointer-events: none; }
.sg-gift.is-chosen { animation: none; z-index: 5; }
.sg-gift.is-rumble .sg-gift-in { animation: sg-rumble 0.45s linear infinite; }
.sg-gift.is-rumble .sg-gift-in { animation-name: sg-rumble; }
@keyframes sg-rumble {
  0%   { transform: rotate(0) translate(0, 0); }
  20%  { transform: rotate(-4deg) translate(-1px, 0); }
  40%  { transform: rotate(4deg) translate(1px, -1px); }
  60%  { transform: rotate(-5deg) translate(-1px, 1px); }
  80%  { transform: rotate(5deg) translate(1px, 0); }
  100% { transform: rotate(0) translate(0, 0); }
}
.sg-gift.is-open .sg-gift-lid { transform: translate(38%, -190%) rotate(38deg); }
.sg-gift.is-open .sg-gift-beam { height: 170%; }
.sg-gift.is-open .sg-gift-card { transform: translate(-50%, -110%) scale(1); opacity: 1; }
.sg-gift.is-none .sg-gift-beam { background: linear-gradient(to top, rgba(220, 215, 230, 0.7), transparent); }

/* ====================================================== 5. Pick a record == */
.sg-records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: min(420px, 100%); padding-top: 40px; }
.sg-sleeve {
  position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer;
  font-family: inherit; transition: transform 0.35s, opacity 0.45s;
  perspective: 600px;
}
.sg-sleeve:hover:not(:disabled) { transform: translateY(-6px) rotate(-1.5deg); }
.sg-sleeve:focus-visible { outline: 3px solid #ffd700; outline-offset: 4px; border-radius: 6px; }
.sg-sleeve-disc {
  position: absolute; inset: 5%; z-index: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, #0c0c0c 0 1.4px, #1f1f1f 1.4px 2.8px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.9s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.sg-sleeve-disc span { position: absolute; inset: 34%; border-radius: 50%; background: var(--c1); }
.sg-sleeve-art {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 5px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 8px; text-align: left;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Three cover designs so the grid reads as a crate, not six swatches. */
.sg-art-0::before { content: ''; position: absolute; right: -30%; bottom: -30%; width: 90%; height: 90%; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08); }
.sg-art-1::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0 6px, transparent 6px 14px); }
.sg-art-2::before { content: ''; position: absolute; left: 50%; top: 60%; width: 180%; height: 180%; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255, 255, 255, 0.12) 0 8deg, transparent 8deg 18deg); }
.sg-sleeve-brand { position: relative; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.85); }
.sg-sleeve-name { position: relative; font-size: 0.95rem; font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.sg-sleeve.is-away { opacity: 0; transform: scale(0.85) translateY(20px); }
.sg-sleeve.is-out { z-index: 3; transform: scale(1.12) translateY(-6px); }
.sg-sleeve.is-out .sg-sleeve-disc { transform: translateY(-58%) rotate(360deg); }

/* The turntable. */
.sg-tt {
  position: relative; width: min(390px, 100%); aspect-ratio: 1.3; border-radius: 18px;
  background: linear-gradient(145deg, #2d2436, #141018);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0; transform: scale(0.94); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.sg-tt.is-in { opacity: 1; transform: none; }
.sg-platter {
  position: absolute; left: 7%; top: 9%; width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #3a3a3a 0 30%, #262626 31% 100%);
  box-shadow: 0 0 0 5px #3d3d3d, 0 0 0 7px #1a1a1a, 0 10px 24px rgba(0, 0, 0, 0.6);
}
.sg-vinyl {
  position: absolute; inset: 3%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #0b0b0b 0 1.5px, #1d1d1d 1.5px 3px);
  box-shadow: inset 0 0 0 2px #000, 0 6px 14px rgba(0, 0, 0, 0.5);
  transform: translateY(-150%) scale(1.15); opacity: 0;
  transition: transform 0.8s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.3s;
  will-change: transform;
}
.sg-vinyl.is-placed { transform: none; opacity: 1; }
.sg-vlabel {
  position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle, #0d0a14 0 6%, var(--lc, #ed2c15) 6.5%);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25);
}
.sg-vlabel-t { display: flex; flex-direction: column; align-items: center; color: #fff; line-height: 1.05; padding: 0 6px; }
/* Prize above the spindle, conditions below it — never under it. */
.sg-vlabel-t b { margin-bottom: 11px; }
.sg-vlabel-t b { display: block; font-size: 0.82rem; font-weight: 800; }
.sg-vlabel-t small { display: block; font-size: 0.5rem; font-weight: 700; opacity: 0.9; }
/* Reflections belong to the room, not the record: the sheen sits OVER the
   vinyl and does not rotate, which is what makes the spin read as real. */
.sg-sheen {
  position: absolute; inset: 3%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 10%, rgba(255, 255, 255, 0.13) 14%, transparent 20% 58%, rgba(255, 255, 255, 0.1) 62%, transparent 68%);
}
.sg-spindle { position: absolute; left: 50%; top: 50%; width: 3%; height: 3%; transform: translate(-50%, -50%); border-radius: 50%; background: #ccc; box-shadow: 0 0 0 2px #555; }
.sg-arm {
  position: absolute; right: 8%; top: 6%; width: 12%; height: 74%;
  transform-origin: 50% 7%; transform: rotate(-6deg);
  transition: transform 1.2s cubic-bezier(0.45, 0.05, 0.3, 1);
}
.sg-arm.is-swing { transform: rotate(23deg); }
.sg-arm-base { position: absolute; left: 50%; top: 0; width: 34px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eee, #888); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
.sg-arm-rod { position: absolute; left: 50%; top: 5%; width: 5px; height: 86%; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(90deg, #9a9a9a, #f2f2f2, #8a8a8a); }
.sg-arm-head {
  position: absolute; left: 50%; bottom: 0; width: 16px; height: 26px; border-radius: 3px;
  background: linear-gradient(90deg, #bbb, #eee); transform: translateX(-70%) rotate(18deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); transition: transform 0.35s;
}
.sg-arm.is-down .sg-arm-head { transform: translateX(-70%) rotate(18deg) scale(0.92); }
.sg-eq { position: absolute; right: 7%; bottom: 9%; display: flex; gap: 3px; align-items: flex-end; height: 34px; }
.sg-eq i { width: 5px; height: 4px; border-radius: 2px; background: #ed2c15; }
.sg-eq.is-live i { animation: sg-eq 0.45s ease-in-out infinite alternate; }
.sg-eq.is-live i:nth-child(2n) { animation-duration: 0.35s; background: #ffd700; }
.sg-eq.is-live i:nth-child(3n) { animation-duration: 0.55s; }
@keyframes sg-eq { from { height: 4px; } to { height: 32px; } }
.sg-tt-led { position: absolute; left: 7%; bottom: 8%; width: 8px; height: 8px; border-radius: 50%; background: #3a1510; }
.sg-tt.is-on .sg-tt-led { background: #ff3b25; box-shadow: 0 0 10px #ff3b25; }
.sg-tt.is-reveal .sg-vlabel { animation: sg-labelglow 1.4s ease-in-out infinite; }
@keyframes sg-labelglow { 50% { box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25), 0 0 26px rgba(255, 215, 0, 0.85); } }

/* ===================================================== 6. Lucky envelope == */
.sg-env-wrap { position: relative; width: min(340px, 100%); padding-top: 70px; }
.sg-env {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; background: none;
  cursor: pointer; font-family: inherit; perspective: 900px;
  animation: sg-float 3s ease-in-out infinite;
}
.sg-env:disabled { cursor: default; }
.sg-env:focus-visible { outline: 3px solid #ffd700; outline-offset: 6px; border-radius: 10px; }
@keyframes sg-float { 50% { transform: translateY(-8px) rotate(-1deg); } }
.sg-env.is-flap { animation: none; }
.sg-env-back { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(180deg, #8e1308, #6b0e06); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5); }
.sg-env-card {
  position: absolute; left: 7%; right: 7%; top: 8%; height: 80%; z-index: 1;
  transition: transform 0.95s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.sg-env-card-in {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  width: 100%; height: 100%; border-radius: 8px; text-align: center;
  background: linear-gradient(160deg, #fffdf5, #f5ecd2);
  border: 2px solid #d4a017; box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px rgba(212, 160, 23, 0.5);
  color: #1a0a2e;
}
.sg-env-card-in i { font-style: normal; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.22em; color: #b45309; }
.sg-env-card-in b { font-size: 1.7rem; font-weight: 800; line-height: 1.05; }
.sg-env-card-in small { font-size: 0.72rem; font-weight: 700; color: #6b5b80; }
.sg-env.is-none .sg-env-card-in b { font-size: 1.3rem; }
/* The front pocket: a V-notched panel with side folds shaded in. */
.sg-env-pocket {
  position: absolute; inset: 0; z-index: 2; border-radius: 10px;
  clip-path: polygon(0 32%, 50% 66%, 100% 32%, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, rgba(0, 0, 0, 0.16) 0 50%, transparent 50%) left / 50% 100% no-repeat,
    linear-gradient(to top left, rgba(0, 0, 0, 0.16) 0 50%, transparent 50%) right / 50% 100% no-repeat,
    linear-gradient(180deg, #e0301c, #b91c0f);
}
.sg-env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 66%; z-index: 3;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #ff4a33, #d7261a);
  transform-origin: top center; transform: rotateX(0deg);
  transition: transform 0.62s cubic-bezier(0.4, 0.1, 0.3, 1);
  backface-visibility: visible;
}
.sg-env.is-flap .sg-env-flap { transform: rotateX(180deg); }
.sg-env.is-flap-back .sg-env-flap { z-index: 0; filter: brightness(0.75); }
.sg-env-shine {
  position: absolute; inset: 0; z-index: 4; border-radius: 10px; pointer-events: none; overflow: hidden;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%) -150% 0 / 200% 100% no-repeat;
  animation: sg-envshine 3.2s ease-in-out infinite;
}
@keyframes sg-envshine { 55%, 100% { background-position: 150% 0; } }
.sg-env.is-crack .sg-env-shine { display: none; }
.sg-env-seal {
  position: absolute; left: 50%; top: 52%; z-index: 5; width: 58px; height: 58px;
  transform: translate(-50%, -50%); display: grid; place-items: center;
}
.sg-seal-half {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe27a, #c9920e 60%, #8a6508);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.5, 1), opacity 0.55s;
}
.sg-seal-half.l { clip-path: polygon(0 0, 55% 0, 42% 40%, 58% 62%, 45% 100%, 0 100%); }
.sg-seal-half.r { clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%, 58% 62%, 42% 40%); }
.sg-env-seal img { position: relative; width: 70%; height: 70%; transition: opacity 0.25s; }
.sg-env.is-crack .sg-seal-half.l { transform: translate(-40px, 26px) rotate(-40deg); opacity: 0; }
.sg-env.is-crack .sg-seal-half.r { transform: translate(40px, 30px) rotate(45deg); opacity: 0; }
.sg-env.is-crack .sg-env-seal img { opacity: 0; }
.sg-env.is-rise .sg-env-card { transform: translateY(-62%); }
.sg-env.is-front .sg-env-card { z-index: 6; transform: translateY(-34%) scale(1.14); }
.sg-env.is-front .sg-env-card-in { box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px rgba(212, 160, 23, 0.5), 0 0 34px rgba(255, 215, 0, 0.6); }

/* ================================================================ Phones == */
@media (max-width: 760px) {
  .sg-wheel { width: min(260px, 100%); }
  .sg-slot { width: min(330px, calc(100% - 24px)); padding: 14px 10px 16px; }
  .sg-lever { right: -22px; top: 58px; height: 90px; }
  .sg-sym b { font-size: 0.82rem; }
  .sg-sym i { font-size: 1.4rem; }
  .sg-boxes { gap: 12px; padding-top: 44px; }
  .sg-records { gap: 10px; padding-top: 34px; }
  .sg-tt { width: min(320px, 100%); }
  .sg-env-wrap { width: min(290px, 100%); padding-top: 60px; }
  .sg-env-card-in b { font-size: 1.35rem; }
  .sg-face-big { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-bulb, .sg-slot-lights i, .sg-shine, .sg-gift, .sg-rays, .sg-env, .sg-env-shine,
  .sg-eq.is-live i, .sg-scratch.is-revealed .sg-face-big, .sg-tt.is-reveal .sg-vlabel,
  .sg-slot.is-win { animation: none !important; }
  .sg-wheel-svg { transition-duration: 0.6s; }
  .sg-gift, .sg-sleeve, .sg-vinyl, .sg-env-card, .sg-env-flap, .sg-gift-lid, .sg-gift-card, .sg-arm { transition-duration: 0.15s !important; }
  .sg-spark, .sg-flake { display: none; }
}