/* ============================================================
   Nanami · Moonlit Seal (月夜星阁) — design system extension
   Ported from Claude Design bundle Nanami Tavern Designs v3.
   Adds the night-sky, 3D parallax, breathing seal + brass-ring
   aesthetic on top of the existing nanami.css tavern palette.
   Loaded by templates that opt in via {% block head_extra %}.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Caveat:wght@500;600;700&family=Libre+Caslon+Text:ital@0;1&display=swap');

:root {
  --ml-night-1:   oklch(0.08 0.04 280);  /* deep indigo top */
  --ml-night-2:   oklch(0.06 0.03 50);   /* warm ember floor */
  --ml-nebula-1:  oklch(0.20 0.10 280);
  --ml-nebula-2:  oklch(0.22 0.10 50);
  --ml-nebula-3:  oklch(0.30 0.14 320);
  --ml-star:      oklch(0.95 0.05 80);
  --ml-star-hot:  oklch(0.92 0.18 60);
  --ml-amber:     oklch(0.85 0.18 70);
  --ml-amber-d:   oklch(0.55 0.16 50);
  --ml-amber-r:   oklch(0.78 0.10 70);    /* ring tick */
  --ml-text:      oklch(0.96 0.05 70);
  --ml-text-sub:  oklch(0.82 0.12 70);
  --ml-text-mute: oklch(0.65 0.08 60);
}

.font-cinzel { font-family: 'Cinzel', 'EB Garamond', serif; letter-spacing: 0.08em; }
.font-caveat { font-family: 'Caveat', cursive; }
.font-caslon { font-family: 'Libre Caslon Text', 'EB Garamond', serif; }
.font-cn-ml  { font-family: 'LXGW WenKai', 'EB Garamond', serif; }
.score-num   { font-family: 'Cinzel', 'EB Garamond', serif; font-weight: 700;
               font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* ─── MOONLIT SKY · parallax + breathing ──────────────────────────
   NOTE: alpha must live INSIDE oklch() — the earlier `var(--x) / .85`
   form is invalid CSS and silently dropped the nebula layers, which
   left a muddy flat base. Inline oklch(... / a) restores the deep,
   vivid indigo→violet→amber night sky from the design mockup. ───── */
.moonlit-sky {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --mx: 0;
  --my: 0;
  background:
    radial-gradient(ellipse 72% 52% at 50% 24%, oklch(0.24 0.12 280 / .82), transparent 64%),  /* indigo crown */
    radial-gradient(ellipse 46% 42% at 83% 30%, oklch(0.34 0.16 322 / .42), transparent 70%),  /* magenta top-right */
    radial-gradient(ellipse 52% 48% at 88% 64%, oklch(0.30 0.14 262 / .38), transparent 70%),  /* blue mid-right */
    radial-gradient(ellipse 42% 44% at 12% 56%, oklch(0.27 0.13 300 / .32), transparent 70%),  /* violet left */
    radial-gradient(ellipse 95% 58% at 50% 104%, oklch(0.34 0.14 55 / .58), transparent 74%),  /* warm amber floor */
    linear-gradient(180deg, oklch(0.07 0.045 282) 0%, oklch(0.06 0.035 300) 46%, oklch(0.06 0.035 45) 100%);
  color: var(--ml-text);
}
/* drifting aurora — a big soft blob slowly wandering for living depth.
   GSAP nudges --au-x/--au-y in moonlit.js; falls back to a CSS keyframe. */
.ml-aurora {
  position: absolute;
  inset: -10% -10% 0 -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 36% at calc(28% + var(--au-x, 0px)) calc(34% + var(--au-y, 0px)),
      oklch(0.40 0.17 300 / .26), transparent 60%),
    radial-gradient(ellipse 44% 40% at calc(74% - var(--au-x, 0px)) calc(56% + var(--au-y, 0px)),
      oklch(0.40 0.16 258 / .22), transparent 62%);
  filter: blur(36px);
  animation: ml-aurora-fallback 26s ease-in-out infinite alternate;
}
@keyframes ml-aurora-fallback {
  from { transform: translate3d(-12px, -8px, 0) scale(1); }
  to   { transform: translate3d(14px, 10px, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .ml-aurora { animation: none; }
}

.ml-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.ml-far   { transform: translate3d(calc(var(--mx) * -8px),   calc(var(--my) * -6px),  0); }
.ml-mid   { transform: translate3d(calc(var(--mx) * -22px),  calc(var(--my) * -16px), 0); }
.ml-near  { transform: translate3d(calc(var(--mx) * -42px),  calc(var(--my) * -32px), 0); }
.ml-front { transform: translate3d(calc(var(--mx) * -64px),  calc(var(--my) * -48px), 0); }

.ml-seal-wrap {
  position: relative;
  display: inline-block;
  will-change: transform;
  transform:
    translate3d(calc(var(--mx) * 12px), calc(var(--my) * 10px), 0)
    perspective(1200px)
    rotateY(calc(var(--mx) * 4deg))
    rotateX(calc(var(--my) * -4deg));
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ml-seal {
  animation: ml-breathe 5.5s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 22px oklch(0.85 0.18 60 / .35))
    drop-shadow(0 4px 16px rgba(0,0,0,.6));
  display: block;
}
@keyframes ml-breathe {
  from { transform: scale(1);     filter: drop-shadow(0 0 22px oklch(0.85 0.18 60 / .3))  drop-shadow(0 4px 16px rgba(0,0,0,.6)); }
  to   { transform: scale(1.035); filter: drop-shadow(0 0 36px oklch(0.92 0.20 60 / .55)) drop-shadow(0 4px 16px rgba(0,0,0,.6)); }
}

.ml-halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: ml-halo 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ml-halo {
  from { opacity: .50; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: .85; transform: translate(-50%, -50%) scale(1.08); }
}

.ml-rot     { animation: ml-rot     80s linear infinite; transform-origin: 50% 50%; }
.ml-rot-rev { animation: ml-rot-rev 120s linear infinite; transform-origin: 50% 50%; }
@keyframes ml-rot     { to { transform: rotate(360deg); } }
@keyframes ml-rot-rev { to { transform: rotate(-360deg); } }

.ml-sparkle {
  position: absolute;
  animation: ml-sparkle-anim var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes ml-sparkle-anim {
  0%, 100% { opacity: 0;  transform: scale(.6); }
  50%      { opacity: 1;  transform: scale(1.1); }
}

.ml-comet {
  position: absolute;
  animation: ml-comet-anim 9s linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes ml-comet-anim {
  0%   { opacity: 0;  transform: translate(-200px, -100px) rotate(20deg); }
  10%  { opacity: .9; }
  60%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(900px, 350px) rotate(20deg); }
}

/* Far-star twinkle (CSS-only fallback when SVG isn't used) */
.ml-twinkle { animation: ml-twinkle 3.4s ease-in-out infinite alternate; }
@keyframes ml-twinkle {
  from { opacity: .18; }
  to   { opacity: .85; }
}

/* ─── CONSTELLATION CARD — dark glass with brass nail corners ─── */
.constellation-card {
  position: relative;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, oklch(0.32 0.10 60 / .25), transparent 70%),
    linear-gradient(180deg, oklch(0.20 0.05 50 / .92), oklch(0.14 0.04 45 / .92));
  border: 1px solid oklch(0.45 0.10 60);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 oklch(0.55 0.12 70 / .35),
    inset 0 0 80px oklch(0.42 0.16 50 / .12),
    0 12px 32px rgba(0,0,0,.5);
  color: oklch(0.92 0.05 60);
}
.constellation-card::before,
.constellation-card::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: radial-gradient(circle at 30% 30%,
    oklch(0.88 0.10 80), oklch(0.55 0.12 75) 70%, oklch(0.30 0.06 60));
  border-radius: 50%;
  box-shadow: inset 0 -1px 1px oklch(0.20 0.04 50 / .7), 0 1px 2px rgba(0,0,0,.6);
}
.constellation-card::before { top: 8px;  left: 8px;  }
.constellation-card::after  { top: 8px;  right: 8px; }

.constellation-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.78 0.10 70 / .55), transparent);
}

/* ─── BRASS / EMBER CTA — gold-pour button (Moonlit variant)
   Inherits .btn from nanami.css; that base ships a :hover that fades the
   text away (sets color to a transparent ink), which on dark moonlit pages
   makes the label disappear. We force text/border/shadow with !important
   so the hover state stays legible. ────────────────────────────────────── */
.btn.btn-moon {
  background: linear-gradient(180deg, oklch(0.82 0.18 70), oklch(0.55 0.18 50)) !important;
  color: oklch(0.18 0.04 40) !important;
  border: 1px solid oklch(0.32 0.10 45) !important;
  box-shadow:
    inset 0 1px 0 oklch(0.95 0.10 70 / .65),
    inset 0 -1px 0 oklch(0.30 0.10 45 / .55),
    0 4px 14px oklch(0.40 0.16 50 / .45) !important;
  text-shadow: 0 1px 0 oklch(0.92 0.10 70 / .4);
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: transform .12s ease, filter .12s ease, box-shadow .15s ease;
}
.btn.btn-moon:hover {
  color: oklch(0.12 0.04 40) !important;       /* keep label dark on gold */
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 oklch(0.95 0.10 70 / .8),
    inset 0 -1px 0 oklch(0.30 0.10 45 / .55),
    0 6px 18px oklch(0.55 0.20 55 / .55),
    0 0 0 2px oklch(0.85 0.18 70 / .25) !important;
}
.btn.btn-moon:active { transform: translateY(0); filter: brightness(.96); }

.btn.btn-ghost-moon {
  color: oklch(0.92 0.06 70) !important;
  background: oklch(0.15 0.04 50 / .55) !important;
  border: 1px solid oklch(0.65 0.10 70) !important;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  transition: background .15s, color .15s, border-color .15s;
}
.btn.btn-ghost-moon:hover {
  color: oklch(0.98 0.10 75) !important;
  background: oklch(0.25 0.08 55 / .75) !important;
  border-color: var(--ml-amber) !important;
  box-shadow: 0 0 18px oklch(0.55 0.18 60 / .35), inset 0 1px 0 oklch(0.65 0.18 70 / .25);
}

/* ─── COUNTDOWN CHIP — for World Cup live tile ─────────────── */
.cd-chip {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 28px;
  background: oklch(0.14 0.04 50 / .85);
  border: 1px solid oklch(0.55 0.16 60);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 oklch(0.65 0.16 70 / .35),
    0 6px 22px rgba(0,0,0,.5);
}
.cd-num {
  display: flex; flex-direction: column; align-items: center;
  min-width: 56px;
}
.cd-num strong, .cd-num b {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ml-amber);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px oklch(0.85 0.18 60 / .55);
}
.cd-num span {
  margin-top: 2px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.30em;
  color: oklch(0.72 0.08 70);
}
.cd-sep {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  color: oklch(0.88 0.04 60);
  opacity: .4;
}
.cd-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: oklch(0.82 0.18 60);
  box-shadow: 0 0 12px oklch(0.85 0.18 60 / .8);
  animation: ml-pulse-amber 2.2s infinite;
}
@keyframes ml-pulse-amber {
  0% { box-shadow: 0 0 0 0 oklch(0.85 0.18 60 / .7); }
  70% { box-shadow: 0 0 0 10px oklch(0.85 0.18 60 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.85 0.18 60 / 0); }
}

/* ─── STADIUM HORIZON — receding pitch grid for WC hero ──── */
.stadium-floor {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 200%;
  height: 50%;
  transform: translateX(-50%) perspective(600px) rotateX(58deg);
  transform-origin: center top;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 36px,
      oklch(0.45 0.10 60 / .15) 36px, oklch(0.45 0.10 60 / .15) 38px),
    repeating-linear-gradient(0deg, transparent 0, transparent 56px,
      oklch(0.45 0.10 60 / .12) 56px, oklch(0.45 0.10 60 / .12) 58px),
    linear-gradient(180deg, transparent, oklch(0.22 0.10 50 / .35));
  mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, black 30%, transparent 80%);
  pointer-events: none;
}

.trophy-glow {
  filter:
    drop-shadow(0 0 24px oklch(0.85 0.20 70 / .55))
    drop-shadow(0 0 8px oklch(0.95 0.15 80 / .35))
    drop-shadow(0 6px 20px rgba(0,0,0,.7));
}

/* ─── GROUP / KNOCKOUT CARDS for WC page ─────────────────── */
.wc-group {
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid oklch(0.40 0.10 60 / .6);
  background: linear-gradient(180deg, oklch(0.18 0.05 50 / .85), oklch(0.12 0.04 45 / .85));
  color: oklch(0.92 0.06 70);
  display: flex; flex-direction: column; gap: 8px;
}
.wc-group-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid oklch(0.35 0.08 60 / .5); padding-bottom: 6px;
}
.wc-group-letter {
  font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ml-amber);
}
.wc-team-row {
  display: grid; grid-template-columns: 22px 1fr 36px 30px;
  gap: 8px; align-items: center;
  padding: 5px 0;
  font-family: 'EB Garamond', 'LXGW WenKai', serif;
  font-size: 13px;
  border-top: 1px solid oklch(0.28 0.06 60 / .4);
}
.wc-team-row:first-child { border-top: 0; }
.wc-team-row.advance { background: oklch(0.32 0.10 60 / .18); border-radius: 2px; }
.wc-flag { font-size: 18px; line-height: 1; }
.wc-pts  { font-family: 'Cinzel', serif; text-align: right; color: var(--ml-amber); font-weight: 600; }
.wc-gd   { text-align: right; font-family: 'JetBrains Mono', monospace;
           font-size: 11px; color: oklch(0.72 0.05 70); }

/* knockout funnel — 32→16→8→4→2→1 */
.ko-funnel {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  align-items: center;
}
.ko-step {
  text-align: center;
  padding: 14px 8px;
  border: 1px solid oklch(0.45 0.10 60 / .6);
  background: linear-gradient(180deg, oklch(0.20 0.05 50 / .8), oklch(0.12 0.04 45 / .8));
  border-radius: 4px;
}
.ko-step strong, .ko-step b {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 28px; line-height: 1; font-weight: 700;
  color: var(--ml-amber);
  font-variant-numeric: tabular-nums;
}
.ko-step span {
  display: block; margin-top: 6px;
  font-family: 'Cinzel', serif;
  font-size: 9px; letter-spacing: 0.30em;
  color: oklch(0.72 0.08 70);
}

/* progress pill for "qualify probability" */
.prob-pill {
  position: relative;
  height: 6px;
  background: oklch(0.10 0.03 50);
  border: 1px solid oklch(0.35 0.08 60 / .5);
  border-radius: 999px;
  overflow: hidden;
}
.prob-pill > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, oklch(0.55 0.18 50), oklch(0.85 0.18 70));
  box-shadow: inset 0 1px 0 oklch(0.95 0.15 80 / .55);
  transform-origin: left;
  transform: scaleX(0);
  animation: prob-grow 1.4s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes prob-grow { to { transform: scaleX(var(--p, 0.5)); } }

/* ─── AMBIENT DRIFT — when mouse is idle, layers gently breathe in & out
   so the page never looks frozen. Driven by --auto-x / --auto-y CSS vars
   that moonlit.js sets via a slow sine. The .moonlit-sky composite then
   uses var(--mx, var(--auto-x, 0)) so user input overrides drift. ───── */
@keyframes ml-ambient-x { 0%, 100% { } 50% { } } /* placeholder */
.moonlit-sky {
  /* override the parallax layer transforms to pick up auto fallback */
  --eff-x: var(--mx, var(--auto-x, 0));
  --eff-y: var(--my, var(--auto-y, 0));
}
.ml-far   { transform: translate3d(calc(var(--eff-x, 0) * -8px),   calc(var(--eff-y, 0) * -6px),  0); }
.ml-mid   { transform: translate3d(calc(var(--eff-x, 0) * -22px),  calc(var(--eff-y, 0) * -16px), 0); }
.ml-near  { transform: translate3d(calc(var(--eff-x, 0) * -42px),  calc(var(--eff-y, 0) * -32px), 0); }
.ml-front { transform: translate3d(calc(var(--eff-x, 0) * -64px),  calc(var(--eff-y, 0) * -48px), 0); }
.ml-seal-wrap {
  transform:
    translate3d(calc(var(--eff-x, 0) * 12px), calc(var(--eff-y, 0) * 10px), 0)
    perspective(1200px)
    rotateY(calc(var(--eff-x, 0) * 4deg))
    rotateX(calc(var(--eff-y, 0) * -4deg));
}

/* ─── INFO PILL — single-row status strip (replaces tavern banners) ─── */
.info-pill {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: linear-gradient(180deg, oklch(0.18 0.05 50 / .85), oklch(0.12 0.04 45 / .85));
  border: 1px solid oklch(0.42 0.10 60 / .55);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 oklch(0.55 0.12 70 / .25),
    inset 0 0 80px oklch(0.42 0.16 50 / .08),
    0 8px 26px rgba(0,0,0,.45);
  overflow: hidden;
  color: oklch(0.92 0.05 60);
}
.info-pill > .ip-cell {
  flex: 1;
  padding: 18px 22px;
  border-right: 1px solid oklch(0.30 0.06 60 / .4);
  text-align: center;
  position: relative;
}
.info-pill > .ip-cell:last-child { border-right: 0; }
.info-pill > .ip-cell .ip-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.36em;
  color: oklch(0.75 0.08 70);
}
.info-pill > .ip-cell .ip-val {
  margin-top: 6px;
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--ml-amber);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px oklch(0.85 0.18 60 / .35);
}
.info-pill > .ip-cell .ip-sub {
  margin-top: 4px;
  font-family: 'LXGW WenKai', 'EB Garamond', serif;
  font-size: 12px;
  color: oklch(0.72 0.05 70);
}

/* ─── FEATURE CARD — for the rewritten home: large changelog + ── */
.feat-card {
  position: relative;
  padding: 28px 32px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, oklch(0.32 0.10 60 / .22), transparent 70%),
    linear-gradient(180deg, oklch(0.18 0.05 50 / .9), oklch(0.10 0.04 42 / .9));
  border: 1px solid oklch(0.42 0.10 60 / .65);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 oklch(0.55 0.12 70 / .35),
    inset 0 0 100px oklch(0.42 0.16 50 / .1),
    0 14px 36px rgba(0,0,0,.5);
  color: oklch(0.92 0.05 60);
  overflow: hidden;
}
.feat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 10%, oklch(0.85 0.18 70 / .14), transparent 40%);
}
.feat-card.is-glow {
  border-color: oklch(0.65 0.18 70 / .7);
  box-shadow:
    inset 0 1px 0 oklch(0.65 0.18 70 / .4),
    inset 0 0 120px oklch(0.55 0.20 50 / .14),
    0 0 48px oklch(0.55 0.18 60 / .35),
    0 14px 36px rgba(0,0,0,.5);
}
.feat-card .fc-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--ml-amber);
}
.feat-card .fc-title {
  margin: 8px 0 6px;
  font-family: 'Cinzel', 'EB Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: oklch(0.96 0.04 70);
  line-height: 1.2;
}
.feat-card .fc-cn {
  font-family: 'LXGW WenKai', serif;
  font-size: 16px;
  color: oklch(0.85 0.06 60);
}
.feat-card .fc-body {
  font-family: 'LXGW WenKai', 'EB Garamond', serif;
  font-size: 14px;
  color: oklch(0.80 0.04 60);
  line-height: 1.75;
}

/* ─── NAV CHIP — small "go to feature" pill, replaces paper-panel cards ─ */
.nav-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(180deg, oklch(0.18 0.05 50 / .8), oklch(0.12 0.04 45 / .8));
  border: 1px solid oklch(0.42 0.10 60 / .55);
  border-radius: 6px;
  text-decoration: none;
  color: oklch(0.92 0.06 70);
  transition: transform .15s ease, border-color .15s, box-shadow .15s, background .15s;
  box-shadow: inset 0 1px 0 oklch(0.55 0.12 70 / .22);
}
.nav-chip:hover {
  transform: translateY(-2px);
  border-color: var(--ml-amber);
  background: linear-gradient(180deg, oklch(0.22 0.06 55 / .9), oklch(0.14 0.05 48 / .9));
  box-shadow: 0 8px 22px oklch(0.55 0.16 55 / .35),
              inset 0 1px 0 oklch(0.65 0.18 70 / .35);
}
.nav-chip .nc-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    oklch(0.55 0.18 60), oklch(0.30 0.10 45) 70%);
  color: oklch(0.96 0.10 70);
  font-size: 20px;
  box-shadow: inset 0 1px 0 oklch(0.85 0.18 70 / .35), 0 2px 6px rgba(0,0,0,.5);
}
.nav-chip .nc-title {
  font-family: 'LXGW WenKai', 'EB Garamond', serif;
  font-size: 15px;
  color: oklch(0.96 0.04 70);
  letter-spacing: 0.08em;
}
.nav-chip .nc-sub {
  margin-top: 2px;
  font-family: 'LXGW WenKai', serif;
  font-size: 12px;
  color: oklch(0.72 0.05 70);
}
.nav-chip .nc-arrow {
  margin-left: auto;
  font-family: 'Cinzel', serif;
  color: var(--ml-amber);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .15s, transform .15s;
}
.nav-chip:hover .nc-arrow { opacity: 1; transform: translateX(0); }

/* ─── ADMIN SUBNAV — World Cup group on sidebar (matches existing
     .admin-subnav already used for shop). ──────────────────────── */
.admin-subnav .wc-sub {
  font-size: 0.85rem;
}

/* reduced motion — kill the animation noise but keep the visual */
@media (prefers-reduced-motion: reduce) {
  /* This is a decorative gaming hero and the owner has explicitly opted
     into motion. We intentionally KEEP the gentle mouse-parallax + the
     starfield alive even under OS reduce-motion (do NOT force transform:none
     on .ml-layer/.ml-seal-wrap — that previously froze the whole hero).
     Only the data progress-bar fill is shown statically. */
  .prob-pill > i { animation: none; transform: scaleX(var(--p, 0.5)); }
}

/* nav-active marker — for the Moonlit top bar variant
   (works alongside the existing site-header) */
.site-header.is-moonlit {
  background:
    linear-gradient(180deg, oklch(0.14 0.04 50 / .92), oklch(0.10 0.03 45 / .92));
  border-bottom-color: oklch(0.42 0.10 60 / .6);
  box-shadow:
    inset 0 -2px 0 oklch(0.62 0.16 60 / .35),
    0 1px 0 rgba(255,255,255,.04);
}
.site-header.is-moonlit .brand .name,
.site-header.is-moonlit .brand .sub,
.site-header.is-moonlit .main-nav a {
  color: oklch(0.92 0.06 70);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.site-header.is-moonlit .main-nav a.active {
  color: var(--ml-amber);
  border-bottom-color: var(--ml-amber-d);
}

/* Mobile tweaks — keep things from collapsing badly */
@media (max-width: 760px) {
  .cd-chip { gap: 10px; padding: 10px 14px; flex-wrap: wrap; justify-content: center; }
  .cd-num { min-width: 44px; }
  .cd-num strong, .cd-num b { font-size: 22px; }
  .ko-funnel { grid-template-columns: repeat(3, 1fr); }
}

/* ── HERO_MOBILE_TUNING — phones: full-width stacked CTAs + tighter eyebrow ── */
@media (max-width: 560px) {
  /* eyebrow: .42em tracking overflows on narrow screens and breaks mid-phrase */
  .ml-hero-eyebrow { letter-spacing: .2em !important; font-size: 9px !important; }
  /* CTAs: turn the uneven 2+1 wrap into a clean centred full-width stack */
  .ml-hero-cta { flex-direction: column; flex-wrap: nowrap; align-items: stretch;
                 width: min(320px, 86vw); gap: 10px; }
  .ml-hero-cta .btn { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   BORDER GLOW — React Bits "BorderGlow", ported to vanilla.
   A directional cone of amber/bronze light tracks the pointer near
   the card edge (the 图2 effect). Driven by --edge-proximity (0..100)
   and --cursor-angle (deg) which moonlit.js sets per-instance on
   pointermove. All colour vars default to the moonlit amber palette,
   so JS only needs to feed proximity + angle.
   ════════════════════════════════════════════════════════════════ */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 26;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 8px;
  --glow-padding: 42px;
  --cone-spread: 26;
  --fill-opacity: 0.5;
  --card-bg: #15110a;             /* warm moonlit near-black */

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid oklch(0.55 0.10 70 / 38%);
  background: var(--card-bg);
  overflow: visible;
  box-shadow:
    rgba(0,0,0,.18) 0 1px 2px,
    rgba(0,0,0,.16) 0 2px 4px,
    rgba(0,0,0,.14) 0 4px 8px,
    rgba(0,0,0,.12) 0 8px 16px,
    rgba(0,0,0,.10) 0 16px 32px,
    rgba(0,0,0,.10) 0 32px 64px;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}
.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border (amber/bronze/moonlight) */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one,   radial-gradient(at 80% 55%, hsla(42, 80%, 70%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two,   radial-gradient(at 69% 34%, hsla(30, 78%, 56%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%,   hsla(216, 40%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four,  radial-gradient(at 41% 38%, hsla(42, 80%, 70%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five,  radial-gradient(at 86% 85%, hsla(30, 78%, 56%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six,   radial-gradient(at 82% 18%, hsla(216, 40%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%,  hsla(30, 78%, 56%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base,  linear-gradient(#E8B860 0 100%)) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one,   radial-gradient(at 80% 55%, hsla(42, 80%, 70%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two,   radial-gradient(at 69% 34%, hsla(30, 78%, 56%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%,   hsla(216, 40%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four,  radial-gradient(at 41% 38%, hsla(42, 80%, 70%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five,  radial-gradient(at 86% 85%, hsla(30, 78%, 56%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six,   radial-gradient(at 82% 18%, hsla(216, 40%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%,  hsla(30, 78%, 56%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base,  linear-gradient(#E8B860 0 100%)) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image:
    conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px  var(--glow-color,    hsl(42deg 80% 70% / 100%)),
    inset 0 0 1px 0  var(--glow-color-60, hsl(42deg 80% 70% / 60%)),
    inset 0 0 3px 0  var(--glow-color-50, hsl(42deg 80% 70% / 50%)),
    inset 0 0 6px 0  var(--glow-color-40, hsl(42deg 80% 70% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(42deg 80% 70% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(42deg 80% 70% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(42deg 80% 70% / 10%)),
    0 0 1px 0  var(--glow-color-60, hsl(42deg 80% 70% / 60%)),
    0 0 3px 0  var(--glow-color-50, hsl(42deg 80% 70% / 50%)),
    0 0 6px 0  var(--glow-color-40, hsl(42deg 80% 70% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(42deg 80% 70% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(42deg 80% 70% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(42deg 80% 70% / 10%));
}
.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* The owner explicitly wants the mouse-follow sweep highlight, so we do
   NOT suppress the BorderGlow cone under OS reduce-motion — its opacity is
   driven by --edge-proximity (pointer), i.e. user-initiated, not auto-motion. */

/* ════════════════════════════════════════════════════════════════
   SHINE RING — always-on traveling light around a card border.
   A thin conic-gradient arc continuously rotates (GSAP drives
   --shine-angle in moonlit.js; CSS @property lets it interpolate).
   This is the *dynamic* layer that runs without any pointer input,
   sitting on top of the hover-reactive BorderGlow cone. Injected by
   moonlit.js into every .border-glow-card as <span class="shine-ring">.
   ════════════════════════════════════════════════════════════════ */
@property --shine-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.shine-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;                 /* ring thickness */
  pointer-events: none;
  z-index: 4;
  background: conic-gradient(
    from var(--shine-angle),
    transparent 0deg,
    transparent 232deg,
    oklch(0.70 0.13 60 / .35) 286deg,
    oklch(0.88 0.16 75 / .85) 320deg,
    oklch(0.98 0.10 85 / 1)   332deg,
    oklch(0.88 0.16 75 / .85) 344deg,
    oklch(0.70 0.13 60 / .35) 360deg
  );
  /* mask to just the border ring (exclude the interior) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mix-blend-mode: screen;
  opacity: .92;
}
/* a second, slower counter-rotating faint arc for depth */
.shine-ring.shine-ring-2 {
  z-index: 3;
  padding: 1px;
  opacity: .5;
  background: conic-gradient(
    from var(--shine-angle),
    transparent 0deg,
    transparent 250deg,
    oklch(0.80 0.12 250 / .5) 312deg,   /* moonlight-blue accent */
    oklch(0.92 0.10 240 / .9) 330deg,
    oklch(0.80 0.12 250 / .5) 348deg,
    transparent 360deg
  );
}

@media (prefers-reduced-motion: reduce) {
  .shine-ring { animation: none; opacity: .4; }
}

/* scroll cue — gentle bob at the bottom of the hero */
.ml-scroll-cue { animation: ml-bob 1.8s ease-in-out infinite; }
@keyframes ml-bob {
  0%, 100% { transform: translateY(0);  opacity: .45; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-scroll-cue { animation: none; }
}

/* ─── 3D STARFIELD CANVAS (Three.js) ─────────────────────────────
   Sits above the nebula gradient + aurora, below the hero content.
   pointer-events:none so the CTAs stay clickable; the parallax
   mousemove is bound on .moonlit-sky itself. When moonlit-3d.js
   confirms WebGL it adds .ml-3d-on to the sky, which hides the CSS
   fallback star layers (so they don't double up with the GL stars). */
.ml-three-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.moonlit-sky.ml-3d-on .ml-fallback-stars { display: none; }
.ml-fallback-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ─── MOBILE OVERFLOW GUARDS ─────────────────────────────────────
   On phones two things caused horizontal overflow (a side strip):
   1. grid/flex items default to min-width:auto, so a nowrap title
      (changelog chips) forced the column wider than the viewport;
   2. the BorderGlow outer .edge-light uses inset:-glow-padding (~46px),
      bleeding past the screen edge.
   Fix both at the source so nothing overflows. */
.nav-chip { min-width: 0; }
.nav-chip > div { min-width: 0; }
.nav-chip .nc-title, .nav-chip .nc-sub { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  /* keep the directional glow inside the viewport on small screens */
  .border-glow-card { --glow-padding: 14px !important; }
  .border-glow-card > .edge-light { inset: -14px !important; }
}

/* ════════════════════════════════════════════════════════════════
   REACT-BITS-INSPIRED EFFECTS (World Cup) — kept tasteful/subtle.
   ════════════════════════════════════════════════════════════════ */

/* ── Gradient Text — flowing gold shimmer on a heading ──────────── */
.ml-grad-text {
  background-image: linear-gradient(100deg,
    oklch(0.90 0.10 78) 0%, oklch(0.99 0.14 86) 25%, oklch(0.80 0.17 66) 50%,
    oklch(0.99 0.14 86) 75%, oklch(0.90 0.10 78) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 26px oklch(0.62 0.18 55 / .4)) drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation: ml-grad-flow 7s ease-in-out infinite;
}
@keyframes ml-grad-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Circular Text — text on a ring, slowly rotating ────────────── */
.ml-circ-text { animation: ml-rot 30s linear infinite; transform-origin: 50% 50%; }
.ml-circ-text text { fill: oklch(0.82 0.12 74); letter-spacing: 2px;
  font-family: 'Cinzel','EB Garamond',serif; font-weight: 600; }

/* ── Light Rays — soft god-rays from a centre point ─────────────── */
.ml-light-rays {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 44%, #000 8%, transparent 70%);
          mask-image: radial-gradient(ellipse 58% 56% at 50% 44%, #000 8%, transparent 70%);
}
.ml-light-rays::before {
  content: ''; position: absolute; left: 50%; top: 44%;
  width: 200%; height: 200%; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    oklch(0.88 0.16 72 / .10) 0deg, transparent 5deg,
    transparent 13deg, oklch(0.88 0.16 72 / .10) 18deg);
  animation: ml-rays-spin 64s linear infinite;
}
@keyframes ml-rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Star ProfileCard — pointer holo shine + glare + 3D tilt ─────
 *  Faithful to reactbits ProfileCard: a glassy holographic card whose
 *  shine/glare track the pointer, a flat-art portrait bust, and a
 *  glassmorphic footer (mini-avatar · handle · online · Contact). */
.pc-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
  perspective: 1200px;
}
.player-card {
  --pc-x: 50%; --pc-y: 50%;        /* pointer position (glare/shine) */
  --pc-bx: 50%; --pc-by: 50%;      /* holographic background drift   */
  --pc-rx: 0deg; --pc-ry: 0deg;    /* tilt                            */
  --pc-from-center: 0;             /* 0 at centre → 1 at edge         */
  position: relative; aspect-ratio: 276 / 430; border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% -8%, oklch(0.34 0.07 70 / .55), transparent 58%),
    linear-gradient(155deg, oklch(0.17 0.045 58) 0%, oklch(0.115 0.035 50) 56%, oklch(0.09 0.03 45) 100%);
  border: 1px solid oklch(0.60 0.10 78 / .30);
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 1px 0 oklch(0.95 0.08 82 / .12);
  overflow: hidden; isolation: isolate;
  transform: perspective(760px) rotateX(var(--pc-rx)) rotateY(var(--pc-ry));
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s;
  will-change: transform; cursor: pointer;
}
.player-card.pc-active { transition: transform .08s linear, box-shadow .4s; }
.player-card:hover {
  box-shadow: 0 26px 56px rgba(0,0,0,.62),
    0 0 30px oklch(0.70 0.16 70 / calc(.18 + var(--pc-from-center) * .30)),
    inset 0 1px 0 oklch(0.96 0.10 82 / .22);
}
/* portrait bust — flat art, bottom-anchored, fills the card */
.player-card .pc-portrait {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.4));
}
/* hand-drawn star atlas (sprite) — responsive percentage positioning on a
   uniform 6×2 grid; position set inline per card. */
.pc-img { background-repeat: no-repeat; background-size: 600% 200%; }
/* drawn card frame (art is borderless) — rarity-tinted ring + depth */
.player-card { --frame: oklch(0.66 0.05 80 / .6); --frame2: oklch(0.40 0.04 70 / .5); }
.player-card.rar2 { --frame: oklch(0.86 0.15 84 / .92); --frame2: oklch(0.55 0.12 60 / .7); }
.player-card.rar3 { --frame: oklch(0.86 0.16 320 / .92); --frame2: oklch(0.60 0.16 280 / .7); }
.player-card::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  border: 2px solid var(--frame);
  box-shadow: inset 0 0 0 1px var(--frame2), inset 0 0 18px oklch(0 0 0 / .4), 0 0 0 1px oklch(0 0 0 / .5);
}
.player-card.nm-locked::after { border-color: oklch(0.45 0.03 70 / .4);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / .4), inset 0 0 16px oklch(0 0 0 / .5); }
.player-card.rar3.owned::after { animation: nm-frame-prism 4.5s linear infinite; }
@keyframes nm-frame-prism {
  0% { border-color: oklch(0.86 0.18 20 / .92); } 33% { border-color: oklch(0.86 0.20 200 / .92); }
  66% { border-color: oklch(0.86 0.20 320 / .92); } 100% { border-color: oklch(0.86 0.18 20 / .92); }
}
/* bottom legibility scrim */
.player-card .pc-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, oklch(0.08 0.03 45) 4%, oklch(0.08 0.03 45 / .55) 24%, transparent 50%);
}
/* holographic foil — pointer-driven position + edge-fade opacity */
.player-card .pc-holo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background-image:
    repeating-linear-gradient(0deg,
      oklch(0.85 0.20 20 / .5) 0%, oklch(0.88 0.20 90 / .5) 8%, oklch(0.85 0.22 160 / .5) 16%,
      oklch(0.85 0.22 250 / .5) 24%, oklch(0.85 0.22 320 / .5) 32%, oklch(0.85 0.20 20 / .5) 40%),
    repeating-linear-gradient(133deg,
      oklch(0.30 0.10 250) 0%, oklch(0.55 0.16 320) 12%, oklch(0.85 0.12 90) 22%,
      oklch(0.45 0.16 200) 34%, oklch(0.30 0.10 250) 46%);
  background-blend-mode: color-dodge;
  background-size: 200% 700%, 260% 260%;
  background-position: var(--pc-bx) var(--pc-by), calc(100% - var(--pc-bx)) var(--pc-by);
  mix-blend-mode: color-dodge;
  opacity: calc(.10 + var(--pc-from-center) * .42);
  filter: brightness(.85) contrast(1.4) saturate(1.2);
  transition: opacity .3s;
}
/* glare — bright spot under the pointer */
.player-card .pc-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(farthest-corner circle at var(--pc-x) var(--pc-y),
    oklch(1 0 0 / .42) 6%, oklch(0.92 0.10 82 / .14) 26%, transparent 58%);
  mix-blend-mode: overlay;
  opacity: calc(.45 + var(--pc-from-center) * .30); transition: opacity .3s;
}
/* fine foil hatch */
.player-card .pc-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 7px);
}
/* HOLO_SPARKLE_APPLIED — Simey-style glitter: white sparkle dots tinted by a
   shifting rainbow via color-dodge. Class-only so it also styles the reveal
   card. Position/opacity driven by the same --pc-* vars as the foil. */
.pc-sparkle {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; overflow: hidden;
  background-image:
    radial-gradient(rgba(255,255,255,.85) 0.4px, transparent 1.3px),
    radial-gradient(rgba(255,255,255,.6) 0.4px, transparent 1.3px),
    repeating-linear-gradient(115deg,
      hsl(8 90% 64%) 0%, hsl(48 92% 64%) 9%, hsl(150 82% 58%) 19%,
      hsl(200 90% 62%) 30%, hsl(280 88% 66%) 41%, hsl(330 90% 66%) 50%, hsl(8 90% 64%) 60%);
  background-size: 4.5px 4.5px, 7px 8px, 220% 220%;
  background-position: 0 0, 2px 3px, var(--pc-bx, 50%) var(--pc-by, 50%);
  background-blend-mode: color-dodge, color-dodge, overlay;
  mix-blend-mode: color-dodge;
  opacity: calc(.05 + var(--pc-from-center, 0) * .34);
  filter: brightness(1.05) contrast(1.4); transition: opacity .3s;
}
/* OVR + position badge (top-left) */
.player-card .pc-top { position: absolute; top: 14px; left: 15px; z-index: 4; line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.player-card .pc-ovr { font-family: 'Cinzel',serif; font-size: 30px; font-weight: 700; color: oklch(0.93 0.13 86); }
.player-card .pc-pos { font-family: 'Cinzel',serif; font-size: 11px; letter-spacing: .14em; color: oklch(0.86 0.06 82 / .9); margin-top: 3px; }
.player-card .pc-flag { position: absolute; top: 14px; right: 14px; z-index: 4; font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
/* name + role (lower third, above footer) */
.player-card .pc-id { position: absolute; left: 12px; right: 12px; bottom: 72px; z-index: 4; text-align: center; }
.player-card .pc-name {
  font-family: 'Cinzel','EB Garamond',serif; font-weight: 700; font-size: 17px; letter-spacing: .04em;
  color: oklch(0.97 0.03 86); margin: 0;
  background: linear-gradient(92deg, oklch(0.95 0.06 86), oklch(0.86 0.14 70) 55%, oklch(0.95 0.06 86));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.player-card .pc-role {
  font-family: var(--font-cn),'Cinzel',serif; font-size: 10.5px; letter-spacing: .12em;
  color: oklch(0.80 0.05 78 / .92); margin-top: 3px; display: flex; gap: 10px; justify-content: center;
}
.player-card .pc-role strong, .player-card .pc-role b { color: oklch(0.93 0.12 86); font-weight: 700; }
/* glassmorphic footer bar */
.player-card .pc-foot {
  position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 4; height: 46px;
  display: flex; align-items: center; gap: 6px; padding: 5px;
  border-radius: 12px; background: oklch(0.20 0.03 52 / .44);
  -webkit-backdrop-filter: blur(11px) saturate(1.3); backdrop-filter: blur(11px) saturate(1.3);
  border: 1px solid oklch(0.90 0.08 84 / .22);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .14), 0 6px 18px rgba(0,0,0,.35);
}
.player-card .pc-mini { width: 28px; height: 28px; border-radius: 50%; flex: none; overflow: hidden;
  border: 1px solid oklch(0.90 0.08 84 / .35); box-shadow: 0 0 0 2px oklch(0.10 0.03 45 / .4); }
.player-card .pc-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.player-card .pc-handle { font: 600 11px/1.05 'Helvetica Neue',Arial,system-ui,sans-serif;
  text-transform: lowercase; letter-spacing: 0; color: oklch(0.96 0.04 84);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-card .pc-status { display: flex; align-items: center; gap: 4px; font: 600 8.5px var(--font-cn),sans-serif;
  letter-spacing: .03em; color: oklch(0.82 0.10 150); white-space: nowrap; }
.player-card .pc-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: oklch(0.80 0.17 150);
  box-shadow: 0 0 7px oklch(0.80 0.18 150); animation: pc-pulse 2.4s ease-in-out infinite; }
@keyframes pc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.player-card .pc-btn {
  margin-left: auto; flex: none; text-decoration: none; cursor: pointer; white-space: nowrap;
  font: 700 9px/1 'Cinzel',serif; letter-spacing: .06em; color: oklch(0.16 0.05 60);
  padding: 7px 8px; border-radius: 8px;
  background: linear-gradient(160deg, oklch(0.92 0.13 88), oklch(0.78 0.16 66));
  border: 1px solid oklch(0.96 0.10 86 / .7);
  box-shadow: 0 4px 12px oklch(0.62 0.16 64 / .4), inset 0 1px 0 oklch(1 0 0 / .5);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.player-card .pc-btn:hover { transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 6px 16px oklch(0.62 0.18 64 / .55), inset 0 1px 0 oklch(1 0 0 / .6); }

@media (max-width: 980px) { .pc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .pc-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  .player-card .pc-name { font-size: 15px; } .player-card .pc-btn { padding: 8px 10px; } }

/* Immersive star-card preview shared by the World Cup page and the collection. */
body.nm-pv-open { overflow: hidden; }
.nm-pv {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  padding: 24px;
  color: oklch(0.96 0.04 82);
}
.nm-pv.show { display: grid; }
.nm-pv-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, oklch(0.08 0.03 48 / .94), oklch(0.13 0.045 58 / .91)),
    repeating-linear-gradient(115deg, oklch(0.75 0.12 78 / .055) 0 1px, transparent 1px 16px);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  backdrop-filter: blur(10px) saturate(1.18);
}
.nm-pv-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, oklch(0.90 0.12 82 / .08), transparent),
    repeating-linear-gradient(90deg, transparent 0 80px, oklch(0.80 0.11 76 / .035) 80px 81px);
  opacity: .8;
  animation: nm-pv-drift 28s linear infinite;
}
@keyframes nm-pv-drift { to { transform: translateX(90px); } }
.nm-pv-shell {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(280px, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: 18px;
  overflow: auto;
  background:
    linear-gradient(150deg, oklch(0.13 0.04 56 / .92), oklch(0.08 0.026 48 / .94));
  border: 1px solid oklch(0.68 0.12 78 / .38);
  box-shadow: 0 28px 80px oklch(0.02 0.02 45 / .72), inset 0 1px 0 oklch(1 0 0 / .09);
}
.nm-pv-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid oklch(0.70 0.10 78 / .42);
  background: oklch(0.12 0.035 52 / .84);
  color: oklch(0.96 0.07 84);
  font: 700 24px/1 system-ui, sans-serif;
  cursor: pointer;
}
.nm-pv-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
}
.nm-pv-card {
  width: min(330px, 100%);
  min-width: 0;
}
.nm-pv-card .player-card {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  animation: nm-pv-card-in .9s cubic-bezier(.18,.88,.22,1);
}
.nm-pv-card .player-card .pc-id { bottom: 72px; }
.nm-pv-card .player-card.nm-card .pc-id { bottom: 12px; }
.nm-pv-name {
  font: 700 22px/1.2 'Cinzel', var(--font-cn), serif;
  color: oklch(0.98 0.08 84);
  text-align: center;
}
.nm-pv-rar {
  font: 700 11px/1.2 'Cinzel', serif;
  color: var(--ml-amber);
  letter-spacing: 0;
  text-align: center;
}
.nm-pv-hint {
  min-height: 18px;
  font: 600 12px/1.5 var(--font-cn), sans-serif;
  color: oklch(0.72 0.05 72);
  text-align: center;
}
.nm-pv-panel {
  min-width: 0;
  padding: 22px;
  border-radius: 10px;
  background: oklch(0.11 0.03 50 / .58);
  border: 1px solid oklch(0.56 0.09 72 / .30);
}
.nm-pv-kicker {
  margin-bottom: 10px;
  font: 700 11px/1.2 'Cinzel', var(--font-cn), serif;
  letter-spacing: 0;
  color: var(--ml-amber);
}
.nm-pv-panel h2 {
  margin: 0 0 8px;
  font: 700 28px/1.15 'Cinzel', var(--font-cn), serif;
  color: oklch(0.98 0.06 84);
}
.nm-pv-team {
  font: 600 13px/1.55 var(--font-cn), sans-serif;
  color: oklch(0.76 0.05 72);
}
.nm-pv-statline {
  margin: 14px 0 12px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid oklch(0.64 0.11 78 / .28);
  background: oklch(0.08 0.025 48 / .54);
  color: oklch(0.94 0.12 84);
  font: 700 13px/1.3 'Cinzel', var(--font-cn), serif;
}
.nm-pv-form {
  margin: 0 0 12px;
  color: oklch(0.84 0.04 76);
  font: 600 13px/1.75 var(--font-cn), sans-serif;
}
.nm-pv-notes {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}
.nm-pv-notes li {
  color: oklch(0.76 0.04 74);
  font: 500 12.5px/1.65 var(--font-cn), sans-serif;
  padding-left: 13px;
  position: relative;
}
.nm-pv-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ml-amber);
  box-shadow: 0 0 9px oklch(0.82 0.16 80 / .6);
}
@keyframes nm-pv-card-in {
  0% { opacity: 0; transform: perspective(900px) rotateY(-560deg) scale(.64); filter: brightness(1.25) blur(2px); }
  70% { opacity: 1; transform: perspective(900px) rotateY(18deg) scale(1.05); filter: brightness(1.12); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0deg) scale(1); filter: none; }
}
@media (max-width: 760px) {
  .nm-pv {
    align-items: start;
    padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
    overflow: auto;
  }
  .nm-pv-shell {
    width: min(100%, 520px);
    max-height: none;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 14px 16px;
    border-radius: 12px;
  }
  .nm-pv-card { width: min(70vw, 260px); }
  .nm-pv-panel { padding: 16px 14px; }
  .nm-pv-panel h2 { font-size: 22px; }
  .nm-pv-kicker { letter-spacing: 0; }
  .nm-pv-close { width: 36px; height: 36px; font-size: 22px; }
}
@media (max-width: 380px) {
  .nm-pv-card { width: min(74vw, 236px); }
  .nm-pv-name { font-size: 18px; }
  .nm-pv-statline { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  /* keep the brand subtle effects gentle; the owner opts into motion, so
     they still run, just nothing aggressive is added here. */
  .ml-light-rays::before { animation-duration: 160s; }
  .nm-pv-bg::before { animation-duration: 80s; }
  .nm-pv-card .player-card { animation-duration: .24s; }
}

/* LANG_SWITCH_COMPACT_APPLIED — segmented 中文/EN toggle. Equal halves so EN
   never stretches wide inside the mobile menu (links there are display:block). */
.lang-switch { display: inline-flex !important; width: auto !important; max-width: 220px; flex: none !important;
  align-items: stretch; border: 1px solid oklch(0.58 0.10 70 / .55); border-radius: 8px; overflow: hidden; }
.lang-switch a { flex: 1 1 0 !important; display: block !important; width: auto !important;
  padding: 6px 18px !important; margin: 0 !important; font-size: 13px; line-height: 1.6; white-space: nowrap;
  text-align: center; text-decoration: none !important; border: 0 !important; border-radius: 0 !important; }
.lang-switch a + a { border-left: 1px solid oklch(0.58 0.10 70 / .4); }
.lang-switch a.active { background: linear-gradient(160deg, oklch(0.86 0.14 80), oklch(0.74 0.16 64));
  color: oklch(0.16 0.05 50) !important; font-weight: 700; }