:root {
  --bg: #07060d;
  --bg-soft: #0b0913;
  --panel: rgba(17, 14, 29, 0.88);
  --panel-strong: #120f20;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f7f6fb;
  --muted: #9692a4;
  --purple: #7458ff;
  --purple-2: #9a7bff;
  --cyan: #5ee7ff;
  --pink: #ff5dc8;
  --yellow: #ffd15c;
  --lime: #b9ff63;
  --green: #67e4a6;
  --red: #ff777f;
  --sidebar: 252px;
  --radius: 22px;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 56% 18%, rgba(93, 54, 202, .18), transparent 30rem),
    radial-gradient(circle at 80% 72%, rgba(77, 46, 160, .12), transparent 34rem),
    var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.65) .6px, transparent .7px);
  background-size: 68px 68px;
  opacity: .1;
  z-index: -1;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .035; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Shared brand */
.brand { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 48px; }
.brand-logo { display: block; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.38)); }
.brand-token { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; }
.gradient-text { background: linear-gradient(100deg, var(--cyan), var(--purple-2) 32%, var(--pink) 62%, var(--yellow) 82%, var(--lime)); color: transparent; background-clip: text; -webkit-background-clip: text; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--purple-2); font-family: var(--mono); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--purple-2); box-shadow: 0 0 14px var(--purple); }
.section-kicker { color: var(--purple-2); font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; }

/* Buttons */
.btn { border: 0; cursor: pointer; min-height: 48px; border-radius: 14px; padding: 0 21px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(145deg, #8a70ff, #5742d9); box-shadow: inset 0 1px rgba(255,255,255,.3), 0 8px 0 #36268c, 0 14px 40px rgba(104,76,240,.28); color: white; }
.btn-primary:active { transform: translateY(4px); box-shadow: inset 0 1px rgba(255,255,255,.25), 0 4px 0 #36268c; }
.btn-secondary { background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); }
.btn-secondary:hover { background: rgba(255,255,255,.07); }
.btn-white { background: #fff; color: #11101a; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; display: grid; place-items: center; color: var(--muted); }

/* Landing */
.landing-header { position: fixed; inset: 0 0 auto 0; height: 80px; padding: 0 clamp(22px, 4vw, 54px); display: flex; align-items: center; justify-content: space-between; z-index: 30; background: linear-gradient(to bottom, rgba(7,6,13,.98), rgba(7,6,13,.72), transparent); }
.landing-actions { display: flex; align-items: center; gap: 11px; }
.hero { min-height: 100vh; padding: 124px 5vw 70px; display: grid; place-items: center; position: relative; overflow: hidden; text-align: center; }
.hero::before { content: ""; position: absolute; width: 52vw; height: 24vw; left: 24%; top: 13%; background: radial-gradient(ellipse, rgba(113,78,255,.35), transparent 67%); filter: blur(40px); }
.hero-inner { width: min(1100px, 100%); position: relative; z-index: 1; }
.liquid-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; perspective: 1400px; }
.liquid-card {
  --r: 0deg;
  --dx: 10px;
  --dy: -18px;
  position: absolute;
  isolation: isolate;
  width: clamp(110px, 11vw, 220px);
  aspect-ratio: 5 / 7;
  padding: clamp(9px, .72vw, 14px);
  border: 2px solid rgba(255,255,255,.78);
  border-radius: clamp(25px, 2vw, 36px);
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.98), transparent 25%),
    radial-gradient(circle at 92% 12%, rgba(255,190,227,.72), transparent 34%),
    radial-gradient(circle at 8% 92%, rgba(123,226,255,.72), transparent 35%),
    radial-gradient(circle at 88% 92%, rgba(224,255,147,.68), transparent 37%),
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,190,232,.44) 31%, rgba(155,224,255,.48) 59%, rgba(233,255,181,.55));
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  box-shadow:
    0 42px 85px rgba(3,2,12,.62),
    0 12px 28px rgba(44,22,83,.34),
    0 0 34px rgba(155,111,255,.24),
    inset 0 0 0 2px rgba(255,255,255,.48),
    inset 8px 10px 18px rgba(255,255,255,.45),
    inset -10px -12px 20px rgba(122,232,255,.22);
  transform: rotate(var(--r));
  transform-style: preserve-3d;
  animation: liquidFloat 7s ease-in-out infinite;
  will-change: transform;
}
.liquid-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: clamp(20px, 1.6vw, 29px);
  background:
    linear-gradient(112deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 18%, transparent 38%, transparent 67%, rgba(255,192,230,.16) 80%, rgba(204,255,238,.28) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(160,238,255,.46);
  mix-blend-mode: screen;
}
.liquid-card::after {
  content: "";
  position: absolute;
  width: 84%;
  height: 38%;
  left: 3%;
  top: -1%;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(ellipse at top, rgba(255,255,255,.84), rgba(255,255,255,.24) 44%, transparent 73%);
  filter: blur(9px);
  opacity: .82;
  transform: rotate(-9deg);
}
.liquid-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,255,255,.68);
  border-radius: clamp(17px, 1.35vw, 25px);
  filter: saturate(1.1) contrast(1.015) brightness(1.04);
  box-shadow:
    0 5px 16px rgba(10,5,26,.27),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
.liquid-profile-face { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: clamp(17px,1.35vw,25px); background: #100c1c; border: 2px solid rgba(255,255,255,.68); }
.liquid-profile .liquid-profile-face img { height: 80%; border: 0; border-radius: 0; object-fit: cover; }
.liquid-rarity { position: absolute; top: 8px; left: 8px; z-index: 4; padding: 4px 6px; border-radius: 4px; background: rgba(7,6,13,.72); color: white; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.liquid-profile-name { height: 20%; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: linear-gradient(120deg,#171021,#08070d); color: white; position: relative; z-index: 1; }
.liquid-profile-name strong { font-size: clamp(13px,1.2vw,22px); font-weight: 900; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liquid-profile-name small { font-family: var(--mono); font-size: 9px; color: #bab3cb; margin-top: 3px; }
.liquid-card i {
  position: absolute;
  inset: -24%;
  z-index: -1;
  background:
    radial-gradient(circle at 34% 34%, rgba(255,104,218,.30), transparent 42%),
    radial-gradient(circle at 68% 64%, rgba(92,227,255,.27), transparent 48%);
  filter: blur(28px);
}
.liquid-card-1 { left: 5%; top: 22%; --r: -13deg; --dx: 12px; --dy: -22px; animation-duration: 8.5s; }
.liquid-card-2 { left: 22%; top: 12%; width: clamp(120px,12vw,235px); --r: 9deg; --dx: -11px; --dy: 18px; animation-delay: -2s; }
.liquid-card-3 { right: 6%; top: 22%; width: clamp(150px,15vw,290px); --r: 11deg; --dx: -15px; --dy: -20px; animation-duration: 9s; animation-delay: -4s; }
.liquid-card-4 { right: 1%; top: 7%; width: clamp(86px,8vw,150px); --r: -10deg; --dx: 8px; --dy: 15px; filter: blur(1.8px); opacity: .52; animation-delay: -1s; }
.liquid-card-5 { left: 12%; bottom: 1%; width: clamp(82px,7vw,135px); --r: 12deg; --dx: -10px; --dy: -16px; filter: blur(2.5px); opacity: .38; animation-delay: -5s; }
.liquid-card-6 { right: 24%; bottom: 1%; width: clamp(76px,6vw,120px); --r: -8deg; --dx: 14px; --dy: 12px; filter: blur(3px); opacity: .3; animation-delay: -3s; }
@keyframes liquidFloat { 0%,100% { transform: translate3d(0,0,0) rotate(var(--r)); } 50% { transform: translate3d(var(--dx),var(--dy),0) rotate(calc(var(--r) + 2deg)); } }
.liquid-shell { position: fixed; left: var(--sidebar); top: 44px; z-index: 0; }
.liquid-shell .liquid-card { opacity: .13; filter: blur(1px) saturate(1.15); box-shadow: 0 30px 70px rgba(0,0,0,.46), 0 0 45px rgba(116,88,255,.25); }
.liquid-shell .liquid-card-1 { left: 1%; top: 18%; }.liquid-shell .liquid-card-2 { left: 12%; top: 62%; }.liquid-shell .liquid-card-3 { right: 1%; top: 15%; }.liquid-shell .liquid-card-4 { right: 8%; top: 58%; }.liquid-shell .liquid-card-5 { left: 42%; bottom: -2%; }.liquid-shell .liquid-card-6 { right: 37%; top: 6%; }
.hero-logo { display: block; width: clamp(250px, 38vw, 470px); aspect-ratio: 1; object-fit: contain; margin: -42px auto -45px; filter: drop-shadow(0 34px 34px rgba(0,0,0,.58)); }
.hero h1 { font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.055em; margin: 8px 0 16px; }
.hero-copy { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 650px; line-height: 1.7; margin: 0 auto; }
.hero-actions { margin-top: 31px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-kol-strip { width: min(1040px,100%); margin: 42px auto 0; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(12,9,22,.62); box-shadow: 0 24px 65px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(18px); text-align: left; }
.hero-kol-title { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 11px; }.hero-kol-title a { color: var(--muted); font-family: var(--mono); font-size: .67rem; }.hero-kol-title a:hover { color: white; }
.hero-kol-list { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px; }.hero-kol { min-width: 0; padding: 10px 7px; border: 1px solid rgba(255,255,255,.065); border-radius: 13px; background: rgba(255,255,255,.025); display: flex; align-items: center; gap: 8px; transition: background .2s,border-color .2s,transform .2s; }.hero-kol:hover { transform: translateY(-2px); background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13); }.hero-kol .avatar { width: 34px; height: 34px; flex-basis: 34px; }.hero-kol > span { min-width: 0; }.hero-kol strong,.hero-kol small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.hero-kol strong { font-size: .72rem; }.hero-kol small { margin-top: 3px; color: var(--muted); font-family: var(--mono); font-size: .55rem; }
.hero-stats { margin: 66px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(720px, 100%); border-top: 1px solid var(--line); }
.hero-stat { padding: 22px 10px; }
.hero-stat strong { display: block; font-size: 1.35rem; }
.hero-stat span { display: block; margin-top: 6px; font-family: var(--mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; }
.landing-section { width: min(1200px, calc(100% - 44px)); margin: 0 auto; padding: 110px 0; border-top: 1px solid var(--line); }
.section-heading { max-width: 720px; margin-bottom: 54px; }
.section-heading h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); letter-spacing: -.06em; line-height: 1; margin: 12px 0 18px; }
.section-heading p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { min-height: 330px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(24,19,42,.86), rgba(10,8,17,.75)); position: relative; overflow: hidden; }
.step::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; right: -55px; bottom: -75px; background: radial-gradient(circle, var(--step-color), transparent 68%); opacity: .22; }
.step-number { font-family: var(--mono); color: var(--step-color); font-size: .78rem; }
.step-visual { height: 128px; display: flex; align-items: center; justify-content: center; margin: 15px 0 8px; }
.mini-pack { width: 72px; height: 94px; border-radius: 9px; border: 1px solid rgba(255,255,255,.26); background: linear-gradient(145deg, #19152a, #0c0a13); transform: rotate(-8deg); box-shadow: 24px 8px 0 -4px #261c50, 46px 18px 0 -8px #473288; position: relative; }
.mini-pack::after { content: "PACK"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .65rem; font-family: var(--mono); color: white; letter-spacing: .1em; }
.mini-bars { display: flex; align-items: end; gap: 8px; height: 90px; }
.mini-bars i { width: 21px; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--purple-2), var(--purple)); }
.mini-bars i:nth-child(1) { height: 40%; }.mini-bars i:nth-child(2) { height: 68%; }.mini-bars i:nth-child(3) { height: 100%; background: linear-gradient(var(--pink), var(--purple)); }.mini-bars i:nth-child(4) { height: 78%; background: linear-gradient(var(--yellow), #d28125); }.mini-bars i:nth-child(5) { height: 53%; background: linear-gradient(var(--cyan), #237b9c); }
.mini-trophy { font-size: 5rem; filter: drop-shadow(0 12px 22px rgba(255,209,92,.25)); }
.step h3 { margin: 0 0 10px; font-size: 1.3rem; }.step p { color: var(--muted); line-height: 1.65; margin: 0; }
.live-board { border: 1px solid var(--line); border-radius: 28px; background: rgba(13,10,23,.82); overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.24); }
.board-head { padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.live-pill { display: flex; align-items: center; gap: 8px; color: #cac6d3; font-family: var(--mono); font-size: .72rem; }.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.leader-row { padding: 20px 26px; display: grid; grid-template-columns: 42px minmax(190px,1fr) repeat(4, minmax(75px,.55fr)); gap: 16px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.055); }
.leader-row:last-child { border: 0; }
.rank { color: var(--yellow); font-family: var(--mono); }.project-cell { display: flex; align-items: center; gap: 13px; min-width: 0; }.avatar { position: relative; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 0 18px rgba(255,255,255,.18); }.avatar b { font-size: .72rem; color: white; }.avatar img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }.project-cell strong { display: block; }.project-cell small, .metric small { display: block; color: var(--muted); margin-top: 4px; font-family: var(--mono); font-size: .66rem; }.metric { font-family: var(--mono); font-size: .82rem; }.positive { color: var(--green); }.negative { color: var(--red); }.score { font-size: 1.5rem; font-weight: 700; }
.generated-avatar { color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: -.03em; background: radial-gradient(circle at 30% 20%, hsla(var(--h),100%,78%,.95), transparent 38%), linear-gradient(145deg, hsl(var(--h),78%,54%), hsl(calc(var(--h) + 68),76%,28%)); text-shadow: 0 1px 5px rgba(0,0,0,.45); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 0 20px hsla(var(--h),100%,60%,.16); }
.rarity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; perspective: 1000px; }
.market-floors .market-floor { border-top: 2px solid var(--rarity); background: linear-gradient(140deg,color-mix(in srgb,var(--rarity),transparent 92%),#100c1b); }.market-floor small { color: var(--rarity); }.market-floor strong { font-size: 28px; }.market-floor em { font-size: 12px; color: #a99dbb; font-weight: 400; font-style: normal; }.market-floor > div { display: flex; justify-content: space-between; gap: 8px; padding-top: 16px; margin-top: 16px; border-top: 1px solid #ffffff15; font-size: 12px; color: #a99dbb; }.market-floor b { font-weight: 500; color: #c9bfd8; }.market-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; }.market-section-head h2 { margin: 0 0 8px; font-size: 24px; }.market-section-head p { margin: 0; color: var(--muted); font-size: 14px; }.market-status { font: 11px var(--mono); border: 1px solid #a485ff40; color: #bea5ff; padding: 8px 12px; border-radius: 8px; }.market-toolbar { justify-content: space-between; }.market-filter-note { color: var(--muted); font-size: 12px; padding-right: 8px; }.market-collection { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding: 8px 0; }.market-item { min-width: 0; }.market-item[hidden] { display: none; }.market-item .launch-card { transform: none; min-height: 0; }.market-item .card-art { aspect-ratio: 1; }.market-item .card-name { font-size: 16px; }.market-item .card-meta { font-size: 10px; gap: 5px; }.market-item-bottom { display: flex; justify-content: space-between; padding: 13px 5px; font-size: 12px; color: #9b8dac; }.market-item-bottom strong { color: #c7b6e4; font-weight: 500; }.market-sell { display: flex; align-items: center; gap: 28px; margin-top: 30px; padding: 24px 30px; border: 1px solid #a485ff30; border-radius: 22px; background: radial-gradient(circle at 12% 50%,#784bff20,transparent 48%),#100c1bcc; }.market-sell-art { flex-shrink: 0; width: 120px; height: 120px; background-size: 240px 120px; }.market-sell h2 { font-size: 24px; margin: 8px 0; }.market-sell p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }.market-sell > .btn { margin-left: auto; flex-shrink: 0; } @media(max-width:1100px){.market-collection{grid-template-columns:repeat(2,minmax(0,1fr))}.market-sell{flex-wrap:wrap}} @media(max-width:570px){.market-status{display:none}.market-sell{padding:22px;gap:16px}.market-sell>.btn{width:100%;margin:0}.market-collection{gap:12px}.market-item .card-name{font-size:13px}.market-item .card-meta{flex-direction:column}.market-item .launch-card{padding:8px}.market-item-bottom{flex-direction:column;gap:5px}.market-floor>div{font-size:13px}}
.ca-soon { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; color: #c2b9d3; font: 12px var(--mono); letter-spacing: .08em; white-space: nowrap; }
.economy-art { display: block; width: 100px; height: 100px; object-fit: contain; margin: 0 0 20px; filter: drop-shadow(0 8px 14px #8063ff25); }.economy-deck,.economy-trophy { background-image: url('./assets/steps-3d.png'); background-repeat: no-repeat; background-size: 200px 100px; }.economy-deck { background-position: left center; }.economy-trophy { background-position: right center; clip-path: inset(0 0 0 9px); }.economy-grid article { background: radial-gradient(circle at 25% 20%,#8063ff12,transparent 60%),var(--panel); }
.tournament-art { flex: 0 0 100px; width: 100px; height: 110px; align-self: center; background-image: url('./assets/tournament-icons-3d.png'); background-size: 220px 110px; background-repeat: no-repeat; filter: drop-shadow(0 7px 13px #8063ff35); }.tournament-lightning { background-position: left center; }.tournament-hourglass { background-position: right center; }.tournament-head > div:first-child { flex: 1; min-width: 0; } @media(max-width:1100px) and (min-width:801px) { .tournament-art { flex-basis: 72px; width: 72px; height: 80px; background-size: 160px 80px; } .tournament-head { gap: 12px; } } @media(max-width:450px) { .tournament-art { flex-basis: 64px; width: 64px; height: 75px; background-size: 150px 75px; } .tournament-head { gap: 8px; } .tournament-length strong { font-size: 36px; } }
.tournament-preview { --mode-accent: #78dfff; padding: 28px; }.mode-marathon { --mode-accent: #c39aff; }.tournament-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; }.tournament-eyebrow { color: var(--mode-accent); font: 12px var(--mono); letter-spacing: .13em; }.tournament-head h3 { margin: 8px 0; font-size: 32px; }.tournament-head p { margin: 0; color: #bdb5ce; font-size: 14px; line-height: 1.5; max-width: 280px; }.tournament-length { text-align: right; flex-shrink: 0; }.tournament-length strong { display: block; font-size: 48px; line-height: 1.15; letter-spacing: -.05em; color: var(--mode-accent); }.tournament-length span { font: 11px var(--mono); color: #a79dbb; }.tournament-rules { display: flex; gap: 8px; margin: 22px 0 16px; flex-wrap: wrap; }.tournament-rules span { padding: 6px 9px; border: 1px solid #ffffff22; border-radius: 6px; font: 11px var(--mono); color: #d3c9e2; }.tournament-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border: 1px solid #ffffff18; background: #ffffff04; border-radius: 14px; }.tournament-phases > div { display: grid; gap: 7px; }.tournament-phases > div+div { border-left: 1px solid #ffffff20; padding-left: 16px; }.tournament-phases span { font: 11px var(--mono); color: var(--mode-accent); }.tournament-phases strong { font-size: 22px; }.tournament-phases small { color: #a79dbb; font-size: 12px; line-height: 1.5; }.tournament-prizes { margin: 24px 0; }.prizes-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; }.prizes-heading span { color: #a79dbb; font-size: 12px; }.prize-line { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ffffff12; }.prize-line strong { font-size: 18px; }.prize-line > span:last-child { color: #c1b6d0; font-size: 14px; }.prize-place { font: 700 13px var(--mono); }.place-1 { color: #ffdb79; }.place-2 { color: #cbd9ed; }.place-3 { color: #e1b296; }.tournament-join { width: 100%; }.tournament-note { color: #8e849f; font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.step-art { width: 180px; height: 180px; background-image: url('./assets/steps-3d.png'); background-repeat: no-repeat; background-size: 360px 180px; filter: drop-shadow(0 12px 18px #0007); }.step-deck { background-position: left center; }.step-cup { background-position: right center; clip-path: inset(0 0 0 15px); }
.step-pack-image { display: block; width: 150px; max-height: 170px; object-fit: contain; filter: drop-shadow(0 12px 18px #0008); transform: rotate(-8deg); }
.card-serial { position: absolute; top: 8px; right: 8px; z-index: 5; padding: 5px 7px; border-radius: 5px; background: #0b0914c9; border: 1px solid #ffffff40; color: white; font: 700 11px var(--mono); letter-spacing: .06em; }
.generated-pack { display: block; width: min(460px,100%); height: auto; object-fit: contain; filter: drop-shadow(0 28px 30px #0008); }
.branded-pack.pack-box { width: min(310px,82%); aspect-ratio: .7; display: flex; flex-direction: column; justify-content: space-between; padding: 35px 23px 29px; border-radius: 16px; border: 1px solid #b7a2ff80; background: linear-gradient(115deg,#ffffff16,transparent 30%,#ffffff08 52%,transparent 68%),radial-gradient(ellipse at 12% 45%,#28d8f82b,transparent 48%),radial-gradient(ellipse at 92% 60%,#e951b72b,transparent 45%),linear-gradient(155deg,#33214d,#100c20 60%,#241536); box-shadow: 0 45px 70px #0009,0 0 50px #8d5eff22,inset 3px 0 7px #ffffff28,inset -4px 0 9px #0009; }
.branded-pack::before,.branded-pack::after { left: 0; right: 0; height: 19px; background: repeating-linear-gradient(90deg,#ffffff0b 0 3px,#ffffff35 3px 4px,#0003 4px 7px); border-block: 1px solid #ffffff25; }.branded-pack::before { top: 0; }.branded-pack::after { bottom: 0; }.pack-edition,.pack-bottom-label { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 9px; color: #e1d7f5; letter-spacing: .1em; }.pack-edition span { color: #a79abc; }.pack-brand-mark { width: 100%; height: 240px; object-fit: contain; filter: drop-shadow(0 14px 20px #0006); }.pack-front-title { text-align: center; margin-top: -20px; margin-bottom: 21px; }.pack-front-title strong { font-size: 24px; letter-spacing: -.04em; display: block; }.pack-front-title > span { display: block; margin-top: 9px; font-family: var(--mono); font-size: 8px; letter-spacing: .07em; color: #c2b6d6; }.pack-bottom-label { font-size: 8px; padding-top: 12px; border-top: 1px solid #ffffff22; }
.early-dialog { width: min(540px,calc(100% - 28px)); max-height: 90vh; padding: 0; border: 1px solid rgba(185,155,255,.4); border-radius: 26px; background: #100d1b; color: white; box-shadow: 0 30px 100px #0009; }.early-dialog::backdrop { background: #030207cf; backdrop-filter: blur(14px); }.early-content { padding: 28px; display: grid; gap: 16px; }.early-top { display: flex; justify-content: space-between; }.early-top .icon-btn { margin-left: auto; }.early-content h2 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }.early-content p { margin: 0; line-height: 1.6; color: #bdb5ce; }.early-content label { display: grid; gap: 8px; font-size: 14px; }.early-content input:not([type=checkbox]) { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #ffffff24; border-radius: 10px; background: #ffffff08; color: white; font: inherit; }.early-content canvas { width: 220px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 16px; }.early-content fieldset { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; }.early-content legend { margin-bottom: 10px; font-size: 14px; }.early-content .early-note { font-size: 13px; }.early-content .early-check { display: flex; align-items: center; gap: 10px; }.early-post { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border-radius: 12px; background: #ffffff08; font: 14px/1.6 var(--mono); margin: 0; }.early-content #ea-error { color: #ff939d; font-size: 14px; }.early-content button:disabled { opacity: .4; cursor: not-allowed; }
.marquee-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 2px; color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }.marquee-heading strong { color: white; }.marquee-heading span { opacity: .65; }
.rarity-marquee { position: relative; overflow: hidden; padding: 16px 0 28px; perspective: 1000px; -webkit-mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.rarity-track { display: flex; width: max-content; animation: rarityMarquee 48s linear infinite; will-change: transform; }
.rarity-run { display: flex; gap: 18px; padding-right: 18px; }
.rarity-marquee .launch-card { flex: 0 0 278px; width: 278px; }
.rarity-marquee:hover .rarity-track,.rarity-marquee:focus-within .rarity-track { animation-play-state: paused; }
@keyframes rarityMarquee { to { transform: translateX(-50%); } }
.launch-card { --rarity: var(--cyan); min-height: 390px; padding: 12px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--rarity), transparent 50%); background: linear-gradient(145deg, color-mix(in srgb, var(--rarity), transparent 89%), #0b0912 58%); position: relative; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 22px 50px rgba(0,0,0,.34), inset 0 0 22px color-mix(in srgb, var(--rarity), transparent 90%); transition: transform .3s ease; }
.launch-card:hover { transform: rotate(0) translateY(-8px); }
.card-label { display: flex; justify-content: space-between; color: var(--rarity); font-family: var(--mono); text-transform: uppercase; font-size: .63rem; letter-spacing: .1em; padding: 4px 3px 10px; }.card-art { aspect-ratio: .92; border-radius: 13px; background: radial-gradient(circle at 70% 28%, rgba(255,255,255,.22), transparent 16%), radial-gradient(circle at 38% 52%, var(--rarity), transparent 42%), linear-gradient(145deg, #201936, #08070c); display: grid; place-items: center; overflow: hidden; position: relative; }.card-art::before { content: ""; width: 100px; height: 100px; border: 16px solid rgba(255,255,255,.86); transform: rotate(45deg); border-radius: 22px; box-shadow: 0 0 30px var(--rarity); }.card-art::after { content: attr(data-symbol); position: absolute; font-size: 1.3rem; font-weight: 900; letter-spacing: -.04em; }.card-art-photo { aspect-ratio: 5 / 7; background: #09080f; border: 1px solid rgba(255,255,255,.1); }.card-art-photo::before,.card-art-photo::after { display: none; }.card-art-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }.card-name { padding: 15px 4px 3px; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; }.card-meta { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: .68rem; padding: 4px; }.rarity-common { --rarity: var(--cyan); --tilt: -2.2deg; }.rarity-rare { --rarity: var(--purple-2); --tilt: 1.8deg; }.rarity-epic { --rarity: var(--pink); --tilt: -1.3deg; }.rarity-legendary { --rarity: var(--yellow); --tilt: 2.4deg; }
.kol-card-art { isolation: isolate; grid-template-rows: 1fr auto auto; align-items: end; padding: 22px 18px; background: radial-gradient(circle at 24% 18%, hsla(var(--h),100%,74%,.72), transparent 29%), radial-gradient(circle at 85% 78%, hsla(calc(var(--h) + 80),100%,65%,.46), transparent 42%), linear-gradient(145deg, hsl(var(--h),64%,30%), #090710 72%); }
.kol-card-art::before { display: block; content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: inherit; transform: none; box-shadow: none; background: repeating-linear-gradient(125deg, transparent 0 15px, rgba(255,255,255,.028) 15px 16px); z-index: -1; }
.kol-card-art > span { align-self: center; justify-self: center; width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 26%; color: white; font-size: clamp(2rem,4vw,4.3rem); font-weight: 950; letter-spacing: -.09em; background: linear-gradient(145deg, rgba(255,255,255,.27), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 24px 50px rgba(0,0,0,.3); backdrop-filter: blur(8px); }
.kol-card-art > small { width: 100%; color: rgba(255,255,255,.82); font-family: var(--mono); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.kol-card-art > i { color: rgba(255,255,255,.46); font-family: var(--mono); font-size: .58rem; font-style: normal; letter-spacing: .16em; margin-top: 5px; }
.pfp-card-art { background: linear-gradient(145deg, hsl(var(--h),64%,28%), #090710 72%); }.pfp-card-art > img { position: absolute; inset: 0; z-index: 1; }.pfp-fallback { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; align-items: end; padding: 22px 18px; background: radial-gradient(circle at 24% 18%, hsla(var(--h),100%,74%,.72), transparent 29%), linear-gradient(145deg,hsl(var(--h),64%,28%),#090710 72%); }.pfp-fallback span { align-self: center; justify-self: center; font-size: clamp(2rem,4vw,4rem); font-weight: 950; }.pfp-fallback small,.pfp-fallback i { color: rgba(255,255,255,.72); font-family: var(--mono); font-size: .65rem; font-style: normal; }.pfp-fallback i { opacity: .56; margin-top: 5px; letter-spacing: .14em; }
.competition-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mode-card { border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(23,18,39,.9), rgba(10,8,17,.9)); padding: 28px; min-height: 300px; position: relative; overflow: hidden; }.mode-card::after { content: ""; position: absolute; width: 240px; height: 240px; right: -80px; top: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(116,88,255,.36), transparent 65%); }.mode-top { display: flex; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }.mode-top h3 { font-size: 2rem; margin: 0 0 6px; }.mode-top p { margin: 0; color: var(--muted); }.countdown { font-family: var(--mono); font-size: 2.3rem; text-align: right; }.countdown small { display: block; font-size: .63rem; color: var(--muted); margin-top: 5px; }.reward-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 54px; position: relative; z-index: 1; }.reward-chip { padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); font-size: .7rem; }
.landing-footer { width: min(1200px, calc(100% - 44px)); margin: 40px auto 0; padding: 52px 0 60px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }.landing-footer p { color: var(--muted); max-width: 380px; line-height: 1.6; }.footer-col strong { display: block; margin-bottom: 14px; }.footer-col a { display: block; color: var(--muted); padding: 7px 0; }.footer-col a:hover { color: white; }

/* App shell */
.app-shell { min-height: 100vh; padding-left: var(--sidebar); position: relative; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); border-right: 1px solid var(--line); background: rgba(7,6,13,.94); backdrop-filter: blur(18px); z-index: 40; padding: 26px 14px 14px; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 14px 26px; }.nav { display: grid; gap: 4px; }.nav-link { min-height: 48px; display: flex; align-items: center; gap: 13px; padding: 0 14px; border-radius: 12px; color: var(--muted); font-size: .91rem; font-weight: 600; transition: background .2s,color .2s; }.nav-link:hover { color: white; background: rgba(255,255,255,.035); }.nav-link.active { color: white; background: rgba(255,255,255,.085); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }.nav-icon { width: 20px; text-align: center; color: #858092; }.nav-link.active .nav-icon { color: var(--purple-2); }.sidebar-bottom { margin-top: auto; display: grid; gap: 10px; }.ca-box { min-height: 43px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: .68rem; }.sidebar .btn { width: 100%; min-height: 47px; }
.ticker { position: fixed; z-index: 35; left: var(--sidebar); right: 0; top: 0; height: 44px; border-bottom: 1px solid var(--line); background: rgba(7,6,13,.92); backdrop-filter: blur(15px); display: flex; align-items: center; overflow: hidden; }.ticker-label { height: 100%; flex: 0 0 116px; display: flex; align-items: center; gap: 8px; padding-left: 18px; font-size: .72rem; font-weight: 700; border-right: 1px solid var(--line); }.ticker-label i { width: 7px; height: 7px; background: var(--purple-2); border-radius: 50%; box-shadow: 0 0 10px var(--purple); }.ticker-track { display: flex; width: max-content; animation: ticker 34s linear infinite; }.tick { flex: 0 0 auto; padding: 0 24px; color: #c0bbc9; font-family: var(--mono); font-size: .68rem; white-space: nowrap; }.tick strong { color: white; }.tick .up { color: var(--green); }.tick .down { color: var(--red); } @keyframes ticker { to { transform: translateX(-50%); } }
.app-content { padding: 78px 32px 42px; max-width: 1440px; margin: 0 auto; position: relative; z-index: 1; }
.page-intro { min-height: 154px; border: 1px solid var(--line); border-radius: 25px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(100deg, rgba(28,21,53,.85), rgba(15,12,25,.72)); position: relative; overflow: hidden; }.page-intro::after { content: ""; position: absolute; width: 320px; height: 210px; right: 7%; top: -80px; background: radial-gradient(circle, rgba(113,78,255,.22), transparent 66%); }.page-intro h1 { font-size: clamp(2rem,4vw,3.1rem); letter-spacing: -.055em; margin: 5px 0 8px; }.page-intro p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.55; }.page-intro > * { position: relative; z-index: 1; }
.toolbar { margin: 18px 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }.search { flex: 1; min-width: 220px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 11px; color: white; min-height: 44px; padding: 0 15px; outline: none; }.search:focus { border-color: rgba(154,123,255,.6); box-shadow: 0 0 0 3px rgba(116,88,255,.1); }.segmented { display: flex; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }.segmented button { border: 0; background: transparent; color: var(--muted); padding: 8px 13px; border-radius: 8px; cursor: pointer; }.segmented button.active { color: white; background: rgba(255,255,255,.1); }
.roster-count { display: flex; align-items: center; gap: 8px; padding: 0 11px; min-height: 44px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }.roster-count strong { font-size: 1.1rem; color: var(--cyan); }.roster-count span { color: var(--muted); font-family: var(--mono); font-size: .61rem; letter-spacing: .08em; }.data-note { display: flex; align-items: center; gap: 9px; margin: -5px 0 14px; color: var(--muted); font-size: .72rem; line-height: 1.45; }.data-note span { flex: 0 0 auto; color: var(--yellow); font-family: var(--mono); font-size: .61rem; letter-spacing: .1em; border: 1px solid rgba(255,220,109,.25); border-radius: 999px; padding: 4px 7px; background: rgba(255,220,109,.06); }
.data-panel { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: rgba(14,11,24,.82); }.table-head, .table-row { display: grid; grid-template-columns: 44px minmax(210px,1.4fr) repeat(5,minmax(90px,.7fr)); align-items: center; gap: 14px; padding: 16px 22px; }.table-head { color: var(--muted); font-family: var(--mono); font-size: .67rem; border-bottom: 1px solid var(--line); }.table-row { border-bottom: 1px solid rgba(255,255,255,.055); }.table-row:last-child { border: 0; }.table-row:hover { background: rgba(255,255,255,.025); }.table-score { font-weight: 800; font-size: 1.2rem; }.trend { height: 32px; width: 74px; }
.card-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }.project-tile { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 18px; }.project-tile .card-art { margin-bottom: 14px; }.project-tile .project-cell { align-items: flex-start; }.project-tile .project-cell > span:not(.avatar) { min-width: 0; }.project-tile h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; }.project-tile .score { font-size: clamp(1.05rem,2vw,1.5rem); }.tile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }.tile-stat { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }.tile-stat small { display: block; color: var(--muted); font-family: var(--mono); font-size: .62rem; }.tile-stat strong { display: block; margin-top: 5px; }
.pack-stage { min-height: 510px; margin-top: 18px; border: 1px solid var(--line); border-radius: 25px; background: radial-gradient(circle at 35% 45%, rgba(99,72,222,.2), transparent 30%), rgba(9,7,15,.84); display: grid; grid-template-columns: 1.35fr .8fr; align-items: center; gap: 35px; padding: clamp(24px,5vw,68px); overflow: hidden; }.pack-product { min-height: 380px; display: grid; place-items: center; position: relative; }.pack-box { width: min(280px,70%); aspect-ratio: .78; border-radius: 24px; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 35%), radial-gradient(circle at 50% 40%, rgba(142,100,255,.55), transparent 35%), #100c1d; box-shadow: 0 50px 90px rgba(0,0,0,.55), inset 0 0 55px rgba(116,88,255,.12); transform: rotate(-5deg); display: grid; place-items: center; position: relative; }.pack-box::before,.pack-box::after { content: ""; position: absolute; left: 13px; right: 13px; height: 11px; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.3) 7px 9px); }.pack-box::before { top: 11px; }.pack-box::after { bottom: 11px; }.pack-box strong { font-size: 3.2rem; letter-spacing: -.08em; }.shop-panel { border: 1px solid var(--line); border-radius: 22px; padding: 27px; background: rgba(20,16,34,.9); }.shop-panel small { color: var(--muted); }.price { font-size: 2.8rem; font-weight: 800; margin: 9px 0 4px; letter-spacing: -.05em; }.supply { font-family: var(--mono); font-size: .75rem; color: var(--muted); margin-bottom: 24px; }.shop-panel .btn { width: 100%; }
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }.pill { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--muted); border-radius: 999px; padding: 9px 13px; cursor: pointer; }.pill.active { background: white; color: #111; }.empty-state { min-height: 320px; display: grid; place-items: center; text-align: center; padding: 30px; }.empty-state .empty-icon { width: 72px; height: 72px; border-radius: 19px; background: rgba(116,88,255,.12); display: grid; place-items: center; color: var(--purple-2); font-size: 1.8rem; margin: 0 auto 17px; }.empty-state h3 { margin: 0 0 8px; }.empty-state p { color: var(--muted); margin: 0 auto; max-width: 440px; line-height: 1.6; }
.competition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }.competition-card { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: 24px; }.competition-card header { display: flex; justify-content: space-between; align-items: flex-start; }.competition-card h2 { margin: 0 0 5px; font-size: 1.6rem; }.competition-card header p { margin: 0; color: var(--muted); font-size: .86rem; }.status-tag { color: var(--purple-2); font-family: var(--mono); font-size: .68rem; padding: 7px 9px; border-radius: 999px; background: rgba(116,88,255,.12); }.prizes { margin: 24px 0; }.prizes > small { display: block; color: var(--muted); font-family: var(--mono); margin-bottom: 10px; }.competition-card .btn { width: 100%; }.epoch-note { margin-top: 16px; display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: .67rem; }
.docs-layout { display: grid; grid-template-columns: 230px minmax(0,760px); gap: 45px; margin-top: 30px; }.docs-menu { position: sticky; top: 72px; align-self: start; display: grid; gap: 6px; }.docs-menu a { padding: 10px 12px; color: var(--muted); border-left: 1px solid var(--line); }.docs-menu a:hover { color: white; border-color: var(--purple-2); }.docs-copy section { padding-bottom: 50px; }.docs-copy h2 { font-size: 2rem; margin: 0 0 16px; }.docs-copy p,.docs-copy li { color: #aaa5b4; line-height: 1.75; }.formula { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); font-family: var(--mono); color: #ded9e7; font-size: .78rem; overflow-x: auto; }
.board-cta { padding: 18px 26px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.rarity-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 20px; }.rarity-stats span { padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-family: var(--mono); font-size: .72rem; }.rarity-stats strong { display: block; color: white; margin-bottom: 5px; }
.craft-line { margin-top: 14px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: .74rem; color: var(--muted); }.craft-line strong { color: var(--yellow); text-transform: uppercase; letter-spacing: .08em; }
.economy-grid,.floor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.economy-grid article,.floor-grid span { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }.economy-grid small,.floor-grid small { color: var(--muted); font-family: var(--mono); }.economy-grid strong,.floor-grid strong { display: block; font-size: 1.35rem; margin-top: 10px; }.economy-grid p { color: var(--muted); line-height: 1.55; margin: 8px 0 0; }.floor-grid { margin: 18px 0; }.floor-grid span { padding: 17px; }.floor-grid strong { font-size: 1rem; }
.competition-help { color: var(--muted); line-height: 1.5; font-size: .84rem; }
.protocol-footer { margin-top: 40px; padding: 22px 4px 4px; border-top: 1px solid var(--line); display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; }.protocol-footer strong { color: white; }.legal-note { font-size: .72rem; }
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(3,2,7,.82); backdrop-filter: blur(16px); display: grid; place-items: center; padding: 22px; }.modal[hidden] { display: none; }.modal-card { width: min(800px,100%); border: 1px solid var(--line-strong); border-radius: 26px; background: #100d1b; padding: 28px; box-shadow: 0 40px 100px rgba(0,0,0,.7); }.modal-head { display: flex; justify-content: space-between; align-items: center; }.modal-head h2 { margin: 0; }.reveal-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin: 28px 0; }.reveal-card { aspect-ratio: .7; border-radius: 11px; border: 1px solid var(--line-strong); background-color: #161125; background-position: center; background-size: cover; background-repeat: no-repeat; display: grid; place-items: end center; padding: 12px 6px; font-size: .67rem; font-weight: 700; text-align: center; animation: reveal .55s both; animation-delay: calc(var(--i) * .08s); transform-origin: bottom; }.reveal-card:nth-child(2){--c:#5ee7ff}.reveal-card:nth-child(3){--c:#ff5dc8}.reveal-card:nth-child(4){--c:#ffd15c}.reveal-card:nth-child(5){--c:#7458ff}@keyframes reveal{from{opacity:0;transform:translateY(24px) rotateY(90deg)}to{opacity:1;transform:none}}
.toast { position: fixed; z-index: 100; bottom: 24px; right: 24px; background: #fff; color: #111; padding: 14px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 18px 50px rgba(0,0,0,.42); animation: toastin .3s both; }.toast[hidden]{display:none}@keyframes toastin{from{transform:translateY(14px);opacity:0}}

@media (max-width: 1280px) { .card-board { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 1050px) {
  .rarity-grid, .card-board, .rarity-stats, .economy-grid, .floor-grid { grid-template-columns: repeat(2,1fr); }
  .table-head, .table-row { grid-template-columns: 40px minmax(190px,1fr) repeat(3,minmax(80px,.6fr)); }.table-head > :nth-child(4),.table-head > :nth-child(6),.table-row > :nth-child(4),.table-row > :nth-child(6){display:none}
  .leader-row { grid-template-columns: 38px 1fr repeat(2,minmax(75px,.4fr)); }.leader-row > :nth-child(4),.leader-row > :nth-child(5){display:none}
}
@media (max-width: 800px) {
  :root { --sidebar: 0px; }
  .liquid-shell { display: none; }
  .liquid-hero .liquid-card-2,.liquid-hero .liquid-card-4,.liquid-hero .liquid-card-5,.liquid-hero .liquid-card-6 { display: none; }
  .liquid-hero .liquid-card-1 { left: -5%; top: 19%; width: 115px; opacity: .28; filter: blur(1px); }
  .liquid-hero .liquid-card-3 { right: -7%; top: 24%; width: 135px; opacity: .3; filter: blur(1px); }
  .sidebar { inset: auto 10px 10px 10px; width: auto; height: 68px; flex-direction: row; padding: 8px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
  .sidebar .brand,.sidebar-bottom,.nav-link span:last-child { display: none; }.nav { width: 100%; grid-template-columns: repeat(7,1fr); }.nav-link { padding: 0; justify-content: center; min-height: 50px; }.nav-icon { font-size: 1.05rem; }.ticker { left: 0; }.app-content { padding: 68px 16px 98px; }.page-intro { padding: 22px; min-height: 140px; }.page-intro .btn { display: none; }
  .steps,.competition-preview,.competition-grid,.pack-stage { grid-template-columns: 1fr; }.pack-stage { padding: 28px 18px; }.pack-product { min-height: 330px; }
  .hero-kol-list { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }.hero-kol-list::-webkit-scrollbar { display:none; }.hero-kol { flex: 0 0 126px; }
  .landing-footer { grid-template-columns: 1fr 1fr; }.landing-footer > :first-child { grid-column: 1/-1; }
  .docs-layout { grid-template-columns: 1fr; }.docs-menu { position: static; display: flex; flex-wrap: wrap; }.docs-menu a { border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 570px) {
  .landing-header { height: 68px; padding: 0 16px; }.landing-header .brand-token,.landing-header .icon-btn { display:none; }.landing-header .btn { min-height: 42px; padding: 0 15px; }
  .hero { padding-inline: 18px; }.hero-logo { width: min(92vw, 360px); margin-top: -28px; margin-bottom: -34px; }.hero-kol-strip { margin-top: 30px; }.hero-stats { grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 16px; margin-top: 44px; }.hero-stat + .hero-stat { border-top: 1px solid var(--line); }
  .landing-section { width: min(100% - 28px,1200px); padding: 80px 0; }.rarity-grid,.card-board,.rarity-stats,.economy-grid,.floor-grid { grid-template-columns: 1fr; }.launch-card { max-width: 340px; width: 100%; margin-inline: auto; }.rarity-marquee .launch-card { flex-basis: 236px; width: 236px; min-height: 344px; margin-inline: 0; }.rarity-run { gap: 13px; padding-right: 13px; }.rarity-track { animation-duration: 42s; }
  .leader-row { grid-template-columns: 28px 1fr 60px; padding: 16px 13px; gap: 8px; }.leader-row > :nth-child(3),.leader-row > :nth-child(4),.leader-row > :nth-child(5){display:none}.board-head{padding:18px 14px}
  .landing-footer { width: calc(100% - 28px); grid-template-columns: 1fr; }.landing-footer > :first-child { grid-column:auto; }
  .table-head,.table-row { grid-template-columns: 28px 1fr 58px; padding: 14px 12px; gap:8px}.table-head > :nth-child(n+3):not(:last-child),.table-row > :nth-child(n+3):not(:last-child){display:none}
  .ticker-label { flex-basis: 95px; }.tick { padding: 0 13px; }.reveal-row { grid-template-columns: repeat(3,1fr); }.reveal-card:nth-child(n+4){display:none}.page-intro h1{font-size:2rem}.competition-card{padding:19px}.mode-top{display:block}.countdown{text-align:left;margin-top:20px}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration:.01ms!important; } }