/* ==========================================================================
   Iconic Breaks — TCG "type energy" theme (Pokémon-inspired, no characters).
   Loads on the TCG page only. Original elemental motifs + type palette.
   ========================================================================== */

.mode-tcg {
  --tcg-electric: #FFCB05;
  --tcg-ghost:    #8B5CF6;
  --tcg-water:    #2E9BE0;
  --tcg-fire:     #FF7A2F;
  --tcg-grass:    #3DB36B;
  --tcg-ink:      #0A0E1A;
}

/* Page canvas (both worlds share the dark energy skin) */
.mode-tcg .site-main, .mode-sports .site-main { background: var(--tcg-ink); color: #fff; }
.mode-tcg .site-main h1, .mode-tcg .site-main h2, .mode-tcg .site-main h3,
.mode-sports .site-main h1, .mode-sports .site-main h2, .mode-sports .site-main h3 { color: #fff; }

/* ---- Hero -------------------------------------------------------------- */
.tcg-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(4rem, 11vw, 8rem);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,203,5,.16), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(900px 700px at 80% 120%, rgba(46,155,224,.20), transparent 60%),
    linear-gradient(160deg, #121935 0%, #0A0E1A 70%);
  text-align: center;
}
.tcg-hero .container { position: relative; z-index: 2; }
.tcg-hero .eyebrow { color: var(--tcg-electric); }
.tcg-hero h1 { font-size: clamp(3rem, 8vw, 6rem); color: #fff; }
/* The gradient word keeps its clip; the rest of the headline stays solid white. */
.tcg-hero h1 .tcg-title-grad { -webkit-text-fill-color: transparent; }
.tcg-title-grad {
  background: linear-gradient(90deg, var(--tcg-electric), var(--tcg-fire) 35%, var(--tcg-ghost) 70%, var(--tcg-water));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.tcg-sub { color: rgba(255,255,255,.85); font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 48ch; margin: 0 auto 2rem; }

/* Decorative energy layer (motifs peeking from the edges) */
.tcg-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tcg-motif { position: absolute; opacity: .9; }
.tcg-motif svg { display: block; width: 100%; height: 100%; }
.tcg-motif--bolt   { top: 8%;  left: -3%;  width: clamp(90px, 12vw, 190px); color: var(--tcg-electric); transform: rotate(-12deg); filter: drop-shadow(0 0 24px rgba(255,203,5,.5)); }
.tcg-motif--flame  { bottom: -6%; left: 6%; width: clamp(80px, 10vw, 160px); color: var(--tcg-fire); filter: drop-shadow(0 0 24px rgba(255,122,47,.5)); }
.tcg-motif--drop   { top: 12%; right: 4%;  width: clamp(70px, 9vw, 150px); color: var(--tcg-water); filter: drop-shadow(0 0 24px rgba(46,155,224,.55)); }
.tcg-motif--wisp   { bottom: -4%; right: -2%; width: clamp(90px, 12vw, 200px); color: var(--tcg-ghost); filter: drop-shadow(0 0 26px rgba(139,92,246,.55)); }
.tcg-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .8; }
.tcg-orb::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: rgba(255,255,255,.25); filter: blur(4px); }
.tcg-orb--1 { top: 22%; left: 12%; width: 16px; height: 16px; background: var(--tcg-electric); }
.tcg-orb--2 { top: 62%; left: 22%; width: 10px; height: 10px; background: var(--tcg-water); }
.tcg-orb--3 { top: 30%; right: 16%; width: 12px; height: 12px; background: var(--tcg-ghost); }
.tcg-orb--4 { bottom: 18%; right: 26%; width: 14px; height: 14px; background: var(--tcg-fire); }

@media (max-width: 700px) { .tcg-motif--bolt, .tcg-motif--drop { opacity: .55; } }

/* Buttons: electric primary on the TCG page */
.mode-tcg .btn--energy {
  background: linear-gradient(120deg, var(--tcg-electric), var(--tcg-fire));
  color: var(--tcg-ink);
}
.mode-tcg .btn--energy:hover { color: var(--tcg-ink); }

/* ---- Type category tiles ---------------------------------------------- */
.tcg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); }
.tcg-tile {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.6rem 1.4rem 1.4rem;
  min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem;
  color: #fff; background: #141a30; border: 1px solid rgba(255,255,255,.08);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tcg-tile:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); color: #fff; }
.tcg-tile::before { content: ""; position: absolute; inset: 0; opacity: .9; background: var(--tile-grad); z-index: 0; }
.tcg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(6,7,10,.6)); z-index: 1; }
.tcg-tile > * { position: relative; z-index: 2; }
.tcg-tile .tcg-tile-icon { position: absolute; top: -6px; right: -6px; width: 92px; height: 92px; opacity: .28; z-index: 1; }
.tcg-tile h3 { font-size: 1.3rem; margin: 0; color: #fff; }
.tcg-tile span { color: rgba(255,255,255,.85); font-size: .9rem; }
.tcg-tile--electric { --tile-grad: linear-gradient(150deg, #a6820a, #141a30 70%); }
.tcg-tile--fire     { --tile-grad: linear-gradient(150deg, #a34418, #141a30 70%); }
.tcg-tile--water    { --tile-grad: linear-gradient(150deg, #155a86, #141a30 70%); }
.tcg-tile--ghost    { --tile-grad: linear-gradient(150deg, #4c2f86, #141a30 70%); }
.tcg-tile--grass    { --tile-grad: linear-gradient(150deg, #1f6b40, #141a30 70%); }
.tcg-tile--gold     { --tile-grad: linear-gradient(150deg, #7a5a10, #141a30 70%); }

/* Panels on the dark TCG page */
.mode-tcg .section--panel, .mode-sports .section--panel { background: #101527; border-radius: var(--radius); }
.mode-tcg .product-card, .mode-tcg .ibs-card,
.mode-sports .product-card, .mode-sports .ibs-card { background: #141a30; border-color: rgba(255,255,255,.08); color: #fff; }
.mode-tcg .product-title, .mode-tcg .ibs-card-title,
.mode-sports .product-title, .mode-sports .ibs-card-title { color: #fff; }
.mode-tcg .lead, .mode-sports .lead { color: rgba(255,255,255,.8); }

@media (max-width: 900px) { .tcg-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tcg-tiles { grid-template-columns: 1fr; } }

/* Anchor scroll offset so the sticky header doesn't cover the target */
[id="tcg-featured"], [id="sports-featured"] { scroll-margin-top: 110px; }

/* ---- SPORTS world (mode-sports): same layout, brand-blue energy --------- */
.mode-sports {
  --tcg-electric: #2EA0FF;
  --tcg-ghost:    #5F95C8;
  --tcg-water:    #2F5EA9;
  --tcg-fire:     #7FB0E0;
  --tcg-grass:    #3DB36B;
  --tcg-ink:      #06070A;
}
/* Multi-league energy: basketball orange, MLB red, NFL navy, NHL slate. */
.mode-sports .tcg-hero {
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(226,110,40,.20), transparent 60%),   /* basketball */
    radial-gradient(900px 520px at 100% 0%, rgba(190,52,52,.22), transparent 60%),      /* baseball */
    radial-gradient(1000px 620px at 82% 120%, rgba(27,47,87,.55), transparent 62%),     /* football */
    radial-gradient(760px 520px at 38% 118%, rgba(120,135,150,.16), transparent 60%),   /* hockey */
    linear-gradient(160deg, #151a2c 0%, #06070A 72%);
}
.mode-sports .tcg-title-grad {
  background: linear-gradient(90deg, #FBFCFD, #F0A05A 30%, #E86A6A 55%, #7FA6D8);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.mode-sports .tcg-motif--bolt  { color: #E8722B; filter: drop-shadow(0 0 22px rgba(226,110,40,.55)); }  /* basketball */
.mode-sports .tcg-motif--flame { color: #D64545; filter: drop-shadow(0 0 22px rgba(214,69,69,.5)); }    /* baseball */
.mode-sports .tcg-motif--drop  { color: #6E93C8; filter: drop-shadow(0 0 22px rgba(110,147,200,.5)); }  /* football */
.mode-sports .tcg-motif--wisp  { color: #9AA7B5; filter: drop-shadow(0 0 22px rgba(154,167,181,.45)); } /* hockey */
.mode-sports .btn--energy { background: linear-gradient(120deg, #E8722B, #D64545); color: #fff; }
.mode-sports .btn--energy:hover { color: #fff; }

/* League tiles — each sport carries its own identity colour. */
.tcg-tile--basketball { --tile-grad: linear-gradient(150deg, #c25a1a, #0f1526 72%); }
.tcg-tile--football   { --tile-grad: linear-gradient(150deg, #1b2f57, #0f1526 72%); }
.tcg-tile--baseball   { --tile-grad: linear-gradient(150deg, #9e2b2b, #0f1526 72%); }
.tcg-tile--hockey     { --tile-grad: linear-gradient(150deg, #2a3340, #0f1526 72%); }
.tcg-tile--sealed     { --tile-grad: linear-gradient(150deg, #8a6a12, #0f1526 72%); }
.tcg-tile--repack     { --tile-grad: linear-gradient(150deg, #1e4f8a, #0f1526 72%); }