/* Homepage styles, scoped to .home (generated by tools/scope-home.mjs from the approved design). */
/* =========================================================
   HERO
   ========================================================= */
.home .hero { min-height: clamp(660px, 94svh, 980px); overflow: hidden; background: var(--ink-0); }
.home .hero > .v { position: absolute; inset: 0; }
.home .hero-copy { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 90px; }
.home .hero-status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: var(--moon-dim); }
.home .live-dot { display: inline-flex; align-items: center; gap: 8px; color: #86efac; }
.home .live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: h-ping 2s infinite; }
@keyframes h-ping { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } }
.home .hero-title { font-size: clamp(3.6rem, 8.4vw, 8.6rem); margin-top: 22px; }
.home .hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.home .hero-title .outline { color: transparent; -webkit-text-stroke: 2px var(--moon); }
.home .hero-title .gold { color: var(--gold); }
.home .hero-title .gold .ch { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #e8962a); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .02em; }
.home .split .ch { display: inline-block; }
.home .js .split .ch { transform: translateY(105%); }
.is-ready .home .v:not([hidden]) .split .ch { animation: h-chUp 1s var(--ease-out) both; animation-delay: calc(var(--i) * 32ms + 250ms); }
@keyframes h-chUp { from { transform: translateY(105%) rotate(6deg); } to { transform: none; } }
.home .hero-sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--moon-dim); max-width: 48ch; margin-top: 22px; }
.home .hero-sub b { color: var(--moon); font-weight: 700; }
.home .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.home .hero-fine { margin-top: 18px; color: var(--moon-mute); }
.home .js .fade-up { opacity: 0; transform: translateY(20px); }
.is-ready .home .v:not([hidden]) .fade-up { animation: h-fadeUp 1s var(--ease-out) both; animation-delay: var(--d, .8s); }
@keyframes h-fadeUp { to { opacity: 1; transform: none; } }

.home .ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; height: 46px; border-top: 1px solid var(--line); background: rgba(var(--ink-rgb),.55); backdrop-filter: blur(10px); overflow: hidden; display: flex; align-items: center; }
.home .ticker-track { display: flex; gap: 42px; white-space: nowrap; animation: h-marquee 60s linear infinite; padding-left: 42px; }
.home .ticker-track span { display: inline-flex; align-items: center; gap: 10px; color: var(--moon-dim); }
.home .ticker-track span i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 10px var(--c); }
.home .ticker-track b { color: var(--moon); font-weight: 700; }
@keyframes h-marquee { to { transform: translateX(-50%); } }

/* Hero A: Moonrise */
.home .hA-bg { position: absolute; inset: -4%; background: url(/img/scene/lunara_grove.webp) center 70% / cover no-repeat; filter: blur(3px) saturate(1.1) brightness(.55); opacity: .7; transform: scale(1.06); }
.home .hA-sky { position: absolute; inset: 0; background: radial-gradient(120% 80% at 70% 0%, rgba(var(--accent-rgb), .45), transparent 60%), linear-gradient(180deg, rgba(var(--ink-rgb),.2) 0%, rgba(var(--ink-rgb),.1) 45%, rgba(var(--ink-rgb),.95) 100%); }
.home .stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.home .hA-moonwrap { position: absolute; right: 7%; top: 7%; width: min(42vw, 580px); aspect-ratio: 1; }
.home .moon { position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, rgba(var(--crater-rgb), .38) 0 6%, transparent 7%),
    radial-gradient(circle at 62% 58%, rgba(var(--crater-rgb), .33) 0 9%, transparent 10%),
    radial-gradient(circle at 44% 70%, rgba(var(--crater-rgb), .28) 0 4%, transparent 5%),
    radial-gradient(circle at 70% 30%, rgba(var(--crater-rgb), .25) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 22% 60%, rgba(var(--crater-rgb), .22) 0 5%, transparent 6%),
    radial-gradient(circle at 36% 30%, var(--m1) 0%, var(--m2) 32%, var(--m3) 58%, var(--m4) 80%, var(--m5) 100%);
  box-shadow: 0 0 60px 10px rgba(var(--glow-rgb), .35), 0 0 220px 70px rgba(var(--accent-rgb), .28), inset -30px -40px 80px rgba(var(--shade-rgb), .55);
}
.home .moon-halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow-rgb), .22) 0%, transparent 60%); animation: h-breathe 6s ease-in-out infinite; }
@keyframes h-breathe { 50% { transform: scale(1.06); opacity: .75; } }
.is-ready .home .hA .hA-moonwrap .moon-rise { animation: h-moonRise 2.6s var(--ease-out) both .1s; }
.home .moon-rise { position: absolute; inset: 0; }
@keyframes h-moonRise { from { transform: translateY(45%) scale(.9); filter: brightness(.3); } to { transform: none; filter: none; } }
.home .lineup { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.home .lu { position: absolute; will-change: transform; }
.home .lu img { width: 100%; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(var(--accent-rgb),.25)); }
.home .js .lu .rise { opacity: 0; }
.is-ready .home .hA .lu .rise { animation: h-luRise 1.6s var(--ease-out) both; animation-delay: var(--d); }
.home .lu .float { animation: h-float 6s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes h-luRise { from { opacity: 0; transform: translateY(80px) scale(.94); filter: brightness(0) blur(6px); } 60% { filter: brightness(1.4); } to { opacity: 1; transform: none; filter: none; } }
@keyframes h-float { 50% { transform: translateY(-14px); } }
.home .lu-c { width: min(29vw, 420px); right: 19%; bottom: 6%; }
.home .lu-l1 { width: min(20vw, 290px); right: 38%; bottom: 4%; }
.home .lu-r1 { width: min(22vw, 320px); right: 2%; bottom: 7%; }
.home .lu-l2 { width: min(13vw, 190px); right: 34%; bottom: 27%; opacity: .85; }
.home .lu-fly1 { width: min(19vw, 270px); right: 5%; top: 14%; }
.home .lu-fly2 { width: min(12vw, 170px); right: 33%; top: 11%; }
.home .lu-fly1 .float { animation-duration: 7s; }
.home .hA-fog { position: absolute; inset: auto 0 0 0; height: 45%; z-index: 6; background: linear-gradient(0deg, var(--ink-0) 12%, rgba(var(--ink-rgb),.7) 40%, transparent); pointer-events: none; }
.home .hA-mist { position: absolute; bottom: 8%; left: -10%; width: 120%; height: 160px; z-index: 7; background: radial-gradient(50% 50% at 50% 50%, rgba(170, 160, 255, .16), transparent 70%); filter: blur(20px); animation: h-mist 18s ease-in-out infinite alternate; pointer-events: none; }
@keyframes h-mist { to { transform: translateX(8%); } }
.home .hA .hero-copy > * { max-width: 620px; }
.home .hA .hero-copy > .hero-title { max-width: 760px; }
.home .hA .hero-copy::before { content: ''; position: absolute; z-index: -1; left: -30%; top: 10%; bottom: 0; right: 30%; background: radial-gradient(60% 55% at 40% 55%, rgba(var(--ink-rgb),.8), transparent 72%); max-width: none; }

/* Hero B: Summoning */
.home .hB { background: radial-gradient(90% 70% at 70% 50%, color-mix(in srgb, var(--el, var(--violet)) 26%, transparent), transparent 65%), var(--ink-0); transition: background 1s; }
.home .hB-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 70% 50%, #000 20%, transparent 75%); opacity: .5; }
.home .hB-layout { position: relative; z-index: 3; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center; }
.home .hB .hero-copy { padding-bottom: 60px; }
.home .portal { position: relative; aspect-ratio: 1; width: min(100%, 600px, calc(100svh - var(--nav-h) - 140px)); justify-self: center; margin-top: calc(var(--nav-h) - 20px); }
.home .portal-ring { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--el, var(--violet)) 60%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--el, var(--violet)) 40%, transparent), inset 0 0 80px color-mix(in srgb, var(--el, var(--violet)) 30%, transparent); }
.home .portal-ring.r2 { inset: 14%; border-style: dashed; opacity: .6; animation: h-spin 40s linear infinite; }
.home .portal-ring.r3 { inset: 0; border: 0; box-shadow: none; background: conic-gradient(from 0deg, transparent 0 20%, color-mix(in srgb, var(--el, var(--violet)) 70%, white) 25%, transparent 30% 70%, color-mix(in srgb, var(--el, var(--violet)) 70%, white) 75%, transparent 80%); -webkit-mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 67.5%, transparent 68%); mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 67.5%, transparent 68%); animation: h-spin 8s linear infinite; }
.home .portal-runes { position: absolute; inset: 2%; animation: h-spin 60s linear infinite reverse; opacity: .7; }
.home .portal-runes text { font-family: var(--f-hud); font-size: 9px; letter-spacing: 4px; fill: color-mix(in srgb, var(--el, var(--violet)) 70%, white); }
@keyframes h-spin { to { transform: rotate(360deg); } }
.home .portal-floor { position: absolute; left: 12%; right: 12%; bottom: 8%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--el, var(--violet)) 55%, transparent), transparent); filter: blur(6px); }
.home .portal-canvas { position: absolute; inset: -10%; width: 120%; height: 120%; pointer-events: none; }
.home .summon { position: absolute; inset: 12% 12% 10%; display: grid; place-items: center; }
.home .summon img { position: absolute; max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px color-mix(in srgb, var(--el, var(--violet)) 50%, transparent)); }
.home .summon img.out { animation: h-sOut .55s var(--ease-io) forwards; }
.home .summon img.in { animation: h-sIn 1.1s var(--ease-out) both; }
@keyframes h-sOut { to { opacity: 0; transform: scale(.7) translateY(30px); filter: brightness(3) blur(10px); } }
@keyframes h-sIn { 0% { opacity: 0; transform: scale(1.25); filter: brightness(6) blur(14px); } 45% { opacity: 1; filter: brightness(2.2) blur(0); } 100% { transform: none; } }
.home .hud-card { position: absolute; right: 0; bottom: 6%; width: min(290px, 60%); padding: 16px 18px; background: rgba(var(--ink1-rgb),.72); backdrop-filter: blur(14px); border: 1px solid var(--line-strong); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.home .hud-card .no { color: var(--moon-mute); }
.home .hud-card h3 { font-family: var(--f-display); font-weight: 900; font-size: 2rem; text-transform: uppercase; line-height: 1; margin: 4px 0 10px; }
.home .hud-card .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.home .bars { display: grid; gap: 6px; margin-top: 12px; }
.home .bar { display: grid; grid-template-columns: 38px 1fr 32px; align-items: center; gap: 8px; font-family: var(--f-hud); font-size: .66rem; color: var(--moon-dim); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.home .bar i { height: 4px; background: var(--line); position: relative; overflow: hidden; }
.home .bar i::after { content: ''; position: absolute; inset: 0; width: var(--w, 0%); background: linear-gradient(90deg, color-mix(in srgb, var(--el, var(--violet)) 70%, white), var(--el, var(--violet))); transition: width .9s var(--ease-out); }
.home .bar b { text-align: right; color: var(--moon); }
.home .summon-picks { position: absolute; left: 0; bottom: 6%; display: flex; flex-direction: column; gap: 8px; }
.home .summon-picks button { width: 52px; height: 52px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--ink1-rgb),.6); transition: transform .3s var(--ease-out), border-color .3s; }
.home .summon-picks button img { width: 100%; height: 100%; object-fit: contain; }
.home .summon-picks button[aria-pressed="true"] { border-color: var(--el, var(--violet)); transform: translateX(6px); box-shadow: 0 0 20px color-mix(in srgb, var(--el, var(--violet)) 50%, transparent); }
.home .summon-timer { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 160px; height: 2px; background: var(--line); }
.home .summon-timer i { display: block; height: 100%; width: 0; background: var(--el, var(--violet)); }

/* Hero C: Infinite Lunadex */
.home .hC { background: var(--ink-0); }
.home .wall { position: absolute; inset: -25% -10%; display: flex; gap: 18px; justify-content: center; transform: perspective(1800px) rotateX(12deg) rotateZ(-8deg) scale(1.12); transform-origin: 50% 40%; }
.home .wall-col { display: flex; flex-direction: column; gap: 18px; width: 200px; flex: none; animation: h-colUp var(--t, 60s) linear infinite; }
.home .wall-col.down { animation-direction: reverse; }
@keyframes h-colUp { to { transform: translateY(-50%); } }
.home .wcard { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, var(--ink-2)), var(--ink-1) 70%); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); overflow: hidden; }
.home .wcard img { position: absolute; left: 6%; top: 5%; width: 88%; height: 76%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.home .wcard span { position: absolute; left: 10px; right: 10px; bottom: 10px; font-family: var(--f-hud); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--moon-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .wcard span b { color: var(--c); }
.home .hC-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(42% 48% at 50% 54%, rgba(var(--ink-rgb),.9) 0%, rgba(var(--ink-rgb),.62) 55%, rgba(var(--ink-rgb),0) 100%), linear-gradient(180deg, rgba(var(--ink-rgb),.75), transparent 22%, transparent 75%, var(--ink-0)); }
.home .hC .hero-copy { align-items: center; text-align: center; }
.home .hC .hero-title { font-size: clamp(4.4rem, 15vw, 13rem); }
.home .hC .hero-sub { margin-inline: auto; }
.home .hC .hero-cta, .home .hC .hero-status { justify-content: center; }
.home .paused .wall-col, .home .paused .ticker-track, .home .paused .portal-ring, .home .paused .portal-runes { animation-play-state: paused; }

@media (max-width: 900px) {
  .home .hero { min-height: auto; }
  .home .hero > .v { position: relative; inset: auto; }
  .home .hero > .v[hidden] { display: none; }
  .home .hA { min-height: 0; }
  .home .hA .hero-copy { justify-content: flex-start; padding-top: calc(var(--nav-h) + 120px); padding-bottom: 470px; }
  .home .hA-moonwrap { width: 78vw; right: -10vw; top: auto; bottom: 200px; }
  .home .lu-c { width: 56vw; right: 22vw; bottom: 64px; }
  .home .lu-l1 { width: 40vw; right: 62vw; bottom: 60px; }
  .home .lu-r1 { width: 40vw; right: -6vw; bottom: 70px; }
  .home .lu-l2 { display: none; }
  .home .lu-fly1 { width: 34vw; right: 4vw; top: auto; bottom: 360px; }
  .home .lu-fly2 { display: none; }
  .home .hA-fog { height: 18%; }
  .home .hero .rv-tabs { top: calc(var(--nav-h) + 8px); bottom: auto; left: var(--gutter); right: auto; }
  .home .hB-layout { padding-top: calc(var(--nav-h) + 120px); }
  .home .hC .hero-copy { padding-top: calc(var(--nav-h) + 140px); }
  .home .hB-layout { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 60px); padding-bottom: 80px; }
  .home .hB .hero-copy { padding-top: 0; padding-bottom: 0; }
  .home .portal { margin-top: 0; width: min(100%, 520px); }
  .home .hC { min-height: 820px; }
  .home .hC .hero-copy { padding-top: calc(var(--nav-h) + 110px); }
  .home .wall-col { width: 120px; }
}

/* =========================================================
   MANIFESTO
   ========================================================= */
.home .mani { background: linear-gradient(180deg, var(--ink-0), var(--ink-1)); }
.home .mani-text { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 5.6vw, 5.4rem); line-height: 1.02; letter-spacing: .005em; max-width: 25ch; }
.home .mani-text .w { color: rgba(var(--moon-rgb), .14); transition: color .4s; }
.home .mani-text .w.on { color: var(--moon); }
.home .mani-text .w.hl.on { color: var(--gold); }
.home .mani-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 42px; color: var(--moon-mute); }

/* =========================================================
   GAMEPLAY
   ========================================================= */
.home .play { background: var(--ink-1); }
.home .play-A { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.home .steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 4px; counter-reset: s; }
.home .steps li { position: relative; padding: 14px 0 14px 56px; border-top: 1px solid var(--line); color: var(--moon-dim); transition: color .4s; }
.home .steps li::before { counter-increment: s; content: '0' counter(s); position: absolute; left: 0; top: 14px; font-family: var(--f-hud); font-weight: 700; color: var(--moon-mute); transition: color .4s; }
.home .steps li b { display: block; color: var(--moon); font-size: 1.05rem; }
.home .steps li.on::before { color: var(--gold); }
.home .steps li.on { color: var(--moon); }
.home .odds { margin-top: 28px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.home .odds-h { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; background: rgba(var(--moon-rgb),.04); color: var(--moon-dim); }
.home .odds table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .88rem; }
.home .odds td { padding: 7px 14px; border-top: 1px solid var(--line); }
.home .odds td:nth-child(2), .home .odds td:nth-child(3) { text-align: right; color: var(--moon-dim); font-family: var(--f-hud); font-size: .78rem; }
.home .odds tr.hit td { background: color-mix(in srgb, var(--c) 16%, transparent); }
.home .odds tr.hit td:first-child .chip { box-shadow: inset 0 0 0 1px var(--c), 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }

.home .dc { display: grid; grid-template-columns: 64px minmax(0, 1fr); height: 640px; border-radius: 14px; overflow: hidden; background: #1e1f24; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 120px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--accent-rgb),.15); font-family: var(--f-body); }
.home .dc-rail { background: #16171b; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; }
.home .dc-rail i { width: 44px; height: 44px; border-radius: 50%; background: #2b2d33; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #b5bac1; font-size: .9rem; }
.home .dc-rail i.on { border-radius: 14px; background: var(--violet); color: #fff; overflow: hidden; }
.home .dc-rail i.on img { width: 100%; height: 100%; object-fit: cover; }
.home .dc-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.home .dc-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.35); color: #f2f3f5; font-weight: 700; min-width: 0; }
.home .dc-top small { color: #949ba4; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.home .dc-top .count { margin-left: auto; font-family: var(--f-hud); font-size: .7rem; color: #dbdee1; background: #2b2d33; padding: 4px 8px; border-radius: 4px; white-space: nowrap; letter-spacing: .06em; }
.home .dc-log { overflow-y: auto; padding: 12px 0 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
.home .msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 5px 16px; animation: h-msgIn .45s var(--ease-out) both; }
.home .msg:hover { background: rgba(0,0,0,.08); }
@keyframes h-msgIn { from { opacity: 0; transform: translateY(10px); } }
.home .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; overflow: hidden; }
.home .av img { width: 100%; height: 100%; object-fit: cover; }
.home .who { font-weight: 700; color: #f2f3f5; font-size: .95rem; display: flex; align-items: center; gap: 6px; }
.home .who .tag { font-size: .6rem; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 3px; font-weight: 700; letter-spacing: .04em; }
.home .who time { font-weight: 500; font-size: .72rem; color: #949ba4; }
.home .txt { color: #dbdee1; font-size: .95rem; line-height: 1.4; }
.home .txt code { background: #2b2d33; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.home .emb { position: relative; margin-top: 6px; max-width: 420px; display: grid; grid-template-columns: 4px minmax(0, 1fr); border-radius: 6px; overflow: hidden; background: #2b2d31; }
.home .emb-bar { background: var(--c, var(--violet)); }
.home .emb-body { padding: 12px 14px 14px; min-width: 0; }
.home .emb-title { font-weight: 800; color: #fff; }
.home .emb-sub { font-size: .84rem; color: #b5bac1; margin-top: 2px; }
.home .emb-sub b { color: var(--c); text-transform: uppercase; letter-spacing: .06em; }
.home .emb-art { position: relative; margin-top: 10px; aspect-ratio: 4 / 3; border-radius: 6px; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%), #1e1f22; display: grid; place-items: center; overflow: hidden; }
.home .emb-art img { width: 78%; height: 88%; object-fit: contain; transition: transform .5s var(--ease-io), opacity .4s, filter .4s; }
.home .emb-art.sucked img { transform: scale(0) translateY(40%); opacity: 0; filter: brightness(4); }
.home .emb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.home .dbtn { border: 0; border-radius: 4px; padding: 8px 14px; font-weight: 700; font-size: .85rem; background: #4e5058; color: #fff; transition: background .2s, transform .2s; }
.home .dbtn:hover { background: #6d6f78; }
.home .dbtn:active { transform: scale(.96); }
.home .dbtn.green { background: #248046; } .home .dbtn.green:hover { background: #1a6334; }
.home .dbtn.blurple { background: #5865f2; } .home .dbtn.blurple:hover { background: #4752c4; }
.home .dbtn[disabled] { opacity: .45; cursor: not-allowed; }
.home .dbtn.pulse { animation: h-pulse 1.2s ease-in-out infinite; }
@keyframes h-pulse { 50% { box-shadow: 0 0 0 6px rgba(36,128,70,.35); } }
.home .orb { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--o2) 25%, var(--o3) 60%, var(--o4) 100%); box-shadow: 0 0 20px rgba(var(--glow-rgb),.8), inset 0 -4px 8px rgba(0,0,0,.3); opacity: 0; }
.home .orb::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(30,20,80,.55); }
.home .orb.throw { animation: h-throw .7s cubic-bezier(.3,.1,.3,1) forwards; }
.home .orb.shake { opacity: 1; animation: h-oshake .5s ease-in-out 3; }
.home .orb.burst { opacity: 1; animation: h-oburst .45s ease-out forwards; }
.home .orb.caught { opacity: 1; animation: h-ocaught .9s var(--ease-back) forwards; }
@keyframes h-throw { 0% { opacity: 1; transform: translate(-160px, 140px) scale(.6) rotate(-200deg); } 100% { opacity: 1; transform: none; } }
@keyframes h-oshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 75% { transform: rotate(22deg); } }
@keyframes h-oburst { to { transform: scale(2.2); opacity: 0; filter: brightness(3); } }
@keyframes h-ocaught { 0% { transform: scale(1); } 30% { transform: scale(1.25); box-shadow: 0 0 60px 20px rgba(255,201,92,.8); } 100% { transform: scale(1); box-shadow: 0 0 30px 6px rgba(255,201,92,.55); } }
.home .sparks { position: absolute; inset: 0; pointer-events: none; }
.home .sparks i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: h-spark .8s ease-out forwards; }
@keyframes h-spark { from { transform: translate(-50%,-50%); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); opacity: 0; } }
.home .result { font-weight: 700; }
.home .result.ok { color: #86efac; } .home .result.no { color: #fca5a5; }
.home .dc-input { display: flex; gap: 8px; margin: 0 16px 16px; padding: 6px 6px 6px 14px; background: #383a40; border-radius: 8px; }
.home .dc-input input { flex: 1; min-width: 0; background: transparent; border: 0; color: #dbdee1; font: inherit; font-size: .95rem; outline: none; }
.home .dc-input input::placeholder { color: #80848e; }
.home .dc-input button { border: 0; background: #5865f2; color: #fff; border-radius: 6px; padding: 8px 12px; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.home .typing { color: #949ba4; font-size: .8rem; padding: 0 16px 6px; height: 20px; }

/* Gameplay B: pinned story */
.home .play-B { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); }
.home .story-stage { position: sticky; top: calc(var(--nav-h) + 40px); height: min(620px, calc(100svh - var(--nav-h) - 80px)); border-radius: 18px; overflow: hidden; background: radial-gradient(80% 70% at 50% 60%, color-mix(in srgb, var(--sc, var(--violet)) 28%, transparent), transparent 70%), var(--ink-2); border: 1px solid var(--line); transition: background .8s; }
.home .scard { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); pointer-events: none; }
.home .scard.on { opacity: 1; transform: none; }
.home .scard .big { width: 62%; max-height: 72%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.home .s-label { position: absolute; left: 22px; top: 20px; color: var(--moon-dim); }
.home .s-bubble { position: absolute; padding: 10px 14px; border-radius: 12px; background: #2b2d31; color: #dbdee1; font-size: .86rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.home .s-bubble b { color: #fff; }
.home .s-orb { position: absolute; left: 50%; bottom: 16%; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--o2) 25%, var(--o3) 60%, var(--o4) 100%); box-shadow: 0 0 50px 10px rgba(255,201,92,.5); animation: h-float 3s ease-in-out infinite; }
.home .s-got { position: absolute; top: 18%; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4rem); text-transform: uppercase; color: var(--gold); text-shadow: 0 0 30px rgba(255,201,92,.6); }
.home .s-vs { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 30px; gap: 10px; }
.home .s-vs .boss { width: 100%; filter: drop-shadow(0 0 40px rgba(251,146,60,.5)); }
.home .s-team { display: grid; gap: 10px; }
.home .s-team div { display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(var(--ink1-rgb),.6); border: 1px solid var(--line); border-radius: 8px; }
.home .s-team img { width: 44px; height: 44px; object-fit: contain; }
.home .s-team span { flex: 1; font-size: .78rem; }
.home .hp { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.home .hp i { display: block; height: 100%; background: #4ade80; width: var(--w); }
.home .s-new { width: min(300px, 70%); aspect-ratio: 3 / 4.2; border-radius: 16px; padding: 14px; background: linear-gradient(145deg, #f472b6, #a78bfa, #60a5fa, #fbbf24); position: relative; box-shadow: 0 0 80px rgba(244,114,182,.5); }
.home .s-new-in { position: absolute; inset: 6px; border-radius: 12px; background: var(--ink-1); display: grid; grid-template-rows: auto 1fr auto; padding: 14px; text-align: center; }
.home .s-new-in img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.home .s-new-in .nm { font-family: var(--f-display); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; }
.home .story-steps { display: grid; gap: 0; }
.home .chapter { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s; }
.home .chapter.on { opacity: 1; }
.home .chapter .n { font-family: var(--f-display); font-weight: 900; font-size: 5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--moon-mute); }
.home .chapter.on .n { -webkit-text-stroke-color: var(--gold); }
.home .chapter h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: .95; margin-top: 8px; }
.home .chapter p { color: var(--moon-dim); margin-top: 14px; max-width: 42ch; }
.home .chapter code, .home .lede code, .home .mani-meta code { font-family: var(--f-hud); background: rgba(var(--moon-rgb),.08); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
@media (max-width: 900px) {
  .home .play-A { grid-template-columns: 1fr; }
  .home .dc { height: 560px; grid-template-columns: 0 minmax(0, 1fr); }
  .home .dc-rail { display: none; }
  .home .dc-top small { display: none; }
  .home .cs-body .bars { width: 100%; max-width: 380px; }
  .home .play-B { grid-template-columns: 1fr; }
  .home .story-stage { top: calc(var(--nav-h) + 10px); height: 46svh; z-index: 2; }
  .home .chapter { min-height: 60svh; }
}

/* =========================================================
   LUNARI ROSTER
   ========================================================= */
.home .roster { background: radial-gradient(70% 60% at 30% 50%, color-mix(in srgb, var(--el, var(--violet)) 22%, transparent), transparent 70%), var(--ink-0); transition: background .9s; overflow: hidden; }
.home .roster-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
.home .cs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 4vw, 60px); align-items: center; margin-top: 40px; }
.home .cs-stage { position: relative; aspect-ratio: 1 / .92; }
.home .cs-ghost { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(5rem, 14vw, 13rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--el, var(--violet)) 55%, transparent); text-align: center; white-space: nowrap; overflow: hidden; opacity: .55; }
.home .cs-ped { position: absolute; left: 14%; right: 14%; bottom: 4%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--el, var(--violet)) 60%, transparent), transparent); }
.home .cs-ped::before { content: ''; position: absolute; inset: 30% 20%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--el, var(--violet)) 80%, white); opacity: .6; animation: h-pedPulse 3s ease-out infinite; }
@keyframes h-pedPulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.home .cs-img { position: absolute; inset: 4% 8% 10%; display: grid; place-items: center; }
.home .cs-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 50px color-mix(in srgb, var(--el, var(--violet)) 45%, transparent)); animation: h-float 6s ease-in-out infinite; }
.home .cs-img img.swap-out { animation: h-csOut .4s var(--ease-io) forwards; }
.home .cs-img img.swap-in { animation: h-csIn .9s var(--ease-out) both, h-float 6s ease-in-out infinite .9s; }
@keyframes h-csOut { to { opacity: 0; transform: translateX(-60px) scale(.92); filter: blur(8px); } }
@keyframes h-csIn { from { opacity: 0; transform: translateX(80px) scale(1.05); filter: brightness(2.5) blur(8px); } }
.home .cs-info .no { color: var(--moon-mute); }
.home .cs-name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .88; margin-top: 8px; }
.home .cs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.home .cs-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 26px; }
.home .radar { width: 220px; height: 220px; overflow: visible; }
.home .radar .gridl { fill: none; stroke: var(--line); }
.home .radar .axis { stroke: var(--line); }
.home .radar .shape { fill: color-mix(in srgb, var(--el, var(--violet)) 35%, transparent); stroke: color-mix(in srgb, var(--el, var(--violet)) 80%, white); stroke-width: 2; }
.home .radar text { font-family: var(--f-hud); font-size: 9px; fill: var(--moon-dim); letter-spacing: .1em; }
.home .cs-link { display: inline-flex; margin-top: 26px; align-items: center; gap: 8px; color: var(--gold); text-decoration: none; }
.home .cs-link:hover { text-decoration: underline; }
.home .roster-strip { display: flex; gap: 10px; margin-top: 30px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: thin; }
.home .roster-strip button { flex: none; width: 86px; height: 96px; padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(170deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(var(--ink1-rgb),.6)); display: grid; grid-template-rows: 1fr auto; transition: transform .35s var(--ease-out), border-color .3s; }
.home .roster-strip button img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.home .roster-strip button span { font-family: var(--f-hud); font-size: .56rem; letter-spacing: .08em; color: var(--c); text-transform: uppercase; }
.home .roster-strip button:hover { transform: translateY(-4px); }
.home .roster-strip button[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 10px 30px -6px color-mix(in srgb, var(--c) 70%, transparent); transform: translateY(-6px); }
.home .kbd-hint { color: var(--moon-mute); }
.home .kbd-hint kbd { font-family: var(--f-hud); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; margin: 0 2px; }
@media (max-width: 900px) {
  .home .cs { grid-template-columns: 1fr; }
  .home .cs-body { grid-template-columns: 1fr; justify-items: center; }
}

/* Roster B: holo cards */
.home .fan { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: 60px; height: 540px; perspective: 1600px; }
.home .hcard { --rot: 0deg; --ty: 0px; position: relative; width: 250px; flex: none; margin-inline: -34px; aspect-ratio: 5 / 7; transform: translateY(var(--ty)) rotate(var(--rot)); transform-origin: 50% 110%; transition: transform .6s var(--ease-out), margin .6s var(--ease-out); z-index: var(--z); }
.home .hcard:hover, .home .hcard:focus-within, .home .hcard.flipped { --rot: 0deg; --ty: -46px; z-index: 30; margin-inline: 6px; }
.home .tilt { width: 100%; height: 100%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out; transform-style: preserve-3d; }
.home .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.home .flipped .inner { transform: rotateY(180deg); }
.home .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; overflow: hidden; padding: 10px; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 90%, white), color-mix(in srgb, var(--c) 60%, black)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.home .face-in { position: relative; height: 100%; border-radius: 10px; background: linear-gradient(170deg, var(--ink-2), var(--ink-0)); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.home .hc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 10px 12px 0; }
.home .hc-top b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .hc-top span { color: var(--moon-mute); flex: none; }
.home .hc-art { position: relative; margin: 8px 10px; border-radius: 8px; background: radial-gradient(70% 70% at 50% 55%, color-mix(in srgb, var(--el, var(--violet)) 55%, transparent), transparent 75%), var(--ink-1); min-height: 0; display: grid; place-items: center; overflow: hidden; }
.home .hc-art img { width: 88%; height: 92%; object-fit: contain; transform: translateZ(40px); }
.home .hc-bot { padding: 0 12px 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.home .hc-bot .chip { font-size: .56rem; }
.home .foil { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .4s; background: repeating-linear-gradient(115deg, rgba(255,0,132,.5) 0%, rgba(252,164,0,.5) 5%, rgba(255,255,0,.45) 10%, rgba(0,255,138,.45) 15%, rgba(0,207,255,.5) 20%, rgba(204,76,250,.5) 25%, rgba(255,0,132,.5) 30%); background-size: 300% 300%; background-position: var(--mx, 50%) var(--my, 50%); filter: brightness(.8) contrast(1.4); }
.home .glare { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 45%); mix-blend-mode: overlay; opacity: 0; transition: opacity .4s; }
.home .hcard:hover .foil, .home .hcard.flipped .foil { opacity: .55; }
.home .hcard[data-r="legendary"]:hover .foil, .home .hcard[data-r="mythical"]:hover .foil { opacity: .85; }
.home .hcard:hover .glare { opacity: 1; }
.home .face.back { transform: rotateY(180deg); }
.home .back .face-in { grid-template-rows: auto 1fr auto; padding: 14px; gap: 10px; }
.home .back h4 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin: 0; }
.home .back .bars { margin: 0; }
.home .back p { color: var(--moon-mute); }
.home .hcard button.hc-hit { position: absolute; inset: 0; z-index: 5; background: transparent; border: 0; border-radius: 16px; }
.home .fan-hint { text-align: center; color: var(--moon-mute); margin-top: 14px; }
@media (max-width: 900px) {
  .home .fan { justify-content: flex-start; overflow-x: auto; height: auto; padding: 60px 20px 30px; scroll-snap-type: x mandatory; gap: 16px; perspective: none; }
  .home .hcard { width: 230px; margin: 0; --rot: 0deg !important; --ty: 0px !important; scroll-snap-align: center; }
  .home .hcard:hover, .home .hcard:focus-within, .home .hcard.flipped { margin: 0; --ty: -10px; }
}

/* =========================================================
   BOSSES
   ========================================================= */
.home .bosses { background: var(--ink-0); overflow: hidden; }
.home .tape { position: relative; z-index: 3; height: 40px; background: repeating-linear-gradient(-45deg, var(--gold) 0 18px, #1a1200 18px 36px); display: flex; align-items: center; overflow: hidden; transform: rotate(-1.2deg) scale(1.03); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.home .tape .ticker-track { animation-duration: 30s; gap: 0; padding-left: 0; }
.home .tape span { background: #1a1200; color: var(--gold); padding: 3px 16px; font-family: var(--f-hud); font-weight: 700; letter-spacing: .2em; font-size: .78rem; margin-right: 60px; }
.home .raid { position: relative; min-height: 780px; display: grid; grid-template-columns: minmax(0, 1fr) 96px; }
.home .raid-bg { position: absolute; inset: 0; background: radial-gradient(60% 70% at 55% 55%, color-mix(in srgb, var(--bc, #ef4444) 38%, transparent), transparent 70%), url(/img/scene/loc_haz_heatwave_expanse.webp) center / cover; transition: background .8s; }
.home .raid-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--ink-rgb),.95) 0%, rgba(var(--ink-rgb),.6) 45%, rgba(var(--ink-rgb),.75) 100%), linear-gradient(0deg, var(--ink-0) 0%, transparent 40%); }
.home .raid-main { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 20px; }
.home .raid-name { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(5rem, 16vw, 15rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--bc, #ef4444) 60%, transparent); text-align: right; padding-right: 20px; white-space: nowrap; overflow: hidden; opacity: .6; pointer-events: none; }
.home .raid-info { position: relative; z-index: 3; }
.home .raid-info h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .88; margin-top: 12px; }
.home .hpbar { margin-top: 22px; max-width: 420px; }
.home .hpbar-top { display: flex; justify-content: space-between; color: var(--moon-dim); }
.home .hpbar-track { margin-top: 8px; height: 14px; background: rgba(255,255,255,.07); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); position: relative; overflow: hidden; }
.home .hpbar-track i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #b91c1c, var(--danger), #fb923c); transition: transform 1.2s var(--ease-out); }
.home .hpbar-track::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(var(--ink-rgb),.9) calc(10% - 2px) 10%); }
.home .raid-art { position: relative; z-index: 2; height: 700px; display: grid; place-items: center; }
.home .raid-art img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0,0,0,.7)) drop-shadow(0 0 60px color-mix(in srgb, var(--bc, #ef4444) 55%, transparent)); }
.home .raid-art img.slam { animation: h-slam .9s var(--ease-out) both; }
@keyframes h-slam { 0% { opacity: 0; transform: scale(1.35) translateY(-40px); filter: brightness(5) blur(12px); } 40% { opacity: 1; transform: scale(.97); filter: brightness(1.6); } 100% { transform: none; } }
.home .shake { animation: h-screenShake .5s linear; }
@keyframes h-screenShake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-6px, 3px); } 40%, 60% { transform: translate(6px, -2px); } }
.home .flash { position: absolute; inset: 0; z-index: 5; background: var(--bc, #fff); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.home .flash.go { animation: h-flash .6s ease-out; }
@keyframes h-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
.home .raid-rail { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 8px; justify-content: center; padding-block: 30px; }
.home .raid-rail button { width: 76px; height: 76px; padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--ink1-rgb),.65); transition: transform .3s var(--ease-out), border-color .3s; }
.home .raid-rail button img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.7) brightness(.8); transition: filter .3s; }
.home .raid-rail button:hover img, .home .raid-rail button[aria-pressed="true"] img { filter: none; }
.home .raid-rail button[aria-pressed="true"] { border-color: var(--bc, var(--danger)); transform: translateX(-8px); box-shadow: 0 0 24px color-mix(in srgb, var(--bc, #ef4444) 60%, transparent); }
.home .raid-nav { display: flex; gap: 10px; margin-top: 26px; }
@media (max-width: 900px) {
  .home .raid { grid-template-columns: 1fr; min-height: 0; }
  .home .raid-main { grid-template-columns: 1fr; padding-top: 30px; }
  .home .raid-art { height: 420px; order: -1; }
  .home .raid-rail { flex-direction: row; overflow-x: auto; justify-content: flex-start; padding: 10px var(--gutter) 30px; }
  .home .raid-rail button { flex: none; width: 64px; height: 64px; }
  .home .raid-rail button[aria-pressed="true"] { transform: translateY(-6px); }
  .home .raid-name { top: 210px; font-size: 24vw; }
}

/* Bosses B: gallery accordion */
.home .bstrip { display: flex; gap: 8px; height: 620px; margin-top: 44px; }
.home .bslice { position: relative; flex: 1 1 0; min-width: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(90% 60% at 50% 60%, color-mix(in srgb, var(--bc) 45%, transparent), transparent 75%), linear-gradient(180deg, var(--ink-2), var(--ink-0)); transition: flex .7s var(--ease-out), border-color .4s; cursor: pointer; padding: 0; text-align: left; }
.home .bslice.on { flex: 6 1 0; border-color: color-mix(in srgb, var(--bc) 60%, transparent); }
.home .bslice img { position: absolute; left: 50%; bottom: 8%; height: 78%; width: auto; max-width: none; transform: translateX(-50%) scale(.9); filter: grayscale(.6) brightness(.6) drop-shadow(0 20px 30px rgba(0,0,0,.6)); transition: transform .8s var(--ease-out), filter .6s; }
.home .bslice.on img { transform: translateX(-50%) scale(1); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px color-mix(in srgb, var(--bc) 60%, transparent)); }
.home .bslice .vname { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; white-space: nowrap; transition: opacity .3s; }
.home .bslice.on .vname { opacity: 0; }
.home .bslice .binfo { position: absolute; left: 26px; bottom: 26px; right: 26px; opacity: 0; transform: translateY(16px); transition: opacity .5s .2s, transform .6s var(--ease-out) .2s; }
.home .bslice.on .binfo { opacity: 1; transform: none; }
.home .binfo h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: .9; margin-top: 6px; }
.home .binfo .chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .home .bstrip { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .home .bslice, .home .bslice.on { flex: none; width: 78vw; height: 480px; scroll-snap-align: center; }
  .home .bslice img { filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); transform: translateX(-50%); }
  .home .bslice .vname { display: none; }
  .home .bslice .binfo { opacity: 1; transform: none; }
}

/* =========================================================
   WORLDS
   ========================================================= */
.home .worlds { background: var(--ink-1); overflow: hidden; }
.home .journey { position: relative; margin-top: 44px; }
.home .jview { position: relative; aspect-ratio: 21 / 9; min-height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); }
.home .jview .scene { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.12); transition: opacity 1.1s var(--ease-out), transform 8s linear; }
.home .jview .scene.on { opacity: 1; transform: scale(1.02); }
.home .jview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--ink-rgb),.92) 0%, rgba(var(--ink-rgb),.2) 45%, transparent 70%), linear-gradient(90deg, rgba(var(--ink-rgb),.6), transparent 50%); pointer-events: none; }
.home .jcap { position: absolute; left: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 36px); right: 18px; z-index: 2; max-width: 640px; }
.home .jcap .k { color: var(--gold); }
.home .jcap h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .86; margin-top: 8px; }
.home .jcap p { color: var(--moon-dim); margin-top: 10px; }
.home .jcap .anim { animation: h-capIn .9s var(--ease-out) both; }
@keyframes h-capIn { from { opacity: 0; transform: translateY(24px); } }
.home .track { position: relative; margin-top: 26px; overflow-x: auto; padding: 16px 4px 18px; scrollbar-width: thin; }
.home .track-in { position: relative; display: flex; gap: 0; min-width: 1100px; }
.home .track-in::before { content: ''; position: absolute; left: 20px; right: 20px; top: 21px; height: 2px; background: linear-gradient(90deg, var(--violet), var(--gold)); opacity: .35; }
.home .stop { position: relative; flex: 1; display: grid; justify-items: center; gap: 10px; padding: 0 2px; border: 0; background: transparent; color: var(--moon-mute); }
.home .stop .dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--line-strong); font-family: var(--f-hud); font-weight: 700; font-size: .78rem; transition: transform .35s var(--ease-back), background .3s, color .3s, box-shadow .3s; position: relative; z-index: 1; overflow: hidden; }
.home .stop .dot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.home .stop:hover .dot img { opacity: 1; }
.home .stop .lbl { font-size: .66rem; line-height: 1.2; text-align: center; max-width: 72px; }
.home .stop.realm .dot { border-radius: 10px; transform: rotate(45deg); }
.home .stop.realm .dot span, .home .stop.realm .dot img { transform: rotate(-45deg); }
.home .stop[aria-pressed="true"] { color: var(--moon); }
.home .stop[aria-pressed="true"] .dot { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 6px rgba(255,201,92,.2), 0 0 30px rgba(255,201,92,.5); transform: scale(1.15); }
.home .stop.realm[aria-pressed="true"] .dot { transform: rotate(45deg) scale(1.15); }
.home .track-legend { display: flex; flex-wrap: wrap; gap: 18px; color: var(--moon-mute); margin-top: 4px; }
.home .track-legend span { display: inline-flex; align-items: center; gap: 8px; }
.home .track-legend i { width: 12px; height: 12px; border: 1px solid var(--moon-mute); border-radius: 50%; }
.home .track-legend i.sq { border-radius: 3px; transform: rotate(45deg); }

/* Worlds B: portal travel */
.home .travel { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: 44px; align-items: stretch; }
.home .tmenu { display: grid; gap: 2px; align-content: start; max-height: 640px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.home .tmenu button { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; transition: background .25s; }
.home .tmenu button:hover { background: rgba(var(--moon-rgb),.05); }
.home .tmenu button[aria-pressed="true"] { background: rgba(255,201,92,.1); box-shadow: inset 2px 0 0 var(--gold); }
.home .tmenu img { width: 54px; height: 36px; object-fit: cover; border-radius: 4px; }
.home .tmenu b { font-weight: 700; font-size: .92rem; display: block; line-height: 1.2; }
.home .tmenu small { color: var(--moon-mute); font-size: .74rem; }
.home .tmenu .hud { color: var(--moon-mute); font-size: .6rem; }
.home .portalview { position: relative; min-height: 560px; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.home .pv-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.home .pv-layer.next { clip-path: circle(0% at 50% 55%); }
.home .pv-layer.next.go { clip-path: circle(80% at 50% 55%); transition: clip-path 1.2s var(--ease-io); }
.home .pv-warp { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,.0) 0deg 4deg, rgba(var(--glow-rgb),.35) 4.5deg 5deg); -webkit-mask: radial-gradient(circle at 50% 55%, transparent 10%, #000 60%); mask: radial-gradient(circle at 50% 55%, transparent 10%, #000 60%); }
.home .pv-warp.go { animation: h-warp 1.2s ease-out; }
@keyframes h-warp { 0% { opacity: 0; transform: scale(.6) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(20deg); } }
.home .pv-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--ink-rgb),.9), transparent 55%); pointer-events: none; }
.home .pv-cmd { position: absolute; left: 20px; top: 20px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(var(--ink-rgb),.7); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); border-radius: 8px; font-family: var(--f-hud); font-size: .86rem; max-width: calc(100% - 40px); }
.home .pv-cmd .caret { width: 8px; height: 16px; background: var(--gold); animation: h-blink 1s steps(1) infinite; }
@keyframes h-blink { 50% { opacity: 0; } }
.home .pv-cap { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; }
.home .pv-cap h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: .88; }
.home .pv-cap p { color: var(--moon-dim); margin-top: 8px; max-width: 52ch; }
@media (max-width: 900px) {
  .home .travel { grid-template-columns: 1fr; }
  .home .portalview { min-height: 380px; order: -1; }
  .home .tmenu { max-height: 320px; }
}

/* =========================================================
   HATCHERY
   ========================================================= */
.home .hatch { background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--hc, var(--violet)) 26%, transparent), transparent 70%), var(--ink-0); transition: background .8s; overflow: hidden; }
.home .hatch-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 5vw, 70px); align-items: center; }
.home .nest { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.home .nest button { grid-template-rows: minmax(0, 1fr) auto; gap: 4px; height: 112px; }
.home .nest button { position: relative; width: 84px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--moon-rgb),.03); display: grid; place-items: center; transition: transform .35s var(--ease-back), border-color .3s, background .3s; }
.home .nest button img { max-height: 100%; min-height: 0; object-fit: contain; }
.home .nest button:hover { transform: translateY(-4px) rotate(-3deg); }
.home .nest button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.home .nest button span { text-align: center; font-family: var(--f-hud); font-size: .56rem; letter-spacing: .1em; color: var(--c); text-transform: uppercase; }
.home .incubator { position: relative; aspect-ratio: 1 / .9; display: grid; place-items: center; }
.home .inc-beams { position: absolute; inset: -10%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hc, var(--violet)) 50%, transparent) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); opacity: 0; transform: scale(.4); transition: opacity .6s, transform 1s var(--ease-out); animation: h-spinR 18s linear infinite; }
@keyframes h-spinR { to { rotate: 360deg; } }
.home .hatched .inc-beams { opacity: .9; transform: scale(1); }
.home .inc-ped { position: absolute; left: 24%; right: 24%; bottom: 6%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hc, var(--violet)) 55%, transparent), transparent); }
.home .egg-wrap { position: relative; width: 44%; height: 70%; display: grid; place-items: center; cursor: pointer; border: 0; background: transparent; padding: 0; }
.home .egg-wrap img { max-height: 100%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0,0,0,.55)); transition: transform .4s var(--ease-back); }
.home .egg-wrap:hover img { transform: scale(1.04); }
.home .egg-wrap.wob1 img { animation: h-wob .5s ease-in-out; }
.home .egg-wrap.wob2 img { animation: h-wob .35s ease-in-out 2; }
.home .egg-wrap.wob3 img { animation: h-wob .2s ease-in-out 4; }
@keyframes h-wob { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.home .cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.home .cracks path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--hc, #fff)); stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset .4s ease-out; }
.home .cracks path.on { stroke-dashoffset: 0; }
.home .hatched .egg-wrap { animation: h-eggPop .5s ease-in forwards; pointer-events: none; }
@keyframes h-eggPop { to { transform: scale(1.4); opacity: 0; filter: brightness(5); } }
.home .baby { position: absolute; inset: 10% 14% 12%; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.home .baby img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px color-mix(in srgb, var(--hc, var(--violet)) 60%, transparent)); }
.home .hatched .baby { animation: h-babyIn 1s var(--ease-back) .35s both; }
@keyframes h-babyIn { from { opacity: 0; transform: scale(.2) translateY(60px); } to { opacity: 1; transform: none; } }
.home .stamp { position: absolute; top: 4%; left: 50%; transform: translateX(-50%) scale(2.4) rotate(-8deg); opacity: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--hc); text-shadow: 0 0 30px var(--hc); white-space: nowrap; pointer-events: none; }
.home .hatched .stamp { animation: h-stamp .6s var(--ease-back) .8s forwards; }
@keyframes h-stamp { to { opacity: 1; transform: translateX(-50%) scale(1) rotate(-4deg); } }
.home .hatch-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff, var(--hc, #fff) 40%, transparent 70%); opacity: 0; pointer-events: none; }
.home .hatched .hatch-flash { animation: h-flash .8s ease-out; }
.home .hatch-out { min-height: 110px; margin-top: 24px; }
.home .hatch-out h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: .9; }
.home .hatch-out p { color: var(--moon-dim); margin-top: 6px; }
.home .tap-hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: var(--moon-dim); white-space: nowrap; animation: h-bob 1.6s ease-in-out infinite; }
.home .hatched .tap-hint { display: none; }
@keyframes h-bob { 50% { transform: translate(-50%, -6px); } }
@media (max-width: 900px) { .home .hatch-grid { grid-template-columns: 1fr; } .home .incubator { max-width: 440px; width: 100%; justify-self: center; } }

/* =========================================================
   NUMBERS
   ========================================================= */
.home .nums { background: var(--ink-1); border-block: 1px solid var(--line); }
.home .nums-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home .num { padding: clamp(28px, 4vw, 54px) clamp(10px, 2vw, 28px); border-left: 1px solid var(--line); }
.home .num:first-child { border-left: 0; }
.home .num .v { font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 6vw, 5.6rem); line-height: .9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home .num .v small { font-size: .45em; color: var(--moon-dim); }
.home .num p { color: var(--moon-dim); margin-top: 10px; font-size: .92rem; max-width: 26ch; }
@media (max-width: 800px) { .home .nums-grid { grid-template-columns: 1fr 1fr; } .home .num:nth-child(3) { border-left: 0; } .home .num:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* =========================================================
   FINAL CTA
   ========================================================= */
.home .cta { position: relative; overflow: hidden; background: var(--ink-0); padding-top: clamp(100px, 13vw, 180px); text-align: center; }
.home .cta .stars { opacity: .8; }
.home .cta-moon { position: absolute; left: 50%; bottom: -72vw; width: 110vw; max-width: none; aspect-ratio: 1; transform: translateX(-50%); }
.home .cta-moon .moon { box-shadow: 0 0 120px 30px rgba(var(--glow-rgb),.35), 0 0 300px 120px rgba(var(--accent-rgb),.3), inset 0 60px 120px rgba(var(--shade-rgb),.35); }
.home .cta-copy { position: relative; z-index: 3; }
.home .cta h2 { font-size: clamp(3.2rem, 9vw, 8.4rem); }
.home .cta .lede { margin-inline: auto; }
.home .cta .hero-cta { justify-content: center; }
.home .cta .btn-ghost { background: rgba(var(--ink-rgb),.72); }
.home .cta .cmd { background: rgba(var(--ink-rgb),.8); }
.home .cmd { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 8px 14px; border-radius: 6px; background: rgba(var(--ink-rgb),.6); border: 1px solid var(--line-strong); font-family: var(--f-hud); color: var(--moon-dim); }
.home .cmd b { color: var(--gold); }
.home .crowd { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 1.2vw, 20px); width: min(100%, 1500px); margin: 50px auto 0; padding-inline: var(--gutter); height: clamp(170px, 24vw, 340px); pointer-events: none; }
/* Every Lunari gets its own slot: equal-width columns, art contained inside, so nothing overlaps. */
.home .crowd img { flex: 1 1 0; min-width: 0; height: 88%; width: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 -10px 40px rgba(var(--accent-rgb),.25)); transform: translateY(10%); }
.home .crowd img:nth-child(odd) { height: 76%; }
.home .crowd img:nth-child(5) { flex-grow: 1.5; height: 100%; }
@media (max-width: 700px) { .home .crowd img:nth-child(1), .home .crowd img:nth-child(9), .home .crowd img:nth-child(2), .home .crowd img:nth-child(8) { display: none; } }


/* =========================================================
   IMMERSIVE DISCORD (play A)
   ========================================================= */
.home .chip-el::before { display: none; }
.home .play-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: end; margin-bottom: 34px; }
.home .play-head-r { display: grid; gap: 18px; }
.home .row-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.home .dx { --dx-bg: #313338; --dx-side: #2b2d31; --dx-rail: #1e1f22; --dx-text: #dbdee1; --dx-mute: #949ba4; --dx-head: #f2f3f5;
  position: relative; display: grid; grid-template-columns: 72px 232px minmax(0, 1fr) 280px; height: 760px; border-radius: 16px; overflow: hidden; background: var(--dx-bg); color: var(--dx-text);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 60px 140px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--accent-rgb),.2), 0 0 120px -40px rgba(var(--accent-rgb),.5); font-family: var(--f-body); font-size: 15px; }
.home .dx.full { position: fixed; inset: 0; z-index: 130; height: auto; border-radius: 0; border: 0; }
.home .dx-exit { display: none; }
.home .dx.full .dx-exit { display: inline-flex; }
.home .dx-servers { background: var(--dx-rail); display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; }
.home .dx-srv { width: 48px; height: 48px; border-radius: 50%; background: #313338; display: grid; place-items: center; font-weight: 800; color: #dbdee1; font-size: .85rem; transition: border-radius .2s; overflow: hidden; }
.home .dx-srv:hover { border-radius: 16px; }
.home .dx-srv.on { border-radius: 16px; background: var(--violet); box-shadow: -8px 0 0 -4px #fff; }
.home .dx-srv img { width: 100%; height: 100%; object-fit: cover; }
.home .dx-add { color: #23a55a; font-size: 1.4rem; font-weight: 400; }
.home .dx-chan { background: var(--dx-side); display: flex; flex-direction: column; min-height: 0; }
.home .dx-guild { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.3); box-shadow: 0 1px 0 rgba(255,255,255,.03); }
.home .dx-guild b { display: block; color: var(--dx-head); }
.home .dx-guild small { color: var(--dx-mute); font-size: .74rem; }
.home .dx-cat { padding: 18px 16px 6px; color: var(--dx-mute); font-size: .64rem; }
.home #dxChanList { display: grid; gap: 2px; padding: 0 8px; }
.home .dx-ch { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--dx-mute); text-align: left; font: inherit; font-weight: 600; position: relative; }
.home .dx-ch:hover { background: rgba(255,255,255,.05); color: var(--dx-text); }
.home .dx-ch[aria-current="true"] { background: rgba(255,255,255,.09); color: #fff; }
.home .dx-ch .h { font-size: 1.2rem; color: #80848e; font-weight: 400; }
.home .dx-ch.unread { color: #fff; }
.home .dx-ch.unread::before { content: ''; position: absolute; left: -8px; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: #fff; }
.home .dx-ch .ping { margin-left: auto; background: #f23f43; color: #fff; border-radius: 999px; font-size: .68rem; padding: 0 6px; font-weight: 800; animation: h-pingPop .5s var(--ease-back); }
@keyframes h-pingPop { from { transform: scale(0); } }
.home .dx-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #232428; }
.home .dx-me b { display: block; color: #fff; font-size: .88rem; line-height: 1.1; }
.home .dx-me small { color: var(--dx-mute); font-size: .72rem; }
.home .dx-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; overflow: hidden; }
.home .dx-av.lg { width: 48px; height: 48px; font-size: 1.2rem; }
.home .dx-av img { width: 100%; height: 100%; object-fit: cover; }
.home .dx-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.home .dx-top { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; height: 48px; border-bottom: 1px solid rgba(0,0,0,.3); box-shadow: 0 1px 0 rgba(255,255,255,.03); min-width: 0; }
.home .dx-top b { color: #fff; }
.home .dx-hash { font-size: 1.4rem; color: #80848e; }
.home .dx-top small { color: var(--dx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; border-left: 1px solid rgba(255,255,255,.1); padding-left: 10px; margin-left: 4px; }
.home .dx-topbtn { margin-left: auto; border: 0; background: rgba(255,255,255,.07); color: #fff; border-radius: 6px; padding: 6px 10px; font: inherit; font-size: .8rem; font-weight: 700; display: none; align-items: center; gap: 6px; }
.home .dx-topbtn + .dx-topbtn { margin-left: 6px; }
.home .dx-topbtn i { font-style: normal; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: 0 6px; font-size: .72rem; }
.home .dx-log { overflow-y: auto; overscroll-behavior: contain; padding: 16px 0 10px; scroll-behavior: smooth; }
.home .dx-pane[hidden] { display: none; }
.home .dx-day { display: flex; align-items: center; gap: 8px; margin: 4px 16px 10px; color: var(--dx-mute); font-size: .72rem; font-weight: 700; }
.home .dx-day::before, .home .dx-day::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.home .dm { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 4px 16px 4px; margin-top: 12px; animation: h-msgIn .45s var(--ease-out) both; position: relative; }
.home .dm.cont { margin-top: 0; }
.home .dm.cont .dx-av { visibility: hidden; height: 0; }
.home .dm:hover { background: rgba(2,2,2,.06); }
.home .dm.mention { background: rgba(250,168,26,.08); box-shadow: inset 2px 0 0 #f0b232; }
.home .dm .dx-av { width: 40px; height: 40px; }
.home .dm-who { display: flex; align-items: baseline; gap: 6px; font-weight: 700; color: #fff; font-size: .96rem; }
.home .dm-who .tag { font-size: .6rem; background: #5865f2; color: #fff; padding: 1px 5px 0; border-radius: 3px; font-weight: 800; letter-spacing: .02em; align-self: center; }
.home .dm-who time { font-weight: 500; font-size: .72rem; color: var(--dx-mute); }
.home .dm-txt { color: var(--dx-text); line-height: 1.4; overflow-wrap: anywhere; }
.home .dm-txt code, .home .v2 code { background: #1e1f22; padding: 1px 5px; border-radius: 4px; font-size: .86em; font-family: var(--f-hud); }
.home .dm-txt .at { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 600; }
.home .eph { margin-top: 4px; font-size: .74rem; color: var(--dx-mute); display: flex; gap: 6px; align-items: center; }
.home .eph a { color: #00a8fc; cursor: pointer; }
.home .dm.ephemeral .dm-body::before { content: ''; }
.home .reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.home .reacts button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 8px; border: 1px solid transparent; background: #2b2d31; color: #dbdee1; font: inherit; font-size: .8rem; font-weight: 700; transition: transform .15s; }
.home .reacts button:hover { border-color: #4e5058; }
.home .reacts button[aria-pressed="true"] { background: rgba(88,101,242,.25); border-color: #5865f2; color: #fff; }
.home .reacts button:active { transform: scale(.9); }
.home .reacts .ico { width: 16px; height: 16px; }
/* Components V2 container, like the real bot's cards */
.home .v2 { position: relative; margin-top: 6px; max-width: 520px; border-radius: 8px; background: #2b2d31; border: 1px solid rgba(255,255,255,.04); border-left: 4px solid var(--ac, var(--violet)); padding: 14px 16px; }
.home .v2 h5 { margin: 0 0 6px; font-size: 1.12rem; color: #fff; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.home .v2 h5 .ico { width: 22px; height: 22px; }
.home .v2 p { margin: 0 0 6px; color: var(--dx-text); line-height: 1.45; font-size: .93rem; }
.home .v2 p b { color: #fff; }
.home .v2-sec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.home .v2-thumb { position: relative; width: 92px; height: 92px; border-radius: 6px; overflow: hidden; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--ac) 40%, transparent), transparent 75%), #1e1f22; display: grid; place-items: center; }
.home .v2-thumb img, .home .v2-thumb video { width: 90%; height: 90%; object-fit: contain; transition: transform .5s var(--ease-io), opacity .4s, filter .4s; }
.home .v2-media { position: relative; margin-top: 8px; border-radius: 6px; overflow: hidden; background: #1e1f22; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.home .v2-media video, .home .v2-media img { width: 100%; height: 100%; object-fit: cover; }
.home .v2-media.contain video, .home .v2-media.contain img { object-fit: contain; }
.home .v2-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.home .db { border: 0; border-radius: 4px; padding: 7px 14px; min-height: 32px; font: inherit; font-size: .88rem; font-weight: 600; background: #4e5058; color: #fff; transition: background .15s, transform .1s, filter .15s; }
.home .db:hover { background: #6d6f78; }
.home .db:active { transform: scale(.96); }
.home .db.g { background: #248046; } .home .db.g:hover { background: #1a6334; }
.home .db.r { background: #da373c; } .home .db.r:hover { background: #a12828; }
.home .db.p { background: #5865f2; } .home .db.p:hover { background: #4752c4; }
.home .db[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.home .db.pulse { animation: h-pulse 1.2s ease-in-out infinite; }
.home .db .cd { font-variant-numeric: tabular-nums; opacity: .8; }
.home .v2-sel { position: relative; margin-top: 8px; }
.home .v2-sel select { width: 100%; padding: 9px 12px; border-radius: 4px; background: #1e1f22; color: #dbdee1; border: 1px solid #1e1f22; font: inherit; font-size: .88rem; }
.home .v2-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); font-size: .74rem; color: var(--dx-mute); }
.home .v2-hp { height: 8px; border-radius: 4px; background: #1e1f22; overflow: hidden; margin: 4px 0 2px; }
.home .v2-hp i { display: block; height: 100%; width: var(--w, 100%); background: linear-gradient(90deg, #23a55a, #57f287); transition: width .5s var(--ease-out), background .4s; }
.home .v2-hp.mid i { background: linear-gradient(90deg, #d97706, #fbbf24); }
.home .v2-hp.low i { background: linear-gradient(90deg, #b91c1c, #f87171); }
.home .battle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.home .fighter { position: relative; padding: 10px; border-radius: 8px; background: #1e1f22; display: grid; gap: 4px; justify-items: center; text-align: center; }
.home .fighter > img { width: 96px; height: 96px; object-fit: contain; transition: transform .2s; }
.home .fighter.hit > img { animation: h-hitShake .35s; }
@keyframes h-hitShake { 20% { transform: translateX(-8px) rotate(-4deg); filter: brightness(2.5) sepia(1) hue-rotate(-40deg); } 60% { transform: translateX(6px); } }
.home .fighter.lunge > img { animation: h-lunge .35s; }
@keyframes h-lunge { 40% { transform: translateX(26px) scale(1.1); } }
.home .fighter.them.lunge > img { animation-name: h-lungeL; }
@keyframes h-lungeL { 40% { transform: translateX(-26px) scale(1.1); } }
.home .fighter b { color: #fff; font-size: .86rem; }
.home .fighter small { color: var(--dx-mute); font-size: .7rem; font-family: var(--f-hud); letter-spacing: .06em; }
.home .fighter .v2-hp { width: 100%; }
.home .catch-orb { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--o2) 25%, var(--o3) 60%, var(--o4) 100%); box-shadow: 0 0 20px rgba(var(--glow-rgb),.8); opacity: 0; z-index: 3; }
.home .catch-orb::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(30,20,80,.55); }
.home .catch-orb.throw { animation: h-throw .6s cubic-bezier(.3,.1,.3,1) forwards; }
.home .catch-orb.shake { opacity: 1; animation: h-oshake .45s ease-in-out 3; }
.home .catch-orb.burst { opacity: 1; animation: h-oburst .45s ease-out forwards; }
.home .catch-orb.caught { opacity: 1; animation: h-ocaught .9s var(--ease-back) forwards; }
.home .sucked img, .home .sucked video { transform: scale(0); opacity: 0; filter: brightness(4); }
.home .dx-typing { height: 22px; padding: 0 16px; font-size: .78rem; color: var(--dx-mute); }
.home .dx-typing b { color: #dbdee1; }
.home .dx-typing .dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #dbdee1; margin-right: 2px; animation: h-tdot 1.2s infinite; }
.home .dx-typing .dots i:nth-child(2) { animation-delay: .15s; } .home .dx-typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes h-tdot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.home .dx-input { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 16px 20px; padding: 0 8px 0 14px; min-height: 48px; background: #383a40; border-radius: 8px; }
.home .dx-plus { width: 24px; height: 24px; border-radius: 50%; background: #b5bac1; color: #383a40; display: grid; place-items: center; font-weight: 800; flex: none; }
.home .dx-input input { flex: 1; min-width: 0; background: transparent; border: 0; color: #dbdee1; font: inherit; outline: none; padding: 12px 0; }
.home .dx-input input::placeholder { color: #6d6f78; }
.home .dx-send { border: 0; background: #5865f2; color: #fff; border-radius: 6px; padding: 7px 12px; font: inherit; font-weight: 700; font-size: .84rem; }
.home .dx-cmds { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: #2b2d31; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); padding: 8px; max-height: 320px; overflow-y: auto; z-index: 5; }
.home .dx-cmds .hd { color: var(--dx-mute); font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: 4px 8px 8px; letter-spacing: .04em; }
.home .dx-cmd { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 4px; border: 0; background: transparent; color: #dbdee1; text-align: left; font: inherit; }
.home .dx-cmd[aria-selected="true"], .home .dx-cmd:hover { background: rgba(255,255,255,.07); }
.home .dx-cmd img { width: 24px; height: 24px; border-radius: 50%; }
.home .dx-cmd b { color: #fff; }
.home .dx-cmd span { color: var(--dx-mute); font-size: .84rem; }
.home .dx-hud { background: var(--dx-side); overflow-y: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }
.home .dx-card { background: #232428; border-radius: 10px; padding: 14px; }
.home .dx-card h4 { margin: 0 0 10px; color: var(--dx-mute); font-size: .66rem; }
.home .dx-trainer { display: flex; align-items: center; gap: 12px; }
.home .dx-trainer b { display: block; color: #fff; font-size: 1.05rem; }
.home .dx-trainer small { color: var(--gold); }
.home .dx-xp { height: 8px; background: #1e1f22; border-radius: 4px; overflow: hidden; margin-top: 12px; }
.home .dx-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--gold)); transition: width .8s var(--ease-out); }
.home .dx-xptxt { display: block; margin-top: 6px; color: var(--dx-mute); }
.home .dx-wallet { display: grid; gap: 6px; margin-top: 12px; }
.home .dx-wallet span { display: flex; align-items: center; gap: 8px; color: var(--dx-mute); font-size: .84rem; }
.home .dx-wallet b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.home .dx-wallet b.bump { animation: h-bump .5s var(--ease-back); color: var(--gold); }
@keyframes h-bump { 50% { transform: scale(1.4); } }
.home .dx-quests { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.home .dx-quests li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .84rem; color: #dbdee1; padding: 6px 4px; border-radius: 6px; transition: background .3s; }
.home .dx-quests li .ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4e5058; display: grid; place-items: center; font-size: .7rem; color: transparent; transition: all .3s var(--ease-back); }
.home .dx-quests li.done .ck { background: #23a55a; border-color: #23a55a; color: #fff; transform: scale(1.1); }
.home .dx-quests li.done span { color: var(--dx-mute); text-decoration: line-through; }
.home .dx-quests li.flash { background: rgba(35,165,90,.25); }
.home .dx-quests li.next span:not(.ck) { color: #fff; font-weight: 700; }
.home .dx-quests small { color: var(--gold); font-family: var(--f-hud); font-size: .64rem; white-space: nowrap; }
.home .dx-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.home .dx-team .tm { position: relative; aspect-ratio: 1; border-radius: 8px; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--c) 40%, transparent), transparent 75%), #1e1f22; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); animation: cardIn .5s var(--ease-back) both; }
.home .dx-team .tm img { width: 86%; height: 86%; object-fit: contain; }
.home .dx-empty { color: var(--dx-mute); font-size: .82rem; grid-column: 1 / -1; margin: 0; }
.home .dx-note { margin-top: 14px; color: var(--moon-mute); text-align: center; }
.home .egg-crack { position: relative; width: 120px; height: 140px; margin: 8px auto 0; }
.home .egg-crack img { width: 100%; height: 100%; object-fit: contain; }
.home .egg-crack.wob img { animation: h-wob .3s ease-in-out 3; }
.home .egg-crack.pop img { animation: h-eggPop .5s ease-in forwards; }
.home .chest-wrap { display: grid; justify-items: center; gap: 10px; padding: 10px 0 4px; }
.home .titan-card-stage { position: relative; margin-top: 8px; border-radius: 6px; overflow: hidden; background: radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 75%), #1e1f22; height: 220px; display: grid; place-items: center; }
.home .titan-card-stage img, .home .titan-card-stage video { max-height: 100%; max-width: 100%; object-fit: contain; }
@media (max-width: 1180px) { .home .dx { grid-template-columns: 72px 210px minmax(0, 1fr); } .home .dx-hud { position: absolute; right: 0; top: 48px; bottom: 0; width: 290px; z-index: 6; transform: translateX(105%); transition: transform .35s var(--ease-out); box-shadow: -20px 0 40px rgba(0,0,0,.4); } .home .dx-hud.open { transform: none; } .home .dx-topbtn { display: inline-flex; } }
@media (max-width: 760px) {
  .home .play-head { grid-template-columns: 1fr; }
  .home .dx { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 680px; font-size: 14px; }
  .home .dx.full { height: auto; }
  .home .dx-servers { display: none; }
  .home .dx-chan { flex-direction: row; overflow-x: auto; }
  .home .dx-guild, .home .dx-cat, .home .dx-me { display: none; }
  .home #dxChanList { display: flex; padding: 6px; gap: 4px; }
  .home .dx-ch { white-space: nowrap; width: auto; }
  .home .dx-top small { display: none; }
  .home .v2-thumb { width: 72px; height: 72px; }
  .home .dm { gap: 10px; padding-inline: 10px; }
  .home .dx-input { margin: 0 10px 12px; }
  .home .fighter > img { width: 72px; height: 72px; }
}

/* =========================================================
   TITANS
   ========================================================= */
.home .titans { background: var(--ink-0); overflow: hidden; }
.home .titans > .v[data-v="A"] { position: relative; padding-block: clamp(80px, 10vw, 140px); }
.home .ta-bg { position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 50%, color-mix(in srgb, var(--tc, #a3e635) 30%, transparent), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(var(--accent-rgb),.18), transparent 70%); transition: background 1s; }
.home .ta-grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.home .ta-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.home .ta-rules div { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ink1-rgb),.5); }
.home .ta-rules b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--gold); }
.home .ta-rules span { color: var(--moon-dim); font-size: .88rem; }
.home .ta-arena { position: relative; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--tc, #a3e635) 40%, transparent); background: linear-gradient(180deg, rgba(var(--ink1-rgb),.7), rgba(var(--ink-rgb),.9)); overflow: hidden; box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--tc, #a3e635) 60%, transparent); }
.home .ta-hud { position: relative; z-index: 3; padding: 18px 20px 0; }
.home .ta-top { display: flex; justify-content: space-between; color: var(--moon-dim); }
.home .ta-clock { font-variant-numeric: tabular-nums; color: var(--moon); font-size: .9rem; }
.home .ta-clock.urgent { color: var(--danger); animation: h-blink 1s steps(1) infinite; }
.home .ta-hp { position: relative; height: 22px; margin-top: 10px; background: rgba(255,255,255,.06); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); overflow: hidden; }
.home .ta-hp i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #7f1d1d, var(--danger), #fb923c); transition: transform .4s var(--ease-out); }
.home .ta-hp::before { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--ghost, 1)); background: rgba(255,255,255,.35); transition: transform 1.2s ease-in .3s; }
.home .ta-hp span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-hud); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-shadow: 0 1px 4px #000; font-variant-numeric: tabular-nums; }
.home .ta-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--moon-mute); }
.home .ta-stage { position: relative; height: 430px; display: grid; place-items: center; }
.home .ta-stage img, .home .ta-stage video { max-height: 94%; max-width: 88%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)) drop-shadow(0 0 60px color-mix(in srgb, var(--tc, #a3e635) 50%, transparent)); cursor: crosshair; transition: filter .15s; }
.home .ta-stage.hit img, .home .ta-stage.hit video { filter: brightness(2.2) drop-shadow(0 0 60px #fff); }
.home .ta-stage .victory { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 5; }
.home .ta-stage .victory b { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; color: var(--gold); text-shadow: 0 0 40px rgba(255,201,92,.6); animation: luPop 3s var(--ease-back) forwards; animation-duration: 99s; }
.home .ta-controls { position: relative; z-index: 3; padding: 0 20px 20px; display: grid; gap: 12px; }
.home .ta-lobby { display: grid; justify-items: center; gap: 10px; color: var(--moon-dim); text-align: center; }
.home .ta-moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.home .ta-mv { position: relative; overflow: hidden; padding: 12px 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(var(--moon-rgb),.06); font-weight: 700; font-size: .84rem; transition: transform .1s, background .2s; }
.home .ta-mv:hover { background: rgba(var(--moon-rgb),.12); }
.home .ta-mv:active { transform: scale(.95); }
.home .ta-mv small { display: block; color: var(--moon-mute); font-family: var(--f-hud); font-size: .6rem; letter-spacing: .08em; }
.home .ta-mv i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.home .ta-mv[disabled] { opacity: .55; cursor: wait; }
.home .ta-log { min-height: 1.4em; color: var(--moon-dim); text-align: center; }
.home .ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
.home .ld-view { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; min-height: 440px; padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(60% 80% at 30% 50%, color-mix(in srgb, var(--tc, var(--violet)) 30%, transparent), transparent 70%), var(--ink-1); overflow: hidden; }
.home .ld-art { height: 400px; display: grid; place-items: center; }
.home .ld-art img, .home .ld-art video, .home .ld-art .spr-big { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); animation: h-csIn .8s var(--ease-out) both; }
.home .ld-info h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 7vw, 6rem); line-height: .85; text-transform: uppercase; }
.home .ld-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.home .ld-stats div { padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.5); }
.home .ld-stats b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.home .ld-stats span { color: var(--moon-mute); font-size: .8rem; }
.home .ld-track { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.home .ld-rung { flex: none; width: 74px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--moon-rgb),.03); display: grid; gap: 4px; justify-items: center; scroll-snap-align: center; transition: transform .25s var(--ease-back), border-color .2s; }
.home .ld-rung .spr-titan { width: 56px; height: 56px; }
.home .ld-rung span { font-family: var(--f-hud); font-size: .6rem; color: var(--moon-mute); letter-spacing: .08em; }
.home .ld-rung:hover { transform: translateY(-4px); }
.home .ld-rung[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); transform: translateY(-6px); }
.home .ld-rung[aria-pressed="true"] span { color: #fff; }
@media (max-width: 900px) { .home .ta-grid { grid-template-columns: 1fr; } .home .ta-stage { height: 320px; } .home .ta-moves { grid-template-columns: 1fr 1fr; } .home .ld-view { grid-template-columns: 1fr; } .home .ld-art { height: 280px; } }

/* =========================================================
   RIFTS
   ========================================================= */
.home .rifts { background: radial-gradient(60% 60% at 75% 50%, color-mix(in srgb, var(--rc, #a78bfa) 20%, transparent), transparent 70%), var(--ink-0); overflow: hidden; transition: background .8s; }
.home .rf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.home .rf-weekend { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 22px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(167,139,250,.4); background: rgba(167,139,250,.08); }
.home .rf-weekend b { font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.home .rf-pick { margin-top: 22px; display: grid; gap: 12px; }
.home .rf-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.home .rf-anats { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.home .rf-anats button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--moon-rgb),.03); color: var(--moon-dim); font-size: .84rem; transition: all .2s; }
.home .rf-anats button:hover { border-color: var(--line-strong); color: var(--moon); }
.home .rf-anats button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.home .rf-anats button .n { color: inherit; opacity: .6; font-size: .72rem; margin-left: 4px; }
.home .rf-portal { position: relative; aspect-ratio: 1; width: min(100%, 580px); margin-inline: auto; border-radius: 50%; }
.home .rf-portal canvas { position: absolute; inset: -12%; width: 124%; height: 124%; }
.home .rf-spawns { position: absolute; inset: 0; pointer-events: none; }
.home .rf-spawns img { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; object-fit: contain; margin: -21% 0 0 -21%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); animation: h-riftOut 1.4s var(--ease-out) forwards; }
@keyframes h-riftOut { 0% { transform: scale(0) rotate(-200deg); filter: brightness(5) blur(6px); opacity: 0; } 50% { opacity: 1; filter: brightness(2) blur(0); } 100% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, 1)); } }
.home .rf-spawns img.gone { animation: h-riftGone .6s ease-in forwards; }
@keyframes h-riftGone { to { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 40px)) scale(.6); } }
.home .rf-label { position: absolute; left: 50%; bottom: -13%; transform: translateX(-50%); text-align: center; white-space: nowrap; z-index: 3; }
.home .rf-label b { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); text-transform: uppercase; line-height: 1; }
.home .rf-label span { color: var(--moon-mute); }
.home .rf-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 84px; }
.home .rf-price { text-align: center; color: var(--moon-mute); margin-top: 14px; }
.home .rf-anomaly { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); z-index: 4; padding: 6px 12px; border-radius: 999px; background: var(--r-mythical); color: #2a0016; font-family: var(--f-hud); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; animation: luPop 3s var(--ease-back) forwards; white-space: nowrap; }
@media (max-width: 900px) { .home .rf-grid { grid-template-columns: 1fr; } }

/* =========================================================
   MOMENTS
   ========================================================= */
.home .moments { background: var(--ink-1); }
.home .mo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.home .mo-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(170deg, var(--ink-2), var(--ink-0)); overflow: hidden; }
.home .mo-stage { aspect-ratio: 1; border-radius: 14px; background: radial-gradient(60% 60% at 50% 55%, rgba(239,68,68,.3), transparent 70%), var(--ink-1); }
.home .mo-stage .evo-img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.home .mo-body h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 2.4rem; line-height: .9; margin: 6px 0 10px; }
.home .mo-body p { color: var(--moon-dim); margin-bottom: 16px; }
.home .mo-disc { background: linear-gradient(145deg, #f472b6, #a78bfa, #60a5fa, #fbbf24); padding: 6px; }
.home .disc-card { height: 100%; border-radius: 11px; background: var(--ink-1); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; justify-items: center; padding: 12px; text-align: center; }
.home .disc-card img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.home .disc-card b { font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
.home .disc-card small { color: var(--moon-mute); }
@media (max-width: 1000px) { .home .mo-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .home .mo-card { grid-template-columns: 1fr; } }

/* Worlds with animated scenery */
.home .jview video.scene, .home .jview .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home .pv-layer video { width: 100%; height: 100%; object-fit: cover; }
.home .raid-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.home .raid-art video { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0,0,0,.7)) drop-shadow(0 0 60px color-mix(in srgb, var(--bc, #ef4444) 55%, transparent)); }
.home .raid-art video.slam { animation: h-slam .9s var(--ease-out) both; }
.home .voice-line { margin-top: 18px; max-width: 420px; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; color: var(--moon); opacity: .9; min-height: 2.2em; }
.home .voice-line::before { content: '“'; color: var(--bc, var(--danger)); }
.home .voice-line::after { content: '”'; color: var(--bc, var(--danger)); }
.home .voice-line .w { display: inline-block; opacity: 0; transform: translateY(8px); animation: h-fadeUp .4s var(--ease-out) forwards; animation-delay: calc(var(--i) * 60ms + .5s); }
.home .starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.home .starter { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 8px; background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--c) 30%, transparent), transparent 75%), #1e1f22; text-align: center; }
.home .starter > img { width: 84px; height: 84px; object-fit: contain; transition: transform .3s var(--ease-back); }
.home .starter:hover > img { transform: scale(1.1) translateY(-4px); }
.home .starter b { color: #fff; font-size: .88rem; }
.home .starter small { color: #949ba4; font-size: .72rem; }
.home .roster-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 8px; }
.home .roster-mini button { display: grid; justify-items: center; gap: 2px; padding: 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: #1e1f22; color: #dbdee1; font: inherit; font-size: .72rem; }
.home .roster-mini img { width: 56px; height: 56px; object-fit: contain; }
.home .roster-mini small { color: #949ba4; }
.home .v2-hp.inline { display: inline-block; width: 120px; vertical-align: middle; margin: 0 0 0 4px; }
.home .dx .bars .bar { color: #b5bac1; }
.home .dx:not(.full) .dx-exit { display: none !important; }
.home .starter .db { white-space: nowrap; padding: 7px 10px; }
.home .starter b { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 760px) { .home .starter b { font-size: .76rem; } .home .starter > img { width: 64px; height: 64px; } .home .starters { gap: 5px; } }



.home .hero-badge { display: inline-flex; align-self: flex-start; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 999px; background: rgba(139,92,246,.2); border: 1px solid rgba(192,132,252,.5); color: #e9d5ff; font-weight: 600; font-size: .9rem; margin-bottom: 14px; backdrop-filter: blur(10px); }
.home .h1-kicker { display: block; font-family: var(--f-hud); font-weight: 700; font-size: clamp(.8rem, 1.2vw, 1rem); letter-spacing: .14em; color: var(--violet-hi); margin-bottom: 14px; text-transform: uppercase; line-height: 1.3; }
.home .sim-note { color: #86efac; }
.home .orig-strip { background: var(--ink-0); }
.home .grid-orig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home .grid-orig article { padding: clamp(20px, 3vw, 34px); border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(170deg, var(--ink-2), var(--ink-1)); display: grid; gap: 12px; justify-items: start; }
.home .grid-orig h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: .95; }
.home .grid-orig p { color: var(--moon-dim); }
.home .faq { background: var(--ink-1); }
.home .faq-list { display: grid; gap: 10px; margin-top: 30px; max-width: 900px; }
.home .faq-list details { border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--ink1-rgb),.5); padding: 16px 20px; transition: border-color .2s; }
.home .faq-list details[open] { border-color: var(--line-strong); }
.home .faq-list summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.home .faq-list summary::after { content: '+'; color: var(--gold); font-family: var(--f-hud); }
.home .faq-list details[open] summary::after { content: '−'; }
.home .faq-list p { color: var(--moon-dim); margin-top: 10px; }
.home .faq-legal { color: var(--moon-mute); font-size: .8rem; margin-top: 24px; max-width: 80ch; }
@media (max-width: 800px) { .home .grid-orig { grid-template-columns: 1fr; } }

/* Character select: the Lunari floats above its pedestal and never covers the roster strip. */
.home .cs-stage { aspect-ratio: auto; height: clamp(320px, 42vw, 560px); }
.home .cs-img { inset: 6% 16% 17%; }
.home .cs-img img { width: 100%; height: 100%; object-fit: contain; }
.home .roster-strip { position: relative; z-index: 3; }

/* Media always fits its frame: pinned inside with a margin, never cropped. */
.home .v2-thumb { position: relative; }
.home .v2-thumb > img, .home .v2-thumb > video { position: absolute; inset: 7%; width: 86%; height: 86%; max-width: none; object-fit: contain; }
.home .titan-card-stage { position: relative; height: 260px; }
.home .titan-card-stage > img, .home .titan-card-stage > video, .home .titan-card-stage > .spr { position: absolute; inset: 5% 0; margin: auto; width: 100%; height: 90%; max-width: none; max-height: none; object-fit: contain; }
.home .titan-card-stage > .spr { width: auto; aspect-ratio: 1; }
.home .ta-stage > img, .home .ta-stage > video { position: absolute; inset: 3% 0; margin: auto; width: 100%; height: 94%; max-width: none; max-height: none; object-fit: contain; }
.home .ld-art { position: relative; }
.home .ld-art > img, .home .ld-art > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.home .raid-art { position: relative; }
.home .raid-art > img, .home .raid-art > video { position: absolute; inset: 2% 0; margin: auto; width: 100%; height: 96%; max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 760px) { .home .titan-card-stage { height: 200px; } }

.home .dx-sim { margin: 0 16px 12px; padding: 8px 12px; border-radius: 6px; background: rgba(35,165,90,.12); border: 1px dashed rgba(35,165,90,.5); color: #86efac; font-size: .78rem; font-weight: 600; text-align: center; }
.home .v2-name input { width: 100%; padding: 10px 12px; border-radius: 4px; border: 1px solid #1e1f22; background: #1e1f22; color: #fff; font: inherit; }
.home .v2-name input.bad { border-color: #da373c; }
.home .v2-hp.gen i { background: linear-gradient(90deg, #a78bfa, #f472b6, #ffc95c); }
.home .cands { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.home .cand { position: relative; aspect-ratio: 1; border-radius: 8px; border: 2px solid #1e1f22; background: radial-gradient(70% 70% at 50% 55%, color-mix(in srgb, var(--c) 40%, transparent), transparent 75%), #1e1f22; padding: 0; transition: border-color .2s, transform .2s; }
.home .cand:hover { border-color: var(--c); transform: translateY(-3px); }
.home .cand img { position: absolute; inset: 8% 8% 18%; width: 84%; height: 74%; object-fit: contain; }
.home .cand span { position: absolute; left: 0; right: 0; bottom: 6px; color: #dbdee1; }
.home .disc-reveal { margin-top: 8px; max-width: 300px; border-radius: 14px; padding: 5px; background: linear-gradient(145deg, #f472b6, #a78bfa, #60a5fa, #fbbf24); background-size: 200% 200%; animation: h-holoShift 4s linear infinite; box-shadow: 0 0 40px rgba(244,114,182,.35); }
@keyframes h-holoShift { to { background-position: 200% 0; } }
.home .disc-in { position: relative; border-radius: 10px; background: #1e1f22; padding: 12px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.home .disc-in img { width: 70%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
.home .disc-in b { font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: #fff; line-height: 1; }
.home .disc-in small { font-size: .62rem; }
.home .breed-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; }
.home .breed-pair img { width: 84px; height: 84px; object-fit: contain; }
.home .breed-pair span { font-size: 1.6rem; animation: h-pulse 1s ease-in-out infinite; }

.home .hc-art img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.home .dx-team .tm img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.home .roster-strip button { position: relative; }
.home .roster-strip button img { position: absolute; left: 8%; right: 8%; top: 6%; bottom: 24%; width: 84%; height: 70%; object-fit: contain; }
.home .roster-strip button span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.home .mo-stage { position: relative; }
.home .mo-stage .evo-img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }

/* ===== Moonrise v5: the moon follows the mouse, Lunari stay still and are lit by it ===== */
.home .hero { min-height: clamp(720px, 100svh, 1040px); }
.home .hA .hero-copy { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 110px; max-width: var(--maxw); }
.home .hA .hero-copy > * { max-width: min(620px, 46vw); }
.home .hA-bg { filter: grayscale(.55) sepia(.35) saturate(1.2) brightness(.42) blur(2px); opacity: .75; will-change: transform; }
.home .hA-sky { background: var(--sky), linear-gradient(180deg, rgba(var(--ink-rgb), .25) 0%, rgba(var(--ink-rgb), .05) 45%, rgba(var(--ink-rgb), .96) 100%); }
.home .hA-mist { background: radial-gradient(50% 50% at 50% 50%, rgba(var(--glow-rgb), .16), transparent 70%); }
.home .hA-moonwrap { right: 5%; top: 6%; width: min(46vw, 660px); will-change: transform; }
.home .hA .moon { background:
    radial-gradient(circle at 30% 34%, rgba(var(--crater-rgb), .42) 0 6%, transparent 7%),
    radial-gradient(circle at 62% 58%, rgba(var(--crater-rgb), .36) 0 9%, transparent 10%),
    radial-gradient(circle at 44% 70%, rgba(var(--crater-rgb), .3) 0 4%, transparent 5%),
    radial-gradient(circle at 70% 30%, rgba(var(--crater-rgb), .28) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 22% 60%, rgba(var(--crater-rgb), .24) 0 5%, transparent 6%),
    radial-gradient(circle at var(--lx, 34%) var(--ly, 30%), var(--m1) 0%, var(--m2) 30%, var(--m3) 56%, var(--m4) 80%, var(--m5) 100%);
  box-shadow: 0 0 70px 14px rgba(var(--glow-rgb), .38), 0 0 260px 90px rgba(var(--accent-rgb), .22), inset -30px -40px 90px rgba(var(--shade-rgb), .55); }
.home .moon-halo { background: radial-gradient(circle, rgba(var(--glow-rgb), .24) 0%, transparent 60%); }

/* Badge: a HUD tag in the game's own style */
.home .hero-badge { display: inline-flex; align-self: flex-start; align-items: stretch; gap: 0; padding: 0; margin-bottom: 18px; border: 0; border-radius: 0; background: none; backdrop-filter: none; font-weight: 700; font-size: .92rem; color: var(--moon); position: relative; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.home .hero-badge b { display: grid; place-items: center; padding: 0 12px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); font-family: var(--f-hud); font-size: .7rem; letter-spacing: .16em; }
.home .hero-badge span { padding: 8px 26px 8px 14px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .08)); border-top: 1px solid rgba(var(--glow-rgb), .35); border-bottom: 1px solid rgba(var(--glow-rgb), .2); }
.home .hero-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%); background-size: 260% 100%; animation: h-badgeShine 5s ease-in-out infinite 2s; pointer-events: none; }
@keyframes h-badgeShine { 0% { background-position: 130% 0; } 30%, 100% { background-position: -30% 0; } }
.home .h1-kicker { color: var(--violet-hi); }
.home .hero-fine { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }

/* Lineup */
.home .lineup { pointer-events: none; z-index: 7; }
.home .lu { position: absolute; }
.home .lu-row { position: absolute; left: 47%; right: 1.5%; bottom: 8.5%; display: flex; align-items: flex-end; justify-content: center; }
.home .lu-g { --bw: 11.8vw; position: relative; flex: none; width: calc(var(--bw) * var(--s)); height: calc(var(--bw) * 1.25 * var(--s)); z-index: var(--z); }
.home .lu-g + .lu-g { margin-left: calc(var(--bw) * -.2 * var(--s)); }
.home .lu-fly { width: calc(15vw * var(--s)); aspect-ratio: 1; right: 4%; top: 12%; z-index: 20; }
.home .lu .rise, .home .lu-body { position: relative; width: 100%; height: 100%; }
.home .lu-body img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 0 1.2px rgba(var(--glow-rgb), .95)) drop-shadow(0 0 18px rgba(var(--glow-rgb), .26)) drop-shadow(0 22px 22px rgba(0,0,0,.6));
  transition: filter .35s, transform .45s var(--ease-out); transform-origin: 50% 100%; }
.home .lu:hover .lu-body img { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 26px color-mix(in srgb, var(--rc) 75%, transparent)) drop-shadow(0 22px 22px rgba(0,0,0,.6)) brightness(1.08); }
.home .lu.picked .lu-body img { transform: scale(1.05); filter: brightness(1.6) drop-shadow(0 0 30px var(--rc)); }
.home .lu-fly .float { animation: h-float 7s ease-in-out infinite; }

/* Holo glint: a light sweep clipped to the creature's own silhouette */
.home .lu-glint { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.0) 42%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 58%, transparent 62%); background-size: 320% 100%; background-position: 140% 0; mix-blend-mode: soft-light;
  animation: h-glint 7.5s ease-in-out infinite; animation-delay: var(--gd); }
.home .lu:hover .lu-glint { animation-duration: 1.6s; animation-delay: 0s; }
@keyframes h-glint { 0% { background-position: 140% 0; } 22%, 100% { background-position: -40% 0; } }

/* Ground light pool and contact shadow */
.home .lu-pool { position: absolute; left: 6%; right: 6%; bottom: -5%; height: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent), radial-gradient(closest-side, color-mix(in srgb, var(--rc) 55%, transparent), transparent);
  background-size: 70% 60%, 100% 100%; background-position: center 40%, center; background-repeat: no-repeat; animation: h-poolPulse 4.5s ease-in-out infinite; animation-delay: calc(var(--gd) * -1); }
.home .lu-fly .lu-pool { display: none; }
@keyframes h-poolPulse { 50% { opacity: .55; } }

/* Embers rising off each Lunari, in its rarity colour */
.home .lu-motes { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.home .mote { position: absolute; left: var(--x); bottom: 12%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px var(--rc), 0 0 14px 3px color-mix(in srgb, var(--rc) 60%, transparent); opacity: 0;
  animation: h-moteUp var(--mt) linear infinite; animation-delay: var(--md); }
@keyframes h-moteUp { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(10px, -150px) scale(.2); opacity: 0; } }

/* Summon on entrance: a beam of light, then the Lunari materialises inside it */
.home .lu-beam { position: absolute; left: 50%; bottom: 0; width: 46%; height: 150%; transform: translateX(-50%) scaleX(0); transform-origin: 50% 100%; pointer-events: none; opacity: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--rc) 80%, #fff) 0%, color-mix(in srgb, var(--rc) 35%, transparent) 50%, transparent 100%); filter: blur(6px); mix-blend-mode: screen; }
.home .lu-fly .lu-beam { display: none; }
.home .js .lu .rise { opacity: 0; }
.is-ready .home .hA .lu .rise { animation: h-materialise 1.2s var(--ease-out) both; animation-delay: calc(var(--d) + .25s); }
.is-ready .home .hA .lu-beam { animation: h-beam 1.3s var(--ease-out) both; animation-delay: var(--d); }
@keyframes h-materialise { 0% { opacity: 0; filter: brightness(4) saturate(0) blur(6px); transform: scale(.94); } 45% { opacity: 1; } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes h-beam { 0% { opacity: 0; transform: translateX(-50%) scaleX(0); } 30% { opacity: 1; transform: translateX(-50%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) scaleX(.2); } }
.home .lineup.leaving .lu .rise { animation: h-dissolve .5s var(--ease-io) forwards !important; }
@keyframes h-dissolve { to { opacity: 0; filter: brightness(4) saturate(0) blur(8px); transform: scale(1.04); } }

.home .lu-tag { position: absolute; left: 50%; top: 0; z-index: 30; transform: translate(-50%, -70%) scale(.85); opacity: 0; pointer-events: none; white-space: nowrap; padding: 6px 12px; border-radius: 6px; background: rgba(var(--ink-rgb),.88); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); box-shadow: 0 0 20px -4px var(--rc); font-family: var(--f-hud); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s, transform .4s var(--ease-back); }
.home .lu-tag b { color: var(--rc); }
.home .lu:hover .lu-tag { opacity: 1; transform: translate(-50%, -100%) scale(1); }

.home .party-btn { position: absolute; z-index: 12; right: var(--gutter); bottom: 64px; pointer-events: auto; padding: 9px 16px; border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); border: 0; background: rgba(var(--ink-rgb), .7); color: var(--moon); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .2s, color .2s; }
.home .party-btn:hover { background: var(--gold); color: var(--gold-ink); }
.home .hero .rv-tabs { bottom: 110px; }

@media (max-width: 900px) {
  .home .hA .hero-copy { padding-top: calc(var(--nav-h) + 40px); padding-bottom: min(108vw, 520px); }
  .home .hA .hero-copy > * { max-width: none; }
  .home .hA-moonwrap { width: 82vw; right: -12vw; top: auto; bottom: min(36vw, 200px); }
  .home .lu-row { left: 2%; right: 2%; bottom: 64px; }
  .home .lu-g { --bw: 21vw; }
  .home .lu-fly { width: calc(26vw * var(--s)); right: 4%; top: auto; bottom: min(78vw, 400px); }
  .home .lu-tag { font-size: .6rem; }
  .home .party-btn { bottom: 56px; right: 12px; font-size: .62rem; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .home .mote, .home .lu-glint, .home .lu-pool, .home .hero-badge::after { animation: none !important; } }
/* v5 sizing pass */
.home .lu-g { --bw: 14.2vw; }
.home .lu-row { left: 45%; right: .5%; bottom: 7.5%; }
.home .hero .rv-tabs { top: calc(var(--nav-h) + 14px); bottom: auto; right: var(--gutter); left: auto; }
@media (max-width: 900px) { .home .lu-g { --bw: 26vw; } .home .lu-row .lu-g:nth-child(n+5) { display: none; } .home .hA .hero-copy { padding-bottom: min(118vw, 560px); } .home .lu-fly { bottom: min(92vw, 470px); } .home .hA-moonwrap { bottom: min(50vw, 260px); } }

/* ===== Final CTA v5: the moon rises behind a line of Lunari; text stays on the dark sky ===== */
.home .cta { padding-top: clamp(90px, 11vw, 160px); padding-bottom: 0; background: radial-gradient(90% 60% at 50% 100%, rgba(var(--accent-rgb), .18), transparent 70%), var(--ink-0); }
.home .cta-copy { position: relative; z-index: 6; }
.home .cta .lede { color: var(--moon-dim); }
.home .cta-stage { position: relative; height: clamp(380px, 44vw, 700px); margin-top: clamp(30px, 4vw, 60px); overflow: hidden; }
.home .cta-moon { --rise: .6; position: absolute; left: 50%; top: 0; width: min(96vw, 1400px); aspect-ratio: 1; bottom: auto; max-width: none;
  transform: translate(-50%, calc(52% - var(--rise) * 34%)); will-change: transform; }
.home .cta-moon .moon { box-shadow: 0 0 90px 24px rgba(var(--glow-rgb), .45), 0 0 320px 120px rgba(var(--accent-rgb), .28), inset 0 60px 140px rgba(var(--shade-rgb), .35); overflow: hidden;
  background:
    radial-gradient(circle at 30% 24%, rgba(var(--crater-rgb), .35) 0 4%, transparent 4.6%),
    radial-gradient(circle at 64% 18%, rgba(var(--crater-rgb), .3) 0 6%, transparent 6.6%),
    radial-gradient(circle at 46% 12%, rgba(var(--crater-rgb), .26) 0 2.4%, transparent 3%),
    radial-gradient(circle at 78% 34%, rgba(var(--crater-rgb), .24) 0 3.5%, transparent 4.1%),
    radial-gradient(circle at 18% 40%, rgba(var(--crater-rgb), .22) 0 5%, transparent 5.6%),
    radial-gradient(circle at 50% 20%, var(--m1) 0%, var(--m2) 24%, var(--m3) 46%, var(--m4) 70%, var(--m5) 100%); }
.home .cta-moon .moon-halo { inset: -18%; background: radial-gradient(circle, rgba(var(--glow-rgb), .3) 0%, rgba(var(--accent-rgb), .12) 40%, transparent 62%); }
/* Thin clouds drifting across the moon */
.home .cta-cloud { position: absolute; left: -60%; top: 12%; width: 70%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ink-rgb), .55), transparent); filter: blur(10px); animation: h-cloud 38s linear infinite; }
.home .cta-cloud.c2 { top: 26%; height: 5%; width: 55%; animation-duration: 52s; animation-delay: -20s; opacity: .7; }
@keyframes h-cloud { to { transform: translateX(260%); } }
/* Light rays fanning out from behind the moon */
.home .cta-rays { position: absolute; left: 50%; top: 18%; width: 180vw; aspect-ratio: 1; transform: translate(-50%, -30%); pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(var(--glow-rgb), .16) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%); mask: radial-gradient(closest-side, #000 20%, transparent 70%); animation: h-rays 140s linear infinite; mix-blend-mode: screen; }
@keyframes h-rays { to { transform: translate(-50%, -30%) rotate(360deg); } }
.home .cta-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 3; background: linear-gradient(0deg, var(--ink-0) 20%, rgba(var(--ink-rgb), .6) 60%, transparent); pointer-events: none; }
/* Crowd on the horizon */
.home .cta .crowd { position: absolute; left: 0; right: 0; bottom: 6%; z-index: 4; margin: 0; padding: 0 var(--gutter); height: auto; width: auto; display: flex; justify-content: center; align-items: flex-end; gap: 0; pointer-events: none; }
.home .cw { --bw: 10.4vw; position: relative; flex: none; display: block; width: calc(var(--bw) * var(--s)); height: calc(var(--bw) * 1.2 * var(--s)); z-index: var(--z); pointer-events: auto; }
.home .cw + .cw { margin-left: calc(var(--bw) * -.22 * var(--s)); }
.home .cw .lu-body { display: block; position: relative; width: 100%; height: 100%; }
.home .cw img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; max-width: none; transform: none;
  filter: drop-shadow(0 0 1.4px rgba(var(--glow-rgb), 1)) drop-shadow(0 0 22px rgba(var(--glow-rgb), .45)) drop-shadow(0 18px 18px rgba(0,0,0,.55)); transition: filter .35s; }
.home .cw:hover img { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 30px color-mix(in srgb, var(--rc) 80%, transparent)) brightness(1.08); }
.home .cw .lu-pool { position: absolute; left: 6%; right: 6%; bottom: -5%; height: 14%; }
.home .cw .lu-tag { position: absolute; }
.home .cw:hover .lu-tag, .home .cw:focus-visible .lu-tag { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.home .js .cw .lu-body { opacity: 0; transform: translateY(14px); }
.home .cta-stage.on .cw .lu-body { animation: h-cwIn 1.1s var(--ease-out) both; animation-delay: calc(.3s + var(--d)); }
@keyframes h-cwIn { 0% { opacity: 0; transform: translateY(14px); filter: brightness(3) saturate(0); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }
@media (max-width: 800px) {
  .home .cw { --bw: 19vw; }
  .home .crowd .cw:nth-child(1), .home .crowd .cw:nth-child(2), .home .crowd .cw:nth-child(6), .home .crowd .cw:nth-child(9) { display: none; }
  .home .cta-stage { height: clamp(300px, 80vw, 460px); }
  .home .cta-moon { width: 150vw; }
}
@media (prefers-reduced-motion: reduce) { .home .cta-cloud, .home .cta-rays { animation: none; } }
.home .cta-stage { height: clamp(440px, 50vw, 780px); }
.home .cta-moon { top: calc(16% + (1 - var(--rise)) * 22%); transform: translateX(-50%); width: min(110vw, 1600px); }
.home .cw { --bw: 13.2vw; }
.home .cw + .cw { margin-left: calc(var(--bw) * -.26 * var(--s)); }
.home .cta-ground { height: 16%; }
@media (max-width: 800px) { .home .cw { --bw: 24vw; } .home .cta-stage { height: clamp(340px, 95vw, 520px); } .home .cta-moon { width: 170vw; top: calc(20% + (1 - var(--rise)) * 18%); } }
/* Ground pools: a soft contact shadow with only a hint of rarity colour, tucked under the feet */
.home .lu-pool { bottom: 1%; height: 9%; left: 14%; right: 14%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 85%), radial-gradient(closest-side, color-mix(in srgb, var(--rc) 30%, transparent), transparent);
  background-size: 80% 70%, 100% 100%; filter: blur(2px); }
.home .cw .lu-pool { bottom: 2%; left: 16%; right: 16%; height: 8%; }
@media (max-width: 900px) { .home .hero .rv-tabs { top: auto; bottom: 54px; left: var(--gutter); right: auto; } .home .party-btn { bottom: 110px; } }

/* ===== Character select v5: the Lunari stands on the ring and is summoned, not slid in ===== */
.home .cs-img { position: absolute; inset: 4% 12% 13%; display: block; }
.home .cs-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 0 1.4px rgba(var(--glow-rgb), .9)) drop-shadow(0 0 40px color-mix(in srgb, var(--el, var(--violet)) 45%, transparent)) drop-shadow(0 26px 22px rgba(0,0,0,.55));
  animation: h-csHover 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes h-csHover { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(-20px); } }
.home .cs-img img.swap-in { animation: h-csSummon 1s var(--ease-out) both, h-csHover 5s ease-in-out infinite 1s; }
.home .cs-img img.swap-out { animation: h-csVanish .45s var(--ease-io) forwards; }
@keyframes h-csSummon { 0% { opacity: 0; transform: translateY(-10px) scale(.7); filter: brightness(6) saturate(0) blur(10px); } 40% { opacity: 1; transform: translateY(-14px) scale(1.04); filter: brightness(2) saturate(.5) blur(2px); } 100% { opacity: 1; transform: translateY(-10px) scale(1); } }
@keyframes h-csVanish { to { opacity: 0; transform: translateY(-40px) scale(.9); filter: brightness(5) saturate(0) blur(12px); } }
.home .cs-ped { bottom: 6%; height: 16%; }
.home .cs-ped::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 50%; height: 520%; transform: translateX(-50%) scaleX(0); transform-origin: 50% 100%; opacity: 0; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--el, var(--violet)) 80%, #fff), transparent); filter: blur(8px); mix-blend-mode: screen; }
.home .cs-stage.summon .cs-ped::after { animation: h-csBeam .9s var(--ease-out); }
.home .cs-stage.summon .cs-ped { animation: h-csFlash .9s var(--ease-out); }
@keyframes h-csBeam { 0% { opacity: 0; transform: translateX(-50%) scaleX(0); } 25% { opacity: .95; transform: translateX(-50%) scaleX(1); } 100% { opacity: 0; transform: translateX(-50%) scaleX(.15); } }
@keyframes h-csFlash { 20% { filter: brightness(2.4); } }

/* Boss: sharp still at full size, the animated version in a small live window */
.home .raid-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: blur(3px) saturate(1.1); transform: scale(1.04); }
.home .raid-live { position: absolute; z-index: 4; right: 120px; bottom: 34px; width: clamp(180px, 17vw, 250px); aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--bc) 55%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 30px -6px var(--bc); background: var(--ink-1); }
.home .raid-live .rl-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home .raid-live .rl-boss { position: absolute; left: 50%; bottom: 2%; height: 92%; width: auto; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.home .rl-tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px; background: rgba(var(--ink-rgb), .75); font-size: .58rem; }
.home .rl-tag i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e; animation: h-ping 1.6s infinite; }
@media (max-width: 900px) { .home .raid-live { position: relative; right: auto; bottom: auto; margin: 0 var(--gutter) 24px; width: auto; max-width: 320px; } }
.home .jview img.scene { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.04); }
.home .jview .scene.on { transform: scale(1.06); transition: opacity 1.1s var(--ease-out), transform 14s linear; }
.home .jview::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.home .jlive { position: absolute; z-index: 3; right: 18px; bottom: 18px; width: clamp(150px, 19vw, 260px); aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(0,0,0,.6); }
.home .jlive video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .home .jlive { width: 120px; top: 64px; bottom: auto; right: 12px; } }
@media (min-width: 901px) { .home .raid-live { top: 44px; bottom: auto; } }

/* ===== Gallery + Lunadex: cinematic panels instead of plain cards ===== */
.home .orig-strip { background: linear-gradient(180deg, var(--ink-1), var(--ink-0)); }
.home .grid-orig { gap: clamp(16px, 2vw, 28px); }
.home .grid-orig article.og { position: relative; display: grid; grid-template-rows: 300px auto; gap: 0; padding: 0; overflow: hidden; border-radius: 20px; background: radial-gradient(90% 70% at 50% 30%, rgba(var(--accent-rgb), .16), transparent 70%), linear-gradient(170deg, var(--ink-2), var(--ink-1)); transition: border-color .3s, transform .4s var(--ease-out); }
.home .grid-orig article.og:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.home .og-copy { display: grid; gap: 12px; justify-items: start; padding: 0 clamp(20px, 3vw, 34px) clamp(22px, 3vw, 34px); position: relative; z-index: 2; }
.home .og-art { position: relative; overflow: hidden; }
.home .og-art::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, var(--ink-2), transparent); pointer-events: none; }
/* Fanned hand of cards */
.home .ogc { position: absolute; left: 50%; bottom: 18px; width: 150px; height: 210px; margin-left: -75px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--c) 30%, transparent), var(--ink-1)); box-shadow: 0 18px 30px rgba(0,0,0,.5); transform-origin: 50% 120%; transform: rotate(calc(var(--i) * 11deg)) translateY(calc(var(--i) * var(--i) * 6px)); transition: transform .6s var(--ease-out); }
.home .ogc img { position: absolute; left: 8%; top: 6%; width: 84%; height: 74%; object-fit: contain; object-position: center bottom; }
.home .ogc b { position: absolute; left: 10px; right: 10px; bottom: 8px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: .9rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .og-col:hover .ogc { transform: rotate(calc(var(--i) * 16deg)) translateY(calc(var(--i) * var(--i) * 8px - 10px)); }
/* Dex grid with undiscovered silhouettes */
.home .og-dex .og-art { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 18px; align-content: start; transform: perspective(700px) rotateX(18deg) scale(1.05); transform-origin: 50% 0; }
.home .ogd { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--moon-rgb), .03); display: grid; place-items: center; animation: h-dexPulse 4s ease-in-out infinite; animation-delay: var(--d); }
.home .ogd img { width: 86%; height: 86%; object-fit: contain; }
.home .ogd.hid img { filter: brightness(0) drop-shadow(0 0 6px rgba(var(--glow-rgb), .35)); opacity: .8; }
.home .ogd.hid::after { content: '?'; position: absolute; font-family: var(--f-display); font-weight: 900; color: var(--gold); font-size: 1rem; }
.home .ogd { position: relative; }
@keyframes h-dexPulse { 50% { border-color: var(--line-strong); } }
@media (max-width: 800px) { .home .grid-orig article.og { grid-template-rows: 240px auto; } .home .ogc { width: 120px; height: 170px; margin-left: -60px; } .home .og-dex .og-art { grid-template-columns: repeat(6, 1fr); } }

/* ===== FAQ: two columns, HUD-styled accordions ===== */
.home .faq { background: radial-gradient(60% 50% at 0% 0%, rgba(var(--accent-rgb), .12), transparent 70%), var(--ink-1); }
.home .faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.home .faq-head { position: sticky; top: calc(var(--nav-h) + 30px); }
.home .faq-grid .faq-list { margin-top: 0; max-width: none; counter-reset: q; }
.home .faq-grid .faq-legal { grid-column: 1 / -1; }
.home .faq-list details { counter-increment: q; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 20px 0; }
.home .faq-list details[open] { border-color: var(--gold); }
.home .faq-list summary { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.05; align-items: center; }
.home .faq-list summary::before { content: counter(q, decimal-leading-zero); font-family: var(--f-hud); font-size: .75rem; color: var(--gold); margin-right: 14px; flex: none; }
.home .faq-list summary::after { content: '+'; margin-left: auto; width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 1rem; transition: transform .35s var(--ease-back), background .2s, color .2s; }
.home .faq-list details[open] summary::after { content: '+'; transform: rotate(45deg); background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.home .faq-list details p { padding-left: 34px; font-size: 1rem; }
.home .faq-list details[open] p { animation: h-capIn .5s var(--ease-out) both; }
@media (max-width: 900px) { .home .faq-grid { grid-template-columns: 1fr; } .home .faq-head { position: static; } }
.home .grid-orig article.og { justify-items: stretch; } .home .og-art { width: 100%; }

/* Egg: sits just above its glowing pedestal; hover lifts it, lights it in its rarity colour and sweeps a glint across the shell */
.home .incubator { --egg: url(/img/egg/legendary_crystal.webp); }
.home .egg-wrap { position: absolute; left: 26%; right: 26%; bottom: 11%; width: auto; height: 70%; display: block; transition: transform .5s var(--ease-out); }
.home .egg-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center bottom; transition: transform .5s var(--ease-back), filter .4s; }
.home .egg-wrap:hover img, .home .egg-wrap:focus-visible img { transform: translateY(-14px) scale(1.04); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 34px color-mix(in srgb, var(--hc, var(--gold)) 75%, transparent)) drop-shadow(0 40px 30px rgba(0,0,0,.5)); }
.home .egg-glint { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--egg) center bottom / contain no-repeat; mask: var(--egg) center bottom / contain no-repeat;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%); background-size: 320% 100%; background-position: 140% 0; mix-blend-mode: soft-light; transition: transform .5s var(--ease-back); }
.home .egg-wrap:hover .egg-glint, .home .egg-wrap:focus-visible .egg-glint { transform: translateY(-14px) scale(1.04); animation: h-glint 1.4s ease-in-out infinite; }
.home .egg-wrap:not(:hover) .egg-glint { animation: h-glint 6s ease-in-out infinite 1.5s; }
.home .inc-ped { transition: transform .5s var(--ease-out), filter .4s; }
.home .incubator:has(.egg-wrap:hover) .inc-ped { transform: scale(1.15); filter: brightness(1.8); }
.home .incubator:has(.egg-wrap:hover) .inc-beams { opacity: .35; transform: scale(.9); }
.home .wob1 .egg-glint, .home .wob2 .egg-glint, .home .wob3 .egg-glint, .home .hatched .egg-glint { display: none; }

/* FAQ: the disclaimer sits under the questions, so the sticky heading never slides over it */
.home .faq-grid .faq-legal { grid-column: 2; }
@media (max-width: 900px) { .home .faq-grid .faq-legal { grid-column: 1; } }

/* Final scene: shadows under the feet, and a hover that lifts the Lunari and lights it in its rarity colour */
.home .cw .lu-pool { bottom: 8%; height: 7%; left: 18%; right: 18%; }
.home .cw .lu-body { transition: transform .45s var(--ease-back); transform-origin: 50% 100%; }
.home .cw:hover .lu-body, .home .cw:focus-visible .lu-body { transform: translateY(-14px) scale(1.06); }
.home .cw:hover img, .home .cw:focus-visible img { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 30px color-mix(in srgb, var(--rc) 85%, transparent)) drop-shadow(0 26px 22px rgba(0,0,0,.5)) brightness(1.08); }
.home .cw:hover .lu-glint { animation-duration: 1.4s; animation-delay: 0s; }
.home .cw:hover .lu-pool { transform: scale(1.25); filter: blur(2px) brightness(1.6); }
.home .cw:hover { z-index: 30; }
.home .cw .lu-tag { top: 4%; }
/* Bigger crowd on the final scene */
.home .cta-stage { height: clamp(500px, 58vw, 920px); }
.home .cw { --bw: 15.6vw; }
.home .cw + .cw { margin-left: calc(var(--bw) * -.3 * var(--s)); }
.home .cta .crowd { bottom: 4%; padding: 0 1vw; }
@media (max-width: 800px) { .home .cw { --bw: 28vw; } .home .cta-stage { height: clamp(380px, 110vw, 600px); } }
/* Rift spawn: centred in the portal, then hovering inside it */
.home .rf-spawns img { --tx: 0; --ty: 0; width: 50%; height: 50%; margin: -25% 0 0 -25%; object-position: center; animation: h-riftOut 1.4s var(--ease-out) forwards, h-riftHover 4.5s ease-in-out 1.4s infinite; filter: drop-shadow(0 0 2px rgba(255,255,255,.7)) drop-shadow(0 0 30px rgba(var(--accent-rgb), .55)) drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
@keyframes h-riftHover { 0%, 100% { transform: translateY(0) scale(var(--ts, 1)); } 50% { transform: translateY(-5%) scale(var(--ts, 1)) rotate(-1.5deg); } }
.home .rf-spawns img.gone { animation: h-riftGone .6s ease-in forwards; }

/* ===== Sim: Anatomy Eggs, Arcade, Character portrait ===== */
.home .ae-shelf { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.home .ae-egg { position: relative; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #1e1f22); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.home .ae-egg .ico, .home .ae-egg img { width: 28px; height: 28px; object-fit: contain; }
.home .ae-egg.next { box-shadow: 0 0 0 2px var(--c), 0 0 14px var(--c); animation: h-aeNext 1.6s ease-in-out infinite; }
.home .ae-egg.done { opacity: .9; }
@keyframes h-aeNext { 50% { transform: translateY(-3px); } }
.home .ae-stage { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 170px; margin: 6px 0; border-radius: 10px; background: radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%); }
.home .ae-big .ico { width: 110px; height: 110px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)) drop-shadow(0 0 18px var(--ac)); }
.home .ae-stage.wob .ae-big { animation: h-wob .32s ease-in-out 2; display: inline-block; }
.home .ae-stage.pop .ae-big { animation: h-eggPop .4s ease-in forwards; display: inline-block; }
.home .ae-out img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 22px var(--c)); animation: h-csSummon .9s var(--ease-out) both; }
.home .ae-name { display: grid; justify-items: center; gap: 2px; text-align: center; font-size: .9rem; }
.home .ae-name span { font-family: var(--f-hud); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.home .arc-pic { display: grid; place-items: center; height: 170px; margin: 8px 0; border-radius: 10px; background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--ac) 25%, transparent), transparent 70%); }
.home .arc-pic img { max-height: 160px; max-width: 80%; object-fit: contain; transition: filter .6s; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
.home .arc-pic.sil img { filter: brightness(0) drop-shadow(0 0 8px rgba(255,255,255,.35)); }
.home .arc-res { margin-top: 8px; font-weight: 600; }
.home .arc-res.win { color: #4ade80; } .home .arc-res.lose { color: #fca5a5; }
.home .db.r { background: #da373c !important; color: #fff !important; }
.home .cave-depth { display: flex; gap: 4px; margin: 8px 0; }
.home .cave-depth i { flex: 1; height: 8px; border-radius: 3px; background: rgba(255,255,255,.08); }
.home .cave-depth i.on { background: #ffc24a; box-shadow: 0 0 8px #ffc24a; }
.home .cave-depth i.here { background: rgba(255,194,74,.35); animation: qPulse 1s ease-in-out infinite; }
.home .v2.shake { animation: h-screenShake .5s linear; }
.home .pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.home .pp-grid .v2-sel { margin: 0; }
@media (max-width: 520px) { .home .pp-grid { grid-template-columns: 1fr; } }
.home .pp-gen { margin-top: 10px; display: grid; gap: 8px; }
.home .pp-canvas { position: relative; height: 180px; border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), #1e1f22; }
.home .pp-brush { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(244,114,182,.35) 45%, rgba(255,194,74,.35) 55%, transparent 70%); background-size: 250% 100%; animation: h-ppPaint 1.4s linear infinite; }
@keyframes h-ppPaint { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.home .pp-out { display: grid; place-items: center; margin: 10px 0 6px; }
.home .pp-out img { width: 200px; height: 200px; object-fit: cover; border-radius: 14px; border: 2px solid #f472b6; box-shadow: 0 0 30px -6px #f472b6; animation: h-csSummon .9s var(--ease-out) both; }
.home .pp-out.empty { height: 120px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.2); color: #949ba4; }
.home .dx-av.pp { padding: 0; overflow: hidden; }
.home .dx-av.pp img { width: 100%; height: 100%; object-fit: cover; }
/* Egg picker: two rows of three */
.home .nest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.home .nest button { width: 100%; height: 128px; }
.home .nest button:hover { border-color: var(--c); box-shadow: 0 14px 30px -14px var(--c); }
.home .hear-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 18px 10px 14px; border: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); background: var(--bc, var(--danger)); color: #fff; transition: transform .2s var(--ease-back), filter .2s; }
.home .hear-btn:hover { transform: scale(1.05); filter: brightness(1.15); }
.home .hear-btn .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.home .hear-btn .eq i { width: 3px; height: 30%; background: currentColor; border-radius: 1px; }
.home .hear-btn.playing .eq i { animation: h-eq .6s ease-in-out infinite alternate; }
.home .hear-btn.playing .eq i:nth-child(2) { animation-delay: .15s; } .home .hear-btn.playing .eq i:nth-child(3) { animation-delay: .3s; } .home .hear-btn.playing .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes h-eq { to { height: 100%; } }
.home .pp-spr { display: block; background-image: url(/img/spr-portraits.webp); background-repeat: no-repeat; }
.home .pp-out .pp-spr { width: 200px; height: 200px; border-radius: 14px; border: 2px solid #f472b6; box-shadow: 0 0 30px -6px #f472b6; animation: h-csSummon .9s var(--ease-out) both; }
.home .dx-av.pp .pp-spr { width: 100%; height: 100%; }
@media (min-width: 901px) { .home .lu-row { left: 48.5%; } .home .party-btn { bottom: auto; top: calc(var(--nav-h) + 64px); } }
/* Hero row sizes from JS (fits its space), text column stays clear */
.home .lu-row .lu-g { --bw: var(--bwf, 14vw); }
.home .lu-row { justify-content: flex-end; }
@media (min-width: 901px) { .home .hA .hero-copy > * { max-width: min(580px, 42vw); } .home .lu-row { left: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter) + min(580px, 42vw) + 2vw); right: 1.5%; } }
@media (max-width: 900px) { .home .lu-row { justify-content: center; } }

/* Final moon: craters as real shapes that react to the cursor, and a moonlight sheen that follows it */
.home .cta-moon .moon { background: radial-gradient(circle at 50% 20%, var(--m1) 0%, var(--m2) 24%, var(--m3) 46%, var(--m4) 70%, var(--m5) 100%); }
.home .cm-craters { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.home .crater { --g: 0; position: absolute; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; will-change: transform;
  background: radial-gradient(circle at 62% 66%, rgba(255,255,255,.28), transparent 48%), radial-gradient(circle at 40% 38%, rgba(var(--shade-rgb), .38), rgba(var(--crater-rgb), .42) 62%, rgba(var(--crater-rgb), .2) 100%);
  box-shadow: inset 3px 4px 8px rgba(var(--shade-rgb), .35), inset -2px -3px 6px rgba(255,255,255,.35), 0 0 calc(4px + var(--g) * 30px) calc(var(--g) * 6px) rgba(var(--glow-rgb), calc(var(--g) * .95));
  filter: brightness(calc(1 + var(--g) * .55)) saturate(calc(1 + var(--g) * .6)); transition: filter .2s; }
.home .crater::after { content: ''; position: absolute; inset: -40%; border-radius: 50%; border: 1px solid rgba(var(--glow-rgb), calc(var(--g) * .8)); transform: scale(calc(.7 + var(--g) * .3)); opacity: var(--g); }
.home .cm-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 30%), rgba(255,255,255,.75), rgba(255,255,255,0) 22%); }
/* Final scene Lunari hover gently; hover lifts them further */
.home .cta-stage.on .cw .lu-body { animation: h-cwIn 1.1s var(--ease-out) both, h-cwFloat 5.5s ease-in-out infinite; animation-delay: calc(.3s + var(--d)), calc(1.4s + var(--d) * 4); }
@keyframes h-cwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.home .cw .lu-body { transition: translate .45s var(--ease-back), scale .45s var(--ease-back); }
.home .cw:hover .lu-body, .home .cw:focus-visible .lu-body { transform: none; translate: 0 -14px; scale: 1.06; }
@media (prefers-reduced-motion: reduce) { .home .cta-stage.on .cw .lu-body { animation: none; opacity: 1; transform: none; } }
/* Craters read as dents: shadowed upper rim, lit lower rim, flatter floor */
.home .crater { background: radial-gradient(circle at 50% 46%, rgba(var(--crater-rgb), .3), rgba(var(--crater-rgb), .18) 70%, rgba(var(--crater-rgb), .06));
  box-shadow: inset 4px 6px 9px rgba(var(--shade-rgb), .42), inset -2px -4px 5px rgba(255,255,255,.55), 0 0 calc(4px + var(--g) * 30px) calc(var(--g) * 6px) rgba(var(--glow-rgb), calc(var(--g) * .95)); }
/* Bigger hero lineup: tighter overlap, a giant centrepiece */
.home .lu-row .lu-g + .lu-g { margin-left: calc(var(--bw) * -.34 * var(--s)); }
.home .lu-row { bottom: 5.5%; }
.home .lu-star .lu-body img { filter: drop-shadow(0 0 2px rgba(var(--glow-rgb), 1)) drop-shadow(0 0 40px rgba(var(--glow-rgb), .45)) drop-shadow(0 30px 30px rgba(0,0,0,.6)); }
.home .lu-star .lu-pool { left: 10%; right: 10%; }
.home .lu-fly { width: calc(17vw * var(--s)); top: 9%; }
@media (max-width: 900px) { .home .lu-row .lu-g:nth-child(n+5) { display: flex; } .home .lu-row .lu-g:nth-child(1), .home .lu-row .lu-g:nth-child(5) { display: none; } }
@media (max-width: 900px) { .home .lu-fly { top: auto; bottom: min(100vw, 480px); width: calc(30vw * var(--s)); } .home .hA .hero-copy { padding-bottom: min(125vw, 600px); } }
@media (max-width: 900px) { .home .hero .rv-tabs { top: calc(var(--nav-h) + 6px); bottom: auto; } .home .hA .hero-copy { padding-top: calc(var(--nav-h) + 110px); } .home .lu-row { bottom: 56px; } }
@media (max-width: 900px) { .home .party-btn { bottom: auto; top: calc(var(--nav-h) + 62px); } }
.home .lu-row .lu-g + .lu-g { margin-left: calc(var(--bw) * -.48 * var(--s)); }
.home .lu-row { bottom: 3.5%; right: -1%; }
@media (min-width: 901px) { .home .lu-fly { width: calc(21vw * var(--s)); right: 2%; top: 14%; } .home .lu-row { bottom: 6%; } }
.home .fighter.boss img { filter: drop-shadow(0 0 16px var(--ac)); }
.home .bf-bench { display: flex; gap: 6px; margin: 8px 0 2px; }
.home .bf-mate { width: 34px; height: 34px; border-radius: 8px; background: #1e1f22; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; }
.home .bf-mate img { width: 28px; height: 28px; object-fit: contain; }
.home .bf-mate.on { border-color: #23a55a; box-shadow: 0 0 8px #23a55a; }
.home .bf-mate.down { opacity: .35; filter: grayscale(1); }
.home .rf-anats button:disabled { opacity: .35; cursor: not-allowed; }
/* Final build: hide every review tool */
html.final .home .rv-tabs, html.final .home .rv-fab, html.final .home .rv-panel { display: none !important; }
.home #scratchBox.instant canvas, .home #scratchBox.instant * { transition: none !important; animation: none !important; }
.home .dx-hud-x { display: none; justify-self: end; padding: 6px 12px; border-radius: 6px; border: 0; background: #4e5058; color: #fff; font-size: .82rem; font-weight: 600; position: sticky; top: 0; z-index: 2; }
@media (max-width: 1180px) { .home .dx-hud-x { display: block; } }
/* Worlds: the 21:9 frame with a 380px minimum height forced it ~890px wide on phones. Fix its width, let height grow. */
.home .jview { width: 100%; }
@media (max-width: 900px) { .home .jview { aspect-ratio: auto; height: clamp(380px, 110vw, 520px); min-height: 0; } .home .jcap { right: 14px; max-width: none; } .home .jcap h3 { font-size: clamp(2.2rem, 11vw, 3.4rem); } .home .jview > .btn { top: 12px; right: 12px; padding: 8px 12px; font-size: .62rem; } }
/* Old crowd rules targeted .crowd img (and hid the 1st/2nd/8th/9th on phones); the creatures now live inside .cw, so reset them. */
.home .crowd .cw img { display: block !important; flex: none; height: 100%; width: 100%; transform: none; }
@media (max-width: 800px) { .home .cw { --bw: 23vw; } }
/* Phones: the hero scene fills the screen width; big moon, big creatures, big flyer */
@media (max-width: 900px) {
  .home .lu-row { left: 0 !important; right: 0 !important; bottom: 52px; justify-content: center; }
  .home .hA .hero-copy { padding-bottom: min(150vw, 700px); }
  .home .hA-moonwrap { width: 125vw; right: -12vw; bottom: min(42vw, 230px); top: auto; }
  .home .lu-fly { width: calc(46vw * var(--s)); right: 2%; bottom: min(118vw, 560px); top: auto; }
}
/* Phones: starters as rows (picture, name + element, small Choose button) */
@media (max-width: 760px) {
  .home .starters { grid-template-columns: 1fr; gap: 6px; }
  .home .starter { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 10px; row-gap: 0; padding: 6px 10px 6px 6px; text-align: left; background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), #1e1f22; }
  .home .starter > img { grid-row: span 2; width: 56px; height: 56px; }
  .home .starter b { font-size: .92rem; align-self: end; }
  .home .starter small { align-self: start; }
  .home .starter .db { grid-column: 3; grid-row: 1 / span 2; padding: 6px 12px; font-size: .8rem; }
}
/* Phones: a whole, round moon on the right; creatures sit right of centre and fully on screen */
@media (max-width: 900px) {
  .home .hA-moonwrap { width: 88vw; right: 2vw; bottom: min(30vw, 170px); }
  .home .lu-row { left: 4% !important; right: 2% !important; justify-content: flex-end; }
}
@media (max-width: 900px) { .home .hA-moonwrap { width: 92vw; right: 4vw; bottom: min(62vw, 330px); } }
@media (max-width: 900px) { .home .hA-moonwrap { width: 100vw; right: 0; bottom: min(56vw, 300px); } .home .lu-fly { bottom: min(104vw, 490px); } }
@media (max-width: 900px) { .home .hA-moonwrap { width: 114vw; right: -7vw; bottom: min(50vw, 270px); } .home .lu-fly { bottom: min(90vw, 425px); } }
/* Hero legibility when the moon sits behind the copy (narrow windows): dark halo, glass buttons, no boxes */
@media (max-width: 900px) {
  .home .hA .hero-title .line { text-shadow: 0 2px 4px rgba(10,7,5,.55), 0 0 22px rgba(10,7,5,.65), 0 0 60px rgba(10,7,5,.55); }
  .home .hA .hero-title .line.gold { filter: drop-shadow(0 2px 3px rgba(10,7,5,.7)) drop-shadow(0 0 18px rgba(10,7,5,.6)); text-shadow: none; }
  .home .hA .h1-kicker { color: #ffb58a; text-shadow: 0 1px 2px rgba(10,7,5,.9), 0 0 14px rgba(10,7,5,.8); }
  .home .hA .hero-sub { color: #fff6ea; text-shadow: 0 1px 2px rgba(10,7,5,.95), 0 0 12px rgba(10,7,5,.85), 0 0 30px rgba(10,7,5,.6); }
  .home .hA .hero-sub b { color: #ffd98a; }
  .home .hA .hero-cta .btn-ghost { background: rgba(14,10,8,.62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: #fff6ea; box-shadow: inset 0 0 0 1px rgba(255,236,210,.28), 0 10px 30px rgba(0,0,0,.35); }
  .home .hA .hero-status, .home .hA .hero-status * { text-shadow: 0 1px 2px rgba(10,7,5,.95), 0 0 10px rgba(10,7,5,.85); }
  .home .hA .hero-status { color: #f3e6d6; }
}
@media (max-width: 900px) { .home .hA .hero-badge span { background: rgba(14,10,8,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff6ea; text-shadow: none; } }
@media (max-width: 900px) { .home .hA .hero-title .line { text-shadow: none; filter: drop-shadow(0 2px 3px rgba(10,7,5,.7)) drop-shadow(0 0 16px rgba(10,7,5,.55)); } .home .hA .hero-status > * { color: #f3e6d6 !important; opacity: 1 !important; } .home .hA .hero-status .live, .home .hA .hero-status > :first-child { color: #4ade80 !important; } }
@media (max-width: 900px) { .home .hA .hero-fine > span { color: #f3e6d6 !important; opacity: 1 !important; filter: drop-shadow(0 1px 2px rgba(10,7,5,.95)) drop-shadow(0 0 8px rgba(10,7,5,.8)); } .home .hA .hero-fine > .live-dot { color: #4ade80 !important; } .home .hA .h1-kicker { color: #ffd2b3; text-shadow: none; filter: drop-shadow(0 1px 2px rgba(10,7,5,.95)) drop-shadow(0 0 10px rgba(10,7,5,.75)); } }

/* Desktop: creature row pinned right, sized by home.js fit() to the space right of the hero text */
@media (min-width: 901px) { .home .lu-row { justify-content: flex-end; right: -1%; } }