/** Shopify CDN: Minification failed

Line 258:10 Unexpected "{"
Line 258:19 Expected ":"
Line 268:10 Unexpected "{"
Line 268:19 Expected ":"

**/
 /* ===========================================================
   pack ripper module
   =========================================================== */
/* ===== Root & layout ===== */
.ttc-pack-ripper {
  --bg: #0b0f16;
  --accent: #33e1ff;
  --accent2: #ffd84a;
  --text: #e7eef7;
  --muted: #9bb0c9;
  --ring: 0 0 0 2px rgba(51,225,255,.25), 0 0 22px rgba(51,225,255,.12);

  /* ✅ Correct animation durations */
  --pull-dur: 0.9s;
  --settle-dur: 0.55s;
  --flip-dur: 1s;

  /* Responsive sizing vars (leave these as-is) */
  --pack-w: clamp(220px, 86vw, 320px);
  --pack-ratio: 1.5;
  --pack-h: calc(var(--pack-w) * var(--pack-ratio));
  --card-w: clamp(180px, 70vw, 260px);
  --card-ratio: 1.423;
  --card-h: calc(var(--card-w) * var(--card-ratio));
  --container-pad: clamp(12px, 4vw, 24px);
  --panel-pad: clamp(12px, 3.5vw, 18px);
  --btn-pad-y: clamp(8px, 2.2vw, 12px);
  --btn-pad-x: clamp(12px, 3vw, 16px);
  --logo-size: clamp(20px, 4.5vw, 28px);
  --tag-size: clamp(12px, 2.8vw, 14px);
  --reward-title: clamp(16px, 4vw, 20px);
  --code-pad-y: clamp(8px, 2.5vw, 10px);
  --code-pad-x: clamp(10px, 3vw, 14px);
}
.ttc-pack-ripper .container{max-width:980px;margin:32px auto;padding:var(--container-pad)}
.ttc-pack-ripper .header{text-align:center;margin-bottom:18px}
.ttc-pack-ripper .logo{font-weight:900;letter-spacing:.5px;font-size:var(--logo-size)}
.ttc-pack-ripper .tag{color:var(--muted);margin-top:6px;font-size:var(--tag-size)}
.ttc-pack-ripper .panel{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:none; border-radius:16px; padding:var(--panel-pad);
  box-shadow:none;
}
.ttc-pack-ripper .arena{display:grid;place-items:center;padding:18px}
.ttc-pack-ripper .stage{width:var(--pack-w);height:var(--pack-h);display:grid;place-items:center;perspective:1200px}
.ttc-pack-ripper .wrap{position:relative;width:var(--pack-w);height:var(--pack-h)}
.ttc-pack-ripper .giveaway-banner{margin:10px 0 18px}
.ttc-pack-ripper .giveaway-banner img{display:block;width:100%;height:auto;border-radius:12px}
.ttc-pack-ripper .giveaway-banner {
  margin: 10px 0 18px;

  /* 🟢 Add these lines below */
  width: 70vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .ttc-pack-ripper .giveaway-banner {
    margin: 10px 0 18px;
    width: 95vw;              /* full screen width */
    max-width: none;
    margin-left: 50%;          /* center it */
    transform: translateX(-50%);
  }
  .ttc-pack-ripper .giveaway-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}

/* ===== Pack & card ===== */
.ttc-pack-ripper .pack{
  position:absolute; inset:0; border-radius:16px; overflow:hidden;
  background-image: var(--pack-img);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  border:none; box-shadow:none;
}
.ttc-pack-ripper .card3d{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:translate(-50%,-50%);width:var(--card-w);height:var(--card-h); z-index:2;}
.ttc-pack-ripper .card{
  position:absolute; inset:0; border-radius:16px;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition: transform var(--flip-dur) ease;
  background:none; border:none; overflow:hidden; box-shadow:none;
  -webkit-transform: translateZ(0);
}
.ttc-pack-ripper .face{
  position:absolute; inset:0; border-radius:16px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:grid; place-items:center;
  border:none !important; box-shadow:none !important;
  outline:1px solid #0b0f16; outline-offset:-1px;
  background-color:#0b0f16;
  transform-origin:center; transition:transform var(--flip-dur) ease; will-change:transform;
}
/* back */
.ttc-pack-ripper .back{
  z-index:1;background:
  var(--back-img, none) center/cover no-repeat,
  linear-gradient(180deg,#101829,#0c121e);
  
  color:#cde6ff; transform: rotateY(0) translateZ(1px);
}
/* front */
.ttc-pack-ripper .front{
  z-index:2;background:
  var(--front-img, none) center/cover no-repeat,
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), #0f1726;
  
  color:var(--text); transform: rotateY(180deg) translateZ(1px);
}
.ttc-pack-ripper .front:after, .ttc-pack-ripper .back:after{content:"";display:none}

.ttc-pack-ripper .front{
  z-index:2;
  background:
    var(--front-img, none) center/cover no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), #0f1726;
  color:var(--text);
  transform: rotateY(180deg) translateZ(1px);
}

/* 🎯 Prize reveal image sizing inside flip card front */
.ttc-pack-ripper .face.front .prize-img {
  position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, calc(-50% + 10px)); /* ⬇️ nudged 10px down */
  width: 50%;                      /* controls how much of the card it fills */
  height: auto;                    /* maintain aspect ratio */
  object-fit: contain;             /* no cropping */
  border-radius: 6px;              /* smooth edges if card corners rounded */
  z-index: 3;                      /* ensures it’s above the background */
}

/* === Coupon prize on card front === */
.ttc-pack-ripper .front .coupon-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 18px 24px; /* 🆕 added more horizontal padding for breathing room */
  box-sizing: border-box;
  z-index: 5;
}

/* 🎯 Coupon title — improved wrapping + edge spacing */
.ttc-pack-ripper .front .coupon-front .coupon-title {
  font-size: 1.15em !important;  /* balanced desktop size */
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 0 6px rgba(0,0,0,.7),
    0 0 12px rgba(0,0,0,.5);
  margin-bottom: 12px;
  line-height: 1.25;

  /* 🆕 keep away from borders + allow cleaner wrapping */
  max-width: 88%;
  margin-inline: auto;
  white-space: normal;
  word-break: break-word;
}

.ttc-pack-ripper .front .coupon-front .coupon-code {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  box-shadow: inset 0 0 10px rgba(255,255,255,.08);
  text-shadow: 0 0 3px rgba(0,0,0,.7);
}

.ttc-pack-ripper .front .prize-footer-hint {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.75em;
  color: rgba(255,255,255,.7);
  text-shadow: 0 0 4px rgba(0,0,0,.6);
  letter-spacing: 0.3px;
  user-select: none;
}

/* animation states */
.ttc-pack-ripper .card{
  opacity:0;
  transform: translateY(-210px) rotateX(18deg);
}

/* animation states */
.ttc-pack-ripper .card{
  opacity:0;
  transform: translateY(-210px) rotateX(18deg);
}

/* PULL state */
.ttc-pack-ripper .wrap.pull .card{
  animation: pullOut var(--pull-dur) cubic-bezier(.22,1,.24,1) forwards;
  opacity: 1; /* ensure visible during pull */
}
@keyframes pullOut{
  0%  { opacity:0; transform: translate3d(0,-210px,0) rotateX(18deg) }
  25% { opacity:1 }
  60% { transform: translate3d(0,-320px,0) rotateX(12deg) }
  100%{ transform: translate3d(0,-150px,0) rotateX(10deg) }
}

/* SETTLE state */
.ttc-pack-ripper .wrap.settle .card{
  animation: settleDown var(--settle-dur) ease-out forwards;
  opacity: 1; /* ensure visible during settle */
}
@keyframes settleDown{
  0%   { transform: translate3d(0,-150px,0) rotateX(10deg) }
  90%  { transform: translate3d(0,-6px,0) rotateX(8.6deg) }
  100% { transform: translate3d(0,0,0)  rotateX(8deg) }
}

/* FLIPPED state */
.ttc-pack-ripper .wrap.flipped .card{ opacity:1 }
.ttc-pack-ripper .flipped .front{ transform: rotateY(0) translateZ(1px); }
.ttc-pack-ripper .flipped .back { transform: rotateY(180deg) translateZ(1px); }
.ttc-pack-ripper .flipped .card{ transform: translateY(0) rotateX(0); }

/* ===== Buttons (base) ===== */
.ttc-pack-ripper .btn{
  appearance:none;border:0;outline:none;cursor:pointer;
  padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:12px;
  color:#03111a; background:linear-gradient(180deg,#7cf3ff,#35d5ff);
  font-weight:800; letter-spacing:.3px; box-shadow:var(--ring);
}
.ttc-pack-ripper .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.ttc-pack-ripper .help{color:var(--muted);font-size:13px;text-align:center}
.ttc-pack-ripper .footer{color:var(--muted);font-size:12px;text-align:center;margin-top:14px}

/* === Flip button "Not Ready" state === */
#flipBtn-{{ section.id }}.is-waiting {
  background: linear-gradient(180deg, #6b0000, #a30000) !important;
  color: #fff !important;
  opacity: 0.9;
  cursor: not-allowed;
  pointer-events: none;
  transition: background 0.3s ease, opacity 0.3s ease;
}

/* optional gentle pulse animation while waiting */
#flipBtn-{{ section.id }}.is-waiting {
  animation: pulseRed 1.5s infinite;
}
@keyframes pulseRed {
  0%,100% { opacity: 0.9; }
  50% { opacity: 0.6; }
}

/* ===== Reward overlay ===== */
.ttc-pack-ripper .rewardBox{ position:absolute; left:50%; transform:translateX(-50%); height:auto; text-align:center; }
.ttc-pack-ripper .rewardTitle{font-weight:800;font-size:var(--reward-title);line-height:1.4;margin-bottom:12px}
.ttc-pack-ripper .codeRow{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.ttc-pack-ripper .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:900;padding:var(--code-pad-y) var(--code-pad-x);border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ttc-pack-ripper .flipped .pack{ opacity:.55; }

/* === Extra small screen adjustments (≤480px) === */
@media (max-width: 480px){
  .ttc-pack-ripper .help{ font-size:12px; }
  .ttc-pack-ripper .arena{ padding:12px; }
}

/* ===========================================================
   pack ripper module control panel
   =========================================================== */
.ttc-pack-ripper .controls-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:780px;
  margin:14px auto 0;
}
.ttc-pack-ripper .controls-grid > *{ width:100% !important; min-width:0 !important; }

/* one size for all six controls */
.ttc-pack-ripper .ctl{
  display:flex !important; align-items:center; justify-content:center;
  height:56px !important; padding:0 18px !important;
  border-radius:12px !important;
  font-weight:800 !important; font-size:16px !important; letter-spacing:.3px;
  box-sizing:border-box;
}
/* ghost button visual parity */
.ttc-pack-ripper .btn--ghost{
  background: linear-gradient(180deg,#7cf3ff,#35d5ff); border:0; color:#03111a;
  font-weight:800; letter-spacing:.3px; box-shadow: var(--ring); cursor:pointer;
}
.ttc-pack-ripper .btn--ghost:hover{ background: linear-gradient(180deg,#5fe9f9,#25c4e8); }
.ttc-pack-ripper .btn--ghost[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* green pills styled to match buttons but green */
.ttc-pack-ripper .credits-pill,
.ttc-pack-ripper .cost-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 18px; height:56px; border-radius:12px;
  font-weight:800; font-size:16px; letter-spacing:.3px; box-sizing:border-box;
  background:linear-gradient(180deg,#22c55e,#16a34a); border:1px solid #14532d; color:#fff;
  box-shadow:0 0 12px rgba(22,163,74,.35);
}

.ttc-pack-ripper .credits-pill.credits-red {
  background: linear-gradient(180deg,#ef4444,#dc2626);
  border: 1px solid #991b1b;
  color: #fff;
  box-shadow: 0 0 12px rgba(239,68,68,.35);
}
.ttc-pack-ripper .cost-pill strong,
.ttc-pack-ripper .credits-pill strong {
  color: #fff;
  font-weight: 900;   /* extra bold */
  font-size: 1.0em;   /* slightly larger */
}

/* Hover + active effects only for Credits button */
.ttc-pack-ripper .credits-pill:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.ttc-pack-ripper .credits-pill:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}

/* tiny helper */
.ttc-pack-ripper .selected-pack{ color:#cde6ff; }


.ttc-pack-ripper .credit-icon {
  width: 29px;
  height: 29px;
  margin-left: 4px;
  margin-right: 4px;
  vertical-align: middle;
  display: inline-block;
}
 /* ===========================================================
   pack ripper module floating animation
   =========================================================== */
/* ultra-smooth vertical float (no tilt, no hesitation) */
@keyframes ttcIdleFloat {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(.445,.05,.55,.95); /* up (easeInOutSine-like) */
  }
  50% {
    transform: translateY(-6px);
    animation-timing-function: cubic-bezier(.445,.05,.55,.95); /* down */
  }
  100% {
    transform: translateY(0);
  }
}

.ttc-pack-ripper .pack {
  /* Adjust ONLY this duration for speed */
  animation: ttcIdleFloat 4.0s linear infinite;
  will-change: transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ttc-pack-ripper .pack { animation: none !important; }
}

/* ===========================================================
   🪟 Global Confirm Dialog
   =========================================================== */
.ttc-pack-ripper .confirm[aria-hidden="true"]{display:none}
.ttc-pack-ripper .confirm{position:fixed;inset:0;z-index:70}
.ttc-pack-ripper .confirm__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.ttc-pack-ripper .confirm__box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,520px); background:#0e1422;color:#e7eef7;
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;
  box-shadow:0 30px 60px rgba(0,0,0,.45)
}
.ttc-pack-ripper .confirm__close{ position:absolute;right:10px;top:10px;border:0;background:transparent; color:#e7eef7;font-size:20px;cursor:pointer }
.ttc-pack-ripper .confirm__actions{ display:flex;gap:10px;justify-content:flex-end;margin-top:14px }
.ttc-pack-ripper .btn--danger{ background:linear-gradient(180deg,#ff9aa2,#ff5a5a);color:#03111a }

 /* ===========================================================
   credits modal inside clicking credits button on control panel
   =========================================================== */
.ttc-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.ttc-modal.hidden{ display:none; }

.ttc-modal .ttc-modal-content{
  width: min(420px, calc(100% - 32px));
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  position: relative;
}

/* dark card like My Pulls */
.ttc-modal--dark{
  background: #1a2432;             /* deep navy/gray */
  color: #eef4ff;                  /* soft white */
  padding: 20px 22px 22px;
}

/* close button */
.ttc-modal .ttc-modal-close{
  position: absolute;
  top: 10px; right: 12px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}

/* title + text */
.ttc-modal-title{
  margin: 4px 0 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.ttc-modal-sub{
  margin: 0 0 8px;
  opacity: .9;
  text-align: left;
}
.ttc-modal-body p{ margin: 6px 0; }

/* actions row (centered) */
.ttc-modal-actions{
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
/* === Match Credits modal title color to Spend Tracker === */
#creditsModal .ttc-modal-title {
  color: #7fe8ff; /* same cyan tone as Spend Tracker title */
}

/* cyan CTA button like My Pulls */
.ttc-modal .btn.btn--primary{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  background: linear-gradient(180deg, #7fe8ff 0%, #41ccff 100%);
  color: #00324a;
  border: none;
}
.ttc-modal .btn.btn--primary:hover{
  filter: brightness(1.05);
}

/* make custom bullet color respect --bullet-color */
.ttc-modal-body ul li::marker {
  color: var(--bullet-color, #41ccff);
}

.ttc-toast {
  all: unset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: inline-block;
  background: #111827;
  color: #e7eef7;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 4px 10px;              /* smaller padding */
  font-size: 12px;                /* smaller text */
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* Default (claim toast under button) */
.ttc-toast {
  top: 100%;
}

/* Show animation */
.ttc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Controls toast (above control panel) */
.control-panel {
  position: relative;
  overflow: visible;
}

.ttc-toast--controls {
  top: auto !important;
  bottom: 100% !important;
  transform: translateX(-50%) translateY(-6px) !important;
  z-index: 300 !important;
}

/* Slightly smaller on mobile */
@media (max-width: 640px) {
  .ttc-toast {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 12px;
  }
  }  /* ← CLOSE the mobile block here */

 /* ===========================================================
   Control panel card
   =========================================================== */
.ttc-pack-ripper .control-panel {
  position: relative;
  max-width: 550px;
  margin: 20px auto 0;
  padding: 16px 18px;
  border-radius: 18px;

  /* solid dark background */
 background: #0e1422; /*

  /* soft grey/silver edge */
  border: 1px solid rgba(255, 255, 255, 0.15);

  /* subtle depth shadow */
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* removed blur since it's solid now */
  backdrop-filter: none;

  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* tighter row spacing */
.ttc-pack-ripper .control-panel .controls-grid{
  margin: 0;
  gap: 12px;
}

/* refined divider — cyan gradient fade */
.ttc-pack-ripper .control-panel .cp-divider {
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(
    90deg,
    rgba(127,232,255,0),     /* transparent at edges */
    rgba(127,232,255,0.65),  /* bright cyan center fade */
    rgba(65,204,255,0)       /* transparent again */
  );
  opacity: 0.9; /* slightly stronger to match glow tone */
}
/* balanced layout */
.ttc-pack-ripper .control-panel .controls-grid > *{
  min-width: 0 !important;
}

/* polished pills */
.ttc-pack-ripper .control-panel .credits-pill,
.ttc-pack-ripper .control-panel .cost-pill{
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 600;
}

/* consistent button hover */
.ttc-pack-ripper .control-panel .btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* press state */
.ttc-pack-ripper .control-panel .btn:active{
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
}

/* Keep control panel Credits pill clickable + hover */
.ttc-pack-ripper .credits-pill.ctl {
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.ttc-pack-ripper .credits-pill.ctl:hover {
  filter: brightness(1.1);
}

/* Desktop: show full label */
.ttc-pack-ripper .credits-pill .label-text {
  display: inline;
}
/* === Credits modal overlay === */
#creditsModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65); /* instant dark background */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease; /* ⏩ faster overlay fade */
}

#creditsModal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* === Inner modal fade + scale === */
#creditsModal .credits-modal__content {
  position: relative;
  background: #0b0f16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  padding: 20px;
  color: #e7eef7;

  /* ✨ Match View Pack Details modal */
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

#creditsModal.is-active .credits-modal__content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ===========================================================
   🧩 Spend tracker modal global
   =========================================================== */
#spendModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65); /* identical backdrop */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* When opened (using TTC_MODAL removing .hidden or adding .is-active) */
#spendModal.is-active,
#spendModal:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

/* When closing — fade overlay together */
#spendModal.closing {
  opacity: 0; /* fade the backdrop simultaneously */
  pointer-events: none;
}

/* === Inner modal box === */
#spendModal .ttc-modal-content {
  position: relative;
  background: #1a2432;  /* ✅ same dark tone as credits */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  padding: 20px;
  color: #eef4ff;
  text-align: center;

  /* ✅ Use the same sizing and proportions as credits */
  width: min(420px, calc(100% - 32px));
  max-width: 420px;
  min-height: 265px;

  /* ✨ Keep your fade + scale animations */
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;

  /* Center it perfectly */
  top: 50%;
  left: 50%;
  position: absolute;
}
/* === Title color override (match cyan button tone) === */
#spendModal .ttc-modal-title {
  color: #7fe8ff;                   /* same top gradient hue as .btn--primary */
}

/* === Fade-in === */
#spendModal.is-active .ttc-modal-content,
#spendModal:not(.hidden) .ttc-modal-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* === Fade-out (modal + backdrop synced) === */
#spendModal.closing .ttc-modal-content {
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease; /* faster close */
}

/* === Hover interaction for Spend Tracker modal trigger === */
.spend-tracker {
  cursor: pointer;                   /* 👆 shows hand cursor */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}

.spend-tracker:hover {
  transform: translateY(-1px);       /* ⬆️ subtle lift (like Credits button hover) */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
/* 🧩 Match text spacing to Credits modal */
#spendModal .ttc-modal-body p {
  margin-bottom: 8px; /* tighten spacing under paragraph */
}
#spendModal .ttc-modal-body ul {
  list-style-position: inside; /* brings bullets inline with text */
  padding-left: 0 !important;
}
/* ===========================================================
   🧩 Spend tracker mobile tweaks
   =========================================================== */
/* 📱 Mobile tweak — move inner Spend modal contents downward + resize text */
@media (max-width: 640px) {
  #spendModal .ttc-modal-content {
    padding-top: 24px; /* add extra top space inside modal */
  }

  #spendModal .ttc-modal-title {
    margin-top: 8px;
    font-size: 20px; /* slightly smaller header */
  }

  #spendModal .ttc-modal-body {
    margin-top: 12px;
    font-size: 12px; /* scale down body text */
    line-height: 1.45;
  }

  #spendModal .ttc-modal-body li {
    font-size: 14px;
  }

  #spendModal .ttc-modal-actions {
    margin-top: 20px;
  }

  #spendModal .ttc-modal-actions .btn {
    font-size: 17px;
    padding: 10px 16px; /* match proportionally smaller text */
  }
}
/* =============== End spend tracker modal ================== */

/* Scoped, compact toasts (beats theme globals) */
.ttc-pack-ripper [id^="toast-"],
.ttc-pack-ripper [id^="toast-controls-"]{
  display: inline-flex !important;
  width: max-content !important;
  max-width: min(90vw, 420px) !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

/* Keep the controls toast above the panel and centered */
.ttc-pack-ripper .control-panel{ position:relative; overflow:visible; }
.ttc-pack-ripper [id^="toast-controls-"]{
  top: auto !important;
  bottom: calc(100% + 6px) !important;   /* above the panel */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 300 !important;
}

.ttc-pack-ripper .btn--green {
  background: linear-gradient(180deg,#22c55e,#16a34a);
  border: 1px solid #14532d;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(22,163,74,.25);
  transition: all .2s ease;
}
.ttc-pack-ripper .btn--green:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.ttc-pack-ripper .btn--green:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}

/* 🖱️ ------- Modals: keep hand cursor over cards + no text selection -------- */
.ttc-pack-ripper .ripper-modal .ripper-pulls .pull,
.ttc-pack-ripper .pd-modal .pd-card {
  cursor: pointer !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* All descendants inherit the hand cursor (no I-beam) */
.ttc-pack-ripper .ripper-modal .ripper-pulls .pull *,
.ttc-pack-ripper .pd-modal .pd-card * {
  cursor: inherit !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Allow copy/select on code areas and keep the pointer */
.ttc-pack-ripper .ripper-modal .ripper-pulls .pull .coupon-code,
.ttc-pack-ripper .ripper-modal .ripper-pulls .pull .mini-code,
.ttc-pack-ripper .ripper-modal .ripper-pulls .pull .pull-code,
.ttc-pack-ripper .pd-modal .pd-card .coupon-code,
.ttc-pack-ripper .pd-modal .pd-card .mini-code,
.ttc-pack-ripper .pd-modal .pd-card .pull-code {
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: pointer !important;
}
/* ===========================================================
   🧩 Prize info modal when clickin more info
   =========================================================== */
.prize-info-modal {
  max-width: 640px;
  padding: 20px 28px;
  color: #fff;
}

.prize-info-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.prize-info-left {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prize-cardframe {
  position: relative;
  width: 220px;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
}

.prize-cardframe img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === Layer clarity + correct stacking === */
.prize-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3; /* sits above card front */
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}

.prize-coupon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  z-index: 4;
  background: transparent; /* 🧽 remove dim black base */
}

.prize-coupon:not(:empty)::before {
  content: none; /* remove any dark overlay */
}

.prize-info-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prize-info-name {
  font-size: 18px;
  font-weight: 700;
}

.prize-info-tier,
.prize-info-rarity,
.prize-info-odds,
.prize-info-code,
.prize-info-expiry {
  font-size: 14px;
  opacity: 0.9;
}

.prize-info-description {
  margin-top: 8px;
  font-size: 13.5px;
  opacity: 0.85;
  line-height: 1.4;
}
/* === Fix: Prize Info Modal image clarity & layering === */
#prizeInfoFront,
#prizeInfoPrize,
#prizeInfoCoupon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 🖼️ Image sits on top when visible */
#prizeInfoPrize {
  z-index: 2;
  opacity: 1;            /* ensure full brightness */
  mix-blend-mode: normal; /* prevents dim look */
}

/* 🧾 Coupon text below image layer only if no image is shown */
#prizeInfoCoupon {
  z-index: 3;
  color: #fff;
  font-weight: 600;
  text-align: center;
  font-size: 16px;
  opacity: 1;
}

/* ensure front (card back design) is behind everything */
#prizeInfoFront {
  z-index: 1;
  opacity: 1;
}
/* === Resize & center the actual prize image only (with downward nudge) === */
#prizeInfoPrize {
  position: absolute;         
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 15px)); /* ⬇ nudge down by 10px */

  width: auto;
  max-width: 140px;           /* adjust width as you like */
  max-height: 180px;          /* keeps inside frame */
  object-fit: contain;
  z-index: 3;
}
/* Align "Prize Details" title left for Prize Info modal only */
.prize-info-modal .ttc-modal-title {
  text-align: left;
  font-size: 20px;       /* optional: smaller, cleaner */
  font-weight: 700;
  margin-bottom: 10px;
}
/* 💜 Make only the Drop Rate value purple */
#prizeInfoModal #prizeInfoOdds {
  color: #7CFF8A !important;   /* soft neon green accent */
  font-weight: 700;            /* make it stand out a bit */
}
/* Small "Details" label above description */
#prizeInfoModal .details-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #9aa3ad;
  margin-bottom: 3px;
  letter-spacing: 0.2px;
}
#prizeInfoCoupon {
  z-index: 3;
  color: #fff;
  font-weight: 600;
  text-align: center;
  font-size: 16px;
  opacity: 1;

  /* 🧩 New width and layout improvements */
  max-width: 80% !important;        /* make the text area wider */
  width: 80% !important;
  margin: 0 auto !important;        /* keep perfectly centered */
  line-height: 1.2 !important;      /* tighter spacing for multi-line wrap */
  white-space: normal !important;   /* allow wrapping if long */
  word-break: break-word !important;/* break long coupon strings cleanly */
}
/* ===========================================================
   🧩 Info Wrap (Ultra-Compact, Clean, No Text Glow)
   =========================================================== */
#prizeInfoModal .info-wrap {
  margin-top: 6px;                /* tighter vertical spacing */
  width: 100%;
  max-width: 340px;
}

/* Label above each field */
#prizeInfoModal .info-label {
  display: block;
  font-size: 10px;                /* smaller, subtle label */
  font-weight: 500;
  color: #8f98a4;                 /* slightly dimmer for hierarchy */
  margin-bottom: 2px;
  letter-spacing: 0.1px;
}

/* Box container under each label */
#prizeInfoModal .info-box {
  background: rgba(255, 255, 255, 0.04);  /* flat translucent base */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 3px 7px;               /* minimal height & padding */
  font-size: 12.5px;              /* smaller field text */
  font-weight: 600;
  color: #e4e9ee;                 /* crisp neutral text */
  width: 100%;
  line-height: 1.25;
  box-shadow: none;               /* 🧽 removes inner glow entirely */
}

/* Apply uniform color across contexts */
.ttc-pack-ripper #prizeInfoModal .info-box,
.ttc-pack-ripper #prizeInfoModal .info-label {
  color: inherit;
}

/* Keep description closer & slightly refined */
#prizeInfoModal .prize-info-description {
  margin-top: 8px;
}

#prizeInfoModal .prize-info-desc {
  font-size: 13.5px;          /* slightly smaller than before */
  line-height: 1.45;          /* tighter but readable */
  color: #cfd6dc;             /* softer tone for body text */
  font-weight: 400;           /* lighter than info-box text */
  letter-spacing: 0.2px;
}
#prizeInfoModal #prizeInfoCode {
  cursor: pointer;
  transition: color 0.2s ease;
}

#prizeInfoModal #prizeInfoCode:hover {
  color: #7fe8ff; /* light cyan tone to match your modal theme */
}
/* ===========================================================
   🧩 Status field colors (match info-box style)
   =========================================================== */
#prizeInfoStatus {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #e4e9ee; /* default neutral */
  text-align: center;
  transition: color 0.2s ease-in-out;
}

/* 🟥 Pending (same border box, just color change) */
#prizeInfoModal #prizeInfoStatus.pending {
  color: #ff5c5c !important;
}

/* 🟩 Accepted (green tone same as “Accepted ✅” badge) */
#prizeInfoModal #prizeInfoStatus.accepted {
  color: #4ade80 !important;
}
/* ===========================================================
    BETA BADGE
   =========================================================== */
/* 🧩 Sleek gradient BETA badge */
.packripper-beta-badge {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-285%);

  /* 💎 Modern gradient + shine */
  background: linear-gradient(135deg, #009cff, #007bff 40%, #00c3ff);
  color: #ffffff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  padding: 4px 11px 5px;
  border-radius: 999px; /* full pill shape */

  /* 🌟 Subtle gloss & glow */
  box-shadow:
    0 2px 6px rgba(0, 140, 255, 0.35),
    inset 0 1px 1px rgba(255,255,255,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);

  text-transform: uppercase;
  z-index: 1000;
  opacity: 0.97;
  transition: all 0.25s ease;
}

/* 🖱️ hover / tap feedback */
.packripper-beta-badge:hover {
  transform: translateX(-285%) scale(1.05);
  box-shadow:
    0 3px 10px rgba(0, 170, 255, 0.5),
    inset 0 1px 2px rgba(255,255,255,0.35);
}

/* 📱 Mobile smaller & balanced */
@media (max-width: 700px) {
  .packripper-beta-badge {
    top: -1px;
    font-size: 10.5px;
    padding: 3px 9px;
    transform: translateX(-230%);
    border-radius: 999px;
  }
}
/* ===========================================================
    Shine animtated to pack front
   =========================================================== */
.pack::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%; /* reduced from 60% */
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.6) 0%,
    rgba(255,255,255,0.3) 25%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.05) 70%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(10px) brightness(1.3); /* slightly tighter blur */
  transform: skewX(-40deg);
  pointer-events: none;
  animation: packSwoop 3s linear infinite;
  mix-blend-mode: screen;
}

@keyframes packSwoop {
  0%, 40% {
    left: -70%;
    opacity: 0;
  }
  45% {
    left: -70%;
    opacity: 1;
  }
  90% {
    left: 130%;
    opacity: 1;
  }
  100% {
    left: 140%;
    opacity: 0;
  }
}
/* ===========================================================
    Boarder wrap around pack / control panel
   =========================================================== */
/* ===========================================================
   🧩 Mobile tweaks
   =========================================================== */
@media (max-width:640px){
  /* Global type slightly smaller; also override sizing vars only on mobile */
  .ttc-pack-ripper{
    font-size: 92%;
    --pack-w: clamp(160px, 64vw, 220px);   /* smaller pack on mobile */
    --card-w: clamp(135px, 54vw, 200px);   /* smaller card on mobile */
    --container-pad: 10px;
    --panel-pad: 10px;
    --btn-pad-y: 6px;
    --btn-pad-x: 10px;
    --logo-size: 17px;
    --tag-size: 11px;
    --reward-title: 14px;
    --code-pad-y: 6px;
    --code-pad-x: 8px;
  }
  /* ---------------- PACK (main image) ---------------- */
  .ttc-pack-ripper .pack,
  .ttc-pack-ripper .pack-visual,
  .ttc-pack-ripper .pack img,
  .ttc-pack-ripper .pack-visual img,
  .ttc-pack-ripper [data-pack] img{
    width: clamp(160px, 64vw, 220px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
    /* Mobile: hide the "Credits:" label */
  .ttc-pack-ripper .credits-pill .label-text {
    display: none;
  }

  /* Mobile: shrink icons inside BOTH cost + credits pills (control panel) */
  .ttc-pack-ripper .control-panel .credits-pill .credit-icon,
  .ttc-pack-ripper .control-panel .cost-pill .credit-icon {
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle;
    margin: 0 2px;
  }

   /* make pills lay out precisely */
  .ttc-pack-ripper .cost-pill,
  .ttc-pack-ripper .credits-pill{
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;   /* prevent wrapping */
    padding: 0 10px !important;
    font-size: 14px !important;
    gap: 0 !important;                /* we’ll control spacing manually */
  }

  /* push the icon closer to the label, a bit tighter to the colon/number */
  .ttc-pack-ripper .cost-pill .credit-icon,
  .ttc-pack-ripper .credits-pill .credit-icon{
    margin-left: 4px !important;      /* close to “Cost” / “My” */
    margin-right: 2px !important;     /* small space before the colon */
    vertical-align: middle !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* bring the number tight after the colon */
  .ttc-pack-ripper .cost-pill strong,
  .ttc-pack-ripper .credits-pill strong{
    margin-left: 2px !important;
  }
    .ttc-pack-ripper .face.front .prize-img {
    width: 47% !important;                  /* slightly smaller on mobile */
    max-height: 80% !important;
    transform: translate(-50%, calc(-50% + 7px)) !important; /* ⬇ small downward nudge */
  }
   .ttc-pack-ripper .front .coupon-front .coupon-title {
    font-size: 1em !important;   /* ⬇ tighter for small screens */
    margin-bottom: 8px;          /* less spacing under title */
  }
   }
   /* ===========================================================
    More info modal tweaks MOBILE
   =========================================================== */
   @media (max-width: 640px) {
  /* 🧩 Compact the modal itself */
  .prize-info-modal {
    max-width: 90vw !important;      /* smaller modal width */
    padding: 16px 20px !important;   /* tighter padding */
  }

  /* 🧱 Stack vertically instead of side-by-side */
  .prize-info-body {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;            /* reduced gap between image and text */
  }

  /* 🖼️ Shrink the card frame */
  .prize-cardframe {
    width: 180px !important;
    height: 240px !important;
    border-radius: 10px !important;
  }
#prizeInfoCoupon {
  font-size: 14px !important;       /* already here */
  line-height: 1.2 !important;
  max-width: 85% !important;        /* ⬅️ make text area wider inside frame */
  width: 90% !important;            /* ensures same expansion */
  margin: 0 auto !important;        /* keeps it centered */
  white-space: normal !important;   /* allow wrapping if it gets long */
  word-break: break-word !important;
}

#prizeInfoPrize {
  max-width: 120px !important;
  max-height: 150px !important;
  transform: translate(-50%, calc(-50% + 15px)) !important; /* ⬇ moves down 10px */
}

  /* ✍️ Adjust right section typography */
  .prize-info-name {
    font-size: 16px !important;
  }

  .prize-info-tier,
  .prize-info-rarity,
  .prize-info-odds,
  .prize-info-code,
  .prize-info-expiry {
    font-size: 12.5px !important;
  }

  .prize-info-description {
    font-size: 12px !important;
    line-height: 1.35 !important;
    
  }
}
   /* ===========================================================
    pack ripper boarder - frame
   =========================================================== */
.packripper-frame {
  position: relative;
  background:
    url("/cdn/shop/files/pack_back.png?v=1761194440")
    center / cover no-repeat,
    linear-gradient(180deg,#0a0f18 0%,#05080f 100%);
  border-radius: 20px;
  margin: 40px auto;
  width: min(900px,95%);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  z-index: 0; /* make sure base layer can stack correctly */

/* 🖤 Thin visible dark border */
border: 2px solid rgba(15, 18, 25, 0.9);
box-shadow:
  0 8px 30px rgba(0,0,0,.55),
  inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.packripper-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4) 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0; /* places it *behind* the inner content but above bg */
}

/* ensure all inner content sits above the gradient */
.packripper-frame > * {
  position: relative;
  z-index: 1;
}
   /* ===========================================================
    pack ripper boarder - frame mobile
   =========================================================== */
/* mobile scale */
@media (max-width: 640px) {
  .packripper-frame {
    border-radius: 16px;
    width: 100%;
    margin: 24px auto;
  }
}
/* 🫙 Hide coupon code text on pull cards, keep title visible */
.ttc-pack-ripper .front .coupon-front .coupon-code {
  display: none !important;
}
/* ===========================================================
   Pack Ripper Feedback Section — Desktop (Compact, Clean)
=========================================================== */
#feedbackSection {
  margin: 80px auto 50px; /* ⬆️ more top space, 50px bottom for balance */
  padding: 0;
  max-width: 580px;
  text-align: center;
}

.feedback-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}

.feedback-options {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #222;
}

.feedback-options input[type="radio"] {
  accent-color: #00bcd4;
  transform: scale(1.05);
}

#fb-message {
  width: 100%;
  min-height: 80px;
  border-radius: 8px;
  background: #fff;
  color: #222;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 10px 12px;
  font-size: 0.9rem;
  margin-bottom: 10px;
  resize: vertical;
}

#fb-message:focus {
  outline: none;
  border-color: #00bcd4;
  box-shadow: 0 0 0 2px rgba(0,188,212,0.2);
}

#fb-submit {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  border-radius: 6px;
  padding: 8px 0;
  width: 160px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#fb-submit:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.feedback-status {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #0072ff;
  text-align: center;
}

.feedback-status.hidden {
  display: none;
}

/* ===========================================================
   Pack Ripper Feedback Section — Mobile
=========================================================== */
@media (max-width: 640px) {
  #feedbackSection {
    margin: 60px 16px 40px; /* Top / sides / bottom */
  }

  .feedback-options {
    gap: 12px;
    font-size: 0.9rem;
  }

  #fb-message {
    min-height: 75px;
    font-size: 0.9rem;
    width: 90%;              /* 🧩 Slightly narrower textbox */
    margin: 0 auto 10px;     /* Centers it visually */
  }

  #fb-submit {
    width: 50%;              /* 🧩 Button smaller than textbox */
    max-width: 220px;        /* Prevents it from stretching too wide */
    margin: 0 auto;          /* Centers button */
    display: block;
  }
}