/* Vishiz TCG — Electric + Arcane theme */

:root{
  --fontDisplay: ui-sans-serif, system-ui, -apple-system, Segoe UI Variable, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --title-gradient: linear-gradient(90deg, #FFCF4D, #57A6FF);
  --title-gradient-2: linear-gradient(90deg, #57A6FF, #7DFFEA);
  --text-strong: #F5F8FF;
  --text-soft: #C6D1F0;
  --link: #9FC7FF;
  --linkHover: #FFCF4D;
  --glow-gold: rgba(255,207,77,.45);
  --glow-blue: rgba(87,166,255,.45);
  --glow-teal: rgba(125,255,234,.35);
  --shadow-soft: 0 12px 36px rgba(0,0,0,.28);
  --shadow-pop: 0 18px 55px rgba(0,0,0,.42);

  --bg: #070A12;
  --bg2:#0B1022;
  --panel:#0C132B;
  --panel2:#0A1126;
  --text:#EAF0FF;
  --muted:#AAB6D6;
  --line: rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.55);

  --gold:#FFCF4D;
  --gold2:#FFB000;
  --blue:#57A6FF;
  --blue2:#2D6CFF;
  --spark:#7DFFEA;
  --danger:#FF4D6D;
  --ok:#63FF8A;

  --radius: 18px;
  --radius2: 28px;
  --wrap: 1120px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI Variable, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

[data-theme="light"]{
  --bg:#F7FAFF;
  --bg2:#EDF3FF;
  --panel:#FFFFFF;
  --panel2:#FFFFFF;
  --text:#0B1022;
  --muted:#4B587A;
  --line: rgba(10,15,30,.12);
  --shadow: 0 18px 45px rgba(10,15,30,.15);
}


/* Ensure hidden attribute always wins (prevents drawer/backdrop from getting "stuck open") */
[hidden]{ display:none !important; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 650px at 10% -10%, rgba(87,166,255,.18), transparent 60%),
    radial-gradient(900px 520px at 105% 10%, rgba(255,207,77,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: none; }
code{ background: rgba(255,255,255,.07); padding:.15em .35em; border-radius:8px; border:1px solid var(--line); }

.wrap{ max-width: var(--wrap); margin:0 auto; padding: 0 18px; }
.section{ padding: 64px 0; }
.section.alt{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent); }
.page .section{ padding-top: 36px; }

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 18px; top: 18px; width:auto; height:auto; padding:10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  z-index: 9999;
}

.site-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(7,10,18,.80), rgba(7,10,18,.50));
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .site-header{
  background: rgba(247,250,255,.75);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; padding: 12px 0;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  height: 55px; width:auto; display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.nav{ display:flex; gap: 18px; align-items:center; }
.nav a{
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  border: 1px solid transparent;
}
.nav a:hover{
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.03);
}
.nav a.active{
  color: var(--text);
  border-color: rgba(255,207,77,.25);
  background: linear-gradient(180deg, rgba(255,207,77,.08), rgba(87,166,255,.05));
}

.header-actions{ display:flex; align-items:center; gap: 10px; }
.icon-btn{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.icon-btn:hover{ background: rgba(255,255,255,.07); }

.cart-btn{
  display:flex; align-items:center; gap: 10px;
  border: 1px solid rgba(255,207,77,.25);
  background: linear-gradient(180deg, rgba(255,207,77,.10), rgba(87,166,255,.06));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
}
.cart-count{
  min-width: 24px; height: 24px;
  display:grid; place-items:center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,207,77,.20);
  border: 1px solid rgba(255,207,77,.35);
  font-weight: 700;
}

.burger{
  display:none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.burger span{
  display:block; width: 18px; height: 2px; background: var(--text);
  margin: 4px 0; border-radius: 2px;
}

.mobile-nav{
  display:none;
  padding: 10px 0 16px;
}
.mobile-nav a{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  margin-top: 10px;
}

.hero{
  position:relative;
  padding: 76px 0 40px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(87,166,255,.30);
  background: rgba(87,166,255,.10);
  color: var(--text);
  font-weight: 650;
  letter-spacing: .2px;
  margin: 0 0 12px;
}

.hero h1{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -0.6px;
}
.lede{
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 16px;
}
.cta-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 650;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.07); }
.btn.primary{
  border-color: rgba(255,207,77,.35);
  background: linear-gradient(180deg, rgba(255,207,77,.18), rgba(255,176,0,.08));
}
.btn.ghost{
  border-color: rgba(87,166,255,.35);
  background: linear-gradient(180deg, rgba(87,166,255,.14), rgba(45,108,255,.06));
}
.btn.full{ width:100%; }

.quick-stats{
  margin: 18px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 10px;
}
.quick-stats .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--blue));
  display:inline-block; margin-right: 10px;
  box-shadow: 0 0 0 6px rgba(255,207,77,.10);
}

.hero-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,19,43,.65), rgba(10,17,38,.35));
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.glow-frame{
  padding: 16px;
  height: 100%;
  position: relative;
}
.card-stack{
  position: relative;
  height: 100%;
}
.stack-card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  position: relative;
  z-index: 2;
}
.stack-card h3{ margin: 0 0 6px; }
.stack-card p{ margin: 0 0 12px; color: var(--muted); }

.mini-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mini{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.mini strong{ font-size: .95rem; }
.mini .price{ color: var(--gold); font-weight: 750; }
.hint{ font-size:.9rem; color: var(--muted); }

.rune{
  position:absolute; inset: -120px -120px auto auto;
  width: 420px; height: 420px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(87,166,255,.16), transparent 55%),
    radial-gradient(circle at center, rgba(255,207,77,.10), transparent 60%);
  filter: blur(0px);
  opacity: .9;
  z-index: 1;
}

.hero-bg{
  position:absolute; inset:0;
  z-index: 1;
  pointer-events:none;
}
.arc{
  position:absolute; left: -120px; bottom: -220px;
  width: 560px; height: 560px;
  border-radius: 999px;
  border: 1px solid rgba(87,166,255,.18);
  box-shadow: 0 0 0 22px rgba(87,166,255,.05);
  transform: rotate(14deg);
}
.arc2{
  left: auto; right: -160px; bottom: -260px;
  border-color: rgba(255,207,77,.16);
  box-shadow: 0 0 0 22px rgba(255,207,77,.05);
  transform: rotate(-18deg);
}
.spark{
  position:absolute; top: 22%; left: 50%;
  width: 2px; height: 2px;
  box-shadow:
    0 0 60px 30px rgba(87,166,255,.08),
    0 0 90px 45px rgba(255,207,77,.06);
}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.section-head h2{ margin: 0; }
.section-head p{ margin: 0; color: var(--muted); }

.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tile{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 18px;
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
}
.tile:hover{
  border-color: rgba(255,207,77,.25);
  transform: translateY(-1px);
}
.tile-kicker{
  display:inline-block;
  color: var(--muted);
  font-weight: 650;
  margin-bottom: 6px;
}
.tile h3{ margin: 0 0 10px; }
.tile p{ margin: 0 0 14px; color: var(--muted); }
.tile-cta{ color: var(--gold); font-weight: 750; }

.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(87,166,255,.22);
  background: linear-gradient(180deg, rgba(87,166,255,.10), rgba(255,207,77,.05));
  padding: 18px;
  box-shadow: var(--shadow);
}
.bullets{ margin: 14px 0 0; color: var(--muted); }
.bullets li{ margin: 8px 0; }

.page-hero{
  padding: 40px 0 18px;
}
.toolbar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.input, .select{
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
}
.input{ min-width: 240px; flex: 1; }
.select{ min-width: 210px; }

.pills{
  display:flex; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor:pointer;
  font-weight: 650;
}
.pill.active{
  color: var(--text);
  border-color: rgba(255,207,77,.35);
  background: linear-gradient(180deg, rgba(255,207,77,.16), rgba(87,166,255,.05));
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card{
  grid-column: span 4;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  display:flex;
  flex-direction: column;
}
.card-media{
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(350px 180px at 20% 10%, rgba(87,166,255,.22), transparent 55%),
    radial-gradient(320px 160px at 80% 0%, rgba(255,207,77,.18), transparent 55%),
    linear-gradient(180deg, rgba(12,19,43,.75), rgba(10,17,38,.30));
  border-bottom: 1px solid var(--line);
  position: relative;
}
.card-media{ overflow: hidden; }

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

.card-media::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(125,255,234,.10), transparent 45%);
}
.tag{
  position:absolute; top: 12px; left: 12px;
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
  font-weight: 700;
  font-size: .82rem;
}
.tag.pokemon{ border-color: rgba(255,207,77,.35); }
.tag.mtg{ border-color: rgba(87,166,255,.40); }

.card-body{ padding: 14px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.card-title{ margin: 0; font-size: 1.02rem; letter-spacing: -.2px; }
.card-desc{ margin: 0; color: var(--muted); line-height: 1.45; }
.card-row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top:auto; }
.price{
  font-weight: 850;
  letter-spacing: .2px;
  color: var(--gold);
}
.small{ color: var(--muted); font-size: .9rem; }

.site-footer{
  border-top: 1px solid var(--line);
  padding: 26px 0;
  background: rgba(0,0,0,.15);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items:start;
}
.footer-brand{ font-weight: 900; letter-spacing: .3px; }
.footer-links{ display:flex; gap: 14px; flex-wrap: wrap; justify-content:center; }
.footer-links a{ color: var(--muted); padding: 8px 10px; border-radius: 12px; }
.footer-links a:hover{ color: var(--text); background: rgba(255,255,255,.03); border:1px solid var(--line); }
.footer-meta{ text-align:right; }
.muted{ color: var(--muted); }
.tiny{ font-size: .85rem; line-height: 1.35; }

.drawer-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.58);
  z-index: 70;
}
.drawer{
  position: fixed; right: 14px; top: 14px; bottom: 14px;
  width: min(420px, calc(100% - 28px));
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(12,19,43,.92), rgba(10,17,38,.86));
  box-shadow: var(--shadow);
  z-index: 80;
  display:flex;
  flex-direction: column;
  overflow:hidden;
}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
}
.drawer-body{ padding: 14px; overflow:auto; flex:1; }
.drawer-foot{ padding: 14px; border-top: 1px solid var(--line); display:grid; gap: 10px; }
.total-row{ display:flex; align-items:center; justify-content:space-between; }
.cart-items{ display:grid; gap: 10px; }
.cart-item{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.cart-item strong{ display:block; }
.cart-item .meta{ color: var(--muted); font-size: .9rem; }
.qty{
  display:flex; align-items:center; gap: 8px; justify-content:flex-end;
}
.qty button{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: 12px;
  cursor:pointer;
}
.qty button:hover{ background: rgba(255,255,255,.07); }

.cart-empty{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 16px;
  text-align:center;
  color: var(--muted);
}

@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr; }
  .tiles{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; text-align:left; }
  .footer-meta{ text-align:left; }
}

@media (max-width: 760px){
  .nav{ display:none; }
  .burger{ display:block; }
  .mobile-nav{ display:block; }
  .card{ grid-column: span 12; }
}
@media (min-width: 761px) and (max-width: 1100px){
  .card{ grid-column: span 6; }
}


/* === FULL SEND TYPOGRAPHY PACK === */

/* Global text rendering polish */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(255,207,77,.25);
  color: var(--text-strong);
}

/* Base copy */
body {
  font-weight: 450;
  letter-spacing: 0.1px;
}

p {
  color: var(--muted);
}

.lede {
  color: var(--text-soft);
  font-size: 1.08rem;
}

strong {
  color: #FFFFFF;
  font-weight: 800;
}

/* Links */
a {
  color: inherit;
}
a.link, .footer-links a {
  color: var(--link);
}
a.link:hover, .footer-links a:hover {
  color: var(--linkHover);
}

/* Headings: display font + gradients */
h1, h2, h3 {
  font-family: var(--font);
  font-weight: 900;
letter-spacing: -0.6px;
  color: var(--text-strong);
}

.hero h1,
.page-hero h1 {
  font-family: var(--font);
  font-weight: 950;
letter-spacing: -0.9px;
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 18px rgba(255,207,77,.25),
    0 0 28px rgba(87,166,255,.18);
}

.section-head h2 {
  font-family: var(--font);
  font-weight: 900;
font-size: clamp(24px, 3vw, 34px);
  background: linear-gradient(90deg, #EAF0FF, #9FB6FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stack-card h3 {
  font-family: var(--font);
  font-weight: 900;
background: var(--title-gradient-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(125,255,234,.16);
}

/* Card titles feel like card names */
.card-title {
  font-family: var(--font);
  font-weight: 900;
font-weight: 800;
  letter-spacing: -0.4px;
  color: #F2F6FF;
  text-shadow: 0 0 10px rgba(87,166,255,.18);
}

.card-desc {
  color: var(--text-soft);
}

/* Prices pop like a chase hit */
.price {
  background: linear-gradient(90deg, #FFCF4D, #FFD966);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255,207,77,.35);
}

/* Buttons: more energy + better hierarchy */
.btn {
  font-family: var(--font);
  font-weight: 750;
  letter-spacing: .35px;
  text-transform: none;
}

.btn.primary {
  box-shadow:
    0 0 0 1px rgba(255,207,77,.35),
    0 12px 30px rgba(255,207,77,.25);
}

.btn.primary:hover {
  box-shadow:
    0 0 0 1px rgba(255,207,77,.6),
    0 18px 45px rgba(255,207,77,.35);
}

.btn.ghost {
  box-shadow:
    0 0 0 1px rgba(87,166,255,.25),
    0 12px 30px rgba(87,166,255,.18);
}

.btn.ghost:hover {
  box-shadow:
    0 0 0 1px rgba(87,166,255,.45),
    0 18px 45px rgba(87,166,255,.26);
}

/* Inputs feel more premium */
.input, .select {
  font-family: var(--font);
  font-weight: 600;
}
.input::placeholder {
  color: rgba(170,182,214,.75);
}

/* Nav polish */
.nav a {
  font-family: var(--font);
  font-weight: 750;
  letter-spacing: .25px;
}

/* Footer brand glow */
.footer-brand {
  font-family: var(--font);
  font-weight: 950;
background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 14px rgba(255,207,77,.18),
    0 0 18px rgba(87,166,255,.12);
}

/* Slightly punchier badges/tags */
.badge {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: .35px;
}
.tag {
  font-family: var(--font);
  font-weight: 850;
  letter-spacing: .35px;
}

/* === END FULL SEND TYPOGRAPHY PACK === */


/* === CARD STYLE FONT PASS === */

/* Card-inspired typography pass (Pokémon + MTG vibes) */

/* Global tightening + clarity */
body {
  letter-spacing: 0.15px;
  font-variation-settings: "wght" 520;
}

/* Headings feel like card titles */
h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 900;
}

.hero h1,
.page-hero h1 {
  letter-spacing: 1px;
  text-shadow:
    0 0 22px rgba(255,207,77,.35),
    0 0 34px rgba(87,166,255,.25);
}

/* Section headers resemble set names */
.section-head h2 {
  letter-spacing: 1.2px;
  font-size: clamp(22px, 2.8vw, 32px);
}

/* Card titles = actual card name treatment */
.card-title {
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 950;
  text-shadow:
    0 0 8px rgba(0,0,0,.45),
    0 0 14px rgba(87,166,255,.25);
}

/* Card description = rules text */
.card-desc {
  letter-spacing: 0.25px;
  line-height: 1.45;
  font-weight: 500;
}

/* Prices look embossed */
.price {
  letter-spacing: 0.8px;
  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 14px rgba(255,207,77,.45);
}

/* Badges & tags = rarity chips */
.badge,
.tag {
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 900;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 6px 18px rgba(0,0,0,.35);
}

/* Buttons feel like card actions */
.btn {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
}

/* === END CARD STYLE FONT PASS === */


/* === ULTRA CARD TYPOGRAPHY FULL SEND === */

/* Ultra card-style typography: bold, collectible, premium */

/* Global tuning */
body {
  letter-spacing: 0.2px;
  font-weight: 520;
}

/* Headings = card names / set headers */
h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 950;
}

/* Hero title = chase card */
.hero h1,
.page-hero h1 {
  letter-spacing: 1.6px;
  text-shadow:
    0 0 28px rgba(255,207,77,.45),
    0 0 44px rgba(87,166,255,.35),
    0 6px 12px rgba(0,0,0,.55);
}

/* Section headers = expansion names */
.section-head h2 {
  letter-spacing: 1.8px;
  font-size: clamp(22px, 2.6vw, 32px);
  text-shadow:
    0 0 16px rgba(87,166,255,.25);
}

/* Card titles = premium card nameplate */
.card-title {
  letter-spacing: 1.4px;
  font-weight: 980;
  text-shadow:
    0 2px 0 rgba(0,0,0,.75),
    0 0 18px rgba(87,166,255,.35);
}

/* Card rules text */
.card-desc {
  letter-spacing: 0.35px;
  line-height: 1.5;
  font-weight: 520;
}

/* Prices = gold foil stamp */
.price {
  letter-spacing: 1.1px;
  text-shadow:
    0 1px 0 rgba(0,0,0,.75),
    0 0 18px rgba(255,207,77,.55),
    0 0 28px rgba(255,176,0,.35);
}

/* Badges/tags = rarity plate */
.badge,
.tag {
  letter-spacing: 1.6px;
  font-weight: 950;
  text-shadow:
    0 1px 0 rgba(0,0,0,.7);
}

/* Buttons = actions */
.btn {
  letter-spacing: 1.4px;
  font-weight: 950;
  text-shadow:
    0 1px 0 rgba(0,0,0,.65);
}

/* === END ULTRA CARD TYPOGRAPHY FULL SEND === */


/* === NUCLEAR TCG EFFECTS PACK === */

/* NUCLEAR: Foil shimmer + rarity plates + hover lift + vibe pulses */

/* Rarity palette */
:root {
  --rarity-common: rgba(255,255,255,.18);
  --rarity-uncommon: rgba(125,255,234,.28);
  --rarity-rare: rgba(87,166,255,.30);
  --rarity-ultra: rgba(255,207,77,.32);
  --rarity-mythic: rgba(255,77,109,.30);
  --rarity-serialized: rgba(255,207,77,.40);
  --foil-white: rgba(255,255,255,.18);
}

/* Card lift + premium motion */
.card {
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-pop);
  border-color: rgba(255,207,77,.28);
}

/* Foil shimmer overlay */
.card-media {
  overflow: hidden;
}
.card-media::before {
  content:"";
  position:absolute; inset:-40%;
  background:
    linear-gradient(120deg,
      transparent 35%,
      rgba(255,255,255,.08) 45%,
      rgba(125,255,234,.10) 50%,
      rgba(255,207,77,.10) 55%,
      transparent 65%);
  transform: translateX(-60%) rotate(8deg);
  opacity: 0;
  pointer-events:none;
}
.card:hover .card-media::before {
  opacity: 1;
  animation: foilSweep 1.25s ease-in-out both;
}

@keyframes foilSweep {
  0%   { transform: translateX(-60%) rotate(8deg); }
  100% { transform: translateX(60%) rotate(8deg); }
}

/* Subtle foil grain */
.card-media::after {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06), transparent 38%),
    radial-gradient(circle at 70% 20%, rgba(125,255,234,.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,207,77,.06), transparent 42%);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events:none;
}

/* Rarity chip */
.rarity-chip {
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  font-weight: 950;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.35);
}

.rarity-chip.common    { border-color: var(--rarity-common); }
.rarity-chip.uncommon  { border-color: var(--rarity-uncommon); }
.rarity-chip.rare      { border-color: var(--rarity-rare); }
.rarity-chip.ultra     { border-color: var(--rarity-ultra); }
.rarity-chip.mythic    { border-color: var(--rarity-mythic); }
.rarity-chip.serialized{ border-color: var(--rarity-serialized); }

/* Serialized stamp */
.serial-stamp {
  position:absolute;
  bottom: 12px;
  right: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,207,77,.45);
  background: linear-gradient(180deg, rgba(255,207,77,.18), rgba(87,166,255,.08));
  font-weight: 980;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow:
    0 14px 32px rgba(0,0,0,.45),
    0 0 18px rgba(255,207,77,.25);
}

/* Vibe pulses: Pokemon = gold, MTG = blue */
.card:hover .tag.pokemon {
  box-shadow: 0 0 0 6px rgba(255,207,77,.10), 0 0 18px rgba(255,207,77,.28);
}
.card:hover .tag.mtg {
  box-shadow: 0 0 0 6px rgba(87,166,255,.10), 0 0 18px rgba(87,166,255,.28);
}

/* Title shimmer on hover */
.card-title {
  position: relative;
}
.card-title::after {
  content:"";
  position:absolute; inset:-2px -6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events:none;
}
.card:hover .card-title::after {
  opacity: 1;
  animation: titleShine 1s ease-in-out both;
}
@keyframes titleShine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* “Mythic” extra flare */
.card-media[data-foil="mythic"] {
  box-shadow: inset 0 0 0 1px rgba(255,77,109,.18);
}
.card:hover .card-media[data-foil="mythic"]::before {
  background:
    linear-gradient(120deg,
      transparent 35%,
      rgba(255,77,109,.14) 45%,
      rgba(255,207,77,.12) 52%,
      transparent 65%);
}

/* Ultra gets brighter foil */
.card:hover .card-media[data-foil="ultra"]::before {
  background:
    linear-gradient(120deg,
      transparent 35%,
      rgba(255,255,255,.10) 45%,
      rgba(255,207,77,.16) 52%,
      rgba(125,255,234,.12) 56%,
      transparent 65%);
}

/* === END NUCLEAR TCG EFFECTS PACK === */


/* === INSANE GOD-TIER EFFECTS === */

/* Screen-space parallax glow */
body::before {
  content:"";
  position:fixed; inset:-20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,207,77,.12), transparent 40%),
    radial-gradient(circle at 70% 10%, rgba(87,166,255,.12), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(125,255,234,.10), transparent 40%);
  pointer-events:none;
  z-index:0;
  animation: ambientShift 18s ease-in-out infinite alternate;
}

@keyframes ambientShift {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-40px) scale(1.05); }
}

/* Holographic edge glow on cards */
.card {
  position: relative;
}
.card::after {
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(255,207,77,.0),
      rgba(255,207,77,.45),
      rgba(87,166,255,.45),
      rgba(125,255,234,.45),
      rgba(255,207,77,.0));
  opacity: 0;
  filter: blur(8px);
  z-index:-1;
}
.card:hover::after {
  opacity: .9;
  animation: holoEdge 2.5s linear infinite;
}

@keyframes holoEdge {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Mythic aura ring */
.card-media[data-foil="mythic"]::after {
  content:"";
  position:absolute; inset:-12%;
  border-radius: 999px;
  border: 1px solid rgba(255,77,109,.25);
  box-shadow:
    0 0 0 14px rgba(255,77,109,.10),
    0 0 60px rgba(255,77,109,.25);
  animation: mythicPulse 2.8s ease-in-out infinite;
}

@keyframes mythicPulse {
  0%,100% { opacity:.4; transform:scale(1); }
  50% { opacity:.9; transform:scale(1.05); }
}

/* Serialized = constant shimmer */
.card-media[data-foil="serialized"]::before {
  opacity:1 !important;
  animation: foilSweep 2s linear infinite;
}

/* Ultra price glow */
.price {
  animation: pricePulse 2.4s ease-in-out infinite;
}

@keyframes pricePulse {
  0%,100% { text-shadow: 0 0 18px rgba(255,207,77,.55); }
  50% { text-shadow: 0 0 32px rgba(255,207,77,.85); }
}

/* Button energy */
.btn.primary {
  position: relative;
  overflow:hidden;
}
.btn.primary::after {
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle, rgba(255,207,77,.25), transparent 55%);
  opacity:0;
}
.btn.primary:hover::after {
  opacity:1;
  animation: btnPulse 1.2s ease-out;
}

@keyframes btnPulse {
  from { transform: scale(.6); opacity:.9; }
  to { transform: scale(1.4); opacity:0; }
}

/* === END INSANE GOD-TIER EFFECTS === */


/* === BREAK REALITY PACK === */

/* 3D tilt support */
.card {
  transform-style: preserve-3d;
}
.card[data-tilt="1"] .card-body,
.card[data-tilt="1"] .card-media {
  transform: translateZ(18px);
}

/* Lightning arcs for Pokémon cards on hover */
.card:hover .tag.pokemon::before {
  content:"";
  position:absolute;
  inset:-10px -14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,207,77,.0), rgba(255,207,77,.18), rgba(255,207,77,.0) 60%),
    radial-gradient(circle at 75% 55%, rgba(255,207,77,.0), rgba(255,207,77,.14), rgba(255,207,77,.0) 62%);
  filter: blur(6px);
  animation: zap 0.7s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes zap {
  from { transform: translateY(0) scale(1); opacity: .55; }
  to { transform: translateY(-2px) scale(1.06); opacity: .95; }
}

/* Pack opening scene */
.pack-stage {
  display:grid;
  grid-template-columns: 1fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 920px) {
  .pack-stage { grid-template-columns: 1fr; }
}

.pack-scene {
  position: relative;
  min-height: 520px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(12,19,43,.65), rgba(10,17,38,.35));
  box-shadow: var(--shadow-pop);
  overflow:hidden;
}
.pack-scene::before {
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,207,77,.14), transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(87,166,255,.14), transparent 48%),
    radial-gradient(circle at 50% 80%, rgba(125,255,234,.12), transparent 40%);
  animation: ambientShift 14s ease-in-out infinite alternate;
}

.pack-card {
  position:absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 78%);
  height: 460px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(260px 220px at 30% 20%, rgba(255,207,77,.20), transparent 60%),
    radial-gradient(260px 220px at 70% 10%, rgba(87,166,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
  cursor:pointer;
  user-select:none;
  outline:none;
  overflow:hidden;
}
.pack-card:focus-visible {
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 0 3px rgba(255,207,77,.35);
}
.pack-face {
  position:absolute; inset:0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content: space-between;
  padding: 26px 18px 22px;
}
.pack-logo img {
  width: 180px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
}
.pack-lines {
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.04) 14px 16px);
  opacity:.7;
  mix-blend-mode: overlay;
}
.pack-glint {
  position:absolute; inset:-40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  animation: foilSweep 2.4s ease-in-out infinite;
  opacity:.9;
}
.pack-text {
  font-weight: 950;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-strong);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}

.pack-burst {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,207,77,.0), rgba(255,207,77,.18), rgba(255,207,77,.0) 55%),
    radial-gradient(circle at 50% 50%, rgba(87,166,255,.0), rgba(87,166,255,.14), rgba(87,166,255,.0) 60%);
  opacity:0;
  transform: scale(.85);
  pointer-events:none;
}

.pack-card.opening {
  animation: packRip .85s ease-in-out both;
}
.pack-card.opening .pack-burst {
  opacity:1;
  animation: burst 0.85s ease-out both;
}
@keyframes packRip {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  55% { transform: translate(-50%, -52%) scale(1.02) rotate(-1deg); }
  100% { transform: translate(-50%, -60%) scale(.92) rotate(2deg); opacity: 0; }
}
@keyframes burst {
  0% { transform: scale(.85); opacity:0; }
  40% { transform: scale(1.15); opacity:1; }
  100% { transform: scale(1.55); opacity:0; }
}

.reveal {
  position:absolute; inset: 0;
  display:grid;
  place-items:center;
  padding: 18px;
}
.reveal-card {
  width: min(860px, 100%);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 920px) {
  .reveal-card { grid-template-columns: 1fr; }
}
.reveal-media {
  position: relative;
  min-height: 340px;
  background:
    radial-gradient(380px 220px at 20% 15%, rgba(87,166,255,.22), transparent 60%),
    radial-gradient(360px 220px at 80% 10%, rgba(255,207,77,.18), transparent 60%),
    linear-gradient(180deg, rgba(12,19,43,.8), rgba(10,17,38,.35));
  border-right: 1px solid rgba(255,255,255,.12);
}
.reveal-foil {
  position:absolute; inset:-35%;
  background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.14) 50%, transparent 62%);
  transform: translateX(-60%) rotate(8deg);
  animation: foilSweep 1.35s ease-in-out infinite;
  opacity: .95;
}
.reveal-body {
  padding: 18px;
}
.reveal-top {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 10px;
}
.reveal-title {
  margin: 0 0 10px;
}
.reveal-actions {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top: 12px;
}

/* === END BREAK REALITY PACK === */


/* === FINAL BOSS MODE === */

/* FINAL BOSS: scanlines + CRT bloom + boss HUD + extreme foil */

:root {
  --crt-line: rgba(255,255,255,.055);
  --crt-vignette: rgba(0,0,0,.55);
  --boss-red: rgba(255,77,109,.85);
  --boss-red2: rgba(255,77,109,.25);
  --boss-cyan: rgba(125,255,234,.65);
}

html.boss-mode body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,77,109,.14), transparent 55%),
    radial-gradient(1000px 620px at 110% 10%, rgba(125,255,234,.12), transparent 55%),
    radial-gradient(1100px 650px at 10% -10%, rgba(87,166,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

html.boss-mode .site-header {
  border-bottom-color: rgba(255,77,109,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

html.boss-mode .card:hover {
  border-color: rgba(255,77,109,.28);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

html.boss-mode .card:hover .card-media::before {
  opacity: 1;
  animation-duration: 0.9s;
}

html.boss-mode .card::after {
  filter: blur(10px);
}

html.boss-mode .price {
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 0 24px rgba(255,207,77,.75),
    0 0 34px rgba(255,77,109,.35);
}

html.boss-mode .hero h1,
html.boss-mode .page-hero h1 {
  text-shadow:
    0 0 34px rgba(255,207,77,.55),
    0 0 56px rgba(87,166,255,.40),
    0 0 64px rgba(255,77,109,.28),
    0 10px 18px rgba(0,0,0,.65);
}

/* Boss HUD */
.boss-hud {
  position: fixed;
  left: 14px;
  right: 14px;
  top: 72px;
  z-index: 95;
  display: none;
  pointer-events: none;
}
html.boss-mode .boss-hud {
  display: block;
}
.boss-bar {
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.boss-bar > span {
  display:block;
  height: 100%;
  width: 100%;
  background:
    linear-gradient(90deg, rgba(255,77,109,.85), rgba(255,207,77,.55), rgba(125,255,234,.55));
  animation: bossHP 4s linear infinite;
  filter: saturate(1.2);
}
@keyframes bossHP {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(10%); }
}
.boss-label {
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 950;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245,248,255,.92);
  text-shadow: 0 2px 0 rgba(0,0,0,.65), 0 0 16px rgba(255,77,109,.25);
}

/* CRT scanlines + vignette overlay */
.crt {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display:none;
}
html.boss-mode .crt {
  display:block;
}
.crt::before {
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 2px,
      var(--crt-line) 3px
    );
  opacity:.25;
  mix-blend-mode: overlay;
}
.crt::after {
  content:"";
  position:absolute; inset:-10%;
  background: radial-gradient(circle at center, transparent 35%, var(--crt-vignette) 85%);
  opacity:.55;
}

#bossCanvas {
  position: fixed;
  inset: 0;
  z-index: 91;
  pointer-events: none;
  display:none;
}
html.boss-mode #bossCanvas {
  display:block;
}

/* Hyper glow cursor hint */
html.boss-mode .icon-btn,
html.boss-mode .cart-btn,
html.boss-mode .btn {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 45px rgba(0,0,0,.25);
}
html.boss-mode .btn.primary {
  box-shadow:
    0 0 0 1px rgba(255,77,109,.20),
    0 14px 35px rgba(255,77,109,.18),
    0 14px 35px rgba(255,207,77,.18);
}

/* === END FINAL BOSS MODE === */


/* === ILLEGAL MODE EFFECTS === */

/* Screen shake */
@keyframes screenShake {
  0% { transform: translate(0,0) rotate(0deg); }
  10% { transform: translate(-2px, 1px) rotate(-0.15deg); }
  20% { transform: translate(-4px, -2px) rotate(0.2deg); }
  30% { transform: translate(4px, 2px) rotate(0.15deg); }
  40% { transform: translate(2px, -3px) rotate(-0.2deg); }
  50% { transform: translate(-2px, 3px) rotate(0.1deg); }
  60% { transform: translate(-4px, 1px) rotate(-0.15deg); }
  70% { transform: translate(4px, -2px) rotate(0.15deg); }
  80% { transform: translate(2px, 2px) rotate(-0.1deg); }
  90% { transform: translate(-2px, -1px) rotate(0.1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
body.shake {
  animation: screenShake .45s ease-in-out;
}

/* Slow-mo moment (affects CSS animations/transitions) */
html.slowmo * {
  transition-duration: 1.8s !important;
}
html.slowmo .card:hover .card-media::before {
  animation-duration: 2.4s !important;
}
html.slowmo .reveal-foil,
html.slowmo .pack-glint {
  animation-duration: 3.2s !important;
}
html.slowmo .price {
  animation-duration: 5.2s !important;
}

/* Rarity tint overlay */
#rarityTint {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}
#rarityTint.on {
  opacity: .85;
}

/* Confetti canvas */
#confettiCanvas {
  position: fixed;
  inset: 0;
  z-index: 121;
  pointer-events: none;
}

/* === END ILLEGAL MODE EFFECTS === */


/* === BEYOND FINAL BOSS === */

/* BEYOND: glitch pulses, chromatic aberration, rift tear, starfield + particle trails */

html.beyond body {
  filter: saturate(1.15) contrast(1.05);
}

@keyframes glitchSkew {
  0%   { transform: translate(0,0) skewX(0deg); }
  12%  { transform: translate(-2px,1px) skewX(-2deg); }
  18%  { transform: translate(3px,-2px) skewX(2.5deg); }
  24%  { transform: translate(-3px,2px) skewX(-2.2deg); }
  30%  { transform: translate(2px,0px) skewX(1.4deg); }
  100% { transform: translate(0,0) skewX(0deg); }
}

@keyframes chromaFlash {
  0% { filter: drop-shadow(-2px 0 rgba(87,166,255,.35)) drop-shadow(2px 0 rgba(255,77,109,.28)); }
  50% { filter: drop-shadow(-4px 0 rgba(125,255,234,.38)) drop-shadow(4px 0 rgba(255,207,77,.32)); }
  100% { filter: drop-shadow(-2px 0 rgba(87,166,255,.35)) drop-shadow(2px 0 rgba(255,77,109,.28)); }
}

html.beyond .hero h1,
html.beyond .page-hero h1 {
  animation: chromaFlash 2.2s ease-in-out infinite;
}

html.beyond .site-header,
html.beyond main {
  animation: glitchSkew 7.5s steps(2,end) infinite;
}

#starfieldCanvas, #trailCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 89; /* under CRT(90) but above background */
  display:none;
}
html.boss-mode #starfieldCanvas,
html.boss-mode #trailCanvas {
  display:block;
}

#rift {
  position: fixed;
  inset: 0;
  z-index: 119;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
#rift.on {
  opacity: 1;
  animation: riftOpen 1.1s ease-out both;
}
@keyframes riftOpen {
  0% { opacity: 0; transform: scale(0.98); filter: blur(10px); }
  25% { opacity: 1; transform: scale(1); filter: blur(0px); }
  100% { opacity: 0; transform: scale(1.02); filter: blur(12px); }
}
#rift::before {
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 40% 45%, rgba(255,207,77,.0), rgba(255,207,77,.22), rgba(255,207,77,.0) 55%),
    radial-gradient(circle at 60% 55%, rgba(255,77,109,.0), rgba(255,77,109,.18), rgba(255,77,109,.0) 58%),
    conic-gradient(from 180deg at 50% 50%,
      rgba(87,166,255,.0),
      rgba(87,166,255,.22),
      rgba(125,255,234,.18),
      rgba(255,207,77,.20),
      rgba(255,77,109,.18),
      rgba(87,166,255,.0));
  transform: rotate(0deg);
  animation: riftSpin 1.1s linear infinite;
}
@keyframes riftSpin {
  to { transform: rotate(360deg); }
}

html.beyond .card:hover {
  transform: translateY(-8px) scale(1.02) rotateX(6deg) rotateY(-6deg);
}

/* === END BEYOND FINAL BOSS === */


/* === EVERYTHING MODE PACK === */

/* EVERYTHING: camera zoom + warp + hit banner + achievement toast */

@keyframes camZoomIn {
  0% { transform: scale(1); }
  100% { transform: scale(1.03); }
}
@keyframes camZoomOut {
  0% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

html.cam-zoom body {
  animation: camZoomIn .9s ease-out both;
}
html.cam-zoom-out body {
  animation: camZoomOut .65s ease-out both;
}

@keyframes warpPulse {
  0% { filter: url(#none); }
  25% { filter: contrast(1.15) saturate(1.25); }
  50% { filter: contrast(1.25) saturate(1.35); }
  100% { filter: contrast(1.05) saturate(1.10); }
}

html.warp main {
  animation: warpPulse .75s ease-out both;
}

/* Big hit banner */
#hitBanner {
  position: fixed;
  left: 50%;
  top: 16%;
  transform: translateX(-50%) translateY(-10px) scale(.96);
  z-index: 140;
  pointer-events:none;
  opacity: 0;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  text-align:center;
  min-width: min(620px, calc(100vw - 28px));
}
#hitBanner.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s ease;
}
#hitBanner .top {
  font-weight: 980;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(255,207,77,1), rgba(125,255,234,1), rgba(255,77,109,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255,207,77,.25);
}
#hitBanner .name {
  margin-top: 6px;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 950;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(245,248,255,.96);
}
#hitBanner .sub {
  margin-top: 6px;
  color: rgba(198,209,240,.95);
  letter-spacing: .6px;
}

/* Achievement toast */
#toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 141;
  pointer-events:none;
  width: min(360px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(10px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  padding: 12px 12px;
}
#toast.on {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
#toast .row {
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
#toast .icon {
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,207,77,.28);
  background: linear-gradient(180deg, rgba(255,207,77,.18), rgba(87,166,255,.08));
  box-shadow: 0 0 22px rgba(255,207,77,.18);
  display:grid;
  place-items:center;
  font-size: 18px;
}
#toast .t {
  font-weight: 950;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
#toast .d {
  margin-top: 2px;
  color: rgba(198,209,240,.95);
  letter-spacing: .35px;
}

/* Performance mode: reduce heavy effects */
html.perf #bossCanvas,
html.perf #trailCanvas,
html.perf #starfieldCanvas,
html.perf #confettiCanvas {
  display:none !important;
}
html.perf .card:hover::after,
html.perf .card:hover .card-media::before,
html.perf .card:hover .card-title::after {
  animation: none !important;
  opacity: .35 !important;
}
html.perf body::before {
  animation:none !important;
}

/* === END EVERYTHING MODE PACK === */


/* === GLOBAL REALITY COLLAPSE === */

/* EVERYTHING applies site-wide now */

/* Ambient energy pulses everywhere */
@keyframes ambientPulse {
  0% { filter: saturate(1.05) brightness(1); }
  50% { filter: saturate(1.25) brightness(1.08); }
  100% { filter: saturate(1.05) brightness(1); }
}
html:not(.perf) main {
  animation: ambientPulse 12s ease-in-out infinite;
}

/* Global parallax glow */
main::before {
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,207,77,.18), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(87,166,255,.16), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(255,77,109,.14), transparent 45%);
  pointer-events:none;
  z-index:0;
  animation: ambientShift 18s ease-in-out infinite alternate;
}

/* ALL cards: breathing glow */
.card {
  animation: cardBreathe 6s ease-in-out infinite;
}
@keyframes cardBreathe {
  0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 0 28px rgba(255,207,77,.18); }
}

/* Navigation reacts to cursor */
.nav a:hover {
  text-shadow:
    0 0 12px rgba(255,207,77,.45),
    0 0 22px rgba(87,166,255,.35);
}

/* Buttons globally charged */
.btn {
  position: relative;
}
.btn::after {
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle, rgba(255,207,77,.25), transparent 55%);
  opacity:0;
  transition: opacity .25s ease;
}
.btn:hover::after {
  opacity:1;
}

/* Headers = legendary presence everywhere */
h1, h2, h3 {
  text-shadow:
    0 0 18px rgba(255,207,77,.35),
    0 0 28px rgba(87,166,255,.25);
}

/* Sections lift on scroll */
.section {
  transform: translateZ(0);
  transition: transform .4s ease;
}
.section:hover {
  transform: translateY(-6px);
}

/* Footer mythic glow */
.site-footer {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 -20px 60px rgba(255,207,77,.18);
}

/* === END GLOBAL REALITY COLLAPSE === */


/* === TRANSCEND SYSTEM === */

/* TRANSCEND: adaptive intensity, aura grading, corruption, ARG reveal */

:root {
  --I: 0; /* 0..1 intensity */
  --aura: rgba(255,207,77,.0);
  --aura2: rgba(87,166,255,.0);
  --aura3: rgba(255,77,109,.0);
}

/* Adaptive intensity: scales global effects */
html:not(.perf) {
  --glowBoost: calc(.25 + (var(--I) * .95));
  --blurBoost: calc(6px + (var(--I) * 18px));
  --liftBoost: calc(4px + (var(--I) * 10px));
}

html:not(.perf) .card {
  animation-duration: calc(6s - (var(--I) * 2.5s));
}
html:not(.perf) .card:hover {
  transform: translateY(calc(-6px - var(--I) * 6px)) scale(calc(1.01 + var(--I) * .01));
}

html:not(.perf) .nav a:hover {
  text-shadow:
    0 0 calc(10px + var(--I) * 18px) rgba(255,207,77, calc(.22 + var(--I)*.35)),
    0 0 calc(16px + var(--I) * 26px) rgba(87,166,255, calc(.18 + var(--I)*.35));
}

/* Aura grading layer (changes based on hovered rarity / state) */
#auraLayer {
  position: fixed;
  inset: 0;
  z-index: 88;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  mix-blend-mode: screen;
}
html:not(.perf) #auraLayer.on {
  opacity: calc(.22 + var(--I) * .55);
}
#auraLayer::before {
  content:"";
  position:absolute; inset:-25%;
  background:
    radial-gradient(circle at 30% 25%, var(--aura), transparent 42%),
    radial-gradient(circle at 75% 18%, var(--aura2), transparent 48%),
    radial-gradient(circle at 50% 80%, var(--aura3), transparent 46%);
  filter: blur(var(--blurBoost));
  transform: translateY(0);
  animation: ambientShift 10s ease-in-out infinite alternate;
}

/* Corruption mode after serialized pull */
@keyframes corruptFlicker {
  0% { opacity:.0; }
  12% { opacity:.55; }
  20% { opacity:.15; }
  35% { opacity:.7; }
  50% { opacity:.25; }
  65% { opacity:.8; }
  78% { opacity:.22; }
  100% { opacity:.0; }
}
#corrupt {
  position: fixed;
  inset: 0;
  z-index: 142;
  pointer-events:none;
  opacity: 0;
  mix-blend-mode: overlay;
}
#corrupt::before {
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 2px, rgba(255,77,109,.08) 3px 3px),
    radial-gradient(circle at 50% 40%, rgba(255,77,109,.18), transparent 55%),
    conic-gradient(from 90deg at 50% 50%, rgba(255,207,77,.0), rgba(255,207,77,.18), rgba(87,166,255,.10), rgba(255,77,109,.14), rgba(255,207,77,.0));
  filter: blur(1px);
}
html.corrupt #corrupt {
  opacity: 1;
  animation: corruptFlicker 1.1s steps(2,end) infinite;
}
html.corrupt .site-header,
html.corrupt main {
  animation: glitchSkew 1.9s steps(2,end) infinite;
}
html.corrupt .card:hover .card-media::before {
  animation-duration: .55s !important;
}

/* Intensity HUD */
#intensityHUD {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  pointer-events: none;
  opacity: .0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
html:not(.perf) #intensityHUD.on {
  opacity: .95;
  transform: translateY(0);
}
#intensityHUD .hud {
  width: 260px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  padding: 10px 12px;
}
#intensityHUD .t {
  font-weight: 980;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(245,248,255,.92);
  display:flex;
  justify-content: space-between;
}
#intensityHUD .bar {
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
#intensityHUD .bar > span {
  display:block;
  height: 100%;
  width: calc(8% + var(--I) * 92%);
  background: linear-gradient(90deg, rgba(87,166,255,.8), rgba(255,207,77,.75), rgba(255,77,109,.7));
  box-shadow: 0 0 22px rgba(255,207,77,.18);
}

/* ARG terminal */
#argModal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
#argModal.on {
  display:grid;
}
#argModal .box {
  width: min(760px, calc(100vw - 28px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  box-shadow: 0 60px 140px rgba(0,0,0,.72);
  overflow:hidden;
}
#argModal .head {
  padding: 12px 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
#argModal .head .k {
  font-weight: 980;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(125,255,234,1), rgba(255,207,77,1), rgba(87,166,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
#argModal .term {
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(234,240,255,.95);
  letter-spacing: .2px;
  line-height: 1.55;
}
#argModal .term .dim {
  color: rgba(198,209,240,.75);
}

/* === END TRANSCEND SYSTEM === */


/* Pack CTA */
.pack-cta{
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .92rem;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 760px){
  .pack-cta{ padding: 10px 12px; font-size: .9rem; }
}
.active-pack{
  box-shadow:
    0 0 0 1px rgba(255,207,77,.55),
    0 18px 45px rgba(255,207,77,.35),
    0 18px 45px rgba(255,77,109,.18);
}