/* ── TOKENS ─────────────────────────────────────────── */
:root{
  --bg:#0D0904; --bg-card:#17110A; --bg-card2:#211A10;
  --border:rgba(200,140,55,.13); --border-hot:rgba(232,100,30,.5); --border-gold:rgba(220,170,60,.4);
  --orange:#E8651A; --orange-l:#F08030;
  --gold:#F5A623;   --gold-l:#FFD166;
  --green:#4CB944;
  --cream:#F0E0BC; --cream-d:#B09060; --dim:#9A7F55; /* WCAG AA: ~5.2:1 on --bg, ~4.9:1 on --bg-card (was #5A4528 @ ~2.2:1) */
  --glow-o:0 0 22px rgba(232,101,26,.45),0 0 60px rgba(232,101,26,.15);
  --glow-g:0 0 22px rgba(245,166,35,.4),0 0 60px rgba(245,166,35,.12);
  --r:14px; --ease:220ms cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--cream);font-family:'Epilogue','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
#site-announcement{z-index:9999;width:100%}
img{display:block;max-width:100%}
/* Twemoji emoji images — inline, sized to match surrounding text */
img.emoji{display:inline;width:1.1em;height:1.1em;vertical-align:-0.15em;margin:0 .05em;}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body::after{content:'';position:fixed;inset:0;z-index:9998;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px}

/* ── NAV BAR ────────────────────────────────────────── */
#topnav{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  z-index:2000;width:calc(100% - 28px);max-width:1480px;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 24px;
  background:rgba(13,9,4,.88);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:100px;
  transition:border-color var(--ease);
}
.nav-logo{
  font-family:'Anton',sans-serif;font-size:1.35rem;
  letter-spacing:.05em;color:var(--gold);text-shadow:var(--glow-g);
  display:flex;align-items:center;gap:8px;cursor:pointer;
}
.nav-logo-img{
  width:32px;height:32px;border-radius:50%;
  object-fit:cover;
  border:1.5px solid rgba(245,166,35,.5);
  box-shadow:0 0 8px rgba(245,166,35,.3);
}
.nav-center{
  display:flex;gap:3px;list-style:none;
}
.nav-center a{
  padding:7px 11px;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.03em;
  color:var(--cream-d);transition:color var(--ease),background var(--ease);
  white-space:nowrap;
}
.nav-center a:hover,.nav-center a.active{color:var(--gold)}
.nav-center a.active{background:rgba(245,166,35,.08)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-cta{
  padding:8px 20px;border-radius:100px;
  background:var(--green);color:#0a1f0a;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;
  transition:box-shadow var(--ease),transform var(--ease);
  box-shadow:0 0 14px rgba(76,185,68,.35);
}
.nav-cta:hover{box-shadow:0 0 28px rgba(76,185,68,.7);transform:translateY(-1px)}
.burger{
  display:flex;flex-direction:column;gap:5px;padding:6px;
  cursor:pointer;
}
.burger span{
  display:block;width:22px;height:2px;background:var(--cream);
  border-radius:2px;transition:transform .3s ease,opacity .3s ease;
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── FULL-SCREEN NAV OVERLAY ────────────────────────── */
#nav-overlay{
  position:fixed;inset:0;z-index:1900;
  background:rgba(8,5,2,.97);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:90px 60px 28px;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#nav-overlay.open{opacity:1;pointer-events:all}
.overlay-nav-list{list-style:none;display:flex;flex-direction:column;gap:0}
.overlay-nav-list li{
  opacity:0;transform:translateX(-28px);
  transition:opacity .4s ease,transform .4s ease;
}
#nav-overlay.open .overlay-nav-list li:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
#nav-overlay.open .overlay-nav-list li:nth-child(2){opacity:1;transform:none;transition-delay:.10s}
#nav-overlay.open .overlay-nav-list li:nth-child(3){opacity:1;transform:none;transition-delay:.15s}
#nav-overlay.open .overlay-nav-list li:nth-child(4){opacity:1;transform:none;transition-delay:.20s}
#nav-overlay.open .overlay-nav-list li:nth-child(5){opacity:1;transform:none;transition-delay:.25s}
#nav-overlay.open .overlay-nav-list li:nth-child(6){opacity:1;transform:none;transition-delay:.30s}
#nav-overlay.open .overlay-nav-list li:nth-child(7){opacity:1;transform:none;transition-delay:.35s}
#nav-overlay.open .overlay-nav-list li:nth-child(8){opacity:1;transform:none;transition-delay:.40s}
#nav-overlay.open .overlay-nav-list li:nth-child(9){opacity:1;transform:none;transition-delay:.45s}
.overlay-nav-link{
  display:flex;align-items:center;gap:24px;
  padding:8px 0;border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:padding-left var(--ease);
}
.overlay-nav-link:hover{padding-left:10px}
.overlay-name{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.6rem,2.8vw,2.4rem);
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--cream);
  transition:color var(--ease);
  line-height:1;
}
.overlay-nav-link:hover .overlay-name{color:var(--gold)}
.overlay-nav-link.active-page .overlay-name{color:var(--orange)}
.overlay-soon{
  margin-left:auto;
  padding:4px 12px;border-radius:100px;
  background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange);
  white-space:nowrap;
}
.overlay-soon.minting{
  background:rgba(245,166,35,.15);border-color:rgba(245,166,35,.5);
  color:var(--gold-l);
}
.overlay-bottom{
  margin-top:20px;
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transition:opacity .4s ease .35s;
  flex-shrink:0;
}
#nav-overlay.open .overlay-bottom{opacity:1}
.overlay-socials{display:flex;gap:10px}
.o-social{
  width:36px;height:36px;border-radius:8px;
  border:1px solid var(--border);background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color var(--ease);
}
.o-social:hover{border-color:var(--border-gold)}
.overlay-tagline{
  font-family:'Share Tech Mono',monospace;
  font-size:.7rem;color:var(--dim);letter-spacing:.06em;
}

/* ── PAGE SYSTEM ────────────────────────────────────── */
.page{
  display:none;opacity:0;
  transition:opacity .28s cubic-bezier(.4,0,.2,1);
  min-height:100vh;  /* prevents pages from overlapping — each fills viewport */
  padding-top:80px;
  will-change:opacity;
}
.page.active{display:block}
.page.visible{opacity:1}
#footer{margin-top:auto} /* pushes footer to bottom of body flex column */

/* ── SHARED SECTION STYLES ──────────────────────────── */
.sec{padding:80px 24px}
.wrap{max-width:1200px;margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.eyebrow::before{content:'';display:block;width:20px;height:2px;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.sec-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;
}
.sec-sub{font-size:.98rem;color:var(--cream-d);max-width:540px;line-height:1.72;margin-bottom:40px}
.t-o{color:var(--orange);text-shadow:var(--glow-o)}
.t-g{color:var(--gold);text-shadow:var(--glow-g)}
.t-p{color:#C07AFF;text-shadow:0 0 24px rgba(192,122,255,.35)}
.btn-p{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:100px;
  background:var(--orange);color:#fff;
  font-weight:700;font-size:.88rem;letter-spacing:.04em;
  cursor:pointer;transition:box-shadow var(--ease),transform var(--ease);
  animation:vault-pulse 3s ease-in-out infinite;
  position:relative;
}
.btn-p:hover{box-shadow:0 0 32px rgba(232,101,26,.8),0 0 64px rgba(232,101,26,.4);transform:translateY(-2px);animation:none}
@keyframes vault-pulse{
  0%,100%{box-shadow:0 0 10px rgba(232,101,26,.3),inset 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 28px rgba(232,101,26,.65),0 0 52px rgba(232,101,26,.2),inset 0 0 12px rgba(255,180,80,.12)}
}
.btn-o{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:100px;
  border:1px solid var(--border-gold);color:var(--gold);
  font-weight:700;font-size:.88rem;letter-spacing:.04em;
  cursor:pointer;transition:background var(--ease),transform var(--ease);
}
.btn-o:hover{background:rgba(245,166,35,.08);transform:translateY(-2px)}
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.fade-in.vis{opacity:1;transform:none}

/* ticker removed */

/* ════════════════════════════════════════════════════
   PAGE 1 — HOME / LORE
════════════════════════════════════════════════════ */
.hero{
  min-height:calc(100vh - 80px);
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px 60px;position:relative;overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(200,120,40,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(200,120,40,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent);
}
.hero-gl{position:absolute;top:15%;left:5%;width:500px;height:500px;background:radial-gradient(circle,rgba(232,101,26,.18) 0%,transparent 70%);filter:blur(50px);pointer-events:none}
.hero-gr{position:absolute;bottom:10%;right:0;width:420px;height:420px;background:radial-gradient(circle,rgba(245,166,35,.14) 0%,transparent 70%);filter:blur(50px);pointer-events:none}
.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  max-width:1100px;width:100%;
}
.hero-label{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border:1px solid var(--border-gold);border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.hero-dot{width:7px;height:7px;background:var(--gold);border-radius:50%;box-shadow:0 0 8px var(--gold);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(3rem,8vw,6rem);
  line-height:.95;letter-spacing:.02em;text-transform:uppercase;
}
.flicker{animation:flicker 6s ease-in-out infinite}
@keyframes flicker{0%,94%,100%{opacity:1}95%{opacity:.65}97%{opacity:.85}99%{opacity:.7}}
.hero-desc{margin-top:18px;font-size:1rem;color:var(--cream-d);max-width:420px;line-height:1.72}
.hero-stats{display:flex;gap:32px;margin-top:32px}
.stat-v{font-family:'Anton',sans-serif;font-size:2rem;line-height:1;color:var(--cream)}
.stat-l{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-d);margin-top:3px}
.hero-btns{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

/* character frame */
.char-frame{
  position:relative;width:370px;height:460px;
  border-radius:24px;border:1px solid var(--border-gold);
  background:linear-gradient(160deg,var(--bg-card),var(--bg-card2));
  overflow:hidden;
  box-shadow:var(--glow-o),inset 0 1px 0 rgba(255,220,120,.06);
}
.char-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--orange),transparent)}
.char-frame img{width:100%;height:100%;object-fit:cover;display:block}
.fc{position:absolute;width:16px;height:16px;border-color:var(--gold);border-style:solid;opacity:.5}
.fc.tl{top:12px;left:12px;border-width:2px 0 0 2px}
.fc.tr{top:12px;right:12px;border-width:2px 2px 0 0}
.fc.bl{bottom:12px;left:12px;border-width:0 0 2px 2px}
.fc.br{bottom:12px;right:12px;border-width:0 2px 2px 0}

/* universe cards */
.universe-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:0;
}
/* Immersive overlay card — text lives on top of the image */
.uni-card{
  position:relative;border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;cursor:pointer;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  display:block;
}
.uni-card:hover{transform:translateY(-6px);box-shadow:0 24px 64px rgba(0,0,0,.65),0 0 0 1px rgba(232,101,26,.35);border-color:rgba(232,101,26,.4)}
.uni-card-img{width:100%;padding-bottom:100%;position:relative;overflow:hidden}
.uni-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.08) 100%);z-index:1;pointer-events:none}
.uni-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.uni-card:hover .uni-card-img img{transform:scale(1.07)}
.uni-card-body{position:absolute;bottom:0;left:0;right:0;padding:14px 16px 18px;z-index:2;display:flex;flex-direction:column;gap:3px}
.uni-card-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.uni-phase{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:100px;
  background:rgba(76,185,68,.2);border:1px solid rgba(76,185,68,.4);
  font-size:.52rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#5edc56;margin-bottom:5px;width:fit-content;
}
.uni-soon{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:100px;
  background:rgba(232,101,26,.2);border:1px solid rgba(232,101,26,.4);
  font-size:.52rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);margin-bottom:5px;width:fit-content;
}
.uni-name{
  font-family:'Anton',sans-serif;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.05em;
  color:#fff;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.uni-desc{font-size:.7rem;color:rgba(240,224,188,.7);line-height:1.4;margin-top:3px}
.uni-arrow{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);align-self:flex-end;
  transition:border-color var(--ease),color var(--ease),transform var(--ease);
}
.uni-card:hover .uni-arrow{border-color:var(--orange);color:var(--orange);transform:rotate(45deg)}

/* ── THE FIREPIT: mini-games ──────────────────────────── */
.firepit-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:0;
}

/* ── Game card skeleton loader ───────────────────────────── */
.fp-cards-loading{
  display:contents; /* lets children sit directly in the grid */
}
.fp-skel-card{
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;
  animation:fp-skel-shimmer 1.4s infinite;
  min-height:260px;
  border:1px solid rgba(255,255,255,.07);
}
@keyframes fp-skel-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── Arcade Controls (search + filter + sort) ────────────── */
.fp-arcade-controls{
  display:flex;flex-direction:column;gap:12px;
  margin:20px 0 18px;
}

/* Search */
.fp-search-wrap{
  position:relative;display:flex;align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  transition:border-color .2s,box-shadow .2s;
}
.fp-search-wrap:focus-within{
  border-color:rgba(232,101,26,.5);
  box-shadow:0 0 0 3px rgba(232,101,26,.08);
}
.fp-search-icon{
  position:absolute;left:14px;color:var(--dim);pointer-events:none;flex-shrink:0;
}
.fp-search-input{
  width:100%;background:transparent;border:none;outline:none;
  padding:11px 40px 11px 38px;
  font-size:.875rem;color:var(--cream);
  font-family:inherit;
}
.fp-search-input::placeholder{color:var(--dim)}
.fp-search-clear{
  position:absolute;right:12px;
  background:rgba(255,255,255,.08);border:none;
  color:var(--dim);cursor:pointer;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;transition:background .15s,color .15s;
  padding:0;line-height:1;
}
.fp-search-clear:hover{background:rgba(232,101,26,.2);color:var(--orange)}

/* Filter pills */
.fp-filter-pills{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.fp-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 15px;border-radius:100px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-family:'Share Tech Mono',monospace;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--dim);cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s;
  white-space:nowrap;
}
.fp-pill:hover{
  border-color:rgba(232,101,26,.4);
  color:var(--cream);
  background:rgba(232,101,26,.08);
}
.fp-pill.fp-pill-active{
  background:rgba(232,101,26,.15);
  border-color:rgba(232,101,26,.55);
  color:var(--orange);
  box-shadow:0 0 12px rgba(232,101,26,.15),inset 0 1px 0 rgba(255,255,255,.06);
}
.fp-pill-count{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,101,26,.25);color:var(--orange);
  font-size:.6rem;font-weight:800;
  min-width:18px;height:18px;border-radius:100px;padding:0 5px;
  letter-spacing:0;
}

/* Sort + result count row */
.fp-controls-right{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.fp-result-count{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-family:'Share Tech Mono',monospace;
  white-space:nowrap;
}
.fp-sort-wrap{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;padding:7px 12px;
  color:var(--dim);
  transition:border-color .18s;
}
.fp-sort-wrap:focus-within{border-color:rgba(232,101,26,.4)}
.fp-sort-select{
  background:transparent;border:none;outline:none;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--cream);cursor:pointer;
  font-family:'Share Tech Mono',monospace;
  appearance:none;-webkit-appearance:none;
  padding-right:4px;
}
.fp-sort-select option{background:var(--bg-card);color:var(--cream)}

/* Card filter animation */
.game-card{transition:border-color var(--ease),box-shadow var(--ease),opacity .25s ease,transform .25s ease,filter .25s ease}
/* fp-hidden: search no-match → fully removed from flow */
.game-card.fp-hidden{display:none}
/* fp-card-dim: category non-match → still visible, de-emphasised */
.game-card.fp-card-dim{opacity:.38;filter:saturate(.2);pointer-events:none}
.game-card.fp-card-dim:hover{opacity:.38}

/* Grid divider (shown between matched + dimmed when category pill is active) */
.fp-grid-divider{
  grid-column:1/-1;
  display:flex;align-items:center;gap:12px;
  padding:8px 0 4px;
}
.fp-grid-divider[hidden]{display:none}
.fp-grid-divider span{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;opacity:.55;
}
.fp-grid-divider::before,.fp-grid-divider::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.07);
}

/* Empty state */
.fp-empty-state{
  text-align:center;padding:60px 20px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:20px;margin:8px 0 20px;
  background:rgba(255,255,255,.02);
}
.fp-empty-flame{font-size:2.8rem;margin-bottom:14px;opacity:.4;filter:grayscale(1)}
.fp-empty-title{
  font-family:'Anton',sans-serif;font-size:1.1rem;
  letter-spacing:.06em;color:var(--cream-d);margin-bottom:8px;
}
.fp-empty-sub{font-size:.82rem;color:var(--dim);max-width:280px;margin:0 auto 20px}
.fp-empty-reset{
  padding:9px 22px;border-radius:100px;
  background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);
  color:var(--orange);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.fp-empty-reset:hover{background:rgba(232,101,26,.22);border-color:rgba(232,101,26,.6)}

/* ── Game card mobile adjustments ─────────────────────────── */
@media(max-width:768px){
  /* Slightly smaller icon on 2-col grid */
  .game-card-icon{aspect-ratio:3/2}
  .game-card-body{padding:12px 14px 16px;gap:6px}
  .uni-name{font-size:1.1rem;margin-bottom:4px}
  .uni-phase{font-size:.55rem;padding:2px 8px}
  /* Clamp description to 2 lines on narrow cards */
  .uni-desc{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:.74rem;
  }
  .game-tag-row{gap:4px;margin-top:4px}
  .game-tag{font-size:.6rem;padding:2px 8px}
  .fp-play-btn{padding:8px 14px;font-size:.72rem}
}
@media(max-width:480px){
  .game-card-body{padding:10px 12px 14px}
  .uni-name{font-size:1rem}
  /* Hide arrow on very narrow cards — space is too tight */
  .game-card .uni-arrow{display:none}
  /* Limit to 1 visible tag to keep cards compact */
  .game-tag:not(:first-child){display:none}
}

/* Mobile adjustments */
@media(max-width:600px){
  .fp-arcade-controls{gap:10px;margin:14px 0 14px}
  /* Horizontal-scroll pill row — prevents wrapping on narrow screens */
  .fp-filter-pills{
    flex-wrap:nowrap;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
  }
  .fp-filter-pills::-webkit-scrollbar{display:none}
  .fp-pill{padding:6px 12px;font-size:.65rem;flex-shrink:0}
  .fp-controls-right{flex-direction:row;gap:8px}
  .fp-sort-select{font-size:.66rem}
  .fp-result-count{font-size:.65rem}
}

/* ── Arcade header (title + community play count) ─────────── */
.fp-arcade-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:4px;
}
.fp-arcade-stat{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;border-radius:14px;
  background:rgba(232,101,26,.07);border:1px solid rgba(232,101,26,.18);
  flex-shrink:0;
}
.fp-arcade-stat-icon{font-size:1.3rem;line-height:1}
.fp-arcade-stat-num{
  font-family:'Anton',sans-serif;font-size:1.25rem;
  color:var(--orange);letter-spacing:.02em;line-height:1;
}
.fp-arcade-stat-lbl{
  font-size:.58rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:2px;
}

/* ── Section label (Trending / New — shown dynamically) ────── */
.fp-section-label{
  display:flex;align-items:center;gap:8px;
  font-family:'Anton',sans-serif;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-d);margin:22px 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}
.fp-section-icon{font-size:.9rem}

/* ── Per-card badges (HOT / NEW — top-left of image) ──────── */
.fp-card-badge{
  position:absolute;top:10px;left:10px;
  font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
  pointer-events:none;z-index:3;white-space:nowrap;
}
.fp-badge-hot{
  background:rgba(30,14,4,.8);border:1px solid rgba(232,101,26,.7);
  color:#fb923c;
  box-shadow:0 0 10px rgba(232,101,26,.3),inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:0 0 8px rgba(251,146,60,.5);
}
.fp-badge-new{
  background:rgba(4,14,30,.8);border:1px solid rgba(96,165,250,.6);
  color:#93c5fd;
  box-shadow:0 0 10px rgba(96,165,250,.2),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── Play count tag ────────────────────────────────────────── */
.fp-play-count{
  color:var(--dim);border-color:rgba(255,255,255,.06);
}

/* ── Personal best badge on game card ─────────────────────── */
.fp-personal-best{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:100px;
  background:rgba(255,180,0,.1);border:1px solid rgba(255,180,0,.3);
  font-size:.63rem;font-weight:700;letter-spacing:.02em;color:#ffb400;
  white-space:nowrap;
}

/* ── Game streak badge on Firepit profile ─────────────────── */
.fp-game-streak{
  font-family:'Share Tech Mono',monospace;
  font-size:.72rem;font-weight:700;color:var(--orange);
  background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);
  padding:3px 10px;border-radius:100px;white-space:nowrap;
  margin-right:8px;
}

/* ── Hot card — glowing border when this game is #1 this week  */
.game-card.fp-card-hot{
  border-color:rgba(232,101,26,.55);
  box-shadow:0 0 0 1px rgba(232,101,26,.12),0 0 28px rgba(232,101,26,.12);
}

.game-card{
  position:relative;border-radius:20px;
  border:1px solid var(--border);background:var(--bg-card);
  overflow:hidden;cursor:pointer;
  /* no transform in transition base — prevents mobile sticky-hover */
  transition:border-color var(--ease),box-shadow var(--ease);
  display:flex;flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}
/* hover only on true pointer devices — prevents stuck state on touch */
@media(hover:hover) and (pointer:fine){
  .game-card{transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
  .game-card:hover{border-color:var(--border-hot);transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.5),var(--glow-o)}
  .game-card:hover .uni-arrow{border-color:var(--orange);color:var(--orange);transform:rotate(45deg)}
  .game-card:hover .game-card-icon{transform:scale(1.06)}
}
/* touch tap feedback — brief scale pulse, resets instantly */
.game-card:active{transform:scale(0.975);transition:transform .08s ease;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.game-card-live{border-color:rgba(232,101,26,.35);box-shadow:0 0 0 1px rgba(232,101,26,.08)}
.game-card-icon{
  width:100%;aspect-ratio:4/3;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;line-height:1;
  transition:transform .4s ease;
}
/* ── Free-play badge (shows on all cards when daily free play is available) ── */
/* Free-play badge — hidden, button is the only signal */
.fp-free-badge{ display:none !important; }

/* Free play button — solid, glowing, unmissable */
.game-card.fp-has-free .fp-play-btn{
  background:linear-gradient(135deg,#1db954,#14963f);
  border-color:transparent;
  color:#fff;
  font-weight:800;
  box-shadow:0 0 18px rgba(30,185,84,.35), 0 4px 14px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.15);
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}
@media(hover:hover) and (pointer:fine){
  .game-card.fp-has-free:hover .fp-play-btn{
    background:linear-gradient(135deg,#22d460,#17b348);
    box-shadow:0 0 28px rgba(30,185,84,.55), 0 6px 20px rgba(0,0,0,.4),
               inset 0 1px 0 rgba(255,255,255,.18);
    transform:translateY(-1px);
  }
}
.game-icon-dodge{background:radial-gradient(circle at 30% 28%,rgba(232,101,26,.35),transparent 60%),linear-gradient(135deg,#2a1608,#17110A)}
.game-icon-dodge.has-cover{background-image:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(10,7,4,.55) 100%),url("game-covers/FlameDodge.jpg?v=762d69c4");background-size:cover;background-position:top center}
.game-icon-dodge.has-cover .fp-icon-emoji{display:none}
.game-icon-rush{background:radial-gradient(circle at 30% 28%,rgba(245,166,35,.35),transparent 60%),linear-gradient(135deg,#2a200a,#17110A)}
.game-icon-rush.has-cover{background-image:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(10,7,4,.55) 100%),url("game-covers/ember-rush.jpg?v=327e2356");background-size:cover;background-position:top center}
.game-icon-rush.has-cover .fp-icon-emoji{display:none}
.game-icon-sprint{background:radial-gradient(circle at 30% 28%,rgba(232,101,26,.35),transparent 60%),linear-gradient(135deg,#2a0a00,#17110A)}
.game-icon-sprint.has-cover{background-image:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(10,4,0,.55) 100%),url("game-covers/Lavarun.jpg?v=29037d72");background-size:cover;background-position:top center}
.game-icon-sprint.has-cover .fp-icon-emoji{display:none}
.game-card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.game-card-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.game-card-row .uni-soon{margin-bottom:4px}
.game-tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.game-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-size:.65rem;font-weight:600;letter-spacing:.02em;color:var(--cream-d);
}

/* ── Coming-soon game cards ────────────────────────────────── */
.game-card-soon{
  cursor:default;opacity:.92;
  border-color:var(--border);
}
.game-card-soon:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 36px rgba(0,0,0,.4);
}
.fp-soon-btn{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:100px;width:100%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--dim);font-weight:700;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;cursor:not-allowed;user-select:none;
}

/* Card image gradients — each game gets its own atmosphere */
.game-icon-flip{
  background:
    radial-gradient(ellipse at 50% 110%,rgba(232,101,26,.6) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 0%,rgba(30,80,160,.4) 0%,transparent 60%),
    linear-gradient(180deg,#0a1628 0%,#1a0a04 100%);
}
.game-icon-flip.has-cover{background-image:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(10,7,4,.55) 100%),url("game-covers/FritoFlip.jpg?v=ec2b630c");background-size:cover;background-position:top center}
.game-icon-flip.has-cover .fp-icon-emoji{display:none}
.game-icon-breaker{
  background:
    radial-gradient(ellipse at 50% 100%,rgba(200,30,30,.5) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(180,60,0,.35) 0%,transparent 50%),
    linear-gradient(180deg,#120008 0%,#1a0404 100%);
}
.game-icon-breaker.has-cover{background-image:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(10,0,4,.6) 100%),url("game-covers/AshBreaker.jpg?v=ddbdb075");background-size:cover;background-position:center top}
.game-icon-breaker.has-cover .fp-icon-emoji{display:none}
.game-icon-frenzy{
  background:
    radial-gradient(ellipse at 50% 80%,rgba(200,160,0,.5) 0%,transparent 55%),
    radial-gradient(ellipse at 20% 20%,rgba(232,101,26,.3) 0%,transparent 50%),
    linear-gradient(180deg,#14100a 0%,#1a0e00 100%);
}
.game-icon-frenzy.has-cover{background-image:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(10,8,0,.6) 100%),url("game-covers/ForgeFrenzy.jpg?v=ccdb784f");background-size:cover;background-position:center top}
.game-icon-frenzy.has-cover .fp-icon-emoji{display:none}

/* ── Game icon themes ──────────────────────────────────── */

/* Ember Strike — lava grid with bursting ember circles */
.game-icon-strike{
  background:
    radial-gradient(ellipse at 50% 95%,rgba(255,40,0,.55) 0%,transparent 55%),
    radial-gradient(ellipse at 20% 10%,rgba(180,30,0,.3)  0%,transparent 50%),
    linear-gradient(180deg,#100202 0%,#1a0000 100%);
}
.game-icon-strike.has-cover{background-image:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(10,0,0,.6) 100%),url("game-covers/EmberStrike.jpg?v=e898c903");background-size:cover;background-position:center top}
.game-icon-strike.has-cover .fp-icon-emoji{display:none}

/* Vault Cracker — concentric spinning rings */
.game-icon-vault{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 55%,rgba(210,160,0,.45) 0%,transparent 58%),
    radial-gradient(ellipse at 75% 15%,rgba(180,100,0,.25) 0%,transparent 45%),
    linear-gradient(180deg,#0e0a00 0%,#120c00 100%);
}
.fp-vault-ring{
  position:absolute;border-radius:50%;border-style:solid;border-color:transparent;
  pointer-events:none;
}
.fp-vault-ring-outer{
  inset:14%;
  border-width:3px;
  border-top-color:rgba(255,200,50,.7);
  border-right-color:rgba(255,200,50,.2);
  border-bottom-color:rgba(255,200,50,.1);
  border-left-color:rgba(255,200,50,.35);
  box-shadow:0 0 16px rgba(255,200,50,.25);
  animation:fp-vault-spin 2.8s linear infinite;
}
.fp-vault-ring-outer::after{
  content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;
  background:#ffd23f;box-shadow:0 0 12px 4px rgba(255,210,63,.8);
}
.fp-vault-ring-mid{
  inset:28%;
  border-width:2px;
  border-top-color:rgba(255,160,30,.5);
  border-left-color:rgba(255,160,30,.2);
  box-shadow:0 0 10px rgba(255,160,30,.2);
  animation:fp-vault-spin 1.9s linear infinite reverse;
}
.fp-vault-ring-inner{
  inset:42%;
  border-width:2px;
  border-top-color:rgba(255,100,10,.5);
  border-right-color:rgba(255,100,10,.15);
  animation:fp-vault-spin 3.4s linear infinite;
}
.fp-vault-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  font-size:1.7rem;
  filter:drop-shadow(0 0 14px rgba(255,210,63,.6));
  animation:fp-vault-pulse 2.2s ease-in-out infinite;
}
@keyframes fp-vault-spin{to{transform:rotate(360deg)}}
@keyframes fp-vault-pulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,210,63,.4))}
  50%{filter:drop-shadow(0 0 22px rgba(255,210,63,.85))}
}
/* When a cover photo is applied via admin, hide the animated rings */
.game-icon-vault.has-cover .fp-vault-ring,
.game-icon-vault.has-cover .fp-vault-center{display:none}
.game-icon-vault.has-cover{background-size:cover;background-position:center top}

/* Generic icon class for admin-created game cards.
   When image_url is set the frontend adds it as an inline background-image. */
.game-icon-custom{
  background:radial-gradient(circle at 35% 35%,rgba(232,101,26,.3),transparent 65%),
             linear-gradient(135deg,#1a0d03,#0e0700);
}
.game-icon-custom.has-cover .fp-icon-emoji{display:none}
.game-icon-blitz{
  background:
    radial-gradient(ellipse at 50% 85%,rgba(232,101,26,.5) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 10%,rgba(255,180,0,.3)  0%,transparent 45%),
    linear-gradient(180deg,#0f0900 0%,#1a0e00 100%);
}
.game-icon-blitz.has-cover .fp-icon-emoji{display:none}
.game-icon-blitz.has-cover{background-size:cover;background-position:center top}
/* ── THE FIREPIT: profile strip ───────────────────────── */
.fp-profile{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 24px;border-radius:var(--r);
  background:var(--bg-card);border:1px solid var(--border-hot);
  box-shadow:0 0 0 1px rgba(232,101,26,.06);
  margin-bottom:8px;
}
.fp-profile-left{display:flex;align-items:center;gap:14px}
.fp-profile-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);
}
.fp-profile-wallet{font-family:'Share Tech Mono',monospace;font-size:.85rem;color:var(--cream);margin-bottom:6px}
.fp-profile-lvl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fp-profile-lvl{
  font-family:'Anton',sans-serif;font-size:.7rem;letter-spacing:.08em;
  color:var(--orange);background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);
  padding:3px 10px;border-radius:100px;
}
.fp-profile-bar{width:140px}
.fp-profile-xp-num{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--gold);white-space:nowrap}
.fp-profile-right{display:flex;align-items:center;gap:14px}
.fp-profile-tokens{
  display:flex;align-items:center;gap:6px;
  font-family:'Anton',sans-serif;font-size:1.1rem;color:var(--gold-l);
}
.fp-profile-tokens-ico{font-size:1rem}
.fp-profile-tokens-lbl{font-family:'Epilogue',sans-serif;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-left:2px}

/* guest (not-connected) variant */
.fp-profile-guest{border-color:var(--border)}
.fp-profile-avatar-guest{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--cream-d)}
.fp-profile-guest-sub{font-size:.78rem;color:var(--cream-d);line-height:1.5;max-width:480px}

/* in-card play button (Firepit landing page) */
.fp-play-btn{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:100px;width:100%;
  background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);
  color:var(--orange);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
@media(hover:hover) and (pointer:fine){.game-card:hover .fp-play-btn{background:var(--orange);color:#0D0904}}

/* per-icon idle animations */
.fp-icon-emoji{display:inline-block}
.fp-icon-flicker{animation:flicker 5s ease-in-out infinite}
.fp-icon-zap{animation:fp-zap 1.6s ease-in-out infinite}
.fp-icon-bounce{animation:fp-bounce 1s ease-in-out infinite}
@keyframes fp-zap{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.9)}}
@keyframes fp-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── THE FIREPIT: page hero ────────────────────────────── */
.fp-hero{
  position:relative;min-height:calc(100vh - 80px);
  display:flex;align-items:center;justify-content:center;
  padding:120px 24px 60px;overflow:hidden;text-align:center;
  margin-top:-80px;
}
.fp-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:brightness(.4) saturate(1.15)}
.fp-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,9,4,.35) 0%,rgba(13,9,4,.55) 50%,rgba(13,9,4,.96) 100%)}
.fp-hero-glow-1{position:absolute;top:8%;left:6%;width:480px;height:480px;background:radial-gradient(circle,rgba(232,101,26,.22) 0%,transparent 70%);filter:blur(60px);pointer-events:none}
.fp-hero-glow-2{position:absolute;bottom:4%;right:4%;width:420px;height:420px;background:radial-gradient(circle,rgba(245,166,35,.16) 0%,transparent 70%);filter:blur(60px);pointer-events:none}
.fp-hero-inner{position:relative;z-index:1;max-width:760px}
.fp-hero-title{
  font-family:'Anton',sans-serif;font-size:clamp(3rem,11vw,6.5rem);
  line-height:.95;letter-spacing:.02em;text-transform:uppercase;
  color:var(--cream);margin-bottom:18px;
}
.fp-hero-desc{font-size:1.05rem;color:var(--cream-d);line-height:1.75;max-width:560px;margin:0 auto 32px}
.fp-hero-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.fp-hero-stat{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:10px 18px;border-radius:100px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
}
.fp-hero-stat-ico{font-size:1.3rem;line-height:1}
.fp-hero-stat-t{font-size:.78rem;font-weight:700;color:var(--cream)}
.fp-hero-stat-d{font-size:.68rem;color:var(--dim)}

/* rising embers (decorative, behind hero copy) */
.fp-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fp-embers span{
  position:absolute;bottom:-5%;border-radius:50%;
  background:radial-gradient(circle,var(--gold-l) 0%,var(--orange) 60%,transparent 100%);
  box-shadow:0 0 8px rgba(232,101,26,.8);
  opacity:0;animation:ember-float linear infinite;
}
@keyframes ember-float{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%{opacity:.9}
  55%{transform:translateY(-55vh) translateX(18px) scale(.8);opacity:.6}
  100%{transform:translateY(-105vh) translateX(-12px) scale(.3);opacity:0}
}



/* lore section */
.lore-body{max-width:600px;margin-top:28px}
.lore-line{color:var(--cream-d);font-size:1.05rem;line-height:1.8;margin-bottom:24px}
.lore-ignite{font-size:1.1rem;margin-bottom:28px}
.lore-sign{font-family:'Anton',sans-serif;font-size:1.3rem;letter-spacing:.04em;color:var(--cream);line-height:1.5;margin-top:8px}

/* ════════════════════════════════════════════════════
   PAGE 2 — MEMES
════════════════════════════════════════════════════ */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.f-btn{
  padding:8px 17px;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cream-d);border:1px solid var(--border);background:transparent;
  transition:all var(--ease);cursor:pointer;flex-shrink:0;white-space:nowrap;
}
.f-btn:hover{color:var(--cream);border-color:rgba(245,166,35,.3)}
.f-btn.on{color:#0D0904;background:var(--gold);border-color:var(--gold);box-shadow:0 0 18px rgba(245,166,35,.35)}
.meme-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
  align-items:start;
}
.meme-card{
  border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg-card);overflow:hidden;cursor:pointer;
  transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.meme-card:hover{border-color:var(--border-hot);transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.5),var(--glow-o)}
.meme-card:hover .m-overlay{opacity:1}
.meme-card:hover .m-img{transform:scale(1.04)}
.m-img-wrap{position:relative;overflow:hidden}
.m-img{width:100%;display:block;object-fit:cover;transition:transform 350ms var(--ease)}
.m-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,9,4,.88) 0%,transparent 55%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:14px;opacity:0;transition:opacity var(--ease);
}
.m-view-btn{
  padding:6px 16px;border-radius:100px;
  background:var(--orange);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;
}
.m-meta{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.m-id{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--dim)}
.m-views{display:flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600;color:var(--cream-d)}
.load-wrap{text-align:center;margin-top:40px}
.btn-more{
  padding:12px 34px;border-radius:100px;
  border:1px solid var(--border-gold);color:var(--gold);
  font-weight:700;font-size:.88rem;letter-spacing:.06em;
  background:transparent;cursor:pointer;
  transition:all var(--ease);
}
.btn-more:hover{background:rgba(245,166,35,.08);box-shadow:var(--glow-g)}
.g-count{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--dim);margin-top:9px}

/* ════════════════════════════════════════════════════
   COMING SOON PAGES (shared base)
════════════════════════════════════════════════════ */
.cs-hero{
  min-height:calc(100vh - 80px);
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;position:relative;overflow:hidden;text-align:center;
}
.cs-inner{max-width:780px;width:100%;position:relative;z-index:1}
.cs-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:22px;
}
.cs-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(2.8rem,8vw,6rem);
  line-height:.95;text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:20px;
}
.cs-desc{font-size:1rem;color:var(--cream-d);line-height:1.75;max-width:560px;margin:0 auto 36px}
.cs-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.cs-input{
  padding:12px 20px;border-radius:100px;
  border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--cream);font-family:'Epilogue',sans-serif;font-size:.85rem;
  outline:none;min-width:240px;
  transition:border-color var(--ease);
}
.cs-input:focus{border-color:var(--orange)}
.cs-input::placeholder{color:var(--dim)}
/* glows per page */
.cs-glow-o{position:absolute;top:20%;left:10%;width:400px;height:400px;background:radial-gradient(circle,rgba(232,101,26,.18) 0%,transparent 70%);filter:blur(50px);pointer-events:none}
.cs-glow-g{position:absolute;bottom:10%;right:5%;width:360px;height:360px;background:radial-gradient(circle,rgba(245,166,35,.14) 0%,transparent 70%);filter:blur(50px);pointer-events:none}
.cs-glow-p{position:absolute;top:20%;right:10%;width:360px;height:360px;background:radial-gradient(circle,rgba(192,122,255,.18) 0%,transparent 70%);filter:blur(50px);pointer-events:none}
/* episode cards */
.ep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:0;text-align:left}
.ep-card{
  padding:26px 22px;border-radius:var(--r);
  border:1px solid var(--border);background:rgba(255,255,255,.03);
  position:relative;overflow:hidden;
  transition:border-color var(--ease),transform var(--ease);cursor:pointer;
}
.ep-card:hover{border-color:rgba(192,122,255,.4);transform:translateY(-4px)}
.ep-card.locked{opacity:.4;cursor:default}
.ep-card.locked:hover{transform:none;border-color:var(--border)}
.ep-num{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--dim);letter-spacing:.1em;margin-bottom:8px}
.ep-t{font-family:'Anton',sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.ep-d{font-size:.78rem;color:var(--cream-d);line-height:1.5}
.ep-status{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .ep-lock{color:var(--dim)}
/* dale credit */
.dale-credit{text-align:center;padding:20px 24px 36px;font-size:.68rem;color:rgba(240,224,188,.25);letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:6px}
.dale-link{display:inline-flex;align-items:center;gap:4px;color:rgba(240,224,188,.25);transition:color .2s}
.dale-link:hover{color:rgba(240,224,188,.5)}

/* ── FRITO FLAME FACTORY ─────────────────────────────── */
#page-generator{position:relative;overflow:hidden;min-height:100vh;padding:80px 0 60px}

/* Ember particles */
.forge-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.forge-ember{position:absolute;border-radius:50%;background:radial-gradient(circle,#f08030,#e8651a,transparent);animation:ember-rise linear infinite;opacity:0}
@keyframes ember-rise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:.7}
  50%{opacity:.4}
  100%{transform:translateY(-100vh) translateX(var(--drift)) scale(.3);opacity:0}
}

/* Top bar */
.forge-topbar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  border-bottom:1px solid rgba(232,101,26,.15);
  background:rgba(13,9,4,.6);backdrop-filter:blur(12px);
  flex-wrap:wrap;gap:10px;
}
.forge-topbar-left{display:flex;align-items:center;gap:14px;flex-shrink:0}
.forge-logo-tag{
  font-family:'Anton',sans-serif;font-size:1.1rem;letter-spacing:.06em;
  color:var(--orange);text-shadow:0 0 18px rgba(232,101,26,.6);
  margin:0;font-weight:inherit; /* neutralize default <h1> margin/weight — now used for SEO */
}
.forge-topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;justify-content:flex-end}
/* XP wrap */
.forge-xp-wrap{display:flex;align-items:center;gap:8px}
.forge-xp-label{font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--orange);letter-spacing:.1em}
.forge-xp-bar-outer{width:90px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.forge-xp-bar-inner{height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:3px;width:0%;transition:width .6s cubic-bezier(.4,0,.2,1)}
.forge-xp-num{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--gold);min-width:28px;white-space:nowrap}
/* Streak */
.forge-streak{
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--orange);padding:4px 10px;
  border:1px solid rgba(232,101,26,.25);border-radius:100px;
  background:rgba(232,101,26,.08);
  transition:all .3s;white-space:nowrap;
}
.forge-streak.active{
  border-color:rgba(232,101,26,.6);background:rgba(232,101,26,.18);
  box-shadow:0 0 14px rgba(232,101,26,.3);
  animation:streak-pulse 1.5s ease-in-out infinite;
}
@keyframes streak-pulse{0%,100%{box-shadow:0 0 14px rgba(232,101,26,.3)}50%{box-shadow:0 0 28px rgba(232,101,26,.6)}}

/* ── How It Works — collapsible explainer panel ───────── */
.forge-howto{
  position:relative;z-index:6;
  max-width:1200px;margin:0 auto;padding:14px 28px 0;
}
.forge-howto-toggle{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 18px;border-radius:var(--r);
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--cream);font-family:'Anton',sans-serif;
  font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  transition:all var(--ease);
}
.forge-howto-toggle:hover{border-color:var(--border-hot);color:var(--orange-l)}
.forge-howto-toggle-icon{font-size:1rem;flex-shrink:0}
.forge-howto-toggle-text{flex:1;text-align:left}
.forge-howto-chevron{
  font-size:.9rem;color:var(--dim);transition:transform var(--ease);
}
.forge-howto-toggle.open .forge-howto-chevron{transform:rotate(180deg);color:var(--orange)}
.forge-howto-toggle.open{border-color:var(--border-hot);color:var(--orange-l)}

.forge-howto-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.forge-howto-body.open{grid-template-rows:1fr}
.forge-howto-body > .forge-howto-grid{
  overflow:hidden;min-height:0;
}
.forge-howto-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding-top:0;
}
.forge-howto-body.open .forge-howto-grid{padding-top:14px}

.forge-howto-card{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  padding:16px 14px 14px;border-radius:12px;
  background:var(--bg-card2);border:1px solid var(--border);
  transition:all var(--ease);
}
.forge-howto-card:hover{border-color:var(--border-hot);transform:translateY(-2px)}
.forge-howto-card-link{cursor:pointer;background:rgba(232,101,26,.06);border-color:rgba(232,101,26,.2)}
.forge-howto-card-link:hover{border-color:var(--orange);box-shadow:var(--glow-o)}
.forge-howto-card-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.forge-howto-num{
  position:absolute;top:10px;right:12px;
  font-family:'Share Tech Mono',monospace;font-size:.7rem;
  color:var(--dim);letter-spacing:.05em;
}
.forge-howto-emoji{font-size:1.6rem;line-height:1}
.forge-howto-title{
  font-family:'Anton',sans-serif;font-size:.8rem;letter-spacing:.04em;
  color:var(--cream);
}
.forge-howto-text{font-size:.78rem;line-height:1.5;color:var(--cream-d)}

@media(max-width:1100px){
  .forge-howto-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .forge-howto{padding:10px 14px 0}
  .forge-howto-grid{grid-template-columns:1fr}
  .forge-howto-toggle{padding:10px 14px;font-size:.78rem}
  .forge-howto-card{padding:14px 12px 12px}
}

/* ── Mobile HUD strip (shown below topbar on small screens) */
.forge-mobile-hud{display:none}

/* At tablet widths (641-860): compact topbar — hide XP bar, powered text */
@media(max-width:860px) and (min-width:641px){
  .forge-topbar .forge-xp-wrap{display:none!important}
  .forge-topbar .forge-streak{display:none!important}
  .forge-topbar{padding:12px 16px;gap:8px}
  .forge-topbar-right{gap:8px}
}

/* At mobile widths (≤640px): move everything to the strip below */
@media(max-width:640px){
  .forge-topbar{padding:10px 14px;gap:6px;flex-wrap:nowrap}
  /* Hide topbar-right elements that move to mobile strip */
  .forge-topbar .forge-xp-wrap,
  .forge-topbar .forge-streak,
  .forge-topbar .forge-token-hud,
  #forge-buy-btn,          /* desktop buy button hidden on mobile */
  .forge-topbar .forge-wallet-tag{display:none!important}
  /* Mobile strip */
  .forge-mobile-hud{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:8px 14px;
    background:rgba(13,9,4,.5);border-bottom:1px solid rgba(232,101,26,.12);
    position:relative;z-index:9;
  }
  .forge-mobile-hud .forge-buy-mob{
    flex-shrink:0;
    padding:7px 16px;border-radius:10px;
    background:var(--gold);color:#000;
    font-family:'Anton',sans-serif;font-size:.82rem;letter-spacing:.06em;
    border:none;cursor:pointer;white-space:nowrap;
    transition:opacity .15s;
  }
  .forge-mobile-hud .forge-buy-mob:hover{opacity:.85}
  .forge-mobile-xp{
    width:100%;display:flex;align-items:center;gap:8px;padding:0 2px;
  }
  .forge-mobile-xp .forge-xp-label{font-size:.6rem}
  .forge-mobile-xp .forge-xp-bar-outer{flex:1;width:auto}
  .forge-mobile-xp .forge-xp-num{font-size:.65rem}
  .forge-logo-tag{font-size:.9rem;line-height:1.1}
}

/* Layout */
.forge-layout{
  position:relative;z-index:5;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:1200px;margin:0 auto;padding:32px 28px;
  min-height:calc(100vh - 160px);
}
@media(max-width:860px){
  .forge-layout{grid-template-columns:1fr;padding:20px 16px;gap:24px}
}

/* Panels */
.forge-panel-left{
  padding-right:28px;border-right:1px solid rgba(232,101,26,.1);
  display:flex;flex-direction:column;gap:24px;
}
.forge-panel-right{
  padding-left:28px;
  display:flex;flex-direction:column;gap:16px;
  align-items:stretch;
}
@media(max-width:860px){
  .forge-panel-left{padding-right:0;border-right:none;border-bottom:1px solid rgba(232,101,26,.1);padding-bottom:24px}
  .forge-panel-right{padding-left:0}
}

/* Steps */
.forge-step{display:flex;flex-direction:column;gap:12px}
.forge-step-header{display:flex;align-items:baseline;gap:10px}
.forge-step-num{
  font-family:'Share Tech Mono',monospace;font-size:.7rem;
  color:var(--orange);letter-spacing:.1em;
  border:1px solid rgba(232,101,26,.3);border-radius:4px;
  padding:2px 7px;
}
.forge-step-title{font-family:'Anton',sans-serif;font-size:.85rem;letter-spacing:.08em;color:var(--cream)}
.forge-step-hint{font-size:.72rem;color:var(--dim);margin-left:auto}
@media(max-width:520px){.forge-step-hint{display:none}}

/* Rarity info pill (reuses .comp-rarity-info / .comp-rarity-tooltip) */
.forge-rarity-info{
  font-size:.85rem;color:var(--dim);transition:color var(--ease);
  flex-shrink:0;line-height:1;
}
.forge-rarity-info:hover,.forge-rarity-info.open{color:var(--gold)}
.forge-rarity-info .comp-rarity-tooltip{left:auto;right:0;transform:none}
@media(max-width:480px){
  .forge-rarity-info .comp-rarity-tooltip{right:-10px}
}

/* Scenario grid */
.forge-scenario-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
@media(max-width:1100px){.forge-scenario-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.forge-scenario-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.forge-scenario-grid{grid-template-columns:repeat(3,1fr)}}
.forge-scenario{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 6px;border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  color:var(--cream-d);font-size:.72rem;font-weight:600;
  transition:all .18s;cursor:pointer;
  position:relative;
}
.forge-scenario:hover{
  border-color:rgba(232,101,26,.4);background:rgba(232,101,26,.08);
  color:var(--orange);transform:translateY(-2px);
}
/* Surprise Me — fully procedural, never repeats a button preset, so give
   it its own glowing gold treatment to signal "this one's special." */
.forge-scenario[data-preset="surprise"]{
  border-color:rgba(245,166,35,.35);
  background:linear-gradient(135deg,rgba(245,166,35,.12),rgba(232,101,26,.06));
  color:var(--gold);
  animation:forge-surprise-glow 2.6s ease-in-out infinite;
}
.forge-scenario[data-preset="surprise"]:hover{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(245,166,35,.24),rgba(232,101,26,.14));
  color:var(--gold-l);transform:translateY(-2px);
  box-shadow:0 0 16px rgba(245,166,35,.35);
}
.forge-scenario[data-preset="surprise"] .fs-emoji{
  display:inline-block;animation:forge-surprise-wiggle 2.6s ease-in-out infinite;
}
@keyframes forge-surprise-glow{
  0%,100%{box-shadow:0 0 0 rgba(245,166,35,0)}
  50%{box-shadow:0 0 14px rgba(245,166,35,.3)}
}
@keyframes forge-surprise-wiggle{
  0%,75%,100%{transform:rotate(0deg)}
  80%{transform:rotate(-18deg)}
  88%{transform:rotate(14deg)}
  94%{transform:rotate(-8deg)}
}
.forge-scenario.active{
  border-color:var(--orange);background:rgba(232,101,26,.15);
  color:var(--orange);box-shadow:0 0 14px rgba(232,101,26,.2);
}
.forge-scenario-custom{border-style:dashed;border-color:rgba(255,255,255,.12)}
.fs-emoji{font-size:1.4rem;line-height:1}
.fs-label{font-size:.65rem;letter-spacing:.04em;text-align:center}

/* Custom prompt */
.forge-input-wrap{position:relative}
.forge-textarea{
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:14px 16px;color:var(--cream);
  font-size:.9rem;font-family:inherit;line-height:1.6;
  resize:none;transition:border-color .2s;box-sizing:border-box;
}
.forge-textarea:focus{outline:none;border-color:rgba(232,101,26,.5)}
.forge-textarea::placeholder{color:var(--dim)}
.forge-char-count{
  position:absolute;bottom:10px;right:12px;
  font-size:.65rem;color:var(--dim);font-family:'Share Tech Mono',monospace;
}

/* Rarity odds — progress-bar style */
.forge-rarity-odds{display:flex;flex-direction:column;gap:7px}
.forge-rarity-bar{
  display:grid;grid-template-columns:70px 1fr 36px;
  align-items:center;gap:10px;
  font-size:.74rem;font-weight:700;
}
.forge-rarity-bar span:first-child{text-align:right}
.forge-rarity-bar span:last-child{text-align:right;font-family:'Share Tech Mono',monospace;font-size:.68rem}
.forge-rarity-fill{
  width:100%; /* scaleX(pct/100) set by JS controls the visual fill — never set width here */
  height:6px;border-radius:100px;transform-origin:left;
  transform:scaleX(0);transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.forge-rarity-bar.common{color:#aaa}.forge-rarity-bar.common .forge-rarity-fill{background:#888}
.forge-rarity-bar.rare{color:#7aabff}.forge-rarity-bar.rare .forge-rarity-fill{background:linear-gradient(90deg,#4285f4,#7aabff)}
.forge-rarity-bar.epic{color:#c07aff}.forge-rarity-bar.epic .forge-rarity-fill{background:linear-gradient(90deg,#9b42f4,#c07aff)}
.forge-rarity-bar.legendary{color:var(--gold-l)}.forge-rarity-bar.legendary .forge-rarity-fill{background:linear-gradient(90deg,var(--gold),var(--gold-l));animation:legendary-shimmer 2s ease-in-out infinite}
@keyframes legendary-shimmer{0%,100%{opacity:1;box-shadow:0 0 6px rgba(245,166,35,.4)}50%{opacity:.8;box-shadow:0 0 14px rgba(245,166,35,.9)}}

/* Achievements */
.forge-achievements{
  padding:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);border-radius:12px;
}
.forge-ach-title{
  font-family:'Share Tech Mono',monospace;font-size:.65rem;
  letter-spacing:.1em;color:var(--dim);text-transform:uppercase;
  margin-bottom:10px;
}
.forge-ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.forge-ach{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:0; /* allow grid cells to shrink below content size */
  padding:10px 6px;border-radius:10px;text-align:center;
  font-size:1.3rem;color:var(--dim);
  border:1px solid rgba(255,255,255,.06);
  transition:all .3s;cursor:default;
}
.forge-ach.locked{filter:grayscale(1);opacity:.4}
.forge-ach.unlocked{
  filter:none;opacity:1;
  border-color:rgba(245,166,35,.3);
  background:rgba(245,166,35,.07);
  color:var(--gold-l);
  box-shadow:0 0 12px rgba(245,166,35,.15);
}
.forge-ach.just-unlocked{animation:ach-pop .6s cubic-bezier(.36,1.56,.64,1)}
@keyframes ach-pop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.forge-ach span{
  font-size:.6rem;line-height:1.3;color:var(--dim);
  max-width:100%;overflow-wrap:break-word;word-break:break-word;
}
.forge-ach.unlocked span{color:var(--gold-l)}

/* Screen-shrink proofing: drop to a 2-column grid on narrow viewports
   so each achievement keeps room for its label without overflowing. */
@media(max-width:480px){
  .forge-ach-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .forge-ach{padding:12px 8px;font-size:1.4rem}
  .forge-ach span{font-size:.65rem}
}
@media(max-width:340px){
  .forge-achievements{padding:12px}
  .forge-ach-grid{gap:8px}
  .forge-ach{padding:10px 6px;font-size:1.25rem}
}

/* Forge canvas */
.forge-canvas{
  flex:1;min-height:380px;border-radius:18px;
  border:1px solid rgba(232,101,26,.15);
  background:radial-gradient(ellipse at center,rgba(35,15,5,.9) 0%,rgba(13,9,4,.98) 100%);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s,box-shadow .3s;
}
.forge-canvas.scenario-ready{
  border-color:rgba(232,101,26,.5);
  box-shadow:0 0 30px rgba(232,101,26,.12), inset 0 0 40px rgba(232,101,26,.04);
}

/* Scenario selected preview in canvas */
.forge-idle-selected{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px 20px;
  background:linear-gradient(to top,rgba(13,9,4,.95) 70%,transparent);
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s,transform .3s;
  pointer-events:none;z-index:3;
}
.forge-idle-selected.visible{opacity:1;transform:translateY(0)}
.forge-idle-selected-emoji{font-size:1.6rem;flex-shrink:0}
.forge-idle-selected-info{display:flex;flex-direction:column;gap:2px}
.forge-idle-selected-name{font-family:'Anton',sans-serif;font-size:.9rem;color:var(--orange);letter-spacing:.06em}
.forge-idle-selected-desc{font-size:.68rem;color:var(--dim);line-height:1.4}

/* Token count glow when enough to generate */
.forge-token-count.can-generate{color:var(--gold);text-shadow:0 0 12px rgba(245,166,35,.6)}

/* ── COMMUNITY LEGENDARY HEAT ──────────────────────────── */
.forge-heat{
  margin-top:10px;padding:12px 14px;
  background:rgba(245,166,35,.04);
  border:1px solid rgba(245,166,35,.12);border-radius:10px;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.forge-heat-header{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Share Tech Mono',monospace;font-size:.62rem;
  color:var(--dim);letter-spacing:.08em;margin-bottom:7px;
}
.forge-heat-header strong{color:var(--gold-l);font-family:'Anton',sans-serif;font-size:.8rem;letter-spacing:.04em}
.forge-heat-track{
  height:5px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden;
}
.forge-heat-fill{
  height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l),#fff8c0);
  transform-origin:left;transform:scaleX(0);
  transition:transform 1s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 6px rgba(245,166,35,.5);
}
.forge-heat-hint{
  margin-top:5px;font-size:.6rem;color:var(--dim);font-family:'Share Tech Mono',monospace;
  text-align:right;
}
/* Surge active — bar glows and the fill pulses */
.forge-heat.surge-active{
  background:rgba(232,101,26,.08);
  border-color:rgba(232,101,26,.4);
  box-shadow:0 0 24px rgba(232,101,26,.2);
}
.forge-heat.surge-active .forge-heat-fill{
  background:linear-gradient(90deg,var(--orange),var(--gold),#fff8c0);
  animation:forge-surge-pulse 1.4s ease-in-out infinite;
}
.forge-heat.surge-active .forge-heat-hint{color:var(--gold-l)}
@keyframes forge-surge-pulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.4)}
}
.forge-surge-claim{
  display:none;width:100%;margin-top:10px;padding:10px 14px;
  border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--orange),var(--gold));
  color:#fff;font-family:'Anton',sans-serif;font-size:.78rem;letter-spacing:.04em;
  box-shadow:var(--glow-o);
  animation:forge-surge-pulse 1.4s ease-in-out infinite;
  transition:transform var(--ease);
}
.forge-surge-claim:hover{transform:translateY(-2px)}
.forge-surge-claim:disabled{opacity:.5;cursor:not-allowed;animation:none;transform:none}

/* ── Legendary Surge — page-wide "special moment" effects ─────────────
   Toggled on/off (via .active) the instant the community heat status
   poll reports surgeActive true/false — so it tracks the admin's
   Surge/End-Surge controls within ~20s. */
.forge-surge-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
}
.forge-surge-overlay.active{
  opacity:1;
  background:radial-gradient(circle at 50% 28%, rgba(245,166,35,.16), transparent 55%);
  box-shadow:inset 0 0 160px rgba(232,101,26,.35);
  animation:forge-surge-overlay-pulse 2.4s ease-in-out infinite;
}
@keyframes forge-surge-overlay-pulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
.forge-surge-banner{
  display:none;position:relative;z-index:5;
  align-items:center;justify-content:center;
  /* extra top margin clears the floating #topnav pill, which overlaps the
     start of #page-generator's content area */
  margin:50px 28px 14px;padding:8px 16px;border-radius:12px;text-align:center;
  font-family:'Anton',sans-serif;font-size:.78rem;letter-spacing:.08em;
  color:#1a0e02;
  background:linear-gradient(90deg,var(--gold),var(--orange),var(--gold-l),var(--orange),var(--gold));
  background-size:200% 100%;
  box-shadow:0 2px 20px rgba(232,101,26,.5);
}
.forge-surge-banner.active{
  display:flex;
  animation:forge-surge-banner-sweep 3s linear infinite, forge-surge-banner-in .4s ease;
}
@keyframes forge-surge-banner-sweep{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}
@keyframes forge-surge-banner-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
/* Brighter, larger embers spawned while a surge is active */
.forge-ember.surge{
  background:radial-gradient(circle,#fff8c0,var(--gold),#e8651a,transparent);
  box-shadow:0 0 8px rgba(245,166,35,.8);
}
@media (max-width:600px){
  .forge-surge-banner{font-size:.62rem;padding:6px 10px}
}

/* ── SCENARIO CARD HOVER TOOLTIP ───────────────────── */
.forge-scenario-tip{display:none}

/* ── FLAME BUTTON STATE VARIATIONS ─────────────────── */
.forge-btn.no-scenario{
  background:linear-gradient(135deg,#2a1a0a 0%,#1a0d05 100%);
  border:1px solid rgba(232,101,26,.2);
}
.forge-btn.no-tokens{
  background:linear-gradient(135deg,#1a1a2a 0%,#0d0d1a 100%);
  border:1px solid rgba(100,100,200,.2);
}
.forge-btn.surge-free{
  background:linear-gradient(135deg,#0d2b1a 0%,#0a4020 50%,#0d2b1a 100%);
  border:2px solid #4ade80;
  box-shadow:0 0 24px rgba(74,222,128,.35),0 0 60px rgba(74,222,128,.12),inset 0 0 20px rgba(74,222,128,.06);
  animation:surge-btn-pulse 1.6s ease-in-out infinite;
}
.forge-btn.surge-free .forge-btn-text{
  color:#4ade80;
  text-shadow:0 0 12px rgba(74,222,128,.6);
  letter-spacing:.06em;
}
@keyframes surge-btn-pulse{
  0%,100%{box-shadow:0 0 24px rgba(74,222,128,.35),0 0 60px rgba(74,222,128,.12),inset 0 0 20px rgba(74,222,128,.06)}
  50%{box-shadow:0 0 36px rgba(74,222,128,.55),0 0 80px rgba(74,222,128,.22),inset 0 0 30px rgba(74,222,128,.1)}
}

/* ── CANVAS SPARK PARTICLES ─────────────────────────── */
.forge-spark{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--orange);pointer-events:none;
  animation:spark-fly 1.2s ease-out forwards;
}
@keyframes spark-fly{
  0%  {opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:var(--spark-end) scale(0)}
}

/* Stagger rarity bar animations */
.forge-rarity-bar:nth-child(1) .forge-rarity-fill{transition-delay:.0s}
.forge-rarity-bar:nth-child(2) .forge-rarity-fill{transition-delay:.12s}
.forge-rarity-bar:nth-child(3) .forge-rarity-fill{transition-delay:.24s}
.forge-rarity-bar:nth-child(4) .forge-rarity-fill{transition-delay:.36s}

/* Idle state */
.forge-idle{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:40px;text-align:center;
  position:relative;z-index:2;
}
.forge-idle-ring{
  position:absolute;width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(232,101,26,.12);
  animation:idle-spin 8s linear infinite;
}
.forge-idle-ring-2{
  width:320px;height:320px;
  border-color:rgba(245,166,35,.07);
  animation-direction:reverse;animation-duration:12s;
}
@keyframes idle-spin{to{transform:rotate(360deg)}}
.forge-idle-img{
  width:110px;height:110px;border-radius:50%;
  object-fit:cover;border:2px solid rgba(232,101,26,.3);
  box-shadow:0 0 30px rgba(232,101,26,.2);
  position:relative;z-index:2;
  animation:idle-float 4s ease-in-out infinite;
}
@keyframes idle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.forge-idle-text{
  font-size:.88rem;color:var(--dim);line-height:1.6;
  position:relative;z-index:2;
}

/* Loading state */
.forge-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:40px;text-align:center;
  position:relative;z-index:2;width:100%;
}
.forge-fire-wrap{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center}
.forge-fire-ring{
  position:absolute;width:80px;height:80px;border-radius:50%;
  border:2px solid var(--orange);opacity:.7;
  animation:fire-expand 1.2s ease-out infinite;
}
.forge-fire-ring-2{width:100px;height:100px;animation-delay:.3s;border-color:var(--gold)}
.forge-fire-ring-3{width:120px;height:120px;animation-delay:.6s;border-color:rgba(232,101,26,.4)}
@keyframes fire-expand{
  0%{transform:scale(.5);opacity:.8}
  100%{transform:scale(1.4);opacity:0}
}
.forge-loading-icon{font-size:2.5rem;position:relative;z-index:2;animation:loading-bounce .6s ease-in-out infinite alternate}
@keyframes loading-bounce{from{transform:scale(1)}to{transform:scale(1.15)}}
.forge-loading-label{
  font-family:'Anton',sans-serif;font-size:1.4rem;letter-spacing:.12em;
  color:var(--orange);text-shadow:0 0 20px rgba(232,101,26,.5);
}
.forge-dots::after{content:'...';animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:'.'}33%{content:'..'}66%{content:'...'}100%{content:''}}
.forge-loading-sub{font-size:.82rem;color:var(--cream-d);letter-spacing:.04em}
.forge-loading-bar-outer{
  width:200px;height:4px;background:rgba(255,255,255,.08);
  border-radius:2px;overflow:hidden;
}
.forge-loading-bar-inner{
  height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));
  border-radius:2px;width:0%;
  transition:width .4s ease;
}

/* Rarity reveal */
.forge-rarity-reveal{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,9,4,.95);
}
.forge-reveal-flash{
  position:absolute;inset:0;
  animation:reveal-flash .5s ease-out forwards;
}
@keyframes reveal-flash{0%{background:rgba(255,255,255,.3)}100%{background:transparent}}
.forge-reveal-content{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  z-index:2;text-align:center;
  animation:reveal-rise .5s cubic-bezier(.36,1.56,.64,1) .1s both;
}
@keyframes reveal-rise{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.forge-reveal-label{font-family:'Share Tech Mono',monospace;font-size:.75rem;letter-spacing:.15em;color:var(--cream-d)}
.forge-reveal-rarity{
  font-family:'Anton',sans-serif;font-size:clamp(2.5rem,8vw,4rem);
  letter-spacing:.06em;line-height:1;
}
.forge-reveal-rarity.common{color:#aaa}
.forge-reveal-rarity.rare{color:#7aabff;text-shadow:0 0 30px rgba(66,133,244,.6)}
.forge-reveal-rarity.epic{color:#c07aff;text-shadow:0 0 30px rgba(155,66,244,.6)}
.forge-reveal-rarity.legendary{
  color:var(--gold-l);
  text-shadow:0 0 40px rgba(245,166,35,.8),0 0 80px rgba(245,166,35,.4);
}
@keyframes legendary-text-glow{from{text-shadow:0 0 40px rgba(245,166,35,.8),0 0 80px rgba(245,166,35,.4)}to{text-shadow:0 0 60px rgba(245,166,35,1),0 0 120px rgba(245,166,35,.6)}}

/* Slot-machine flicker — rapid cycling through rarities before the real one lands */
.forge-reveal-rarity.flicker{animation:reveal-flicker .09s linear}
@keyframes reveal-flicker{0%{opacity:.45;transform:scale(.92)}100%{opacity:1;transform:scale(1.04)}}

/* Settle pop — plays once when the real rarity lands */
.forge-reveal-rarity.settled{animation:reveal-pop .45s cubic-bezier(.36,1.56,.64,1) both}
.forge-reveal-rarity.legendary.settled{
  animation:reveal-pop .45s cubic-bezier(.36,1.56,.64,1) both, legendary-text-glow 1s ease-in-out .45s infinite alternate;
}
@keyframes reveal-pop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}

.forge-reveal-stars{font-size:1.6rem;min-height:1.6rem}
.forge-reveal-stars.pop-in{animation:stars-spin .5s ease-out both}
@keyframes stars-spin{0%{transform:scale(0) rotate(-180deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* Reaction line — short flavor text under the stars */
.forge-reveal-reaction{
  font-family:'Share Tech Mono',monospace;font-size:.9rem;letter-spacing:.04em;
  color:var(--cream-d);min-height:1.2em;opacity:0;
}
.forge-reveal-reaction.pop-in{animation:reaction-rise .4s ease-out .05s both}
.forge-reveal-reaction.rare{color:#7aabff}
.forge-reveal-reaction.epic{color:#c07aff}
.forge-reveal-reaction.legendary{color:var(--gold-l)}
@keyframes reaction-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Confetti burst — for epic/legendary reveals */
.forge-reveal-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.forge-confetti-piece{
  position:absolute;top:-12%;border-radius:2px;opacity:.95;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  85%{opacity:1}
  100%{transform:translateY(125vh) rotate(540deg);opacity:0}
}

/* Result frame */
.forge-result{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px;width:100%;
}
.forge-result-frame{
  position:relative;border-radius:14px;overflow:hidden;
  border:2px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
  max-width:360px;width:100%;
  transition:border-color .4s,box-shadow .4s;
}
.forge-result-frame.rarity-common{border-color:#666}
.forge-result-frame.rarity-rare{border-color:#4285f4;box-shadow:0 0 24px rgba(66,133,244,.3)}
.forge-result-frame.rarity-epic{border-color:#9b42f4;box-shadow:0 0 24px rgba(155,66,244,.4)}
.forge-result-frame.rarity-legendary{
  border-color:var(--gold);
  box-shadow:0 0 40px rgba(245,166,35,.5),0 0 80px rgba(245,166,35,.2);
  animation:legendary-frame-glow 2s ease-in-out infinite alternate;
}
@keyframes legendary-frame-glow{from{box-shadow:0 0 40px rgba(245,166,35,.5),0 0 80px rgba(245,166,35,.2)}to{box-shadow:0 0 60px rgba(245,166,35,.8),0 0 120px rgba(245,166,35,.4)}}
.forge-result-rarity-badge{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.12em;
  padding:4px 10px;border-radius:100px;
  background:rgba(13,9,4,.8);backdrop-filter:blur(4px);
  border:1px solid currentColor;
}
.forge-result-rarity-badge.rarity-common{color:#aaa}
.forge-result-rarity-badge.rarity-rare{color:#7aabff;border-color:#4285f4}
.forge-result-rarity-badge.rarity-epic{color:#c07aff;border-color:#9b42f4}
.forge-result-rarity-badge.rarity-legendary{color:var(--gold-l);border-color:var(--gold)}
.forge-result-img{width:100%;display:block;opacity:0;transition:opacity .5s}
.forge-result-img.loaded{opacity:1}
.forge-result-glow{position:absolute;inset:0;pointer-events:none;transition:opacity .4s}
.forge-result-prompt{font-size:.75rem;color:var(--dim);font-style:italic;text-align:center;max-width:300px;line-height:1.5}
.forge-result-xp-gained{
  font-family:'Anton',sans-serif;font-size:1.1rem;letter-spacing:.06em;
  color:var(--gold);
  animation:xp-pop .5s cubic-bezier(.36,1.56,.64,1) both;
}
@keyframes xp-pop{from{transform:scale(0) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

/* Action buttons */
.forge-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.forge-action-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;border-radius:10px;
  font-size:.75rem;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--cream-d);
  transition:all .18s;cursor:pointer;
}
.forge-action-btn:hover{transform:translateY(-2px)}
.forge-action-save:hover{border-color:var(--green);color:var(--green);background:rgba(76,185,68,.08)}
.forge-action-share:hover{border-color:#1da1f2;color:#1da1f2;background:rgba(29,161,242,.08)}
.forge-action-community:hover{border-color:var(--orange);color:var(--orange);background:rgba(232,101,26,.08)}
.forge-action-retry:hover{border-color:var(--cream-d);color:var(--cream)}
@media(max-width:480px){
  .forge-actions{grid-template-columns:repeat(2,1fr)}
}

/* Forge button */
.forge-btn{
  position:relative;overflow:hidden;
  width:100%;padding:18px;border-radius:14px;
  background:linear-gradient(135deg,#e8651a 0%,#c44a00 50%,#8b2a00 100%);
  border:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.forge-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(232,101,26,.5),0 0 60px rgba(232,101,26,.2);
}
.forge-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.forge-btn-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  pointer-events:none;
}
.forge-btn-text{
  position:relative;z-index:2;
  font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.1em;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.forge-btn-charge{
  position:absolute;bottom:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold-l),var(--gold));
  border-radius:0 0 14px 14px;
  transition:width .1s linear;
}
.forge-limit-note{
  text-align:center;font-family:'Share Tech Mono',monospace;
  font-size:.65rem;color:var(--dim);letter-spacing:.06em;
}

/* ── TOKEN HUD ──────────────────────────────────────── */
.forge-token-hud{
  display:flex;align-items:center;gap:10px;
  background:rgba(232,101,26,.10);border:1px solid rgba(232,101,26,.25);
  border-radius:100px;padding:5px 14px;
}
.forge-token-count{
  font-family:'Anton',sans-serif;font-size:1rem;color:var(--orange);letter-spacing:.04em;
  transition:transform .15s;
}
.forge-token-count.pop{animation:token-pop .4s cubic-bezier(.36,2,.6,1) forwards}
@keyframes token-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
/* Floating +N reward label */
.token-float{
  position:absolute;font-family:'Anton',sans-serif;font-size:.85rem;
  color:var(--orange);pointer-events:none;white-space:nowrap;
  animation:token-float-up .9s ease forwards;z-index:999;
}
@keyframes token-float-up{
  0%  {opacity:1;transform:translateY(0) scale(1)}
  60% {opacity:1;transform:translateY(-28px) scale(1.15)}
  100%{opacity:0;transform:translateY(-50px) scale(.9)}
}
.forge-token-label{font-size:.65rem;color:var(--dim);font-family:'Share Tech Mono',monospace;letter-spacing:.06em}
.forge-token-timer{font-size:.6rem;color:var(--dim);font-family:'Share Tech Mono',monospace}
.forge-claim-btn,.forge-claim-btn:hover,.forge-claim-btn:active{transform:none!important}
.forge-claim-btn{
  padding:4px 12px;border-radius:100px;background:var(--orange);border:none;
  color:#fff;font-family:'Anton',sans-serif;font-size:.72rem;letter-spacing:.06em;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px; /* aligns icon + text on all buttons */
}
.forge-claim-btn:hover{background:#c44a00;box-shadow:0 0 16px rgba(232,101,26,.5)}
.forge-claim-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── WALLET GATE ────────────────────────────────────── */
.forge-wallet-gate{
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh;padding:40px 24px;text-align:center;gap:20px;
}
.forge-gate-icon{font-size:3rem;margin-bottom:4px}
.forge-gate-title{
  font-family:'Anton',sans-serif;font-size:clamp(1.6rem,5vw,2.4rem);
  text-transform:uppercase;letter-spacing:.05em;color:var(--cream);line-height:1.1;
}
.forge-gate-title span{color:var(--orange)}
.forge-gate-sub{font-size:.9rem;color:var(--dim);max-width:360px;line-height:1.6}
.forge-gate-perks{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0;
}
.forge-gate-perk{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:8px 14px;font-size:.78rem;color:var(--cream-d);
}
.forge-gate-perk span{color:var(--orange);margin-right:4px}
.forge-connect-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:14px;
  background:linear-gradient(135deg,var(--orange),var(--gold));
  border:none;color:#fff;font-family:'Anton',sans-serif;
  font-size:1rem;letter-spacing:.06em;cursor:pointer;
  transition:all .2s;
}
.forge-connect-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(232,101,26,.4)}
.forge-gate-qr-wrap{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:20px;max-width:320px;width:100%;
}
.forge-gate-qr-wrap img{width:100%;max-width:200px;border-radius:8px;display:block;margin:0 auto 12px}
.forge-gate-qr-hint{font-size:.75rem;color:var(--dim);line-height:1.5}
.forge-gate-deeplink{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  padding:10px 20px;border-radius:10px;background:rgba(232,101,26,.15);
  border:1px solid rgba(232,101,26,.35);color:var(--gold-l);
  font-size:.82rem;font-weight:600;text-decoration:none;cursor:pointer;
}
.forge-wallet-tag{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:6px 13px 6px 10px;
  font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--cream-d);
  display:flex;align-items:center;gap:7px;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  user-select:none;position:relative;
}
.forge-wallet-tag::after{
  content:'›';font-size:.8rem;opacity:.4;margin-left:1px;
  transition:opacity .15s,transform .15s;
}
.forge-wallet-tag:hover{
  background:rgba(232,101,26,.12);
  border-color:rgba(232,101,26,.45);
  color:var(--orange);
  box-shadow:0 2px 8px rgba(232,101,26,.15);
}
.forge-wallet-tag:hover::after{opacity:.85;transform:translateX(2px)}
.forge-wallet-tag:active{transform:scale(.97)}
.forge-wallet-dot{
  width:7px;height:7px;border-radius:50%;background:#4ade80;flex-shrink:0;
  box-shadow:0 0 5px rgba(74,222,128,.6);
}

/* ── PROFILE MODAL ──────────────────────────────────── */

/* Overlay — covers full viewport but always starts content BELOW the
   floating #topnav pill.
   Desktop: nav ends ≈68px from top  → padding-top 88px (68 + 20 gap)
   Mobile:  nav ends ≈58px from top  → padding-top 76px (58 + 18 gap)
   Values are set per-breakpoint so the card never bleeds under the nav. */
.pm-overlay{
  position:fixed;inset:0;z-index:10004;
  background:rgba(0,0,0,.82);
  display:flex;align-items:flex-start;justify-content:center;
  padding:88px 20px 20px;
  box-sizing:border-box;overflow-y:auto;
}
.pm-header{display:flex;align-items:center;gap:14px;padding:22px 24px 16px;border-bottom:1px solid rgba(249,115,22,.1);flex-shrink:0;position:relative}
.pm-header::after{content:'';position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(249,115,22,.2),transparent)}
/* Avatar ring — fire gradient conic spin */
.pm-avatar-ring{
  width:52px;height:52px;border-radius:50%;
  background:conic-gradient(from 0deg,#f97316,#facc15,#ef4444,#f97316);
  padding:2.5px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:box-shadow .2s;
  animation:pmRingSpin 8s linear infinite;
  box-shadow:0 0 14px rgba(249,115,22,.35);
}
@keyframes pmRingSpin{to{rotate:360deg}}
.pm-avatar-ring:hover{box-shadow:0 0 22px rgba(249,115,22,.55)}
.pm-avatar-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pm-header-text{flex:1;min-width:0}
.pm-header-name{font-family:'Anton',sans-serif;font-size:1.05rem;letter-spacing:.04em;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-header-sub{font-size:.72rem;color:var(--dim);margin-top:2px;font-family:'Share Tech Mono',monospace}
.pm-close-btn{background:none;border:none;color:var(--dim);font-size:1.15rem;cursor:pointer;padding:6px;line-height:1;border-radius:50%;transition:color .15s;flex-shrink:0}
.pm-close-btn:hover{color:var(--cream)}
.pm-tab-bar{display:flex;border-bottom:1px solid rgba(255,255,255,.06);padding:0 24px;flex-shrink:0}
.pm-tab-btn{background:none;border:none;border-bottom:2px solid transparent;padding:12px 18px;font-family:'Anton',sans-serif;font-size:.8rem;letter-spacing:.06em;color:var(--dim);cursor:pointer;transition:all .15s;margin-bottom:-1px}
.pm-tab-btn:hover{color:var(--cream)}
.pm-tab-btn.active{color:var(--orange);border-bottom-color:var(--orange)}
/* Skeleton loader */
.pm-skeleton-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0}
.pm-skeleton{background:rgba(255,255,255,.06);border-radius:8px;animation:pm-pulse 1.4s ease-in-out infinite}
@keyframes pm-pulse{0%,100%{opacity:.4}50%{opacity:.8}}
.pm-sk-avatar{width:80px;height:80px;border-radius:50%}
.pm-sk-name{width:160px;height:18px}
.pm-sk-sub{width:110px;height:12px}
.pm-skeleton-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:6px}
.pm-sk-card{height:72px;border-radius:12px}
.pm-error{color:#f87171;font-size:.85rem;text-align:center;padding:32px 0}
.pm-loading-done{color:var(--dim);font-size:.8rem;text-align:center;padding:32px 0}
/* Mobile profile avatar button in HUD strip */
.pm-mob-avatar-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(232,101,26,.4);background:rgba(232,101,26,.08);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;flex-shrink:0;transition:border-color .15s;padding:0;line-height:1}
.pm-mob-avatar-btn:hover{border-color:var(--orange)}

/* ── PROFILE MODAL — card shell ─────────────────────── */
.pm-card{
  background:#1a1108;
  border:1px solid rgba(232,101,26,.35);
  border-radius:22px;
  width:100%;max-width:520px;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,.75);
  margin:auto;
  position:relative;
  /* Internal scrolling — header+tabs stay fixed, panel scrolls */
  /* 88px overlay padding-top + 20px bottom = 108px consumed */
  max-height:calc(100vh - 108px);
}
/* Panel is the scrollable region */
.pm-panel{padding:24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}

/* ── PROFILE MODAL — Step 4 content ─────────────────── */
.pm-identity{text-align:center;margin-bottom:20px}
.pm-identity-name{font-family:'Anton',sans-serif;font-size:1.25rem;letter-spacing:.04em;color:var(--cream)}
.pm-identity-username{font-size:.78rem;color:var(--orange);margin-top:2px}
.pm-identity-meta{font-size:.72rem;color:var(--dim);margin-top:4px;font-family:'Share Tech Mono',monospace}
.pm-identity-bio{font-size:.8rem;color:var(--cream-d);margin-top:10px;line-height:1.6;max-width:340px;margin-left:auto;margin-right:auto}
.pm-xp-wrap{margin-bottom:20px}
.pm-xp-label{display:flex;justify-content:space-between;font-size:.72rem;color:var(--dim);font-family:'Share Tech Mono',monospace;margin-bottom:6px}
.pm-xp-bar-outer{height:6px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden}
.pm-xp-bar-inner{height:100%;background:linear-gradient(90deg,var(--orange),#f59e0b);border-radius:100px;transition:width .4s ease}
.pm-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.pm-stat-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:14px 16px;
  position:relative;overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.pm-stat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(249,115,22,.05) 0%,transparent 55%);
  pointer-events:none;
}
.pm-stat-card:first-child{border-color:rgba(249,115,22,.18);box-shadow:0 0 18px rgba(249,115,22,.06)}
.pm-stat-card:nth-child(2){border-color:rgba(250,204,21,.14);box-shadow:0 0 18px rgba(250,204,21,.05)}
.pm-stat-card:nth-child(3){border-color:rgba(96,165,250,.12)}
.pm-stat-card:nth-child(4){border-color:rgba(167,139,250,.12)}
.pm-stat-val{font-family:'Anton',sans-serif;font-size:1.05rem;color:var(--cream);letter-spacing:.02em;margin-bottom:3px}
.pm-stat-lbl{font-size:.68rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.pm-stat-sub{font-size:.65rem;color:var(--dim);margin-top:3px;opacity:.7}
.pm-section-title{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:20px 0 10px}
.pm-rarity-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.pm-rarity-item{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:4px 10px}
.pm-rarity-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pm-rarity-lbl{font-size:.7rem;color:var(--dim)}
.pm-rarity-count{font-size:.7rem;font-weight:700;font-family:'Share Tech Mono',monospace}
.pm-flame-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;position:relative;min-height:80px}
.pm-flame-loading{align-items:center;justify-content:center}
.pm-flame-spinner{grid-column:1/-1;text-align:center;font-size:.75rem;color:var(--dim);padding:20px 0}
.pm-flame-empty{grid-column:1/-1;text-align:center;font-size:.75rem;color:var(--dim);padding:20px 0}
.pm-flame-thumb{border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;aspect-ratio:1;position:relative;background:rgba(255,255,255,.03)}
.pm-flame-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pm-flame-rarity{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(0,0,0,.6);border-radius:4px;padding:1px 5px;white-space:nowrap}
.pm-flame-see-all{grid-column:1/-1;text-align:center;font-size:.75rem;color:var(--orange);cursor:pointer;padding:6px 0;text-decoration:none;display:block}
.pm-flame-see-all:hover{text-decoration:underline}
.pm-ach-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.pm-ach-badge{background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);border-radius:20px;padding:4px 12px;font-size:.75rem;color:var(--orange)}
.pm-ach-empty{font-size:.78rem;color:var(--dim)}
.pm-game-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.pm-game-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:8px 12px}
.pm-game-name{flex:1;font-size:.78rem;color:var(--cream-d)}
.pm-game-best{font-family:'Share Tech Mono',monospace;font-size:.78rem;color:var(--orange);font-weight:700}
.pm-game-plays{font-size:.68rem;color:var(--dim)}
.pm-game-empty{font-size:.78rem;color:var(--dim)}
.pm-connect-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.pm-connect-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:9px 14px}
.pm-connect-lbl{font-size:.72rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;width:60px;flex-shrink:0}
.pm-connect-val{font-size:.8rem;color:var(--cream-d);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-connect-ok{color:#4ade80}
.pm-connect-missing{font-size:.78rem;color:var(--dim);font-style:italic}
.pm-link-wallet-btn{background:#1a3a2a;border:1px solid #4caf50;color:#4caf50;font-size:.72rem;border-radius:8px;padding:4px 10px;cursor:pointer;transition:opacity .15s}
.pm-link-wallet-btn:hover{opacity:.8}

/* ── PROFILE MODAL — Settings tab ──────────────────── */

/* Section blocks */
.pm-settings-section{margin-bottom:24px}
.pm-settings-section:last-child{margin-bottom:0}
.pm-settings-title{
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:12px;
  display:flex;align-items:center;gap:7px;
}
.pm-settings-title::before{
  content:'';display:inline-block;
  width:2px;height:10px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(180deg,#f97316,#facc15);
}

/* Settings rows (action + toggle rows share this base) */
.pm-settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:11px 14px;margin-bottom:6px}
.pm-settings-row:last-child{margin-bottom:0}
.pm-settings-row-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-settings-row-name{font-size:.82rem;color:var(--cream-d);font-weight:500}
.pm-settings-row-desc{font-size:.72rem;color:var(--dim)}
.pm-settings-note{font-size:.78rem;color:var(--dim);font-style:italic;padding:8px 0 4px}

/* Form fields */
.pm-form-group{margin-bottom:14px}
.pm-form-label{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.pm-form-counter{font-size:.68rem;color:var(--dim);font-weight:400;text-transform:none;letter-spacing:0;margin-left:auto}
.pm-form-hint{display:block;font-size:.68rem;color:var(--dim);font-weight:400;text-transform:none;letter-spacing:0;margin-top:4px;line-height:1.4}
.pm-form-hint-inline{font-size:.66rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--dim);opacity:.75}
.pm-locked-badge{font-size:.62rem;font-weight:600;text-transform:none;letter-spacing:0;color:rgba(251,191,36,.8);background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);border-radius:4px;padding:1px 6px;margin-left:auto}
.pm-locked-input{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;color:rgba(255,255,255,.5);font-size:.82rem;padding:9px 12px;box-sizing:border-box;font-family:monospace;letter-spacing:.02em;cursor:default;user-select:all}
.pm-form-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;color:var(--cream-d);font-size:.82rem;padding:9px 12px;box-sizing:border-box;transition:border-color .18s,box-shadow .18s;outline:none;font-family:inherit}
.pm-form-input:focus{border-color:rgba(249,115,22,.45);box-shadow:0 0 0 3px rgba(249,115,22,.08)}
.pm-form-input:disabled{opacity:.4;cursor:not-allowed}
.pm-form-textarea{resize:vertical;min-height:72px;line-height:1.45}
.pm-save-btn{width:100%;background:var(--orange);border:none;border-radius:10px;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.04em;padding:11px;cursor:pointer;transition:opacity .15s;margin-top:4px}
.pm-save-btn:hover:not(:disabled){opacity:.85}
.pm-save-btn:disabled{opacity:.5;cursor:not-allowed}
.pm-form-msg{font-size:.75rem;min-height:18px;margin-top:8px;text-align:center;transition:color .2s}
.pm-form-ok{color:#4ade80}
.pm-form-err{color:#f87171}
.pm-cooldown-badge{background:rgba(232,101,26,.15);border:1px solid rgba(232,101,26,.3);border-radius:6px;color:var(--orange);font-size:.65rem;font-weight:700;letter-spacing:.04em;padding:2px 7px;text-transform:uppercase}

/* Action buttons (single-row, right-aligned) */
.pm-action-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--cream-d);font-size:.74rem;font-weight:600;padding:6px 14px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;flex-shrink:0;font-family:inherit}
.pm-action-btn:hover{background:rgba(255,255,255,.12)}
.pm-action-btn:disabled{opacity:.5;cursor:not-allowed}
.pm-action-sm{font-size:.68rem;padding:4px 10px;border-radius:6px}
.pm-action-email{color:#60a5fa;border-color:rgba(96,165,250,.3)}
.pm-action-email:hover{background:rgba(96,165,250,.08)}
.pm-change-email-wrap{padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:8px}
.pm-action-warn{color:#fbbf24;border-color:rgba(251,191,36,.3)}
.pm-action-warn:hover{background:rgba(251,191,36,.08)}
.pm-action-danger{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#f87171;width:100%;justify-content:center;text-align:center;padding:9px 14px;font-size:.8rem;margin-top:4px}
.pm-action-danger:hover{background:rgba(239,68,68,.2)}
.pm-action-delete{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#f87171}
.pm-action-delete:hover{background:rgba(239,68,68,.25)}

/* Toggle switch */
.pm-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.pm-toggle-input{position:absolute;opacity:0;width:0;height:0}
.pm-toggle-slider{width:40px;height:22px;background:rgba(255,255,255,.12);border-radius:11px;position:relative;transition:background .2s}
.pm-toggle-slider::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s,background .2s}
.pm-toggle-input:checked + .pm-toggle-slider{background:var(--orange)}
.pm-toggle-input:checked + .pm-toggle-slider::after{transform:translateX(18px)}

/* Danger zone section */
.pm-danger-zone{border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:14px 16px;background:rgba(239,68,68,.04)}
.pm-danger-title{color:rgba(248,113,113,.7)}
.pm-danger-confirm{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.pm-danger-warning{font-size:.78rem;color:var(--dim);line-height:1.5;margin:0}
.pm-danger-warning strong{color:#f87171}
.pm-danger-input{border-color:rgba(239,68,68,.3)}
.pm-danger-input:focus{border-color:rgba(239,68,68,.6)}
.pm-danger-btns{display:flex;gap:8px}
.pm-danger-btns .pm-action-btn{flex:1;text-align:center}
@keyframes pm-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pm-danger-shake{animation:pm-shake .4s ease}

/* ── PROFILE MODAL — Avatar picker ─────────────────── */

/* ── Avatar Picker — premium redesign ── */
.pm-avatar-picker-panel{padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#0a0703}

/* Header */
.pm-av-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 12px;flex-shrink:0;position:relative;border-bottom:none}
.pm-av-header::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(249,115,22,.25),transparent)}
.pm-av-back{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:50%;color:rgba(255,255,255,.7);cursor:pointer;transition:background .15s,color .15s}
.pm-av-back:hover{background:rgba(255,255,255,.12);color:#fff}
.pm-av-header-center{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1}
.pm-av-title{font-size:.88rem;font-weight:800;letter-spacing:.01em;background:linear-gradient(90deg,#f97316,#facc15);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pm-av-subtitle{font-size:.58rem;color:rgba(255,255,255,.28);letter-spacing:.03em}

/* Filter pills */
.pm-av-filters{display:flex;gap:5px;padding:10px 18px 8px;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.pm-av-filters::-webkit-scrollbar{display:none}
.pm-av-pill{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:100px;color:rgba(255,255,255,.38);font-size:.67rem;font-weight:700;padding:4px 11px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;font-family:inherit;letter-spacing:.04em}
.pm-av-pill:hover{background:rgba(255,255,255,.09);color:rgba(255,255,255,.75)}
.pm-av-pill.active{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.38);color:#fb923c;box-shadow:0 0 10px rgba(249,115,22,.18)}
.pm-av-pill[data-rarity="legendary"].active{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.38);color:#fbbf24;box-shadow:0 0 10px rgba(245,158,11,.2)}
.pm-av-pill[data-rarity="epic"].active{background:rgba(168,85,247,.13);border-color:rgba(168,85,247,.38);color:#c084fc;box-shadow:0 0 10px rgba(168,85,247,.2)}
.pm-av-pill[data-rarity="rare"].active{background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.38);color:#60a5fa;box-shadow:0 0 10px rgba(59,130,246,.2)}
.pm-av-pill[data-rarity="common"].active{background:rgba(107,114,128,.13);border-color:rgba(107,114,128,.35);color:#9ca3af}

/* ── Flame Picker — clean rebuild ─────────────────────────────────────────
   Root problem: source images are ultra-wide banners (~5-6:1 aspect ratio).
   Any 2-column grid makes them ~220px wide × ~40px tall = strips forever.
   Solution: single-column full-width card list. At ~450px wide, each card
   shows the full image height naturally. No grid-row-height conflicts.
   ─────────────────────────────────────────────────────────────────────── */

/* Preview ring — shows the currently selected flame as a profile picture */
.av-pre{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 14px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.07)}
.av-pre-ring{width:52px;height:52px;border-radius:50%;border:2.5px solid rgba(249,115,22,.5);box-shadow:0 0 16px rgba(249,115,22,.22),0 0 0 1px rgba(249,115,22,.1);background:#1a1008;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .25s,box-shadow .25s;flex-shrink:0}
.av-pre-ring img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.av-pre-icon{font-size:1.4rem;line-height:1}
.av-pre-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.av-pre-name{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-pre-rar{font-size:.5rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

/* Scrollable card list — single column, no grid */
.fav-grid{display:flex;flex-direction:column;gap:8px;padding:8px 12px 16px;overflow-y:auto;flex:1;min-height:0}

/* Card wrapper */
.fav-card{--rc:#f97316;border-radius:10px;overflow:hidden;cursor:pointer;background:#111;border:2px solid rgba(255,255,255,.07);transition:border-color .16s,box-shadow .16s,transform .12s;user-select:none;outline:none;flex-shrink:0}
.fav-card:focus-visible{outline:2px solid var(--rc);outline-offset:2px}
.fav-card:hover{border-color:var(--rc);box-shadow:0 0 0 1px var(--rc),0 4px 18px rgba(0,0,0,.55);transform:translateY(-1px)}
.fav-card.fav-active{border-color:var(--rc) !important;box-shadow:0 0 0 2px var(--rc),0 6px 22px rgba(0,0,0,.6) !important}

/* Image area — fixed 120px height, full card width.
   At ~450px card width a 5:1 image renders at 90px natural height and cover
   fills the remaining 30px with minimal crop — far better than any 2-column
   approach which squished the same image into a 40px strip.
   object-position:center 30% keeps the upper art/characters in frame. */
.fav-thumb{position:relative;width:100%;height:0;padding-bottom:60%;overflow:hidden;background:#0a0806}
.fav-thumb-bg{position:absolute;inset:-15%;width:130%;height:130%;object-fit:cover;filter:blur(10px) brightness(.4) saturate(1.3);display:block;z-index:0;pointer-events:none}
.fav-thumb img:not(.fav-thumb-bg){position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;z-index:1}
.fav-card:hover .fav-thumb img:not(.fav-thumb-bg){transform:scale(1.03)}


/* Overlays inside thumb */
.fav-thumb-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%);z-index:1;pointer-events:none}
.fav-badge{position:absolute;top:6px;left:6px;font-size:.44rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--rc);background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.12);padding:2px 6px;border-radius:4px;line-height:1.8;pointer-events:none;z-index:2}
.fav-check{position:absolute;top:50%;right:10px;transform:translateY(-50%) scale(0);width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f97316,#facc15);display:flex;align-items:center;justify-content:center;color:#000;box-shadow:0 0 14px rgba(249,115,22,.85);transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .15s;opacity:0;z-index:3;pointer-events:none}
.fav-card.fav-active .fav-check{transform:translateY(-50%) scale(1);opacity:1}
.fav-stripe{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--rc);box-shadow:0 0 8px var(--rc);z-index:2;pointer-events:none}

/* Name row */
.fav-label{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 8px;gap:8px}
.fav-name{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.fav-rar-dot{font-size:.5rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--rc);flex-shrink:0}

/* Empty / loading */
.fav-empty,.fav-loading{text-align:center;color:rgba(255,255,255,.3);font-size:.8rem;padding:48px 0}
#pm-av-more-wrap{padding:0 18px 14px;flex-shrink:0}
.pm-av-more-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:10px;color:rgba(249,115,22,.8);font-size:.74rem;font-weight:700;padding:10px;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}
.pm-av-more-btn:hover{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.35);color:#fb923c}

/* Discord / Wallet status rows in settings */
.pm-settings-row-inline{align-items:center}
.pm-form-sublabel{font-weight:400;color:var(--dim);font-size:.72rem;margin-left:4px}
.pm-connect-badge{font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:4px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.pm-connect-badge-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#4ade80}
.pm-connect-badge-no{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--dim)}

/* Avatar ring: pointer cursor to hint it's clickable */
.pm-avatar-ring{cursor:pointer}

/* ── PROFILE MODAL — responsive ─────────────────────── */
/* Nav-clearance formula: pm-overlay padding-top + bottom padding = card's
   unavailable vertical space.
   Desktop:  88px top + 20px bottom = 108px → max-height calc(100vh - 108px)
   Mobile:   76px top + 20px bottom =  96px → max-height calc(100vh -  96px)
   Vsmall:   72px top + 16px bottom =  88px → max-height calc(100vh -  88px)
   Landscape:70px top + 10px bottom =  80px → max-height calc(100vh -  80px) */

/* Tablet (641–860px): modal fits, minor tweaks */
@media(max-width:860px){
  .pm-card{max-width:480px}
}

/* Mobile (≤640px): overlay padding-top drops to 76px (nav ends ~58px) */
@media(max-width:640px){
  .pm-overlay{padding:76px 12px 20px}
  .pm-card{border-radius:16px;max-height:calc(100vh - 96px)}
  .pm-header{padding:16px 18px 14px;gap:10px}
  .pm-avatar-ring{width:44px;height:44px;font-size:1.3rem}
  .pm-header-name{font-size:.95rem}
  .pm-tab-bar{padding:0 16px}
  .pm-tab-btn{padding:10px 14px;font-size:.75rem}
  .pm-panel{padding:16px}
  .pm-stat-grid{gap:8px}
  .pm-stat-card{padding:11px 12px}
  .pm-stat-val{font-size:.92rem}
  .pm-rarity-item{padding:3px 8px}
  .pm-rarity-lbl{font-size:.65rem}
  .pm-rarity-count{font-size:.65rem}
  .pm-game-row{padding:7px 10px}
  .pm-connect-row{padding:8px 12px}
  /* Avatar picker — mobile */
  .pm-av-header{padding:12px 16px 10px}
  .pm-av-filters{padding:8px 16px 8px;gap:5px}
  .pm-av-pill{font-size:.68rem;padding:4px 10px}
  .fav-grid{gap:6px;padding:4px 10px 12px}
  #pm-av-more-wrap{padding:0 12px 14px}
}

/* Small mobile (≤480px) */
@media(max-width:480px){
  .pm-card{border-radius:14px}
  .pm-panel{padding:14px}
  .pm-identity-name{font-size:1.1rem}
  .pm-flame-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .pm-ach-badge{font-size:.7rem;padding:3px 9px}
  .pm-settings-row{padding:9px 12px}
  .pm-settings-row-name{font-size:.78rem}
  .pm-form-input{font-size:.78rem;padding:8px 11px}
  .pm-save-btn{font-size:.78rem;padding:10px}
  .pm-toggle-slider{width:36px;height:20px}
  .pm-toggle-slider::after{width:14px;height:14px}
  .pm-toggle-input:checked + .pm-toggle-slider::after{transform:translateX(16px)}
  /* Avatar picker — small mobile */
  .fav-grid{gap:5px;padding:4px 10px 12px}
  .pm-av-header{padding:10px 14px 9px}
  .pm-av-filters{padding:7px 14px 7px;gap:4px}
  .pm-av-pill{font-size:.65rem;padding:4px 9px}
  #pm-av-more-wrap{padding:0 14px 12px}
}

/* Very small (≤380px): tightest padding, nav still ~58px from top */
@media(max-width:380px){
  .pm-overlay{padding:72px 8px 16px}
  .pm-card{border-radius:12px;max-height:calc(100vh - 88px)}
  .pm-header{padding:14px 14px 12px;gap:8px}
  .pm-panel{padding:12px}
  .pm-stat-grid{grid-template-columns:1fr 1fr;gap:6px}
  .pm-stat-card{padding:10px}
  .pm-stat-val{font-size:.82rem}
  .pm-stat-lbl{font-size:.65rem}
  .pm-rarity-row{gap:5px}
  .pm-rarity-item{padding:3px 6px}
  .pm-section-title{margin:14px 0 8px}
  .pm-tab-btn{padding:9px 10px;font-size:.72rem;letter-spacing:.03em}
  /* Avatar picker — very small */
  .fav-grid{gap:5px;padding:4px 8px 10px}
  .pm-av-header{padding:9px 12px 8px}
  .pm-av-filters{padding:6px 12px 6px;gap:4px}
  .pm-av-title{font-size:.8rem}
  #pm-av-more-wrap{padding:0 12px 10px}
}

/* Short screens — landscape phone (nav is still visible at top) */
@media(max-height:600px){
  .pm-overlay{padding:70px 16px 10px}
  .pm-card{max-height:calc(100vh - 80px)}
  .pm-header{padding:12px 20px 10px}
  .pm-avatar-ring{width:38px;height:38px;font-size:1.1rem}
  .pm-tab-btn{padding:8px 16px}
  .pm-panel{padding:14px}
  .pm-stat-grid{gap:6px}
  /* Avatar picker — landscape: shrink header chrome so grid fills space */
  .pm-av-header{padding:10px 16px 8px}
  .pm-av-filters{padding:6px 16px 6px}
  .fav-grid{gap:7px;padding:4px 16px 10px}
}
@media(max-height:480px){
  .pm-overlay{padding:64px 14px 8px}
  .pm-card{max-height:calc(100vh - 72px);border-radius:10px}
  .pm-header{padding:10px 16px 8px}
  .pm-avatar-ring{display:none}
  .pm-tab-btn{padding:7px 14px}
  /* Avatar picker — very short landscape */
  .pm-av-header{padding:8px 14px 6px}
  .pm-av-filters{padding:4px 14px 4px}
  .fav-grid{gap:5px;padding:4px 14px 8px}
}

/* Mobile HUD: ensure avatar btn is visible inside the strip */
@media(max-width:640px){
  .forge-mobile-hud .pm-mob-avatar-btn{display:flex}
}

/* ── BUY TOKENS MODAL ───────────────────────────────── */
.buy-tokens-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.buy-tokens-modal{
  background:var(--bg-card);border:1px solid rgba(232,101,26,.3);border-radius:24px;
  padding:32px;max-width:480px;width:100%;position:relative;
}
.buy-tokens-close{
  position:absolute;top:16px;right:16px;background:none;border:none;
  color:var(--dim);font-size:1.2rem;cursor:pointer;padding:4px 8px;
}
.buy-tokens-title{
  font-family:'Anton',sans-serif;font-size:1.4rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--cream);margin-bottom:6px;
}
.buy-tokens-sub{font-size:.82rem;color:var(--dim);margin-bottom:24px;line-height:1.5}
.buy-tokens-packages{display:flex;flex-direction:column;gap:12px}
.buy-pkg{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:16px 20px;cursor:pointer;transition:all .18s;
  position:relative;overflow:hidden;
}
.buy-pkg:hover{border-color:var(--orange);background:rgba(232,101,26,.07)}
.buy-pkg.featured{border-color:var(--gold);background:rgba(245,166,35,.06)}
.buy-pkg-badge{
  position:absolute;top:0;right:0;background:var(--gold);color:#000;
  font-size:.6rem;font-weight:800;padding:3px 10px;letter-spacing:.06em;
  border-radius:0 14px 0 8px;
}
.buy-pkg-left{}
.buy-pkg-tokens{
  font-family:'Anton',sans-serif;font-size:1.2rem;color:var(--orange);letter-spacing:.04em;
}
.buy-pkg-gen{font-size:.72rem;color:var(--dim);margin-top:2px}
.buy-pkg-price{
  font-family:'Share Tech Mono',monospace;font-size:.9rem;
  color:var(--cream);text-align:right;
}
.buy-pkg-xrp{font-size:.65rem;color:var(--dim);margin-top:2px}
.buy-tokens-qr{margin-top:20px;text-align:center;display:none}
.buy-tokens-qr img{width:160px;border-radius:8px;margin:0 auto 10px;display:block}
.buy-tokens-qr-hint{font-size:.75rem;color:var(--dim);line-height:1.5}
.buy-mobile-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:8px 18px;border-radius:10px;background:rgba(232,101,26,.15);
  border:1px solid rgba(232,101,26,.35);color:var(--gold-l);font-size:.8rem;font-weight:600;text-decoration:none;
}

/* ── MY FLAMES TAB ──────────────────────────────────── */
.forge-tabs{
  display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.08);
  margin:0 -28px;padding:0 28px;position:relative;z-index:5;
}
.forge-tab-btn{
  padding:12px 20px;background:none;border:none;
  font-family:'Share Tech Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;
  transition:all .18s;text-transform:uppercase;
}
.forge-tab-btn.active{color:var(--orange);border-bottom-color:var(--orange)}
.forge-tab-btn:hover{color:var(--cream-d)}

.forge-flames-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;padding:20px 0;
}
.forge-flame-card{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  aspect-ratio:1;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.forge-flame-card:hover{transform:scale(1.04);border-color:rgba(232,101,26,.35);box-shadow:0 8px 28px rgba(0,0,0,.5)}
.forge-flame-card:hover .forge-flame-overlay{opacity:1}
.forge-flame-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.forge-flame-card:hover img{transform:scale(1.06)}
.forge-flame-card.is-posted{border-color:rgba(74,222,128,.3)}
.forge-flame-rarity{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px 8px 7px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.forge-flame-rarity.rarity-common{color:#aaa}
.forge-flame-rarity.rarity-rare{color:#7aabff}
.forge-flame-rarity.rarity-epic{color:#c07aff}
.forge-flame-rarity.rarity-legendary{color:var(--gold-l)}
.forge-flame-rarity-price{
  color:var(--cream-d);font-weight:600;letter-spacing:.04em;opacity:.85;
  font-size:.85em;text-transform:none;
}
/* "Live on Board" badge */
.forge-flame-posted-badge{
  position:absolute;top:7px;right:7px;
  background:rgba(74,222,128,.18);border:1px solid rgba(74,222,128,.45);
  border-radius:6px;padding:3px 7px;
  font-size:.55rem;font-family:'Share Tech Mono',monospace;letter-spacing:.1em;
  color:#4ade80;line-height:1;pointer-events:none;
}
/* Hover overlay with action buttons */
.forge-flame-overlay{
  position:absolute;inset:0;
  background:rgba(13,9,4,.72);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:10px;opacity:0;transition:opacity .2s;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  /* When buttons overflow the card, centering can push the first one above
     the scrollable area in some browsers — `safe center` keeps everything
     reachable by falling back to start-alignment once it overflows.
     (Unsupported browsers keep the plain `center` above.) */
  justify-content:safe center;
  /* Thin, themed scrollbar — visible enough to hint "more below" without
     looking like a default browser scrollbar. */
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;
}
.forge-flame-overlay::-webkit-scrollbar{width:4px}
.forge-flame-overlay::-webkit-scrollbar-track{background:transparent}
.forge-flame-overlay::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}
.forge-flame-overlay::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}
.forge-flame-overlay-btn{
  width:100%;padding:6px 4px;border-radius:9px;flex-shrink:0;
  font-size:.66rem;line-height:1.25;font-weight:700;font-family:'Epilogue',sans-serif;letter-spacing:.03em;
  border:1px solid;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:4px;
  text-align:center;white-space:normal;
  min-height:30px; /* keeps buttons tappable on touch even when compact */
}
/* Smaller cards (narrow viewports / shrunk windows) — tighten further so
   stacked action buttons take less vertical space before scrolling kicks in. */
@media(max-width:480px){
  .forge-flames-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
  .forge-flame-overlay{gap:5px;padding:8px}
  .forge-flame-overlay-btn{font-size:.6rem;padding:5px 3px;min-height:26px}
}
.forge-flame-overlay-btn.ob-view{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--cream);
}
.forge-flame-overlay-btn.ob-view:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.forge-flame-overlay-btn.ob-post{
  background:rgba(232,101,26,.14);border-color:rgba(232,101,26,.45);color:var(--orange);
}
.forge-flame-overlay-btn.ob-post:hover{background:rgba(232,101,26,.28);border-color:var(--orange)}
.forge-flame-overlay-btn.ob-see{
  background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.3);color:#4ade80;
}
.forge-flame-overlay-btn.ob-see:hover{background:rgba(74,222,128,.18);border-color:#4ade80}
.forge-flame-overlay-btn.ob-comp{
  background:rgba(255,209,102,.12);border-color:rgba(255,209,102,.45);color:#ffd166;
}
.forge-flame-overlay-btn.ob-comp:hover{background:rgba(255,209,102,.24);border-color:#ffd166}
.forge-flame-overlay-btn.ob-comp.is-entered{
  background:rgba(255,209,102,.18);border-color:#ffd166;color:#ffd166;cursor:default;
}
.forge-flame-overlay-btn.ob-comp.is-locked{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);color:var(--dim);cursor:not-allowed;
}
.forge-flame-overlay-btn.ob-mint{
  background:rgba(66,133,244,.12);border-color:rgba(66,133,244,.45);color:#7aabff;
}
.forge-flame-overlay-btn.ob-mint:hover{background:rgba(66,133,244,.24);border-color:#4285f4}
.forge-flame-overlay-btn.ob-minted{
  background:rgba(66,133,244,.1);border-color:rgba(66,133,244,.35);color:#7aabff;
}

.forge-flames-empty{
  grid-column:1/-1;width:100%;
  text-align:center;padding:60px 24px;color:var(--dim);
  font-size:.88rem;line-height:1.7;
}

/* ── Flame detail modal (click a flame card) ─────────── */
.flame-detail-modal{
  position:fixed;inset:0;z-index:5200;
  background:rgba(13,9,4,.94);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  overflow-y:auto; /* lets the page scroll if the card is taller than the viewport */
}
.flame-detail-inner{
  background:var(--bg-card);border:1px solid rgba(255,255,255,.1);
  border-radius:22px;max-width:500px;width:100%;
  /* Cap height to the viewport (minus modal padding) — the inner
     .flame-detail-scroll wrapper handles scrolling (see below).
     `100vh` on mobile browsers is measured against the LARGEST possible
     viewport (toolbars hidden), so on first paint — with the address
     bar still showing — the card is taller than what's actually
     visible, forcing the user to scroll the page just to reveal the
     rest of the card. `100dvh` (dynamic viewport height) tracks the
     real, current visible area and is layered on top as a progressive
     enhancement; browsers that don't support it ignore the line and
     keep the 100vh fallback above. */
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;
  margin:auto;
  /* This box itself does NOT scroll — see .flame-detail-scroll. Keeping
     it non-scrolling means .flame-detail-close (positioned absolute
     against THIS box) never shifts position depending on whether a
     scrollbar happens to be showing on the content below it (a
     scrollbar narrows the scrolling element's padding box, which would
     otherwise shift a `right:Npx`-positioned element left/right between
     "fits on screen" and "needs to scroll" — i.e. between closing and
     reopening with a differently-sized flame). overflow:hidden also
     clips content to the rounded corners. */
  overflow:hidden;
  animation:modal-rise .3s cubic-bezier(.36,1.56,.64,1);
  position:relative;
}
/* Scrolls the actual card content (image + body) — kept separate from
   .flame-detail-inner so the close button's position is never affected
   by this element's scroll offset or scrollbar (see comment above). */
.flame-detail-scroll{
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  min-height:0;
}
/* Show the WHOLE flame image (no cropping) — letterbox with a blurred,
   zoomed copy of the same image filling the gaps instead of empty space.
   Mirrors .drop-view-img-wrap: a fixed-aspect (square) box so the image
   always fills a stable, centered area regardless of the flame's own
   aspect ratio — width:100%/max-height alone let the browser shrink the
   replaced element's used WIDTH to preserve aspect ratio once max-height
   kicked in, which left tall/portrait flames pillarboxed off-center
   after swapping src via prev/next. aspect-ratio keeps the wrap's box
   constant so object-fit:contain can center reliably for ANY image size
   (square, portrait, landscape). On shorter viewports the media queries
   below switch to a flat vh-based height (dropping the square ratio) so
   the action buttons and vote-count footer stay fully visible. */
.flame-detail-img-wrap{
  position:relative;width:100%;aspect-ratio:1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#000;flex-shrink:0;
}
.flame-detail-img-bg{
  position:absolute;inset:-10px;
  background-size:cover;background-position:center;
  filter:blur(22px) brightness(.55) saturate(1.2);
  transform:scale(1.15);
}
.flame-detail-img{position:relative;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .14s ease}
.flame-detail-img-bg{transition:opacity .14s ease}
.flame-detail-img-wrap.fd-fade .flame-detail-img,
.flame-detail-img-wrap.fd-fade .flame-detail-img-bg{opacity:0}

/* On shorter / landscape viewports, drop the square aspect-ratio in favor
   of a flat vh-based height so the name, prompt, action buttons, and
   vote-count footer all stay visible without excessive scrolling
   (mirrors .drop-view-img-wrap). */
@media (max-height:760px){
  .flame-detail-img-wrap{aspect-ratio:auto;height:42vh;height:42dvh}
}
@media (max-height:600px){
  .flame-detail-img-wrap{aspect-ratio:auto;height:38vh;height:38dvh}
}
@media (max-height:480px){
  .flame-detail-img-wrap{aspect-ratio:auto;height:30vh;height:30dvh}
  .flame-detail-body{padding:14px 18px 18px;gap:10px}
}

/* Very narrow / shrinking windows — tighten padding and let the prompt
   box and buttons reflow instead of overflowing horizontally. */
@media (max-width:380px){
  .flame-detail-modal{padding:10px}
  .flame-detail-body{padding:14px 16px 18px;gap:10px}
  /* Stack every action button full-width — at this width even two short
     labels side by side get too cramped to read comfortably. */
  .flame-detail-btn{flex-basis:100%}
}
/* Prev/Next navigation arrows — shared by the Flame Detail and Drop View
   modals. Both wraps (.flame-detail-img-wrap / .drop-view-img-wrap) are
   `display:flex;align-items:center;justify-content:center`, so rather than
   `top:50%; transform:translateY(-50%)` (which resolves against an
   ambiguous containing-block height once `aspect-ratio`/`max-height` are
   involved, and visibly drifted to the bottom of the card), we deliberately
   leave `top`/`bottom` unset and let the flex container's own vertical
   centering position these absolutely-positioned children — robust at
   every breakpoint with no per-size vertical offset math. */
/* Prev/next arrows live inside a full-cover flex row (.media-nav-overlay)
   so they're positioned via normal flex layout (space-between +
   align-items:center) instead of position:absolute + percentage offsets.
   Percentage `top` on an absolutely-positioned child of an
   aspect-ratio-sized box was resolving inconsistently across browsers —
   one arrow would center fine while the other drifted to the bottom of
   the image. A flex overlay sidesteps that entirely: both arrows are
   guaranteed vertically centered and pinned to opposite ends. */
.media-nav-overlay{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;pointer-events:none;
}
.media-nav-arrow{
  position:static;pointer-events:auto;
  width:38px;height:38px;min-width:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  /* No backdrop-filter here on purpose: this button sits inside an
     overflow:hidden image wrap that itself sits inside a rounded,
     scrollable card (.drop-view-inner). backdrop-filter on a child of
     a clipped/rounded ancestor is notoriously buggy in Chrome/Safari —
     it can paint a smeared "halo" of the blurred backdrop bleeding
     outside the rounded card edge. A solid, slightly more opaque fill
     gives the same frosted look without the rendering bug. */
  background:rgba(13,9,4,.78);
  color:var(--cream-d);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;
  flex-shrink:0;padding:0;
}
.media-nav-arrow svg{width:16px;height:16px;flex-shrink:0}
.media-nav-arrow:hover{border-color:var(--orange);color:var(--orange);background:rgba(13,9,4,.85)}
.media-nav-arrow:active{transform:scale(.9)}

/* Keep arrows comfortably sized as the image area shrinks on shorter
   viewports, mirroring the img-wrap height breakpoints. */
@media (max-height:760px){
  .media-nav-arrow{width:34px;height:34px;min-width:34px}
  .media-nav-arrow svg{width:14px;height:14px}
}
@media (max-height:600px){
  .media-nav-arrow{width:30px;height:30px;min-width:30px}
  .media-nav-arrow svg{width:12px;height:12px}
}

/* Phones: smaller arrows, tighter inset */
@media (max-width:480px){
  .media-nav-overlay{padding:0 8px}
  .media-nav-arrow{width:32px;height:32px;min-width:32px}
  .media-nav-arrow svg{width:13px;height:13px}
}
@media (max-width:380px){
  .media-nav-arrow{width:28px;height:28px;min-width:28px}
  .media-nav-arrow svg{width:11px;height:11px}
}

.flame-detail-rarity-overlay{
  position:absolute;top:12px;left:12px;
  font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.12em;
  padding:4px 12px;border-radius:100px;background:rgba(13,9,4,.75);backdrop-filter:blur(4px);border:1px solid;
}
.flame-detail-rarity-overlay.rarity-legendary{color:var(--gold);border-color:rgba(245,166,35,.45)}
.flame-detail-rarity-overlay.rarity-epic{color:#b77aff;border-color:rgba(183,122,255,.4)}
.flame-detail-rarity-overlay.rarity-rare{color:#7aabff;border-color:rgba(122,171,255,.4)}
.flame-detail-rarity-overlay.rarity-common{color:#aaa;border-color:rgba(255,255,255,.15)}
.flame-detail-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:rgba(13,9,4,.65);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);color:var(--cream-d);
  font-size:.85rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.flame-detail-close:hover{background:rgba(13,9,4,.9)}
.flame-detail-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px;flex-shrink:0}
.flame-detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.flame-detail-xp{font-size:.72rem;color:var(--gold);font-family:'Share Tech Mono',monospace}
.flame-detail-prompt{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:10px 14px;
  font-size:.78rem;color:var(--dim);line-height:1.6;font-style:italic;
}
.flame-detail-date{font-size:.7rem;color:var(--dim);font-family:'Share Tech Mono',monospace}
/* Flex with a 50% basis (not a fixed grid) so buttons normally pair up
   into equal-width columns — and each flex line stretches its items to
   the same height, so a long label like "🔒 Entry Locked (2 votes)"
   wrapping to 2 lines no longer leaves its row neighbor looking
   mismatched/shorter. A lone button on its own line (e.g. only one
   action available) naturally grows to fill the full row instead of
   leaving an empty gap. .fdb-save and the vote-count footer force a
   basis of 100% so they always get their own full-width row. */
.flame-detail-actions{display:flex;flex-wrap:wrap;gap:8px}
.flame-detail-btn{
  flex:1 1 calc(50% - 4px);
  min-height:38px;padding:10px 8px;border-radius:10px;
  font-size:.75rem;font-weight:700;font-family:'Epilogue',sans-serif;letter-spacing:.05em;
  border:1px solid;cursor:pointer;transition:all .18s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;line-height:1.3;
}
.flame-detail-btn.fdb-community{
  background:rgba(232,101,26,.12);border-color:rgba(232,101,26,.4);color:var(--orange);
}
.flame-detail-btn.fdb-community:hover{background:rgba(232,101,26,.24);border-color:var(--orange)}
.flame-detail-btn.fdb-posted{
  background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.35);color:#4ade80;cursor:default;
}
.flame-detail-btn.fdb-see{
  background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.3);color:#4ade80;
}
.flame-detail-btn.fdb-see:hover{background:rgba(74,222,128,.18);border-color:#4ade80}
.flame-detail-btn.fdb-save{
  flex-basis:100%;
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--cream-d);
}
.flame-detail-btn.fdb-save:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.flame-detail-btn.fdb-comp{
  background:rgba(255,209,102,.12);border-color:rgba(255,209,102,.45);color:#ffd166;
}
.flame-detail-btn.fdb-comp:hover{background:rgba(255,209,102,.24);border-color:#ffd166}
.flame-detail-btn.fdb-comp.is-entered{
  background:rgba(255,209,102,.18);border-color:#ffd166;color:#ffd166;cursor:default;
}
.flame-detail-btn.fdb-comp.is-locked{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);color:var(--dim);cursor:not-allowed;
}
.flame-detail-btn.fdb-mint{
  background:rgba(66,133,244,.12);border-color:rgba(66,133,244,.45);color:#7aabff;
}
.flame-detail-btn.fdb-mint:hover{background:rgba(66,133,244,.24);border-color:#4285f4}
.flame-detail-btn.fdb-minted{
  background:rgba(66,133,244,.1);border-color:rgba(66,133,244,.35);color:#7aabff;
}
.flame-detail-votes{
  flex-basis:100%;font-size:.7rem;color:var(--dim);text-align:center;
  font-family:'Share Tech Mono',monospace;
}

/* ── Factory → Community bridge banner ───────────────── */
.forge-community-bridge{
  background:linear-gradient(135deg,rgba(232,101,26,.1) 0%,rgba(245,166,35,.06) 100%);
  border:1px solid rgba(232,101,26,.22);border-radius:16px;
  padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 20px;
}
.forge-bridge-icon{font-size:1.5rem;flex-shrink:0}
.forge-bridge-text{flex:1;min-width:160px}
.forge-bridge-text strong{font-size:.85rem;color:var(--cream);display:block;margin-bottom:3px}
.forge-bridge-text span{font-size:.75rem;color:var(--dim);line-height:1.5}
.forge-bridge-btn{
  padding:8px 18px;border-radius:10px;font-size:.75rem;font-weight:700;
  font-family:'Epilogue',sans-serif;letter-spacing:.05em;
  background:rgba(232,101,26,.14);border:1px solid rgba(232,101,26,.4);
  color:var(--orange);cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0;
}
.forge-bridge-btn:hover{background:rgba(232,101,26,.28);border-color:var(--orange)}

/* ── My Flames → Mint info banner ────────────────────── */
.forge-mint-bridge{
  background:linear-gradient(135deg,rgba(66,133,244,.1) 0%,rgba(122,171,255,.06) 100%);
  border:1px solid rgba(66,133,244,.25);border-radius:16px;
  padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 20px;
}
.forge-mint-bridge .forge-bridge-icon{color:#7aabff}
.forge-mint-bridge .forge-bridge-text strong{color:var(--cream)}
.forge-mint-bridge .forge-bridge-text span{color:var(--dim)}

/* ── Community → Factory bridge (inside board) ───────── */
.board-factory-cta{
  background:linear-gradient(135deg,rgba(245,166,35,.08),rgba(232,101,26,.05));
  border:1px solid rgba(245,166,35,.2);border-radius:16px;
  padding:20px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:24px;
}
.board-factory-cta-text{flex:1;min-width:180px}
.board-factory-cta-text strong{font-size:.9rem;color:var(--cream);display:block;margin-bottom:4px}
.board-factory-cta-text span{font-size:.78rem;color:var(--dim);line-height:1.5}

@media(max-width:860px){
  .forge-tabs{margin:0 -16px;padding:0 16px}
  .forge-flames-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
  .buy-tokens-modal{padding:24px 20px}
}

/* ── THE BOARD (LilCommunity) ───────────────────────── */
#page-community{position:relative;overflow-x:clip;padding-top:80px}

/* Board header */
.board-header{
  position:relative;min-height:260px;
  display:flex;align-items:center;
  padding:100px max(16px,4vw) 48px;margin-top:-80px;
  overflow-x:clip;
}
.board-header-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 60% 50%,rgba(232,101,26,.15) 0%,rgba(13,9,4,0) 70%),
    radial-gradient(ellipse at 20% 80%,rgba(245,166,35,.08) 0%,transparent 50%),
    linear-gradient(to bottom,rgba(13,9,4,.78) 0%,rgba(13,9,4,.55) 45%,var(--bg) 100%),
    url('Home%20Pics/LilCommunity.jpg');
  background-size:cover;
  background-position:center 35%;
}
.board-header::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(to bottom,rgba(13,9,4,0) 50%,var(--bg) 100%);
}
.board-header-inner{
  position:relative;z-index:2;
  max-width:1100px;margin:0 auto;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;min-width:0;
}
.board-header-left{max-width:600px;min-width:0;flex:1 1 220px;overflow:hidden}
.board-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.6rem,7vw,4rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.05;
  color:var(--cream);margin-bottom:12px;
  overflow-wrap:break-word;word-break:break-word;
  max-width:100%;
}
.board-sub{font-size:clamp(.8rem,2.2vw,.95rem);color:var(--cream-d);line-height:1.65;max-width:480px}
.board-stats{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:4px;flex-shrink:0;align-self:flex-end}
.board-stat{text-align:center;min-width:56px}
@media(max-width:600px){
  .board-header-inner{align-items:flex-start;flex-direction:column}
  .board-stats{flex-direction:row;align-self:auto;justify-content:flex-start;gap:24px;padding-top:4px}
}
.board-stat-num{
  font-family:'Anton',sans-serif;font-size:clamp(1.4rem,3vw,2rem);
  color:var(--gold);text-shadow:var(--glow-g);
}
.board-stat-label{font-size:.7rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}

/* XRP-given teaser stat — subtle highlight so it stands out as
   "something new" without looking like a fully live feature yet. */
.board-stat-xrp .board-stat-num{color:#00d4aa;text-shadow:0 0 12px rgba(0,212,170,.35)}
.board-stat-xrp .board-stat-label{color:#00d4aa}

/* Board sections */
.board-section{padding:0 max(16px,4vw) 40px}
.board-section-wrap{max-width:1100px;margin:0 auto;width:100%}
.board-section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.board-section-title{
  font-family:'Anton',sans-serif;font-size:1.2rem;letter-spacing:.04em;
  color:var(--cream);
}
.board-section-sub{font-size:.8rem;color:var(--dim)}

/* Filter tabs */
.board-filter-tabs{display:flex;gap:6px;flex-wrap:wrap}
.board-tab{
  padding:6px 16px;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--cream-d);cursor:pointer;
  transition:all .18s;
}
.board-tab:hover{border-color:rgba(232,101,26,.4);color:var(--orange)}
.board-tab.active{
  border-color:var(--orange);background:rgba(232,101,26,.12);
  color:var(--orange);
}

/* Empty state */
.board-empty{
  text-align:center;padding:60px 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.board-empty-icon{font-size:3rem;animation:idle-float 4s ease-in-out infinite}
.board-empty-title{font-family:'Anton',sans-serif;font-size:1.4rem;letter-spacing:.04em;color:var(--cream)}
.board-empty-sub{font-size:.88rem;color:var(--dim);line-height:1.7;max-width:380px}

/* ── Drop detail view modal ──────────────────────────── */
.drop-view-modal{
  position:fixed;inset:0;z-index:5100;
  background:rgba(13,9,4,.93);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  overflow-y:auto; /* lets the page scroll if the card is taller than the viewport */
}
.drop-view-inner{
  background:var(--bg-card);border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  max-width:480px;width:100%;
  /* Cap height to the viewport; the inner .drop-view-scroll wrapper
     handles scrolling so the image is never cropped/cut off and the
     actions stay reachable. See .flame-detail-inner for why both the
     100vh and 100dvh declarations are kept (mobile toolbar resize). */
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;
  /* This box itself does NOT scroll — see .drop-view-scroll. Keeping it
     non-scrolling means .drop-view-close (positioned absolute against
     THIS box) can never be dragged off to the side or clipped by a
     leftover scroll offset on reopen, regardless of how tall/wide the
     scrollable content inside gets. overflow:hidden also clips content
     to the rounded corners. */
  overflow:hidden;
  margin:auto;
  position:relative;
  animation:modal-rise .3s cubic-bezier(.36,1.56,.64,1);
}
/* Scrolls the actual card content (image + body) — kept separate from
   .drop-view-inner so the close button's position is never affected by
   this element's scroll offset (see .drop-view-inner comment above). */
.drop-view-scroll{
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  min-height:0;
}
/* Show the WHOLE image (no cropping) — letterbox instead of cover-cropping,
   and cap its height so it never pushes the rest of the card off-screen.
   A blurred, zoomed copy of the same image fills the letterbox space
   behind it so there's no flat black bars. */
.drop-view-img-wrap{
  /* Fixed-aspect box (mirrors .flame-detail-img-wrap) so the image
     always fills a stable, centered area — width:100%/max-height:60vh
     on the <img> alone let the browser shrink the replaced element's
     used WIDTH to preserve aspect ratio once max-height kicked in,
     which left tall/portrait images pillarboxed off-center after
     swapping src via prev/next. aspect-ratio keeps the wrap's box
     constant so object-fit:contain can center reliably. */
  position:relative;width:100%;aspect-ratio:1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#000;flex-shrink:0;
}
.drop-view-img-bg{
  position:absolute;inset:-10px;
  background-size:cover;background-position:center;
  filter:blur(22px) brightness(.55) saturate(1.2);
  transform:scale(1.15);
}
.drop-view-img{
  position:relative;width:100%;height:100%;object-fit:contain;display:block;
  transition:opacity .14s ease;
}
.drop-view-img-bg{transition:opacity .14s ease}
.drop-view-img-wrap.fd-fade .drop-view-img,
.drop-view-img-wrap.fd-fade .drop-view-img-bg{opacity:0}
.drop-view-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px}
.drop-view-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.drop-view-name{font-family:'Anton',sans-serif;font-size:1.2rem;letter-spacing:.04em;color:var(--cream);line-height:1.2}
.drop-view-rarity{
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.12em;
  padding:4px 12px;border-radius:100px;
  background:rgba(13,9,4,.5);border:1px solid;white-space:nowrap;flex-shrink:0;
}
.drop-view-rarity.rarity-legendary{color:var(--gold);border-color:rgba(245,166,35,.4)}
.drop-view-rarity.rarity-epic{color:#b77aff;border-color:rgba(183,122,255,.35)}
.drop-view-rarity.rarity-rare{color:#7aabff;border-color:rgba(122,171,255,.35)}
.drop-view-rarity.rarity-common{color:#aaa;border-color:rgba(255,255,255,.14)}
.drop-view-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.75rem;color:var(--dim)}
.drop-view-meta span{display:flex;align-items:center;gap:4px}
.drop-view-prompt{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:10px 13px;
  font-size:.78rem;color:var(--dim);line-height:1.6;font-style:italic;
}
.drop-view-actions{display:flex;gap:8px}
.drop-view-vote-btn{
  flex:1;padding:10px 0;border-radius:10px;font-size:.78rem;font-weight:700;
  font-family:'Epilogue',sans-serif;letter-spacing:.05em;
  cursor:pointer;transition:all .18s;border:1px solid;
}
.drop-view-vote-btn.voted{background:rgba(232,101,26,.15);border-color:rgba(232,101,26,.4);color:var(--orange)}
.drop-view-vote-btn.unvoted{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--cream-d)}
.drop-view-vote-btn:hover{border-color:rgba(232,101,26,.5);color:var(--orange);background:rgba(232,101,26,.1)}
.drop-view-icon-btn{
  flex:0 0 auto;width:42px;display:flex;align-items:center;justify-content:center;
  padding:10px 0;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:var(--cream-d);cursor:pointer;transition:all .18s;
}
.drop-view-icon-btn:hover{border-color:rgba(232,101,26,.5);color:var(--orange);background:rgba(232,101,26,.1)}
.drop-view-icon-btn svg{width:16px;height:16px;flex-shrink:0;display:block}
.drop-view-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  /* Solid fill instead of backdrop-filter — see .media-nav-arrow comment:
     blurred backdrops on elements near the rounded edge of this
     scrollable card can bleed outside the card's border-radius. */
  background:rgba(13,9,4,.82);
  border:1px solid rgba(255,255,255,.12);
  color:var(--cream-d);font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.drop-view-close:hover{background:rgba(13,9,4,.9)}

/* ── DROP MINTING — minted badge + mint CTA ─────────────── */
#drop-view-mint-row{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.drop-view-minted-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.1em;
  padding:4px 10px;border-radius:100px;white-space:nowrap;
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);color:#4ade80;
  text-decoration:none;cursor:pointer;
}
.drop-view-minted-badge:hover{background:rgba(74,222,128,.18)}
.drop-view-mint-btn{
  width:100%;padding:11px 0;border-radius:10px;font-size:.8rem;font-weight:700;
  font-family:'Epilogue',sans-serif;letter-spacing:.05em;text-align:center;
  cursor:pointer;transition:all .18s;border:1px solid rgba(245,166,35,.4);
  background:linear-gradient(135deg,rgba(232,101,26,.18),rgba(245,166,35,.12));
  color:var(--gold-l);
}
.drop-view-mint-btn:hover{border-color:var(--gold);background:linear-gradient(135deg,rgba(232,101,26,.28),rgba(245,166,35,.2))}
.drop-view-mint-btn:disabled{opacity:.5;cursor:not-allowed}

.board-card-minted-badge{
  position:absolute;bottom:8px;right:8px;
  font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.08em;
  padding:3px 8px;border-radius:6px;color:#4ade80;
  background:rgba(13,9,4,.75);backdrop-filter:blur(4px);
  border:1px solid rgba(74,222,128,.4);white-space:nowrap;
}

/* ── MINT PAYMENT MODAL ──────────────────────────────────── */
.mint-pay-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:6000;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.mint-pay-modal{
  background:var(--bg-card);border:1px solid rgba(232,101,26,.3);border-radius:24px;
  padding:32px;max-width:420px;width:100%;position:relative;text-align:center;
}
/* Pin the close button to the modal's top-right corner regardless of
   content (mint vs. claim mode swap text/height) or viewport size —
   !important guards against any inline style or future rule accidentally
   knocking this back into normal flow, which previously made it render
   centered above the title on the claim-NFT card. */
.mint-pay-close{
  position:absolute !important;top:16px !important;right:16px !important;
  left:auto !important;margin:0 !important;
  background:none;border:none;z-index:2;
  color:var(--dim);font-size:1.2rem;cursor:pointer;padding:4px 8px;
}
.mint-pay-title{
  font-family:'Anton',sans-serif;font-size:1.3rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--cream);margin-bottom:6px;
}
.mint-pay-sub{font-size:.8rem;color:var(--dim);margin-bottom:18px;line-height:1.5}
.mint-pay-price{
  font-family:'Share Tech Mono',monospace;font-size:1.4rem;color:var(--gold);margin-bottom:18px;
}
.mint-pay-qr img{width:160px;border-radius:8px;margin:0 auto 10px;display:block}
.mint-pay-status{font-size:.75rem;color:var(--dim);line-height:1.5;margin-top:10px;min-height:1.2em}
.mint-pay-status.is-error{color:#ff7a7a}
.mint-pay-status.is-success{color:#4ade80}

/* On shorter viewports, drop the square aspect-ratio in favor of a flat
   vh-based height so the name, votes, prompt, and vote button all stay
   visible without excessive scrolling (mirrors .flame-detail-img-wrap). */
@media (max-height:760px){
  .drop-view-img-wrap{aspect-ratio:auto;height:42vh}
}
@media (max-height:600px){
  .drop-view-img-wrap{height:34vh}
}
@media (max-height:480px){
  .drop-view-img-wrap{height:28vh}
}
@media (max-width:380px){
  .drop-view-modal{padding:10px}
  .drop-view-body{padding:14px 16px 18px;gap:10px}
}

/* Generic on-brand confirm modal (showConfirmModal in forge.js) — sits
   above everything, including the drop-view modal, since it can be
   triggered from inside it (e.g. casting a competition vote). */
.confirm-modal{
  position:fixed;inset:0;z-index:6000;
  background:rgba(13,9,4,.85);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.confirm-modal-inner{
  background:var(--bg-card);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;max-width:360px;width:100%;
  padding:26px 24px 22px;text-align:center;
  animation:modal-rise .3s cubic-bezier(.36,1.56,.64,1);
}
.confirm-modal-icon{font-size:2.2rem;line-height:1;margin-bottom:10px}
.confirm-modal-title{font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.03em;color:var(--cream);margin-bottom:8px}
.confirm-modal-msg{font-size:.82rem;color:var(--dim);line-height:1.6;margin-bottom:20px}
.confirm-modal-actions{display:flex;gap:10px}
.confirm-modal-btn{
  flex:1;padding:11px 0;border-radius:10px;font-size:.78rem;font-weight:700;
  font-family:'Epilogue',sans-serif;letter-spacing:.05em;
  cursor:pointer;transition:all .18s;border:1px solid;
}
.confirm-modal-cancel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--cream-d)}
.confirm-modal-cancel:hover{border-color:rgba(255,255,255,.25);color:var(--cream)}
.confirm-modal-ok{background:linear-gradient(135deg,var(--orange),var(--gold));border-color:transparent;color:#13100c}
.confirm-modal-ok:hover{filter:brightness(1.08)}
@media (max-width:380px){
  .confirm-modal-inner{padding:20px 18px 18px;max-width:100%}
  .confirm-modal-actions{gap:8px}
}

/* Post modal */
.board-post-modal{
  position:fixed;inset:0;z-index:5000;
  background:rgba(13,9,4,.92);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.board-post-inner{
  background:var(--bg-card);border:1px solid rgba(232,101,26,.3);
  border-radius:20px;padding:32px;
  max-width:420px;width:100%;
  position:relative;
  animation:modal-rise .3s cubic-bezier(.36,1.56,.64,1);
}
@keyframes modal-rise{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.board-post-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:32px;height:32px;min-width:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:var(--cream-d);font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
  cursor:pointer;transition:background .15s,color .15s,transform .15s;
}
.board-post-close:hover{background:rgba(255,255,255,.16);color:var(--cream);transform:scale(1.06)}
.board-post-title{
  font-family:'Anton',sans-serif;font-size:1.3rem;letter-spacing:.05em;
  color:var(--cream);margin-bottom:20px;
  padding-right:36px;
}
/* Show the WHOLE flame image (no cropping) — letterbox with a blurred,
   zoomed copy of the same image filling the gaps instead of empty space. */
.board-post-preview{
  position:relative;border-radius:12px;overflow:hidden;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  max-height:280px;background:#000;
}
.board-post-img-bg{
  position:absolute;inset:-10px;
  background-size:cover;background-position:center;
  filter:blur(22px) brightness(.55) saturate(1.2);
  transform:scale(1.15);
}
.board-post-img{position:relative;width:100%;max-height:280px;display:block;object-fit:contain}
@media (max-height:760px){
  .board-post-preview,.board-post-img{max-height:200px}
}
@media (max-height:600px){
  .board-post-preview,.board-post-img{max-height:160px}
}
.board-post-rarity-badge{
  position:absolute;top:8px;right:8px;
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.1em;
  padding:3px 9px;border-radius:100px;
  background:rgba(13,9,4,.8);backdrop-filter:blur(4px);
  color:var(--gold-l);border:1px solid var(--gold);
}
.board-post-input{
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:12px 14px;color:var(--cream);
  font-size:.9rem;font-family:inherit;
  transition:border-color .2s;box-sizing:border-box;
}
.board-post-input:focus{outline:none;border-color:rgba(232,101,26,.5)}
.board-post-input::placeholder{color:var(--dim)}

/* ── Overlay wallet identifier (mobile sidebar) ──────── */
.overlay-wallet-section{
  margin:0 28px 24px;padding:14px 18px;
  border-radius:14px;background:rgba(232,101,26,.07);
  border:1px solid rgba(232,101,26,.2);
  display:flex;align-items:center;gap:12px;
}
.overlay-wallet-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.overlay-wallet-info{flex:1;min-width:0}
.overlay-wallet-label{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.1em;color:var(--orange);text-transform:uppercase;margin-bottom:2px}
.overlay-wallet-addr{font-family:'Share Tech Mono',monospace;font-size:.75rem;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay-wallet-lvl{font-size:.65rem;color:var(--gold);font-weight:700;margin-top:2px}
.overlay-wallet-disc{
  font-size:.65rem;padding:5px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:var(--dim);cursor:pointer;white-space:nowrap;transition:all .15s;
}
.overlay-wallet-disc:hover{border-color:rgba(232,101,26,.4);color:var(--orange)}
.overlay-connect-strip{
  margin:0 28px 24px;
}
.overlay-connect-strip button{
  width:100%;padding:11px;border-radius:12px;
  background:linear-gradient(135deg,var(--orange),var(--gold));
  color:#000;font-weight:800;font-size:.82rem;letter-spacing:.06em;
  border:none;cursor:pointer;transition:opacity .15s;
}
.overlay-connect-strip button:hover{opacity:.88}

/* ── Community ticker ────────────────────────────────── */
.community-ticker{
  background:rgba(232,101,26,.08);
  border-top:1px solid rgba(232,101,26,.15);
  border-bottom:1px solid rgba(232,101,26,.15);
  padding:10px 0;overflow:hidden;position:relative;
}
.community-ticker-inner{
  display:flex;gap:48px;
  animation:ticker-scroll 30s linear infinite;
  white-space:nowrap;will-change:transform;
}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.community-ticker-item{
  font-family:'Share Tech Mono',monospace;font-size:.72rem;
  color:var(--cream-d);letter-spacing:.06em;flex-shrink:0;
}
.community-ticker-item span{color:var(--orange);font-weight:700}

/* ══════════════════════════════════════════════════════════
   WEEKLY COMPETITION
══════════════════════════════════════════════════════════ */
.comp-section{padding:0 max(16px,4vw) 40px}
.comp-wrap{max-width:1100px;margin:0 auto}

.comp-banner{
  background:linear-gradient(135deg,rgba(245,166,35,.11) 0%,rgba(232,101,26,.06) 55%,rgba(13,9,4,0) 100%);
  border:1px solid rgba(245,166,35,.22);border-radius:22px;
  padding:28px 28px 24px;position:relative;overflow:hidden;
}
.comp-banner::before{
  content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,166,35,.1) 0%,transparent 70%);pointer-events:none;
}
.comp-banner::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.2),transparent);
}
.comp-banner-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:16px;margin-bottom:22px;
}
.comp-eyebrow{
  font-size:.62rem;font-family:'Share Tech Mono',monospace;letter-spacing:.18em;
  color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.comp-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.comp-eyebrow.is-paused{color:#ffb400}
.comp-eyebrow.is-paused .comp-eyebrow-dot{background:#ffb400;box-shadow:0 0 8px #ffb400;animation:none}
.comp-rarity-info{
  position:relative;cursor:pointer;
}
.comp-rarity-tooltip{
  display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:50;
  width:max-content;max-width:min(240px,calc(100vw - 40px));
  background:#1a1410;border:1px solid rgba(245,166,35,.3);
  border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-size:.7rem;line-height:1.6;color:var(--dim);white-space:normal;
  text-align:left;
}
.comp-rarity-info.open .comp-rarity-tooltip{display:block}
.comp-rarity-tooltip-title{
  font-family:'Anton',sans-serif;font-size:.7rem;letter-spacing:.05em;
  color:var(--gold);margin-bottom:6px;white-space:nowrap;
}
.comp-rarity-tooltip-row{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
@media (max-width:520px){
  .comp-rarity-tooltip{max-width:min(200px,calc(100vw - 32px))}
}
.comp-title{
  font-family:'Anton',sans-serif;font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:.04em;color:var(--cream);line-height:1.1;margin-bottom:4px;
}

.comp-countdown{
  background:rgba(0,0,0,.4);border:1px solid rgba(245,166,35,.25);
  border-radius:14px;padding:12px 20px;text-align:center;min-width:130px;flex-shrink:0;
}
.comp-countdown-label{
  font-size:.58rem;font-family:'Share Tech Mono',monospace;letter-spacing:.14em;
  color:var(--dim);margin-bottom:6px;text-transform:uppercase;
}
.comp-countdown-time{
  font-family:'Anton',sans-serif;font-size:1.35rem;color:var(--gold);
  letter-spacing:.04em;line-height:1;
}

/* XRP prize pool banner — real-money prizes, shown only when the admin
   has configured + publicly enabled them for this competition. */
.comp-xrp-prize-banner{
  background:linear-gradient(135deg,rgba(0,212,170,.12),rgba(245,166,35,.08));
  border:1px solid rgba(0,212,170,.3);border-radius:12px;
  padding:12px 16px;margin-bottom:16px;text-align:center;
}
.comp-xrp-prize-title{
  font-family:'Anton',sans-serif;letter-spacing:.05em;font-size:.95rem;
  color:#00d4aa;margin-bottom:6px;
}
.comp-xrp-prize-breakdown{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-family:'Share Tech Mono',monospace;font-size:.78rem;color:var(--cream-d);
}

/* Prize pills row */
.comp-prizes-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
.comp-prize-pill{
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.3);border:1px solid rgba(245,166,35,.18);
  border-radius:100px;padding:5px 14px;font-size:.68rem;
  font-family:'Share Tech Mono',monospace;color:var(--gold);letter-spacing:.06em;
  transition:border-color .2s;
}
.comp-prize-pill:hover{border-color:rgba(245,166,35,.4)}
.comp-prize-pill.p-1st{border-color:rgba(245,166,35,.35);background:rgba(245,166,35,.07)}

/* Eligibility gate */
.comp-gate{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(245,166,35,.05);border:1px solid rgba(245,166,35,.18);
  border-radius:14px;padding:14px 18px;margin-bottom:20px;
}
.comp-gate-icon{font-size:1.5rem;flex-shrink:0}
.comp-gate-text{flex:1;font-size:.78rem;color:var(--dim);line-height:1.6;min-width:160px}
.comp-gate-text strong{color:var(--cream)}

/* Standings podium grid */
.comp-standings{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin-bottom:20px;align-items:end;
}
@media(max-width:700px){.comp-standings{grid-template-columns:1fr;align-items:stretch}}

.comp-card{
  background:rgba(255,255,255,.025);border:1px solid var(--border);
  border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  position:relative;overflow:hidden;
}
.comp-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.45)}
/* 1st place card elevated on desktop */
.comp-card.comp-1st{
  border-color:rgba(245,166,35,.4);
  background:linear-gradient(160deg,rgba(245,166,35,.1) 0%,rgba(245,166,35,.03) 60%,rgba(0,0,0,.2) 100%);
  margin-bottom:-8px; /* lifts card above 2nd/3rd */
  padding-bottom:22px;
}
@media(max-width:700px){.comp-card.comp-1st{margin-bottom:0;padding-bottom:14px}}
.comp-card.comp-1st:hover{box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 40px rgba(245,166,35,.12)}
.comp-card.comp-2nd{border-color:rgba(192,192,192,.22)}
.comp-card.comp-3rd{border-color:rgba(180,120,60,.28)}
.comp-card.comp-voted{
  border-color:rgba(232,101,26,.55)!important;
  box-shadow:0 0 0 1px rgba(232,101,26,.25),inset 0 0 20px rgba(232,101,26,.04)!important;
}

/* Card top row */
.comp-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.comp-card-rank{font-size:1.4rem;line-height:1}
.comp-card-you{
  font-size:.58rem;font-family:'Share Tech Mono',monospace;letter-spacing:.1em;
  color:var(--orange);background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);
  border-radius:4px;padding:2px 7px;
}

/* Image */
.comp-card-img{
  position:relative;
  width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:2.5rem;
  position:relative;
}
.comp-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.comp-card:hover .comp-card-img img{transform:scale(1.04)}

/* Card info */
.comp-card-rarity{
  font-size:.58rem;font-family:'Share Tech Mono',monospace;letter-spacing:.12em;margin-bottom:2px;
}
.comp-card-rarity.r-legendary{color:var(--gold)}
.comp-card-rarity.r-epic{color:#b77aff}
.comp-card-rarity.r-rare{color:#5ab4ff}
.comp-card-rarity.r-common{color:var(--dim)}
.comp-card-name{
  font-weight:700;font-size:.88rem;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.comp-card-stats{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.comp-card-votes{font-size:.75rem;color:var(--orange);font-weight:700}
.comp-card-xp{font-size:.65rem;color:var(--gold);font-family:'Share Tech Mono',monospace}

/* Vote button */
.comp-card-vote-btn{
  width:100%;padding:9px 0;border-radius:10px;
  font-size:.75rem;font-weight:800;font-family:'Epilogue',sans-serif;letter-spacing:.06em;
  cursor:pointer;transition:all var(--ease);border:1px solid;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.comp-card-vote-btn.state-vote{
  background:rgba(232,101,26,.1);border-color:rgba(232,101,26,.4);color:var(--orange);
}
.comp-card-vote-btn.state-vote:hover{background:rgba(232,101,26,.22);border-color:var(--orange)}
.comp-card-vote-btn.state-voted{
  background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.35);color:#4ade80;
  cursor:default;
}
.comp-card-vote-btn.state-locked{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:var(--dim);cursor:not-allowed;
}
.comp-card-vote-btn.state-connect{
  background:linear-gradient(135deg,rgba(232,101,26,.15),rgba(245,166,35,.1));
  border-color:rgba(245,166,35,.3);color:var(--gold);
}
.comp-card-vote-btn.state-connect:hover{background:linear-gradient(135deg,rgba(232,101,26,.25),rgba(245,166,35,.18));border-color:var(--gold)}
.comp-card-vote-btn.state-need-flame{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);color:var(--dim);
}
.comp-card-vote-btn.state-need-flame:hover{background:rgba(232,101,26,.07);border-color:rgba(232,101,26,.3);color:var(--orange)}
.comp-card-vote-btn.state-own{
  background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.35);color:#ffd166;
  cursor:default;
}
.comp-card-vote-btn.state-paused{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:var(--dim);cursor:not-allowed;
}

/* Drop-view modal vote button — competition states (mirrors
   .comp-card-vote-btn states above, scoped to the modal's button) */
.drop-view-vote-btn.comp-state-vote{background:rgba(232,101,26,.1);border-color:rgba(232,101,26,.4);color:var(--orange)}
.drop-view-vote-btn.comp-state-vote:hover{background:rgba(232,101,26,.22);border-color:var(--orange)}
.drop-view-vote-btn.comp-state-voted{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.35);color:#4ade80;cursor:default}
.drop-view-vote-btn.comp-state-own{background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.35);color:#ffd166;cursor:default}
.drop-view-vote-btn.comp-state-locked,
.drop-view-vote-btn.comp-state-paused{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:var(--dim);cursor:not-allowed}
/* "Need 1 Flame" is clickable (sends user to the Flame Factory), so it
   keeps a pointer cursor and a hover state — matches .comp-card-vote-btn.state-need-flame */
.drop-view-vote-btn.comp-state-need-flame{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);color:var(--dim)}
.drop-view-vote-btn.comp-state-need-flame:hover{background:rgba(232,101,26,.07);border-color:rgba(232,101,26,.3);color:var(--orange)}
.drop-view-vote-btn.comp-state-connect{
  background:linear-gradient(135deg,rgba(232,101,26,.15),rgba(245,166,35,.1));
  border-color:rgba(245,166,35,.3);color:var(--gold);
}
.drop-view-vote-btn.comp-state-connect:hover{background:linear-gradient(135deg,rgba(232,101,26,.25),rgba(245,166,35,.18));border-color:var(--gold)}

/* Status bar */
.comp-status-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.06);
  font-size:.73rem;color:var(--dim);
}
.comp-status-total{color:var(--cream)}
.comp-status-hint{color:var(--dim)}

/* "Prize on the line" badge — live standings cards, top 3 only */
.comp-card-prize{
  font-size:.65rem;color:#00d4aa;font-family:'Share Tech Mono',monospace;
  white-space:nowrap;
}

/* My Prizes — connected wallet's own XRP wins */
.comp-my-prizes{
  margin-top:16px;padding:14px 16px;border-radius:12px;
  background:rgba(0,212,170,.06);border:1px solid rgba(0,212,170,.25);
}
.comp-my-prizes-title{
  font-family:'Anton',sans-serif;letter-spacing:.05em;font-size:.85rem;
  color:#00d4aa;margin-bottom:8px;
}
.comp-my-prize-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.78rem;color:var(--cream-d);padding:4px 0;
}
.comp-my-prize-place{font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--cream)}
.comp-my-prizes-hint{font-size:.7rem;color:var(--dim);margin-top:6px}

/* Prize status badges (shared by My Prizes + Ledger) */
.comp-prize-status{
  font-size:.68rem;font-family:'Share Tech Mono',monospace;
  padding:2px 8px;border-radius:6px;
}
.comp-prize-status.status-paid{color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25)}
.comp-prize-status.status-pending{color:#00d4aa;background:rgba(0,212,170,.1);border:1px solid rgba(0,212,170,.25)}
.comp-prize-tx-link{color:#00d4aa;font-size:.68rem;text-decoration:underline}
.comp-prize-tx-link:hover{color:#4ade80}

/* Prize Payout History (Ledger) */
.comp-ledger{
  margin-top:16px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(0,212,170,.2);background:rgba(0,212,170,.03);
}
.comp-ledger-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:none;border:none;cursor:pointer;
  font-family:'Anton',sans-serif;letter-spacing:.05em;font-size:.85rem;
  color:#00d4aa;text-align:left;
}
.comp-ledger-arrow{font-size:.75rem;transition:transform .2s}
.comp-ledger-body{padding:0 16px 14px}
.comp-ledger-comp{padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.comp-ledger-comp:first-child{border-top:none}
.comp-ledger-comp-header{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:.7rem;color:var(--dim);margin-bottom:6px;
  font-family:'Share Tech Mono',monospace;
}
.comp-ledger-pool{color:#00d4aa}
.comp-ledger-row{
  display:grid;grid-template-columns:1.4rem 1fr auto auto auto;
  align-items:center;gap:10px;padding:4px 0;font-size:.74rem;color:var(--cream-d);
}
.comp-ledger-place{font-size:1.1rem;text-align:center}
.comp-ledger-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comp-ledger-wallet{font-family:'Share Tech Mono',monospace;color:var(--dim);font-size:.68rem}
.comp-ledger-amount{font-family:'Share Tech Mono',monospace;color:var(--gold);font-weight:700;white-space:nowrap}
.comp-ledger-status{display:flex;align-items:center;gap:6px;white-space:nowrap}
@media(max-width:560px){
  .comp-ledger-row{grid-template-columns:1.4rem 1fr auto;grid-template-areas:"rank name amount" "rank wallet status";}
  .comp-ledger-row .comp-ledger-place{grid-area:rank}
  .comp-ledger-row .comp-ledger-name{grid-area:name}
  .comp-ledger-row .comp-ledger-amount{grid-area:amount}
  .comp-ledger-row .comp-ledger-wallet{grid-area:wallet}
  .comp-ledger-row .comp-ledger-status{grid-area:status;justify-self:end}
}

/* Empty / no-active states */
.comp-empty-state{
  text-align:center;padding:48px 20px;color:var(--dim);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  grid-column:1/-1;
}
.comp-empty-icon{font-size:3rem}
.comp-no-active-inner{
  text-align:center;padding:36px 20px;
  border:1px dashed rgba(255,255,255,.08);border-radius:18px;
}

/* ══════════════════════════════════════════════════════════
   BOARD GRID — LATEST DROPS
══════════════════════════════════════════════════════════ */
.board-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
/* On very narrow screens 260px columns can exceed the available width
   (e.g. 280px viewport - 32px padding = 248px), causing horizontal
   overflow. Drop to a single fluid column so cards always fit. */
@media(max-width:300px){
  .board-grid{grid-template-columns:1fr}
}
.board-card{
  border-radius:16px;overflow:hidden;
  border:1px solid var(--border);background:var(--bg-card);
  transition:transform .22s,box-shadow .22s,border-color .22s;
  display:flex;flex-direction:column;
}
.board-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.1);
}
.board-card-img-wrap{position:relative;overflow:hidden;aspect-ratio:1}
.board-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.board-card:hover .board-card-img{transform:scale(1.05)}
.board-card-rarity-badge{
  position:absolute;top:8px;left:8px;
  font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.1em;
  padding:3px 8px;border-radius:6px;
  background:rgba(13,9,4,.75);backdrop-filter:blur(4px);
}
.board-card-rarity-badge.rarity-legendary{color:var(--gold);border:1px solid rgba(245,166,35,.4)}
.board-card-rarity-badge.rarity-epic{color:#b77aff;border:1px solid rgba(183,122,255,.35)}
.board-card-rarity-badge.rarity-rare{color:#7aabff;border:1px solid rgba(122,171,255,.35)}
.board-card-rarity-badge.rarity-common{color:#aaa;border:1px solid rgba(255,255,255,.12)}
.board-card-place-badge{
  position:absolute;top:8px;right:8px;
  font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.06em;
  padding:3px 8px;border-radius:6px;color:var(--gold);
  background:rgba(13,9,4,.75);backdrop-filter:blur(4px);
  border:1px solid rgba(245,166,35,.4);white-space:nowrap;
}
.board-card-body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.board-card-name{font-weight:700;font-size:.88rem;color:var(--cream);line-height:1.3}
.board-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.board-card-time{font-size:.62rem;color:var(--dim);font-family:'Share Tech Mono',monospace}
.board-card-votes{
  display:flex;align-items:center;gap:5px;
  font-size:.78rem;color:var(--cream-d);font-weight:600;
  cursor:pointer;transition:transform .15s,color .15s;user-select:none;
  padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid transparent;transition:all .18s;
}
.board-card-votes:hover{background:rgba(232,101,26,.1);border-color:rgba(232,101,26,.25);color:var(--orange)}
.board-card-votes.voted{color:var(--orange);background:rgba(232,101,26,.1);border-color:rgba(232,101,26,.25)}
.board-card-votes.vote-bounce{animation:vote-bounce .35s cubic-bezier(.36,1.56,.64,1)}
@keyframes vote-bounce{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ══════════════════════════════════════════════════════════
   HALL OF FLAME
══════════════════════════════════════════════════════════ */
.board-hof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end}
@media(max-width:700px){.board-hof{grid-template-columns:1fr;align-items:stretch}}
.board-hof-card{
  padding:20px;border-radius:18px;border:1px solid var(--border);background:var(--bg-card);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden;
}
.board-hof-card:hover{transform:translateY(-5px)}
.board-hof-gold{
  border-color:rgba(245,166,35,.38);
  background:linear-gradient(145deg,rgba(245,166,35,.09) 0%,var(--bg-card) 65%);
  margin-bottom:-10px;padding-bottom:30px;
}
@media(max-width:700px){.board-hof-gold{margin-bottom:0;padding-bottom:20px}}
.board-hof-gold:hover{box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 40px rgba(245,166,35,.15)}
.board-hof-silver{border-color:rgba(192,192,192,.2);background:linear-gradient(145deg,rgba(192,192,192,.05) 0%,var(--bg-card) 65%)}
.board-hof-silver:hover{box-shadow:0 16px 40px rgba(0,0,0,.4)}
.board-hof-bronze{border-color:rgba(180,120,60,.28);background:linear-gradient(145deg,rgba(180,120,60,.07) 0%,var(--bg-card) 65%)}
.board-hof-bronze:hover{box-shadow:0 16px 40px rgba(0,0,0,.4)}
.board-hof-rank{font-size:1.6rem;line-height:1}
.board-hof-img-wrap{
  width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.board-hof-img-placeholder{font-size:3rem}
.board-hof-img-wrap img{width:100%;height:100%;object-fit:cover}
.board-hof-info{display:flex;flex-direction:column;gap:5px}
.board-hof-rarity{font-size:.6rem;font-family:'Share Tech Mono',monospace;letter-spacing:.1em}
.board-hof-name{font-weight:700;font-size:.92rem;color:var(--cream)}
.board-hof-votes{font-size:.8rem;color:var(--orange);font-weight:700}
.board-hof-prize{
  font-size:.7rem;font-family:'Share Tech Mono',monospace;font-weight:700;
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:100px;width:fit-content;
}
.board-hof-prize.pending{color:#00d4aa;background:rgba(0,212,170,.1);border:1px solid rgba(0,212,170,.25)}
.board-hof-prize.paid{color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25)}

/* ══════════════════════════════════════════════════════════
   LEADERBOARD
══════════════════════════════════════════════════════════ */
.board-lb-banner{
  background:linear-gradient(135deg,rgba(232,101,26,.08),rgba(245,166,35,.04));
  border:1px solid rgba(232,101,26,.16);border-radius:18px;
  padding:20px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;
}
.board-lb-banner h3{
  font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.05em;
  color:var(--cream);margin-bottom:4px;
}
.board-lb-banner p{font-size:.78rem;color:var(--dim);line-height:1.5;max-width:420px}
.board-lb-badge{
  font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.12em;
  padding:5px 14px;border-radius:100px;
  background:rgba(232,101,26,.13);border:1px solid rgba(232,101,26,.28);
  color:var(--orange);white-space:nowrap;flex-shrink:0;
}

/* Leaderboard header */
.lb-header-row{
  display:grid;grid-template-columns:44px 1fr 90px 75px 65px;
  align-items:center;gap:12px;
  padding:8px 16px;
  font-size:.62rem;font-family:'Share Tech Mono',monospace;
  letter-spacing:.1em;color:var(--dim);text-transform:uppercase;
  border-bottom:1px solid var(--border);margin-bottom:4px;
}

/* Row stagger animation */
@keyframes lb-row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Leaderboard rows */
.leaderboard-row{
  display:grid;grid-template-columns:44px 1fr 90px 75px 65px;
  align-items:center;gap:12px;
  padding:13px 16px;border-radius:12px;
  transition:background .18s;
  border:1px solid transparent;
  animation:lb-row-in .3s ease both;
}
.leaderboard-row:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}
.leaderboard-row.lb-gold{background:rgba(245,166,35,.06);border-color:rgba(245,166,35,.18)}
.leaderboard-row.lb-silver{background:rgba(200,200,200,.04);border-color:rgba(200,200,200,.1)}
.leaderboard-row.lb-bronze{background:rgba(180,120,60,.05);border-color:rgba(180,120,60,.14)}
.leaderboard-row.lb-me{border-color:rgba(232,101,26,.38)!important;background:rgba(232,101,26,.05)!important}
.lb-rank{font-family:'Anton',sans-serif;font-size:1.1rem;text-align:center;letter-spacing:.02em}
.lb-rank-1{color:var(--gold);text-shadow:0 0 14px rgba(245,166,35,.5)}
.lb-rank-2{color:#c0c0c0}
.lb-rank-3{color:#b47840}
.lb-wallet{
  font-family:'Share Tech Mono',monospace;font-size:.75rem;
  color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-wallet-me{color:var(--orange)!important}
.lb-level{font-family:'Anton',sans-serif;font-size:.92rem;letter-spacing:.04em;color:var(--gold);text-align:center}
.lb-level-badge{
  display:inline-block;background:rgba(245,166,35,.1);
  border:1px solid rgba(245,166,35,.28);border-radius:6px;
  padding:2px 9px;font-size:.68rem;font-weight:700;
}
.lb-flames{font-size:.78rem;color:var(--orange);font-weight:600;text-align:center}
.lb-streak{font-size:.78rem;color:var(--cream-d);text-align:center}
@media(max-width:560px){
  .leaderboard-row,.lb-header-row{grid-template-columns:36px 1fr 64px 54px}
  .lb-streak,.lb-header-row>:last-child{display:none}
}

/* merch page */
.merch-hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;padding:80px 24px 60px;margin-top:-80px}
.merch-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:brightness(.35) saturate(1.2)}
.merch-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,9,4,.3) 0%,rgba(13,9,4,.7) 60%,rgba(13,9,4,1) 100%)}
.merch-hero-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center}
.merch-hero-desc{font-size:1rem;color:var(--cream-d);line-height:1.75;margin-top:12px}
.merch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.merch-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.merch-card:hover{transform:translateY(-6px);border-color:var(--border-hot);box-shadow:0 20px 50px rgba(0,0,0,.4),var(--glow-o)}
.merch-card-gold{border-color:rgba(245,166,35,.25)}
.merch-card-gold:hover{border-color:var(--border-gold);box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 30px rgba(245,166,35,.2)}
.merch-card-img-wrap{position:relative;height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.merch-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.4) saturate(1.1);transition:filter .3s}
.merch-card:hover .merch-card-bg{filter:brightness(.5) saturate(1.3)}
.merch-card-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,var(--bg-card) 100%)}
.merch-card-body{padding:18px 20px 22px}
.merch-card-tag{display:inline-block;font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(232,101,26,.3);border-radius:100px;padding:3px 10px;margin-bottom:10px}
.merch-card-title{font-family:'Anton',sans-serif;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:8px}
.merch-card-desc{font-size:.8rem;color:var(--dim);line-height:1.6;margin-bottom:14px}
.merch-card-status{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.merch-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 6px var(--orange);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.merch-card-feature{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;min-height:260px}
.merch-feature-img{position:relative;overflow:hidden;border-radius:16px 0 0 16px;min-height:260px}
.merch-feature-img .merch-card-bg{filter:brightness(.55) saturate(1.2)}
.merch-card-feature:hover .merch-feature-img .merch-card-bg{filter:brightness(.65) saturate(1.3)}
.merch-feature-img-overlay{position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,var(--bg-card) 100%)}
.merch-feature-body{padding:32px 28px;display:flex;flex-direction:column;justify-content:center;border-radius:0 16px 16px 0;background:var(--bg-card)}
.merch-how{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:48px;padding:24px 28px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;flex-wrap:wrap}
.merch-how-step{display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;color:var(--cream-d)}
.merch-how-num{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--orange);border:1px solid rgba(232,101,26,.3);border-radius:100px;padding:2px 8px}
.merch-how-arrow{color:var(--dim);font-size:1rem}

/* ══════════════════════════════════════════════════════════
   FRITOMART — full storefront
══════════════════════════════════════════════════════════ */

/* Hero */
.fm-hero{position:relative;height:min(72vh,680px);min-height:420px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.fm-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:brightness(.55) saturate(1.15)}
.fm-hero-vignette{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,6,2,.65) 0%,rgba(10,6,2,0) 22%,rgba(10,6,2,0) 48%,rgba(10,6,2,.75) 80%,rgba(10,6,2,1) 100%),linear-gradient(to right,rgba(10,6,2,.5) 0%,transparent 55%)}
.fm-hero-eyebrow{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:76px 5vw 0;flex-wrap:wrap}
.fm-hero-badge{font-size:.52rem;font-weight:900;letter-spacing:.18em;color:var(--orange);text-transform:uppercase;background:rgba(232,101,26,.15);border:1px solid rgba(232,101,26,.4);padding:4px 10px;border-radius:3px}
.fm-hero-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.2),0 0 10px #22c55e;animation:sb-pulse 2.2s ease-in-out infinite;flex-shrink:0}
.fm-hero-live-label{font-size:.52rem;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.45);text-transform:uppercase}
.fm-hero-inner{position:relative;z-index:3;padding:0 5vw 52px;max-width:560px}
.fm-hero-title{font-family:'Anton',sans-serif;font-size:clamp(3rem,7vw,5.5rem);text-transform:uppercase;letter-spacing:.03em;color:var(--cream);line-height:1;margin:0 0 16px}
.fm-hero-sub{font-size:1rem;color:rgba(255,255,255,.78);margin:0 0 28px;line-height:1.65;max-width:420px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fm-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.fm-btn-primary{display:inline-flex;align-items:center;gap:9px;padding:13px 30px;background:var(--orange);color:#fff;font-family:'Epilogue',sans-serif;font-weight:800;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;letter-spacing:.03em;box-shadow:0 4px 20px rgba(232,101,26,.45);transition:background .18s,transform .12s,box-shadow .18s}
.fm-btn-primary:hover{background:#d4581a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(232,101,26,.55)}
.fm-btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:13px 24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.88);font-family:'Epilogue',sans-serif;font-weight:600;font-size:.9rem;border-radius:6px;cursor:pointer;backdrop-filter:blur(8px);transition:background .18s,border-color .18s}
.fm-btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35)}

/* Section tabs */
.fm-tabs{display:flex;align-items:center;gap:4px;padding:0 5vw;background:rgba(10,6,2,.95);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.fm-tab-btn{display:inline-flex;align-items:center;gap:7px;padding:16px 20px;font-family:'Epilogue',sans-serif;font-size:.82rem;font-weight:600;color:var(--dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .18s,border-color .18s;white-space:nowrap;letter-spacing:.02em}
.fm-tab-btn:hover{color:var(--cream)}
.fm-tab-btn.fm-tab-active{color:var(--orange);border-bottom-color:var(--orange)}

/* Panels */
.fm-panel{display:none;padding:40px 5vw 80px}
.fm-panel.fm-panel-active{display:block}

/* Launch banner */
/* ── FritoMart Shop ─────────────────────────────────────── */
.fm-shop-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.fm-shop-header-left{display:flex;flex-direction:column;gap:1px}
.fm-shop-eyebrow{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);opacity:.75}
.fm-shop-title{font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);line-height:1;margin:0}

.fm-launch-banner{display:flex;align-items:center;gap:14px;padding:12px 18px;background:rgba(232,101,26,.05);border:1px solid rgba(232,101,26,.15);border-radius:10px;margin-bottom:24px;flex-wrap:wrap}
.fm-launch-pulse{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px rgba(232,101,26,.25),0 0 8px var(--orange);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.fm-launch-text{flex:1;min-width:160px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fm-launch-text strong{color:var(--cream);font-size:.8rem}
.fm-launch-text span{font-size:.76rem;color:var(--dim)}
.fm-notify-form{display:flex;gap:7px;flex-shrink:0}
.fm-notify-input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:8px 12px;font-size:.78rem;color:var(--cream);outline:none;width:190px;transition:border-color .18s}
.fm-notify-input:focus{border-color:rgba(232,101,26,.45)}
.fm-notify-btn{padding:8px 15px;background:var(--orange);color:#fff;border:none;border-radius:7px;font-family:'Epilogue',sans-serif;font-weight:700;font-size:.78rem;cursor:pointer;white-space:nowrap;transition:background .18s}
.fm-notify-btn:hover{background:#d4581a}

.fm-filter-bar{display:flex;gap:6px;flex-wrap:wrap}
.fm-filter-btn{padding:6px 15px;background:transparent;border:1px solid rgba(255,255,255,.09);border-radius:100px;font-size:.72rem;font-weight:700;color:rgba(255,255,255,.4);cursor:pointer;transition:all .15s;letter-spacing:.06em;text-transform:uppercase}
.fm-filter-btn:hover{border-color:rgba(232,101,26,.3);color:var(--cream)}
.fm-filter-btn.fm-filter-active{background:var(--orange);border-color:var(--orange);color:#fff}

/* Product grid — 3 cols, featured spans 2 */
.fm-shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
.fm-product-card{background:#0d0904;border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column}
.fm-product-card:hover{transform:translateY(-3px);border-color:rgba(232,101,26,.22);box-shadow:0 12px 40px rgba(0,0,0,.55)}
.fm-product-featured{grid-column:span 2}

.fm-product-img{position:relative;height:280px;overflow:hidden;background:#0d0904}
.fm-product-featured .fm-product-img{height:360px}
.fm-product-img-bg{position:absolute;inset:0;background-size:contain;background-position:center center;background-repeat:no-repeat;transition:transform .4s ease;filter:brightness(.9) saturate(1.1)}
.fm-product-card:hover .fm-product-img-bg{transform:scale(1.03);filter:brightness(1) saturate(1.15)}
.fm-product-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,5,2,.85) 100%)}

.fm-product-badges{position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap;z-index:2}
.fm-badge{font-family:'Share Tech Mono',monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;font-weight:700;backdrop-filter:blur(6px)}
.fm-badge-soon{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.4)}
.fm-badge-drop{background:rgba(232,101,26,.15);border:1px solid rgba(232,101,26,.3);color:var(--orange)}
.fm-badge-gold{background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.35);color:var(--gold)}

.fm-product-soon-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;opacity:0;transition:opacity .2s}
.fm-product-card:hover .fm-product-soon-overlay{opacity:1}
.fm-product-soon-overlay span{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.12);padding:6px 14px;border-radius:4px;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}

.fm-product-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.fm-product-cat{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.fm-product-name{font-family:'Anton',sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);line-height:1.15;margin:0}
.fm-product-desc{font-size:.76rem;color:rgba(255,255,255,.38);line-height:1.6;flex:1;margin:3px 0 8px}

.fm-add-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;border-radius:7px;font-family:'Epilogue',sans-serif;font-weight:700;font-size:.78rem;cursor:pointer;border:none;transition:all .18s;letter-spacing:.04em;text-transform:uppercase;margin-top:auto}
.fm-add-btn-soon{background:transparent;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.22);cursor:not-allowed}
.fm-add-btn-gold{background:linear-gradient(135deg,rgba(245,166,35,.1),rgba(232,101,26,.07));border:1px solid rgba(245,166,35,.3);color:var(--gold);cursor:pointer;text-transform:none;letter-spacing:.02em;font-size:.82rem}
.fm-add-btn-gold:hover{background:linear-gradient(135deg,rgba(245,166,35,.18),rgba(232,101,26,.12));border-color:rgba(245,166,35,.55);box-shadow:0 4px 18px rgba(245,166,35,.12)}
.fm-add-btn-live{background:var(--orange);color:#fff;box-shadow:0 4px 16px rgba(232,101,26,.35)}
.fm-add-btn-live:hover{background:#d4581a;transform:translateY(-1px)}

/* How it works */
.fm-how{display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 28px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;flex-wrap:wrap}
.fm-how-step{display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;color:var(--cream-d)}
.fm-how-num{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--orange);border:1px solid rgba(232,101,26,.3);border-radius:100px;padding:2px 8px}
.fm-how-arrow{color:var(--dim);font-size:1rem}

/* Coming soon panels (NFTs / Market stubs) */
.fm-coming-soon-panel{max-width:520px;margin:60px auto;text-align:center;padding:48px 32px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:20px}
.fm-csp-icon{font-size:3rem;margin-bottom:20px}
.fm-csp-title{font-family:'Anton',sans-serif;font-size:1.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.fm-csp-tag{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);padding:4px 10px;border-radius:3px;vertical-align:middle}
.fm-csp-desc{font-size:.88rem;color:var(--dim);line-height:1.7;margin-bottom:24px}
.fm-csp-features{display:flex;flex-direction:column;gap:10px;text-align:left;background:rgba(255,255,255,.03);border-radius:10px;padding:18px 20px}
.fm-csp-feat{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--cream-d)}
.fm-csp-feat svg{color:var(--orange);flex-shrink:0}

/* Cart FAB */
.fm-cart-fab{position:fixed;bottom:28px;right:28px;z-index:900;width:56px;height:56px;border-radius:50%;background:var(--orange);border:none;color:#fff;cursor:pointer;box-shadow:0 6px 24px rgba(232,101,26,.55);transition:transform .18s,box-shadow .18s;display:flex;align-items:center;justify-content:center}
.fm-cart-fab:hover{transform:scale(1.08);box-shadow:0 10px 32px rgba(232,101,26,.65)}
.fm-cart-count{position:absolute;top:-4px;right:-4px;background:#fff;color:var(--orange);font-size:.65rem;font-weight:900;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-family:'Epilogue',sans-serif}

/* Cart drawer */
.fm-cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:950;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(4px)}
.fm-cart-overlay.fm-open{opacity:1;pointer-events:all}
.fm-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#0d0904;border-left:1px solid var(--border);z-index:960;transform:translateX(100%);transition:transform .3s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column;overflow:hidden}
.fm-cart-drawer.fm-open{transform:translateX(0)}
.fm-cart-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.fm-cart-title{display:flex;align-items:center;gap:10px;font-family:'Anton',sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--cream)}
.fm-cart-close{background:none;border:1px solid var(--border);color:var(--dim);width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.fm-cart-close:hover{border-color:rgba(255,255,255,.25);color:var(--cream)}
.fm-cart-items{flex:1;overflow-y:auto;padding:16px 24px}
.fm-cart-empty{text-align:center;padding:48px 16px;color:var(--dim);font-size:.88rem;line-height:1.7}
.fm-cart-empty-icon{font-size:2.4rem;margin-bottom:12px}
.fm-cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.fm-cart-item-img{width:60px;height:60px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;filter:brightness(.7)}
.fm-cart-item-info{flex:1;min-width:0}
.fm-cart-item-name{font-size:.88rem;font-weight:700;color:var(--cream);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-cart-item-meta{font-size:.75rem;color:var(--dim);margin-bottom:6px}
.fm-cart-item-price{font-family:'Share Tech Mono',monospace;font-size:.8rem;color:var(--orange)}
.fm-cart-item-remove{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.75rem;padding:0;letter-spacing:.05em;text-transform:uppercase;transition:color .15s}
.fm-cart-item-remove:hover{color:#ef4444}
.fm-cart-footer{padding:20px 24px;border-top:1px solid var(--border);flex-shrink:0}
.fm-cart-totals{margin-bottom:16px}
.fm-cart-total-row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--dim);margin-bottom:6px}
.fm-cart-total-row:last-child{margin-bottom:0}
.fm-cart-total-xrp{font-family:'Share Tech Mono',monospace;font-size:.78rem}
.fm-checkout-btn{width:100%;padding:15px;background:var(--orange);color:#fff;border:none;border-radius:10px;font-family:'Epilogue',sans-serif;font-weight:800;font-size:.95rem;cursor:pointer;letter-spacing:.03em;box-shadow:0 4px 20px rgba(232,101,26,.4);transition:background .18s,box-shadow .18s}
.fm-checkout-btn:hover{background:#d4581a;box-shadow:0 8px 28px rgba(232,101,26,.55)}
.fm-cart-note{text-align:center;font-size:.72rem;color:var(--dim);margin-top:10px}

/* Checkout modal */
.fm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:970;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(6px)}
.fm-modal-overlay.fm-open{opacity:1;pointer-events:all}
.fm-checkout-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-44%) scale(.96);z-index:980;width:min(520px,calc(100vw - 32px));background:#0d0904;border:1px solid var(--border);border-radius:20px;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s;max-height:90vh;overflow-y:auto}
.fm-checkout-modal.fm-open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all}
.fm-checkout-header{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--border)}
.fm-checkout-title{font-family:'Anton',sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cream)}
.fm-checkout-step{padding:28px}
.fm-checkout-step-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.fm-pay-options{display:flex;flex-direction:column;gap:10px}
.fm-pay-option{display:flex;align-items:center;gap:16px;padding:16px 18px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;cursor:pointer;text-align:left;transition:border-color .18s,background .18s;width:100%}
.fm-pay-option:hover:not(:disabled){border-color:rgba(232,101,26,.4);background:rgba(232,101,26,.05)}
.fm-pay-option.fm-pay-selected{border-color:var(--orange);background:rgba(232,101,26,.08)}
.fm-pay-option-locked{opacity:.5;cursor:not-allowed}
.fm-pay-icon{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem}
.fm-pay-icon-stripe{background:rgba(99,102,241,.1);color:#818cf8}
.fm-pay-icon-xrp{background:rgba(0,190,240,.08);color:#00bef0}
.fm-pay-icon-frito{background:rgba(232,101,26,.1)}
.fm-pay-info{flex:1}
.fm-pay-name{font-size:.9rem;font-weight:700;color:var(--cream);margin-bottom:3px}
.fm-pay-sub{font-size:.75rem;color:var(--dim)}
.fm-pay-status{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:3px;white-space:nowrap;flex-shrink:0}
.fm-pay-coming{background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3);color:var(--orange)}
.fm-pay-future{background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.25);color:var(--gold)}
.fm-checkout-footnote{font-size:.75rem;color:var(--dim);text-align:center;margin-top:18px;line-height:1.6}
.fm-pay-arrow{color:var(--dim);flex-shrink:0;transition:transform .18s}
.fm-pay-option:hover .fm-pay-arrow{transform:translateX(3px);color:var(--orange)}

/* ── Checkout step stepper ── */
.fm-co-back{background:none;border:none;color:var(--dim);cursor:pointer;padding:4px 6px;border-radius:6px;display:flex;align-items:center;transition:color .15s}
.fm-co-back:hover{color:var(--cream)}
.fm-co-stepper{display:flex;align-items:center;padding:14px 28px;border-bottom:1px solid var(--border);gap:0}
.fm-co-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.fm-co-step span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border);font-family:'Share Tech Mono',monospace;font-size:.68rem;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:all .25s}
.fm-co-step-label{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .25s}
.fm-co-step.fm-co-step-active span{background:var(--orange);border-color:var(--orange);color:#fff}
.fm-co-step.fm-co-step-active .fm-co-step-label{color:var(--orange)}
.fm-co-step.fm-co-step-done span{background:#4ade80;border-color:#4ade80;color:#0d0904}
.fm-co-step.fm-co-step-done .fm-co-step-label{color:#4ade80}
.fm-co-step-line{flex:1;height:1px;background:var(--border);margin:0 6px;margin-bottom:16px;transition:background .25s}
.fm-co-step-line.fm-co-line-done{background:#4ade80}

/* ── Checkout form (step 2) ── */
.fm-co-form{display:flex;flex-direction:column;gap:14px}
.fm-co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fm-co-group{display:flex;flex-direction:column;gap:6px}
.fm-co-group label{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fm-co-req{color:var(--orange)}
.fm-co-group input,.fm-co-group select{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--cream);font-size:.85rem;outline:none;transition:border-color .2s;width:100%;font-family:inherit}
.fm-co-group input:focus,.fm-co-group select:focus{border-color:var(--orange)}
.fm-co-group select option{background:#1a1208;color:var(--cream)}
.fm-co-promo-row{display:flex;gap:8px}
.fm-co-promo-row input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--cream);font-size:.82rem;outline:none;transition:border-color .2s;font-family:'Share Tech Mono',monospace;letter-spacing:.06em}
.fm-co-promo-row input:focus{border-color:var(--orange)}
.fm-co-promo-apply{background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.35);color:var(--orange);padding:10px 18px;border-radius:8px;font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.06em;cursor:pointer;white-space:nowrap;transition:background .18s}
.fm-co-promo-apply:hover{background:rgba(232,101,26,.22)}
.fm-co-promo-msg{font-size:.78rem;padding:8px 12px;border-radius:6px}
.fm-co-promo-msg.success{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);color:#4ade80}
.fm-co-promo-msg.error{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);color:#f87171}
.fm-co-err{font-size:.8rem;color:#f87171;padding:10px 14px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);border-radius:8px}

/* ── Checkout review (step 3) ── */
.fm-co-review-items{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.fm-co-review-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.fm-co-review-item-img{width:46px;height:46px;border-radius:6px;background-size:cover;background-position:center;flex-shrink:0;filter:brightness(.75)}
.fm-co-review-item-info{flex:1;min-width:0}
.fm-co-review-item-name{font-size:.85rem;font-weight:700;color:var(--cream)}
.fm-co-review-item-meta{font-size:.73rem;color:var(--dim);margin-top:2px}
.fm-co-review-item-price{font-family:'Share Tech Mono',monospace;font-size:.82rem;color:var(--orange);white-space:nowrap}
.fm-co-review-totals{padding:14px 0;border-top:1px solid var(--border)}
.fm-co-totals-row{display:flex;justify-content:space-between;font-size:.82rem;color:var(--dim);margin-bottom:6px}
.fm-co-totals-row.fm-co-total-final{color:var(--cream);font-weight:800;font-size:.96rem;border-top:1px solid var(--border);padding-top:10px;margin-top:6px}
.fm-co-totals-discount{color:#4ade80}
.fm-co-ship-summary{margin-top:14px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;font-size:.78rem;color:var(--dim);line-height:1.7}
.fm-co-ship-summary strong{color:var(--cream)}
.fm-co-btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--dim);padding:10px 20px;border-radius:8px;font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.06em;cursor:pointer;transition:all .18s}
.fm-co-btn-ghost:hover{border-color:rgba(255,255,255,.2);color:var(--cream)}

/* ── Stripe step ── */
.fm-co-stripe-total{font-family:'Share Tech Mono',monospace;font-size:.78rem;color:var(--dim);margin-bottom:16px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;text-align:center}
.fm-stripe-mount{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:18px;min-height:100px}
.fm-stripe-placeholder{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--dim);font-size:.82rem;min-height:80px}
#stripe-card-element{padding:4px 0}

/* ── XRP Xaman step ── */
.fm-co-xrp-amount{font-family:'Share Tech Mono',monospace;font-size:.82rem;color:#00bef0;text-align:center;margin-bottom:16px;padding:10px 14px;background:rgba(0,190,240,.05);border:1px solid rgba(0,190,240,.15);border-radius:8px}
.fm-co-xrp-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0}
.fm-co-xrp-hint{font-size:.78rem;color:var(--dim);text-align:center}
.fm-co-xrp-polling{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--dim);margin-top:6px}

/* ── Success step ── */
.fm-co-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0 12px}
.fm-co-success-icon{font-size:3rem;line-height:1}
.fm-co-success-title{font-family:'Anton',sans-serif;font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream)}
.fm-co-success-sub{font-size:.85rem;color:var(--dim);line-height:1.65;max-width:340px}
.fm-co-success-method{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--dim);padding:8px 14px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;margin:4px 0 14px}

/* Responsive */
@media(max-width:900px){
  .fm-shop-grid{grid-template-columns:repeat(2,1fr)}
  .fm-product-featured{grid-column:span 2}
}
@media(max-width:768px){
  .fm-hero{height:min(80vw,500px);min-height:380px}
  .fm-hero-eyebrow{padding:70px 20px 0}
  .fm-hero-inner{padding:0 20px 40px}
  .fm-hero-title{font-size:clamp(2.4rem,10vw,3.5rem)}
  .fm-tabs{padding:0 16px;overflow-x:auto}
  .fm-panel{padding:28px 16px 64px}
  .fm-launch-banner{flex-direction:column;align-items:flex-start;gap:10px}
  .fm-notify-form{width:100%}
  .fm-notify-input{flex:1;min-width:0}
  .fm-shop-header{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:560px){
  .fm-shop-grid{grid-template-columns:1fr}
  .fm-product-featured{grid-column:span 1}
  .fm-hero{height:96vw;min-height:320px}
  .fm-hero-eyebrow{padding:68px 16px 0;gap:8px}
  .fm-hero-actions{flex-direction:column}
  .fm-btn-primary,.fm-btn-ghost{width:100%;justify-content:center}
  .fm-cart-fab{bottom:20px;right:16px}
  .fm-how{flex-direction:column;align-items:flex-start;gap:10px}
  .fm-how-arrow{transform:rotate(90deg)}
  .fm-co-row{grid-template-columns:1fr}
  .fm-co-stepper{padding:10px 16px}
  .fm-co-step-label{display:none}
  .fm-checkout-step{padding:20px 16px}
}

/* ── Support modal ── */
.fm-support-discord{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(88,101,242,.08);border:1px solid rgba(88,101,242,.25);border-radius:12px;text-decoration:none;transition:background .18s,border-color .18s;cursor:pointer}
.fm-support-discord:hover{background:rgba(88,101,242,.15);border-color:rgba(88,101,242,.45)}
.fm-support-discord-icon{width:42px;height:42px;border-radius:10px;background:rgba(88,101,242,.15);color:#7289da;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fm-support-discord-info{flex:1}
.fm-support-discord-title{font-size:.9rem;font-weight:700;color:var(--cream);margin-bottom:3px}
.fm-support-discord-sub{font-size:.75rem;color:var(--dim)}
.fm-support-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--dim);font-size:.72rem}
.fm-support-divider::before,.fm-support-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── NFT HOODIE CLAIM ─────────────────────────────────── */
.claim-section{margin-top:56px;padding-top:48px;border-top:1px solid var(--border)}
.claim-section-label{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.claim-section-title{font-family:'Anton',sans-serif;font-size:1.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:6px;line-height:1.1}
.claim-section-sub{font-size:.88rem;color:var(--dim);line-height:1.6;margin-bottom:28px}
.claim-box{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:28px 24px}
.claim-box-gold{border-color:rgba(245,166,35,.3)}
/* State: connect */
.claim-connect-state{text-align:center;padding:20px 0 8px}
.claim-connect-icon{font-size:2.4rem;margin-bottom:12px}
.claim-connect-title{font-family:'Anton',sans-serif;font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:6px}
.claim-connect-desc{font-size:.82rem;color:var(--dim);line-height:1.6;margin-bottom:20px}
/* State: checking */
.claim-checking{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0 8px;text-align:center}
.claim-checking-text{font-size:.82rem;color:var(--dim)}
/* State: no NFT */
.claim-no-nft{text-align:center;padding:16px 0 8px}
.claim-no-nft-icon{font-size:2rem;margin-bottom:10px}
.claim-no-nft-msg{font-family:'Anton',sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:6px}
.claim-no-nft-sub{font-size:.8rem;color:var(--dim);line-height:1.6;margin-bottom:18px}
.btn-claim-go-nft{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border:1px solid var(--orange);color:var(--orange);background:transparent;font-family:'Share Tech Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-radius:8px;cursor:pointer;transition:background .2s,color .2s}
.btn-claim-go-nft:hover{background:var(--orange);color:#fff}
.claim-code-display{display:inline-block;font-family:'Share Tech Mono',monospace;font-size:1.1rem;letter-spacing:.15em;color:var(--gold);background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.25);border-radius:8px;padding:10px 22px;margin:14px 0 6px}

/* State: list — wallet may hold multiple Genesis NFTs, each with its own
   redemption status. Mirrors the single-claim card visuals but as rows. */
.claim-nft-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.claim-nft-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;
}
.claim-nft-row-title{font-family:'Anton',sans-serif;font-size:.92rem;letter-spacing:.03em;color:var(--cream)}
.claim-nft-row-sub{font-size:.74rem;color:var(--dim);margin-top:2px}
.claim-nft-row-code{font-family:'Share Tech Mono',monospace;font-size:.74rem;letter-spacing:.08em;color:var(--gold);margin-top:2px}
.claim-nft-row-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:#4ade80;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);
  border-radius:8px;padding:6px 12px;white-space:nowrap;
}
.btn-claim-back{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:none;color:var(--dim);
  font-family:'Share Tech Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;padding:0;margin-bottom:10px;transition:color .15s;
}
.btn-claim-back:hover{color:var(--orange)}
/* State: form */
.claim-form{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.claim-wallet-tag{display:flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--gold);background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.2);border-radius:8px;padding:8px 14px;margin-bottom:4px;word-break:break-all}
.claim-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.claim-form-group{display:flex;flex-direction:column;gap:6px}
.claim-form-group label{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.claim-form-group input,.claim-form-group select{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--cream);font-size:.85rem;outline:none;transition:border-color .2s}
.claim-form-group input:focus,.claim-form-group select:focus{border-color:var(--orange)}
.claim-form-group select option{background:#1a1208;color:var(--cream)}
.btn-claim-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 24px;background:linear-gradient(135deg,var(--gold) 0%,#c98a10 100%);color:#0d0904;font-family:'Share Tech Mono',monospace;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:10px;cursor:pointer;transition:opacity .2s,transform .15s;margin-top:4px}
.btn-claim-submit:hover{opacity:.88;transform:translateY(-2px)}
.btn-claim-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* State: success */
.claim-success{text-align:center;padding:12px 0 8px}
.claim-success-icon{font-size:3rem;margin-bottom:12px}
.claim-success-title{font-family:'Anton',sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);margin-bottom:8px}
.claim-success-sub{font-size:.84rem;color:var(--dim);line-height:1.65;margin-bottom:16px}
.claim-error-msg{font-size:.78rem;color:#ff6b6b;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.2);border-radius:8px;padding:10px 14px;text-align:center}

/* ── MINT MODULE ──────────────────────────────────────── */
.mint-module{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.mint-preview{display:flex;flex-direction:column;gap:16px}
.mint-preview-badge{
  position:absolute;top:16px;left:16px;
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:100px;
  background:rgba(13,9,4,.85);border:1px solid var(--border-gold);
  font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.mint-supply-wrap{padding:0 2px}
.mint-supply-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mint-supply-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-d)}
.mint-supply-count{font-family:'Share Tech Mono',monospace;font-size:.82rem;color:var(--gold)}
.mint-supply-bar{height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.mint-supply-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:4px;transition:width .6s ease}

.mint-panel{display:flex;flex-direction:column;gap:16px}
.mint-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mint-detail{
  padding:14px 16px;border-radius:12px;
  background:var(--bg-card);border:1px solid var(--border);
}
.mint-detail-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.mint-detail-val{font-family:'Anton',sans-serif;font-size:1.3rem;letter-spacing:.04em;color:var(--cream)}

.mint-utility{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;border-radius:12px;
  background:rgba(245,166,35,.06);border:1px solid rgba(245,166,35,.2);
}
.mint-utility-icon{font-size:1.6rem;flex-shrink:0;margin-top:2px}
.mint-utility-title{font-family:'Anton',sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:4px}
.mint-utility-sub{font-size:.78rem;color:var(--cream-d);line-height:1.5}

.mint-state{width:100%}
.mint-hint{font-size:.72rem;color:var(--dim);text-align:center;margin-top:10px}

.btn-xaman-mobile{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:10px;
  background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.35);
  color:var(--gold-l);font-weight:700;font-size:.82rem;letter-spacing:.04em;
  transition:background var(--ease);text-decoration:none;
}
.btn-xaman-mobile:hover{background:rgba(232,101,26,.2)}

.xaman-connect-card{
  display:flex;flex-direction:column;gap:14px;
  padding:20px;border-radius:14px;
  background:var(--bg-card);border:1px solid var(--border);
}
.xaman-connect-top{display:flex;align-items:center;gap:14px}
.xaman-connect-title{font-family:'Anton',sans-serif;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream)}
.xaman-connect-sub{font-size:.72rem;color:var(--dim);margin-top:2px}

.xaman-qr-wrap{
  background:white;border-radius:12px;
  padding:12px;display:flex;align-items:center;justify-content:center;
  min-height:180px;
}
.xaman-qr-wrap img{width:100%;max-width:200px;border-radius:6px;display:block;margin:0 auto}
.xaman-qr-placeholder{display:flex;align-items:center;justify-content:center;width:100%;min-height:156px}
.xaman-qr-loading{display:flex;flex-direction:column;align-items:center;gap:10px;color:#888;font-size:.78rem}

/* Spinner */
.xaman-spinner{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  border:3px solid rgba(245,166,35,.15);
  border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.mint-cancel-btn{
  background:none;border:none;color:var(--dim);font-size:.75rem;
  cursor:pointer;text-align:center;padding:4px;
  transition:color var(--ease);
}
.mint-cancel-btn:hover{color:var(--cream-d)}

/* Connected wallet card */
.wallet-connected-card{
  padding:14px 16px;border-radius:12px;
  background:rgba(76,185,68,.06);border:1px solid rgba(76,185,68,.25);
  margin-bottom:12px;
}
.wallet-connected-row{display:flex;align-items:center;gap:10px}
.wallet-dot-green{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
.wallet-connected-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:2px}
.wallet-address{font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--cream-d);word-break:break-all}
.wallet-disconnect-btn{
  margin-left:auto;flex-shrink:0;
  padding:4px 10px;border-radius:100px;
  background:none;border:1px solid var(--border);
  font-size:.62rem;color:var(--dim);cursor:pointer;
  transition:all var(--ease);
}
.wallet-disconnect-btn:hover{border-color:var(--orange);color:var(--orange)}
.mint-checking{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--dim);padding:12px 0}

/* Mint CTA button */
.btn-mint{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 24px;border-radius:12px;
  background:var(--orange);color:#fff;
  font-weight:700;font-size:.95rem;letter-spacing:.04em;
  border:none;cursor:pointer;
  animation:vault-pulse 3s ease-in-out infinite;
  transition:box-shadow var(--ease),transform var(--ease);
}
.btn-mint:hover{box-shadow:0 0 32px rgba(232,101,26,.8);transform:translateY(-2px);animation:none}
.btn-mint:disabled{opacity:.4;cursor:not-allowed;animation:none;transform:none}

/* Success card */
.mint-success-card{
  text-align:center;padding:28px 20px;border-radius:14px;
  background:rgba(76,185,68,.06);border:1px solid rgba(76,185,68,.3);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.mint-success-icon{font-size:2.4rem}
.mint-success-title{font-family:'Anton',sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green)}
.mint-success-sub{font-size:.82rem;color:var(--cream-d);max-width:280px;line-height:1.5}
.mint-success-id{font-family:'Share Tech Mono',monospace;font-size:.62rem;color:var(--dim);word-break:break-all;margin-top:4px}

/* Already minted / sold out */
.mint-already-card{
  text-align:center;padding:24px 20px;border-radius:14px;
  background:var(--bg-card);border:1px solid var(--border);
}

/* NFT Perks grid */
/* NFT Collection Gallery */
.nft-gallery-section{padding:64px 0 48px}
.nft-gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px}
.nft-gallery-card{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);
  cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;
  background:#1a120a;
}
/* Padding-top trick: creates a stable 1:1 square regardless of image state. */
.nft-gallery-card::before{
  content:'';display:block;padding-top:100%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.03) 100%
  );
  background-size:300% 100%;
  animation:nft-shimmer 1.6s ease-in-out infinite;
}
@keyframes nft-shimmer{
  0%  { background-position: 200% 0; }
  100%{ background-position:-200% 0; }
}
/* Once loaded, stop the shimmer sweep (perf) */
.nft-gallery-card.nft-card-loaded::before{ animation:none; }
.nft-gallery-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--border-gold);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.nft-gallery-img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;
  transition:opacity .35s ease;
}
.nft-gallery-img.nft-img-loaded{ opacity:1; }
.nft-gallery-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 55%);
  opacity:0;transition:opacity .2s;
  display:flex;flex-direction:column;justify-content:flex-end;padding:12px;
}
.nft-gallery-card:hover .nft-gallery-overlay{opacity:1}
.nft-gallery-name{font-family:'Anton',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);line-height:1.2;margin-bottom:5px}
.nft-gallery-num{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--dim)}
.nft-rarity-badge{
  position:absolute;top:8px;right:8px;
  font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;font-weight:700;
}
.rarity-common{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15)}
.rarity-rare{background:rgba(99,179,237,.15);color:#63b3ed;border:1px solid rgba(99,179,237,.3)}
.rarity-epic{background:rgba(159,122,234,.15);color:#b794f4;border:1px solid rgba(159,122,234,.3)}
.rarity-legendary{background:rgba(245,166,35,.12);color:var(--gold);border:1px solid rgba(245,166,35,.35)}
@media(max-width:900px){.nft-gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.nft-gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

.nft-perks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nft-perk-card{
  padding:24px 20px;border-radius:14px;
  background:var(--bg-card);border:1px solid var(--border);
  transition:border-color var(--ease),transform var(--ease);
}
.nft-perk-card:hover{border-color:var(--border-gold);transform:translateY(-4px)}
.nft-perk-icon{font-size:1.8rem;margin-bottom:12px}
.nft-perk-title{font-family:'Anton',sans-serif;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:6px}
.nft-perk-desc{font-size:.78rem;color:var(--cream-d);line-height:1.55}

/* Responsive */
@media(max-width:768px){
  .mint-module{grid-template-columns:1fr}
  .nft-perks-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .mint-details-grid{grid-template-columns:1fr 1fr}
  .nft-perks-grid{grid-template-columns:1fr}
}

/* nft hoodie claim CTA banner */
.nft-hoodie-cta{display:flex;align-items:center;gap:24px;background:linear-gradient(135deg,rgba(255,140,0,.09),rgba(255,180,0,.04));border:1px solid rgba(255,140,0,.28);border-radius:20px;padding:28px 32px;flex-wrap:wrap;transition:border-color .3s}
.nft-hoodie-cta.claim-open{border-color:rgba(74,222,128,.35);background:linear-gradient(135deg,rgba(74,222,128,.07),rgba(0,200,100,.03))}
.nft-hoodie-cta-icon{font-size:2.6rem;flex-shrink:0;line-height:1}
.nft-hoodie-cta-body{flex:1;min-width:180px}
.nft-hoodie-cta-eyebrow{font-size:.62rem;font-family:'Share Tech Mono',monospace;letter-spacing:.14em;color:var(--orange);margin-bottom:6px;text-transform:uppercase}
.nft-hoodie-cta.claim-open .nft-hoodie-cta-eyebrow{color:#4ade80}
.nft-hoodie-cta-title{font-family:'Anton',sans-serif;font-size:1.05rem;letter-spacing:.04em;color:var(--cream);margin-bottom:4px;text-transform:uppercase}
.nft-hoodie-cta-desc{font-size:.8rem;color:var(--dim);line-height:1.6}
.btn-nft-hoodie-cta{background:var(--orange);color:#000;font-family:'Anton',sans-serif;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:12px 22px;border:none;border-radius:10px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s}
.btn-nft-hoodie-cta:hover{background:var(--gold)}
.nft-hoodie-cta.claim-open .btn-nft-hoodie-cta{background:#4ade80;color:#000}
.nft-hoodie-cta.claim-open .btn-nft-hoodie-cta:hover{background:#22c55e}
@media(max-width:600px){.nft-hoodie-cta{flex-direction:column;align-items:flex-start;padding:20px 20px}.btn-nft-hoodie-cta{width:100%}}
.nft-teaser-frame{
  position:relative;width:100%;max-width:640px;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--border-gold);
  box-shadow:0 0 60px rgba(245,166,35,.15),0 0 120px rgba(232,101,26,.08);
}
.nft-teaser-img{width:100%;height:auto;display:block;filter:brightness(.88) contrast(1.05)}
.nft-teaser-scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 4px);
}
.nft-teaser-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(245,166,35,.1),transparent 55%);
  pointer-events:none;
}

/* ── HOME NFT DROP BANNER ────────────────────────────── */
.home-drop-banner{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  padding:40px 44px;border-radius:24px;
  background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-card2) 100%);
  border:1px solid var(--border-gold);
  box-shadow:0 0 60px rgba(245,166,35,.1),0 0 120px rgba(232,101,26,.06);
  overflow:hidden;
}
.home-drop-banner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--orange),transparent);
}
.home-drop-glow{
  position:absolute;top:-80px;right:-80px;
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(245,166,35,.12),transparent 70%);
  filter:blur(50px);pointer-events:none;
}
.home-drop-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 14px;border-radius:100px;
  background:rgba(76,185,68,.1);border:1px solid rgba(76,185,68,.3);
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);margin-bottom:18px;
}
.home-drop-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green);
  animation:pulse 2s ease-in-out infinite;flex-shrink:0;
}
.home-drop-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  line-height:1;text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:12px;
}
.home-drop-desc{
  font-size:.9rem;color:var(--cream-d);line-height:1.72;
  max-width:400px;
}
.home-drop-stats{display:flex;gap:24px;margin-top:22px;flex-wrap:wrap}
.home-drop-stat-val{font-family:'Anton',sans-serif;font-size:1.6rem;line-height:1;color:var(--cream)}
.home-drop-stat-lbl{font-size:.63rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-d);margin-top:3px}
.home-drop-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* right side */
.home-drop-supply-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.home-drop-supply-eyebrow{font-family:'Share Tech Mono',monospace;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.home-drop-supply-count{font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--gold)}
.home-drop-bar-wrap{height:5px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden;margin-bottom:26px}
.home-drop-bar{height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:5px;width:0%;transition:width .6s ease}
.home-drop-perks{display:flex;flex-direction:column;gap:12px}
.home-drop-perk{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  transition:border-color var(--ease);
}
.home-drop-perk:hover{border-color:var(--border-gold)}
.home-drop-perk-emoji{font-size:1.3rem;flex-shrink:0;margin-top:2px}
.home-drop-perk-title{font-weight:700;font-size:.84rem;color:var(--cream);margin-bottom:2px}
.home-drop-perk-sub{font-size:.73rem;color:var(--dim);line-height:1.5}
/* mint inline error */
.mint-inline-error{font-size:.78rem;color:#ff6b6b;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.2);border-radius:8px;padding:10px 14px;text-align:center;margin-top:8px}

/* ── FOOTER ─────────────────────────────────────────── */
#footer{
  padding:52px 24px 32px;border-top:1px solid var(--border);
}
.footer-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1.4fr 1fr;gap:36px;
  align-items:start;
}
.footer-brand{font-family:'Anton',sans-serif;font-size:1.6rem;color:var(--gold);text-shadow:var(--glow-g);letter-spacing:.05em;margin-bottom:8px}
.f-socials{display:flex;gap:9px;margin-top:16px}
.f-social{
  width:34px;height:34px;border-radius:7px;
  border:1px solid var(--border);background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color var(--ease);
}
.f-social:hover{border-color:var(--border-gold)}
.f-col-head{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-d);margin-bottom:12px}
.f-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-links a{font-size:.82rem;color:var(--dim);transition:color var(--ease);cursor:pointer}
.f-links a:hover{color:var(--gold)}
.footer-bottom{
  max-width:1200px;margin:32px auto 0;
  padding-top:20px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.f-copy{font-family:'Share Tech Mono',monospace;font-size:.68rem;color:var(--dim)}
.f-legal{display:flex;gap:20px}
.f-legal a{font-size:.68rem;color:var(--dim);transition:color var(--ease)}
.f-legal a:hover{color:var(--cream-d)}

/* ── LIGHTBOX ────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════
   LIGHTBOX — clean architecture
   #lightbox      : fixed overlay, flex column, centers .lb-wrap
   .lb-wrap       : flex row — [arrow] [card] [arrow]
                    arrows always vertically centered to the card
   .lb-inner      : the card itself
   ═══════════════════════════════════════════════════════ */
#lightbox{
  position:fixed;inset:0;z-index:10000;
  background:rgba(6,4,2,.97);
  display:none;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;          /* lightbox itself scrolls so full card is reachable */
  -webkit-overflow-scrolling:touch;
}
#lightbox.open{display:flex}

/* Row that holds: arrow | card | arrow */
.lb-wrap{
  display:flex;align-items:flex-start; /* align to top so tall cards don't push arrows off-screen */
  gap:12px;
  width:100%;
  max-width:800px;   /* tighter cap — prevents image from being overwhelming on large screens */
  padding:20px 12px;
  max-height:100vh;
  overflow-y:auto;   /* scroll on very short screens so nothing is cut off */
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}

/* Arrows — fixed-position within flex, align to center of image area */
.lb-arrow{
  flex-shrink:0;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);background:rgba(13,9,4,.9);
  color:var(--cream-d);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--ease);
  position:sticky;top:calc(50vh - 22px); /* stay centered in viewport even when card is tall */
}
.lb-arrow:hover{border-color:var(--orange);color:var(--orange);background:rgba(13,9,4,1)}

/* Card */
.lb-inner{
  flex:1;min-width:0;
  position:relative;
  display:flex;flex-direction:column;
  /* No max-height — lb-wrap handles overflow via overflow-y:auto */
}
/* Topbar row: normal flex flow, always at top of card, right-aligned.
   No position:absolute = no layout recalculation drift ever. */
/* lb-topbar: position:absolute with BOTH left:0 AND right:0 explicitly set.
   This pins both edges to lb-content — the topbar is always exactly as wide
   as the card regardless of any layout state. The X button inside it via
   flex-end is always at the physical right edge. No width calculation needed. */
.lb-topbar{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:flex-end;align-items:flex-start;
  padding:8px 8px 0;pointer-events:none;
  /* No background gradient — the X button has its own dark background.
     Gradient was creating a visible dark strip on light/white images. */
}
.lb-close{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.82rem;transition:all var(--ease);
  backdrop-filter:blur(8px);
  pointer-events:auto; /* re-enable — parent topbar has pointer-events:none */
}
.lb-close:hover{border-color:var(--orange);color:var(--orange);background:rgba(232,101,26,.18)}
.lb-content{
  position:relative; /* anchor for lb-topbar absolute positioning */
  border-radius:18px;border:1px solid var(--border-gold);
  background:var(--bg-card);
  /* overflow:hidden removed — was clipping tall images. Border-radius still renders
     correctly; the image's own border-radius on lb-img-wrap-inner clips corners. */
  overflow:visible;
  box-shadow:var(--glow-o);
  display:flex;flex-direction:column;min-height:0;
}

/* ── Tablet / narrow desktop ── */
@media(max-width:860px){
  .lb-wrap{gap:8px;padding:14px 8px}
  .lb-arrow{width:38px;height:38px;top:calc(50vh - 19px)}
}

/* ── Small ── */
@media(max-width:600px){
  .lb-wrap{gap:6px;padding:12px 6px}
  .lb-arrow{width:32px;height:32px;top:calc(50vh - 16px)}
  .lb-arrow svg{width:13px;height:13px}
}

/* ── True mobile phones only ≤480px: centered card ── */
@media(max-width:480px){
  #lightbox{
    align-items:center;
    justify-content:center;
    background:rgba(6,4,2,1);
    padding:16px;
    box-sizing:border-box;
  }
  .lb-wrap{
    flex-direction:column;gap:0;
    padding:0;
    max-width:100%;
    width:100%;
    align-items:center;
    overflow-y:auto;
  }
  .lb-arrow{display:none}
  .lb-inner{
    max-width:100%;
    width:100%;
    border-radius:20px;
    overflow:hidden;
    display:flex;flex-direction:column;
  }
  .lb-content{
    border-radius:0;
  }
  .lb-img-wrap-inner{border-radius:0;} /* no rounding on full-screen mobile */
  .lb-close{width:30px;height:30px;font-size:.72rem;}
  /* No max-height on mobile either — full image shown, card scrolls */
}
.lb-id{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--dim)}
.lb-btns{display:flex;gap:7px}
.lb-btn{
  padding:6px 14px;border-radius:100px;
  border:1px solid var(--border);font-size:.7rem;font-weight:600;
  color:var(--cream-d);cursor:pointer;transition:all var(--ease);
}
.lb-btn:hover{border-color:var(--border-gold);color:var(--gold)}
.lb-btn-surprise{border-color:rgba(245,166,35,.35);color:var(--gold)}
.lb-btn-surprise:hover{background:var(--gold);color:#0D0904;border-color:var(--gold)}
/* surprise me + header row */
.memes-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.surprise-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:100px;
  border:1px solid var(--border-gold);background:transparent;
  font-family:'Epilogue',sans-serif;font-size:.78rem;font-weight:700;
  color:var(--gold);cursor:pointer;transition:all var(--ease);white-space:nowrap;
}
.surprise-btn:hover{background:var(--gold);color:#0D0904;box-shadow:0 0 18px rgba(245,166,35,.4)}

/* ── RESPONSIVE ──────────────────────────────────────── */
/* Nav: compress at mid-desktop before full collapse */
@media(max-width:1200px){
  .nav-center a{padding:6px 8px;font-size:.73rem;letter-spacing:.02em}
  .nav-center{gap:2px}
  .nav-cta{padding:7px 14px;font-size:.75rem}
}

@media(max-width:1024px){
  .meme-grid{grid-template-columns:repeat(3,1fr)}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .char-frame{display:none}
  .hero-desc{max-width:100%}
  .hero-stats{justify-content:center}
  .hero-btns{justify-content:center}
  .universe-grid{grid-template-columns:repeat(2,1fr)}
  .firepit-grid{grid-template-columns:repeat(2,1fr)}

  .ep-grid{grid-template-columns:repeat(2,1fr)}
  .merch-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
  .nav-center{display:none}
  .sec{padding:60px 20px}
}
@media(max-width:768px){
  #topnav{top:8px;padding:11px 18px;width:calc(100% - 20px)}
  .nav-cta{display:none}
  .home-drop-banner{grid-template-columns:1fr;padding:32px 24px;gap:32px}
  .meme-grid{grid-template-columns:repeat(2,1fr)}
  .universe-grid{grid-template-columns:1fr !important}
  .uni-card{grid-column:1 !important}
  /* Firepit: 2 columns on tablet/mobile — game cards are tall enough to read */
  .firepit-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px}

  .fp-hero{padding-top:90px}
  .fp-hero-stats{flex-direction:column;align-items:stretch}
  .fp-profile{flex-direction:column;align-items:stretch;text-align:center}
  .fp-profile-left{flex-direction:column;text-align:center}
  .fp-profile-lvl-row{justify-content:center}
  .fp-profile-bar{width:100%;max-width:220px}
  .fp-profile-right{justify-content:center}
  .fp-profile-guest{flex-direction:column;text-align:center}
  .fp-profile-guest .fp-profile-left{flex-direction:column}
  .fp-profile-guest-sub{max-width:none}
  .ep-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .footer-email-col{order:-1}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  #nav-overlay{padding:70px 28px 24px}
  .overlay-name{font-size:clamp(1.6rem,7vw,2.2rem)}
  .overlay-nav-link{padding:8px 0}
  .overlay-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .overlay-tagline{display:none}
  .sec{padding:48px 18px}
  .cs-hero{padding:50px 18px 40px}
  .hero{padding:40px 18px 48px}
  .hero-title{font-size:clamp(2.8rem,13vw,5rem)}
  .cs-title{font-size:clamp(2.2rem,10vw,4rem)}
  .uni-card{min-height:180px}
  .uni-name{font-size:1.2rem}
}
@media(max-width:480px){
  .meme-grid{grid-template-columns:repeat(2,1fr)}
  /* Firepit: still 2 cols at 480px but with tighter gap */
  .firepit-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .merch-grid{grid-template-columns:1fr}
  .ep-grid{grid-template-columns:1fr}
  .merch-card-feature{grid-template-columns:1fr}
  .merch-feature-img{border-radius:16px 16px 0 0;min-height:200px}
  .merch-feature-body{border-radius:0 0 16px 16px}
  .merch-feature-img-overlay{background:linear-gradient(to bottom,transparent 60%,var(--bg-card) 100%)}
  .merch-how{flex-direction:column;align-items:flex-start;gap:10px}
  .merch-how-arrow{display:none}
  .cs-form{flex-direction:column;align-items:stretch}
  .cs-input{min-width:0;width:100%}
  .hero-stats{gap:20px}
  .stat-v{font-size:1.7rem}
  .universe-grid{grid-template-columns:1fr}
  .claim-form-row{grid-template-columns:1fr}
  .home-drop-banner{grid-template-columns:1fr;padding:28px 20px;gap:32px}
  .home-drop-stats{gap:16px}
  .filter-bar{flex-wrap:nowrap;padding-bottom:4px}
}
@media(max-width:380px){
  .meme-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── IMAGE LAZY FADE-IN ─────────────────────────────────── */
img.lazy-fade{opacity:0;transition:opacity .4s ease}
img.lazy-fade.loaded{opacity:1}

/* ── BUTTON RIPPLE ──────────────────────────────────────── */
.ripple-host{position:relative;overflow:hidden}
@keyframes ripple-out{to{transform:scale(3.5);opacity:0}}
.ripple-wave{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:scale(0);pointer-events:none;
  animation:ripple-out .55s ease-out forwards;
}

/* ── EYEBROW SLIDE-IN ───────────────────────────────────── */
@keyframes eyebrow-in{from{width:0;opacity:0}to{width:20px;opacity:1}}
.eyebrow::before{animation:eyebrow-in .5s ease forwards}

/* ── HERO SCROLL HINT (mobile) ──────────────────────────── */
.hero-scroll-hint{
  display:none;
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  flex-direction:column;align-items:center;gap:5px;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);animation:bounce-hint 2s ease-in-out infinite;
}
@keyframes bounce-hint{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
.hero-scroll-hint svg{opacity:.4}
@media(max-width:1024px){.hero-scroll-hint{display:flex}}

/* ── MEME CARD POLISH ───────────────────────────────────── */
.m-title{
  font-size:.82rem;font-weight:600;color:var(--cream);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:5px;
}
.m-info{padding:9px 12px 10px}

/* ── LORE "IGNITE" PULSE ────────────────────────────────── */
@keyframes ignite-pulse{0%,100%{text-shadow:0 0 12px rgba(232,101,26,.4)}50%{text-shadow:0 0 32px rgba(232,101,26,.9),0 0 60px rgba(245,166,35,.4)}}
.lore-ignite .t-o{animation:ignite-pulse 2.8s ease-in-out infinite}

/* ── LIGHTBOX MOBILE FIXES ──────────────────────────────── */
@media(max-width:640px){
  .lb-btns{gap:5px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .lb-btn{padding:5px 10px;font-size:.65rem;white-space:nowrap;flex-shrink:0}
  .lb-title-row{padding:8px 14px 0}
  .lb-title{font-size:.88rem}
  .lb-meta{padding:8px 14px 12px}
}

/* ── LIVE HOLDER BADGE MOBILE ───────────────────────────── */
@media(max-width:480px){
  .live-holder-badge{font-size:.68rem;padding:7px 12px}
}

/* ── UNI-CARD ACTIVE STATE (touch) ─────────────────────── */
.uni-card:active{transform:translateY(-2px);border-color:var(--border-hot)}

/* ── IMPROVED SECTION FLOW ──────────────────────────────── */
@media(max-width:768px){
  .memes-header-row{flex-direction:column;align-items:flex-start;gap:12px}
  .memes-header-row .sec-sub{margin-bottom:4px}
}
@media(max-width:480px){
  .hot-grid{grid-template-columns:repeat(2,1fr)}
  .hot-card-title{font-size:.72rem}
}

/* ── FOCUS VISIBLE — keyboard navigation ring ───────────── */
:focus{outline:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* ── MOBILE ACTIVE PRESS STATES ─────────────────────────── */
button:active,.btn-p:active,.btn-o:active,.nav-cta:active,.f-btn:active,
.btn-more:active,.btn-claim-submit:active{
  transform:scale(.96)!important;transition-duration:60ms!important;
}

/* ── IMAGE SKELETON SHIMMER ─────────────────────────────── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.m-img{background:var(--bg-card)}
.m-img:not([src=""]):not([src]){animation:shimmer 1.4s ease-in-out infinite;background-size:400px 100%}

/* ── BACK TO TOP BUTTON ─────────────────────────────────── */
#back-top{
  position:fixed;bottom:28px;right:24px;z-index:1800;
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-card2);border:1px solid var(--border-gold);
  color:var(--gold);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,border-color var(--ease);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
#back-top.show{opacity:1;pointer-events:all;transform:translateY(0)}
#back-top:hover{border-color:var(--orange);color:var(--orange);box-shadow:0 4px 24px rgba(232,101,26,.3)}

/* ── TOAST NOTIFICATIONS ────────────────────────────────── */
#toast-rack{
  position:fixed;bottom:88px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;width:max-content;max-width:calc(100vw - 32px);
}
.toast{
  padding:11px 22px;border-radius:100px;
  background:rgba(23,17,10,.96);border:1px solid var(--border);
  font-size:.82rem;font-weight:600;color:var(--cream);
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .22s ease,transform .22s ease;
  white-space:normal;word-break:break-word;text-align:center;
  backdrop-filter:blur(12px);
}
.toast.show{opacity:1;transform:translateY(0) scale(1)}
.toast.t-success{border-color:rgba(76,185,68,.4);color:var(--green)}
.toast.t-error{border-color:rgba(255,107,107,.35);color:#ff6b6b}
.toast.t-gold{border-color:var(--border-gold);color:var(--gold)}

/* ── CURSOR GLOW (desktop only) ─────────────────────────── */
#cursor-glow{
  position:fixed;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,101,26,.07) 0%,transparent 70%);
  pointer-events:none;z-index:0;will-change:transform;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;
}

/* ── MEME SEARCH ────────────────────────────────────────── */
.meme-search-wrap{position:relative;margin-bottom:16px}
.meme-search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.4}
.meme-search{
  width:100%;padding:10px 16px 10px 40px;
  border-radius:100px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--cream);
  font-family:'Epilogue',sans-serif;font-size:.85rem;
  outline:none;transition:border-color var(--ease);
}
.meme-search:focus{border-color:var(--orange)}
.meme-search::placeholder{color:var(--dim)}
.search-empty{text-align:center;padding:60px 24px;color:var(--dim);font-size:.9rem}

/* ── SCROLL PROGRESS BAR ────────────────────────────────── */
#scroll-bar{
  position:fixed;top:0;left:0;height:2px;width:0%;z-index:9999;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  transition:width .08s linear;
  pointer-events:none;
}

/* ── LIGHTBOX ENHANCEMENTS ──────────────────────────────── */
.lb-img-wrap-inner{
  position:relative;
  border-radius:18px 18px 0 0;  /* clip image top corners to match card border-radius */
  overflow:hidden;
}
.lb-img{
  /* Show the FULL image at its natural aspect ratio — no cropping, no black bars.
     width:100% fills the card width. height:auto lets the image determine its own height.
     The card adapts to the image, and lb-wrap scrolls if the card is taller than viewport. */
  width:100%;
  height:auto;
  display:block;
  background:transparent;
  transition:opacity .18s ease;
}
.lb-img.fading{opacity:0}
.lb-img-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card2) 50%,var(--bg-card) 75%);
  background-size:400px 100%;
  animation:shimmer 1.2s ease-in-out infinite;
  opacity:0;transition:opacity .15s ease;pointer-events:none;
}
.lb-img-shimmer.show{opacity:1}
.lb-title-row{
  padding:10px 20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--border);
}
.lb-title{
  font-family:'Anton',sans-serif;font-size:1rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--cream);line-height:1.1;
  min-width:0; /* allow flex item to shrink so title doesn't overflow */
  word-break:break-word;
}
.lb-cat{
  flex-shrink:0;padding:3px 10px;border-radius:100px;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);color:var(--gold);
}
.lb-cat.c-crypto{background:rgba(76,185,68,.1);border-color:rgba(76,185,68,.25);color:var(--green)}
.lb-cat.c-daily{background:rgba(232,101,26,.1);border-color:rgba(232,101,26,.25);color:var(--orange)}
.lb-cat.c-collab{background:rgba(192,122,255,.1);border-color:rgba(192,122,255,.25);color:#c07aff}
.lb-meta{padding:8px 16px 12px;display:flex;flex-direction:column;gap:8px}
.lb-meta-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}

/* ── STICKY FILTER PILL ─────────────────────────────────── */
#filter-pill{
  position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-12px);
  z-index:1500;
  padding:6px 16px;border-radius:100px;
  background:rgba(23,17,10,.92);border:1px solid var(--border-gold);
  backdrop-filter:blur(14px);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:var(--gold);white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
#filter-pill.show{opacity:1;pointer-events:none;transform:translateX(-50%) translateY(0)}

/* ── HOT RIGHT NOW ──────────────────────────────────────── */
.hot-section{margin-bottom:40px}
.hot-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;
}
.hot-label::before{content:'';display:block;width:14px;height:2px;background:var(--orange);box-shadow:0 0 6px var(--orange)}
.hot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:640px){.hot-grid{grid-template-columns:repeat(2,1fr)}}
.hot-card{
  position:relative;border-radius:12px;overflow:hidden;cursor:pointer;
  border:1px solid var(--border);
  transition:border-color var(--ease),transform var(--ease);
  aspect-ratio:1;
}
.hot-card:hover{border-color:var(--border-hot);transform:translateY(-3px)}
.hot-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.hot-card:hover img{transform:scale(1.05)}
.hot-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,9,4,.88) 0%,transparent 55%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px;
}
.hot-card-title{font-family:'Anton',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);line-height:1.1;margin-bottom:3px}
.hot-card-views{display:flex;align-items:center;gap:4px;font-size:.62rem;color:var(--orange);font-weight:600}
.hot-rank{
  position:absolute;top:8px;left:8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--orange);color:#fff;
  font-family:'Anton',sans-serif;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px rgba(232,101,26,.5);
}

/* ── FOOTER EMAIL CAPTURE ───────────────────────────────── */
.footer-email-col{min-width:220px}
.footer-email-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.footer-email-title{font-family:'Anton',sans-serif;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:12px}
.footer-email-form{display:flex;flex-direction:column;gap:8px}
.footer-email-input{
  padding:9px 14px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--cream);
  font-family:'Epilogue',sans-serif;font-size:.8rem;outline:none;
  transition:border-color var(--ease);
}
.footer-email-input:focus{border-color:var(--orange)}
.footer-email-input::placeholder{color:var(--dim)}
.footer-email-btn{
  padding:9px 14px;border-radius:8px;
  background:var(--orange);color:#fff;font-weight:700;font-size:.78rem;
  letter-spacing:.04em;cursor:pointer;border:none;
  transition:opacity .2s,box-shadow .2s;
}
.footer-email-btn:hover{opacity:.88;box-shadow:0 0 18px rgba(232,101,26,.4)}

/* ── LIVE HOLDER COUNT (NFT page) ───────────────────────── */
.live-holder-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:100px;
  background:rgba(76,185,68,.08);border:1px solid rgba(76,185,68,.25);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;
  color:var(--green);margin-bottom:20px;
}
.live-holder-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px var(--green);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.live-holder-count{font-family:'Share Tech Mono',monospace;font-size:.9rem}

/* ── FLAME DODGE GAME MODAL ──────────────────────────────── */
.fd-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:2100;
  display:none;align-items:flex-start;justify-content:center;
  padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.fd-modal{
  background:var(--bg-card);border:1px solid rgba(232,101,26,.3);border-radius:24px;
  padding:18px;max-width:460px;width:100%;position:relative;
  box-shadow:0 0 60px rgba(232,101,26,.15);
  margin:auto; /* vertically centres when viewport is tall; stays at top when it's short */
}
.fd-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fd-title{font-family:'Anton',sans-serif;font-size:1.3rem;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.fd-close{background:none;border:none;color:var(--dim);font-size:1.2rem;cursor:pointer;padding:4px 8px;line-height:1;transition:color var(--ease)}
.fd-close:hover{color:var(--cream)}

.fd-hud{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 4px}
.fd-hud-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.fd-hud-lbl{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fd-hud-val{font-family:'Share Tech Mono',monospace;font-size:1.15rem;font-weight:700;display:inline-block}
.fd-hud-val.combo-pop{animation:fd-combo-pop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes fd-combo-pop{0%{transform:scale(1.6);color:#ffd23f;text-shadow:0 0 10px rgba(255,210,63,.8)}100%{transform:scale(1);color:inherit;text-shadow:none}}
/* Universal HUD score flash — triggered by .pop class in any game */
.fd-hud-val.score-pop{animation:fd-score-pop .2s ease-out forwards}
@keyframes fd-score-pop{0%{transform:scale(1.45);color:#ffe566;text-shadow:0 0 12px rgba(255,220,80,.9)}100%{transform:scale(1);color:inherit;text-shadow:none}}
/* Forge Frenzy — FEVER METER pips */
.fg-fever-meter{display:flex;align-items:center;gap:5px;padding:2px 0}
.fg-fever-pip{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  transition:background .12s,box-shadow .12s,transform .12s;
}
.fg-fever-pip.lit{background:#ff8800;border-color:#ff8800;box-shadow:0 0 8px rgba(255,136,0,.85)}
.fg-fever-pip.ready{background:#ff3300;border-color:#ff2200;box-shadow:0 0 14px rgba(255,50,0,1);animation:fg-pip-ready .35s ease-in-out infinite alternate}
@keyframes fg-pip-ready{from{transform:scale(1)}to{transform:scale(1.4)}}
/* Ember Strike — countdown timer danger state */
.es-timer-danger{color:#ff4444!important;animation:es-timer-flash .5s ease-in-out infinite alternate}
@keyframes es-timer-flash{from{opacity:1;text-shadow:0 0 8px rgba(255,50,50,.8)}to{opacity:.6;text-shadow:none}}
/* Firepit — Personal Records panel */
.fp-records-wrap{margin-top:32px;animation:fp-fade-in .4s ease}
.fp-records-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;margin-top:12px;
}
.fp-record-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .2s,background .2s;
  cursor:default;
}
.fp-record-card:hover{background:rgba(255,255,255,.07);border-color:rgba(232,101,26,.35)}
.fp-record-icon{font-size:1.3rem;line-height:1}
.fp-record-name{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-top:1px}
.fp-record-best{font-family:'Share Tech Mono',monospace;font-size:1.1rem;font-weight:700;color:#fff}
.fp-record-best.unplayed{color:rgba(255,255,255,.22);font-size:.85rem}
.fp-record-plays{font-size:.6rem;color:var(--dim)}
.fd-hud-lives{font-size:1.05rem;letter-spacing:2px;align-self:center}
.fd-hud-powerups{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.fd-pu-badge{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;font-size:.85rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);animation:fd-pu-pulse 1.1s ease-in-out infinite;
}
.fd-pu-badge.fd-pu-fever{border-color:rgba(255,180,0,.7);box-shadow:0 0 10px rgba(255,140,0,.55);animation:fd-pu-pulse .45s ease-in-out infinite;font-size:.7rem;font-weight:700;letter-spacing:.02em}
.fd-pu-badge.fd-pu-shield{border-color:rgba(93,214,255,.5);box-shadow:0 0 8px rgba(93,214,255,.35)}
.fd-pu-badge.fd-pu-magnet{border-color:rgba(199,146,255,.5);box-shadow:0 0 8px rgba(199,146,255,.35)}
.fd-pu-badge.fd-pu-slow{border-color:rgba(124,255,178,.5);box-shadow:0 0 8px rgba(124,255,178,.35)}
.fd-pu-badge.fd-pu-mult{border-color:rgba(255,210,63,.5);box-shadow:0 0 8px rgba(255,210,63,.35)}
.fd-pu-badge.fd-pu-focus{border-color:rgba(199,146,255,.5);box-shadow:0 0 8px rgba(199,146,255,.35)}
@keyframes fd-pu-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ── EMBER RUSH GAME MODAL (Ember Rush-specific overrides) ── */
.er-modal{border-color:rgba(255,210,63,.3);box-shadow:0 0 60px rgba(255,210,63,.12)}
.er-stage{border-color:rgba(255,210,63,.22);background:#0a0712}
/* ── Avalanche ── */
/* ── Boulder Drop ── deep amber-lava stacking theme */
.bd-modal{border-color:rgba(200,110,20,.42);box-shadow:0 0 60px rgba(180,80,10,.22)}
.bd-stage{border-color:rgba(180,90,10,.30);background:#0a0300}
.av-modal{border-color:rgba(160,100,30,.40);box-shadow:0 0 60px rgba(140,80,10,.18)}
.av-stage{border-color:rgba(140,90,20,.32);background:#09040000}
.ec-modal{border-color:rgba(255,120,20,.40);box-shadow:0 0 60px rgba(255,80,0,.22)}
.ec-stage{border-color:rgba(255,100,10,.32);background:#060100}
/* ── Lava Run ── */
.lr-modal{border-color:rgba(232,101,26,.35);box-shadow:0 0 60px rgba(232,101,26,.16)}
.lr-stage{border-color:rgba(232,101,26,.28);background:#0d0702}
/* ── Frito Flip ── dark volcanic-night theme (blue-violet + lava) */
.ff-modal{border-color:rgba(90,60,200,.35);box-shadow:0 0 60px rgba(90,60,200,.14)}
.ff-stage{border-color:rgba(90,60,200,.22);background:#0c0914}
/* ── Ash Breaker ── deep ember-brick theme (dark crimson + purple glow) */
.ab-modal{border-color:rgba(180,40,160,.35);box-shadow:0 0 60px rgba(180,40,160,.14)}
.ab-stage{border-color:rgba(160,30,120,.22);background:#0e0818}

.fd-stage{
  position:relative;width:100%;aspect-ratio:2/3;max-height:62vh;
  border-radius:16px;overflow:hidden;border:1px solid rgba(232,101,26,.25);
  background:#0d0a08;
}
/* During gameplay the canvas fills the stage — keep overflow:hidden for border-radius clipping.
   During start/gameover/leaderboard screens, set overflow:visible so the fd-screen can grow
   past the stage boundary on small phones — the Play button is NEVER clipped off.
   Covers all screen name variants across all 8 games:
   'start' | 'over' | 'gameover' | 'board' | 'leaderboard'  →  overflow:visible
   'game'  | 'none'                                          →  overflow:hidden  */
.fd-stage[data-screen="start"],
.fd-stage[data-screen="over"],
.fd-stage[data-screen="gameover"],
.fd-stage[data-screen="board"],
.fd-stage[data-screen="leaderboard"]{overflow:visible}
.fd-stage[data-screen="game"],
.fd-stage[data-screen="none"]{overflow:hidden}
.fd-stage canvas{display:block;width:100%;height:100%;touch-action:none}
/* Hide canvas (last game frame or idle animation) whenever a UI screen is showing.
   Only reveal it during active gameplay (data-screen="none" or "game").
   This prevents any bleed-through on start / game-over / leaderboard overlays. */
.fd-stage:not([data-screen="none"]):not([data-screen="game"]) canvas{visibility:hidden}

.fd-screen{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:20px 24px;gap:10px;
  background:linear-gradient(180deg,rgba(13,10,8,.80),rgba(13,10,8,.92));
  backdrop-filter:blur(0px);
  /* overflow-y:auto allows the screen to scroll when content exceeds stage height */
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.fd-screen-icon{font-size:2.6rem;line-height:1}
.fd-screen-title{font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.04em;margin:0}
.fd-screen-desc{font-size:.85rem;color:var(--dim);max-width:320px;line-height:1.5;margin:0}
.fd-play-cost{font-size:.85rem;color:var(--cream);margin:4px 0}
/* touch-action:manipulation removes 300ms tap delay on iOS for all game buttons */
.fd-play-btn-big{padding:12px 32px;font-size:.95rem;margin-top:4px;touch-action:manipulation}
.fd-link-btn,.fd-close{touch-action:manipulation}

/* Suppress "Unknown action" and any other buttons injected by wallet browser
   extensions (Brave wallet, Xaman extension, MetaMask, etc.) into our game
   modals. Our own buttons always carry one of the three expected classes. */
.fd-screen > button:not(.forge-claim-btn):not(.fd-link-btn):not(.fd-close),
.fd-screen button[class=""],
.fd-screen button:not([class]),
.fd-modal > button:not(.forge-claim-btn):not(.fd-link-btn):not(.fd-close) {
  display: none !important;
}

.fd-link-btn{
  background:none;border:none;color:var(--dim);font-size:.78rem;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;transition:color var(--ease),text-decoration-color var(--ease);
  padding:4px 8px;
}
.fd-link-btn:hover{color:var(--gold);text-decoration-color:var(--gold)}
.fd-share-btn{color:#1d9bf0 !important}
.fd-share-btn:hover{color:#fff !important;text-decoration-color:#1d9bf0}

.fd-result-row{
  display:flex;align-items:center;justify-content:space-between;width:100%;max-width:240px;
  font-size:.95rem;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.fd-result-row:last-of-type{border-bottom:none}
.fd-result-row span:first-child{color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.fd-result-row span:last-child{font-family:'Share Tech Mono',monospace;font-weight:700;font-size:1.05rem}
.fd-level-up{
  font-family:'Anton',sans-serif;font-size:.95rem;color:var(--gold);
  background:rgba(255,201,74,.1);border:1px solid rgba(255,201,74,.3);
  border-radius:10px;padding:8px 14px;margin:4px 0;
}
.fd-new-best{
  font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:.04em;color:#ffc94a;
  background:linear-gradient(90deg,rgba(255,201,74,.18),rgba(232,101,26,.18));
  border:1px solid rgba(255,201,74,.4);border-radius:10px;padding:8px 16px;
  animation:fd-best-glow 1.4s ease-in-out infinite;
}
@keyframes fd-best-glow{
  0%,100%{box-shadow:0 0 6px rgba(255,201,74,.25)}
  50%{box-shadow:0 0 18px rgba(255,201,74,.6)}
}

.fd-board-list{list-style:none;margin:0;padding:0;width:100%;max-width:300px;max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.fd-board-row{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);font-size:.85rem;
}
.fd-board-row.fd-board-me{background:rgba(232,101,26,.12);border:1px solid rgba(232,101,26,.3)}
.fd-board-rank{width:28px;flex-shrink:0;text-align:center;font-weight:700}
.fd-board-wallet{flex:1;font-family:'Share Tech Mono',monospace;color:var(--dim);text-align:left}
.fd-board-score{font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--gold)}
.fd-board-loading{text-align:center;color:var(--dim);font-size:.85rem;padding:20px 0;list-style:none}

@media(max-width:520px){
  /* Modal shell */
  .fd-overlay{padding:10px}
  .fd-modal{padding:12px;border-radius:18px}
  .fd-title{font-size:1.05rem}
  .fd-header{margin-bottom:6px}
  /* HUD — tighter on phones */
  .fd-hud{gap:6px;margin-bottom:6px;padding:0 2px}
  .fd-hud-val{font-size:.95rem}
  .fd-hud-lbl{font-size:.55rem}
  .fd-hud-lives{font-size:.9rem;letter-spacing:1px}
  /* Canvas stage — limit height so content screens don't get clipped on small phones */
  .fd-stage{max-height:52vh}
  /* Start / gameover / leaderboard screen overlays — very compact */
  .fd-screen{gap:6px;padding:12px 14px}
  .fd-screen-icon{font-size:1.8rem;line-height:1}
  .fd-screen-title{font-size:1.1rem}
  .fd-screen-desc{font-size:.76rem;line-height:1.4}
  .fd-play-cost{font-size:.78rem;margin:2px 0}
  .fd-play-btn-big{padding:10px 24px;font-size:.86rem;margin-top:2px}
  .fd-result-row{font-size:.82rem;padding:6px 0}
  /* Leaderboard */
  .fd-board-wallet{font-size:.72rem}
  .fd-board-score{font-size:.82rem}
}
/* Very small phones (iPhone SE 1st gen = 568px tall, Galaxy A series) */
@media(max-width:380px){
  .fd-overlay{padding:6px}
  .fd-modal{padding:10px;border-radius:14px}
  .fd-stage{max-height:48vh}
  .fd-screen{padding:10px 12px;gap:4px}
  .fd-screen-icon{font-size:1.5rem}
  .fd-screen-title{font-size:1rem}
  .fd-screen-desc{font-size:.72rem;line-height:1.35}
  .fd-hud-val{font-size:.85rem}
  .fd-play-btn-big{padding:9px 20px;font-size:.82rem}
}

/* ── Forge Frenzy modal theme ──────────────────────── */
.fg-overlay{}
.fg-modal{border-color:rgba(255,160,20,.35);box-shadow:0 0 60px rgba(255,160,20,.14)}
.fg-stage{border-color:rgba(255,160,20,.22);background:#0e0a06}
/* ── Ember Strike (es) theme: deep lava red ── */
.es-overlay{}
.es-modal{border-color:rgba(255,60,0,.38);box-shadow:0 0 60px rgba(255,60,0,.16)}
.es-stage{border-color:rgba(255,80,0,.3);background:#1c0900}
#es-mode{font-size:.7rem;color:#ff6633;font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:none}

/* ── Chip Blitz (cb) theme: warm orange-red / chip bag ── */
.cb-overlay{}
.cb-modal{border-color:rgba(232,101,26,.4);box-shadow:0 0 60px rgba(232,101,26,.18)}
.cb-stage{border-color:rgba(232,101,26,.28);background:#0e0700}
/* Spice meter pips */
.cb-spice-meter{display:flex;align-items:center;gap:5px;padding:2px 0}
.cb-spice-pip{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  transition:background .12s,box-shadow .12s,transform .12s;
}
.cb-spice-pip.lit{background:#e8651a;border-color:#e8651a;box-shadow:0 0 8px rgba(232,101,26,.9)}
.cb-spice-pip.mega{background:#ff3300;border-color:#ff2200;box-shadow:0 0 14px rgba(255,50,0,1);animation:cb-pip-mega .3s ease-in-out infinite alternate}
@keyframes cb-pip-mega{from{transform:scale(1)}to{transform:scale(1.45)}}
/* MEGA CRUNCH countdown bar */
.cb-mega-wrap{
  display:flex;align-items:center;gap:8px;
  padding:4px 6px 0;margin-top:-4px;
}
.cb-mega-bar-track{
  flex:1;height:5px;border-radius:3px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.cb-mega-bar{
  height:100%;width:100%;border-radius:3px;
  background:linear-gradient(90deg,#ff8800,#ff3300);
  box-shadow:0 0 8px rgba(255,80,0,.7);
  transition:width .1s linear;
}
.cb-mega-label{
  font-size:.6rem;font-weight:700;letter-spacing:.06em;
  color:#ff6633;text-transform:uppercase;white-space:nowrap;
  animation:cb-mega-pulse .5s ease-in-out infinite alternate;
}
@keyframes cb-mega-pulse{from{opacity:.7}to{opacity:1}}
/* Danger border on stage */
.cb-stage.cb-danger{
  border-color:rgba(255,60,60,.6)!important;
  box-shadow:0 0 0 2px rgba(255,40,40,.25),inset 0 0 20px rgba(255,0,0,.08);
  animation:cb-danger-pulse .4s ease-in-out infinite alternate;
}
@keyframes cb-danger-pulse{
  from{border-color:rgba(255,60,60,.4)!important}
  to{border-color:rgba(255,60,60,.85)!important}
}

/* ── Vault Cracker (vc) theme: deep gold / dark vault ── */
.vc-overlay{}
.vc-modal{border-color:rgba(255,210,50,.35);box-shadow:0 0 60px rgba(255,200,40,.18)}
.vc-stage{border-color:rgba(255,200,40,.22);background:#0a0800}
/* ring lock flash */
@keyframes vc-ring-lock{
  0%{opacity:1}25%{opacity:.4}50%{opacity:1}75%{opacity:.5}100%{opacity:1}
}
/* vault crack burst overlay */
.vc-burst{
  position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;opacity:0;
  animation:vc-burst-anim .7s ease-out forwards;
  z-index:10;
}
@keyframes vc-burst-anim{
  0%{opacity:1;transform:scale(.6)}
  60%{opacity:1;transform:scale(1.3)}
  100%{opacity:0;transform:scale(1.6)}
}
/* INFERNO vault flash */
.vc-inferno-flash{
  position:absolute;inset:0;background:radial-gradient(circle,rgba(255,60,0,.35),transparent 70%);
  pointer-events:none;animation:vc-inferno-pulse 1s ease-in-out infinite alternate;z-index:1;
}
@keyframes vc-inferno-pulse{from{opacity:.5}to{opacity:1}}

/* Inter-vault pulse — fills the 0.9s crack-anim gap with a radial flash */
.vc-vault-pulse{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  border-radius:inherit;
  background:radial-gradient(circle,rgba(255,220,80,.18) 0%,transparent 65%);
  animation:vc-vault-pulse-anim 0.9s ease-out forwards;
}
@keyframes vc-vault-pulse-anim{
  0%  {opacity:0;transform:scale(.6)}
  15% {opacity:1;transform:scale(1.08)}
  60% {opacity:.55;transform:scale(1.18)}
  100%{opacity:0;transform:scale(1.35)}
}

/* ── TERMS OF SERVICE PAGE ─────────────────────────────── */
.terms-body { color: var(--cream-d); line-height: 1.75; }

.terms-section {
  margin-bottom: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.terms-section:last-child { border-bottom: none; }

.terms-section h2 {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--orange);
}

.terms-section p {
  font-size: .88rem;
  margin-bottom: 12px;
  color: var(--cream-d);
}
.terms-section p:last-child { margin-bottom: 0; }

.terms-section ul,
.terms-section ol {
  font-size: .88rem;
  padding-left: 22px;
  margin: 10px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--cream-d);
}

.terms-section ol { list-style: decimal; }
.terms-section ul { list-style: disc; }

.terms-section strong { color: var(--cream); }

.terms-section a {
  color: var(--orange);
  text-decoration: underline;
}

.terms-highlight {
  background: rgba(232,101,26,.07);
  border: 1px solid rgba(232,101,26,.2);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: .86rem;
  color: var(--cream-d);
  margin: 14px 0;
  line-height: 1.7;
}
.terms-highlight ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.terms-toc-link {
  font-size: .78rem;
  color: var(--dim);
  text-decoration: none;
  transition: color .2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.terms-toc-link:hover { color: var(--orange); }

@media (max-width: 600px) {
  #page-terms .terms-body .terms-section h2 { font-size: .9rem; }
  #page-terms .terms-body { font-size: .84rem; }
  #page-terms .sec { padding-top: 40px !important; }
  /* Stack ToC to single column on mobile */
  #page-terms .sec > div:nth-child(2) > div:last-child {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ANIMATED SERIES — Cinematic redesign
   Theme: film studio · underground animation · streaming dark
═══════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --sv-purple: #c07aff;
  --sv-purple-d: #8b4cf7;
  --sv-gold: #f5a623;
}

/* ── Hero ────────────────────────────────────────────────── */
.sv-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sv-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: brightness(.38) saturate(1.3);
  transform: scale(1.04);
}
/* Multi-layer cinematic vignette */
.sv-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(5,3,1,.7) 100%),
    linear-gradient(to bottom, rgba(5,3,1,.55) 0%, transparent 30%, transparent 60%, rgba(5,3,1,.85) 100%);
}
/* Film grain overlay */
.sv-hero-grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
}

/* ── Film perforation borders ────────────────────────────── */
/* Uses background-position animation — perfectly seamless, no seam jump */
.sv-film-border {
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  z-index: 3;
  background-color: rgba(0,0,0,.65);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 10px,
    rgba(255,255,255,.22) 10px,
    rgba(255,255,255,.22) 22px,
    transparent 22px,
    transparent 32px
  );
  background-size: 32px 12px;
  background-position: 0 center;
  background-repeat: repeat-x;
  animation: sv-filmroll 2.4s linear infinite;
}
.sv-film-border-top { top: 0; }
.sv-film-border-bottom { bottom: 0; animation-direction: reverse; }
@keyframes sv-filmroll {
  from { background-position: 0 center; }
  to   { background-position: 32px center; }
}

/* ── Hero inner content ───────────────────────────────────── */
.sv-hero-inner {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 40px 24px;
  max-width: 760px;
  margin: 0 auto;
}
.sv-studio-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: .58rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(192,122,255,.6);
  margin-bottom: 20px;
}
.sv-hero-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
}
.sv-title-line1 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4.2rem, 14vw, 8.5rem);
  line-height: .88;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--sv-gold);
  text-shadow: 0 0 60px rgba(245,166,35,.35), 0 4px 24px rgba(0,0,0,.8);
  display: block;
}
.sv-title-line2 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.4rem, 4.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-d);
  display: block;
}
.sv-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sv-hero-chip {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-d);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 5px 12px;
  border-radius: 99px;
}
.sv-hero-divider { color: rgba(255,255,255,.2); font-size: .7rem; }
.sv-hero-tagline {
  font-size: clamp(.95rem, 2.5vw, 1.15rem);
  color: var(--cream-d);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero CTAs ────────────────────────────────────────────── */
.sv-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.sv-hero-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sv-gold);
  color: #0d0904;
  border: none;
  border-radius: 10px;
  padding: 13px 28px;
  font-family: 'Anton', sans-serif;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, opacity .18s;
  box-shadow: 0 6px 28px rgba(245,166,35,.35);
}
.sv-hero-watch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(245,166,35,.5);
}
.sv-hero-notify-btn {
  background: rgba(192,122,255,.12);
  color: var(--sv-purple);
  border: 1px solid rgba(192,122,255,.35);
  border-radius: 10px;
  padding: 13px 24px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s, transform .18s;
}
.sv-hero-notify-btn:hover {
  background: rgba(192,122,255,.2);
  transform: translateY(-2px);
}

/* Scroll hint */
.sv-scroll-hint {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255,255,255,.3);
  animation: sv-bob 2.4s ease-in-out infinite;
}
@keyframes sv-bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ── Featured spotlight ───────────────────────────────────── */
.sv-featured {
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}
.sv-featured-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.35) saturate(1.2);
  transition: transform .5s ease;
}
.sv-featured:hover .sv-featured-bg { transform: scale(1.03); }
.sv-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,3,1,.9) 0%, rgba(5,3,1,.5) 55%, transparent 100%);
}
.sv-featured-inner {
  position: relative;
  z-index: 2;
  padding: 64px 40px;
  max-width: 560px;
}
.sv-featured-badge {
  display: inline-block;
  background: var(--sv-gold);
  color: #0d0904;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.sv-featured-ep {
  font-family: 'Share Tech Mono', monospace;
  font-size: .65rem;
  color: rgba(192,122,255,.8);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sv-featured-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: .95;
  color: var(--cream);
  margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,.8);
}
.sv-featured-desc {
  font-size: .9rem;
  color: var(--cream-d);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 380px;
}
.sv-featured-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--cream);
  border-radius: 10px;
  padding: 12px 24px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s, transform .18s;
  backdrop-filter: blur(8px);
}
.sv-featured-play:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.sv-featured-min { height: 420px; }

/* ── Episodes section ─────────────────────────────────────── */
.sv-episodes-section {
  padding: 72px 24px 56px;
  max-width: 1160px;
  margin: 0 auto;
}
.sv-section-header {
  text-align: center;
  margin-bottom: 44px;
}
.sv-reel-icon {
  color: rgba(192,122,255,.5);
  margin-bottom: 12px;
}
.sv-section-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
}
.sv-section-sub {
  color: var(--dim);
  font-size: .85rem;
}

/* ── Episode grid ─────────────────────────────────────────── */
.sv-episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* ── Episode card ─────────────────────────────────────────── */
.sv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .22s, box-shadow .25s;
  position: relative;
}
.sv-card-live {
  cursor: pointer;
}
.sv-card-live:hover {
  transform: translateY(-6px);
  border-color: rgba(192,122,255,.4);
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(192,122,255,.08), inset 0 0 0 1px rgba(192,122,255,.04);
}
.sv-card-soon {
  cursor: default;
}
.sv-card-soon:hover {
  transform: translateY(-3px);
  border-color: rgba(232,101,26,.25);
}

/* Episode number stamp — big and dramatic */
.sv-card-ep-num {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  font-family: 'Anton', sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(255,255,255,.12);
  letter-spacing: .02em;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: color .22s;
}
.sv-card-live:hover .sv-card-ep-num { color: rgba(192,122,255,.22); }

/* Thumbnail */
.sv-card-media {
  position: relative;
  aspect-ratio: 16/9;
  background: #0e0a05;
  overflow: hidden;
  flex-shrink: 0;
}
.sv-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.sv-card-live:hover .sv-card-thumb { transform: scale(1.06); }

/* Placeholder when no thumbnail */
.sv-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #170f00 0%, #1e0d30 100%);
}
.sv-thumb-icon {
  font-size: 2.8rem;
  opacity: .2;
}

/* Play overlay */
.sv-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s;
}
.sv-card-live:hover .sv-play-overlay { opacity: 1; }
.sv-play-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: scale(.82);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s;
  background: rgba(192,122,255,.25);
  backdrop-filter: blur(6px);
}
.sv-card-live:hover .sv-play-ring {
  transform: scale(1);
  background: rgba(192,122,255,.5);
}

/* Duration + badge chips on thumbnail */
.sv-card-chips {
  position: absolute;
  bottom: 8px;
  right: 8px;
  left: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.sv-duration {
  background: rgba(0,0,0,.78);
  color: rgba(255,255,255,.9);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 5px;
  backdrop-filter: blur(6px);
}
.sv-card-badge {
  background: var(--sv-gold);
  color: #0d0904;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
}

/* Card body */
.sv-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.sv-ep-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: .6rem;
  color: rgba(192,122,255,.7);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sv-card-title {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--cream);
}
.sv-card-desc {
  font-size: .78rem;
  color: var(--dim);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sv-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.sv-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.sv-tag {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--dim);
  padding: 2px 7px;
  border-radius: 99px;
}

/* Status badges */
.sv-status {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sv-status-live {
  background: rgba(192,122,255,.14);
  border: 1px solid rgba(192,122,255,.3);
  color: var(--sv-purple);
}
.sv-status-soon {
  background: rgba(232,101,26,.1);
  border: 1px solid rgba(232,101,26,.25);
  color: var(--orange);
}
.sv-status-date {
  font-size: .6rem;
  color: var(--dim);
  font-style: italic;
}

/* ── Loading ───────────────────────────────────────────────── */
.sv-loading {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 80px 0;
}
.sv-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sv-purple);
  opacity: .25;
  animation: sv-bounce .9s ease-in-out infinite;
}
.sv-loading-dot:nth-child(2) { animation-delay: .18s; }
.sv-loading-dot:nth-child(3) { animation-delay: .36s; }
@keyframes sv-bounce {
  0%,80%,100% { transform: translateY(0); opacity: .25; }
  40%          { transform: translateY(-12px); opacity: 1; }
}
.sv-error { text-align: center; color: var(--dim); padding: 48px; font-size: .85rem; }

/* ── Empty state ──────────────────────────────────────────── */
.sv-empty-state {
  text-align: center;
  padding: 80px 24px;
}
.sv-empty-reel {
  color: rgba(192,122,255,.2);
  margin-bottom: 20px;
  animation: sv-spin 8s linear infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }
.sv-empty-title {
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream-d);
  margin-bottom: 10px;
}
.sv-empty-sub {
  font-size: .82rem;
  color: var(--dim);
  line-height: 1.65;
  max-width: 320px;
  margin: 0 auto 24px;
}
.sv-empty-notify-btn {
  background: rgba(192,122,255,.12);
  color: var(--sv-purple);
  border: 1px solid rgba(192,122,255,.3);
  border-radius: 10px;
  padding: 11px 24px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s, transform .18s;
}
.sv-empty-notify-btn:hover { background: rgba(192,122,255,.22); transform: translateY(-2px); }

/* ── Bottom notify bar ────────────────────────────────────── */
.sv-bottom-bar {
  background: rgba(192,122,255,.05);
  border-top: 1px solid rgba(192,122,255,.1);
  padding: 18px 24px;
}
.sv-bottom-bar-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sv-bottom-bar-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--dim);
}
.sv-bottom-bar-icon { font-size: 1.1rem; }
.sv-bottom-notify-btn {
  background: var(--sv-purple-d);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .2s, transform .18s;
  white-space: nowrap;
}
.sv-bottom-notify-btn:hover { opacity: .85; transform: translateY(-1px); }

/* ── Notify modal ─────────────────────────────────────────── */
.sv-notify-overlay {
  position: fixed;
  inset: 0;
  z-index: 5500;
  background: rgba(5,3,1,.88);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s;
}
.sv-notify-overlay.sv-nopen { opacity: 1; }
.sv-notify-modal {
  background: var(--bg-card);
  border: 1px solid rgba(192,122,255,.22);
  border-radius: 20px;
  padding: 36px 32px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation: sv-modal-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes sv-modal-in { from { transform: scale(.92) translateY(12px); } to { transform: scale(1) translateY(0); } }
.sv-notify-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.sv-notify-modal-close:hover { background: rgba(255,255,255,.14); }
.sv-notify-modal-icon { font-size: 2.4rem; margin-bottom: 14px; }
.sv-notify-modal-title {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 8px;
}
.sv-notify-modal-desc {
  font-size: .82rem;
  color: var(--dim);
  line-height: 1.65;
  margin-bottom: 22px;
}
.sv-notify-modal-form { display: flex; flex-direction: column; gap: 10px; }
.sv-notify-modal-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--cream);
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
  text-align: center;
}
.sv-notify-modal-input:focus { border-color: rgba(192,122,255,.5); }
.sv-notify-modal-input::placeholder { color: var(--dim); }
.sv-notify-modal-btn {
  background: linear-gradient(135deg, var(--sv-purple), var(--sv-purple-d));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .2s, transform .18s;
}
.sv-notify-modal-btn:hover { opacity: .88; transform: translateY(-1px); }
.sv-notify-modal-msg {
  font-size: .78rem;
  color: var(--sv-purple);
  margin-top: 8px;
  min-height: 20px;
}

/* ── Player modal ─────────────────────────────────────────── */
.sv-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(3,2,1,.94);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .28s ease;
}
.sv-player-overlay.sv-open { opacity: 1; }
.sv-player-box {
  width: 100%;
  max-width: 920px;
  background: #0e0a05;
  border: 1px solid rgba(192,122,255,.15);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(192,122,255,.06);
  animation: sv-modal-in .3s cubic-bezier(.22,1,.36,1);
}
.sv-player-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  backdrop-filter: blur(8px);
}
.sv-player-close:hover { background: rgba(255,255,255,.15); }
.sv-player-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.sv-player-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.sv-player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.sv-player-meta-bar {
  padding: 18px 24px 22px;
  background: linear-gradient(to bottom, #0e0a05, #120d07);
}
.sv-player-ep-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: .62rem;
  color: rgba(192,122,255,.7);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.sv-player-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1rem, 3vw, 1.4rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 5px;
}
.sv-player-desc { font-size: .78rem; color: var(--dim); line-height: 1.6; margin: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:768px) {
  .sv-hero { min-height: 85vh; }
  .sv-featured-inner { padding: 40px 24px; }
  .sv-featured-min { height: 320px; }
  .sv-featured-overlay { background: linear-gradient(to bottom, rgba(5,3,1,.6) 0%, rgba(5,3,1,.88) 100%); }
  .sv-episode-grid { grid-template-columns: 1fr; gap: 16px; }
  .sv-episodes-section { padding: 48px 16px 40px; }
}
@media(max-width:480px) {
  .sv-title-line1 { font-size: 3.6rem; }
  .sv-title-line2 { font-size: 1.1rem; }
  .sv-hero-actions { flex-direction: column; align-items: center; }
  .sv-hero-watch-btn, .sv-hero-notify-btn { width: 100%; max-width: 280px; justify-content: center; }
  .sv-notify-modal { padding: 28px 20px 24px; }
  .sv-bottom-bar-inner { justify-content: center; text-align: center; }
  .sv-player-box { border-radius: 12px; }
  .sv-player-meta-bar { padding: 14px 16px 18px; }
}

/* ═══════════════════════════════════════════════════════════
   HOME — Live Arcade Strip
═══════════════════════════════════════════════════════════ */
.home-arcade-strip{background:linear-gradient(180deg,rgba(232,101,26,.04) 0%,transparent 100%);border-top:1px solid rgba(232,101,26,.12);border-bottom:1px solid rgba(255,255,255,.04);padding:52px 0}
.home-arcade-inner{max-width:1160px;margin:0 auto;padding:0 24px}
.home-arcade-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.home-arcade-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.home-arcade-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);animation:pulse-o 2s infinite}
@keyframes pulse-o{0%,100%{opacity:1}50%{opacity:.5}}
.home-arcade-title{font-family:'Anton',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.home-arcade-meta{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.home-arcade-stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.home-arcade-stat-num{font-family:'Anton',sans-serif;font-size:2rem;color:var(--orange);line-height:1}
.home-arcade-stat-lbl{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.home-arcade-cta{background:rgba(232,101,26,.1);border:1px solid rgba(232,101,26,.3);color:var(--orange);border-radius:8px;padding:10px 20px;font-size:.78rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background .2s,transform .18s;white-space:nowrap}
.home-arcade-cta:hover{background:rgba(232,101,26,.2);transform:translateY(-1px)}

.home-arcade-games{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}
.home-arcade-game{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.home-arcade-game:hover{transform:translateY(-4px);border-color:rgba(232,101,26,.4);box-shadow:0 8px 24px rgba(232,101,26,.1)}
.home-arcade-game-icon{font-size:1.6rem;margin-bottom:8px;display:block}
.home-arcade-game-name{font-family:'Anton',sans-serif;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cream);margin-bottom:3px;line-height:1.2}
.home-arcade-game-type{font-size:.6rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}

/* ═══════════════════════════════════════════════════════════
   HOME — Hall of Flames
═══════════════════════════════════════════════════════════ */
.hof-section{padding:64px 0;background:linear-gradient(180deg,transparent 0%,rgba(245,166,35,.03) 50%,transparent 100%)}
.hof-inner{max-width:1160px;margin:0 auto;padding:0 24px}
.hof-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.hof-view-all{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);color:var(--gold);border-radius:8px;padding:10px 20px;font-size:.78rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background .2s,transform .18s;align-self:flex-end;white-space:nowrap}
.hof-view-all:hover{background:rgba(245,166,35,.2);transform:translateY(-1px)}
.hof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.hof-card{background:var(--bg-card);border:1px solid rgba(245,166,35,.2);border-radius:12px;overflow:hidden;transition:transform .22s,box-shadow .22s;cursor:pointer;position:relative}
.hof-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(245,166,35,.15)}
.hof-card-img{aspect-ratio:1/1;background:#111;overflow:hidden}
.hof-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.hof-card:hover .hof-card-img img{transform:scale(1.06)}
.hof-card-body{padding:10px 12px}
.hof-card-rarity{font-size:.58rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.hof-card-wallet{font-family:'Share Tech Mono',monospace;font-size:.62rem;color:var(--dim)}
.hof-legend-badge{position:absolute;top:8px;right:8px;background:rgba(245,166,35,.9);color:#0d0904;font-size:.58rem;font-weight:900;letter-spacing:.1em;padding:2px 7px;border-radius:4px}
.hof-loading{display:flex;gap:8px;justify-content:center;padding:48px}
.hof-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:.25;animation:sv-bounce .9s ease-in-out infinite}
.hof-dot:nth-child(2){animation-delay:.18s}
.hof-dot:nth-child(3){animation-delay:.36s}
.hof-empty{text-align:center;color:var(--dim);padding:40px;font-size:.85rem}

/* ═══════════════════════════════════════════════════════════
   GAME SHARE BUTTON — universal
═══════════════════════════════════════════════════════════ */
.fd-share-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--cream-d);border-radius:8px;padding:9px 18px;font-size:.78rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background .2s,transform .18s;margin-top:8px}
.fd-share-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.fd-share-btn svg{flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   DAILY CHALLENGE — Firepit banner
═══════════════════════════════════════════════════════════ */
.fp-daily-banner{display:none;background:linear-gradient(135deg,rgba(245,166,35,.1) 0%,rgba(232,101,26,.08) 100%);border:1px solid rgba(245,166,35,.25);border-radius:14px;padding:16px 20px;margin-bottom:20px;align-items:center;gap:16px;flex-wrap:wrap}
.fp-daily-banner.active{display:flex}
.fp-daily-icon{font-size:1.6rem;flex-shrink:0}
.fp-daily-text{flex:1;min-width:160px}
.fp-daily-label{font-size:.6rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.fp-daily-game{font-family:'Anton',sans-serif;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cream)}
.fp-daily-bonus{font-size:.72rem;color:var(--orange);margin-top:2px}
.fp-daily-play{background:var(--gold);color:#0d0904;border:none;border-radius:8px;padding:10px 22px;font-family:'Anton',sans-serif;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:opacity .2s,transform .18s;white-space:nowrap;flex-shrink:0}
.fp-daily-play:hover{opacity:.85;transform:translateY(-1px)}

/* Daily challenge badge on game card */
.fp-daily-badge{background:var(--gold);color:#0d0904;font-size:.58rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:6px;display:inline-block}

@media(max-width:900px){.home-arcade-games{grid-template-columns:repeat(5,1fr)}}
@media(max-width:600px){.home-arcade-games{grid-template-columns:repeat(3,1fr)}.home-arcade-meta{align-items:flex-start}.hof-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
@media(max-width:400px){.home-arcade-games{grid-template-columns:repeat(2,1fr)}}

/* ── Meme Reactions ──────────────────────────────────────── */
.lb-reactions {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px 0 2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lb-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  color: var(--cream);
  user-select: none;
  min-width: 52px;
  justify-content: center;
}
.lb-react-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.lb-react-btn.lb-react-active {
  background: rgba(232,101,26,.15);
  border-color: rgba(232,101,26,.45);
  box-shadow: 0 0 8px rgba(232,101,26,.15);
}
.lb-react-emoji { font-size: 1.05rem; line-height: 1; }
.lb-react-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--cream-d);
  min-width: 12px;
  text-align: left;
  line-height: 1;
}
.lb-react-btn.lb-react-active .lb-react-count { color: var(--orange); }

/* Pop animation on click */
@keyframes lb-react-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28) translateY(-3px); }
  100% { transform: scale(1); }
}
.lb-react-btn.lb-react-pop { animation: lb-react-pop .3s cubic-bezier(.22,1,.36,1); }

@media(max-width:480px) {
  .lb-reactions { gap: 6px; }
  .lb-react-btn { padding: 5px 10px; font-size: .8rem; }
}

/* ── Lightbox swipe hint (touch devices only) ─────────────── */
.lb-swipe-hint {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6001;
  background: rgba(13,9,4,.78);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  letter-spacing: .08em;
  padding: 7px 16px;
  border-radius: 99px;
  display: none;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  transition: opacity .4s ease;
  white-space: nowrap;
}
.lb-swipe-hint.visible { opacity: 1; }
.lb-swipe-hint.hidden  { opacity: 0; }

@media (hover: none) and (pointer: coarse) {
  /* Touch device — show swipe hint */
  .lb-swipe-hint { display: flex; }
}

/* ═══════════════════════════════════════════════════════════
   DEMO MODE — overlay, countdown bar, demo button
═══════════════════════════════════════════════════════════ */

/* Demo end overlay */
#fp-demo-overlay{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:20px}
.fp-demo-backdrop{position:absolute;inset:0;background:rgba(5,3,1,.88);backdrop-filter:blur(14px)}
.fp-demo-modal{position:relative;z-index:1;background:var(--bg-card);border:1px solid rgba(232,101,26,.3);border-radius:20px;padding:32px 28px;max-width:380px;width:100%;text-align:center;box-shadow:0 32px 80px rgba(0,0,0,.6);animation:sv-modal-in .3s cubic-bezier(.22,1,.36,1)}
.fp-demo-icon{font-size:2.4rem;margin-bottom:10px}
.fp-demo-game-name{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.fp-demo-score-wrap{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;padding:12px 20px;margin-bottom:18px;display:inline-flex;flex-direction:column;align-items:center;min-width:140px}
.fp-demo-score-lbl{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.fp-demo-score-val{font-family:'Anton',sans-serif;font-size:2rem;color:var(--gold);letter-spacing:.04em;line-height:1}
.fp-demo-title{font-family:'Anton',sans-serif;font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);margin-bottom:8px}
.fp-demo-desc{font-size:.8rem;color:var(--dim);line-height:1.65;margin-bottom:22px;max-width:300px;margin-left:auto;margin-right:auto}
.fp-demo-connect-btn{width:100%;background:linear-gradient(135deg,var(--orange),#c05500);color:#fff;border:none;border-radius:12px;padding:14px 20px;font-family:'Anton',sans-serif;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;transition:opacity .2s,transform .18s;box-shadow:0 6px 24px rgba(232,101,26,.35)}
.fp-demo-connect-btn:hover{opacity:.88;transform:translateY(-1px)}
.fp-demo-retry-btn{width:100%;background:rgba(255,255,255,.06);color:var(--cream-d);border:1px solid var(--border);border-radius:12px;padding:10px;font-size:.82rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background .2s}
.fp-demo-retry-btn:hover{background:rgba(255,255,255,.1)}

/* Demo countdown bar (floats at top of screen during demo) */
#fp-demo-bar{position:fixed;top:0;left:0;right:0;z-index:9400;padding:6px 16px 8px;background:rgba(13,9,4,.92);backdrop-filter:blur(8px);display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(232,101,26,.25)}
.fp-demo-bar-track{flex:1;height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.fp-demo-bar-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:99px;transition:width .1s linear;width:100%}
.fp-demo-bar-label{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.12em;color:var(--orange);white-space:nowrap;flex-shrink:0}

/* Demo button on game modals */
.fp-demo-start-btn{
  display:block;width:100%;margin-top:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--cream-d);border-radius:10px;
  padding:9px;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.fp-demo-start-btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)}

/* ── Inline demo button — inside game start screens ─────── */
/* Sits alongside the Arcade Leaderboard link button.        */
/* Visible to ALL users (connected or not).                  */
.fp-demo-inline-btn{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.15) !important;
  color:var(--cream-d) !important;
  position:relative;
}
.fp-demo-inline-btn::before{
  content:'FREE';
  position:absolute;top:-7px;right:8px;
  background:var(--orange);color:#fff;
  font-size:.5rem;font-weight:900;letter-spacing:.1em;
  padding:1px 5px;border-radius:4px;
  line-height:1.4;
}
.fp-demo-inline-btn:hover{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(232,101,26,.4) !important;
  color:var(--cream) !important;
}

/* ── Demo modal: X close button ──────────────────────────── */
.fp-demo-x{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:var(--cream-d);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:2;
}
.fp-demo-x:hover{background:rgba(255,255,255,.16);color:var(--cream)}

/* ── Play for Real button (wallet connected variant) ─────── */
.fp-demo-play-real-btn{
  background:linear-gradient(135deg,#4ade80,#16a34a) !important;
  box-shadow:0 6px 24px rgba(74,222,128,.25) !important;
}
.fp-demo-play-real-btn:hover{box-shadow:0 8px 28px rgba(74,222,128,.4) !important}

/* ── Demo modal spacing when CTA divs are stacked ─────────── */
#fp-demo-cta-connected p,#fp-demo-cta-nowallet p{margin-bottom:14px}

/* ── NFT lightbox trait chips ─────────────────────────────── */
.nft-trait-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:99px;
  padding:4px 12px 4px 9px;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--cream-d);
  text-transform:uppercase;
}
.nft-trait-icon{
  font-size:.85rem;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════
   SERIES — TikTok-style vertical feed
═══════════════════════════════════════════════════════ */

/* Feed container: full-width, snap-scroll */
/* ── Series page: full-screen snap-scroll feed ── */
#page-series {
  padding-top: 0;            /* nav is fixed — no offset needed for snap feed */
  min-height: 0;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* Firefox */
}
#page-series::-webkit-scrollbar { display: none; }

/* Hero shrinks to just the nav height when feed has content */
#page-series .sv-hero {
  height: 100vh;
  scroll-snap-align: start;
}
/* Hide hero entirely when feed has episodes (class toggled by JS) */
#page-series.sv-has-feed .sv-hero,
#page-series.sv-has-feed .sv-featured-wrap { display: none; }

.sv-feed {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Individual card: full viewport, snap per card */
.svf-card {
  position: relative;
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  background: #070400;
  overflow: hidden;
  scroll-snap-align: start;
}
.svf-card + .svf-card { margin-top: 0; }

/* Media layer */
.svf-media { position: absolute; inset: 0; }
.svf-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.svf-thumb-bg {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #100a00;
}
.svf-thumb-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; opacity: .3;
}

/* Gradient overlay — bottom 60% fades to near-black */
.svf-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.0)  35%,
    rgba(0,0,0,.55) 65%,
    rgba(0,0,0,.88) 100%
  );
  pointer-events: none;
}

/* Full-card tap zone (for pause/play) */
.svf-tap-overlay {
  position: absolute; inset: 0;
  cursor: pointer;
  z-index: 1;
}

/* YouTube/Vimeo centre-play button */
.svf-yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.2);
  transition: transform .15s, background .15s;
}
.svf-yt-tap:hover .svf-yt-play { transform: translate(-50%,-50%) scale(1.08); background: rgba(232,101,26,.7); }

/* Coming-soon dim */
.svf-soon-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

/* Overlay (above ::after) */
.svf-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 14px 20px;
  pointer-events: none;
}
.svf-overlay > * { pointer-events: auto; }

/* Left: episode info */
.svf-overlay-left {
  flex: 1;
  min-width: 0;
  padding-right: 12px;
}
.svf-badge {
  display: inline-block;
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--orange);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.svf-ep-label {
  font-size: .67rem; font-weight: 600; letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.svf-title {
  font-size: 1.05rem; font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.svf-desc-wrap { margin-bottom: 6px; position: relative; }
.svf-desc {
  font-size: .75rem; color: rgba(255,255,255,.72);
  line-height: 1.45; margin: 0;
  overflow: hidden;
}
.svf-desc.svf-desc-faded {
  -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
  mask-image: linear-gradient(to right, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
  white-space: nowrap;
  text-overflow: clip;
}
.svf-desc.svf-desc-expanded { white-space: normal; -webkit-mask-image: none; mask-image: none; }
.svf-desc-more {
  background: none; border: none;
  color: rgba(255,255,255,.5); font-size: .72rem;
  cursor: pointer; padding: 0; margin-top: 2px;
  text-decoration: underline; text-underline-offset: 2px;
}
.svf-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.svf-tag {
  font-size: .6rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.55);
  padding: 2px 7px; border-radius: 4px;
}
.svf-soon-label {
  font-size: .72rem; font-weight: 600;
  color: var(--orange); margin-top: 6px;
  letter-spacing: .04em;
}

/* Right: action buttons */
.svf-overlay-right {
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  padding-bottom: 4px;
}
.svf-action-btn {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff;
  padding: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  transition: transform .15s;
}
.svf-action-btn:hover { transform: scale(1.12); }
.svf-action-btn span { font-size: .62rem; font-weight: 600; letter-spacing: .04em; }

/* Mute button — top right of card */
/* Mute button — inherits .svf-action-btn, just colour overrides */
.svf-mute-btn.svf-unmuted svg,
.svf-mute-btn.svf-unmuted span { color: var(--orange); }
.svf-mute-btn.svf-unmuted { opacity: 1; }

/* Progress bar */
.svf-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,.15); z-index: 3;
}
.svf-progress-fill {
  height: 100%; width: 0%;
  background: var(--orange);
  transition: width .1s linear;
}

/* Pause indicator */
.svf-card.svf-paused .svf-tap-overlay::after {
  content: '⏸';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  opacity: .8;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  animation: svf-fadeout .8s forwards;
}
@keyframes svf-fadeout { 0%{opacity:.8} 100%{opacity:0} }

/* Loading state */
.svf-loading {
  display: flex; gap: 8px; justify-content: center;
  padding: 60px 0;
}
.svf-loading span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); opacity: .4;
  animation: svf-pulse 1.1s ease-in-out infinite;
}
.svf-loading span:nth-child(2) { animation-delay: .18s; }
.svf-loading span:nth-child(3) { animation-delay: .36s; }
@keyframes svf-pulse { 0%,100%{opacity:.2;transform:scale(.85)} 50%{opacity:1;transform:scale(1)} }

.svf-error {
  text-align: center; color: var(--dim);
  font-size: .82rem; padding: 48px 20px;
}

/* Mobile: edge-to-edge */
@media (max-width: 540px) {
  .sv-feed { max-width: 100%; }
  .svf-title { font-size: .95rem; }
}

/* Desktop: centered column, rounded cards */
@media (min-width: 541px) {
  .svf-card { border-radius: 0; }   /* full-height snap — no rounding needed */
}

/* ── Spark likes ──────────────────────────────────────── */
.svf-like-btn svg { transition: fill .2s, stroke .2s; }
.svf-like-btn.svf-liked svg { fill: #f43f5e; stroke: #f43f5e; }
.svf-like-btn.svf-liked span { color: #f43f5e; }
@keyframes svf-pop { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }
.svf-like-pop svg { animation: svf-pop .4s cubic-bezier(.36,.07,.19,.97); }

/* ═══════════════════════════════════════════════════════
   SERIES — Desktop two-column layout
═══════════════════════════════════════════════════════ */

/* Wrap: feed left + sidebar right on desktop */
#sv-desktop-wrap {
  display: flex;
  align-items: flex-start;
  width: 100%;
  /* height set in media query */
}

/* ── Sidebar — hidden by default (mobile), shown via media query ── */
#sv-sidebar {
  display: none;
  width: 340px;
  flex-shrink: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
  padding: 32px 28px;
  box-sizing: border-box;
  border-left: 1px solid rgba(255,255,255,.06);
  background: rgba(8,5,2,.97);
  flex-direction: column;
  gap: 0;
}

.sv-sb-eyebrow {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}

.sv-sb-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 10px;
}

.sv-sb-desc {
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0 0 20px;
}

.sv-sb-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 28px;
}

.sv-sb-like-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(244,63,94,.1);
  border: 1.5px solid rgba(244,63,94,.25);
  border-radius: 99px;
  color: rgba(255,255,255,.7);
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.sv-sb-like-btn:hover { background: rgba(244,63,94,.2); border-color: #f43f5e; }
.sv-sb-like-btn.sv-sb-liked { background: rgba(244,63,94,.18); border-color: #f43f5e; color: #f43f5e; }
.sv-sb-like-btn.sv-sb-liked svg { fill: #f43f5e; stroke: #f43f5e; }

.sv-sb-share-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 99px;
  color: rgba(255,255,255,.6);
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.sv-sb-share-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

.sv-sb-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin-bottom: 20px;
}

.sv-sb-section-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}

/* Episode mini cards in sidebar */
.sv-sb-list { display: flex; flex-direction: column; gap: 8px; }

.sv-sb-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  border: 1.5px solid transparent;
}
.sv-sb-card:hover { background: rgba(255,255,255,.05); }
.sv-sb-card.sv-sb-active {
  background: rgba(232,101,26,.08);
  border-color: rgba(232,101,26,.25);
}

.sv-sb-card-thumb {
  width: 52px; height: 52px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  background: #111;
}
.sv-sb-card-thumb-placeholder {
  width: 52px; height: 52px;
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.sv-sb-card-info { flex: 1; min-width: 0; }
.sv-sb-card-label { font-size: .6rem; color: var(--dim); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.sv-sb-card-title { font-size: .78rem; font-weight: 700; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sv-sb-card-playing {
  width: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sv-sb-card-playing svg { display: none; }
.sv-sb-active .sv-sb-card-playing svg { display: block; color: var(--orange); }

/* Desktop: show sidebar, resize feed */
@media (min-width: 900px) {
  /* Desktop: #page-series is NOT the snap container — #sv-feed takes over.
     Explicitly remove all mobile snap/scroll settings in one place. */
  #page-series {
    height: auto;
    overflow-y: visible;
    overflow-x: hidden;
    scroll-snap-type: none;
    padding-top: 80px;
    box-sizing: border-box;
    scroll-padding-top: 0;
  }

  /* Two-column wrap: natural height (cards define it), centered */
  #sv-desktop-wrap {
    height: calc(100vh - 80px);   /* visible area below nav */
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    align-items: stretch;
  }

  /* Feed column: phone-width, scrolls inside the page container */
  #sv-feed {
    flex: 1;
    min-width: 0;
    max-width: 440px;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
  }
  #sv-feed::-webkit-scrollbar { display: none; }

  /* Each card fills the visible area below nav exactly */
  .svf-card {
    height: calc(100vh - 80px);
    border-radius: 0;
  }

  /* Sidebar: sticky below nav, fills same height as feed */
  #sv-sidebar {
    display: flex;
    width: 340px;
    height: 100%;
    position: sticky;
    top: 80px;
  }

  /* Dim card overlay text — sidebar is the info source on desktop */
  .svf-overlay-left .svf-title,
  .svf-overlay-left .svf-ep-label,
  .svf-overlay-left .svf-desc-wrap { opacity: .35; }
}

/* Shrink: 900–1200px — narrower sidebar */
@media (min-width: 900px) and (max-width: 1200px) {
  #sv-sidebar { width: 280px; padding: 28px 20px; }
  .sv-sb-title { font-size: 1.1rem; }
  #sv-desktop-wrap { max-width: 820px; }
}


/* ═══════════════════════════════════════════════════════
   NFT LIGHTBOX — responsive layout
═══════════════════════════════════════════════════════ */
#nft-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.97);
  display: none;                /* JS sets to flex when open */
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Close button — viewport top-right always */
.nft-lb-close-btn {
  /* Inside .nft-lb-frame so it anchors to the frame corner on all sizes */
  position: absolute; top: 14px; right: 14px; z-index: 10002;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: background .15s;
  flex-shrink: 0;
}
/* .nft-lb-frame must be position:relative so absolute child anchors to it */
.nft-lb-frame { position: relative; }
.nft-lb-close-btn:hover { background: rgba(255,255,255,.15); }

/* Frame: contains image + overlays, centered */
.nft-lb-frame {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Image area: square on mobile */
.nft-lb-img-area {
  position: relative;
  width: 100%;
  padding-top: 100%;           /* square crop on mobile */
  background: #000;
  flex-shrink: 0;
}

.nft-lb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;           /* fills square cleanly on mobile */
  display: block;
  user-select: none;
}

/* Rarity badge — top-left of image frame */
.nft-lb-badge {
  position: absolute !important;
  top: 14px !important; left: 14px !important;
  z-index: 2;
  font-size: .6rem !important;
  padding: 3px 10px !important;
}

/* Arrows — inside image area */
.nft-lb-arrow {
  position: absolute;
  /* clamp keeps arrows inside the image box on any screen height */
  top: clamp(44px, 40%, calc(100% - 44px));
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s;
  touch-action: manipulation;
  flex-shrink: 0;
}
.nft-lb-arrow:active { background: rgba(255,255,255,.15); }
.nft-lb-arrow:hover  { background: rgba(255,255,255,.12); }
.nft-lb-arrow-prev { left: 12px; }
.nft-lb-arrow-next { right: 12px; }

/* Slightly larger on desktop for easier clicking */
@media (min-width: 600px) {
  .nft-lb-arrow { width: 48px; height: 48px; top: 45%; }
}

/* Desktop overlay (bottom of image) — hidden on mobile */
/* Single info panel — mobile: below image in dark strip */
.nft-lb-info-panel {
  padding: 20px 20px 48px;
  background: #070400;
  flex-shrink: 0;
}

.nft-lb-title-row {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
  flex-wrap: wrap;
}
.nft-lb-name-el { margin: 0 !important; font-size: 1.15rem; }
.nft-lb-desc-el {
  font-size: .78rem; color: rgba(255,255,255,.55);
  line-height: 1.55; margin-bottom: 12px;
}
.nft-lb-traits {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px;
}
.nft-lb-mint-btn { padding: 10px 24px; font-size: .8rem; }

/* ── Desktop / shrink (≥ 600px) ─────────────────────── */
@media (min-width: 600px) {
  #nft-lightbox {
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0 40px;
  }

  /* Frame: width-constrained, height driven by content — no void */
  .nft-lb-frame {
    width: min(90vw, 500px);
    height: auto;             /* let image dictate height, no fixed tall frame */
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.85);
    min-width: 0;
  }

  /* Image area: natural height, no padding-top square trick */
  .nft-lb-img-area {
    padding-top: 0;
    position: relative;
    flex-shrink: 0;
  }

  /* Image fills width, height is natural — no letterbox void */
  .nft-lb-img {
    position: relative;      /* reset mobile absolute */
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
    display: block;
    background: #111;
  }

  /* Desktop: same panel, different padding */
  .nft-lb-info-panel {
    padding: 18px 20px 22px;
    background: rgba(8,5,2,.98);
  }

  .nft-lb-arrow-prev { left: 14px; }
  .nft-lb-arrow-next { right: 14px; }
  .nft-lb-name-el { font-size: 1.2rem; }
}

/* Rarity badge inline in info panel (between traits and mint) */
.nft-lb-rarity-inline {
  position: static !important;
  display: inline-flex;
  margin-bottom: 14px;
  font-size: .65rem !important;
  padding: 4px 14px !important;
  letter-spacing: .1em;
}

/* NFT artist credit */
.nft-artist-credit {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 24px;
  padding: 7px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px;
  font-size: .75rem; color: var(--dim);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.nft-artist-credit:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--cream); }
.nft-artist-credit strong { color: var(--cream); font-weight: 600; }

@keyframes slideUpFade {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── MODAL OVERLAY NAV CLEARANCE ─────────────────────────────────────────────
   All full-screen fixed overlays use align-items:flex-start + padding-top:80px
   so their content clears the floating #topnav pill on mobile.
   On wider viewports where the nav doesn't eat viewport height, re-center. */
@media (min-width: 641px) {
  #auth-modal-overlay,
  #wallet-req-overlay,
  #link-wallet-overlay,
  #discord-link-overlay {
    align-items: center !important;
    padding: 20px !important;
  }
  /* Terms always top-aligns because the card is scrollable and tall */
  #terms-accept-overlay {
    align-items: flex-start !important;
    padding: 80px 20px 20px !important;
  }
}
/* Inner card max-height safety on small screens */
@media (max-width: 640px) {
  #auth-modal-overlay > div,
  #wallet-req-overlay > div {
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }
  #terms-accept-overlay > div {
    max-height: calc(100dvh - 100px);
  }
}

/* ── FAQ SECTION ─────────────────────────────────────── */
.faq-section{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;background:transparent;border:none;color:var(--cream);font-family:'Epilogue',sans-serif;font-size:1rem;font-weight:600;text-align:left;cursor:pointer;transition:background var(--ease),color var(--ease)}
.faq-q:hover{background:rgba(245,166,35,.05);color:var(--gold)}
.faq-item.open .faq-q{color:var(--orange)}
.faq-chevron{flex-shrink:0;color:var(--gold);transition:transform .3s ease}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a p{padding:0 24px 22px;margin:0;font-size:.95rem;color:var(--cream-d);line-height:1.72}
@media(max-width:600px){
  .faq-q{padding:18px 16px;font-size:.92rem}
  .faq-a p{padding:0 16px 18px}
}

/* ── SERIES PAGE — TAB BAR ───────────────────────────────── */
.sv-tab-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px 8px;
  background: linear-gradient(to bottom, rgba(13,9,4,.98) 0%, rgba(13,9,4,.92) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sv-tab-btn {
  position: relative;
  padding: 7px 20px;
  background: transparent;
  border: none;
  border-radius: 30px;
  color: rgba(255,255,255,.45);
  font-family: 'Epilogue', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.sv-tab-btn:hover { color: rgba(255,255,255,.75); }
.sv-tab-btn.sv-tab-active {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.sv-tab-btn.sv-tab-active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.sv-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  background: var(--orange);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 20px;
  vertical-align: middle;
  line-height: 1;
}
.sv-tab-count:empty { display: none; }

/* ── COMMUNITY SPARK CARD EXTRAS ─────────────────────────── */
.svf-community-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.svf-creator-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  margin-bottom: 4px;
  padding: 3px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  font-size: .65rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
  width: fit-content;
}
.svf-creator-chip::before {
  content: '◎';
  opacity: .6;
  font-size: .6rem;
}
/* Subtle left border accent on community cards */
.svf-card-community .svf-media::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, #c084fc, #38bdf8);
  z-index: 2;
  border-radius: 0;
  opacity: .7;
}

/* ═══════════════════════════════════════════════════════
   SERIES BROWSE — Netflix/YouTube style
═══════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────── */
#page-series {
  background: #0a0602;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Hero ────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════
   FRITO STUDIOS — Premium Cinematic Redesign
   ══════════════════════════════════════════════════════════ */

.sb-hero {
  position: relative;
  height: 78vh;
  min-height: 460px;
  max-height: 720px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sb-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: brightness(.78) saturate(1.1);
}
/* 3-layer gradient: top bar + left panel + bottom sweep */
.sb-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,6,2,.65) 0%, rgba(10,6,2,.0) 16%, rgba(10,6,2,.0) 44%, rgba(10,6,2,.72) 72%, rgba(10,6,2,1) 100%),
    linear-gradient(to right, rgba(10,6,2,.78) 0%, rgba(10,6,2,.32) 42%, transparent 68%);
}
/* Eyebrow pinned to top of hero */
.sb-hero-eyebrow {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 76px 5vw 0;
  flex-wrap: wrap;
}
.sb-hero-badge {
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--orange);
  text-transform: uppercase;
  background: rgba(232,101,26,.18);
  border: 1px solid rgba(232,101,26,.45);
  padding: 5px 12px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
}
.sb-hero-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 12px #22c55e;
  animation: sb-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sb-pulse {
  0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(34,197,94,.18),0 0 12px #22c55e}
  50%{opacity:.55;box-shadow:0 0 0 5px rgba(34,197,94,.08),0 0 20px #22c55e}
}
.sb-hero-live-label {
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
}
/* Content anchored to bottom */
.sb-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 5vw 60px;
  max-width: 620px;
}
/* Title removed — image logo IS the headline */
.sb-hero-title { display:none }
.sb-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.75);
  margin: 0 0 32px;
  line-height: 1.7;
  max-width: 420px;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
  font-weight: 400;
}
.sb-hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: nowrap;
}
.sb-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  background: var(--orange);
  color: #fff;
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: .92rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(232,101,26,.5), 0 0 0 0 rgba(232,101,26,.0);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.sb-btn-play:hover {
  background: #d4581a;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(232,101,26,.6);
}
.sb-btn-notify {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 26px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
  font-family: 'Epilogue', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s, color .2s;
}
.sb-btn-notify:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.38);
  color: #fff;
}

/* ── Content area ────────────────────────────────────────── */
.sb-content { padding: 0 0 80px; }

/* ── Loading spinner ─────────────────────────────────────── */
.sb-loading {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 60px 0;
}
.sb-loading span {
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  animation: sbPulse 1.2s ease-in-out infinite;
}
.sb-loading span:nth-child(2) { animation-delay: .2s; }
.sb-loading span:nth-child(3) { animation-delay: .4s; }
@keyframes sbPulse {
  0%,80%,100% { opacity: .2; transform: scale(.7); }
  40%         { opacity: 1;  transform: scale(1);   }
}

/* ── Spotlight (featured episode) ────────────────────────── */
.sb-spotlight {
  position: relative;
  margin: 0 0 32px;
  height: clamp(180px, 30vw, 320px);
  overflow: hidden;
  cursor: pointer;
}
.sb-spotlight-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
}
.sb-spotlight:hover .sb-spotlight-bg { transform: scale(1.03); }
.sb-spotlight-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10,6,2,.92) 0%, rgba(10,6,2,.4) 60%, transparent 100%);
}
.sb-spotlight-info {
  position: absolute;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  max-width: 480px;
  z-index: 2;
}
.sb-spotlight-eyebrow {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sb-spotlight-title {
  font-family: 'Epilogue', sans-serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.1;
}
.sb-spotlight-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  margin: 0 0 16px;
  line-height: 1.5;
}
.sb-spotlight-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--orange);
  color: #fff;
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  pointer-events: none; /* parent handles click */
}

/* ── Row ─────────────────────────────────────────────────── */
.sb-row { margin: 0 0 36px; }
.sb-row-label {
  font-family: 'Epilogue', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0 0 14px;
  padding: 0 5vw;
}
.sb-row-track-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 5vw 12px;
}
.sb-row-track-wrap::-webkit-scrollbar { display: none; }
.sb-row-track {
  display: flex;
  gap: 14px;
  width: max-content;
}

/* ── Card ────────────────────────────────────────────────── */
.sb-card {
  width: clamp(180px, 26vw, 280px);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sb-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.15);
}
.sb-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.sb-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255,255,255,.05);
}
.sb-card-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.sb-card:hover .sb-card-thumb { transform: scale(1.06); }
.sb-card-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.2);
}

.sb-card-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .18s;
  color: #fff;
}
.sb-card-play-btn svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); transform: scale(1.6); }
.sb-card:hover .sb-card-play-btn { opacity: 1; }

.sb-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 2;
}
.sb-card-badge-soon { background: rgba(0,0,0,.7); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2); }
.sb-card-badge-new  { background: var(--orange); color: #fff; }

.sb-card-dur {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: .6rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.65);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}

.sb-card-info { padding: 10px 12px 12px; }
.sb-card-ep {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sb-card-title {
  font-family: 'Epilogue', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 4px;
}
.sb-card-desc {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  line-height: 1.4;
}

/* ── Sparks CTA strip ────────────────────────────────────── */
.sb-sparks-cta {
  margin: 16px 5vw 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(232,101,26,.12), rgba(232,101,26,.04));
  border: 1px solid rgba(232,101,26,.2);
  border-radius: 12px;
}
.sb-sparks-cta-inner { max-width: 480px; }
.sb-sparks-cta-label {
  font-family: 'Epilogue', sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.sb-sparks-cta-sub {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  margin: 0 0 16px;
  line-height: 1.5;
}
.sb-sparks-cta-btn {
  padding: 9px 22px;
  background: var(--orange);
  color: #fff;
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .18s;
}
.sb-sparks-cta-btn:hover { background: #d4581a; }

/* ── Empty state ─────────────────────────────────────────── */
.sb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px;
  text-align: center;
}
.sb-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.sb-empty-title {
  font-family: 'Epilogue', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}
.sb-empty-sub {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
}
.sb-empty-notify {
  padding: 10px 24px;
  background: var(--orange);
  color: #fff;
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* ── Responsive — tablet ─────────────────────────────────── */
@media (max-width: 768px) {
  .sb-hero { height: 62vw; min-height: 340px; max-height: 520px; }
  .sb-hero-eyebrow { padding: 70px 20px 0; }
  .sb-hero-inner { padding: 0 20px 40px; max-width: 100%; }
  .sb-hero-sub { font-size: .9rem; }
  .sb-spotlight { height: clamp(160px, 45vw, 240px); }
  .sb-card { width: clamp(150px, 40vw, 200px); }
}

/* ── Responsive — mobile ─────────────────────────────────── */
@media (max-width: 480px) {
  .sb-hero { height: 96vw; min-height: 280px; max-height: none; }
  .sb-hero-eyebrow { padding: 68px 16px 0; gap: 8px; }
  .sb-hero-badge { font-size: .48rem; padding: 4px 9px; }
  .sb-hero-live-label { font-size: .48rem; }
  .sb-hero-inner { padding: 0 16px 30px; }
  .sb-hero-sub { font-size: .82rem; max-width: 100%; margin-bottom: 24px; }
  .sb-hero-actions { gap: 10px; flex-direction: column; flex-wrap: wrap; }
  .sb-btn-play, .sb-btn-notify { width: 100%; justify-content: center; padding: 13px 20px; }
  .sb-hero-vignette { background: linear-gradient(to bottom, rgba(10,6,2,.55) 0%, rgba(10,6,2,.0) 18%, rgba(10,6,2,.0) 40%, rgba(10,6,2,.78) 70%, rgba(10,6,2,1) 100%); }
  .sb-row-label { padding: 0 16px; }
  .sb-row-track-wrap { padding: 4px 16px 10px; }
  .sb-spotlight-info { left: 16px; }
  .sb-sparks-cta { margin: 16px 16px 0; padding: 20px; }
  .sb-card { width: clamp(140px, 44vw, 180px); }
  .sb-card-desc { display: none; }
}


/* ═══════════════════════════════════════════════════════
   SPARKS PAGE — full-width feed (no sidebar)
═══════════════════════════════════════════════════════ */

/* Override the two-column layout on the sparks page */
#page-flicker #sv-desktop-wrap.sp-no-sidebar {
  display: flex;
  justify-content: center;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

/* Feed expands to a comfortable centered column */
#page-flicker #sv-feed {
  flex: none;
  width: 100%;
  max-width: 520px;
  overflow-y: visible;
  scroll-snap-type: none;
}

/* On desktop, snap-scroll inside the page-sparks container */
@media (min-width: 760px) {
  #page-flicker {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
  }
  #page-flicker::-webkit-scrollbar { display: none; }

  #page-flicker #sv-desktop-wrap.sp-no-sidebar {
    height: auto;
  }

  #page-flicker #sv-feed {
    max-width: 460px;
  }

  /* Each card snaps and fills viewport minus nav */
  #page-flicker .svf-card {
    height: 100vh;
    scroll-snap-align: start;
  }

  /* On sparks page, card overlay text stays fully visible (no sidebar to read from) */
  #page-flicker .svf-overlay-left .svf-title,
  #page-flicker .svf-overlay-left .svf-ep-label,
  #page-flicker .svf-overlay-left .svf-desc-wrap { opacity: 1; }
}

/* Mobile — sparks feed is natural scroll */
@media (max-width: 759px) {
  #page-flicker #sv-desktop-wrap.sp-no-sidebar {
    padding: 0;
  }
  #page-flicker #sv-feed {
    max-width: 100%;
  }
  #page-flicker .svf-card {
    height: 100svh;
    scroll-snap-align: start;
  }
}

/* ═══════════════════════════════════════════════════════
   THE FLICKER — Hero
═══════════════════════════════════════════════════════ */

.fk-hero {
  position: relative;
  height: 100vh;
  min-height: 500px;
  max-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050302;
}

/* ── Animated canvas background ──────────────────────── */
.fk-hero-canvas {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(232,101,26,.18) 0%, rgba(120,40,6,.08) 50%, transparent 80%);
  animation: fkBreath 5s ease-in-out infinite;
}
@keyframes fkBreath {
  0%,100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.04); }
}

/* ── Film strips ─────────────────────────────────────── */
.fk-strip {
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  opacity: .12;
  animation: fkSlide 6s linear infinite;
}
.fk-strip-l { left: 24px; }
.fk-strip-r { right: 24px; animation-direction: reverse; animation-duration: 7s; }
.fk-strip span {
  flex-shrink: 0;
  height: 36px;
  background: rgba(255,255,255,.6);
  border-radius: 3px;
}
@keyframes fkSlide {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ── Pulse rings ─────────────────────────────────────── */
.fk-pulse {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.fk-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232,101,26,.3);
  animation: fkRing 4s ease-out infinite;
}
.fk-ring-1 { width: 160px; height: 160px; animation-delay: 0s; }
.fk-ring-2 { width: 280px; height: 280px; animation-delay: 1.3s; }
.fk-ring-3 { width: 420px; height: 420px; animation-delay: 2.6s; }
@keyframes fkRing {
  0%   { opacity: .6; transform: scale(.7); }
  100% { opacity: 0;  transform: scale(1.2); }
}

/* ── Inner content ───────────────────────────────────── */
.fk-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fk-eyebrow {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(232,101,26,.8);
}
.fk-wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Epilogue', sans-serif;
  font-size: clamp(3.5rem, 14vw, 8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: 0 0 60px rgba(232,101,26,.4);
}
.fk-bolt {
  font-size: .72em;
  display: inline-block;
  animation: fkBolt 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,180,50,.7));
}
@keyframes fkBolt {
  0%,100% { transform: scale(1)   rotate(-3deg); }
  50%      { transform: scale(1.1) rotate(3deg); }
}
.fk-word {
  background: linear-gradient(135deg, #fff 30%, rgba(232,101,26,.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fk-tagline {
  font-size: clamp(.85rem, 2.2vw, 1.05rem);
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
  max-width: 360px;
}
.fk-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.fk-chip {
  padding: 5px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
}
.fk-chip-live {
  background: rgba(232,101,26,.15);
  border-color: rgba(232,101,26,.35);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fk-dot {
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: fkPulseD 1.2s ease-in-out infinite;
}
@keyframes fkPulseD {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}
.fk-scroll-cue {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .06em;
  animation: fkBounce 2s ease-in-out infinite;
}
@keyframes fkBounce {
  0%,100% { transform: translateY(0);   opacity: .3; }
  50%      { transform: translateY(5px); opacity: .6; }
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .fk-hero { max-height: 520px; }
  .fk-strip { width: 32px; }
  .fk-ring-3 { width: 300px; height: 300px; }
}


/* ═══════════════════════════════════════════════════════
   HOMEPAGE — Flicker card
═══════════════════════════════════════════════════════ */

.uni-card-flicker-img {
  position: relative;
  background: #050302 !important;
  overflow: hidden;
}
.fk-home-canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(232,101,26,.2) 0%, transparent 70%);
  animation: fkBreath 4s ease-in-out infinite;
}
.fk-home-strip {
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 0;
  opacity: .15;
  animation: fkSlide 5s linear infinite;
}
.fk-home-strip-l { left: 8px; }
.fk-home-strip-r { right: 8px; animation-direction: reverse; }
.fk-home-strip span {
  flex-shrink: 0;
  height: 22px;
  background: rgba(255,255,255,.7);
  border-radius: 2px;
}
.fk-home-bolt {
  position: relative;
  z-index: 2;
  font-size: 2.8rem;
  line-height: 1;
  animation: fkBolt 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(255,160,30,.8));
}
.fk-home-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(232,101,26,.15) 0%, transparent 70%);
  animation: fkBreath 3s ease-in-out infinite alternate;
}

/* ── Spark Factory ──────────────────────────────────────────────────────── */

/* FAB */
.sf-fab {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
  color: #000;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  border: none;
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(249,115,22,.55), 0 0 0 0 rgba(249,115,22,.4);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  animation: sfFabPulse 2.8s ease-in-out infinite;
}
.sf-fab:hover { transform: scale(1.06); box-shadow: 0 8px 32px rgba(249,115,22,.75), 0 0 0 0 rgba(249,115,22,.3); }
.sf-fab svg  { flex-shrink: 0; }
@keyframes sfFabPulse {
  0%,100% { box-shadow: 0 4px 24px rgba(249,115,22,.55), 0 0 0 0 rgba(249,115,22,.4); }
  50%      { box-shadow: 0 4px 24px rgba(249,115,22,.55), 0 0 0 10px rgba(249,115,22,0); }
}

/* Overlay */
.sf-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .28s;
}
.sf-overlay.sf-open { opacity: 1; }

/* Modal */
.sf-modal {
  position: relative;
  width: min(480px, 94vw);
  max-height: min(720px, 92vh);
  background: #111;
  border: 1px solid rgba(249,115,22,.25);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
  transform: scale(.96) translateY(12px);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .28s;
}
.sf-overlay.sf-open .sf-modal { transform: scale(1) translateY(0); }

/* Header */
.sf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.sf-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
.sf-close-btn {
  background: rgba(255,255,255,.07);
  border: none;
  color: rgba(255,255,255,.7);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sf-close-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Step indicator */
.sf-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 20px 0;
  flex-shrink: 0;
}
.sf-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.sf-step-item:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 0 4px;
}
.sf-step-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.35);
  font-size: .7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.sf-step-dot.sf-step-active { border-color: #f97316; background: rgba(249,115,22,.15); color: #f97316; }
.sf-step-dot.sf-step-done   { border-color: #22c55e; background: rgba(34,197,94,.15); color: #22c55e; }
.sf-step-label { font-size: .65rem; color: rgba(255,255,255,.4); white-space: nowrap; display: none; }
@media (min-width: 400px) { .sf-step-label { display: block; } }
.sf-step-item:has(.sf-step-active) .sf-step-label { color: rgba(255,255,255,.7); }

/* Panels */
.sf-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; min-height: 0; }
.sf-body::-webkit-scrollbar { width: 4px; }
.sf-body::-webkit-scrollbar-track { background: transparent; }
.sf-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* Panel 1 — Pick your flame */
.sf-section-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.4); text-transform: uppercase; margin: 0 0 10px; }

.sf-flames-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 0;
  color: rgba(255,255,255,.4);
  font-size: .85rem;
}
.sf-flames-loading::before {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid rgba(249,115,22,.3);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: sfSpin .8s linear infinite;
}
@keyframes sfSpin { to { transform: rotate(360deg); } }

.sf-flames-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.sf-flame-card {
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sf-flame-card:hover   { border-color: rgba(249,115,22,.4); transform: translateY(-2px); }
.sf-flame-card.sf-flame-selected { border-color: #f97316; box-shadow: 0 0 0 1px #f97316, 0 0 16px rgba(249,115,22,.3); }
.sf-flame-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; }
.sf-flame-img      { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-flame-check    {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(249,115,22,.7);
  opacity: 0;
  transition: opacity .15s;
}
.sf-flame-selected .sf-flame-check { opacity: 1; }
.sf-flame-meta  { padding: 6px 8px; }
.sf-flame-name  { font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-flame-rarity { font-size: .6rem; margin-top: 2px; font-weight: 700; letter-spacing: .04em; }
.sf-rarity-legendary { color: #f59e0b; }
.sf-rarity-epic      { color: #a855f7; }
.sf-rarity-rare      { color: #3b82f6; }
.sf-rarity-uncommon  { color: #22c55e; }
.sf-rarity-common    { color: rgba(255,255,255,.4); }

.sf-flames-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: rgba(255,255,255,.45);
  font-size: .85rem;
}
.sf-flames-empty svg { opacity: .3; }

.sf-one-time-note {
  background: rgba(249,115,22,.08);
  border: 1px solid rgba(249,115,22,.2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .72rem;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Provider row */
.sf-provider-row { display: none; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sf-provider-btns { display: flex; gap: 8px; }
.sf-provider-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.6);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.sf-provider-btn:hover         { border-color: rgba(255,255,255,.2); color: #fff; }
.sf-provider-btn.sf-provider-active { border-color: #f97316; background: rgba(249,115,22,.12); color: #f97316; }
.sf-provider-note { font-size: .65rem; color: rgba(255,255,255,.3); }

/* Primary action button */
.sf-btn-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #000;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.sf-btn-primary:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.sf-btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* Panel 2 — Generating */
.sf-gen-layout { display: flex; flex-direction: column; gap: 18px; }
.sf-gen-thumb-wrap { position: relative; width: 80px; height: 80px; margin: 0 auto 4px; }
.sf-gen-thumb { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(249,115,22,.4); }
.sf-gen-thumb-ring {
  position: absolute; inset: -6px;
  border: 2px solid rgba(249,115,22,.4);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: sfSpin 1.2s linear infinite;
}
.sf-gen-info { text-align: center; }
.sf-gen-headline { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
.sf-gen-sub { font-size: .78rem; color: rgba(255,255,255,.45); margin: 0; }
.sf-gen-progress-wrap { background: rgba(255,255,255,.07); border-radius: 100px; height: 6px; overflow: hidden; }
.sf-gen-fill {
  height: 100%;
  width: 10%;
  border-radius: 100px;
  background: linear-gradient(90deg, #f97316, #facc15);
  transition: width .8s ease;
}
.sf-gen-status-text { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: 6px; min-height: 1.2em; }
.sf-gen-steps { display: flex; flex-direction: column; gap: 8px; }
.sf-gen-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: rgba(255,255,255,.3);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all .2s;
}
.sf-gen-step-active {
  color: #f97316;
  border-color: rgba(249,115,22,.2);
  background: rgba(249,115,22,.06);
}
.sf-gen-step-done { color: #22c55e; }
.sf-gen-step-icon { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .6rem; }
.sf-gen-step-done .sf-gen-step-icon::after { content: '✓'; }
.sf-gen-step-active .sf-gen-step-icon { border-color: #f97316; animation: sfSpin 1.2s linear infinite; border-right-color: transparent; }

/* Panel 3 — Preview */
.sf-preview-wrap { position: relative; aspect-ratio: 9/16; background: #000; border-radius: 12px; overflow: hidden; max-height: 340px; margin: 0 auto; width: fit-content; }
.sf-preview-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-preview-label { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.7); color: #f97316; font-size: .6rem; font-weight: 700; padding: 3px 7px; border-radius: 4px; letter-spacing: .06em; }
.sf-caption-wrap { margin-top: 14px; }
.sf-caption-input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fff;
  font-size: .85rem;
  padding: 10px 12px;
  resize: none;
  transition: border-color .15s;
  box-sizing: border-box;
  font-family: inherit;
}
.sf-caption-input::placeholder { color: rgba(255,255,255,.3); }
.sf-caption-input:focus { outline: none; border-color: rgba(249,115,22,.4); }
.sf-char-count { font-size: .65rem; color: rgba(255,255,255,.3); text-align: right; margin-top: 4px; }
.sf-submit-msg { font-size: .78rem; margin-top: 10px; text-align: center; min-height: 1em; }
.sf-submit-success { color: #22c55e; }
.sf-submit-error   { color: #f87171; }
.sf-submit-locked  { color: #facc15; display:flex; align-items:center; gap:6px; justify-content:center; }

/* ── Ignite Studio — Coming Soon modal ──────────────────────────────────── */
.sf-modal-cs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px 36px;
  overflow: hidden;
  gap: 0;
}
.sf-modal-cs .sf-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
}
.sf-cs-glow {
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 200px;
  background: radial-gradient(ellipse at center, rgba(249,115,22,.28) 0%, transparent 70%);
  pointer-events: none;
}
.sf-cs-emblem {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.sf-cs-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(250,204,21,.1));
  border: 1.5px solid rgba(249,115,22,.35);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(249,115,22,.2), inset 0 0 12px rgba(249,115,22,.06);
  animation: sfCsRingPulse 3s ease-in-out infinite;
}
@keyframes sfCsRingPulse {
  0%,100% { box-shadow: 0 0 24px rgba(249,115,22,.2), inset 0 0 12px rgba(249,115,22,.06); }
  50%      { box-shadow: 0 0 40px rgba(249,115,22,.4), inset 0 0 18px rgba(249,115,22,.1); }
}
.sf-cs-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .18em;
  color: #f97316; text-transform: uppercase; margin-bottom: 8px;
  position: relative; z-index: 1;
}
.sf-cs-title {
  font-size: 1.7rem; font-weight: 800; color: #fff;
  margin: 0 0 10px; line-height: 1.1;
  background: linear-gradient(135deg, #fff 40%, rgba(249,115,22,.85));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; z-index: 1;
}
.sf-cs-sub {
  font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.6;
  max-width: 340px; margin: 0 auto 28px;
  position: relative; z-index: 1;
}
.sf-cs-steps {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%; margin-bottom: 28px;
  position: relative; z-index: 1;
}
.sf-cs-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 14px 8px;
}
.sf-cs-step-icon { font-size: 1.4rem; line-height: 1; }
.sf-cs-step-text { display: flex; flex-direction: column; gap: 3px; }
.sf-cs-step-text strong { font-size: .72rem; font-weight: 700; color: #fff; }
.sf-cs-step-text span  { font-size: .62rem; color: rgba(255,255,255,.4); line-height: 1.4; }
.sf-cs-step-arrow {
  color: rgba(255,255,255,.2); font-size: .9rem;
  align-self: center; flex-shrink: 0; margin-top: -8px;
}
.sf-cs-close-btn {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff; border: none; border-radius: 8px;
  font-size: .85rem; font-weight: 700;
  padding: 11px 36px; cursor: pointer;
  transition: opacity .15s, transform .15s;
  position: relative; z-index: 1;
}
.sf-cs-close-btn:hover { opacity: .88; transform: translateY(-1px); }

/* Responsive tighten on very small screens */
@media (max-width: 380px) {
  .sf-modal { border-radius: 14px; }
  .sf-header { padding: 14px 14px 12px; }
  .sf-body   { padding: 12px 14px 16px; }
  .sf-flames-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
}

/* ── Spark Factory HTML class reconciliation ────────────────────────────── */
.sf-close {
  background: rgba(255,255,255,.07);
  border: none;
  color: rgba(255,255,255,.7);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sf-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.sf-header { gap: 10px; }
.sf-header-left { display: flex; align-items: flex-start; gap: 8px; flex: 1; }
.sf-header-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.sf-header-title { font-size: .95rem; font-weight: 700; color: #fff; }
.sf-header-sub { font-size: .68rem; color: rgba(255,255,255,.4); margin-top: 2px; }
.sf-step-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); margin: 0 6px; }
.sf-step-labels {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px 12px;
  font-size: .62rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .03em;
  flex-shrink: 0;
}
.sf-panel { padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sf-panel-hint { font-size: .74rem; color: rgba(255,255,255,.4); line-height: 1.5; margin: 0; }
.sf-provider-label { font-size: .68rem; color: rgba(255,255,255,.4); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sf-inline-link {
  background: none; border: none;
  color: #f97316; cursor: pointer;
  font-size: inherit; font-family: inherit;
  padding: 0; text-decoration: underline;
}
.sf-empty-icon { font-size: 2rem; }
/* Gen panel */
.sf-gen-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sf-gen-badge { font-size: .65rem; font-weight: 700; letter-spacing: .08em; color: #f97316; background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.2); border-radius: 4px; padding: 3px 8px; }
.sf-gen-status-wrap { display: flex; flex-direction: column; gap: 4px; }
.sf-gen-status-bar { background: rgba(255,255,255,.07); border-radius: 100px; height: 6px; overflow: hidden; }
.sf-gen-status-fill { height: 100%; width: 10%; border-radius: 100px; background: linear-gradient(90deg, #f97316, #facc15); transition: width .8s ease; }
.sf-gen-steps-list { display: flex; flex-direction: column; gap: 6px; }
.sf-gen-time-note { font-size: .7rem; color: rgba(255,255,255,.3); text-align: center; margin: 4px 0 0; }
/* Submit */
.sf-submit-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sf-caption-label { font-size: .72rem; color: rgba(255,255,255,.5); }
.sf-caption-label span { color: rgba(255,255,255,.3); }
.sf-submit-note { font-size: .7rem; color: rgba(255,255,255,.3); line-height: 1.5; }
.sf-btn-submit { margin-top: 2px; }
.sf-one-time-note { font-size: .7rem; color: rgba(249,115,22,.7); background: rgba(249,115,22,.06); border: 1px solid rgba(249,115,22,.15); border-radius: 8px; padding: 8px 12px; margin-top: 0; }

/* ── Flicker: top bar ───────────────────────────────────────────────────── */
/* Note: display is controlled by .page/.page.active — no display rule here */
.fk-top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0,0,0,.95) 60%, rgba(0,0,0,0));
  padding: 10px 0 0;
  flex-shrink: 0;
}
.fk-top-wordmark {
  text-align: center;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
  color: #f97316;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(249,115,22,.5);
}
/* Exit button — top-right of fk-top-bar */
.fk-exit-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.fk-exit-btn:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Move tab bar inside fk-top-bar — flatten its own positioning */
#page-flicker .sv-tab-bar {
  position: static;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Feed area must scroll */
#page-flicker #sv-desktop-wrap {
  flex: 1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
#page-flicker .sv-feed {
  /* Cards are already 100dvh each via .svf-card */
}
/* Override old height/overflow on the page element set elsewhere */
#page-flicker.sv-has-feed {
  overflow: hidden;
}

/* ── Flicker: bottom nav ────────────────────────────────────────────────── */
.fk-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 300;
  display: none; /* shown via JS when on flicker page */
  align-items: center;
  justify-content: space-around;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.06);
  height: 56px;
  padding: 0 8px env(safe-area-inset-bottom, 0px);
}
.fk-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 20px;
  border-radius: 10px;
  transition: color .15s;
  flex: 1;
}
.fk-nav-btn svg { transition: transform .15s; }
.fk-nav-btn:hover { color: rgba(255,255,255,.7); }
.fk-nav-btn.fk-nav-active { color: #f97316; }
.fk-nav-btn.fk-nav-active svg { transform: scale(1.1); }

/* ── Flicker: profile sheet ─────────────────────────────────────────────── */
.fk-profile-sheet {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
}
.fk-profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .32s;
}
.fk-sheet-open .fk-profile-backdrop { opacity: 1; }

.fk-profile-panel {
  position: relative;
  background: #111;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,0,.67,0);
  overflow: hidden;
}
.fk-sheet-open .fk-profile-panel {
  transform: translateY(0);
  transition-timing-function: cubic-bezier(.33,1,.68,1);
}

.fk-profile-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.fk-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  flex-shrink: 0;
}
.fk-profile-hinfo { display: flex; align-items: center; gap: 12px; }
.fk-profile-avatar {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #f97316, #facc15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.fk-profile-name   { font-size: .95rem; font-weight: 700; color: #fff; }
.fk-profile-wallet { font-size: .65rem; color: rgba(255,255,255,.4); margin-top: 2px; font-family: monospace; }
.fk-profile-close {
  background: rgba(255,255,255,.07);
  border: none;
  color: rgba(255,255,255,.6);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.fk-profile-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.fk-profile-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 0 18px;
  flex-shrink: 0;
}
.fk-ptab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.4);
  font-size: .78rem;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.fk-ptab:hover { color: rgba(255,255,255,.7); }
.fk-ptab.fk-ptab-active { color: #f97316; border-bottom-color: #f97316; }
.fk-ptab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(249,115,22,.2);
  color: #f97316;
  font-size: .58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 100px;
  margin-left: 4px;
  min-width: 16px;
}

.fk-profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.fk-profile-body::-webkit-scrollbar { width: 3px; }
.fk-profile-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* Loading spinner */
.fk-profile-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 0;
  color: rgba(255,255,255,.4);
  font-size: .8rem;
}
.fk-profile-spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(249,115,22,.2);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: fkSpin .8s linear infinite;
}
@keyframes fkSpin { to { transform: rotate(360deg); } }

/* No wallet */
.fk-no-wallet {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 40px 20px; text-align: center;
}
.fk-no-wallet-icon  { font-size: 2.2rem; }
.fk-no-wallet-title { font-size: .95rem; font-weight: 700; color: #fff; }
.fk-no-wallet-sub   { font-size: .78rem; color: rgba(255,255,255,.45); line-height: 1.5; }
.fk-no-wallet-btn {
  margin-top: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #f97316, #facc15);
  border: none; border-radius: 100px;
  color: #000; font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: opacity .15s;
}
.fk-no-wallet-btn:hover { opacity: .85; }

/* Flame grid */
.fk-flames-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.fk-flame-card {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.fk-flame-card:hover { transform: translateY(-2px); }
.fk-flame-card.fk-flame-animate-ready { border-color: rgba(249,115,22,.3); }
/* Rarity borders */
.fk-rarity-legendary { border-color: rgba(245,166,35,.4) !important; }
.fk-rarity-epic      { border-color: rgba(192,132,252,.4) !important; }
.fk-rarity-rare      { border-color: rgba(56,189,248,.4) !important; }

.fk-flame-img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #000;
}
.fk-flame-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-flame-lock-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.fk-flame-badge {
  position: absolute;
  bottom: 6px; left: 6px;
  display: flex; align-items: center; gap: 3px;
  font-size: .55rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
}
.fk-badge-locked  { background: rgba(0,0,0,.7); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.1); }
.fk-badge-minted  { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.2); }
.fk-badge-sparked { background: rgba(249,115,22,.15); color: #f97316; border: 1px solid rgba(249,115,22,.2); }

.fk-flame-info {
  padding: 7px 9px 4px;
  flex: 1;
}
.fk-flame-name   { font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-flame-rarity { font-size: .58rem; font-weight: 700; margin-top: 2px; letter-spacing: .03em; }
.fk-flame-rarity.fk-rarity-legendary { color: #f5a623; border: none; }
.fk-flame-rarity.fk-rarity-epic      { color: #c084fc; border: none; }
.fk-flame-rarity.fk-rarity-rare      { color: #38bdf8; border: none; }
.fk-flame-rarity.fk-rarity-uncommon  { color: #22c55e; border: none; }
.fk-flame-rarity.fk-rarity-common    { color: rgba(255,255,255,.4); border: none; }

.fk-flame-action {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 7px 10px;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s;
  letter-spacing: .03em;
}
.fk-action-animate {
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #000;
}
.fk-action-animate:hover { opacity: .88; }
.fk-action-locked {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.3);
}
.fk-action-sparked {
  background: rgba(249,115,22,.07);
  color: rgba(249,115,22,.5);
  cursor: default;
}

/* Empty */
.fk-flames-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 36px 16px; text-align: center;
}
.fk-flames-empty-icon  { font-size: 2.5rem; }
.fk-flames-empty-title { font-size: .9rem; font-weight: 700; color: #fff; }
.fk-flames-empty-sub   { font-size: .76rem; color: rgba(255,255,255,.4); line-height: 1.5; }
.fk-flames-empty-btn {
  margin-top: 8px;
  padding: 9px 20px;
  background: rgba(249,115,22,.12);
  border: 1px solid rgba(249,115,22,.3);
  border-radius: 100px;
  color: #f97316;
  font-weight: 700; font-size: .78rem;
  cursor: pointer; transition: background .15s;
}
.fk-flames-empty-btn:hover { background: rgba(249,115,22,.2); }

/* Responsive */
@media (max-width: 360px) {
  .fk-flames-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── My Sparks sheet — stat bar + post cards ─────────────────────────────── */
.fk-posts-statbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.fk-posts-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.fk-posts-stat-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.fk-posts-stat-label {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.fk-posts-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.08);
}

/* Post card */
.fk-post-card {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  align-items: center;
}
.fk-post-card:last-child { border-bottom: none; }
.fk-post-thumb {
  width: 52px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fk-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.fk-post-thumb-placeholder {
  color: rgba(255,255,255,.2);
  font-size: 1.4rem;
}
.fk-post-info {
  flex: 1;
  min-width: 0;
}
.fk-post-caption {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.fk-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fk-post-status {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
}
.fk-post-status-published {
  background: rgba(74,222,128,.12);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.25);
}
.fk-post-status-pending {
  background: rgba(249,115,22,.12);
  color: #f97316;
  border: 1px solid rgba(249,115,22,.25);
}
.fk-post-status-rejected {
  background: rgba(248,113,113,.12);
  color: #f87171;
  border: 1px solid rgba(248,113,113,.25);
}
.fk-post-stat-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .62rem;
  color: rgba(255,255,255,.35);
}
.fk-post-date {
  font-size: .6rem;
  color: rgba(255,255,255,.25);
  margin-left: auto;
  white-space: nowrap;
}

/* ── My Sparks — Instagram-style profile redesign ── */
/* ══════════════════════════════════════════════════════
   MY SPARKS — premium redesign
   Desktop: 2-col sidebar + grid | Mobile: stacked sheet
══════════════════════════════════════════════════════ */

/* Panel wrapper override */
.fk-sparks-panel {
  background: #07040200;
  max-height: 92dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── 2-col layout (desktop splits sidebar | content) ── */
.fk-sp-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── SIDEBAR ─────────────────────────────────────────── */
.fk-sp-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  background: #0a0602;
  padding: 0 20px 20px;
  overflow: hidden;
  width: 100%;
}

/* Ember radial behind avatar */
.fk-sp-ember {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 420px;
  background: radial-gradient(ellipse at center,
    rgba(232,101,26,.28) 0%,
    rgba(255,80,0,.1) 35%,
    transparent 65%);
  pointer-events: none;
  border-radius: 50%;
  animation: spEmberBreath 5s ease-in-out infinite;
}
@keyframes spEmberBreath {
  0%,100% { opacity:.7; transform:translateX(-50%) scale(1); }
  50%      { opacity:1;  transform:translateX(-50%) scale(1.1); }
}

/* Top action bar */
.fk-sp-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0 0;
}
.fk-sp-icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
  flex-shrink: 0;
}
.fk-sp-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.fk-sp-settings-btn:hover { border-color: rgba(232,101,26,.4); color: #e8651a; }

/* Avatar ring */
.fk-sp-avatar-ring {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  width: 88px; height: 88px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, #e8651a, #facc15, #f97316, #e8651a);
  box-shadow: 0 0 28px rgba(232,101,26,.6), 0 0 72px rgba(232,101,26,.2);
  animation: spRingPulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes spRingPulse {
  0%,100% { box-shadow: 0 0 28px rgba(232,101,26,.6), 0 0 72px rgba(232,101,26,.2); }
  50%      { box-shadow: 0 0 44px rgba(232,101,26,.9), 0 0 100px rgba(232,101,26,.35); }
}
.fk-sp-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #1a0c06;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  overflow: hidden;
}
.fk-sp-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Identity block */
.fk-sp-identity {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fk-sp-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.fk-sp-wallet {
  font-size: .62rem;
  color: rgba(255,255,255,.3);
  font-family: monospace;
  letter-spacing: .03em;
}
.fk-sp-creator-badge {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  background: rgba(232,101,26,.12);
  border: 1px solid rgba(232,101,26,.3);
  border-radius: 20px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e8651a;
}

/* Stat tiles */
.fk-sp-stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 320px;
}
.fk-sp-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  gap: 4px;
}
.fk-sp-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.fk-sp-stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.fk-sp-stat-orange { color: #f97316; }
.fk-sp-stat-green  { color: #4ade80; }
.fk-sp-stat-label {
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* Pending pill */
.fk-sp-pending-row { position: relative; z-index: 2; margin-top: 12px; }
.fk-sp-pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(249,115,22,.1);
  border: 1px solid rgba(249,115,22,.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .68rem;
  font-weight: 600;
  color: #f97316;
}
.fk-sp-pending-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 6px #f97316;
  animation: spPendingPulse 1.4s ease-in-out infinite;
}
@keyframes spPendingPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* Desktop CTA in sidebar */
.fk-sp-ignite-cta {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  width: 100%;
  max-width: 280px;
  padding: 12px 0;
  background: linear-gradient(135deg, #e8651a 0%, #facc15 100%);
  border: none;
  border-radius: 12px;
  color: #000;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: opacity .18s, transform .12s;
  display: none; /* shown on desktop only */
}
.fk-sp-ignite-cta:hover  { opacity: .88; }
.fk-sp-ignite-cta:active { transform: scale(.97); }

/* ── CONTENT AREA ────────────────────────────────────── */
.fk-sp-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  min-height: 0;
  min-height: 180px; /* ensure grid always has room on mobile */
}
.fk-sp-content::-webkit-scrollbar { width: 3px; }
.fk-sp-content::-webkit-scrollbar-thumb { background: rgba(232,101,26,.3); border-radius: 2px; }

/* Loading */
.fk-sp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: rgba(255,255,255,.4);
  font-size: .8rem;
}
.fk-sp-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(232,101,26,.2);
  border-top-color: #e8651a;
  border-radius: 50%;
  animation: fkSpin .8s linear infinite;
}

/* Empty / no-wallet states */
.fk-sp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 28px 40px;
  text-align: center;
}
.fk-sp-empty-icon { font-size: 2rem; color: rgba(255,255,255,.3); }
.fk-sp-empty-flame {
  font-size: 3rem;
  animation: spEmptyFlame 2s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(232,101,26,.6));
}
@keyframes spEmptyFlame {
  0%,100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}
.fk-sp-empty-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.fk-sp-empty-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  line-height: 1.55;
  max-width: 240px;
}
.fk-sp-cta-btn {
  margin-top: 6px;
  padding: 11px 26px;
  background: linear-gradient(135deg, #e8651a, #facc15);
  border: none;
  border-radius: 100px;
  color: #000;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 18px rgba(232,101,26,.35);
}
.fk-sp-cta-btn:hover  { opacity: .88; }
.fk-sp-cta-btn:active { transform: scale(.97); }

/* ── SPARK GRID ──────────────────────────────────────── */
.fk-sparks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.fk-sparks-thumb {
  position: relative;
  aspect-ratio: 9/16;
  background: #111;
  cursor: pointer;
  overflow: hidden;
}
.fk-sparks-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
/* hover overlay */
.fk-sparks-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .22s;
}
.fk-sparks-thumb:hover::after { opacity: 1; }
.fk-sparks-thumb:hover img { transform: scale(1.06); }

/* play icon on hover */
.fk-sparks-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s;
  z-index: 2;
  pointer-events: none;
}
.fk-sparks-thumb:hover .fk-sparks-thumb-play { opacity: 1; }
.fk-sparks-thumb-play svg {
  width: 36px; height: 36px;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.6));
}

.fk-sparks-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: rgba(255,255,255,.2);
  background: #0f0a06;
}

/* status dot */
.fk-sparks-thumb-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.6);
  z-index: 3;
}

/* like count */
.fk-sparks-thumb-likes {
  position: absolute;
  bottom: 7px; left: 7px;
  z-index: 3;
  display: flex; align-items: center; gap: 3px;
  font-size: .62rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  opacity: 0;
  transition: opacity .22s;
}
.fk-sparks-thumb:hover .fk-sparks-thumb-likes { opacity: 1; }

/* ── Load More button ─────────────────────────────────── */
.fk-load-more-btn {
  display: block;
  margin: 14px auto 0;
  padding: 9px 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.fk-load-more-btn:hover {
  background: rgba(232,101,26,.15);
  border-color: rgba(232,101,26,.4);
  color: #fff;
}

/* ── RESPONSIVE ──────────────────────────────────────── */

/* Mobile default (< 640px): compact sidebar header */
.fk-sp-sidebar {
  border-bottom: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 639px) {
  .fk-sp-avatar-ring { width: 72px; height: 72px; margin-top: 10px; }
  .fk-sp-stat-num    { font-size: 1.1rem; }
  .fk-sp-stats       { margin-top: 14px; }
  .fk-sp-identity    { margin-top: 10px; }
  .fk-sp-ignite-cta  { display: none; }
  .fk-sp-ember       { width: 300px; height: 300px; }
}

/* Tablet (640px+): sidebar shrinks, content appears side-by-side */
@media (min-width: 640px) {
  .fk-sparks-panel { max-height: 88dvh; }
  .fk-sp-layout { flex-direction: row; }
  .fk-sp-sidebar {
    width: 260px;
    min-width: 260px;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.08);
    overflow-y: auto;
    padding-bottom: 40px;
  }
  .fk-sp-content { background: #0d0a07; }
  .fk-sp-stats { max-width: 220px; }
  .fk-sparks-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; }
}

/* Desktop (900px+): true centered modal, wide layout */
@media (min-width: 900px) {
  /* Center the sheet overlay so panel floats in the middle */
  .fk-profile-sheet {
    align-items: center;
    justify-content: center;
  }
  /* Sparks panel only — override for My Sparks specifically */
  #fk-posts-sheet .fk-profile-panel {
    width: min(92vw, 1020px);
    max-width: 1020px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1);
    max-height: 84dvh;
    transform: translateY(40px) scale(.97);
    opacity: 0;
    transition: transform .32s cubic-bezier(.33,1,.68,1), opacity .28s ease;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  }
  #fk-posts-sheet.fk-sheet-open .fk-profile-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .fk-sp-sidebar {
    width: 300px;
    min-width: 300px;
    padding: 0 28px 48px;
  }
  .fk-sp-content {
    background: #0d0a07;
    /* subtle ember pattern on content bg */
    background-image:
      radial-gradient(ellipse at 80% 20%, rgba(232,101,26,.06) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, rgba(250,204,21,.03) 0%, transparent 50%);
  }
  .fk-sp-ignite-cta { display: block; }
  .fk-sparks-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .fk-sp-name { font-size: 1.3rem; }
  .fk-sp-stat-num { font-size: 1.55rem; }
  .fk-sp-empty-state { padding: 80px 40px; }
  .fk-sp-stats { max-width: 260px; }
}

/* Keep legacy class aliases so any remaining JS refs don't break */
.fk-sparks-hero         { display: none; } /* replaced by sidebar */
.fk-sparks-body         { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative; }
.fk-sparks-avatar       { width:100%; height:100%; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.fk-sparks-counters     { display:flex; gap:16px; flex:1; }
.fk-sparks-counter      { display:flex; flex-direction:column; align-items:center; gap:2px; }
.fk-sparks-counter-num  { font-size:1.1rem; font-weight:700; color:#fff; }
.fk-sparks-counter-label{ font-size:.62rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.05em; }
.fk-sparks-settings-btn { display:none; } /* replaced by fk-sp-settings-btn */
.fk-sparks-bio          { display:none; } /* replaced by fk-sp-identity */
.fk-sparks-displayname  { font-size:.9rem; font-weight:700; color:#fff; }
.fk-sparks-wallet       { font-size:.68rem; color:rgba(255,255,255,.35); font-family:monospace; margin-top:2px; }
.fk-sparks-pending-row  { margin-top:6px; }
.fk-sparks-pending-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.3); border-radius:20px; padding:3px 10px; font-size:.68rem; color:#f97316; }
/* also keep old loading/empty classes pointing to new ones */
.fk-profile-loading     { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 0; color:rgba(255,255,255,.4); font-size:.8rem; }
.fk-profile-spinner     { width:24px; height:24px; border:2px solid rgba(249,115,22,.2); border-top-color:#f97316; border-radius:50%; animation:fkSpin .8s linear infinite; }
.fk-no-wallet           { display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 20px; text-align:center; }
.fk-no-wallet-icon      { font-size:2.2rem; }
.fk-no-wallet-title     { font-size:.95rem; font-weight:700; color:#fff; }
.fk-no-wallet-sub       { font-size:.78rem; color:rgba(255,255,255,.45); line-height:1.5; }
.fk-no-wallet-btn       { margin-top:8px; padding:10px 22px; background:linear-gradient(135deg,#f97316,#facc15); border:none; border-radius:100px; color:#000; font-weight:700; font-size:.82rem; cursor:pointer; }
.fk-flames-empty        { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 20px; text-align:center; }
.fk-flames-empty-icon   { font-size:2rem; }
.fk-flames-empty-title  { font-size:.95rem; font-weight:700; color:#fff; }
.fk-flames-empty-sub    { font-size:.78rem; color:rgba(255,255,255,.45); line-height:1.5; max-width:240px; }
.fk-flames-empty-btn    { margin-top:8px; padding:10px 22px; background:linear-gradient(135deg,#f97316,#facc15); border:none; border-radius:100px; color:#000; font-weight:700; font-size:.82rem; cursor:pointer; }

/* Spark detail slide-in */
.fk-spark-detail {
  position: absolute;
  inset: 0;
  background: #111;
  z-index: 10;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.fk-spark-detail.fk-sd-open {
  transform: translateX(0);
}
.fk-spark-detail-back {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(17,17,17,.85);
  backdrop-filter: blur(8px);
  border: none;
  color: #fff;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  width: 100%;
}
.fk-spark-detail-inner {
  padding: 0 18px 32px;
}
.fk-sd-media {
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 340px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  margin-bottom: 16px;
}
.fk-sd-caption {
  font-size: .9rem;
  color: rgba(255,255,255,.85);
  margin: 0 0 10px;
  line-height: 1.5;
}
.fk-sd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.fk-sd-date {
  font-size: .7rem;
  color: rgba(255,255,255,.3);
}
.fk-sd-stats {
  display: flex;
  gap: 16px;
}
.fk-sd-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}

/* ── My Sparks — settings icon button ── */
.fk-sparks-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fk-sparks-icon-btn:hover {
  background: rgba(255,255,255,.13);
  color: #fff;
}

/* ── My Sparks — settings panel rows ── */
/* ══════════════════════════════════════════════════════
   SETTINGS PANEL — premium redesign
══════════════════════════════════════════════════════ */
.fk-settings-panel {
  background: #0a0703 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Ambient fire glow behind everything */
.fk-ss-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 340px;
  background: radial-gradient(ellipse at center, rgba(232,101,26,.22) 0%, rgba(255,60,0,.07) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  animation: fkSsBreath 4s ease-in-out infinite;
}
@keyframes fkSsBreath {
  0%,100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.08); }
}

/* Top bar */
.fk-ss-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
}
.fk-ss-back-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.fk-ss-back-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.fk-ss-topbar-title {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f97316, #facc15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Identity hero — compact */
.fk-ss-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px 16px;
  gap: 7px;
}
.fk-ss-avatar-ring {
  width: 68px; height: 68px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #e8651a 0%, #ff9a00 50%, #e8651a 100%);
  box-shadow: 0 0 18px rgba(232,101,26,.5), 0 0 48px rgba(232,101,26,.18);
  animation: fkSsRingPulse 3s ease-in-out infinite;
}
@keyframes fkSsRingPulse {
  0%,100% { box-shadow: 0 0 18px rgba(232,101,26,.5), 0 0 48px rgba(232,101,26,.18); }
  50%      { box-shadow: 0 0 28px rgba(232,101,26,.8), 0 0 64px rgba(232,101,26,.28); }
}
.fk-ss-avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #1a0f06;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  overflow: hidden;
}
.fk-ss-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fk-ss-identity { text-align: center; }
.fk-ss-display-name {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.2;
}
.fk-ss-wallet-tag {
  font-size: .6rem;
  color: rgba(255,255,255,.32);
  margin-top: 2px;
  font-family: monospace;
  letter-spacing: .04em;
}
.fk-ss-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(232,101,26,.1);
  border: 1px solid rgba(232,101,26,.25);
  border-radius: 20px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #e8651a;
  text-transform: uppercase;
}

/* Divider line below hero */
.fk-ss-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,101,26,.25), transparent);
}

/* Scrollable body */
.fk-ss-body {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 32px;
  -webkit-overflow-scrolling: touch;
}
.fk-ss-body::-webkit-scrollbar { width: 3px; }
.fk-ss-body::-webkit-scrollbar-thumb { background: rgba(232,101,26,.3); border-radius: 2px; }

/* Section labels — left-accented */
.fk-ss-section-label {
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  margin: 14px 0 6px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fk-ss-section-label::before {
  content: '';
  display: inline-block;
  width: 2px; height: 10px;
  background: linear-gradient(180deg, #f97316, #facc15);
  border-radius: 2px;
  flex-shrink: 0;
}
.fk-ss-section-label:first-child { margin-top: 0; }

/* Setting cards — compact rows */
.fk-ss-cards { display: flex; flex-direction: column; gap: 5px; }
.fk-ss-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  cursor: pointer;
  text-align: left;
  transition: background .18s, border-color .18s, transform .12s;
  position: relative;
  overflow: hidden;
}
.fk-ss-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232,101,26,.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .2s;
}
.fk-ss-card:hover { background: rgba(255,255,255,.07); border-color: rgba(232,101,26,.22); }
.fk-ss-card:hover::before { opacity: 1; }
.fk-ss-card:active { transform: scale(.98); }

/* Icon bubbles — smaller */
.fk-ss-card-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.fk-ss-icon-blue   { background: rgba(96,165,250,.15);  color: #60a5fa; border: 1px solid rgba(96,165,250,.18); }
.fk-ss-icon-amber  { background: rgba(251,191,36,.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,.18); }
.fk-ss-icon-orange { background: rgba(232,101,26,.15);  color: #e8651a; border: 1px solid rgba(232,101,26,.18); }
.fk-ss-icon-purple { background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.18); }

.fk-ss-card-text { flex: 1; min-width: 0; }
.fk-ss-card-title {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  line-height: 1.2;
  white-space: nowrap;
}
.fk-ss-card-sub {
  font-size: .62rem;
  color: rgba(255,255,255,.3);
  margin-top: 1px;
  white-space: nowrap;
}
.fk-ss-card-arrow { color: rgba(255,255,255,.18); flex-shrink: 0; transition: color .2s, transform .2s; }
.fk-ss-card:hover .fk-ss-card-arrow { color: rgba(232,101,26,.6); transform: translateX(3px); }

/* Danger button */
.fk-ss-danger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: rgba(248,113,113,.05);
  border: 1px solid rgba(248,113,113,.18);
  border-radius: 11px;
  color: #f87171;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .12s;
}
.fk-ss-danger-btn:hover { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); }
.fk-ss-danger-btn:active { transform: scale(.98); }

/* Footer */
.fk-ss-footer {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: .4;
}
.fk-ss-footer-logo { font-size: 1.3rem; }
.fk-ss-footer-text { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.fk-ss-footer-sub  { font-size: .55rem; color: rgba(255,255,255,.5); font-style: italic; }

/* Legacy selectors kept for any stale references */
.fk-ss-section { margin-bottom: 24px; }
.fk-ss-label { font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:6px;padding-left:2px; }
.fk-ss-row { width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;color:rgba(255,255,255,.8);font-size:.84rem;cursor:pointer;text-align:left;margin-bottom:6px;transition:background .15s; }
.fk-ss-row:hover { background:rgba(255,255,255,.08); }
.fk-ss-row span { flex:1; }
.fk-ss-chevron { color:rgba(255,255,255,.25);flex-shrink:0; }
.fk-ss-row-danger { color:#f87171; }
.fk-ss-row-danger svg { color:#f87171; }

/* ── My Flames — How It Works FAQ ── */
.fk-hiw {
  margin: 8px 14px 20px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
}
.fk-hiw-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: rgba(255,255,255,.04);
  border: none;
  color: rgba(255,255,255,.6);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .03em;
}
.fk-hiw-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
#fk-hiw-chevron { transition: transform .22s ease; flex-shrink: 0; }
.fk-hiw-body {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}
.fk-hiw-step {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.fk-hiw-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg,#f97316,#a855f7);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fk-hiw-step-title {
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.fk-hiw-step-desc {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.fk-hiw-note {
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   MY FLAMES — premium redesign (fkfl-* namespace)
═══════════════════════════════════════════════════════ */
#fk-profile-sheet .fk-profile-panel {
  background: #0a0602;
}
/* Desktop: center modal same treatment as My Sparks */
@media (min-width: 900px) {
  #fk-profile-sheet .fk-profile-panel {
    width: min(92vw, 820px);
    max-height: 88vh;
    border-radius: 20px;
    animation: fkSheetIn .28s cubic-bezier(.22,.68,0,1.2) both;
  }
}
/* Ember ambient glow */
.fkfl-ember {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 340px; height: 200px;
  background: radial-gradient(ellipse at 50% 30%, rgba(249,115,22,.18) 0%, rgba(250,204,21,.06) 40%, transparent 70%);
  pointer-events: none;
  animation: fkEmberBreath 4s ease-in-out infinite;
  z-index: 0;
}
/* Hero */
.fkfl-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 18px;
  text-align: center;
}
.fkfl-close {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.07);
  border: none;
  color: rgba(255,255,255,.6);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.fkfl-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.fkfl-avatar-ring {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #f97316, #facc15, #ef4444, #f97316);
  padding: 3px;
  animation: fkAvatarSpin 8s linear infinite;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.fkfl-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #1a1208;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  overflow: hidden;
}
.fkfl-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fkfl-identity { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fkfl-name {
  font-size: 1.05rem; font-weight: 800;
  color: #fff; letter-spacing: -.01em;
}
.fkfl-wallet {
  font-size: .6rem; color: rgba(255,255,255,.38);
  font-family: monospace; letter-spacing: .02em;
}
.fkfl-badge {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(250,204,21,.1));
  border: 1px solid rgba(249,115,22,.25);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: .62rem; font-weight: 700;
  color: #fbbf24; letter-spacing: .04em;
}
/* Pill tabs */
.fkfl-tabs {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 0 16px 14px;
  flex-shrink: 0;
}
.fkfl-tab {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 100px;
  color: rgba(255,255,255,.45);
  font-size: .74rem; font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.fkfl-tab:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.fkfl-tab.fkfl-tab-active {
  background: linear-gradient(135deg, #f97316, #facc15);
  border-color: transparent;
  color: #000; font-weight: 800;
}
.fkfl-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25);
  color: inherit;
  font-size: .58rem; font-weight: 700;
  padding: 1px 5px;
  border-radius: 100px;
  margin-left: 3px;
  min-width: 16px;
}
/* How It Works revamp */
.fkfl-hiw {
  margin: 8px 0 20px;
  border: 1px solid rgba(249,115,22,.12);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(249,115,22,.04);
}
.fkfl-hiw-label {
  font-size: .78rem; font-weight: 700;
  background: linear-gradient(90deg, #f97316, #facc15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fkfl-step {
  display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start;
}
.fkfl-step:last-child { margin-bottom: 0; }
.fkfl-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #000;
  font-size: .68rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(249,115,22,.4);
}
.fkfl-step-body {}
.fkfl-step-title { font-size: .8rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.fkfl-step-desc  { font-size: .71rem; color: rgba(255,255,255,.48); line-height: 1.55; }
.fkfl-hiw-note {
  font-size: .67rem; color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 12px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   THE FLICKER — authoritative layout (overrides all older rules)
   Scroll container is #sv-desktop-wrap; #page-flicker is overflow:hidden.
   These selectors match or beat the specificity of every earlier conflict.
═══════════════════════════════════════════════════════ */

/* Page shell — layout only when active; never override community.js display:none */
#page-flicker.active {
  display: flex !important;   /* only set display when page is actually shown */
}
#page-flicker {
  flex-direction: column !important;
  height: 100dvh !important;
  overflow: hidden !important;
  scroll-snap-type: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
}

/* Top bar — fixed height, never scrolls */
#page-flicker .fk-top-bar {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

/* THE scroll container — beat the old .sp-no-sidebar rule with matching class */
#page-flicker #sv-desktop-wrap.sp-no-sidebar {
  flex: 1 1 0 !important;
  height: 0 !important;           /* flex-child: height set by flex, not content */
  min-height: 0 !important;
  max-width: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scroll-snap-type: y mandatory !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;          /* no padding — avoids shrinking 100cqh */
  box-sizing: border-box !important;
  container-type: size;           /* enables 100cqh on child cards */
}
#page-flicker #sv-desktop-wrap.sp-no-sidebar::-webkit-scrollbar { display: none; }

/* Feed column — centered, no own scroll */
#page-flicker #sv-feed {
  width: 100% !important;
  max-width: 520px !important;
  flex: none !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  height: auto !important;
}

/* Cards — each fills exactly the scroll viewport height via container query */
#page-flicker .svf-card {
  height: 100cqh !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  flex-shrink: 0 !important;
}

/* Overlay: keep content above bottom nav (56px) with extra gutter */
#page-flicker .svf-overlay {
  padding-bottom: 72px !important; /* 56px nav + 16px gutter */
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Action buttons: nudge up so they're clear of bottom nav */
#page-flicker .svf-overlay-right {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Overlay text always fully visible (no sidebar) */
#page-flicker .svf-overlay-left .svf-title,
#page-flicker .svf-overlay-left .svf-ep-label,
#page-flicker .svf-overlay-left .svf-desc-wrap { opacity: 1 !important; }

/* Desktop — narrower centered feed column */
@media (min-width: 760px) {
  #page-flicker #sv-feed {
    max-width: 460px !important;
  }
}

/* Mobile — full-width feed, no rounding */
@media (max-width: 759px) {
  #page-flicker #sv-feed {
    max-width: 100% !important;
  }
  #page-flicker .svf-card {
    border-radius: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   FLICKER FEED — premium visual upgrades
   All scoped to #page-flicker to avoid bleedthrough
═══════════════════════════════════════════════════════ */

/* ── Action sidebar: glass pill backdrop ── */
#page-flicker .svf-overlay-right {
  gap: 6px !important;
}
#page-flicker .svf-action-btn {
  background: rgba(0,0,0,.38) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  padding: 10px 10px 8px !important;
  min-width: 52px !important;
  transition: background .18s, transform .15s, box-shadow .18s !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
#page-flicker .svf-action-btn:hover {
  background: rgba(255,255,255,.1) !important;
  transform: scale(1.07) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.45) !important;
}
#page-flicker .svf-action-btn span {
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  color: rgba(255,255,255,.75) !important;
}

/* ── Like button: fire glow on active ── */
#page-flicker .svf-like-btn.svf-liked {
  background: rgba(244,63,94,.18) !important;
  border-color: rgba(244,63,94,.35) !important;
  box-shadow: 0 0 16px rgba(244,63,94,.3), 0 2px 12px rgba(0,0,0,.3) !important;
}
#page-flicker .svf-like-btn.svf-liked span { color: #f43f5e !important; }
#page-flicker .svf-like-pop svg { animation: svf-pop .4s cubic-bezier(.36,.07,.19,.97); }

/* ── Mute button: orange glow when sound on ── */
#page-flicker .svf-mute-btn.svf-unmuted {
  background: rgba(249,115,22,.18) !important;
  border-color: rgba(249,115,22,.35) !important;
  box-shadow: 0 0 14px rgba(249,115,22,.28), 0 2px 12px rgba(0,0,0,.3) !important;
}
#page-flicker .svf-mute-btn.svf-unmuted span,
#page-flicker .svf-mute-btn.svf-unmuted svg { color: #fb923c !important; }

/* ── View stat: subtle eye glow ── */
#page-flicker .svf-view-stat {
  border-color: rgba(255,255,255,.06) !important;
}

/* ── Episode label: fire-accented badge ── */
#page-flicker .svf-ep-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(249,115,22,.12) !important;
  border: 1px solid rgba(249,115,22,.2) !important;
  border-radius: 100px !important;
  padding: 2px 10px !important;
  font-size: .6rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: #fb923c !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
#page-flicker .svf-ep-label::before {
  content: '⚡';
  font-size: .65rem;
}

/* ── Title: stronger drop shadow, slight gradient shine ── */
#page-flicker .svf-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 4px 20px rgba(0,0,0,.5) !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

/* ── "more" text: subtle fire-tinted pill ── */
#page-flicker .svf-desc-more {
  display: inline-block !important;
  background: rgba(249,115,22,.12) !important;
  border: 1px solid rgba(249,115,22,.18) !important;
  border-radius: 100px !important;
  padding: 1px 8px !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  color: #fb923c !important;
  text-decoration: none !important;
  letter-spacing: .03em !important;
  margin-top: 4px !important;
  cursor: pointer !important;
}
#page-flicker .svf-desc-more:hover {
  background: rgba(249,115,22,.22) !important;
}

/* ── Tags: fire-tinted ── */
#page-flicker .svf-tag {
  border-color: rgba(249,115,22,.2) !important;
  color: rgba(251,146,60,.75) !important;
  background: rgba(249,115,22,.06) !important;
}

/* ── Creator chip: name treatment ── */
#page-flicker .svf-creator-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.65) !important;
  margin-bottom: 6px !important;
  letter-spacing: .02em !important;
}
#page-flicker .svf-creator-chip::before {
  content: '🔥';
  font-size: .75rem;
}

/* ── Community badge: elevated treatment ── */
#page-flicker .svf-community-badge {
  border-radius: 100px !important;
  padding: 3px 10px !important;
  font-size: .6rem !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  backdrop-filter: blur(8px) !important;
}

/* ── Progress bar: fire gradient ── */
#page-flicker .svf-progress-fill {
  background: linear-gradient(90deg, #f97316, #facc15) !important;
}
#page-flicker .svf-progress {
  height: 3px !important;
  background: rgba(255,255,255,.1) !important;
}

/* ── Bottom nav: premium treatment ── */
.fk-bottom-nav {
  background: rgba(5,3,0,.88) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  border-top: 1px solid rgba(249,115,22,.12) !important;
  height: 64px !important;
  padding: 0 12px env(safe-area-inset-bottom, 0px) !important;
}

.fk-nav-btn {
  position: relative !important;
  padding: 8px 16px !important;
  border-radius: 14px !important;
  transition: color .18s, background .18s !important;
  gap: 4px !important;
}
.fk-nav-btn span {
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}

/* Active nav: glowing fire indicator */
.fk-nav-btn.fk-nav-active {
  color: #f97316 !important;
  background: rgba(249,115,22,.08) !important;
}
.fk-nav-btn.fk-nav-active::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  background: linear-gradient(90deg, #f97316, #facc15);
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(249,115,22,.6);
}
.fk-nav-btn.fk-nav-active svg {
  filter: drop-shadow(0 0 6px rgba(249,115,22,.5));
  transform: scale(1.12) !important;
}
.fk-nav-btn:hover:not(.fk-nav-active) {
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.7) !important;
}

/* ── Flicker: full-screen mode — lock body, hide global chrome ──────────── */
/* When page-flicker is the active page, the experience is fully self-contained.
   Hide the global top nav, footer, and prevent the body from scrolling beneath
   the 100dvh page container. Uses :has() which is supported in all modern browsers. */

body:has(#page-flicker.active) {
  overflow: hidden !important;
  height: 100dvh !important;
}

/* Hide global nav and footer — Flicker has its own top bar + bottom nav */
body:has(#page-flicker.active) #topnav,
body:has(#page-flicker.active) #footer {
  display: none !important;
}

/* page-flicker fills the entire viewport with no offset from the hidden nav */
body:has(#page-flicker.active) #page-flicker {
  height: 100dvh !important;
  padding-top: 0 !important;
}

/* ══════════════════════════════════════════════════════
   FM NFT GALLERY — Phase 2
══════════════════════════════════════════════════════ */
.fm-nft-subtabs{display:flex;gap:8px;margin:0 0 24px;border-bottom:1px solid var(--border);padding-bottom:16px}
.fm-nft-subtab{background:none;border:1px solid var(--border);color:var(--dim);padding:8px 18px;border-radius:100px;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;transition:all .2s}
.fm-nft-subtab:hover{border-color:var(--orange);color:var(--cream)}
.fm-nft-subtab-active{background:var(--orange);border-color:var(--orange)!important;color:#fff!important}
.fm-nft-count{background:rgba(255,255,255,.15);border-radius:100px;padding:1px 7px;font-size:.72rem;font-weight:700}
.fm-nft-subtab-active .fm-nft-count{background:rgba(0,0,0,.2)}

.fm-nft-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.fm-nft-search{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--cream);padding:9px 14px;border-radius:10px;font-size:.82rem;width:220px;outline:none;transition:border-color .2s}
.fm-nft-search:focus{border-color:var(--orange)}
.fm-nft-search::placeholder{color:var(--dim)}
.fm-nft-filter-pills{display:flex;gap:6px;flex-wrap:wrap}
.fm-nft-pill{background:none;border:1px solid var(--border);color:var(--dim);padding:5px 13px;border-radius:100px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .18s}
.fm-nft-pill:hover{border-color:var(--orange);color:var(--cream)}
.fm-nft-pill-active{background:rgba(232,101,26,.15);border-color:var(--orange)!important;color:var(--orange)!important}
.fm-nft-pill-legendary{--pill-color:#f59e0b}
.fm-nft-pill-legendary.fm-nft-pill-active{background:rgba(245,158,11,.15);border-color:#f59e0b!important;color:#f59e0b!important}
.fm-nft-pill-epic{--pill-color:#a855f7}
.fm-nft-pill-epic.fm-nft-pill-active{background:rgba(168,85,247,.15);border-color:#a855f7!important;color:#a855f7!important}
.fm-nft-pill-rare{--pill-color:#3b82f6}
.fm-nft-pill-rare.fm-nft-pill-active{background:rgba(59,130,246,.15);border-color:#3b82f6!important;color:#3b82f6!important}
.fm-nft-pill-common.fm-nft-pill-active{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35)!important;color:var(--cream)!important}
.fm-nft-sort-select{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--cream);padding:7px 12px;border-radius:10px;font-size:.78rem;cursor:pointer;outline:none}

.fm-nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.fm-nft-loading{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;padding:64px 0;color:var(--dim);font-size:.85rem}
.fm-nft-empty{grid-column:1/-1;text-align:center;padding:64px 0;color:var(--dim);font-size:.85rem}
.fm-nft-spinner{width:22px;height:22px;border:2px solid rgba(232,101,26,.2);border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite}

.fm-nft-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s;position:relative}
.fm-nft-card:hover{transform:translateY(-3px);border-color:rgba(232,101,26,.5);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.fm-nft-card-img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:rgba(255,255,255,.04)}
.fm-nft-card-img-placeholder{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:linear-gradient(135deg,rgba(232,101,26,.12),rgba(0,0,0,.4))}
.fm-nft-card-body{padding:11px 12px 13px}
.fm-nft-card-title{font-size:.82rem;font-weight:700;color:var(--cream);margin-bottom:4px}
.fm-nft-card-rank{font-size:.72rem;color:var(--dim)}
.fm-nft-card-rarity{position:absolute;top:9px;right:9px;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.fm-nft-rarity-legendary{background:rgba(245,158,11,.25);color:#fbbf24;border:1px solid rgba(245,158,11,.4)}
.fm-nft-rarity-epic     {background:rgba(168,85,247,.22);color:#c084fc;border:1px solid rgba(168,85,247,.4)}
.fm-nft-rarity-rare     {background:rgba(59,130,246,.2); color:#60a5fa;border:1px solid rgba(59,130,246,.4)}
.fm-nft-rarity-common   {background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.15)}
.fm-nft-card-traits{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.fm-nft-trait-chip{font-size:.62rem;color:var(--dim);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:5px;padding:2px 6px;white-space:nowrap}

/* Modal */
.fm-nft-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.fm-nft-modal-box{background:var(--bg-card,#1a1008);border:1px solid var(--border);border-radius:20px;max-width:680px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;max-height:90vh;position:relative}
.fm-nft-modal-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);border:none;color:var(--cream);width:30px;height:30px;border-radius:50%;font-size:.85rem;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .15s}
.fm-nft-modal-close:hover{background:rgba(255,255,255,.18)}
.fm-nft-modal-img-wrap{position:relative;background:rgba(0,0,0,.3)}
.fm-nft-modal-img{width:100%;height:100%;object-fit:cover;display:block;min-height:300px}
.fm-nft-modal-rarity-badge{position:absolute;top:12px;left:12px;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}
.fm-nft-modal-info{padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.fm-nft-modal-title{font-size:1.25rem;font-weight:800;color:var(--cream);font-family:var(--font-head,inherit)}
.fm-nft-modal-meta{font-size:.78rem;color:var(--dim);line-height:1.7}
.fm-nft-modal-traits{display:flex;flex-wrap:wrap;gap:6px}
.fm-nft-modal-trait{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:.72rem}
.fm-nft-modal-trait-type{color:var(--dim);display:block;font-size:.65rem;margin-bottom:1px}
.fm-nft-modal-trait-val{color:var(--cream);font-weight:600}
.fm-nft-modal-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.fm-nft-modal-link{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:.78rem;font-weight:600;text-decoration:none;transition:opacity .15s;border:1px solid var(--border);color:var(--cream)}
.fm-nft-modal-link:hover{opacity:.8}
.fm-nft-modal-link-cafe{background:rgba(232,101,26,.15);border-color:rgba(232,101,26,.4);color:var(--orange)}
.fm-nft-modal-link-op{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35);color:#60a5fa}

@media(max-width:640px){
  .fm-nft-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .fm-nft-modal-box{grid-template-columns:1fr;max-height:95vh}
  .fm-nft-modal-img{min-height:220px;max-height:260px}
  .fm-nft-filters{gap:8px}
  .fm-nft-search{width:100%}
}

/* ══════════════════════════════════════════════════════════════
   GENESIS MARKETPLACE LINKS
══════════════════════════════════════════════════════════════ */
.fm-genesis-mkt-links{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 0 16px;
}
.fm-genesis-mkt-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted,#888);margin-right:2px;
}
.fm-genesis-mkt-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:700;text-decoration:none;
  padding:5px 14px;border-radius:20px;
  border:1px solid;transition:opacity .18s,transform .18s;
}
.fm-genesis-mkt-btn:hover{opacity:.8;transform:translateY(-1px);}
.fm-genesis-mkt-btn-xrpc{color:#a78bfa;border-color:#a78bfa55;background:#1a1a2e;}
.fm-genesis-mkt-btn-opm{color:#4ade80;border-color:#4ade8055;background:#1a2e1a;}
.fm-genesis-mkt-btn-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;animation:fm-pulse 2s ease-in-out infinite;
}
.fm-genesis-mkt-btn-dot-xrpc{background:#a78bfa;}
.fm-genesis-mkt-btn-dot-opm{background:#4ade80;}
@keyframes fm-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}

/* ══════════════════════════════════════════════════════════════
   FLAME FRITOS MARKETPLACE BANNER
══════════════════════════════════════════════════════════════ */
.fm-flames-mkt-banner{
  display:flex;flex-direction:column;gap:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:16px 20px;margin-bottom:20px;
  position:relative;
}
.fm-flames-mkt-header-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.fm-flames-mkt-collection-name{
  font-size:.9rem;font-weight:800;letter-spacing:.04em;color:var(--cream,#f5f0e8);
}
.fm-flames-mkt-live-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25);
  padding:2px 9px;border-radius:20px;
}
.fm-flames-mkt-live-dot{
  width:5px;height:5px;border-radius:50%;background:#4ade80;
  animation:fm-pulse 2s ease-in-out infinite;flex-shrink:0;
}
.fm-flames-mkt-platforms-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.fm-flames-mkt-footer-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.06);padding-top:10px;margin-top:2px;
}
.fm-flames-mkt-footer-row .fm-flames-mkt-refresh{
  width:auto;padding:0 12px;font-size:.75rem;gap:5px;
  display:inline-flex;align-items:center;height:28px;
}
.fm-flames-mkt-platform{
  display:flex;align-items:center;gap:14px;flex:1;min-width:220px;
}
.fm-flames-mkt-logo{
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;white-space:nowrap;
}
.fm-flames-mkt-logo-xrpc{background:#1a1a2e;color:#a78bfa;border:1px solid #a78bfa55;}
.fm-flames-mkt-logo-opm{background:#1a2e1a;color:#4ade80;border:1px solid #4ade8055;}
.fm-flames-mkt-stats{display:flex;gap:20px;flex-wrap:wrap;}
.fm-flames-mkt-stat{display:flex;flex-direction:column;gap:2px;}
.fm-flames-mkt-label{font-size:.68rem;color:var(--muted,#888);text-transform:uppercase;letter-spacing:.05em;}
.fm-flames-mkt-value{font-size:.9rem;font-weight:700;color:var(--cream,#f5f0e8);}
.fm-flames-mkt-link{
  font-size:.78rem;font-weight:700;color:var(--orange,#f97316);
  text-decoration:none;white-space:nowrap;padding:6px 12px;
  border:1px solid rgba(249,115,22,.3);border-radius:8px;
  transition:background .2s,border-color .2s;
}
.fm-flames-mkt-link:hover{background:rgba(249,115,22,.12);border-color:var(--orange,#f97316);}
.fm-flames-mkt-divider{width:1px;height:48px;background:rgba(255,255,255,.1);flex-shrink:0;}
.fm-flames-mkt-refresh{
  background:none;border:1px solid rgba(255,255,255,.15);color:var(--muted,#888);
  border-radius:8px;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:1rem;
  transition:color .2s,border-color .2s,transform .3s;flex-shrink:0;
}
.fm-flames-mkt-refresh:hover{color:var(--cream,#f5f0e8);border-color:rgba(255,255,255,.3);}
.fm-mkt-spinning{animation:fm-spin .8s linear infinite!important;}
@keyframes fm-spin{to{transform:rotate(360deg);}}
.fm-flames-mkt-updated{font-size:.7rem;color:var(--muted,#888);white-space:nowrap;}

/* ══════════════════════════════════════════════════════════════
   MARKET DATA TAB
══════════════════════════════════════════════════════════════ */
.fm-mkt-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(251,191,36,.06));
  border:1px solid rgba(249,115,22,.2);border-radius:16px;
  padding:20px 24px;margin-bottom:20px;
}
.fm-mkt-header-left{display:flex;align-items:center;gap:14px;}
.fm-mkt-token-badge{
  font-size:1.1rem;font-weight:900;letter-spacing:.04em;
  color:#fff;background:linear-gradient(135deg,var(--orange,#f97316),#fbbf24);
  padding:8px 16px;border-radius:10px;
}
.fm-mkt-token-name{font-size:1.1rem;font-weight:700;color:var(--cream,#f5f0e8);}
.fm-mkt-token-sub{font-size:.75rem;color:var(--muted,#888);margin-top:2px;}
.fm-mkt-token-stats{display:flex;gap:24px;flex-wrap:wrap;}
.fm-mkt-token-stat{display:flex;flex-direction:column;gap:3px;text-align:center;}
.fm-mkt-token-stat-label{font-size:.68rem;color:var(--muted,#888);text-transform:uppercase;letter-spacing:.05em;}
.fm-mkt-token-stat-val{font-size:1rem;font-weight:700;color:var(--cream,#f5f0e8);}

/* NFT floor cards */
.fm-mkt-nft-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px;}
.fm-mkt-nft-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:18px 20px;
}
.fm-mkt-nft-card-name{font-size:.95rem;font-weight:700;color:var(--cream,#f5f0e8);margin-bottom:14px;}
.fm-mkt-nft-floors{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.fm-mkt-nft-floor-item{display:flex;align-items:center;gap:8px;}
.fm-mkt-nft-platform{
  font-size:.68rem;font-weight:700;color:var(--muted,#888);
  text-transform:uppercase;letter-spacing:.04em;width:72px;flex-shrink:0;
}
.fm-mkt-nft-val{font-size:.9rem;font-weight:700;color:var(--cream,#f5f0e8);flex:1;}
.fm-mkt-nft-go{
  font-size:.75rem;color:var(--orange,#f97316);text-decoration:none;font-weight:700;
}
.fm-mkt-nft-vol-row{
  display:flex;align-items:center;gap:8px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem;
}
.fm-mkt-nft-vol-label{color:var(--muted,#888);}

/* Timeline */
.fm-mkt-timeline-section{margin-bottom:24px;}
.fm-mkt-section-title{
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--orange,#f97316);margin-bottom:20px;
}
.fm-mkt-timeline{display:flex;flex-direction:column;gap:0;}
.fm-mkt-tl-item{
  display:flex;gap:16px;position:relative;padding-bottom:28px;
}
.fm-mkt-tl-item:last-child{padding-bottom:0;}
.fm-mkt-tl-item::before{
  content:'';position:absolute;left:7px;top:16px;bottom:0;
  width:2px;background:rgba(255,255,255,.1);
}
.fm-mkt-tl-item:last-child::before{display:none;}
.fm-mkt-tl-dot{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:3px;
  border:2px solid rgba(0,0,0,.4);position:relative;z-index:1;
}
.fm-mkt-tl-dot-genesis{background:#f97316;}
.fm-mkt-tl-dot-token{background:#fbbf24;}
.fm-mkt-tl-dot-flames{background:#ef4444;}
.fm-mkt-tl-dot-market{background:#a78bfa;}
.fm-mkt-tl-dot-future{background:#374151;border:2px dashed #6b7280;}
.fm-mkt-tl-content{flex:1;}
.fm-mkt-tl-date{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#888);margin-bottom:4px;}
.fm-mkt-tl-title{font-size:.95rem;font-weight:700;color:var(--cream,#f5f0e8);margin-bottom:6px;}
.fm-mkt-tl-desc{font-size:.82rem;color:#9ca3af;line-height:1.6;}
.fm-mkt-tl-item-future .fm-mkt-tl-title{color:#6b7280;}
.fm-mkt-tl-item-future .fm-mkt-tl-desc{color:#6b7280;}

.fm-mkt-refresh-row{
  display:flex;align-items:center;gap:12px;padding-top:8px;
}
.fm-mkt-updated-label{font-size:.72rem;color:var(--muted,#888);}
.fm-mkt-refresh-row .fm-flames-mkt-refresh{
  width:auto;padding:6px 14px;gap:6px;font-size:.8rem;color:var(--cream,#f5f0e8);
}

@media(max-width:600px){
  .fm-flames-mkt-platforms-row{flex-direction:column;align-items:flex-start;}
  .fm-flames-mkt-divider{width:100%;height:1px;}
  .fm-mkt-nft-row{grid-template-columns:1fr;}
  .fm-mkt-token-stats{gap:16px;}
  .fm-mkt-header{flex-direction:column;align-items:flex-start;}
}

/* ── XRP-only price display ─────────────────────────────── */
.fm-price-solo{
  font-size:1.05rem;font-weight:700;
  color:var(--cream,#f5f0e8);letter-spacing:.01em;
}

/* ── Genesis Holder Hoodie Card ─────────────────────────── */
.fm-hoodie-card{
  display:flex;gap:24px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(217,119,6,.08) 0%,rgba(245,158,11,.04) 100%);
  border:1px solid rgba(217,119,6,.35);
  border-radius:16px;padding:28px 28px;margin:24px 20px 8px;
  position:relative;overflow:hidden;
}
.fm-hoodie-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at top left,rgba(251,191,36,.06) 0%,transparent 60%);
  pointer-events:none;
}
.fm-hoodie-card-left{flex:1;min-width:0;}
.fm-hoodie-card-right{width:340px;flex-shrink:0;}
.fm-hoodie-card-eyebrow{margin-bottom:8px;}
.fm-hoodie-card-badge{
  font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#f97316;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.3);
  border-radius:20px;padding:3px 10px;
}
.fm-hoodie-card-title{
  font-size:1.35rem;font-weight:800;color:var(--cream,#f5f0e8);
  margin-bottom:10px;line-height:1.25;
}
.fm-hoodie-card-sub{
  font-size:.85rem;color:#9ca3af;line-height:1.6;
}
.fm-hoodie-card-sub strong{color:var(--cream,#f5f0e8);}
.fm-hoodie-card-sizes{margin-top:18px;}
.fm-hoodie-size-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted,#888);margin-bottom:8px;
}
.fm-hoodie-size-btns{display:flex;flex-wrap:wrap;gap:6px;}
.fm-hoodie-size-btn{
  padding:6px 14px;border-radius:8px;font-size:.8rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:#9ca3af;cursor:pointer;transition:all .15s;
}
.fm-hoodie-size-btn:hover{background:rgba(217,119,6,.15);border-color:rgba(217,119,6,.4);color:var(--cream,#f5f0e8);}
.fm-hoodie-size-btn.selected{background:rgba(217,119,6,.2);border-color:#d97706;color:var(--cream,#f5f0e8);}

@media(max-width:820px){
  .fm-hoodie-card{flex-direction:column;}
  .fm-hoodie-card-right{width:100%;}
}