:root{
  --bg: #0c0f14;
  --panel: #121826;
  --text: #e8ecf5;
  --muted: rgba(232,236,245,.7);
  --stroke: rgba(0,0,0,.75);
  --shadow: rgba(0,0,0,.55);

  /* Card layout tuning (EDIT THESE) */
  --card-w: 225px;              /* responsive base size; JS scales too */
  --card-aspect: calc(16/9);

  --title-x: 16px;
  --title-y: 12px;
  --title-size: 16px;
    --title-h: 24px;


  --artist-x: 20px;
  --artist-y: 50px;
  --artist-size: 14px;
    --artist-h: 18px;


  --score-x: 172px;
  --score-y: 20px;
  --score-size: 35px;

  --cover-x: 8px;
  --cover-y: 76px;
  --cover-size: 210px;          /* cover is square */

  --genre-x: 16px;
  --genre-y: 292px;
  --genre-size: 21px;
    --genre-h: 25px;


  /* Subgenres — independent anchors */
  --subgenre1-x: 12px;
  --subgenre1-y: 323.5px;
  --subgenre1-size: 12px;
  --subgenre1-h: 16px;

  --subgenre2-x: 12px;
  --subgenre2-y: 344px;
  --subgenre2-size: 12px;
  --subgenre2-h: 16px;

  --subgenre3-x: 12px;
  --subgenre3-y: 367px;
  --subgenre3-size: 12px;
  --subgenre3-h: 12px;

  --year-x: 137px;
  --year-y: 298px;
  --year-size: 20px;
  --year-diameter: 55px;

  --seticons-x: 150px;
  --seticons-y: 338px;
  --seticons-size: 18px;
  --seticons-gap: 6px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scrollbar-gutter: stable; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: #060a11;
  position: relative;
  overflow-x: hidden;

}

body::before{
  content:"";
  position: fixed;
  inset:-20%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #1c4bff,
    #19d6c8,
    #7b4df8,
    #1c4bff
  );
  filter: blur(120px);
  opacity: 0.45;
  animation: swirl-bg 60s linear infinite;
  pointer-events: none;
  z-index: -1;
  transform-origin: 50% 50%;
}

@keyframes swirl-bg{
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1); }
}

.hud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;
  top:0;
  background: rgba(10,12,18,.75);
  backdrop-filter: blur(10px);
  z-index:10;
}

.brand{ font-weight:700; letter-spacing:.2px; }
.tabs{ display:flex; gap:10px; margin-top:10px; }
.hud-left{ display:flex; flex-direction:column; }
.hud-right{
  position: relative; /* 🔑 makes toast position relative to shards */
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.profile-dropdown{
  position: relative;
}

.profile-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-toggle .chevron{
  font-size: 12px;
  opacity: 0.85;
}

.profile-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: rgba(10,12,18,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px;
  min-width: 170px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  z-index: 30;
  display: grid;
  gap: 6px;
}

.profile-menu button{
  width: 100%;
  justify-content: flex-start;
}
.hud-toasts{
  position: absolute;

  /* Anchor near shard pills */
  top: 0;
  right: 0;

  /* Fine-tune position */
  transform: translate(-24vw, -18px); /* X left, Y down */

  display: flex;
  flex-direction: column;
  gap: 8px;

  pointer-events: none;
  z-index: 50;
}

.hud-toast{
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  background: rgba(20,20,20,0.85);
  color: #fff;
  box-shadow:
    0 10px 22px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.08);
  animation: hudToastIn 0.25s ease-out,
             hudToastOut 0.25s ease-in 1.6s forwards;
}

.hud-toast.gold{
  color: #f6d36a;
}

.hud-toast.red{
  color: #ff8c8c;
}

.hud-toast.coins{
  background: linear-gradient(180deg, #2b2b2b, #151515);
  border-color: rgba(255,215,120,.55);
  color: #ffd778;
  position: fixed;         /* detach from HUD width */
  top: 74px;               /* under the top bar */
  left: -745px;              /* shove left */
  right: auto;
  transform: none;
  z-index: 60;
}

@keyframes hudToastIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes hudToastOut{
  to{ opacity:0; transform: translateY(-6px); }
}

.tab{
  border:1px solid rgba(255,255,255,.14);
  background: transparent;
  color: var(--text);
  padding:8px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 18px;
  line-height: 1.2;
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: .15px;
}
.tab.has-reward::after{
  content:"!";
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#ff3b3b;
  color:#fff;
  font-weight:700;
  font-size:12px;
  line-height:1;
}
.tab:focus-visible,
.tab:active,
.tab.active{
  outline: none;
  border-color: rgba(0,0,0,.95);
  box-shadow: 0 0 0 3px #000;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
.tab[data-view="shop"],
.tab[data-view="shop"].active{
  background: linear-gradient(145deg, #0a2540, #04101e, #0a2540); /* Packs: blue-black-blue */
}
.tab[data-view="collection"],
.tab[data-view="collection"].active{
  background: linear-gradient(145deg, #f78a1d, #1a0d04, #f78a1d); /* Collection: orange-black-orange */
}
.tab[data-view="rewards"],
.tab[data-view="rewards"].active{
  background: linear-gradient(145deg, #1f5c4d, #0b1f1c, #1f5c4d); /* Rewards: green-black-green */
}
.tab.active{
  background: inherit;
}

.statpill{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  padding:10px 14px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1.2;
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: .15px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}

/* Individual gradients for HUD stat pills (Coins / Shards / Packs / Owned / Seen) */
/* Note: #hudToasts is the first div inside .hud-right, so statpills start at nth-of-type(2) */
.hud-right .statpill:nth-of-type(2){ background: linear-gradient(145deg, #cfa447, #0b0904, #cfa447); } /* Coins: gold-black-gold */
.hud-right .statpill:nth-of-type(3){ background: linear-gradient(145deg, #d32f2f, #050505, #b71c1c); } /* Shards: red/black/red gradient */
.hud-right .statpill:nth-of-type(4){ background: linear-gradient(145deg, #2e7d32, #050505, #1b5e20); } /* Vouchers: green/black/green gradient */
.hud-right .statpill:nth-of-type(5){ background: linear-gradient(145deg, #0a2c2c, #041012, #0a2c2c); } /* Packs: cyan-black-cyan */
.hud-right .statpill:nth-of-type(6){ background: linear-gradient(145deg, #2a0f3a, #0d0716, #2a0f3a); }       /* Owned: purple-black-purple */
.hud-right .statpill:nth-of-type(7){ background: linear-gradient(145deg, #0e2c14, #06110a, #0e2c14); }       /* Seen: green-black-green */

.rewards-intro{
  margin: 12px 0 6px;
  color: var(--muted);
  font-size: 14px;
}
.rewards-accordion{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
.rewards-group{
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(31,43,64,.7), rgba(12,16,24,.9));
  border-radius:14px;
  overflow:hidden;
}
.rewards-group summary{
  list-style:none;
}
.rewards-group-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
}
.rewards-group-summary::-webkit-details-marker{ display:none; }
.rewards-group-title{ color: var(--text); }
.rewards-group-hint{ color: var(--muted); font-size:13px; }
.rewards-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 12px 12px;
}
.rewards-empty{
  color: var(--muted);
  font-size: 14px;
  padding: 8px 4px;
}
.rewards-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.reward-labels{
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.reward-pool-title{ font-size:15px; font-weight:700; }
.reward-pool-sub{
  color: var(--muted);
  font-size: 12px;
  letter-spacing:.2px;
}
.reward-metrics{
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.reward-progress-wrap{ display:flex; flex-direction:column; gap:6px; }
.reward-progress{
  position:relative;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  box-shadow: inset 0 0 8px rgba(0,0,0,.45);
}
.reward-progress-seen{
  position:absolute;
  inset:0;
  width:0;
  background: linear-gradient(90deg, rgba(80,162,255,.7), rgba(63,120,255,.5));
  z-index:1;
}
.reward-progress-owned{
  position:absolute;
  inset:0;
  width:0;
  background: linear-gradient(90deg, #38ef7d, #11998e);
  z-index:2;
}
.reward-progress-label{
  font-size:12px;
  color: var(--muted);
  font-weight:700;
  letter-spacing:.1px;
}
.reward-counts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color: var(--muted);
}
.reward-counts span b{ color: var(--text); }

.reward-actions{
  flex:1 1 260px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.reward-rewardline{
  font-size:13px;
  color: var(--muted);
  font-weight:700;
}
.reward-claim-btn{
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(255,215,120,.65);
  background: linear-gradient(135deg, #f7d66b, #c8922f);
  color:#1a1000;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 10px 20px rgba(0,0,0,.45);
}
.reward-claim-btn:disabled{
  cursor:not-allowed;
  opacity:0.5;
  box-shadow:none;
}
.rewards-group-indicator{
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7d66b, #c8922f);
  color:#1a1000;
  font-weight:900;
  font-size:12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.35);
}
.rewards-row.reward-eligible{
  border-color: rgba(255,215,120,.85);
  box-shadow: 0 0 12px rgba(255,215,120,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(42,34,12,.85), rgba(18,24,38,.85));
}
.rewards-row.reward-claimed{
  opacity: 0.6;
}

.voucher-icon{
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), inset 0 0 4px rgba(0,0,0,.45);
}
.voucher-icon.black{ background: linear-gradient(135deg, #1c2f8f, #0a112a, #1c2f8f); }   /* Blue */
.voucher-icon.silver{ background: linear-gradient(135deg, #9d1c1c, #300808, #9d1c1c); }   /* Red */
.voucher-icon.gold{ background: linear-gradient(135deg, #f6d36a, #8c6b1a, #fbe99a); }    /* Yellow */
.voucher-icon.rainbow{ background: linear-gradient(135deg, #1d8f3a, #0c2a12, #1d8f3a); } /* Green */

.shard-icon{
  --shard-grad: linear-gradient(135deg, #161616, #030303, #1f1f1f);
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--shard-grad);
  transform: rotate(45deg);
  transform-origin: center;
  border-radius: 2px;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 6px rgba(255,255,255,.2),
    inset 0 0 4px rgba(255,255,255,.22);
}
.shard-icon.black  { --shard-grad: linear-gradient(135deg, #161616, #030303, #1f1f1f); }
.shard-icon.silver { --shard-grad: linear-gradient(135deg, #e4e4e4, #9a9a9a, #f7f7f7); }
.shard-icon.gold   { --shard-grad: linear-gradient(135deg, #f6d36a, #996b1e, #fbe8a2); }
.shard-icon.rainbow{ --shard-grad: linear-gradient(135deg, #ff7ad9, #6ad5ff, #7dff92, #ffd87a); }

.wrap{ padding:12px; max-width:1900px; max-height: 1400; margin:0 auto; }
.panel{
  background: rgba(18,24,38,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding:14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.panel-title{ font-size:18px; font-weight:700; }
.panel-sub{ color:var(--muted); font-size:13px; margin-top:4px; }
#view-collection .panel-head{ display:none; }
#view-collection .panel{ display:none; }

/* Binder visuals (decorative only — does NOT change card sizing) */
.binder-spread{
  position: relative;
  border-radius: 22px;
  overflow: hidden;


  /* Binder cover lighting: subtle top-left → bottom-right + soft vignette (BEHIND cards) */
  background:
/* soft vignette */
    radial-gradient(140% 120% at 50% 45%,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,.85) 100%),

    /* border lighting: raised edge rolloff (keeps center clean) */
    radial-gradient(closest-side at 50% 50%,
      rgba(0,0,0,0) 60%,
      rgba(255,255,255,.060) 82%,
      rgba(0,0,0,0) 92%),

    /* top-left → bottom-right light */
    linear-gradient(135deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.04) 30%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,.35) 100%),

    /* slight top-left bloom */
    radial-gradient(120% 120% at 18% 12%,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,0) 55%),

    /* faint scuff streaks (more noticeable on the outer black border) */
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(0,0,0,0) 1px 22px),

    /* matte plastic grain (INTENTIONALLY visible) */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.045) 0 1px,
      rgba(0,0,0,0) 1px 6px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.035) 0 1px,
      rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(25deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,0) 1px 14px),

    #000;


  /* thicker binder border + “raised inner lip” highlight (purely visual; no layout impact) */
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.07),
    inset 0 0 0 14px rgba(255,255,255,.02),
    inset 0 16px 28px rgba(255,255,255,.03),
    inset 0 -26px 44px rgba(0,0,0,.55),
    0 0 0 20px rgba(0,0,0,.95),
    0 0 0 23px rgba(255,255,255,.018),
    0 0 0 26px rgba(255,255,255,.03),
    0 22px 70px rgba(0,0,0,.55);
}

/* Two hole-punch holes on either side of the gutter (3 rows: top/mid/bot) */
.binder-spread::after{
  content:"";
  position:absolute;
  inset:0;                     /* keep frame inside spread so it can't force page overflow */
  border-radius:22px;          /* match .binder-spread */
  pointer-events:none;
  z-index:1;

  /* binder cover / border lighting + subtle grid (matches gutter vibe) */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.45) 100%),
    radial-gradient(140% 120% at 20% 10%,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.00) 60%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.05) 0 1px,
      rgba(0,0,0,0) 1px 18px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.045) 0 1px,
      rgba(0,0,0,0) 1px 18px),
    radial-gradient(120% 120% at 60% 80%,
      rgba(255,255,255,0.035) 0%,
      rgba(0,0,0,0) 55%),
    linear-gradient(#000, #000);
  opacity:0.98;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}


/* ensure binder contents (cards) can sit above the binder frame/background */
/* ensure binder contents (cards) can sit above the binder frame/background */
.binder-spread{
  --binder-gutter-w: 72px;
  --binder-page-w: calc((100% - var(--binder-gutter-w)) / 2);
  --binder-turn-ms: 200ms;
}

.binder-spread .grid{
  position: relative;
  z-index: 3;
  opacity: 1;
  transition: opacity 350ms ease-in-out;
  will-change: opacity;
}

/* Simple cross-page fade */
.binder-spread.fade-out .grid{
  opacity: 0;
}


/* ------------------------------------------------------------------
   Lightweight page-turn sheen (CSS-only, no DOM / JS changes)
   Uses transform + opacity only. Runs during existing fade.
------------------------------------------------------------------ */
.binder-spread.fade-out::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index:5;

  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,0.10) 48%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.10) 52%,
    rgba(255,255,255,0) 58%
  );

  opacity:0;
  transform: translateX(-140%) rotate(12deg);
  mix-blend-mode: screen;
  will-change: transform, opacity;

  animation: binderSheenSweep 220ms cubic-bezier(.22,.61,.36,1) both;
}

@keyframes binderSheenSweep{
  0%{
    opacity:0;
    transform: translateX(-140%) rotate(12deg);
  }
  20%{
    opacity:.55;
  }
  100%{
    opacity:0;
    transform: translateX(140%) rotate(12deg);
  }
}

/* Prevent clicks during transition */
.binder-spread[data-turning="1"] .grid{
  pointer-events: none;
}


/* ------------------------------------------------------------------
   Binder fade/wipe reinforcements (ensure active even if other rules override)
------------------------------------------------------------------ */
.binder-spread > .binder-gutter{
  position: relative;
  z-index: 4;
}

.binder-pagewipe{
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--binder-page-w);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity 140ms ease;
}


.binder-pagewipe::before,
.binder-pagewipe::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  backface-visibility: hidden;
  background:
    radial-gradient(140% 120% at 50% 45%,
      rgba(255,255,255,.08) 0%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,.92) 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.040) 0 1px,
      rgba(0,0,0,0) 1px 6px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.028) 0 1px,
      rgba(0,0,0,0) 1px 8px),
    #000;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 28px rgba(0,0,0,.65);
}

.binder-pagewipe::after{
  transform: rotateY(180deg);
  background:
    radial-gradient(140% 120% at 50% 45%,
      rgba(255,255,255,.05) 0%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,.94) 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.030) 0 1px,
      rgba(0,0,0,0) 1px 6px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.020) 0 1px,
      rgba(0,0,0,0) 1px 8px),
    #000;
}

.binder-spread.is-wiping .binder-pagewipe{
  opacity: 1;
}

.binder-spread.is-wiping.wipe-next .binder-pagewipe{
  left: calc(50% + (var(--binder-gutter-w) / 2));
  right: 0;
  width: auto;
  transform-origin: left center;
  animation: binderTurnNext var(--binder-turn-ms) cubic-bezier(.22,.61,.36,1) both;
}

.binder-spread.is-wiping.wipe-prev .binder-pagewipe{
  left: 0;
  right: calc(50% + (var(--binder-gutter-w) / 2));
  width: auto;
  transform-origin: right center;
  animation: binderTurnPrev var(--binder-turn-ms) cubic-bezier(.22,.61,.36,1) both;
}


.binder-spread.is-wiping.wipe-next .binder-pagewipe::before{
  border-radius: 0 22px 22px 0;
  box-shadow:
    inset 6px 0 20px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 28px 70px rgba(0,0,0,.65);
}
.binder-spread.is-wiping.wipe-next .binder-pagewipe::after{
  border-radius: 0 22px 22px 0;
}

.binder-spread.is-wiping.wipe-prev .binder-pagewipe::before{
  border-radius: 22px 0 0 22px;
  box-shadow:
    inset -6px 0 20px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 28px 70px rgba(0,0,0,.65);
}
.binder-spread.is-wiping.wipe-prev .binder-pagewipe::after{
  border-radius: 22px 0 0 22px;
}

@keyframes binderTurnNext{
  0%   { transform: perspective(1400px) rotateY(0deg); }
  35%  { transform: perspective(1400px) rotateY(-55deg); }
  55%  { transform: perspective(1400px) rotateY(-105deg); }
  75%  { transform: perspective(1400px) rotateY(-150deg); }
  100% { transform: perspective(1400px) rotateY(-180deg); }
}
@keyframes binderTurnPrev{
  0%   { transform: perspective(1400px) rotateY(0deg); }
  35%  { transform: perspective(1400px) rotateY(55deg); }
  55%  { transform: perspective(1400px) rotateY(105deg); }
  75%  { transform: perspective(1400px) rotateY(150deg); }
  100% { transform: perspective(1400px) rotateY(180deg); }
}


.binder-spread > .binder-gutter{
  position: relative;
  z-index: 4;
}





.binder-spread::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;

  /* gutter width is 72px in index.html; used only for positioning (no resizing) */
  --binder-gutter-w: 72px;
  --hole-x-left:  calc(50% - (var(--binder-gutter-w) / 2) - 9px);
  --hole-x-right: calc(50% + (var(--binder-gutter-w) / 2) + 9px);

  background-image:
    radial-gradient(circle at var(--hole-x-left)  22%, rgba(0,0,0,.92) 0 12px, rgba(210,210,210,.55) 12px 14.8px, rgba(0,0,0,0) 16.4px 100%),
    radial-gradient(circle at var(--hole-x-right) 22%, rgba(0,0,0,.92) 0 12px, rgba(210,210,210,.55) 12px 14.8px, rgba(0,0,0,0) 16.4px 100%),

    radial-gradient(circle at var(--hole-x-left)  50%, rgba(0,0,0,.92) 0 12px, rgba(210,210,210,.55) 12px 14.8px, rgba(0,0,0,0) 16.4px 100%),
    radial-gradient(circle at var(--hole-x-right) 50%, rgba(0,0,0,.92) 0 12px, rgba(210,210,210,.55) 12px 14.8px, rgba(0,0,0,0) 16.4px 100%),

    radial-gradient(circle at var(--hole-x-left)  78%, rgba(0,0,0,.92) 0 12px, rgba(210,210,210,.55) 12px 14.8px, rgba(0,0,0,0) 16.4px 100%),
    radial-gradient(circle at var(--hole-x-right) 78%, rgba(0,0,0,.92) 0 12px, rgba(210,210,210,.55) 12px 14.8px, rgba(0,0,0,0) 16.4px 100%);

  opacity: .95;
}
/* gutter gets rings (no holes inside gutter anymore) */
.binder-gutter{
  position: relative;
  overflow: visible;

  /* MUST override inline background (now with subtle matte texture) */
  background:
    /* very faint edge rolloff + center lift */
    linear-gradient(90deg,
      rgba(255,255,255,.018) 0%,
      rgba(255,255,255,.035) 50%,
      rgba(255,255,255,.018) 100%),
    /* fine “grain” */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.012) 0 1px,
      rgba(0,0,0,0) 1px 10px),
    /* faint diagonal scuff streaks */
    repeating-linear-gradient(25deg,
      rgba(255,255,255,.010) 0 1px,
      rgba(0,0,0,0) 1px 18px),
    #000 !important;

  /* ring material tokens (reused below) */
  --ring-metal: linear-gradient(90deg,
    rgba(15,15,15,.95) 0%,
    rgba(210,210,210,.55) 18%,
    rgba(255,255,255,.92) 36%,
    rgba(170,170,170,.40) 50%,
    rgba(255,255,255,.88) 64%,
    rgba(200,200,200,.45) 82%,
    rgba(12,12,12,.95) 100%);
  --ring-texture: repeating-linear-gradient(0deg,
    rgba(255,255,255,.10) 0px,
    rgba(255,255,255,.00) 4px,
    rgba(0,0,0,.06) 8px);
  --ring-shine: radial-gradient(ellipse at 50% 50%,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.18) 32%,
    rgba(255,255,255,0) 72%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 18px rgba(0,0,0,.55);
}


/* thick silver connectors linking each hole pair (top/mid/bot) */
.binder-gutter::after{
  content:"";
  position:absolute;
  inset: 0;
  left: 50%;
  width: 110px;
  transform: translateX(-50%);
  pointer-events:none;
  z-index: 4;

  background-image:
    var(--ring-metal), var(--ring-texture), var(--ring-shine),
    var(--ring-metal), var(--ring-texture), var(--ring-shine),
    var(--ring-metal), var(--ring-texture), var(--ring-shine);

  background-repeat: no-repeat;
background-size:
  110px 14px, 110px 14px, 140% 22px,
  110px 14px, 110px 14px, 140% 22px,
  110px 14px, 110px 14px, 140% 22px;


  background-position:
    50% 21.7%, 50% 21.7%, 50% 21.7%,
    50% 50%, 50% 50%, 50% 50%,
    50% 78.3%, 50% 78.3%, 50% 78.3%;


  background-blend-mode:
    normal, overlay, screen,
    normal, overlay, screen,
    normal, overlay, screen;

  box-shadow:
    0 18px 28px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.10);

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.10))
    drop-shadow(0 10px 14px rgba(0,0,0,.55));
  opacity: .98;
}

/* binder nav (only affects Prev / Page / Next) */
.binder-nav{
  /* move the nav DOWN a bit so it never overlaps the binder */
  margin-top: -220px !important;
}

.binder-nav .ghost{
  /* at least 2x bigger than before */
  font-size: 36px !important;
  padding: 18px 34px !important;
  min-width: 180px !important;

  /* grey/black gradient button */
  background: linear-gradient(180deg, rgba(90,90,90,.40) 0%, rgba(10,10,10,.70) 100%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.60) !important;
}

.binder-nav #binderPageLabel{
  font-size: 28px !important;
  padding: 16px 28px !important;
  background: linear-gradient(180deg, rgba(80,80,80,.26) 0%, rgba(0,0,0,.62) 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}



.pack-controls{

  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-top: 10px;
}
.pool-grid{
  display:grid;
    width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap:14px;
  margin-top:10px;
}
.pack-info{
  position: fixed;
  right: 18px;
  top: 112px;
  width: 320px;
  background: linear-gradient(165deg, rgba(18,24,38,.96), rgba(40,28,64,.9));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  color: #f6f6ff;
  z-index: 120;
}
.pack-info-heading{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  font-weight: 800;
}
.pack-info-pool{
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  margin: 4px 0 6px;
}
.pack-info-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  font-weight: 700;
}
.pack-info-row span:last-child{
  color: #ffe8a3;
  font-weight: 900;
}
.pack-info-row.chase span:last-child{
  color: #7ed3ff;
}
.pack-info-divider{
  height: 1px;
  margin: 6px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.35), rgba(255,255,255,.1));
}
@media (max-width: 1200px){
  .pack-info{
    position: static;
    width: auto;
    margin-top: 12px;
  }
}

.pool-tile{
width: 100%;

  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;

  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  will-change: transform;
}

.pool-tile.active{
  outline: 2px solid rgba(255,255,255,.28);
}

.pool-tile .pool-cover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pool-tile .pool-label{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;

  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}
.pool-tile.pool-complete .pool-cover{
  filter: grayscale(1) brightness(.75);
}
.pool-tile.pool-complete{
  cursor: default;
}
.pool-tile.pool-complete .pool-label{
  background: rgba(0,0,0,.60);
  color: #d7e2d9;
}
.pool-complete-label{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.70);
  color: #e4ffee;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}
.pool-complete-label .tick{
  color: #78f5a7;
  font-size: 16px;
  line-height: 1;
}
.pool-open{
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 10;
  transform: translateX(-50%);
  display: inline-block;
  width: auto;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
background: linear-gradient(90deg, #000 0%, #3a3a3a 50%, #000 100%);

  color: #fff;
  font-size: 1.25em;
  font-weight: 900;
  letter-spacing: .4px;
  text-align: center;
  /* HARD RESET — this is the important part */
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0;
  pointer-events: none;
  /* prevent ghost layers */
  isolation: isolate;

    transition: opacity .12s ease;
  will-change: opacity;

}

.pool-tile.active .pool-open{
  opacity: 1;
  pointer-events: auto;
  transition-delay: .06s;
}

.pool-open::before,
.pool-open::after{
  content: none !important;
  display: none !important;
}

.pool-open.is-disabled{
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #1d1d1d 0%, #2d2d2d 50%, #1d1d1d 100%);
  color: #a7f0ba;
  border-color: rgba(150,255,180,.35);
  cursor: not-allowed;
}


.packtype-tabs{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin: 0 0 10px 0;
}

.packtype-tab { padding: 0; background: url("assets/pack_covers/type-standard.png") no-repeat center center / cover !important; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; cursor: pointer; color: white; aspect-ratio: 970 / 250; display: flex; justify-content: center; align-items: center; text-align: center;
  padding: 0;
  background: url("assets/pack_covers/type-standard.png") no-repeat center center;
  background-size: 150% 100% !important;  /* Stretch background image horizontally */
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  cursor: pointer;
  color: white;
  aspect-ratio: 970 / 250; /* Ensure aspect ratio is correct */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.packtype-tab.active{
  outline: 2px solid rgba(255,255,255,.28);
}

.packtype-tab[data-pack-type="standard"]{
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%), linear-gradient(135deg, #1b3b6f 0%, #2d6cdf 100%) !important;
  border-color: #122447 !important;
  color: #000 !important;
  -webkit-text-stroke: 1px #122447 !important;
}
.packtype-tab[data-pack-type="artist"]{
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%), linear-gradient(135deg, #8a1e2d 0%, #ff5f6d 100%) !important;
  border-color: #6d1824 !important;
  color: #000 !important;
  -webkit-text-stroke: 1px #6d1824 !important;
}
.packtype-tab[data-pack-type="premium"]{
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%), linear-gradient(135deg, #b67e2a 0%, #f4d35e 50%, #f9e8a6 100%) !important;
  border-color: #8a621f !important;
  color: #000 !important;
  -webkit-text-stroke: 1px #8a621f !important;
}
.packtype-tab[data-pack-type="specialty"]{
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%), linear-gradient(135deg, #0f8a1f 0%, #2fbf71 60%, #9be15d 100%) !important;
  border-color: #0c6a18 !important;
  color: #000 !important;
  -webkit-text-stroke: 1px #0c6a18 !important;
}
.packtype-tab[data-pack-type="lucky"]{
  background: linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.00) 60%), url("assets/pack_covers/type-lucky.png") center/cover no-repeat !important;
}

/* Pack type tab size (matches type-*.png banner ratio) */
.packtype-tab{
  width: 220px !important;
  aspect-ratio: 970 / 250 !important;
  padding: 18px 10px !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  border: 3px solid rgba(0,0,0,.28) !important;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;

}
/* Hide Lucky Dip tab (we replace it with a pack tile) */
.packtype-tab[data-pack-type="lucky"]{
  display:none !important;
}


.packtype-tab.active{
  /* keep gradient visible; outline above shows active state */
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 180px;
}

.field-label{
  font-size: 12px;
  opacity: .85;
}

.select{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  outline: none;
}

button.primary {
  width: auto;
  height: auto;
  padding: 12px 28px;
  aspect-ratio: 970 / 250 !important;
  background: url("assets/pack_covers/open-pack.png") no-repeat center center / cover !important;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  cursor: pointer;
  color: white; /* Ensure text is visible */
  position: relative;
  font-size: 32px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

button.primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}


.ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,.14);
  color: var(--text);
  padding:10px 14px;
  border-radius: 12px;
  cursor:pointer;
}

.hidden{ display:none; }

/* =========================
   CARD MODAL (Stage 2)
   ========================= */
.card-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.80);
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  column-gap: 28px;
  row-gap: 10px;
  justify-content: center;
  align-content: center;
  align-items: start;
  padding: 32px;
}

.card-modal-cardwrap{
  grid-column: 1;
  grid-row: 2;

  /* Reserve space for the 2.5x transformed card so row 3 sits BELOW it */
  width: calc(var(--card-w) * 2.5);
  height: calc(var(--card-w) * 16 / 9 * 2.5);

  display: flex;
  align-items: center;
  justify-content: center;
}


.card-modal-cardwrap .card{
  transform: scale(2.5);
  transform-origin: center;
}

.card-modal-side{ display: contents; }

.card-modal-tabs{
  grid-column: 1;
  grid-row: 1;
  width: calc(var(--card-w) * 2.5);
  display: flex;
  gap: 0;
  margin-bottom: -10px;
  z-index: 2;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);

  /* DO NOT OFFSET — keep tabs fixed to the card layout */
  position: relative;
  top: 0px;

  /* 1.5x taller */
  height: 54px;
}


.card-modal-tab{
  flex: 1;
  height: 50px;
  border: 0;
  border-right: 1px solid rgba(0,0,0,.55);
  color: #000;
  font-weight: 900;
  cursor: pointer;

  /* bigger/bolder text */
  font-size: 20px;
  letter-spacing: .2px;

  /* hard-center text */
  display: flex;
  align-items: center;
  justify-content: center;

  text-shadow: none;
}
.card-modal-tab:last-of-type{ border-right: 0; }

.card-modal-actions{
  /* Place actions to the RIGHT of the card (not in the tab strip) */
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  align-self: start;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;

  padding: 0;
  margin: 18px 0 0 0; /* space under the card */
  height: auto;

  background: transparent;
  border: 0;
  box-shadow: none;
}


/* ===== Craft-only: center action over the card, smaller ===== */
.card-modal.craft-only #cardModalActions{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10010;
  pointer-events: none; /* container ignores clicks */
}

.card-modal.craft-only #cardModalActions .action-pill{
  transform: scale(0.5); /* 50% size */
  pointer-events: auto;  /* button is clickable */
}


/* Craft-only mode: place action at BOTTOM-CENTER of the COVER */
.card-modal.craft-only #cardModalActions{
  position: absolute;

  /* Center horizontally on the card */
  left: 50%;

  /* Bottom of the COVER (not the whole card) */
  top: calc(
    (var(--cover-y) + var(--cover-size)) * 2.5
  );

  transform: translate(-50%, -50%);
  z-index: 10010;

  pointer-events: none; /* container ignores clicks */
}

/* Craft pill sizing + clickability */
.card-modal.craft-only #cardModalActions .action-pill{
  transform: scale(0.5) !important; /* 50% size */
  pointer-events: auto;
}

/* Do NOT dim or blur the card */
.card-modal.craft-only .card-modal-cardwrap{
  opacity: 1;
  filter: none;
}



.card-modal-actions:empty{
  display: none;
}

.card-modal-actions .action-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  height: 64px;          /* ~3x */
  padding: 0 42px;        /* ~3x */
  min-width: 360px;

  border-radius: 26px;
  border: 2px solid transparent;

  background:
    linear-gradient(180deg, rgba(44,44,44,0.88), rgba(8,8,8,0.82)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(246,211,106,0.72), rgba(255,255,255,0.18)) border-box;

  color: #fff;
  font-weight: 950;
  font-size: 32px;        /* ~3x */
  letter-spacing: .4px;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;

  box-shadow:
    0 18px 44px rgba(0,0,0,.65),
    0 0 0 2px rgba(246,211,106,.14),
    0 0 34px rgba(246,211,106,.22);
}

.card-modal-actions .action-pill.is-disabled{
  opacity: 0.85;
  background: linear-gradient(
    180deg,
    rgba(20,20,20,0.95),
    rgba(0,0,0,0.95)
  );
  border-color: rgba(255,255,255,0.18);
  color: #ffffff;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.6);
}


.card-modal-actions .action-pill.is-disabled .gold{
  color: #9a9a9a;
  text-shadow: none;
}


.card-modal-actions .action-pill:hover{
  filter: brightness(1.08) saturate(1.05);
  transform: scale(1.03);
}

.card-modal-actions .action-pill:active{
  transform: translateY(2px);
}

.card-modal-actions .gold{
  color: #f6d36a;
  text-shadow: 0 2px 0 rgba(0,0,0,.70);
}



.card-modal-tab[data-tab="card"]{ background: linear-gradient(90deg, rgba(255,90,90,.95), rgba(255,255,255,.95)); }
.card-modal-tab[data-tab="tracklist"]{ background: linear-gradient(90deg, rgba(120,255,140,.95), rgba(255,255,255,.95)); }
.card-modal-tab[data-tab="info"]{ background: linear-gradient(90deg, rgba(120,170,255,.95), rgba(255,255,255,.95)); }
.card-modal-tab[data-tab="pools"]{ background: linear-gradient(90deg, rgba(255,235,120,.95), rgba(255,255,255,.95)); }

.card-modal-tab.active{
  box-shadow: inset 0 0 0 8px rgba(0,0,0,.5);
  filter: brightness(1.03) saturate(1.05);
}

.card-modal-content{
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: center;

  width: var(--card-w);
  aspect-ratio: 9 / 16;
  border-radius: 11px;
  overflow: hidden;

  background: #0a0a0a url("assets/cards/tabs-bg.png") no-repeat center / cover;
  transform: scale(2.5);
  transform-origin: center;

  padding: 0;
  border: 0;
  color: #fff;
  z-index: 1;
}

.card-modal-panel{
  display:none;
  height: 100%;
  box-sizing: border-box;
  padding: 22px;
  overflow: auto;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}
.card-modal-panel.active{ display:block; }

.card-modal-panel pre{
  white-space: pre-wrap;
  word-break: break-word;
  margin: 12px 0 0;
}


.selected-pack-bar{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;

  padding: 0;
  border: 0;
  background: transparent;
}

.selected-pack-cover{
  width: var(--card-w);
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  display: block;
}

.selected-pack-name{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  padding-left: 2px;
}

.open-another-btn{
  width: var(--card-w);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.open-another-btn:hover{
  background: rgba(255,255,255,.12);
}

.open-another-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}


#packOpenPanel{
  display: grid;
grid-template-columns: var(--card-w) minmax(0, calc(var(--card-w) * 7 + 96px));

  justify-content: start;
  gap: 16px;
  align-items: start;
}

#packOpenPanel .panel-head{
  grid-column: 1 / -1;
}

#selectedPackBar{
  grid-column: 1;
  grid-row: 2;
  width: var(--card-w);
  position: relative;
  z-index: 40; /* keep pack art above cards during pack-open animations */
}

#multiPackArea{
  position: relative;
  z-index: 10;
  overflow: visible;
}

.multi-pack-results{
  position: relative;
  overflow: visible;
}


#multiPackArea,
#lootCrateArea,
#lootCrateResults{
  grid-column: 2;
}
#packOpenPanel:has(#lootCrateResults:not(.hidden)) #selectedPackBar{
  grid-row: 2 / span 3;
}

#packOpenPanel:has(#lootCrateResults:not(.hidden)) #lootCrateArea{
  grid-row: 2;
}

#packOpenPanel:has(#lootCrateResults:not(.hidden)) #lootCrateResults{
  grid-row: 3;
}

#packOpenPanel:has(#lootCrateResults:not(.hidden)) .hint{
  grid-row: 4;
}

#packOpenPanel:has(#lootCrateResults:not(.hidden)) .loot-window{
  overflow: visible;
}

.pack-open-layout{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  justify-content: center;
  max-width: 1700px;
  margin: 0 auto;
}

#packOpenPanel .loot-window,
#packOpenPanel .result-row{
  max-width: 1700px !important;
  margin-left: auto;
  margin-right: auto;
}

.pack-open-layout > #selectedPackBar{
  width: var(--card-w);
  flex: 0 0 var(--card-w);
}

.loot-window{
  position: relative;
  width: 100%;
  max-width: 1700px; /* keep strip inside the navy panel */
  height: 280px;
  padding: 12px 0 96px; /* extra room for strip toasts under minis */
  margin: 0 auto;
  overflow: hidden;
}

.loot-track{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  will-change: transform;
}

.loot-track > div{
  position: relative;
}

.strip-toast{
  position: absolute;
  left: 50%;
  top: calc(100% + 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 25;
}

.strip-toast-pill{
  background: linear-gradient(180deg, #3cf58a, #0f7b3f);
  color: #032011;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  box-shadow:
    0 10px 18px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.16);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.strip-toast-pill.in{
  opacity: 1;
  transform: translateY(0);
}

.strip-toast-pill.out{
  opacity: 0;
  transform: translateY(-4px);
}

.loot-centerline{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  transform: translateX(-1.5px);
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 8px rgba(255,255,255,.25);
  pointer-events:none;
}

.mini{
  width: 176px;   /* 20% smaller */
  height: 176px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  flex: 0 0 auto;
  position:relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
}
.mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Winning (landed) mini only */
.mini.is-target{
  animation: targetGlow 1.5s ease-in-out infinite alternate;
  box-shadow:
    0 16px 40px rgba(0,0,0,.45),
    0 0 18px rgba(246,211,106,.65);
}

@keyframes targetGlow{
  0%   { transform: translateY(0);   box-shadow: 0 14px 36px rgba(0,0,0,.40), 0 0 10px rgba(246,211,106,.35); }
  100% { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.48), 0 0 22px rgba(246,211,106,.75); }
}

.result-row{
  width: 100%;
  max-width: 1700px;
  margin: 18px auto 0 auto;

  display: flex;
  justify-content: center;
  gap: 18px;
}

/* Standard/Premium multi-pack results */
.multi-pack-area{
  margin-top:14px;
  grid-column: 2;
  grid-row: 2 / span 2;
}

.multi-pack-results{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
}


/* Slightly smaller cards only in multi-pack area */
#multiPackArea{ --card-w: 225px; }

.result-slot{
  min-height: 0;
  width: var(--card-w);
}
.label{ color:var(--muted); font-size:12px; margin-bottom:8px; }

.grid-wrap h3{ margin: 16px 0 10px; }
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.hint{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
}

/* ===== CARD RENDER ===== */

.card{
  width: var(--card-w);
  aspect-ratio: 9 / 16;
  position:relative;
  border-radius: 11px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  background: rgba(255,255,255,.04);
  animation-duration: 140ms;
  animation-timing-function: ease-out;
}

.card.pop-in{
  animation-name: cardPopIn;
}

@keyframes cardPopIn{
  0%   { opacity: 0; transform: scale(0.9); filter: blur(2px); }
  60%  { opacity: 1; transform: scale(1.02); filter: blur(0.6px); }
  100% { opacity: 1; transform: scale(1.0); filter: blur(0); }
}

/* Brief gold pop on landed card */
.card.firework::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 14px;
  pointer-events:none;
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(246,211,106,.70), rgba(246,211,106,0) 65%),
    radial-gradient(25% 25% at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(25% 25% at 70% 70%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  animation: firePop 260ms ease-out forwards;
}

@keyframes firePop{
  0%   { opacity: 0.95; transform: scale(0.55); }
  60%  { opacity: 0.9;  transform: scale(1.05); }
  100% { opacity: 0;    transform: scale(1.25); }
}

.owned-badge {
  position: absolute;
  top: 260px;   /* Increase to move it further down */
  left: 155px;  /* Increase to move it further to the right */
 background: linear-gradient(
  90deg,
  rgba(0, 0, 0, 0.70) 0%,
  rgba(60, 60, 60, 0.70) 55%,
  rgba(130, 130, 130, 0.70) 100%
);

  color: rgba(255, 255, 255, 0.842);
padding: 3px 3px;

  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10;
}

.new-badge{
  position: absolute;
  top: 80px;
  left: 12px; /* top LEFT of the cover */
  
  background: linear-gradient(
    90deg,
    #00c853 0%,
    #00e676 55%,
    #69f0ae 100%
  );
    -webkit-text-stroke: 3.5px rgba(0,0,0,.65);
  paint-order: stroke fill;
  text-shadow: 5px 5px 5px rgba(0,0,0,10);

  color: #ffffff;
  padding: 3px 6px;          /* more breathing room */
  border-radius: 6px;         /* slightly chunkier */
  font-size: 20px;            /* bigger text */
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.33), /* silver border */
    inset 0 0 0 3px rgba(255,255,255,.50), /* soft highlight */
    0 2px 6px rgba(0,0,0,.60);             /* drop shadow */

  z-index: 11;
}


.card .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.card .layer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Existing .card styles */

/* text styling: outline + shadow */
.card 
/* ===== CARD RENDER ===== */

/* Basic shimmer effect for cards */
.card {
  position: relative;
  display: inline-block;
  width: var(--card-w);
  aspect-ratio: 9 / 16;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

/* Silver base effect (for uncommon and epic) */
.card.shiny, .card.holo, .card.shimmer{
  position: relative;
  overflow: hidden;
}

/* Base foil overlay layer */
.card.shiny::after,
.card.holo::after,
.card.shimmer::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.22;
  mix-blend-mode: overlay;
  filter: contrast(1.10) saturate(1.10);
}

.card.shiny:not(.shimmer):not(.holo)::after{
  background-image: url("assets/textures/foil-uncommon.png");
  opacity: 0.22;
  mix-blend-mode: screen;
  filter: contrast(1.35) brightness(1.15);
}

/* Subtle silver specular sweep (very slow, very soft) */
.card.shiny:not(.shimmer):not(.holo)::before{
  content: '';
  position: absolute;
  top: -40%;
  left: -120%;
  width: 70%;
  height: 180%;
  pointer-events: none;
  z-index: 2;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.125),
    rgba(199, 198, 198, 0.381),
    rgba(255, 255, 255, 0.088)
  );

  mix-blend-mode: screen;
  opacity: 0.56;
  transform: rotate(18deg);
animation: silverSweep 4s ease-in-out infinite;
animation-delay: var(--foil-delay-silver, 0s);

}

@keyframes silverSweep{
  0%   { transform: translateX(-160%) rotate(18deg); }
  100% { transform: translateX(420%)  rotate(18deg); }
}


/* Rare = GOLD texture */
.card.holo::after{
  --spark-rare: 0.20; /* base sparkle intensity (rare = subtle) */

  background-image:
    radial-gradient(circle, rgba(255,255,255, calc(var(--spark-rare) * 0.22)) 0 1px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(255,255,255, calc(var(--spark-rare) * 0.12)) 0 1.6px, rgba(255,255,255,0) 4px),
    url("assets/textures/foil-rare.png");
  background-repeat: repeat, repeat, no-repeat;
  background-size: 173px 173px, 263px 263px, 120% 120%;
  background-position: 0 0, 87px 133px, 40% 50%;

  opacity: 0.75;
  mix-blend-mode: overlay;
  filter: contrast(1.14) saturate(1.08);

  /* foil drift (moves) + sparkle blink (no movement) */
  animation:
    goldFoilDrift 10s ease-in-out var(--foil-delay-gold, 0s) infinite alternate,
    rareSparkleBlink 3.1s steps(1,end) var(--foil-delay-gold, 0s) infinite;
}

@keyframes goldFoilDrift{
  0%   { background-position: 0 0, 87px 133px, 40% 50%; }
  100% { background-position: 0 0, 87px 133px, 60% 50%; }
}

@keyframes rareSparkleBlink{
  0%, 100% { --spark-rare: 0.14; }
  22%      { --spark-rare: 0.42; }
  55%      { --spark-rare: 0.18; }
  78%      { --spark-rare: 0.52; }
}

/* Epic = RAINBOW texture */
.card.shimmer::after{
  --spark-epic: 0.38; /* base sparkle intensity (epic = stronger) */

  background-image:
    radial-gradient(circle, rgba(255,255,255, calc(var(--spark-epic) * 0.60)) 0 1px, rgba(255,255,255,0) 4px),
    radial-gradient(circle, rgba(255,255,255, calc(var(--spark-epic) * 0.25)) 0 1.8px, rgba(255,255,255,0) 5px),
    url("assets/textures/foil-epic.png");
  background-repeat: repeat, repeat, no-repeat;
  background-size: 149px 149px, 233px 233px, 160% 160%;
  background-position: 0 0, 79px 121px, 30% 35%;

  opacity: 0.35;
  mix-blend-mode: screen;
  filter: contrast(1.12) saturate(1.25);

  /* foil drift (moves) + sparkle blink (no movement) */
  animation:
    foilDrift 4.5s ease-in-out var(--foil-delay-epic, 0s) infinite alternate,
    epicSparkleBlink 2.7s steps(1,end) var(--foil-delay-epic, 0s) infinite;
}

/* Epic starfield overlay (on top of rainbow swirl) */
.card.shimmer .layer::after{
  content:"";
  position:absolute;
  inset:-6px;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,216,124,0.9) 0 1.6px, rgba(255,216,124,0) 3px),
    radial-gradient(circle at 78% 12%, rgba(255,237,156,0.8) 0 1.4px, rgba(255,237,156,0) 2.8px),
    radial-gradient(circle at 30% 42%, rgba(255,216,124,0.85) 0 1.5px, rgba(255,216,124,0) 3px),
    radial-gradient(circle at 68% 36%, rgba(255,237,156,0.75) 0 1.2px, rgba(255,237,156,0) 2.5px),
    radial-gradient(circle at 22% 70%, rgba(255,216,124,0.8) 0 1.4px, rgba(255,216,124,0) 2.8px),
    radial-gradient(circle at 58% 74%, rgba(255,237,156,0.85) 0 1.6px, rgba(255,237,156,0) 3px),
    radial-gradient(circle at 82% 64%, rgba(255,216,124,0.8) 0 1.3px, rgba(255,216,124,0) 2.6px),
    radial-gradient(circle at 40% 86%, rgba(255,237,156,0.9) 0 1.7px, rgba(255,237,156,0) 3.2px),
    radial-gradient(circle at 12% 88%, rgba(255,216,124,0.7) 0 1.0px, rgba(255,216,124,0) 2.4px),
    radial-gradient(circle at 88% 88%, rgba(255,237,156,0.75) 0 1.1px, rgba(255,237,156,0) 2.2px),
    radial-gradient(circle at 50% 18%, rgba(255,216,124,0.8) 0 1.4px, rgba(255,216,124,0) 2.8px),
    radial-gradient(circle at 74% 52%, rgba(255,237,156,0.8) 0 1.3px, rgba(255,237,156,0) 2.6px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: 3;
  animation: epicStarFlicker 4.6s ease-in-out infinite alternate;
}

@keyframes epicStarFlicker{
  0%   { opacity: 0.32; filter: brightness(1); }
  22%  { opacity: 0.70; filter: brightness(1.15); }
  48%  { opacity: 0.46; filter: brightness(1.05); }
  71%  { opacity: 0.78; filter: brightness(1.25); }
  100% { opacity: 0.35; filter: brightness(1); }
}

@keyframes foilDrift{
  0%   { background-position: 0 0, 79px 121px, 30% 35%; }
  100% { background-position: 0 0, 79px 121px, 70% 65%; }
}

@keyframes epicSparkleBlink{
  0%, 100% { --spark-epic: 0.22; }
  18%      { --spark-epic: 0.90; }
  42%      { --spark-epic: 0.28; }
  67%      { --spark-epic: 1.00; }
  84%      { --spark-epic: 0.35; }
}

/* Subtle moving specular sweep to make it "pop" (works on all foils) */
.card.shiny::before,
.card.holo::before,
.card.shimmer::before{
  content: '';
  position: absolute;
  top: -35%;
  left: -90%;
  width: 65%;
  height: 170%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.00)
  );
  opacity: 0.15;
  transform: rotate(18deg);
  mix-blend-mode: screen;
  animation: foilSweep 4.8s ease-in-out infinite;
}

/* GOLD (Rare) — occasional glint sweep (distinct from silver/rainbow) */
.card.holo::before{
  content:'';
  position:absolute;
  inset:-60% -60%;
  pointer-events:none;
  z-index: 2; /* keep consistent with your foil layers */

  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 40%,
    rgba(255,240,190,0) 46%,
    rgba(255,255,255,0.70) 50%,
    rgba(255,220,120,0.40) 54%,
    rgba(255,255,255,0) 60%
  );

  mix-blend-mode: screen;
  filter: blur(0.8px) contrast(1.25) saturate(1.1);

  transform: translateX(-120%) rotate(18deg);
  opacity: 0;

animation: goldFoilSweep 4s cubic-bezier(.3,.8,.3,1) infinite;
animation-delay: var(--foil-delay-gold, 0s);

}

@keyframes goldFoilSweep{
  0%   { transform: translateX(-120%) rotate(18deg); opacity: 0; }
  10%  { opacity: 0.55; }
  35%  { transform: translateX(120%)  rotate(18deg); opacity: 0.45; }
  55%  { opacity: 0; }
  100% { transform: translateX(120%)  rotate(18deg); opacity: 0; }
}

.card.shimmer::before{ opacity: 0.14; }

@keyframes foilSweep{
  0%   { transform: translateX(-140%) rotate(18deg); }
  100% { transform: translateX(420%)  rotate(18deg); }
}

@keyframes foilDrift{
  0%   { background-position: 0 0, 79px 121px, 30% 35%; }
  100% { background-position: 0 0, 79px 121px, 70% 65%; }
}

/* Disable the old epic rainbow strip layers (we use foil-epic.png instead) */
.card.shimmer .rainbow-left,
.card.shimmer .rainbow-right{
  display: none;
}

/* Foil should sit ABOVE the cover (z=6) but UNDER all text/UI (z>=10) */
.card.shiny::after,
.card.holo::after,
.card.shimmer::after{
  z-index: 8;
}
.card.shiny::before,
.card.holo::before,
.card.shimmer::before{
  z-index: 9;
}

/* Additional card class styles (rare, epic, etc.) */


/* Additional card class styles (rare, epic, etc.) */

.card .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}


.t{
  position: absolute;
  color: #fff;
  text-shadow:
    5px 5px 5px rgba(0,0,0,.0),  /* Single shadow with slight offset */
    -1px -1px 2px rgba(0,0,0,.80), /* Offset in the opposite direction for a surrounding effect */
    1px -1px 2px rgb(0, 0, 0),  /* Additional offsets to ensure shadow surrounds */
    -1px 1px 2px rgba(0,0,0,.80);  /* The final offset completing the surrounding shadow */
    -webkit-text-stroke: 3px rgba(0,0,0,.55);
  paint-order: stroke fill;
  text-shadow: 5px 5px 5px rgba(0,0,0,10);
  font-weight: 700;
  letter-spacing: .1px;
  line-height: 1.1;
}




.card .title{
  left: var(--title-x);
  top: var(--title-y);
  font-size: var(--title-size);
  max-width: 150px;
z-index: 10;
  height: var(--title-h);
  display:flex;
  align-items:center;
}

.card .artist{
  left: var(--artist-x);
  top: var(--artist-y);
  font-size: var(--artist-size);
  max-width: 150px;

  height: var(--artist-h);
  display:flex;
  align-items:center;
  z-index: 10;
}


.card .score{
  left: var(--score-x);
  top: var(--score-y);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 10;
  font-size: var(--score-size);
}

.card .cover {
  position: relative;
  left: var(--cover-x);
  top: var(--cover-y);
  width: var(--cover-size);
  height: var(--cover-size);
  border-radius: 2px;
  overflow: hidden;
  outline: 3px solid #0f0e0e;
  outline-offset: 0px;
  box-shadow: inset 0 0 0 5px #8f2929;
  z-index: 6;  /* Ensure album cover is on top */
}

.card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  outline: 4px solid #232121;
  outline-offset: 4px;
  pointer-events: none;
}



.card .mainGenre{
  left: var(--genre-x);
  top: var(--genre-y);
  font-size: var(--genre-size);
  max-width: 150px;

  height: var(--genre-h);
  display:flex;
  align-items:center;
  z-index: 10;
}

.card .subgenre1,
.card .subgenre2,
.card .subgenre3{
  position:absolute;
  display:flex;
  align-items:center;
  font-weight: 700;
  z-index: 10;
}

.card .subgenre1{
  left: var(--subgenre1-x);
  top: var(--subgenre1-y);
  font-size: var(--subgenre1-size);
  height: var(--subgenre1-h);
  display:flex;
  align-items:center;
}

.card .subgenre2{
  left: var(--subgenre2-x);
  top: var(--subgenre2-y);
  font-size: var(--subgenre2-size);
  height: var(--subgenre2-h);
  display:flex;
  align-items:center;
}

.card .subgenre3{
  left: var(--subgenre3-x);
  top: var(--subgenre3-y);
  font-size: var(--subgenre3-size);
  height: var(--subgenre3-h);
  display:flex;
  align-items:center;
}

/* Center text within its existing horizontal bounds (do not move anchors) */
.card .subgenre1{
  left: var(--subgenre1-x);
}
.card .subgenre2{
  left: var(--subgenre2-x);
}
.card .subgenre3{
  left: var(--subgenre3-x);
}

.card .yearBadge{
  position:absolute;
  left: var(--year-x);
  top: var(--year-y);
  width: var(--year-diameter);
  height: var(--year-diameter);
  border-radius: 999px;
  overflow:hidden;
}
.card .yearBadge img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.15);
  opacity: .95;
}
.card .yearBadge .yearText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--year-size);
  font-weight: 900;
  color:#fff;
  text-shadow:
    1px 1px 2px rgba(0,0,0,.80),  /* Single shadow with slight offset */
    -1px -1px 2px rgba(0,0,0,.80), /* Offset in the opposite direction for a surrounding effect */
    1px -1px 2px rgba(0,0,0,.80),  /* Additional offsets to ensure shadow surrounds */
    -1px 1px 2px rgba(0,0,0,.80);  /* The final offset completing the surrounding shadow */
    z-index: 10;
}

.card .setIcons{
  position:absolute;
  left: var(--seticons-x);
  top: var(--seticons-y);
  display:flex;
  gap: var(--seticons-gap);
}
.card .setIcons img{
  width: var(--seticons-size);
  height: var(--seticons-size);
  border-radius: 6px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.35);
}

/* Seen overlay rule: 25% opacity of *everything* except background is handled by reducing layer opacity */
.card.seen .layer{
  opacity: .25;
}
.card.seen .bg,
.card.seen .layer{
  filter: grayscale(50%);
}
.card.seen .fav-toggle{
  filter: none;
}
.card.seen .fav-indicator{
  filter: none;
}

.fav-toggle{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border:none;
  border-radius:50%;
  background: rgba(0,0,0,.45);
  color: #d4d9e3;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 50;
  pointer-events: auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.fav-toggle:hover{
  transform: scale(1.05);
  background: rgba(0,0,0,.65);
}
.fav-toggle.is-fav{
  background: linear-gradient(135deg, #ffd87c, #ffb347);
  color: #5a3c00;
  box-shadow: 0 10px 24px rgba(255, 196, 96, .55);
}
.fav-toggle.is-fav:hover{
  transform: scale(1.08);
}
.fav-indicator{
  position:absolute;
  top:80px;
  right:10px;
  width:26px;
  height:26px;
  border-radius:50%;
  background: linear-gradient(135deg, #ffd87c, #ffb347);
  color: #5a3c00;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
}


.hidden {
  display: none !important;
}
.view {
  display: none;
}

.view.active {
  display: block;
}

/* Info page */
.info-hero{
  position: relative;
  padding: 32px 20px 48px;
  min-height: calc(100vh - 140px);
}
.info-glow{
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 50% 40%, rgba(120,210,255,.18), transparent 45%),
              radial-gradient(circle at 60% 70%, rgba(130,120,255,.16), transparent 50%);
  filter: blur(18px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}
.info-card{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 28px 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18,24,42,.85), rgba(28,38,62,.9));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 60px rgba(0,0,0,.55);
  color: #f4f7ff;
  font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
}
.info-card h1{
  margin: 0 0 12px;
  font-size: 28px;
  letter-spacing: 0.3px;
}
.info-lede{
  margin: 0 0 18px;
  color: rgba(244,247,255,.82);
  font-size: 16px;
  line-height: 1.6;
}
.info-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.info-grid h2{
  margin: 0 0 8px;
  font-size: 18px;
  color: #ffe7a6;
}
.info-grid p{
  margin: 0 0 8px;
  color: rgba(244,247,255,.82);
}
.info-grid ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(244,247,255,.82);
  line-height: 1.55;
}
.info-grid li strong{
  color: #ffd87c;
}
/* Other styles here */

/* When the button is disabled */
#openPackBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#testGoldVoucherBtn{
  order:-1; /* keep test tab to the left of coins so it doesn't shove stats */
}

/* When the button is enabled */
#openPackBtn {
  cursor: pointer;
  background-color: #4CAF50;  /* Example button color */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
}

/* Card back overlay for multi-pack (Standard slot 5 / Premium slot 4) */
.card-back-overlay{
  position: absolute;
  inset: 0;
  background: url("assets/cards/back.png") center/cover no-repeat;
  z-index: 25; /* legacy (no longer used) */
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backface-visibility: hidden;

  opacity: 1;
}

.card-back-overlay.revealing{
  opacity: 0;
}

/* True 2-sided flip for the hidden slot card */
.flip-card{
  position: relative;
  perspective: 900px;
}

.loot-track .flip-card{
  width: auto;
  height: auto;
}

.flip-card .flip-inner{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 1500ms cubic-bezier(.2,.8,.2,1);
}

.flip-card.is-revealed .flip-inner{
  transform: rotateY(180deg);
}

.flip-card .flip-face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card .flip-back{
  background: url("assets/cards/back.png") center/cover no-repeat;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.flip-card.is-revealed .flip-back{
  pointer-events: none;
}

.flip-card .flip-front{
  transform: rotateY(180deg);
}

/* Prevent foil/shimmer overlays showing on the BACK side before reveal */
.flip-card:not(.is-revealed).shiny::after,
.flip-card:not(.is-revealed).holo::after,
.flip-card:not(.is-revealed).shimmer::after{
  opacity: 0 !important;
}

/* ===== HUD TOAST (craft/dismantle feedback) ===== */
.hud-toast{
  position: fixed;
  top: var(--hud-toast-top, 72px);
  right: var(--hud-toast-right, 25px);
  z-index: 10050;

  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.6);

  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
  color: #fff;

  pointer-events: none;

  opacity: 0;
  transform: translateY(-8px);
  animation: hudToastPop 1500ms ease forwards;
}

.hud-toast .hud-toast-num{
  color: #f6d36a;
  font-size: 22px;
  margin-right: 8px;
  text-shadow: 0 2px 0 rgba(0,0,0,.65);
}

@keyframes hudToastPop{
  0% { opacity: 0; transform: translateY(-10px); }
  10% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}