/* Landing page (src/index.html). Built only from the Arceus kit in arceus.css plus the
   page's own layout. Nothing here is reused by other pages; components live in arceus.css. */

/* ── hero ─────────────────────────────────────────────────────────────── */
.l-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(calc(100svh - 70px),940px);display:flex;flex-direction:column;
  background:#0A0C12;color:var(--a-text)}
.l-hero__bg{position:absolute;inset:-4% -3%;z-index:-3}
.l-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;max-width:none;
  filter:saturate(1.15) brightness(.62) blur(2px);transform:scale(1.04)}
.l-hero__rays{position:absolute;right:-20%;top:-60%;width:120%;height:170%;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:repeating-conic-gradient(from 200deg at 70% 30%,rgba(255,228,160,.20) 0deg 3deg,transparent 3deg 11deg);
  -webkit-mask-image:radial-gradient(60% 55% at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(60% 55% at 70% 30%,#000,transparent 75%);
  animation:lRays 60s linear infinite;transform-origin:70% 30%}
@keyframes lRays{to{transform:rotate(360deg)}}
.l-hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 68% 52%,rgba(255,200,90,.16),transparent 60%),
    linear-gradient(90deg,rgba(8,9,14,.92) 0%,rgba(8,9,14,.66) 34%,rgba(8,9,14,.08) 62%,rgba(8,9,14,.25) 100%),
    linear-gradient(180deg,rgba(8,9,14,.4) 0%,transparent 26%,transparent 62%,#0B0D14 100%)}
.l-hero .a-vignette{z-index:-1}
.l-cast{position:absolute;right:0;top:0;bottom:0;width:56%;z-index:0;pointer-events:none}
.l-cast__m{position:absolute;will-change:transform}
.l-cast__m img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:lFloat 7s ease-in-out infinite}
.l-cast__m--a{left:4%;bottom:22%;width:36%}
.l-cast__m--a img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) brightness(.86) saturate(1.05);animation-delay:-2s}
.l-cast__m--b{right:-2%;bottom:17%;width:40%}
.l-cast__m--b img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) brightness(.9);animation-delay:-4.5s}
.l-cast__m--c{left:24%;bottom:11%;width:50%;z-index:2}
.l-cast__glow{position:absolute;left:12%;right:4%;bottom:8%;height:22%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(254,214,84,.34),rgba(254,214,84,.08) 60%,transparent);filter:blur(6px)}
@keyframes lFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.l-motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.l-motes i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 10px 2px rgba(254,214,84,.6);
  opacity:0;animation:lMote 9s linear infinite}
@keyframes lMote{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.9}80%{opacity:.5}100%{transform:translate3d(30px,-70vh,0);opacity:0}}

.l-hero__inner{position:relative;z-index:3;flex:1 1 auto;display:flex;align-items:center;padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(30px,5vh,60px)}
.l-hero__copy{max-width:560px}
.l-hero__copy>*{animation:lIn .7s var(--a-ease) both}
.l-hero__copy>*:nth-child(2){animation-delay:.08s}
.l-hero__copy>*:nth-child(3){animation-delay:.16s}
.l-hero__copy>*:nth-child(4){animation-delay:.24s}
.l-hero__copy>*:nth-child(5){animation-delay:.32s}
.l-hero__copy>*:nth-child(6){animation-delay:.4s}
@keyframes lIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.l-hero__kicker{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 12px;border-radius:var(--a-r-pill);
  background:var(--a-smoke);box-shadow:var(--a-rim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.l-hero__kicker .a-label{color:var(--a-cream);font-size:11px}
.l-hero__kicker .a-live{font-size:10.5px}
.l-hero__logo{display:block;width:min(430px,78vw);height:auto;margin:24px 0 18px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.l-hero h1{font-size:clamp(34px,4.6vw,64px)}
.l-hero h1 em{font-style:normal}
.l-hero__sub{margin-top:16px;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--a-soft);max-width:48ch}
.l-hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.l-hero__ctas .btn img{height:20px;width:auto}
.l-hero__trailer{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:8px 18px 8px 8px;border-radius:16px;text-align:left;
  background:var(--a-smoke);box-shadow:var(--a-rim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background var(--a-dur) var(--a-ease),transform var(--a-dur) var(--a-ease)}
.l-hero__trailer:hover{background:var(--a-band-hi);transform:translateY(-2px)}
.l-hero__thumb{position:relative;width:118px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;flex:0 0 auto;background:#000}
.l-hero__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--a-ease)}
.l-hero__trailer:hover .l-hero__thumb img{transform:scale(1.08)}
.l-hero__thumb::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:var(--a-grad-gold);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.l-hero__thumb::before{content:"";position:absolute;left:50%;top:50%;z-index:1;margin:-7px 0 0 -3px;border-left:11px solid #2B1E05;border-top:7px solid transparent;border-bottom:7px solid transparent}
.l-hero__trailer b{display:block;font-family:var(--a-display);font-weight:400;font-size:19px;color:var(--a-cream);line-height:1.1}
.l-hero__trailer small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a-dim);margin-top:3px}

.l-facts{position:relative;z-index:3;margin-bottom:28px}
.l-facts__row{display:grid;grid-template-columns:repeat(4,1fr);background:var(--a-smoke);box-shadow:var(--a-rim);border-radius:var(--a-r-lg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden}
.l-fact{padding:18px 22px;display:flex;align-items:center;gap:16px}
.l-fact+.l-fact{box-shadow:-1px 0 0 var(--a-rule)}
.l-fact .a-num{font-size:clamp(28px,3vw,42px)}
.l-fact .a-label{color:var(--a-soft);font-size:10.5px;letter-spacing:.2em;line-height:1.5}
.l-scroll{position:absolute;left:50%;bottom:6px;z-index:3;width:9px;height:9px;margin-left:-4.5px;background:var(--a-gold);transform:rotate(45deg);
  animation:lBob 2.4s var(--a-ease) infinite;opacity:.8}
@keyframes lBob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}

@media(max-width:900px){
  .l-hero{min-height:0}
  .l-cast{position:relative;width:100%;height:clamp(250px,70vw,420px);order:-1;margin-top:0}
  .l-cast__m--a{left:-4%;bottom:12%;width:44%}
  .l-cast__m--b{right:-6%;bottom:10%;width:46%}
  .l-cast__m--c{left:21%;bottom:2%;width:58%}
  .l-hero__shade{background:
    radial-gradient(80% 45% at 50% 22%,rgba(255,200,90,.16),transparent 60%),
    linear-gradient(180deg,rgba(8,9,14,.2) 0%,rgba(8,9,14,.35) 34%,rgba(8,9,14,.9) 58%,#0B0D14 100%)}
  .l-hero__inner{padding-top:4px;margin-top:0}
  .l-cast{height:clamp(230px,62vw,400px)}
  .l-hero__logo{margin:16px 0 12px;width:min(300px,72vw)}
  .l-hero__ctas .btn{flex:1 1 100%}
  .l-hero__trailer{width:100%}
  .l-facts__row{grid-template-columns:repeat(2,1fr)}
  .l-fact:nth-child(3){box-shadow:0 -1px 0 var(--a-rule)}
  .l-fact:nth-child(4){box-shadow:-1px 0 0 var(--a-rule),0 -1px 0 var(--a-rule)}
  .l-fact{padding:14px 16px;gap:12px}
  .l-scroll{display:none}
}
@media(max-width:420px){.l-fact{flex-direction:column;align-items:flex-start;gap:4px}}

/* ── meet the AneeMates ───────────────────────────────────────────────── */
.l-mates{background:
  radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--sel,#E7B64A) 18%,transparent),transparent 70%),
  linear-gradient(180deg,#0B0D14,#10121B 60%,#0B0D14);transition:background .6s var(--a-ease)}
.l-mates__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.l-mates .a-chips{flex:1 1 auto}
.l-mates .a-parade{padding-top:44px;min-height:330px}
.l-mates .a-parade.is-swap{opacity:0;transform:translateY(8px)}
.l-mates .a-parade{transition:opacity .22s var(--a-ease),transform .22s var(--a-ease)}
.l-mates__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.l-mates__count{font-weight:700;color:var(--a-dim);font-size:14px}
.l-mates__count b{font-family:var(--a-display);font-weight:400;font-size:22px;color:var(--a-cream);margin-right:4px}
.l-empty{padding:40px;color:var(--a-dim);text-align:center;width:100%}

/* ── the island ───────────────────────────────────────────────────────── */
.l-island{background:linear-gradient(180deg,#0B0D14,#0E1420 50%,#0B0D14)}
.l-island__grid>:first-child{position:sticky;top:90px}
.l-island__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.l-map{position:relative;aspect-ratio:1/1;border-radius:var(--a-r-lg);overflow:hidden;
  background:#C9D8CF;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 8px rgba(9,9,14,.6),0 30px 60px rgba(0,0,0,.45)}
.l-map__img,.l-map svg.l-map__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.l-map__sky{position:absolute;inset:0;pointer-events:none;transition:opacity .6s var(--a-ease),background .6s var(--a-ease);opacity:0}
.l-map[data-time="night"] .l-map__sky{opacity:1;background:radial-gradient(80% 70% at 70% 20%,rgba(40,50,110,.35),rgba(10,14,40,.62))}
.l-map[data-time="rain"] .l-map__sky{opacity:1;background:linear-gradient(180deg,rgba(40,60,80,.35),rgba(20,30,45,.4))}
.l-map__rain{position:absolute;inset:-20%;pointer-events:none;opacity:0;transition:opacity .5s var(--a-ease);
  background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(220,235,255,.35) 14px 15px,transparent 15px 36px);
  animation:lRain .7s linear infinite}
.l-map[data-time="rain"] .l-map__rain{opacity:.8}
@keyframes lRain{to{transform:translate3d(-12px,36px,0)}}
.l-map__stars{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--a-ease);
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 32% 8%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 58% 14%,#fff,transparent),radial-gradient(1px 1px at 78% 6%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 90% 22%,#fff,transparent),radial-gradient(1px 1px at 8% 40%,#fff,transparent),radial-gradient(1px 1px at 46% 30%,#fff,transparent)}
.l-map[data-time="night"] .l-map__stars{opacity:.9}
.l-map__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.l-map__legend{position:absolute;left:14px;bottom:14px;z-index:4;display:flex;gap:8px;flex-wrap:wrap}
.l-map__legend span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;background:var(--a-smoke-hi);color:var(--a-cream);
  font-weight:800;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.l-map .a-pin{outline:none}
.l-map .a-pin:focus-visible .a-pin__label{box-shadow:0 0 0 3px var(--a-gold-hi)}
.l-region{min-height:118px}
.l-region__name{font-family:var(--a-display);font-size:26px;color:var(--a-cream);line-height:1.05}
.l-region__meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.l-region__mates{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.l-region__mates img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:var(--a-rim);padding:3px}
.l-side{display:flex;flex-direction:column;gap:18px}
.l-feed .a-band{min-height:58px}
.l-feed .a-band__v{font-size:24px}
.l-feed__top{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.l-feed__top li{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--a-soft)}
.l-feed__top li b{color:var(--a-cream);font-weight:700}
.l-feed__note{padding:12px 20px 0}
.l-who .a-band{align-items:flex-start;padding-top:12px;padding-bottom:12px}
.l-who .a-band__k{font-weight:600}

@media(max-width:700px){
  .l-mates .a-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
  .l-mates .a-chips::-webkit-scrollbar{display:none}
  .l-mates .a-chip{flex:0 0 auto}
  .l-mates .a-parade__ctl{display:none}
  .a-pin__label{font-size:9.5px;padding:4px 8px;letter-spacing:.06em}
}
@media(max-width:980px){.l-island__grid{grid-template-columns:1fr}.l-island__grid>:first-child{position:static}}

/* ── how you play ─────────────────────────────────────────────────────── */
.l-play{background:radial-gradient(70% 50% at 20% 10%,rgba(111,207,95,.08),transparent 60%),radial-gradient(60% 50% at 90% 60%,rgba(90,184,255,.08),transparent 60%),#0B0D14}
.l-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.l-feat{position:relative;overflow:hidden;border-radius:var(--a-r-lg);min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(28,29,40,.9),rgba(12,13,20,.95));box-shadow:var(--a-rim),0 16px 34px rgba(0,0,0,.35);
  transition:transform var(--a-slow) var(--a-ease),box-shadow var(--a-slow) var(--a-ease)}
.l-feat:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(254,214,84,.5),0 24px 44px rgba(0,0,0,.45)}
.l-feat--wide{grid-column:span 2}
.l-feat--tall{grid-row:span 2}
.l-feat__media{position:absolute;inset:0;z-index:0}
.l-feat__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--a-ease)}
.l-feat:hover .l-feat__media img{transform:scale(1.05)}
.l-feat__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,17,0) 20%,rgba(10,11,17,.6) 55%,rgba(10,11,17,.96))}
.l-feat__media--render{position:relative;inset:auto;height:200px;flex:0 0 auto;display:grid;place-items:center;margin-top:10px}
.l-feat__media--render::after{display:none}
.l-feat__media--render::before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;top:15px;left:50%;margin-left:-85px;
  background:radial-gradient(circle,color-mix(in srgb,var(--c,#E7B64A) 55%,transparent),transparent 70%);opacity:.55}
.l-feat__media--render img{position:relative;width:auto;height:196px;max-width:86%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(0,0,0,.5))}
.l-feat__body{position:relative;z-index:1;padding:20px 22px 22px}
.l-feat:has(.l-feat__media--render){justify-content:flex-start}
.l-feat__body .a-label{font-size:10.5px}
.l-feat__body h3{margin:8px 0 6px}
.l-feat__body p{font-size:14.5px;line-height:1.5;color:var(--a-soft)}
.l-feat__keys{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.l-moves{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.l-moves span{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;background:var(--a-band);box-shadow:var(--a-rim);font-size:12.5px;font-weight:700;color:var(--a-cream)}
.l-moves span em{font-style:normal;color:var(--a-gold)}
@media(max-width:1080px){.l-bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.l-bento{grid-template-columns:1fr}.l-feat--wide{grid-column:auto}.l-feat--tall{grid-row:auto}.l-feat{min-height:260px}}

/* element wheel teaser */
.l-wheel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:center;margin-top:18px}
.l-wheel__svg{width:100%;max-width:420px;height:auto;margin:0 auto;display:block}
.l-wheel__svg .arrow{stroke:rgba(31,36,48,.38);stroke-width:1.6;fill:none}
.l-wheel__svg .arrow.is-hot{stroke:var(--a-gold-lo);stroke-width:2.6}
.l-wheel__node{cursor:pointer}
.l-wheel__node circle{transition:transform var(--a-dur) var(--a-back);transform-box:fill-box;transform-origin:center}
.l-wheel__node:hover circle,.l-wheel__node.is-on circle{transform:scale(1.12)}
.l-mult{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.l-mult div{border-radius:14px;padding:14px;background:rgba(31,36,48,.06);box-shadow:inset 0 0 0 1px rgba(31,36,48,.12)}
.l-mult b{display:block;font-family:var(--a-display);font-weight:400;font-size:30px;line-height:1;color:var(--a-ink)}
.l-mult span{font-size:12.5px;font-weight:700;color:var(--a-ink-2)}
.l-wheel__readout{min-height:48px;font-weight:700;color:var(--a-ink)}
@media(max-width:820px){.l-wheel{grid-template-columns:1fr}.l-mult{grid-template-columns:1fr 1fr 1fr}}

/* ── economy ──────────────────────────────────────────────────────────── */
.l-eco{background:radial-gradient(60% 60% at 85% 20%,rgba(145,70,255,.18),transparent 65%),radial-gradient(50% 50% at 10% 80%,rgba(231,182,74,.12),transparent 60%),#0C0B14}
.l-eco__two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.l-coin{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;font-family:var(--a-display);font-size:18px;flex:0 0 auto}
.l-coin--mate{background:var(--a-grad-gold);color:#2B1E05;box-shadow:0 0 0 3px rgba(231,182,74,.25)}
.l-coin--qorpo{background:#1a1030;box-shadow:0 0 0 3px rgba(145,70,255,.35)}
.l-coin--qorpo img{width:44px;height:44px;border-radius:50%}
.l-cur{padding:24px;display:flex;flex-direction:column;gap:14px}
.l-cur__top{display:flex;align-items:center;gap:14px}
.l-cur__top .a-h3{font-size:28px}
.l-cur--qorpo{box-shadow:inset 0 0 0 1px rgba(181,138,252,.35),var(--a-shadow)}
.l-cur ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.l-cur li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--a-soft)}
.l-cur li::before{content:"";width:6px;height:6px;margin-top:8px;background:var(--a-gold);transform:rotate(45deg);flex:0 0 auto}
.l-cur--qorpo li::before{background:var(--a-purple-soft)}
.l-cur li.l-noyield::before{display:none}
.l-noyield>span{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.l-cur li b{color:var(--a-cream)}
.l-price{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--a-r-pill);background:rgba(145,70,255,.14);box-shadow:inset 0 0 0 1px rgba(181,138,252,.35);
  font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--a-purple-soft);align-self:flex-start}
.l-price b{font-family:var(--a-display);font-weight:400;font-size:18px;letter-spacing:0;color:#fff}
.l-price .up{color:var(--a-leaf)}.l-price .down{color:var(--a-red)}
.l-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.l-cap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px 20px;overflow:hidden;border-radius:var(--a-r-lg);
  background:linear-gradient(180deg,rgba(33,30,48,.9),rgba(14,12,22,.95));box-shadow:var(--a-rim);transition:transform var(--a-slow) var(--a-ease),box-shadow var(--a-slow) var(--a-ease)}
.l-cap:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(254,214,84,.5),0 20px 40px rgba(0,0,0,.4)}
.l-cap__stage{display:block;align-self:stretch;margin:0 -16px 4px}
.l-cap__name{font-family:var(--a-display);font-size:24px;color:var(--a-cream);margin-top:10px}
.l-cap__tag{font-size:12.5px;color:var(--a-dim);font-weight:700}
.l-cap__price{margin-top:10px;font-family:var(--a-display);font-size:22px;color:var(--a-gold-hi)}
.l-cap__price small{font-family:var(--a-body);font-weight:700;font-size:12px;color:var(--a-dim);margin-left:6px}
.l-cap__odds{margin-top:10px;display:flex;flex-direction:column;gap:4px;width:100%}
.l-cap__odds span{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--a-soft);padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.04)}
.l-cap__odds span em{font-style:normal;color:var(--rc)}
.l-cap--free{background:linear-gradient(180deg,rgba(22,34,36,.9),rgba(11,15,18,.95))}
.l-cap--free .l-cap__price{color:var(--a-leaf)}
.l-split{margin-top:22px;padding:22px}
.l-split__bar{display:flex;height:16px;border-radius:99px;overflow:hidden;margin:14px 0 12px;box-shadow:var(--a-rim)}
.l-split__bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--a-ease)}
.l-split.is-in .l-split__bar i{transform:scaleX(1)}
.l-split__legend{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;color:var(--a-soft)}
.l-split__legend span{display:inline-flex;align-items:center;gap:8px}
.l-split__legend i{width:10px;height:10px;transform:rotate(45deg)}
.l-split__legend b{font-family:var(--a-display);font-weight:400;font-size:20px;color:var(--a-cream)}
.l-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.l-trust__i{display:flex;gap:14px;align-items:flex-start;padding:20px}
.l-trust__i svg{width:34px;height:34px;flex:0 0 auto;color:var(--a-gold)}
.l-trust__i b{display:block;color:var(--a-cream);font-size:16px;margin-bottom:4px}
.l-trust__i p{font-size:14px;line-height:1.5}
@media(max-width:1000px){.l-caps{grid-template-columns:repeat(2,1fr)}.l-trust{grid-template-columns:1fr}}
@media(max-width:760px){.l-eco__two{grid-template-columns:1fr}}
@media(max-width:420px){.l-caps{grid-template-columns:1fr 1fr;gap:10px}.l-cap{padding:0 10px 16px}.l-cap__stage{margin:0 -10px 4px}.l-cap__name{font-size:20px}}

/* ── platforms strip ──────────────────────────────────────────────────── */
.l-plat{background:linear-gradient(180deg,#0C0B14,#0B0D14);padding:clamp(34px,5vw,56px) 0;border-top:1px solid var(--a-rule-2);border-bottom:1px solid var(--a-rule-2)}
.l-plat__row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.l-plat__i{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--a-band);box-shadow:var(--a-rim)}
.l-plat__i svg,.l-plat__i img{width:32px;height:32px;flex:0 0 auto;color:var(--a-cream)}
.l-plat__i b{display:block;color:var(--a-cream);font-size:15px}
.l-plat__i small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--a-dim)}
.l-plat__i.is-now small{color:var(--a-leaf)}
@media(max-width:900px){.l-plat__row{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.l-plat__row{grid-template-columns:1fr}}

/* ── questions ────────────────────────────────────────────────────────── */
.l-faq{background:#0B0D14}
.l-faq .a-list{max-width:860px;margin:0 auto}
.l-qa{border-radius:12px;background:var(--a-band);box-shadow:var(--a-rim);transition:background var(--a-dur) var(--a-ease)}
.l-qa summary{position:relative;list-style:none;cursor:pointer;padding:18px 54px 18px 34px;font-weight:800;font-size:16.5px;color:var(--a-cream)}
.l-qa summary::-webkit-details-marker{display:none}
.l-qa summary::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--a-grad-gold);transform:rotate(45deg) scale(0);transition:transform var(--a-dur) var(--a-back)}
.l-qa summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--a-gold);border-bottom:2px solid var(--a-gold);transform:rotate(45deg);transition:transform var(--a-dur) var(--a-ease)}
.l-qa[open]{background:var(--a-cream)}
.l-qa[open] summary{color:var(--a-ink)}
.l-qa[open] summary::before{transform:rotate(45deg) scale(1)}
.l-qa[open] summary::after{transform:rotate(225deg);margin-top:-2px;border-color:var(--a-gold-lo)}
.l-qa:hover:not([open]){background:var(--a-band-hi)}
.l-qa p{padding:0 34px 20px;color:var(--a-ink-2)!important;line-height:1.6}

/* ── final call ───────────────────────────────────────────────────────── */
.l-final{position:relative;isolation:isolate;overflow:hidden;min-height:min(80vh,640px);display:flex;align-items:center;text-align:center}
.l-final__bg{position:absolute;inset:-6% 0;z-index:-2}
.l-final__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.15) rotate(-4deg);filter:saturate(.9) brightness(.42) blur(1.5px)}
.l-final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0B0D14 0%,rgba(11,13,20,.35) 30%,rgba(11,13,20,.5) 70%,#0E1019 100%)}
.l-final .a-vignette{z-index:-1}
.l-final__inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.l-final .a-h2{font-size:clamp(38px,5.6vw,76px)}
.l-final__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}
.l-final__cast{display:flex;justify-content:center;gap:0;margin-bottom:-10px}
.l-final__cast img{width:clamp(110px,14vw,190px);height:auto;filter:drop-shadow(0 18px 20px rgba(0,0,0,.5))}
.l-final__cast img:nth-child(2){width:clamp(140px,17vw,230px);margin:0 -24px;position:relative;z-index:1}
@media(max-width:600px){.l-final__ctas .btn{flex:1 1 100%}}

/* trailer modal */
.l-video{position:relative;aspect-ratio:16/9;background:#000}
.l-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (prefers-reduced-motion:reduce){
  .l-hero__rays,.l-cast__m img,.l-motes i,.l-scroll,.l-map__rain{animation:none}
  .l-motes{display:none}
  .l-hero__copy>*{animation:none}
  .l-split__bar i{transform:none;transition:none}
  .l-mates .a-parade{transition:none}
}

.l-mate-nums{margin-top:auto}
.l-mate-nums .a-band{min-height:46px;padding-top:8px;padding-bottom:8px}
.l-mate-nums .a-band__v{font-size:18px}
@media(max-width:1000px){.l-cap__price small{display:block;margin:2px 0 0}}
.l-region__odds{margin-top:14px;gap:8px}
.l-region__odds .a-stat{grid-template-columns:90px 1fr 48px}
.l-region__odds .a-stat__v{font-size:16px}

/* ── island screenshots (110_WEB_FOTKY, anee.WebShots), 27 Sep 2026 ─────── */
.l-shots{margin-top:clamp(40px,6vw,72px)}
/* 3 Oct 2026 (CEO: "the white bar is awful, put the arrows on top like the AneeMates slider").
   The row is now a parade rail (arceus.css .a-parade): no scrollbar, snaps card by card, arrows
   top right in the header bar, keeps the page width with faded ends on very wide screens. */
.l-shots__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:6px}
.l-shots__intro{display:flex;flex-direction:column;gap:6px;min-width:0}
.l-shots__intro .a-fine{margin:0}
.l-shots__head .a-parade__ctl{flex:0 0 auto}
.l-shots__title{font-family:var(--a-display);font-size:clamp(22px,2.6vw,30px);color:var(--a-cream);margin:0}
.l-shots__row.a-parade{gap:16px;padding-top:16px;padding-bottom:16px;overscroll-behavior-x:contain;scroll-behavior:smooth}
.l-shots__row>.l-shots__item{width:clamp(280px,40vw,600px)}
.l-shots__row:focus{outline:none}
.l-shots__row:focus-visible{outline:2px solid var(--a-gold);outline-offset:-2px;border-radius:var(--a-r-lg)}
.l-shots__item{margin:0;scroll-snap-align:start;border-radius:var(--a-r-lg);overflow:hidden;position:relative;background:var(--a-ink-2);border:1px solid var(--a-rim)}
.l-shots__item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform var(--a-slow) var(--a-ease)}
.l-shots__item:hover img{transform:scale(1.03)}
.l-shots__item figcaption{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:3px;padding:36px 16px 14px;background:linear-gradient(180deg,transparent,rgba(6,7,12,.88));color:var(--a-text)}
.l-shots__item figcaption b{font-family:var(--a-display);font-size:18px;color:var(--a-cream);font-weight:700}
.l-shots__item figcaption span:last-child{font-size:13px;color:var(--a-dim);line-height:1.45}
@media (max-width:700px){.l-shots__row>.l-shots__item{width:84vw}.l-shots__head .a-parade__ctl{display:none}}
@media (max-width:600px){.l-shots__row.a-parade{padding-left:16px;padding-right:16px;scroll-padding:0 16px}}
@media (prefers-reduced-motion:reduce){.l-shots__row.a-parade{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){.l-shots__item img{transition:none}.l-shots__item:hover img{transform:none}}

/* ── gameplay videos in the first two shot cards (168_WEB_VIDEA), 3 Oct 2026 ──
   The video sits under the same caption overlay as the screenshots. The play button
   covers the whole card, so a click anywhere plays or pauses; only the round glass
   icon in the middle is drawn, and it hides while the video plays. Never autoplays. */
.l-shots__item video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--a-ink-2,#0b0d14)}
.l-shots__play{position:absolute;inset:0;z-index:1;display:block;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.l-shots__item--video figcaption{z-index:2;pointer-events:none}
.l-shots__item--video figcaption a{pointer-events:auto}
/* centred in the picture area above the caption: 40px up from the middle, never off the top */
.l-shots__playicon{--s:68px;position:absolute;left:50%;top:max(8px,calc(50% - var(--s) / 2 - 40px));display:grid;place-items:center;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 10px 30px rgba(0,0,0,.35);transition:transform var(--a-fast,180ms) var(--a-ease,ease),opacity var(--a-dur,220ms) var(--a-ease,ease),background var(--a-fast,180ms)}
.l-shots__playicon svg{margin-left:4px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.l-shots__play:hover .l-shots__playicon{transform:scale(1.07);background:rgba(255,255,255,.24)}
.l-shots__play:focus{outline:none}
.l-shots__play:focus-visible{outline:2px solid var(--a-gold,#E7B64A);outline-offset:-4px}
.l-shots__play:focus-visible .l-shots__playicon{box-shadow:inset 0 0 0 2px var(--a-gold,#E7B64A),0 10px 30px rgba(0,0,0,.35)}
.l-shots__item.is-playing .l-shots__playicon{opacity:0;transform:scale(.85);pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.l-shots__playicon{background:rgba(20,22,32,.62)}}
@media (max-width:900px){.l-shots__playicon{--s:52px}.l-shots__playicon svg{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){.l-shots__playicon{transition:none}.l-shots__play:hover .l-shots__playicon{transform:none}}