/* Rulecard premium layer: the final landing language (near black, warm ivory, hot orange emissive accents, thin illuminated edges)
   applied to every page. Loaded last on every page. The animated background mesh (bg.js) is untouched and shows around the panels. */

/* ---------------------------------------------------------------- tokens and type */
:root:root {
  --bg: #080A0D; --ink: #F5EFE6; --muted: #969BA4; --line: rgba(245, 239, 230, .1);
  --accent: #FF7417; --action: #FF7417; --action-ink: #1A0B00; --bloom: #FF4B00; --edge: #FF8B25;
  --p1: #1B1C20; --p2: #0D0F13;
  --panel-grad: linear-gradient(160deg, #1B1C20 0%, #0D0F13 100%);
  --btn-grad: linear-gradient(180deg, #FFC452 0%, #FF8A00 38%, #FF4C00 100%);
  --hl-grad: linear-gradient(100deg, #FFDC83 0%, #FF961A 52%, #FF4C00 100%);
  --font: "Inter", system-ui, sans-serif; --f-body: "Inter", system-ui, sans-serif;
  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif; --head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r-panel: 18px;
}
html:root body { font-family: var(--font); color: var(--ink); background-color: var(--bg); }
h1, h2, h3, h4, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .logo, .card-name, .c-name, .onboard-title, .guide-title, .landing-title, .hero-nums b, .tm-sym, .stamp {
  font-family: var(--head) !important; font-weight: 500 !important;
}
.mono, .caption-3, .caption-4, .eyebrow, .title-4.eyebrow, .stat .k, .tbl th, time, code, kbd { font-family: var(--mono); }
.eyebrow { letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.heading-1, .hero-copy h1, h1.heading-1 { font-size: clamp(42px, 5.4vw, 78px) !important; line-height: 1.04 !important; letter-spacing: -.044em !important; text-wrap: balance; }
.heading-2, h2.heading-2 { font-size: clamp(32px, 3.9vw, 56px) !important; line-height: 1.06 !important; letter-spacing: -.035em !important; text-wrap: balance; }
.heading-3 { letter-spacing: -.03em; }
.hero .sub { font-size: 17px !important; line-height: 1.55 !important; }
.grad { background: linear-gradient(90deg, #F5EFE6 0%, #B9B4AC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl { background: var(--hl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- panels: graphite gradient, thin lit edge, soft depth */
:root:root .panel, :root:root .stat, :root:root .coin-card, :root:root .way, :root:root .pc, :root:root .door, :root:root .chron-card, :root:root .tbl, :root:root .treemap,
:root:root .ritualcard, :root:root .omen, :root:root .way-box, :root:root .onboard-card, :root:root .guide, :root:root .ritual-hero, :root:root .tabbar, :root:root .side-tabs, :root:root .demo-banner,
:root:root .card:not(.rc):not(.t1):not(.t2):not(.t3), :root:root .rraid, :root:root .srow, :root:root .mini, :root:root .menu-body, :root:root .toast, :root:root .busy {
  background: var(--panel-grad) !important;
  border: 1px solid rgba(245, 239, 230, .09) !important; border-radius: var(--r-panel) !important;
  box-shadow: 0 18px 44px -26px #000, inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), transform 500ms var(--ease);
}
:root:root .panel:hover, :root:root .coin-card:hover, :root:root .door:hover, :root:root .omen:hover, :root:root .way:hover, :root:root .pc:hover {
  border-color: rgba(255, 139, 37, .38) !important; box-shadow: 0 18px 44px -26px #000, 0 0 22px -8px rgba(255, 75, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
/* the featured surfaces carry the full illuminated edge */
:root:root .panel.feature, :root:root .door.rec, :root:root .door.recommended, :root:root .hot-panel, :root:root .bc.c {
  border-color: var(--edge) !important;
  box-shadow: 0 0 24px rgba(255, 75, 0, .32), 0 0 4px rgba(255, 139, 37, .75), inset 0 0 34px rgba(255, 116, 23, .1) !important;
}
:root:root .top, :root:root .nav { background: rgba(8, 10, 13, .82) !important; border-color: rgba(245, 239, 230, .12) !important; box-shadow: 0 14px 34px -22px #000 !important; }
:root:root .sheet { background: rgba(8, 10, 13, .97) !important; }
:root:root .seg, :root:root .chip, :root:root .pill:not(.ok):not(.bad):not(.hot), :root:root .tab, :root:root .toggle, :root:root select, :root:root .presets button, :root:root .amt, :root:root .menu summary, :root:root .door-btn, :root:root .btn-ghost, :root:root .btn.ghost {
  background: linear-gradient(160deg, #17181C, #0E1014) !important; border-color: rgba(245, 239, 230, .12) !important; border-radius: 12px !important;
}
:root:root .chip, :root:root .pill { border-radius: 999px !important; }
:root:root .btn-ghost:hover, :root:root .btn.ghost:hover, :root:root .tab:hover, :root:root .presets button:hover, :root:root .door-btn:hover { border-color: rgba(255, 139, 37, .45) !important; background: linear-gradient(160deg, #1E1F24, #121418) !important; }
:root:root .seg button[aria-pressed="true"], :root:root .tabbar button[aria-pressed="true"], :root:root .presets button.on, :root:root .tab[aria-selected="true"] {
  background: linear-gradient(160deg, #2A1708, #170D05) !important; border-color: rgba(255, 139, 37, .6) !important; color: #FFD9B0 !important; box-shadow: 0 0 14px -4px rgba(255, 75, 0, .5) !important;
}
:root:root .seg button[aria-pressed="true"] { color: #FFD9B0 !important; }
:root:root .guide, :root:root .tour, :root:root .ritual-hero { background: linear-gradient(160deg, #211810, #0F0D0B) !important; border-color: rgba(255, 139, 37, .3) !important; }

/* ---------------------------------------------------------------- primary actions: molten gradient with a focused bloom */
:root:root .btn.primary, :root:root .play-btn, :root:root .btn.gm, :root:root .nav .btn, :root:root .cta-note .btn, :root:root .hero .btn:not(.btn-ghost),
:root:root .close .btn:not(.btn-ghost), :root:root .btn-lg:not(.btn-ghost), :root:root .door .btn:not(.btn-ghost):not(.ghost), :root:root a.btn:not(.btn-ghost):not(.ghost):not(.small):not(.sell) {
  background: var(--btn-grad) !important; color: var(--action-ink) !important; border: 1px solid rgba(255, 196, 82, .55) !important; border-radius: 12px !important; font-weight: 600;
  box-shadow: 0 0 18px rgba(255, 75, 0, .38), 0 0 3px rgba(255, 196, 82, .85), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  transition: box-shadow 300ms var(--ease), transform 300ms var(--ease), filter 300ms var(--ease);
}
:root:root .btn.primary:hover:not(:disabled), :root:root .play-btn:hover, :root:root .btn.gm:hover:not(:disabled), :root:root .nav .btn:hover, :root:root .btn-lg:not(.btn-ghost):hover, :root:root a.btn:not(.btn-ghost):not(.ghost):not(.small):not(.sell):hover {
  box-shadow: 0 0 30px rgba(255, 75, 0, .55), 0 0 4px rgba(255, 210, 120, .95), inset 0 1px 0 rgba(255, 255, 255, .5) !important; transform: translateY(-1px); filter: saturate(1.08);
}
:root:root .btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
:root:root .btn:disabled { filter: grayscale(.6) brightness(.7); box-shadow: none !important; }
:root:root .btn:focus-visible, :root:root a:focus-visible, :root:root button:focus-visible, :root:root input:focus-visible, :root:root select:focus-visible { outline: 2px solid #FFB45A; outline-offset: 2px; }
/* buy and sell keep their own colours */
:root:root .btn.big-cta { background: linear-gradient(180deg, #5BE6A4, #1FA868) !important; color: #03150D !important; border-color: rgba(120, 240, 180, .5) !important; box-shadow: 0 0 18px rgba(61, 214, 140, .32), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
:root:root .btn.big-cta.sell { background: linear-gradient(180deg, #FF8686, #D93636) !important; color: #1A0505 !important; border-color: rgba(255, 140, 140, .5) !important; box-shadow: 0 0 18px rgba(255, 92, 92, .32), inset 0 1px 0 rgba(255, 255, 255, .3) !important; }

/* ---------------------------------------------------------------- inputs */
:root:root input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), :root:root textarea {
  background: #0B0D10 !important; border: 1px solid rgba(245, 239, 230, .14) !important; border-radius: 12px !important; color: var(--ink);
}
:root:root input:focus:not([type="range"]), :root:root textarea:focus { border-color: rgba(255, 139, 37, .7) !important; box-shadow: 0 0 0 3px rgba(255, 116, 23, .16) !important; }

/* ---------------------------------------------------------------- landing: hero arena, trust strip, sections */
.hero { padding: 96px 0 80px; }
.hero-copy { gap: 24px; }
.hand .bc { background: linear-gradient(160deg, #1D1E23, #0C0E12) !important; border-radius: 20px; }
.hand .bc.l, .hand .bc.r { border-color: rgba(245, 239, 230, .16); box-shadow: 0 22px 44px -22px #000; }
.hand .bc .art { background: radial-gradient(120% 90% at 50% 20%, #1E1A16, #0B0C0F) !important; border: 1px solid rgba(245, 239, 230, .06); }
.hand .bc.c { transform-origin: 50% 90%; }
.raidline { border-radius: 999px !important; border-color: rgba(255, 139, 37, .35) !important; }
.raidline .fill { background: var(--btn-grad) !important; box-shadow: 0 0 14px rgba(255, 75, 0, .6); }
.strip .item { border-radius: var(--r-panel); }
section[aria-labelledby] { padding-top: 64px; padding-bottom: 64px; }
.tagline-text { font-family: var(--head) !important; font-weight: 500; letter-spacing: -.035em; }

/* the original tinted section bands become a quiet warm wash */
section[style*="rgba(19,18,9"] { background: linear-gradient(180deg, rgba(19, 14, 9, .66), rgba(10, 10, 13, .66)) !important; border-color: rgba(255, 139, 37, .12) !important; }

/* ---------------------------------------------------------------- motion: user scrolled, never hijacked */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rv, .rv:nth-child(3n+1), .rv:nth-child(3n) { filter: none !important; transform: translateY(30px) !important; opacity: 0;
    transition: opacity 1000ms cubic-bezier(.22, 1, .36, 1), transform 1000ms cubic-bezier(.22, 1, .36, 1) !important; transition-delay: calc(var(--d, 0) * 100ms) !important; }
  .rv.in, .rv:nth-child(3n+1).in, .rv:nth-child(3n).in { opacity: 1; transform: none !important; }
  /* the deck rises 56px and settles from a 5 degree tilt, a card at a time */
  .deck > *, .deck .gcard { transition-delay: calc(var(--i, 0) * 100ms); }
  #deck-grid .rv, .deck .rv { transform: translateY(56px) rotate(5deg) !important; }
  #deck-grid .rv.in, .deck .rv.in { transform: none !important; }
  /* hero: the cards deal in (the original deal keyframes), then the centre card breathes */
  @keyframes bloomBreath { 0%, 100% { box-shadow: 0 0 24px rgba(255, 75, 0, .26), 0 0 4px rgba(255, 139, 37, .7), inset 0 0 34px rgba(255, 116, 23, .08); } 50% { box-shadow: 0 0 36px rgba(255, 75, 0, .42), 0 0 4px rgba(255, 139, 37, .9), inset 0 0 40px rgba(255, 116, 23, .14); } }
  .hand .bc { animation-duration: 1100ms; }
  .hand .bc.c { animation: deal 1100ms var(--ease) forwards, bloomBreath 6s ease-in-out 1.4s infinite; }
  /* raids: a light sweep across the bar once it is in view */
  @keyframes lightSweep { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
  .stage.in .raidline { position: relative; overflow: hidden; }
  .stage.in .raidline::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 196, 82, .35), transparent); animation: lightSweep 700ms cubic-bezier(.22, 1, .36, 1) 1.3s 1 both; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hand .bc { opacity: 1 !important; }
  .rv, .rv:nth-child(3n+1), .rv:nth-child(3n) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hand .bc, .hand .bc.c { animation: none !important; transform: translate(calc(-50% + var(--x)), 0) rotate(var(--r)) !important; }
}

/* ---------------------------------------------------------------- small screens: bigger touch targets, nothing overflows */
@media (max-width: 767px) {
  .heading-1, .hero-copy h1 { font-size: clamp(36px, 10.8vw, 42px) !important; line-height: 1.05 !important; letter-spacing: -.043em !important; }
  .hero { padding: 56px 0 48px; }
  :root:root .btn, :root:root .tab, :root:root .seg button, :root:root .chip, :root:root select, :root:root .toggle { min-height: 44px; }
  :root:root .btn, :root:root .btn-ghost { border-radius: 10px !important; }
  section[aria-labelledby] { padding-top: 48px; padding-bottom: 48px; }
  html, body { overflow-x: clip; }
}

/* ---------------------------------------------------------------- closing curtain and glowing wordmark footer */
:root:root .close { background: transparent !important; border-top: 0; padding: 32px 0 0; }
.curtain {
  position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255, 139, 37, .22); isolation: isolate;
  padding: clamp(56px, 9vw, 120px) clamp(20px, 6vw, 72px); text-align: center; background: #0A0605;
  box-shadow: 0 0 40px -14px rgba(255, 75, 0, .45), inset 0 0 60px rgba(0, 0, 0, .7);
}
/* velvet folds: vertical bands of deep red and ember, brighter toward the right and the bottom */
.curtain::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .62) 0 10px, rgba(120, 30, 10, .16) 26px, rgba(0, 0, 0, .55) 44px),
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(24, 7, 3, .7) 42%, rgba(176, 46, 20, .62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(255, 90, 20, .2) 100%);
  background-blend-mode: normal, normal, screen;
}
/* film grain */
.curtain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.curtain .close-in { align-items: center; margin: 0 auto; max-width: 720px; gap: 20px; text-shadow: none; }
.curtain h2 { color: #F5EFE6; font-size: clamp(34px, 5vw, 64px) !important; }
.curtain p { color: #C9B8A8; max-width: 520px; margin: 0; }
.curtain .caption-2 { color: #A8927F; position: relative; z-index: 1; }
.spark { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; opacity: .7; pointer-events: none; }
.spark::before, .spark::after { content: ""; position: absolute; background: #FFC98A; left: 50%; top: 50%; translate: -50% -50%; }
.spark::before { width: 1px; height: 11px; } .spark::after { width: 11px; height: 1px; }
footer { padding-bottom: 0; overflow: hidden; }
.wordmark {
  font-family: var(--head); font-weight: 600; text-align: center; line-height: .8; letter-spacing: -.05em; user-select: none; white-space: nowrap;
  font-size: clamp(64px, 19vw, 300px); margin: 24px 0 -.12em; padding-bottom: .06em;
  background: linear-gradient(180deg, rgba(255, 110, 20, 0) 8%, rgba(255, 110, 20, .5) 55%, #FF8A2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  filter: drop-shadow(0 0 28px rgba(255, 75, 0, .35));
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes twinkle { 0%, 100% { opacity: .25; scale: .8; } 50% { opacity: .95; scale: 1.15; } }
  .spark { animation: twinkle 3.6s ease-in-out var(--t, 0s) infinite; }
  @keyframes folds { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 88px 0, 0 0, 0 0; } }
  .curtain::before { animation: folds 40s linear infinite; }
}

/* ---------------------------------------------------------------- floating play button in the curtain style */
.fab {
  position: fixed; left: 50%; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 22px;
  border-radius: 14px; font: 600 16px/1 var(--font); color: #1A0B00; text-decoration: none; text-shadow: none;
  background: linear-gradient(180deg, #FFC15A 0%, #FF8A1C 42%, #F25400 100%); border: 1px solid rgba(255, 214, 150, .65);
  box-shadow: 0 10px 28px -8px rgba(255, 75, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(150, 38, 0, .35);
  opacity: 0; translate: -50% 24px; pointer-events: none; transition: opacity 500ms var(--ease), translate 500ms var(--ease), box-shadow 300ms var(--ease), filter 300ms var(--ease);
}
.fab i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(26, 11, 0, .86); color: #FFC15A; font-size: 14px; }
.fab.show { opacity: 1; translate: -50% 0; pointer-events: auto; }
.fab:hover { box-shadow: 0 14px 34px -8px rgba(255, 75, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(150, 38, 0, .35); filter: saturate(1.1); }
.fab:focus-visible { outline: 2px solid #FFE3B0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fab { transition: opacity 200ms linear; translate: -50% 0; } }

/* ---------------------------------------------------------------- the velvet folds reach the other bands, quietly */
section[style*="rgba(19,18,9"] { position: relative; isolation: isolate; }
section[style*="rgba(19,18,9"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .5) 0 10px, rgba(120, 30, 10, .12) 26px, rgba(0, 0, 0, .45) 44px), linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(150, 40, 15, .35));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.arena { padding: 8px 0 56px; position: relative; z-index: 1; }
.arena .stage { max-width: 760px; margin: 0 auto; }
@media (max-width: 1023px) { .hero-grid { min-height: 0; } }

/* ---------------------------------------------------------------- 3D card spiral in the hero: obsidian cards with a gilded emblem, thin metal edges, a floor glow */
.hero { position: relative; }
.sculpt { position: absolute; right: 4%; top: 2%; width: min(620px, 45vw); aspect-ratio: 1; perspective: 1700px; pointer-events: none; z-index: 0; }
.hero-grid { position: relative; z-index: 1; }
.sculpt-glow { position: absolute; inset: 6% 4% 8%; border-radius: 50%; background:
  radial-gradient(closest-side, rgba(255, 96, 24, .30), rgba(255, 75, 0, .08) 58%, transparent 76%),
  repeating-linear-gradient(118deg, transparent 0 34px, rgba(255, 90, 30, .12) 34px 56px, transparent 56px 96px);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); filter: blur(10px); }
/* the floor: a soft ember pool and a faint ring the spiral stands on */
.sculpt::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 110, 30, .42), rgba(255, 75, 0, .12) 60%, transparent 100%); filter: blur(8px); }
.sculpt-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-14deg); transition: transform 900ms var(--ease); display: grid; place-items: center; }
.sculpt-spin { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.slab { position: absolute; width: 134px; height: 190px; left: -67px; top: -95px; transform-style: preserve-3d; }
.slab > i { position: absolute; display: block; }
.slab .f, .slab .k { inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* front: obsidian with fine ribbing, a travelling sheen, a gilded hairline frame and a centre emblem */
.slab .f {
  transform: translateZ(3px); overflow: hidden;
  background:
    linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, .13) 44%, rgba(255, 190, 120, .08) 50%, transparent 62%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px),
    linear-gradient(155deg, #2D2E35 0%, #121317 40%, #060608 100%);
  box-shadow: 0 0 0 1px rgba(255, 214, 160, .3), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -18px 30px rgba(0, 0, 0, .6);
}
.slab .f::before { content: ""; position: absolute; inset: 6px; border-radius: 9px; border: 1px solid rgba(255, 196, 130, .18); pointer-events: none; }
.slab .f { display: flex; flex-direction: column; align-items: center; padding: 11px 12px 12px; border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); }
.slab .fc-tier { align-self: flex-start; font: 500 8.5px/1 var(--mono); letter-spacing: .16em; color: var(--tone); }
.slab .fc-cost { position: absolute; right: 12px; top: 11px; font: 500 8.5px/1 var(--mono); color: rgba(245, 239, 230, .75); }
.slab .fc-art { flex: 1; width: 76%; margin-top: 4px; background: linear-gradient(180deg, #FFE3A8, var(--tone) 55%, #C8480E); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone) 60%, transparent)); }
.slab .fc-name { font: 500 14.5px/1 var(--head); letter-spacing: -.01em; color: #F5EFE6; margin-top: 7px; }
.slab .fc-line { display: block; width: 46%; height: 1px; margin-top: 9px; background: linear-gradient(90deg, transparent, var(--tone), transparent); opacity: .8; }
.slab .k { transform: translateZ(-3px) rotateY(180deg); overflow: hidden;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 7px), linear-gradient(205deg, #1E1F25, #060608); box-shadow: 0 0 0 1px rgba(255, 160, 70, .3); }
.slab .k::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1px solid rgba(255, 170, 90, .4); box-shadow: 0 0 16px rgba(255, 90, 20, .35), inset 0 0 14px rgba(255, 90, 20, .25); }
.slab.hot .f { box-shadow: 0 0 0 1px rgba(255, 170, 80, .9), 0 0 22px rgba(255, 75, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -18px 30px rgba(0, 0, 0, .55), inset 0 0 26px rgba(255, 90, 20, .18); }
/* the 6px edge: brushed metal, with an emissive ember line on the lit cards */
.slab .e1, .slab .e2 { left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #5A5B63, #1A1B20 40%, #3C3D45); }
.slab .e1 { top: -3px; transform: rotateX(90deg); } .slab .e2 { bottom: -3px; transform: rotateX(90deg); }
.slab .e3, .slab .e4 { top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #55565E, #17181C 55%, #34353C); }
.slab .e3 { left: -3px; transform: rotateY(90deg); } .slab .e4 { right: -3px; transform: rotateY(90deg); }
.slab.hot .e1, .slab.hot .e3, .slab.hot .e4 { background: linear-gradient(90deg, #FFE0A0, #FF7A1A 50%, #C8480E); box-shadow: 0 0 14px rgba(255, 90, 20, .85); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes spinY { to { transform: rotateY(360deg); } }
  .sculpt-spin { animation: spinY 64s linear infinite; }
  @keyframes bob { 0%, 100% { translate: 0 -6px; } 50% { translate: 0 8px; } }
  .sculpt-rig { animation: bob 9s ease-in-out infinite; }
}
@media (max-width: 1023px) { .sculpt { right: -22%; top: 2%; width: 86vw; opacity: .26; } }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important; min-height: 560px; } }

/* ---------------------------------------------------------------- the closing curtain runs edge to edge */
:root:root .close > .wrap { max-width: none; padding-left: 0; padding-right: 0; width: 100%; }
.curtain { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: 1px solid rgba(255, 139, 37, .3) !important; border-bottom: 1px solid rgba(255, 139, 37, .3) !important;
  padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px); }
:root:root .close { padding-top: 48px; }

/* ---------------------------------------------------------------- the hand under the hero: the same black glass and ember edge as the pack's cards */
.hand .bc, .hand .bc.l, .hand .bc.r, .hand .bc.c {
  --tc: #FF9A3C !important;
  background: linear-gradient(150deg, #2A2B31 0%, #0E0F13 46%, #050607 100%) !important;
  border: 1px solid rgba(255, 139, 37, .55) !important; border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 75, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 30px rgba(0, 0, 0, .75), 0 24px 44px -22px #000 !important;
}
.hand .bc.c { --tc: #FFC27A !important; border-color: #FF8B25 !important; box-shadow: 0 0 28px rgba(255, 75, 0, .5), 0 0 4px rgba(255, 139, 37, .85), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 30px rgba(0, 0, 0, .7) !important; }
.hand .bc .art { background: radial-gradient(110% 80% at 50% 25%, #2A1708, #0A0A0D 70%) !important; border: 1px solid rgba(255, 139, 37, .22); box-shadow: inset 0 0 24px rgba(255, 90, 20, .15); }
.hand .bc .sym { filter: drop-shadow(0 0 10px rgba(255, 110, 20, .6)); }
.hand .bc h2 { color: #F5EFE6; }
.hand .bc .top, .hand .bc .top .caption-3 { color: #FFB45A; }
.hand .bc .status { color: #F5EFE6; }
.hand .bc .pts .mono { color: #FFB45A; text-shadow: 0 0 12px rgba(255, 110, 20, .5); }

/* ---------------------------------------------------------------- live coin boxes under the hero */
.lv-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.lv-head h2 { margin: 4px 0 0; }
.lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lv { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, #1B1C20 0%, #0D0F13 100%); border: 1px solid rgba(245, 239, 230, .1); overflow: hidden;
  box-shadow: 0 18px 44px -26px #000, inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), transform 500ms var(--ease); }
.lv::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 70%; background: radial-gradient(closest-side, rgba(255, 90, 20, .16), transparent 70%); pointer-events: none; }
.lv:hover { border-color: rgba(255, 139, 37, .55); box-shadow: 0 0 26px -6px rgba(255, 75, 0, .45), 0 18px 44px -26px #000, inset 0 1px 0 rgba(255, 255, 255, .08); transform: translateY(-3px); }
.lv.hot { border-color: rgba(255, 139, 37, .6); box-shadow: 0 0 24px rgba(255, 75, 0, .28), 0 0 3px rgba(255, 139, 37, .7), inset 0 0 34px rgba(255, 116, 23, .06); }
.lv-top { display: flex; align-items: center; gap: 12px; }
.lv-av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--mono); letter-spacing: .02em; color: #FFD9B0;
  background: radial-gradient(circle at 30% 25%, #3A2312, #120B07 70%); border: 1px solid rgba(255, 139, 37, .7); box-shadow: 0 0 14px rgba(255, 90, 20, .45), inset 0 0 10px rgba(255, 120, 30, .25); }
.lv-id { display: flex; flex-direction: column; min-width: 0; }
.lv-id b { font: 500 20px/1.1 var(--head); letter-spacing: -.02em; }
.lv-id small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-st { margin-left: auto; flex: none; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; color: #B9B4AC; border: 1px solid rgba(245, 239, 230, .16); background: rgba(255, 255, 255, .03); }
.lv.hot .lv-st { color: #1A0B00; background: var(--btn-grad); border-color: rgba(255, 196, 82, .6); box-shadow: 0 0 14px rgba(255, 75, 0, .45); }
.lv-mc { display: flex; align-items: baseline; gap: 10px; }
.lv-mc strong { font: 500 34px/1 var(--head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lv-mc small, .lv-ft small { color: var(--muted); font: 400 12px/1 var(--mono); letter-spacing: .04em; }
.lv-spark { height: 54px; }
.lv-spark svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 110, 20, .45)); }
.lv-ft { display: flex; gap: 22px; padding-top: 12px; border-top: 1px solid rgba(245, 239, 230, .08); }
.lv-ft span { display: flex; flex-direction: column; gap: 6px; }
.lv-ft b { font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
.lv-raid { font: 500 12px/1 var(--mono); color: #FFB45A; letter-spacing: .04em; }
.lv-note { margin-top: 16px; }
@media (max-width: 1023px) { .lv-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- cards and omens: blurred light ribbons and ribbed glass, in ember */
#deck { position: relative; isolation: isolate; overflow: hidden; }
#deck::before, #deck::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -12% -240px; filter: blur(14px); }
/* soft diagonal bars: ember red on the left, warm grey on the right, like light through a ribbed pane */
#deck::before {
  background: repeating-linear-gradient(118deg, transparent 0 40px, rgba(255, 64, 24, .55) 40px 74px, transparent 74px 128px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 70%); opacity: .5;
}
#deck::after {
  background: repeating-linear-gradient(118deg, transparent 0 52px, rgba(214, 204, 192, .32) 52px 70px, transparent 70px 140px);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%); mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%); opacity: .3;
}
#deck > .wrap { position: relative; }

/* every deck card and omen: ribbed glass, a tier-coloured ribbon of light, and a thin sweep on hover */
:root:root .pc, :root:root .omen { position: relative; overflow: hidden; isolation: isolate; }
:root:root .pc { border-color: color-mix(in srgb, var(--tc) 55%, transparent) !important; }
:root:root .pc.soon { border-style: dashed !important; border-color: rgba(245, 239, 230, .16) !important; }
.pc::before, .omen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(205deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%); mask-image: linear-gradient(205deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
}
.pc::after, .omen::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 70%; height: 150%; right: -26%; top: -30%;
  background: linear-gradient(118deg, transparent 34%, color-mix(in srgb, var(--tc, #FF7417) 52%, transparent) 50%, transparent 66%); filter: blur(12px); opacity: .55;
  transition: translate 900ms var(--ease), opacity 500ms var(--ease);
}
.omen { --tc: #FF7417; }
.pc:hover::after, .omen:hover::after { translate: -34% 0; opacity: .9; }
.omen .i { color: #FFB45A; filter: drop-shadow(0 0 10px rgba(255, 110, 20, .55)); }
.omen:hover { border-color: rgba(255, 139, 37, .5) !important; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ribbonDrift { from { transform: translateX(-46px); } to { transform: translateX(46px); } }
  #deck::before { animation: ribbonDrift 22s ease-in-out infinite alternate; }
  #deck::after { animation: ribbonDrift 28s ease-in-out infinite alternate-reverse; }
}
@media (max-width: 767px) { #deck::before, #deck::after { filter: blur(10px); inset: -6% -120px; } }

/* ---------------------------------------------------------------- primary buttons, refined: crisp text, a tighter halo, the arrow in a chip */
:root:root .btn.primary, :root:root .play-btn, :root:root .btn.gm, :root:root .nav .btn, :root:root .cta-note .btn, :root:root .hero .btn:not(.btn-ghost),
:root:root .close .btn:not(.btn-ghost), :root:root .btn-lg:not(.btn-ghost), :root:root a.btn:not(.btn-ghost):not(.ghost):not(.small):not(.sell) {
  background: linear-gradient(180deg, #FFC15A 0%, #FF8A1C 42%, #F25400 100%) !important; color: #1A0B00 !important; text-shadow: none !important;
  border: 1px solid rgba(255, 214, 150, .65) !important;
  box-shadow: 0 10px 28px -8px rgba(255, 75, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(150, 38, 0, .35) !important;
}
:root:root .btn.primary:hover:not(:disabled), :root:root .play-btn:hover, :root:root .nav .btn:hover, :root:root .btn-lg:not(.btn-ghost):hover, :root:root a.btn:not(.btn-ghost):not(.ghost):not(.small):not(.sell):hover {
  box-shadow: 0 14px 34px -8px rgba(255, 75, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(150, 38, 0, .35) !important; transform: translateY(-1px); filter: saturate(1.1);
}
.btn-lg:not(.btn-ghost) { padding-right: 12px !important; gap: 12px; }
.btn-lg:not(.btn-ghost) > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(26, 11, 0, .86); color: #FFC15A; font-size: 15px; }

/* ---------------------------------------------------------------- the same floating orange on selected toggles in the app (Live / Graduated, Grid / List, and the like) */
:root:root .seg { padding: 4px !important; border-radius: 14px !important; }
:root:root .seg button { border-radius: 10px !important; font-weight: 500; transition: box-shadow 300ms var(--ease), transform 300ms var(--ease), color 300ms var(--ease), background-color 300ms var(--ease); }
:root:root .seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, #FFC15A 0%, #FF8A1C 42%, #F25400 100%) !important; color: #1A0B00 !important; font-weight: 600; text-shadow: none !important;
  border: 1px solid rgba(255, 214, 150, .65) !important;
  box-shadow: 0 8px 22px -8px rgba(255, 75, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(150, 38, 0, .35) !important; transform: translateY(-1px);
}
:root:root .seg button[aria-pressed="false"]:hover, :root:root .seg button:not([aria-pressed]):hover { color: #FFD9B0; }

/* the landing and inner pages use the same logo mark */
.logo .mark-img { display: block; width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 14px -2px rgba(255, 110, 20, .6); }

/* the landing deck: one pile of the real cards; the top one flies off to the bottom */
#deck-grid { display: block !important; position: relative; width: 300px; height: 410px; margin: 30px auto 6px; outline: none; }
#deck-grid .sk { position: absolute; left: 30px; top: 30px; width: 240px; height: 340px; transform-origin: 20% 90%; transition: transform 600ms var(--ease), opacity 500ms var(--ease) !important; transition-delay: 0ms !important; }
#deck-grid .sk.out { transform: translateX(-130%) rotate(-20deg) !important; opacity: 0 !important; }
#deck-grid .sk.nopt { transition: none !important; }
#deck-grid .empty { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); width: min(560px, 90vw); }
@media (prefers-reduced-motion: reduce) { #deck-grid .sk { transition: none !important; } }
.deck-note { text-align: center; max-width: 560px; margin: 6px auto 0; min-height: 3em; }
.deck-note b { color: #F5EFE6; margin-right: 6px; }
.deck-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; position: relative; z-index: 2; }
.deck-nav button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: #F5EFE6; background: rgba(12, 12, 14, .8); border: 1px solid rgba(255, 139, 37, .5); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.deck-nav button:hover { transform: translateY(-2px); box-shadow: 0 0 22px -4px rgba(255, 90, 20, .8); }
.deck-nav button:active { transform: scale(.96); }
.deck-nav button:focus-visible, #deck-grid:focus-visible { outline: 2px solid #FFB45A; outline-offset: 3px; }

/* hero slabs carry the real card designs on their front face */
.slab .f.real { padding: 0; border: 0; background: none; box-shadow: none; overflow: hidden; border-radius: 10px; }
.slab .f.real::before { display: none; }
.slab.hot .f.real { box-shadow: 0 0 26px rgba(255, 90, 20, .45); }
.slab .rc-host { display: block; width: 134px; height: 190px; pointer-events: none; }