/* GB GAMER BROS™ — staging build, Pass A
   Landscape layout is measured from APPROVED_HERO_MAP_HIGH_RES_REFERENCE (1536 × 1024).
   1 --u = 1 reference pixel at the current page width. */

@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(assets/fonts/rubik-latin.woff2?v=ea3f56e306) format("woff2")}
@font-face{font-family:"Rubik";font-style:italic;font-weight:300 900;font-display:swap;src:url(assets/fonts/rubik-italic-latin.woff2?v=0f2553fa1f) format("woff2")}

:root{
  --navy:#071c4f;
  --navy-deep:#041236;
  --sky:#e3edfb;
  --steam-top:#ff3445;
  --steam-bottom:#d40f22;
  --glow:#3ea2ff;
  --ink:#0b1f4d;
  --font:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--font);overflow-x:hidden}
img{display:block;max-width:none}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- stage (hero + map share one stacking context) ---------- */
.stage{
  position:relative;isolation:isolate;
  container-type:inline-size;
  background:var(--sky);
  overflow:hidden;
}
.stage{--u:calc(100cqw / 1536)}

/* ---------- header ---------- */
.topbar{position:absolute;inset:0 0 auto 0;height:calc(88 * var(--u));min-height:58px;z-index:20}
.brand{position:absolute;left:calc(78 * var(--u));top:calc(6 * var(--u));width:calc(192 * var(--u));min-width:112px}
.brand img{width:100%;height:auto;filter:drop-shadow(0 2px 6px rgba(0,10,40,.45))}

.nav{
  position:absolute;left:calc(380 * var(--u));top:calc(20 * var(--u));
  width:calc(712 * var(--u));height:calc(46 * var(--u));min-height:34px;
  display:flex;align-items:stretch;justify-content:space-evenly;
  background:linear-gradient(180deg,rgba(10,34,92,.72),rgba(6,22,66,.62));
  border:1px solid rgba(120,180,255,.28);border-radius:calc(8 * var(--u));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 24px rgba(0,12,48,.35);
}
.nav a{
  position:relative;display:flex;align-items:center;padding:0 calc(14 * var(--u));
  color:#fff;text-decoration:none;font-weight:600;letter-spacing:.06em;
  font-size:max(11px,calc(15.5 * var(--u)));text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.nav a:hover{color:#bfe3ff}
.nav a.is-active::after{
  content:"";position:absolute;left:18%;right:18%;bottom:calc(5 * var(--u));height:max(2px,calc(3 * var(--u)));border-radius:2px;
  background:#5cc2ff;box-shadow:0 0 10px #47b4ff,0 0 3px #fff;
}
.nav a:focus-visible,.brand:focus-visible{outline:2px solid #9fd8ff;outline-offset:2px;border-radius:4px}

.menu-btn{display:none}

/* ---------- Steam (coming soon) ---------- */
.steam{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  border:max(1.5px,calc(2 * var(--u))) solid rgba(255,255,255,.85);
  background:linear-gradient(180deg,var(--steam-top),var(--steam-bottom));
  color:#fff;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(150,0,10,.6),0 6px 18px rgba(200,0,20,.45),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(80,0,0,.45);
}
.steam:hover{filter:brightness(1.07)}
.steam:focus-visible{outline:3px solid #fff;outline-offset:3px}
.steam__logo{width:1.55em;height:1.55em;flex:none}
.steam__arrow{width:1.25em;height:1.25em;flex:none}
.steam--top{
  position:absolute;left:calc(1222 * var(--u));top:calc(15 * var(--u));
  width:calc(276 * var(--u));height:calc(52 * var(--u));min-height:34px;
  border-radius:calc(11 * var(--u));font-size:max(11px,calc(17 * var(--u)));
}

/* ---------- hero ---------- */
.hero{position:relative;height:calc(560 * var(--u));min-height:300px}
.hero__slides{position:absolute;inset:0;overflow:hidden;z-index:0;touch-action:pan-y}
.hero__track{display:flex;height:100%;transition:transform 1.5s cubic-bezier(.65,.02,.25,1);will-change:transform}
.slide{flex:0 0 100%;height:100%;margin:0}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);filter:brightness(1.06) saturate(1.05)}
.slide:first-child{--pos:50% 30%}

.hero__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,14,48,.5) 0,rgba(3,14,48,0) 20%),
    linear-gradient(90deg,rgba(3,16,54,.78) 0,rgba(5,24,72,.55) 20%,rgba(6,28,80,.16) 33%,rgba(6,28,80,0) 42%);
}

/* fixed brand sign (independent of the slides) */
.hero__sign{
  position:absolute;z-index:4;
  left:calc(1046 * var(--u));top:calc(232 * var(--u));width:calc(434 * var(--u));height:auto;
  filter:drop-shadow(0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(0,20,40,.35));
  pointer-events:none;
}
/* character layer: sits above the map clouds so shoes/limbs can bleed into them.
   Each cutout carries its own box (see index.html); swapping art needs no layout change. */
.hero__fg{position:absolute;inset:0;z-index:6;pointer-events:none}
.fg{
  position:absolute;height:auto;
  left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));
  opacity:0;transform:translateY(calc(18 * var(--u))) scale(.98);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.fg.is-active{opacity:1;transform:none}

/* fixed hero copy */
.hero__copy{position:absolute;inset:0;z-index:7;pointer-events:none}
.hero__copy > *{pointer-events:auto}
.headline{
  position:absolute;left:calc(60 * var(--u));top:calc(104 * var(--u));margin:0;
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:calc(70 * var(--u));line-height:.9;letter-spacing:-.005em;color:#fff;
  transform:rotate(-4deg);transform-origin:0 100%;
  -webkit-text-stroke:calc(6 * var(--u)) #0b2f96;paint-order:stroke fill;
  text-shadow:0 0 calc(22 * var(--u)) rgba(56,156,255,.9),0 calc(5 * var(--u)) 0 #08236e;
}
.headline span{display:block;white-space:nowrap}
.headline span:nth-child(2){margin-left:calc(-2 * var(--u))}
.tagline{
  position:absolute;left:calc(70 * var(--u));top:calc(300 * var(--u));margin:0;
  font-weight:600;font-size:calc(23 * var(--u));letter-spacing:.17em;color:#fff;white-space:nowrap;
  transform:rotate(-3.2deg);transform-origin:0 50%;
  text-shadow:0 2px 6px rgba(0,10,40,.8),0 0 14px rgba(40,120,255,.5);
}
.tagline b{font-weight:700;margin:0 .25em;color:#e8f3ff}
.steam--hero{
  position:absolute;left:calc(84 * var(--u));top:calc(344 * var(--u));
  width:calc(346 * var(--u));height:calc(64 * var(--u));
  border-radius:calc(14 * var(--u));font-size:calc(20.5 * var(--u));
  transform:rotate(-3deg);
}
.pillars{
  position:absolute;left:calc(50 * var(--u));top:calc(420 * var(--u));
  display:flex;margin:0;padding:0;list-style:none;
}
.pillars li{width:calc(143 * var(--u));display:flex;flex-direction:column;align-items:center;text-align:center}
.pillar__ring{
  width:calc(86 * var(--u));height:calc(86 * var(--u));border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 50% 35%,rgba(26,70,160,.8),rgba(5,22,70,.82) 70%);
  border:calc(2.5 * var(--u)) solid rgba(150,210,255,.95);
  box-shadow:0 0 calc(14 * var(--u)) rgba(60,160,255,.75),inset 0 0 calc(10 * var(--u)) rgba(80,170,255,.5);
}
.pillar__ring svg{width:56%;height:56%}
.pillar__label{
  margin-top:calc(9 * var(--u));color:#fff;font-weight:700;
  font-size:calc(13.5 * var(--u));line-height:1.14;letter-spacing:0;
  text-shadow:0 1px 3px rgba(0,10,40,.95),0 0 10px rgba(0,16,60,.85);
}
.pillar__note{
  white-space:nowrap;margin-top:calc(4 * var(--u));padding:calc(1 * var(--u)) calc(7 * var(--u));border-radius:99px;
  font-size:calc(10.5 * var(--u));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#cfe8ff;
  background:rgba(4,18,56,.6);border:1px solid rgba(150,210,255,.4);
}

/* carousel controls */
.hero__arrow{
  position:absolute;z-index:8;top:calc(298 * var(--u));
  width:max(40px,calc(38 * var(--u)));height:max(40px,calc(38 * var(--u)));
  display:grid;place-items:center;padding:0;border-radius:50%;
  background:rgba(4,14,40,.62);border:1.5px solid rgba(255,255,255,.7);color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero__arrow svg{width:55%;height:55%}
.hero__arrow--prev{left:calc(12 * var(--u))}
.hero__arrow--next{right:calc(12 * var(--u))}
.hero__arrow:hover{background:rgba(10,40,110,.8)}
.hero__arrow:focus-visible{outline:3px solid #9fd8ff;outline-offset:2px}

.hero__dots{
  position:absolute;z-index:8;left:calc(770 * var(--u));top:calc(549 * var(--u));transform:translate(-50%,-50%);
  display:flex;gap:calc(6 * var(--u));
}
.hero__dots button{
  width:max(24px,calc(26 * var(--u)));height:max(24px,calc(26 * var(--u)));padding:0;border:0;background:none;
  display:grid;place-items:center;
}
.hero__dots button::before{
  content:"";width:max(9px,calc(12 * var(--u)));height:max(9px,calc(12 * var(--u)));border-radius:50%;
  border:max(1.5px,calc(2.5 * var(--u))) solid #fff;background:rgba(255,255,255,.25);
  box-shadow:0 0 6px rgba(0,30,80,.6);transition:background .3s,transform .3s;
}
.hero__dots button[aria-selected="true"]::before{background:#2f9bff;border-color:#fff;box-shadow:0 0 8px #49b2ff;transform:scale(1.15)}
.hero__dots button:focus-visible{outline:2px solid #fff;border-radius:50%}

/* cloud banks: keyed from the approved target's cloud sea */
.clouds{position:absolute;left:-15%;width:130%;height:auto;pointer-events:none;z-index:2}
.clouds--top,.clouds--top2,.clouds--top3{
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 84%);
          mask-image:linear-gradient(180deg,#000 50%,transparent 84%);
}
.clouds--top{top:calc(-80 * var(--u))}
.clouds--top2{top:calc(-60 * var(--u));left:-32%;width:150%;transform:scaleX(-1)}
.clouds--top3{top:calc(-96 * var(--u));left:-48%;width:175%;opacity:.9}
.clouds--bottom{bottom:-1px;transform:scaleX(-1)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;z-index:100;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  max-width:calc(100vw - 32px);padding:12px 18px;border-radius:12px;
  background:rgba(5,20,60,.92);color:#fff;font-weight:600;font-size:14px;text-align:center;
  box-shadow:0 10px 30px rgba(0,10,40,.35);transition:opacity .25s,transform .25s;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ========== compact header: phone landscape / small tablets ========== */
@media (max-width:1023px){
  .nav{
    display:none;position:fixed;left:auto;right:12px;top:62px;width:auto;height:auto;min-width:200px;
    flex-direction:column;padding:8px;border-radius:12px;z-index:30;
    background:rgba(5,20,62,.94);
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 16px;font-size:15px;min-height:44px}
  .nav a.is-active::after{left:16px;right:auto;width:28px;bottom:6px}
  .menu-btn{
    display:grid;align-content:center;gap:5px;justify-items:center;
    position:absolute;right:12px;top:10px;width:44px;height:44px;padding:0;border-radius:10px;
    background:rgba(5,20,62,.7);border:1px solid rgba(150,200,255,.45);
  }
  .menu-btn span{width:20px;height:2px;border-radius:2px;background:#fff}
  .steam--top{left:auto;right:66px;top:10px;width:auto;height:44px;padding:0 14px;border-radius:10px;font-size:13px}
}

/* ========== landscape phones: keep the composition, guarantee legibility ========== */
@media (orientation:landscape) and (max-height:520px){
  .steam--top{display:none}
  .hero{height:max(calc(560 * var(--u)),100svh - 30px)}
  .pillar__label{font-size:max(9.5px,calc(15 * var(--u)))}
  .pillar__note{font-size:max(7.5px,calc(10.5 * var(--u)))}
  .tagline{font-size:max(11px,calc(25 * var(--u)))}
  .steam--hero{font-size:max(11px,calc(20.5 * var(--u)))}
  .pillars li{width:max(92px,calc(143 * var(--u)))}
  .pillars{left:calc(30 * var(--u))}
  .hero__arrow{top:calc(549 * var(--u));transform:translateY(-50%)}
  .hero__arrow--prev{left:calc(770 * var(--u) - 118px)}
  .hero__arrow--next{right:auto;left:calc(770 * var(--u) + 78px)}
}

/* ========== portrait: same elements, stacked composition ========== */
@media (max-aspect-ratio:1/1){
  .stage{--p:min(calc(100cqw / 390),1.5px)}
  .topbar{height:64px}
  .brand{left:14px;top:8px;width:calc(118 * var(--p));min-width:0}
  .steam--top{display:none}

  .hero{height:calc(738 * var(--p));min-height:0}
  .slide:first-child{--pos:48% 30%}
  
  
  
  .hero__shade{
    background:
      linear-gradient(180deg,rgba(3,14,48,.82) 0,rgba(4,20,64,.66) 34%,rgba(6,28,80,.12) 52%,rgba(6,28,80,0) 60%),
      linear-gradient(90deg,rgba(3,16,54,.35) 0,rgba(3,16,54,0) 60%);
  }

  .headline{left:18px;top:calc(80 * var(--p));font-size:calc(47 * var(--p));-webkit-text-stroke:calc(4.5 * var(--p)) #0b2f96;
    text-shadow:0 0 calc(16 * var(--p)) rgba(56,156,255,.9),0 calc(4 * var(--p)) 0 #08236e}
  .tagline{left:22px;top:calc(238 * var(--p));font-size:calc(15 * var(--p))}
  .steam--hero{left:22px;top:calc(270 * var(--p));width:calc(252 * var(--p));height:calc(50 * var(--p));
    font-size:calc(15.5 * var(--p));border-radius:calc(12 * var(--p))}

  .fg{left:calc(50% + var(--px) * var(--p));top:calc(var(--py) * var(--p));width:calc(var(--pw) * var(--p));transform:translateY(12px) scale(.98)}
  .fg.is-active{transform:none}
  .hero__sign{left:calc(50% + 12 * var(--p));top:calc(438 * var(--p));width:calc(170 * var(--p))}

  /* stills already contain the character: frame them in the scene band so heads/limbs
     never sit behind the fixed copy; a blurred copy of the same frame fills the rest */
  
  
  

  .pillars{left:50%;top:calc(596 * var(--p));transform:translateX(-50%)}
  .pillars li{width:calc(118 * var(--p))}
  .pillar__ring{width:calc(58 * var(--p));height:calc(58 * var(--p));border-width:calc(2 * var(--p));
    box-shadow:0 0 calc(10 * var(--p)) rgba(60,160,255,.75),inset 0 0 calc(8 * var(--p)) rgba(80,170,255,.5)}
  .pillar__label{margin-top:calc(6 * var(--p));font-size:calc(11 * var(--p))}
  .pillar__note{margin-top:calc(3 * var(--p));padding:1px calc(6 * var(--p));font-size:calc(8 * var(--p))}

  .hero__dots{left:50%;top:calc(572 * var(--p));gap:2px}
  .hero__arrow{top:calc(572 * var(--p));transform:translateY(-50%)}
  .hero__arrow--prev{left:calc(50% - 112px)}
  .hero__arrow--next{right:auto;left:calc(50% + 72px)}

}

@media (prefers-reduced-motion:reduce){
  .hero__track,.fg{transition:none}
  html{scroll-behavior:auto}
}

/* ===================== shared media frame (copyright overscan) =====================
   Public raster derivatives carry extra canvas below the image with a copyright line.
   Any element with .gbm shows only the CONTENT image: it takes the content aspect (--ar)
   and stretches its <img> by --ext so the band falls outside the clipped box.
   Every banded image on the site must be shown through this frame (incl. full view). */
.gbm{position:relative;overflow:hidden;aspect-ratio:var(--ar,1.7778)}
.gbm > img{position:absolute;left:0;top:0;width:100%;height:calc(100% * var(--ext,1));max-width:none;object-fit:fill;display:block}

/* ===================== Pass B: area view ===================== */
html.is-locked{overflow:hidden}
.area{
  --bar:72px;--foot:86px;
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--navy-deep);color:#fff;overflow:hidden;
}
.area::backdrop{background:rgba(2,10,32,.6)}
.area[open]{display:grid;grid-template-rows:var(--bar) 1fr var(--foot);animation:area-in .35s ease}
@keyframes area-in{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
.area__bg{
  position:absolute;inset:-60px;z-index:0;background:var(--navy-deep);
  filter:blur(36px) brightness(.48) saturate(1.25);
  container-type:size;overflow:hidden;
}
/* cover-fit of the CONTENT image (band stays clipped) */
.area__bg > .gbm{position:absolute;left:50%;top:50%;width:max(100cqw,100cqh * var(--ar));translate:-50% -50%}
.area__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(6,28,80,0) 30%,rgba(3,12,40,.75) 100%)}

.area__bar{
  position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 20px;
  background:linear-gradient(180deg,rgba(4,16,52,.85),rgba(4,16,52,0));
}
.area__back{
  justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;border-radius:999px;
  background:rgba(8,30,86,.7);border:1.5px solid rgba(150,205,255,.55);color:#fff;font-weight:600;font-size:14px;letter-spacing:.04em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.area__back svg{width:20px;height:20px}
.area__back:hover{background:rgba(16,50,130,.85)}
.area__heading{text-align:center;min-width:0}
.area__title{
  margin:0;font-weight:800;font-size:clamp(20px,2.3vw,30px);letter-spacing:.02em;line-height:1.05;white-space:nowrap;
  text-shadow:0 2px 0 #08236e,0 0 16px rgba(60,150,255,.7);
}
.area__sub{margin:3px 0 0;font-size:clamp(12px,1.1vw,15px);font-weight:500;color:#cfe6ff;letter-spacing:.03em}
.area__count{justify-self:end;margin:0;font-weight:600;font-size:14px;color:#cfe6ff;letter-spacing:.08em}

.area__gallery{position:relative;z-index:2;min-height:0}
.area__track{
  height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;outline:none;
}
.area__track::-webkit-scrollbar{display:none}
.shot{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;padding:0 88px}
.shot__frame{position:relative;
  width:min(100%,calc((100svh - var(--bar) - var(--foot) - 16px) * var(--ar)));
  aspect-ratio:var(--ar);border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(160,210,255,.45),0 18px 50px rgba(0,8,30,.6);
  background:#0b2050;
}
/* the stage is always the full image; hotspots are % of it (Pass E) */
.shot__stage{position:absolute;inset:0}

.shot__hotspots{position:absolute;inset:0}
.shot__hotspots button{
  position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);
  padding:0;border:0;border-radius:10px;background:transparent;
}
.shot__hotspots button:hover,.shot__hotspots button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 16px 4px rgba(90,190,255,.8);outline:none}

.area__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;display:grid;place-items:center;padding:0;border-radius:50%;
  background:rgba(4,14,40,.55);border:1.5px solid rgba(255,255,255,.75);color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 16px rgba(0,0,0,.35);transition:opacity .25s,background .2s;
}
.area__arrow svg{width:55%;height:55%}
.area__arrow:hover{background:rgba(14,50,130,.8)}
.area__arrow--prev{left:20px}.area__arrow--next{right:20px}
.area__arrow[disabled]{opacity:0;pointer-events:none}

.area__foot{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 16px;
  background:linear-gradient(0deg,rgba(4,16,52,.85),rgba(4,16,52,0));
}
.area__label{margin:0;font-weight:600;font-size:15px;letter-spacing:.04em;color:#fff;text-align:center}
.area__label small{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#bfe1ff;background:rgba(40,110,220,.35);border:1px solid rgba(150,205,255,.45);vertical-align:2px}
.area__dots{display:flex;gap:4px}
.area__dots button{width:28px;height:28px;padding:0;border:0;background:none;display:grid;place-items:center}
.area__dots button::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.2);transition:background .25s,transform .25s}
.area__dots button[aria-selected="true"]::before{background:#2f9bff;box-shadow:0 0 8px #49b2ff;transform:scale(1.2)}
.area :focus-visible{outline:3px solid #9fd8ff;outline-offset:2px}

/* tablet: touch-first, image stays large */
@media (max-width:1100px){
  .shot{padding:0 20px}
  .area__arrow{width:44px;height:44px}
  .area__arrow--prev{left:8px}.area__arrow--next{right:8px}
}
/* portrait: near full-width, immersive crop of the full stage around a focal point */
@media (max-aspect-ratio:1/1){
  .area{--bar:64px;--foot:84px}
  .area__bar{grid-template-columns:auto 1fr;padding:0 12px}
  .area__back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .area__back{width:44px;padding:0;justify-content:center}
  .area__heading{text-align:left}
  .area__title{font-size:clamp(18px,5.4vw,26px);white-space:normal}
  .area__count{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
  .shot{padding:0 8px}
  .shot__frame{--fh:min(calc(100svh - var(--bar) - var(--foot) - 40px),calc((100vw - 16px) * 1.45));
    width:100%;height:var(--fh);aspect-ratio:auto}
  .shot__stage{
    right:auto;width:calc(var(--fh) * var(--ar));
    left:clamp(calc(100vw - 16px - var(--fh) * var(--ar)),calc((100vw - 16px) / 2 - var(--fh) * var(--ar) * var(--focus,.5)),0px);
  }
  .area__arrow{top:auto;bottom:calc(var(--foot) * -1 + 20px);transform:none;width:44px;height:44px}
  .area__arrow--prev{left:16px}.area__arrow--next{right:16px}
}
/* short landscape phones */
@media (orientation:landscape) and (max-height:520px){
  .area{--bar:52px;--foot:52px}
  .area__foot{flex-direction:row;gap:14px}
  .area__label{font-size:13px}
  .shot{padding:0 64px}
}
@media (prefers-reduced-motion:reduce){.area[open]{animation:none}.area__track{scroll-behavior:auto}}
@media (max-aspect-ratio:1/1){.area__gallery{z-index:4}}
.area__fit{display:none}
@media (max-aspect-ratio:1/1){
  .area__foot{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:6px;padding:0 70px}
  .area__label{font-size:14px}
  .area__dots{order:3;flex-basis:100%;justify-content:center}
  .area__fit{
    display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.06em;
    color:#fff;background:rgba(8,30,86,.7);border:1.5px solid rgba(150,205,255,.55);
  }
  .area.is-fit .shot__frame{height:auto;aspect-ratio:var(--ar)}
  .area.is-fit .shot__stage{left:0;width:100%}
}
@media (max-aspect-ratio:1/1){
  .area{--foot:112px}
  .area__label{white-space:nowrap}
  .area__arrow{bottom:calc(var(--foot) * -1 + 34px)}
}
@media (orientation:landscape) and (max-height:520px){
  .area{--bar:44px;--foot:40px}
  .area__back{min-height:36px}
  .area__title{font-size:18px}.area__sub{display:none}
  .area__label small{display:none}
  .shot{padding:0 60px}
}

/* ===================== Pass C: gameplay systems ===================== */
.systems{
  position:relative;padding:clamp(18px,2.4vw,34px) 0 clamp(28px,4vw,56px);
  background:
    radial-gradient(ellipse 60% 40% at 15% 30%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(ellipse 55% 35% at 85% 65%,rgba(255,255,255,.75),transparent 70%),
    linear-gradient(180deg,#e3edfb 0,#d6e8fb 45%,#e6f1fd 100%);
  color:var(--ink);
}
.systems__inner{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3vw,40px);display:grid;gap:clamp(14px,1.8vw,24px)}
.systems h2,.systems h3{margin:0}

/* five feature cards */
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px)}
.feat{position:relative;padding:14px 12px 16px;text-align:center}
.feat{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58));border:1.5px solid rgba(255,255,255,.95);border-radius:16px;box-shadow:0 8px 24px rgba(20,60,140,.12)}
.feat__icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 8px;border-radius:50%;color:#fff;box-shadow:0 4px 12px rgba(10,40,110,.25)}
.feat__icon svg{width:58%;height:58%}
.feat__icon--portal{background:radial-gradient(circle at 35% 30%,#4fb3ff,#1257c9)}
.feat__icon--reward{background:radial-gradient(circle at 35% 30%,#ffd65a,#e38a00)}
.feat__icon--secret{background:radial-gradient(circle at 35% 30%,#b97cff,#6a2bc4)}
.feat__icon--traversal{background:radial-gradient(circle at 35% 30%,#4fb3ff,#0d4fb8)}
.feat__icon--team{background:radial-gradient(circle at 35% 30%,#6f8fd8,#24418e)}
.feat h3{font-size:clamp(13px,1.15vw,16px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0b2a6b}
.feat p{margin:4px 0 0;font-size:clamp(12px,.95vw,13.5px);line-height:1.35;color:#2c4a7c}
.feat__note{display:inline-block;margin-top:6px;padding:1px 8px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#24418e;background:rgba(36,65,142,.1);border:1px solid rgba(36,65,142,.25)}

/* section heading (rail) and panel headings */
.sec-head,.panel__head{display:flex;align-items:center;gap:12px}
.sec-head__icon,.panel__icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#123a8f,#071c4f);color:#fff;box-shadow:0 3px 10px rgba(7,28,79,.35)}
.sec-head__icon svg,.panel__icon svg{width:60%;height:60%}
.sec-head h2,.panel__head h2{font-size:clamp(18px,1.9vw,26px);font-weight:800;font-style:italic;letter-spacing:.01em;text-transform:uppercase;color:#0b2a6b;line-height:1.05}
.sec-head p,.panel__head p{margin:3px 0 0;font-size:clamp(10.5px,.85vw,12px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3c5c8f}
.sec-head__nav{margin-left:auto;display:flex;gap:8px}
.round-btn{width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1.5px solid rgba(11,42,107,.25);background:#fff;color:#0b2a6b;box-shadow:0 3px 10px rgba(20,60,140,.15)}
.round-btn svg{width:52%;height:52%}
.round-btn:hover{background:#0b2a6b;color:#fff}
.round-btn--sm{width:36px;height:36px}
.systems :focus-visible{outline:3px solid #2f9bff;outline-offset:2px}

/* Explore Iconic Areas rail */
.rail-block{display:grid;gap:12px}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(160px,calc((100% - 6 * 12px) / 7),240px);gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
.rail::-webkit-scrollbar{display:none}
.area-card{
  position:relative;scroll-snap-align:start;padding:0;border:2px solid #fff;border-radius:14px;overflow:hidden;
  background:#0b2050;color:#fff;text-align:left;box-shadow:0 8px 20px rgba(20,60,140,.2);
  transition:transform .2s,box-shadow .2s;
}
.area-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(20,60,140,.28)}
.area-card__img{display:block;width:100%}
.area-card__img--empty,.area-card .media-missing{display:block;aspect-ratio:1.7778;background:linear-gradient(160deg,#20407e,#0b2050)}
.area-card__text{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(0deg,rgba(4,16,52,.9),rgba(4,16,52,0));display:grid}
.area-card__text strong{font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;text-shadow:0 1px 3px #000a}
.area-card__text small{font-size:11px;color:#d4e6ff}
.area-card__state{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(4,16,52,.8);border:1px solid rgba(150,205,255,.5)}
.area-card.is-pending .area-card__img{filter:saturate(.5) brightness(.75)}

/* three showcase panels */
.trio{display:grid;grid-template-columns:1.25fr 1fr 1.12fr;gap:clamp(12px,1.4vw,20px);align-items:stretch}
.panel{display:flex;flex-direction:column;gap:12px;padding:clamp(12px,1.2vw,18px)}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));border:1.5px solid rgba(255,255,255,.95);border-radius:18px;box-shadow:0 10px 30px rgba(20,60,140,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Level Preview */
.lp{display:grid;gap:10px}
.lp__main{position:relative;display:block;padding:0;border:0;border-radius:14px;overflow:hidden;background:#0b2050;box-shadow:0 0 0 2px #fff,0 8px 20px rgba(10,40,110,.25)}
.lp__frame{display:block;width:100%}
.lp__open{
  position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(4,16,52,.72);border:1.5px solid rgba(255,255,255,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.lp__open svg{width:18px;height:18px}
.lp__main:hover .lp__open{background:#1257c9}
.lp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lp__thumbs button{padding:0;border:0;border-radius:9px;overflow:hidden;background:none;box-shadow:0 0 0 2px rgba(255,255,255,.9);opacity:.75;transition:opacity .2s,box-shadow .2s}
.lp__thumbs button[aria-selected="true"]{opacity:1;box-shadow:0 0 0 3px #1f7ae0}
.lp__thumb{display:block;width:100%}
.lp__bar{display:flex;align-items:center;gap:10px}
.lp__label{flex:1;margin:0;display:grid;text-align:center}
.lp__label strong{font-size:14px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0b2a6b}

/* Fast Travel */
.ft{position:relative;flex:1;display:flex;flex-direction:column;padding:0;border:0;border-radius:14px;overflow:hidden;background:#0b2050;text-align:center;box-shadow:0 0 0 2px #fff,0 8px 20px rgba(10,40,110,.25)}
.ft__frame{display:block;width:100%;flex:1;min-height:0}
.ft__frame.gbm{aspect-ratio:auto;min-height:clamp(200px,22vw,320px)}
.ft__frame.gbm > img{height:calc(100% * var(--ext));object-fit:cover;object-position:50% 40%}
.ft__caption{display:grid;gap:2px;padding:10px 12px 12px;background:linear-gradient(180deg,#0e2a6e,#071c4f);color:#fff}
.ft__caption strong{font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.ft__caption span{font-size:12.5px;color:#cfe6ff}
.ft:hover .ft__caption{background:linear-gradient(180deg,#1440a0,#0a2766)}

/* Enemies & Hazards */
.foes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.foe{width:100%;height:100%;display:grid;align-content:start;gap:2px;padding:0 0 8px;border:0;border-radius:12px;overflow:hidden;text-align:left;background:rgba(255,255,255,.75);box-shadow:0 0 0 1.5px rgba(255,255,255,.95),0 4px 12px rgba(20,60,140,.12);transition:transform .2s,box-shadow .2s}
.foe:hover{transform:translateY(-2px);box-shadow:0 0 0 2px #1f7ae0,0 8px 18px rgba(20,60,140,.2)}
.foe__img{display:block;width:100%;margin-bottom:4px}
.foe strong{padding:0 8px;font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0b2a6b}
.foe small{padding:0 8px;font-size:11.5px;line-height:1.3;color:#2c4a7c}

.media-missing{display:grid;place-items:center;aspect-ratio:1.6;background:repeating-linear-gradient(135deg,#e7eef9 0 10px,#dde7f5 10px 20px);color:#5a7299;font-size:12px;font-weight:600;text-align:center;border-radius:10px}

/* entity dossier */
.dossier{width:min(980px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:0;border-radius:20px;background:transparent;color:#fff;overflow:visible}
.dossier::backdrop{background:rgba(2,10,32,.72);backdrop-filter:blur(4px)}
.dossier[open]{animation:area-in .3s ease}
.dossier__card{max-height:calc(100svh - 32px);overflow:auto;border-radius:20px;background:linear-gradient(180deg,#0e2a6e,#061638);border:1.5px solid rgba(150,205,255,.45);box-shadow:0 24px 60px rgba(0,8,30,.6)}
.dossier__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(180deg,#0e2a6e 70%,rgba(14,42,110,0))}
.dossier__type{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fd0ff}
.dossier__name{margin:2px 0 0;font-size:clamp(22px,3vw,32px);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 0 #08236e,0 0 16px rgba(60,150,255,.6)}
.dossier__close{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.6);color:#fff}
.dossier__close svg{width:20px;height:20px}
.dossier__close:hover{background:rgba(255,255,255,.22)}
.dossier__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;padding:4px 18px 20px}
.dossier__render{display:block;width:100%;border-radius:14px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}

.dossier dl{margin:0;display:grid;gap:2px}
.dossier dt{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fd0ff}
.dossier dd{margin:0;font-size:15px;line-height:1.4}
.dossier h3{margin:16px 0 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fd0ff}
.dossier__states,.dossier__encs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dossier__encs{grid-template-columns:repeat(2,1fr)}
.dossier__states li,.dossier__encs li{display:grid;gap:4px}
.dossier__states small,.dossier__encs small{font-size:11.5px;color:#cfe6ff}
.dossier__state,.dossier__enc{display:block;width:100%;border-radius:10px}
.dossier .media-missing{aspect-ratio:1.4;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 10px,rgba(255,255,255,.1) 10px 20px);color:#9fb8dd;font-size:11px;border:1px dashed rgba(150,205,255,.35)}
.dossier__encs a{color:inherit;text-decoration:none}
.dossier__encs a:hover .dossier__enc{box-shadow:0 0 0 2px #5cc2ff}
.dossier__empty{margin:0;font-size:13px;color:#9fb8dd}
.dossier :focus-visible{outline:3px solid #9fd8ff;outline-offset:2px}

/* responsive */
@media (max-width:1099px){
  .trio{grid-template-columns:1fr 1fr}
  .panel--preview{grid-column:1/-1}
  .lp{grid-template-columns:1.6fr 1fr;align-items:start}
  .lp__main{grid-row:span 2}
  .lp__thumbs{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .feats::-webkit-scrollbar{display:none}
  .feat{scroll-snap-align:start}
  .rail{grid-auto-columns:clamp(170px,26vw,230px)}
}
@media (max-width:719px){
  .trio{grid-template-columns:1fr}
  .lp{grid-template-columns:1fr}
  .lp__main{grid-row:auto}
  .lp__thumbs{grid-template-columns:repeat(4,1fr)}
  .feats{grid-template-columns:repeat(5,72%)}
  .rail{grid-auto-columns:64%}
  .sec-head__nav{display:none}
  .dossier{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;border-radius:0}
  .dossier__card{height:100%;max-height:none;border-radius:0;border:0}
  .dossier__body{grid-template-columns:1fr;padding:0 16px 24px}
}
@media (max-width:419px){
  .foes{grid-template-columns:repeat(2,1fr)}
}
@media (orientation:landscape) and (max-height:520px){
  .dossier{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;border-radius:0}
  .dossier__card{height:100%;max-height:none;border-radius:0;border:0}
}
/* rail cards: target-like 4:3 tiles; cover-crop keeps the band below the box */
.area-card .area-card__img.gbm{aspect-ratio:4/3}
.area-card .area-card__img.gbm > img{object-fit:cover;object-position:50% 50%}
.area-card .area-card__img--empty{aspect-ratio:4/3}
.dossier .media-missing,.systems .media-missing{display:grid;place-items:center;padding:6px}
.dossier__caption{margin:6px 0 0;font-size:11.5px;color:#9fb8dd}
/* banded transparent cutouts keep their own absolute placement */
.gbm{display:block}
.hero .gbm.hero__sign,.hero .gbm.fg{position:absolute}
.hero .gbm.hero__sign > img,.hero .gbm.fg > img{filter:none}
.brand .gbm{filter:drop-shadow(0 2px 6px rgba(0,10,40,.45))}
.brand .gbm > img{filter:none}
.dossier__evo{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dossier__evo li{display:grid;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(150,205,255,.35)}
.dossier__evo li + li::before{content:"→";position:absolute;margin:8px 0 0 -22px;color:#9fd0ff}
.dossier__evo li{position:relative;margin-left:0}
.dossier__evo li + li{margin-left:16px}
.dossier__evo li[aria-current]{background:rgba(47,155,255,.25);border-color:#5cc2ff}
.dossier__evo a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dossier__evo small{font-size:11px;color:#9fd0ff}
.dossier__note{margin-left:6px;font-size:12px;color:#9fb8dd}
/* polished "artwork in production" tile */
.systems .media-missing,.dossier .media-missing{
  position:relative;overflow:hidden;gap:6px;align-content:center;justify-items:center;
  background:radial-gradient(ellipse 80% 70% at 50% 35%,#1d4aa3 0,#0d2c6e 55%,#071c4f 100%);
  color:#cfe6ff;border:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.systems .media-missing::after,.dossier .media-missing::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);
}
.media-missing__icon{width:34%;max-width:64px;aspect-ratio:1;color:rgba(170,215,255,.55);filter:drop-shadow(0 0 10px rgba(80,170,255,.45))}
.dossier__visual .media-missing{aspect-ratio:1.4;border-radius:14px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.dossier__visual .media-missing__icon{max-width:110px}
.dossier__state.media-missing{background:rgba(255,255,255,.05);border:1px dashed rgba(150,205,255,.3);color:#8fb0da;font-weight:600;letter-spacing:.02em;text-transform:none}
.dossier__state.media-missing::after{display:none}
.foe .media-missing{border-radius:0;aspect-ratio:1.6}
.anchor-alias{position:absolute}
/* region-identity placeholders (until region imagery exists) */
.region-id{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden}
.region-id svg{position:relative;z-index:1;width:30%;aspect-ratio:1;margin-bottom:22%;color:rgba(255,255,255,.92);filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.region-id::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18) 0,transparent 40%),
    radial-gradient(ellipse 70% 45% at 50% 34%,rgba(255,255,255,.22),transparent 70%)}
.region-id::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-6%;height:52%;
  clip-path:polygon(0 100%,0 62%,14% 30%,24% 52%,38% 8%,52% 46%,63% 22%,78% 56%,90% 34%,100% 58%,100% 100%)}
.region-id--forest{background:linear-gradient(170deg,#3fae6a 0,#23864a 48%,#14532d 100%)}
.region-id--forest::after{background:linear-gradient(180deg,#1b6b3a,#0f3f22)}
.region-id--ice{background:linear-gradient(170deg,#d8f0ff 0,#7cc6f2 46%,#3a86c4 100%)}
.region-id--ice::after{background:linear-gradient(180deg,#f4fbff 0,#bfe3f8 30%,#7fb7de 100%)}
.region-id--ice svg{color:#fff}
.area-card.is-pending .region-id{filter:none}
.foes li:last-child:nth-child(3n+1){grid-column:2}
@media (max-width:419px){.foes li:last-child:nth-child(3n+1){grid-column:auto}.foes li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}}
.foe .media-missing{font-size:9px;letter-spacing:.08em;line-height:1.25;padding:6px}
.foe .media-missing__icon{width:26%}

/* hero scene slides (banded media): cover-fit the CONTENT image; the copyright band is never shown */
.slide--scene{position:relative;overflow:hidden}
.scene-box{position:absolute;inset:0;overflow:hidden;container-type:size}
.scene-box > .gbm{
  position:absolute;width:max(100cqw,100cqh * var(--ar));
  --fx:var(--pos-x,50%);
  left:50%;top:var(--fy,45%);translate:-50% calc(-1 * var(--fy,45%));
}
.slide--scene > .scene-box > .gbm > img{filter:brightness(1.04) saturate(1.04)}
@media (max-aspect-ratio:1/1){
  .slide--scene::before{content:"";position:absolute;inset:-40px;background:var(--bg) center 30%/cover no-repeat;filter:blur(18px) brightness(.8) saturate(1.1)}
  .slide--scene .scene-box{inset:auto;left:0;right:0;top:calc(296 * var(--p));height:calc(330 * var(--p));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%)}
  .slide--scene .scene-box > .gbm{left:var(--sx,50%);translate:calc(-1 * var(--sx,50%)) calc(-1 * var(--fy,45%))}
}

/* ===================== Production art + Meet the Team™ ===================== */
/* stage-box: a size container that fits a banded transparent cutout (.gbm.cutout) inside it.
   --fw/--fh = max share of the box width/height, --fb = gap below the figure */
.stage-box{position:relative;display:block;container-type:size}
.stage-box > .gbm.cutout{position:absolute;left:50%;bottom:var(--fb,0%);translate:-50% 0;
  width:min(calc(var(--fw,100) * 1cqw),calc(var(--fh,100) * 1cqh * var(--ar)))}

.chip{position:absolute;top:12px;left:12px;z-index:2;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0b2a6b;background:rgba(255,255,255,.88);box-shadow:0 1px 4px rgba(0,20,60,.18)}

/* Level Preview + Fast Travel share a row; Enemies & Hazards gets the full width */
.trio{grid-template-columns:1.4fr 1fr}
@media (max-width:1099px){.trio{grid-template-columns:1fr 1fr}.panel--preview{grid-column:auto}.lp{grid-template-columns:1fr}.lp__main{grid-row:auto}.lp__thumbs{grid-template-columns:repeat(4,1fr)}}
@media (max-width:719px){.trio{grid-template-columns:1fr}}

/* Enemies & Hazards: image-first cards, one row of seven on wide screens */
.panel--hazards{gap:14px}
.foes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;--cols:7}
.foes li{flex:0 0 calc((100% - (var(--cols) - 1) * 12px) / var(--cols));min-width:0;grid-column:auto!important;width:auto!important}
.foe{display:flex;flex-direction:column;height:100%;padding:0;border:0;border-radius:16px;overflow:hidden;text-align:left;background:#fff;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.95),0 8px 20px rgba(20,60,140,.16)}
.foe:hover{transform:translateY(-3px);box-shadow:0 0 0 2px #1f7ae0,0 12px 26px rgba(20,60,140,.24)}
.foe__stage{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(ellipse 75% 70% at 50% 40%,#fff 0,#e6f0fd 50%,#bfd5f3 100%)}
.foe__stage::after{content:"";position:absolute;left:24%;right:24%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,28,80,.3),rgba(8,28,80,0))}
.foe__stage > .gbm.cutout{position:absolute;left:50%;bottom:12%;translate:-50% 0;width:min(84%,calc(70% * var(--ar)));z-index:1;transition:transform .25s}
.foe:hover .foe__stage > .gbm.cutout{transform:translateY(-3px) scale(1.04)}
.foe__stage > .gbm.foe__img{position:absolute;inset:0;aspect-ratio:auto;margin:0}
.foe__stage > .gbm.foe__img > img{object-fit:cover;object-position:50% 50%}
.foe__stage > .media-missing{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;z-index:1}
.foe__text{display:grid;gap:2px;padding:10px 12px 12px;border-top:1px solid #e3ecf8}
.foe .foe__text strong{padding:0;font-size:clamp(12.5px,1vw,14px)}
.foe .foe__text small{padding:0;font-size:12px}
.foe--approved .foe__text{border-top:3px solid #1f7ae0}
@media (max-width:1099px){.foes{--cols:4}}
@media (max-width:719px){.foes{--cols:2;gap:10px}.foes li{flex-basis:calc((100% - 10px) / 2)}}

/* Meet the Team™ */
.team{position:relative;padding:clamp(30px,4.4vw,64px) 0 clamp(36px,5vw,76px);color:#fff;overflow:hidden;
  background:radial-gradient(ellipse 60% 50% at 50% 0,rgba(90,170,255,.35),transparent 70%),linear-gradient(180deg,#0d2f7a 0,#0a2563 55%,#071a48 100%)}
.team::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#1f6fff,#e3262f,#8a2be2,#f5b800)}
.team__inner{position:relative;max-width:1360px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.team .sec-head h2{color:#fff;font-size:clamp(24px,2.6vw,38px);text-shadow:0 2px 0 #061a4d}
.team .sec-head p{color:#a9d2ff}
.team .sec-head__icon{background:linear-gradient(180deg,#fff,#d6e8ff);color:#0b2a6b}
.team__nav{display:none}
.team__list{list-style:none;margin:clamp(16px,2vw,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.team__list > li{min-width:0}
.mate{display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 18px 40px rgba(0,8,34,.45);transition:transform .25s,box-shadow .25s}
.mate:hover{transform:translateY(-5px);box-shadow:0 0 0 3px var(--c),0 24px 48px rgba(0,8,34,.55)}
.mate:focus-visible{outline:3px solid #fff;outline-offset:3px}


.char__mark{position:absolute;left:0;right:0;top:12%;text-align:center;font-size:clamp(96px,11vw,180px);font-weight:900;font-style:italic;line-height:1;letter-spacing:-.04em;color:var(--c);opacity:.13;pointer-events:none;user-select:none}



.mate__text{display:grid;gap:4px;padding:12px 16px 15px;border-top:5px solid var(--c);background:linear-gradient(180deg,#fff,#f0f5fc)}
.mate__text strong{font-size:clamp(15px,1.35vw,20px);font-weight:800;font-style:italic;letter-spacing:.01em;text-transform:uppercase;color:#0b2a6b;line-height:1.1}
.mate__text small{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4a6590}
.mate__text i,.char__team i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(11,42,107,.2)}
@media (max-width:899px) and (min-width:720px){
  .team__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  
}
/* phone: horizontal snap carousel, the next card peeks in */
@media (max-width:719px){
  .team__nav{display:flex}
  .team__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:4px 16px 14px;scroll-padding:0 16px}
  .team__list::-webkit-scrollbar{display:none}
  .team__list > li{scroll-snap-align:start}
}
@media (orientation:landscape) and (max-height:520px){
  .team__list{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;overflow:visible;margin:14px 0 0;padding:0}
  .team__nav{display:none}
  
}

/* enemy dossier: production stage + selectable views/states */
.dossier__stage{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:radial-gradient(ellipse 72% 66% at 50% 42%,#fff 0,#e3eefc 52%,#b5cdef 100%);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.dossier__stage::after{content:"";position:absolute;left:24%;right:24%;bottom:12%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,28,80,.32),rgba(8,28,80,0))}
.dossier__stage > .stage-box{position:absolute;inset:14% 8% 15%;z-index:1}

.dossier__picks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dossier__picks--states{grid-template-columns:repeat(4,minmax(0,1fr))}
.dossier__pick,.char__view{width:100%;display:grid;gap:4px;padding:0 0 6px;border:0;border-radius:11px;overflow:hidden;background:rgba(255,255,255,.07);color:#cfe6ff;font:inherit;
  box-shadow:0 0 0 1.5px rgba(150,205,255,.3);transition:box-shadow .2s}
.dossier__pick small,.char__view small{font-size:11px;font-weight:600;color:#cfe6ff;text-align:center}
.dossier__pick .stage-box{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#fff 0,#dfeafb 58%,#bcd3f2 100%);--fw:84;--fh:72;--fb:12%}
.dossier__pick:hover,.char__view:hover{box-shadow:0 0 0 2px #9fd8ff}
.dossier__pick[aria-pressed="true"]{box-shadow:0 0 0 2.5px #fff,0 0 0 5px #2f9bff}

/* character view (#character/<id>) */
.char{width:min(1080px,calc(100vw - 32px))}
.char__card{background:radial-gradient(ellipse 70% 40% at 30% 0,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),linear-gradient(180deg,#0e2a6e,#061638)}
.char__head{background:transparent}
.char__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;padding:4px 18px 22px;align-items:start}
.char__stage{position:relative;height:clamp(380px,64svh,640px);border-radius:18px;overflow:hidden;background:#eef4fc;
  background:radial-gradient(ellipse 70% 60% at 50% 40%,#fff 0,color-mix(in srgb,var(--c) 18%,#fff) 52%,color-mix(in srgb,var(--c) 52%,#cfdcf0) 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 16px 40px rgba(0,6,30,.45)}
.char__stage::after{content:"";position:absolute;left:26%;right:26%;bottom:8%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,28,80,.32),rgba(8,28,80,0))}
.char__stage > .stage-box{position:absolute;inset:6% 4% 9.5%;z-index:1}
.char__looks{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(150,205,255,.35)}
.char__look{min-height:46px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:#cfe6ff;font:inherit;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.char__look:hover{background:rgba(255,255,255,.1)}
.char__look[aria-pressed="true"]{background:#fff;color:#0b2a6b;box-shadow:inset 0 -4px 0 var(--c)}
.char__views{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.char__view .stage-box{aspect-ratio:3/4;background:radial-gradient(ellipse at 50% 40%,#fff 0,color-mix(in srgb,var(--c) 14%,#fff) 60%,color-mix(in srgb,var(--c) 36%,#d5e2f4) 100%);--fw:90;--fh:90;--fb:5%}
.char__view[aria-pressed="true"]{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--c)}

.char__team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.char__team a{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 12px;border-radius:11px;color:#fff;text-decoration:none;font-size:13px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(150,205,255,.25)}
.char__team a:hover{background:rgba(255,255,255,.14)}
.char__team a[aria-current]{background:rgba(255,255,255,.18);border-color:#fff}
.char__mark{top:10%;font-size:clamp(130px,16vw,230px)}
@media (max-width:719px){
  .char{width:100vw;max-width:100vw}
  .char__body{grid-template-columns:1fr;padding:0 16px 24px}
  .char__stage{height:min(58svh,520px)}
}
@media (orientation:landscape) and (max-height:520px){
  .char__body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .char__stage{height:calc(100svh - 96px)}
  .char__views{grid-template-columns:repeat(4,minmax(0,64px))}
}

/* final branding footer */
.site-foot{display:grid;justify-items:center;gap:8px;padding:clamp(26px,3.5vw,44px) 16px calc(28px + env(safe-area-inset-bottom));background:#061538;color:#cfe6ff;text-align:center}
.site-foot__logo{width:clamp(150px,16vw,210px)}
.site-foot__tag{margin:0;font-size:12px;font-weight:800;letter-spacing:.28em;color:#fff}
.site-foot__legal{margin:0;font-size:12px;color:#9fb8dd}
.site-foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:4px 0}
.site-foot__nav a{color:#cfe6ff;font-size:13px;font-weight:600;text-decoration:none;padding:6px 2px}
.site-foot__nav a:hover{color:#fff;text-decoration:underline}
.site-foot__nav a:focus-visible{outline:2px solid #9fd8ff;outline-offset:2px;border-radius:4px}
.team h2,.team p{margin:0}
.team .sec-head p{margin-top:4px}
@media (max-width:719px){.team .sec-head h2{font-size:clamp(20px,6vw,26px)}}

/* ===================== Enemies & Hazards: production pass 2 ===================== */
/* evolution teaser band under the grid */

/* evolution component inside the dossier */
.evo{grid-column:1/-1;display:grid;gap:12px;padding:16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(150,205,255,.3)}
.evo__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.evo__head h3{margin:0;font-size:12px}
.evo__head p{margin:3px 0 0;font-size:15px;font-weight:800;font-style:italic;text-transform:uppercase;color:#fff}
.evo__tabs{margin-left:auto;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(150,205,255,.3)}
.evo__tabs button{min-height:40px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#cfe6ff;font:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.evo__tabs button[aria-selected="true"]{background:#fff;color:#0b2a6b}
.evo__seq,.evo__mech,.evo__scenes{list-style:none;margin:0;padding:0}
.evo__seq{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.evo__step{position:relative;display:grid;gap:2px;text-align:center}
.evo__step + .evo__step::before{content:"›";position:absolute;left:-12px;top:30%;font-size:22px;font-weight:800;color:#ffb35c}
.evo__step .stage-box{aspect-ratio:1;border-radius:12px;background:radial-gradient(circle at 50% 42%,#fff 0,#e3edfb 58%,#b8cdee 100%);--fw:90;--fh:86;--fb:5%;box-shadow:0 0 0 1.5px rgba(150,205,255,.3)}
.evo__step.is-here .stage-box{box-shadow:0 0 0 2.5px #fff,0 0 0 5px #ffb35c}
.evo__step strong{margin-top:4px;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.evo__step small{font-size:10.5px;color:#9fd0ff}
.evo__mech{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.evo__mech li,.evo__scenes li{position:relative;display:grid;align-content:start;gap:4px}
.evo__mechimg,.evo__sceneimg{display:block;width:100%;border-radius:12px;box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.evo__mech strong,.evo__scenes strong{margin-top:4px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.evo__mech p,.evo__scenes p{margin:0;font-size:12.5px;line-height:1.35;color:#cfe6ff}
.evo__scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.evo__scenes li.is-here .evo__sceneimg{box-shadow:0 0 0 2.5px #fff,0 0 0 5px #ffb35c}
.evo__num{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#0b2a6b;color:#fff;font-size:12px;font-weight:800;box-shadow:0 0 0 2px #fff}
.evo__note{margin:0;font-size:12px;color:#9fb8dd}

/* phones: dense galleries become swipe rails instead of shrinking */
@media (max-width:719px){
  
  
  
  
  .dossier__picks,.evo__seq,.evo__mech,.evo__scenes{display:grid;grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:6px}
  .dossier__picks::-webkit-scrollbar,.evo__seq::-webkit-scrollbar,.evo__mech::-webkit-scrollbar,.evo__scenes::-webkit-scrollbar{display:none}
  .dossier__picks{grid-auto-columns:96px}
  .evo__seq{grid-auto-columns:118px}
  .evo__mech{grid-auto-columns:70%}
  .evo__scenes{grid-auto-columns:78%}
  .dossier__picks > li,.evo__seq > li,.evo__mech > li,.evo__scenes > li{scroll-snap-align:start}
  .evo__tabs{margin-left:0;width:100%}
  .evo__tabs button{flex:1;padding:0 6px;font-size:11px}
  .evo{padding:12px}
}
@media (min-width:720px) and (max-width:899px){
  .evo__seq{grid-template-columns:repeat(4,minmax(0,1fr))}
  .evo__step:nth-child(5)::before{display:none}
  .evo__mech{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-height:520px){
  .evo__seq{grid-template-columns:repeat(7,minmax(0,1fr))}
}
.dossier__body > *,.char__body > *{min-width:0}
.dossier__card{overflow-x:hidden}
.dossier__head{z-index:5}
@media (max-width:719px){.dossier__body{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){.evo__scenes{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.evo__scenes p{font-size:11.5px}}
.evo{grid-template-columns:minmax(0,1fr)}.evo > *{min-width:0}

/* ===================== Visual convergence pass ===================== */
:root{--cloud:#e9f1fc}
.stage{background:var(--cloud)}

/* --- one cloud system: the same puff scale at every viewport (no per-breakpoint layers) --- */
.world{--cw:max(130cqw,1180px);--ch:calc(var(--cw) * .0693)}
.clouds{left:50%;width:var(--cw);translate:-50% 0}
.clouds--top{top:calc(var(--ch) * -.66)}
.clouds--top2{top:calc(var(--ch) * -.5);translate:-58% 0;transform:scaleX(-1)}
.clouds--top3{top:calc(var(--ch) * -.86);translate:-42% 0;opacity:.85}
.clouds--bottom{bottom:-1px;transform:scaleX(-1)}
/* the bank's lower edge dissolves into the shared cloud white the page continues on */
.map-frame::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:calc(var(--ch) * .5);z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(233,241,252,0),var(--cloud) 80%)}

/* page continues on the cloud sea: soft puffs, no hard edge under the map */
.systems{position:relative;z-index:1;
  background:
    radial-gradient(ellipse 34% 90px at 14% 30px,#fff,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 30% 80px at 52% 10px,#fff,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 34% 100px at 88% 40px,#fff,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 60% 40% at 12% 38%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(ellipse 55% 35% at 88% 70%,rgba(255,255,255,.65),transparent 70%),
    linear-gradient(180deg,var(--cloud) 0,#e3edfb 320px,#d9e8fb 60%,#e4effd 100%)}
@media (min-aspect-ratio:1/1){
  .systems{padding-top:0}
  .feats{margin-top:calc(-1 * clamp(26px,3.4vw,58px));position:relative;z-index:2}
}
.feat{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));box-shadow:0 10px 30px rgba(20,60,140,.14)}

/* --- compact region pins (panorama mode, once world coordinates are locked) --- */
.hotspot.pin{width:auto;height:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:99px;
  background:rgba(6,24,70,.42);border:1px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:background .2s,padding .2s,box-shadow .2s}
.pin__icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18)}
.pin__icon svg{width:15px;height:15px;fill:currentColor}
.pin__text{display:grid;text-align:left}
.pin__text strong{font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.85;white-space:nowrap}
.pin__text small{display:none;font-size:11px;color:#cfe6ff;white-space:nowrap}
.hotspot.pin:hover,.hotspot.pin:focus-visible,.hotspot.pin.is-open{background:rgba(6,24,70,.85);padding:5px 14px 5px 5px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hotspot.pin:hover .pin__text strong,.hotspot.pin:focus-visible .pin__text strong,.hotspot.pin.is-open .pin__text strong{font-size:14px;opacity:1}
.hotspot.pin:hover .pin__text small,.hotspot.pin:focus-visible .pin__text small,.hotspot.pin.is-open .pin__text small{display:block}
.hotspot.pin:hover .pin__icon,.hotspot.pin:focus-visible .pin__icon,.hotspot.pin.is-open .pin__icon{width:34px;height:34px}

/* --- Explore Iconic Areas: image-led rail, soft ends, edge arrows, peeking card --- */
.rail-wrap{position:relative}
.rail{grid-auto-columns:clamp(200px,calc((100% - 5 * 14px) / 5.6),300px);gap:14px;padding:6px 2px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%)}
.area-card{border-width:2.5px;border-radius:16px;box-shadow:0 10px 24px rgba(20,60,140,.22)}
.area-card .area-card__img.gbm,.area-card .area-card__img--empty,.area-card .region-id{aspect-ratio:5/4}
.area-card__text{padding:30px 12px 10px}
.area-card__text strong{font-size:14px}
.area-card__text small{font-size:11px;opacity:.85}
.area-card__state{top:8px;left:auto;right:8px;padding:2px 7px;font-size:9px;letter-spacing:.08em;background:rgba(4,16,52,.72);border-color:rgba(255,255,255,.35)}
.rail-arrow{position:absolute;top:calc(50% - 4px);translate:0 -50%;z-index:3;width:46px;height:46px;background:#fff;color:#0b2a6b;
  box-shadow:0 6px 18px rgba(10,40,110,.3)}
.rail-arrow--prev{left:-6px}.rail-arrow--next{right:-6px}
.rail-arrow:hover{background:#0b2a6b;color:#fff}
@media (max-width:1099px){.rail{grid-auto-columns:clamp(190px,34vw,260px)}}
@media (max-width:719px){.rail{grid-auto-columns:68%}.rail-arrow{width:40px;height:40px}.rail-arrow--prev{left:-4px}.rail-arrow--next{right:-4px}}

/* --- Level Preview / Fast Travel / Enemies & Hazards: one three-part row --- */
.trio{grid-template-columns:minmax(0,1.05fr) minmax(0,.78fr) minmax(0,1.6fr);align-items:stretch}
.panel{gap:10px}
.panel__head p{display:none}
.ft__frame.gbm{min-height:0;flex:1}
.ft__caption span{display:none}
@media (max-width:1099px){
  .trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .panel--hazards{grid-column:1/-1}
}
@media (max-width:719px){.trio{grid-template-columns:minmax(0,1fr)}}

/* enemy cards: equal geometry; the render sits on a light plinth and big forms break out of it */
.foes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 12px}
.foes li{flex:none}
.foe{position:relative;overflow:visible;height:100%;border-radius:16px;background:transparent;box-shadow:none}
.foe:hover{transform:none;box-shadow:none}
.foe__stage{position:relative;display:block;aspect-ratio:1/1.02;overflow:visible;background:none}
.foe__stage::before{content:"";position:absolute;left:0;right:0;bottom:0;top:22%;border-radius:16px 16px 0 0;
  background:radial-gradient(ellipse 80% 75% at 50% 35%,#fff 0,#e6f0fd 52%,#bcd3f2 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95)}
.foe__stage::after{left:22%;right:22%;bottom:7%;height:7%;z-index:1}
.foe__stage > .gbm.cutout{bottom:9%;width:calc(var(--s) * 92%);max-width:none;z-index:2;filter:drop-shadow(0 8px 10px rgba(10,30,80,.28));transition:transform .25s}
.foe--big .foe__stage > .gbm.cutout{bottom:6%;filter:drop-shadow(0 10px 14px rgba(10,30,80,.35))}
.foe:hover .foe__stage > .gbm.cutout{transform:translateY(-4px) scale(1.04)}
.foe__text{position:relative;z-index:3;border-radius:0 0 16px 16px;background:#fff;border-top:3px solid #1f7ae0;padding:8px 10px 10px;box-shadow:0 8px 18px rgba(20,60,140,.14)}
.foe:hover .foe__text{background:#0b2a6b}
.foe:hover .foe__text strong,.foe:hover .foe__text small{color:#fff}
.foe .foe__text small{font-size:11.5px}
.foe--evo{display:grid;align-content:center;gap:8px;padding:14px;border-radius:16px;text-align:left;color:#fff;
  background:radial-gradient(ellipse 70% 60% at 85% 20%,rgba(150,90,255,.4),transparent 70%),radial-gradient(ellipse 60% 60% at 15% 85%,rgba(255,140,40,.32),transparent 70%),linear-gradient(150deg,#123a8f,#071a48);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 10px 22px rgba(7,28,79,.3)}
.foe--evo:hover{box-shadow:0 0 0 2px #ffb35c,0 12px 26px rgba(7,28,79,.4)}
.foe-evo__kicker{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffb35c}
.foe-evo__line{font-size:clamp(13px,1.1vw,15px);font-weight:800;font-style:italic;text-transform:uppercase;line-height:1.2}
.foe-evo__line i{font-style:normal;color:#ffb35c}
.foe-evo__go{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:4px;padding:7px 12px;border-radius:99px;background:#fff;color:#0b2a6b;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.foe-evo__go svg{width:13px;height:13px}
@media (max-width:719px){.foes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}}

/* --- dossier: no words over the art; capped render sizes until higher-res renders arrive --- */
.chip--inline{position:static;display:inline-block;margin-right:4px;padding:1px 8px;font-size:9.5px;vertical-align:1px;box-shadow:none}
.dossier__caption{line-height:1.6}
.dossier__stage{max-width:560px}
.dossier__stage > .stage-box{inset:8% 6% 9%}
.char__caption{margin:8px 0 0;font-size:12px;color:#cfe6ff}
.char__stage > .stage-box{inset:6% 4% 5%}

/* --- Meet the Team™: team-colour panels, characters dominate and break the frame --- */
.team{background:
    linear-gradient(180deg,rgba(7,26,72,.55),rgba(7,26,72,.82)),
    radial-gradient(ellipse 60% 50% at 50% 0,rgba(90,170,255,.45),transparent 70%),
    linear-gradient(180deg,#123f98 0,#0a2563 55%,#071a48 100%)}
.team::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(assets/hero-world-highfive.webp?v=d409fe1e44) center 30%/cover no-repeat;opacity:.16;filter:blur(6px) saturate(1.2)}
.team__inner{z-index:1}
.team__list{margin-top:clamp(40px,4.4vw,70px);gap:clamp(14px,1.8vw,26px)}
.mate{position:relative;overflow:visible;border-radius:22px;background:transparent;box-shadow:none}
.mate:hover{box-shadow:none;transform:translateY(-5px)}




/* the figure is taller than the panel: head and hands rise above the frame, legs crop at the base */


.mate__text{position:relative;z-index:2;border-top:0;border-radius:0 0 22px 22px;padding:12px 16px 15px;
  background:linear-gradient(180deg,var(--cd),color-mix(in srgb,var(--cd) 70%,#000))}
.mate__text strong{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.mate__text small{color:rgba(255,255,255,.8)}
.mate__text i{box-shadow:0 0 0 2px #fff}

.mate:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (max-width:719px){
  .team__list{padding-top:44px;margin-top:0;grid-auto-columns:74%}
}
@media (orientation:landscape) and (max-height:520px){.team__list{margin-top:40px}}
@media (max-aspect-ratio:1/1){
  .world{--cw:max(180cqw,900px)}
}
/* Fast Travel keeps a picture-frame height when it is not stretched by a row */
@media (max-width:719px){.ft__frame.gbm{flex:none;aspect-ratio:4/3}}
/* enemy renders sized against the card stage: big evolved forms are taller and wider */
.foe__stage{container-type:size}
.foe__stage > .gbm.cutout{width:min(calc(var(--s) * 96cqw),calc(var(--s) * 78cqh * var(--ar)))}
.foe-evo__line{font-size:clamp(12px,.95vw,14px)}
.foe-evo__go{padding:6px 10px;font-size:10px;white-space:nowrap}
.foe--evo{min-width:0;overflow:hidden;padding:12px;gap:6px}
.foe--evo > span{min-width:0}
.foe-evo__kicker{font-size:9.5px;letter-spacing:.1em}
.foe-evo__go{white-space:normal;line-height:1.2}
@media (max-aspect-ratio:1/1){
  .world{margin-top:calc(-44 * var(--p))}
  .world{--cw:max(330cqw,1500px)}
  .clouds--top{top:calc(var(--ch) * -.55)}
  .clouds--top2{top:calc(var(--ch) * -.38)}
  .clouds--top3{top:calc(var(--ch) * -.72)}
}
.foe__stage > .gbm,.foe__stage::before,.foe__stage::after{pointer-events:none}
.systems__inner{grid-template-columns:minmax(0,1fr)}.systems__inner > *{min-width:0}
.rail-block,.rail-wrap{grid-template-columns:minmax(0,1fr);min-width:0}.systems,.team{overflow-x:clip}

/* ===================== World viewer (world.js) =====================
   Fallback mode: the current front map (JS sets the viewport height from the configured size).
   Panorama mode: CSS sets the viewport height; tiles loop horizontally.
   Clouds are the hero-to-world transition only: never geography, never interactive. */
.world{position:relative;z-index:3;margin-top:calc(-40 * var(--u))}
.cloudfx{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .5s ease}
.world.is-exploring .cloudfx{opacity:.3}
.clouds{pointer-events:none;user-select:none}
.map-frame{position:relative}
.map{
  position:relative;overflow:hidden;touch-action:pan-y;outline:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 calc(40 * var(--u)));
          mask-image:linear-gradient(180deg,transparent 0,#000 calc(40 * var(--u)));
}
.map:focus-visible::after{content:"";position:absolute;z-index:4;inset:calc(48 * var(--u)) 8px calc(var(--ch,60px) * .6) 8px;
  border:3px solid #2f9bff;border-radius:14px;box-shadow:0 0 0 2px #fff;pointer-events:none}
.world.can-pan .map{cursor:grab}
.world.is-dragging .map{cursor:grabbing}
.map__track{position:absolute;left:0;top:0;height:100%;will-change:transform}
.map__img{display:block;max-width:none;pointer-events:none}
.map__strip{position:absolute;left:0;top:0;overflow:hidden}
.map__overview{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.map__tile{position:absolute;top:0;height:100%;max-width:none;opacity:0;transition:opacity .35s;pointer-events:none}
.map__tile.is-in{opacity:1}
.map__overlay{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.map__mark{position:absolute;left:0;top:0;pointer-events:auto}
.world[data-mode="panorama"] .map{height:clamp(340px,40vw,760px)}

/* region hotspots (fallback: invisible boxes over the map's baked labels) */
.hotspot{padding:0;border:0;border-radius:10px;background:transparent;transition:box-shadow .2s,background .2s}
.hotspot:hover,.hotspot:focus-visible{background:rgba(255,255,255,.08);
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 18px 4px rgba(90,190,255,.8);outline:none}
.hotspot.pin{translate:-50% -50%}

/* mode-dependent wording: [data-when] shows only in its mode */
.world:not([data-mode="panorama"]) [data-when="panorama"],
.world:not([data-mode="fallback"]) [data-when="fallback"]{display:none}

/* pan buttons: shown whenever the view can move */
.map__pan{
  display:none;place-items:center;position:absolute;z-index:5;top:55%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;border-radius:50%;
  background:rgba(4,14,40,.66);border:1.5px solid rgba(255,255,255,.8);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:opacity .25s;
}
.world.can-pan .map__pan{display:grid}
.map__pan svg{width:55%;height:55%}
.map__pan--prev{left:10px}.map__pan--next{right:10px}
.map__pan.is-off{opacity:0;pointer-events:none}
.map__pan:hover{background:rgba(10,40,110,.85)}
.map__pan:focus-visible{outline:3px solid #9fd8ff;outline-offset:2px}

/* section title + controls */
.map-nav{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 16px 4px}
.map-title{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 16px 7px 10px;border-radius:99px;
  font-size:clamp(13px,1.15vw,16px);font-weight:800;font-style:italic;letter-spacing:.04em;text-transform:uppercase;color:#0b2a6b;
  background:rgba(255,255,255,.86);box-shadow:0 6px 18px rgba(20,60,140,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.map-title svg{width:1.5em;height:1.5em;flex:none;color:#1f7ae0}
.map-title__badge{margin-left:4px;padding:2px 8px;border-radius:99px;font-size:.72em;font-style:normal;letter-spacing:.08em;color:#fff;background:#1f7ae0}
.map-nav__row{display:flex;align-items:center;gap:10px}
.map__mode,.map__hint,.minimap{display:none}
.map__mode{align-items:center;gap:7px;min-height:44px;padding:0 18px;border-radius:99px;
  font-size:14px;font-weight:700;letter-spacing:.03em;color:#fff;
  background:linear-gradient(180deg,#1257c9,#0b3a8f);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(10,40,110,.3)}
.map__mode svg{width:18px;height:18px}
.map__mode--overview{background:#fff;color:#0b2a6b;border-color:rgba(11,42,107,.3)}
.map__mode:focus-visible{outline:3px solid #9fd8ff;outline-offset:2px}
.map__hint{align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:#2a4f86;letter-spacing:.02em}
.map__hint span{font-size:18px;line-height:1;color:#2f9bff}
.map__hint b{font-weight:600}
.world.can-pan .map__hint{display:flex}
.minimap{position:relative;width:min(420px,78%);border-radius:10px;overflow:hidden;cursor:pointer;touch-action:none;
  border:2px solid #fff;box-shadow:0 4px 14px rgba(10,40,100,.25)}
.minimap img{width:100%;height:auto;pointer-events:none}
.minimap__view{position:absolute;top:0;bottom:0;left:0;width:30%;border:2px solid #fff;border-radius:6px;
  box-shadow:0 0 0 999px rgba(4,20,60,.38),0 0 10px rgba(80,180,255,.9)}
.minimap__view + .minimap__view{box-shadow:0 0 10px rgba(80,180,255,.9)}
.minimap:focus-visible{outline:3px solid #2f9bff;outline-offset:2px}
.world.can-pan .minimap,.world[data-mode="panorama"] .minimap{display:block}

/* landscape: the title sits on the lower cloud bank, above the overlapping feature row */
@media (min-aspect-ratio:1/1){
  .map-nav{position:absolute;left:auto;right:clamp(16px,3vw,48px);bottom:calc(clamp(26px,3.4vw,58px) + 10px);align-items:flex-end;padding:0;pointer-events:none}
  .map-nav > *{pointer-events:auto}
  .world:not(.can-pan) .map-nav__row{display:none}
  .minimap{display:none!important}
}
@media (orientation:landscape) and (max-height:520px){
  .map-nav{bottom:calc(clamp(26px,3.4vw,58px) + 6px)}
  .map-title{font-size:12px;padding:5px 12px 5px 8px}
}

/* portrait: zoom in / whole map (fallback), title and controls below the map */
@media (max-aspect-ratio:1/1){
  .world[data-mode="fallback"] .map__mode{display:inline-flex}
  .world:not(.is-zoomed) .map__mode--overview,.world.is-zoomed .map__mode--expand{display:none}
  .world[data-mode="fallback"]:not(.is-zoomed) .map{cursor:zoom-in}
  .world[data-mode="fallback"]:not(.is-zoomed) .hotspot{pointer-events:none}
  .world.can-pan .map__hint{display:none}
  .world[data-mode="panorama"] .map{height:min(62svh,520px)}
  /* the fade never runs past the hero overlap, so no hard hero edge shows through */
  .world{margin-top:calc(-44 * var(--p))}
  .map{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 calc(44 * var(--p)));
               mask-image:linear-gradient(180deg,transparent 0,#000 calc(44 * var(--p)))}
  .map__pan{top:auto;bottom:calc(var(--ch) * .55);transform:none;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.cloudfx,.map__tile{transition:none}}

/* artwork deterrence (not DRM): no drag-out, no long-press save sheet on published art */
.gbm img,.cutout img,.hero img,.mate img,.foe img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* footer */
.site-foot__note{margin:0 0 4px;max-width:46ch;font-size:11.5px;line-height:1.5;color:#7f9cc8}
.site-foot__build{display:none}

/* ===================== Hero responsive corrections ===================== */
/* safe areas (viewport-fit=cover): keep logo, copy and controls clear of notches */
.topbar{padding-top:env(safe-area-inset-top)}
.hero__copy{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px)}
/* phone landscape: the logo needs breathing room above it */
@media (orientation:landscape) and (max-height:520px){
  .brand{top:max(10px,env(safe-area-inset-top));left:max(calc(60 * var(--u)),env(safe-area-inset-left));min-width:88px}
  .menu-btn{top:max(10px,env(safe-area-inset-top))}
}
/* portrait: carousel arrows never cross the characters' feet.
   Tablets keep them at the outer ends of the dot row; phones use dots + swipe only. */
@media (max-aspect-ratio:1/1){
  .hero__arrow--prev{left:max(12px,env(safe-area-inset-left))}
  .hero__arrow--next{left:auto;right:max(12px,env(safe-area-inset-right))}
}
@media (max-aspect-ratio:1/1) and (max-width:599px){
  .hero__arrow{display:none}
  .hero__dots{gap:6px}
  .hero__dots button{width:32px;height:32px}
}

/* ===================== Enemies & Hazards: aligned cards ===================== */
/* every card in a row ends on the same line, whatever the name length */
.foes > li{display:flex}
.foe:not(.foe--evo){display:flex;flex-direction:column;align-content:normal}
.foe:not(.foe--evo) .foe__text{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
/* evolved forms read heavier through height and mass, not by spilling into neighbouring cards */
.foe--big .foe__stage > .gbm.cutout{width:min(106cqw,calc(var(--s) * 86cqh * var(--ar)))}

/* ===================== Visual correction pass (2026-10-05) ===================== */

/* --- portrait hero: a contained top-left content cluster over the key art --- */
@media (max-aspect-ratio:1/1){
  /* the Adventure Mountain™ sign already carries the GB logo: no second logo at the top */
  .brand{display:none}
  .hero__shade{background:linear-gradient(180deg,rgba(3,14,48,.35) 0,rgba(3,14,48,0) 14%)}
  .hero__copy::before{content:"";position:absolute;left:0;top:0;width:100%;height:calc(380 * var(--p));pointer-events:none;
    background:radial-gradient(ellipse 100% 100% at 0 0,rgba(3,14,48,.82) 0,rgba(4,20,64,.55) 48%,rgba(6,28,80,0) 78%)}
  .headline{top:calc(58 * var(--p));font-size:calc(40 * var(--p));-webkit-text-stroke:calc(4 * var(--p)) #0b2f96}
  .tagline{top:calc(186 * var(--p));font-size:calc(13.5 * var(--p))}
  .steam--hero{top:calc(212 * var(--p));width:calc(222 * var(--p));height:calc(44 * var(--p));font-size:calc(14 * var(--p))}
  .pillars{left:calc(10 * var(--p));top:calc(270 * var(--p));transform:none}
  .pillars li{width:calc(98 * var(--p))}
  .pillar__ring{width:calc(44 * var(--p));height:calc(44 * var(--p))}
  .pillar__label{margin-top:calc(5 * var(--p));font-size:calc(9.5 * var(--p));white-space:nowrap}
  .pillar__label br{display:block}
  .pillar__note{font-size:calc(7 * var(--p))}
  .hero__sign{left:calc(50% + 24 * var(--p));top:calc(508 * var(--p));width:calc(160 * var(--p))}
  .hero__dots{top:calc(640 * var(--p))}
  .hero__arrow{top:calc(640 * var(--p))}
}

/* --- clouds: bright, solid puffs (no grey semi-transparent haze) --- */
.clouds--top3{opacity:1}
.clouds{filter:brightness(1.05) saturate(.92)}

/* --- region colour coding (canonical banner fields, world-data.js) --- */
.area-card{position:relative}
.area-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--rc,#1f7ae0);z-index:2}
.region-id--crystal{background:linear-gradient(170deg,#a46ae6 0,#7a3cc8 48%,#3e1675 100%)}
.region-id--crystal::after{background:linear-gradient(180deg,#5a2596,#2d0f57)}

/* --- enemies: in-game views (cards + dossier opening view); cutouts only as selected views --- */
.scene-fit{position:absolute;top:50%;left:var(--fx,50%);width:max(100cqw,calc(100cqh * var(--ar)));translate:calc(-1 * var(--fx,50%)) -50%}
.foe__stage--scene{aspect-ratio:1/.86;overflow:hidden;border-radius:16px 16px 0 0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.foe__stage--scene::before,.foe__stage--scene::after{display:none}
.foe__stage--scene .scene-fit{transition:transform .35s}
.foe:hover .foe__stage--scene .scene-fit{transform:scale(1.05)}
.dossier__stage.is-scene{background:#0b2a6b}
.dossier__stage.is-scene::after{display:none}
.dossier__stage.is-scene{aspect-ratio:auto;max-width:620px}
.dossier__stage.is-scene .scene-fit{position:relative;top:0;left:0;width:100%;translate:none}
.dossier__stage .gbm.cutout{filter:drop-shadow(0 10px 16px rgba(0,8,30,.45))}
.dossier__stage > .stage-box{inset:12% 10% 12%}
.dossier__pick .stage-box{background:radial-gradient(circle at 50% 38%,#3d6fc4 0,#163f8a 55%,#0b2556 100%);overflow:hidden}


/* ===================== Meet the Team™ (approved target: wide team cards, figures break out above) ===================== */
.team{background:
    linear-gradient(180deg,rgba(233,241,252,.55),rgba(233,241,252,.25) 40%,rgba(10,40,110,.35)),
    url(assets/areas/portal-meadow/pm02-open-meadow-routes-960.webp?v=66fd5e58a6) center 40%/cover}
.team::after{display:none}
.team__head h2{color:#0b2a6b;text-shadow:0 2px 0 #fff}
.team__head p{color:#24418e}
.team .sec-head__icon{background:#0b2a6b;color:#fff}
.team__list{list-style:none;margin:0;padding:clamp(56px,6vw,90px) 0 10px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.team__list > li{display:flex;filter:none}
.mate{position:relative;display:block;width:100%;aspect-ratio:1.45/1;border-radius:20px;overflow:visible;text-decoration:none;color:#fff;
  background:
    linear-gradient(115deg,rgba(255,255,255,.35) 0,rgba(255,255,255,0) 38%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 12px,rgba(255,255,255,0) 12px 34px),
    linear-gradient(150deg,color-mix(in srgb,var(--c) 55%,#fff) 0,var(--c) 45%,var(--cd) 100%);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.95),0 16px 30px rgba(6,24,70,.35);transition:transform .25s,box-shadow .25s}
.mate:hover{transform:translateY(-4px);box-shadow:0 0 0 3px #fff,0 22px 36px rgba(6,24,70,.45)}
.mate:focus-visible{outline:3px solid #0b2a6b;outline-offset:4px}
/* figure: upper body, larger than the card; rises above the top edge, cropped at the bottom edge */
.mate__fig{position:absolute;left:-2%;bottom:0;width:56%;height:142%;clip-path:inset(-20% -30% 0 -30% round 0 0 0 20px);pointer-events:none}
.mate__fig > .stage-box{position:absolute;inset:0}
.mate__fig .gbm.cutout{left:50%;bottom:auto;top:0;translate:-50% 0;width:min(120cqw,calc(170cqh * var(--ar)));filter:drop-shadow(0 8px 12px rgba(0,10,40,.35))}
.mate:hover .mate__fig .cutout > img{transform:scale(1.03)}
.mate__text{position:absolute;right:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 14px 10px 4px;text-align:left;background:none;border:0}
.mate__colour{font-size:clamp(20px,2.1vw,30px);font-weight:900;font-style:italic;text-transform:uppercase;line-height:1;letter-spacing:.01em;
  -webkit-text-stroke:3px var(--cd);paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.mate__text strong{font-size:clamp(9.5px,.78vw,11.5px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.mate__text small{font-size:clamp(11px,.9vw,13px);line-height:1.3;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.mate__go{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:6px;padding:7px 12px;border-radius:99px;
  font-size:clamp(10px,.8vw,11.5px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--cd);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 4px 10px rgba(0,0,0,.25)}
.mate__go svg{width:14px;height:14px}
@media (max-width:1099px){.team__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(60px,8vw,90px)}}
@media (max-width:719px){
  .team__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding:64px 16px 14px;margin:0 -16px;scroll-padding:0 16px}
  .team__list::-webkit-scrollbar{display:none}
  .team__list > li{scroll-snap-align:start}
  .mate__colour{font-size:28px}
  .mate__text strong{font-size:11px}.mate__text small{font-size:13px}.mate__go{font-size:11px}
}
@media (orientation:landscape) and (max-height:520px){.team__list{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;overflow:visible;margin:0;padding:56px 0 10px}}
.mate__text strong{font-style:normal}
.mate__text small{display:block;letter-spacing:0;text-transform:none;font-weight:600}
.mate__fig{clip-path:inset(-60% -30% 0 -30% round 0 0 0 20px)}
.mate__go{white-space:nowrap;padding:7px 11px}
.team .team__head{position:relative;z-index:1;align-self:start;justify-self:start;padding:8px 18px 8px 8px;border-radius:99px;
  background:rgba(255,255,255,.86);box-shadow:0 8px 22px rgba(6,24,70,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.team .team__head h2{color:#0b2a6b;text-shadow:none;-webkit-text-stroke:0}
.team .team__head p{color:#24418e;text-shadow:none}
.team__inner{display:grid}
@media (max-width:719px){
  .team .team__head{border-radius:18px;padding-right:12px}
  .team .team__head h2{font-size:clamp(20px,6vw,26px);white-space:nowrap}
  .team__list{padding-top:120px}
  .mate__fig{width:54%;height:150%}
}

/* ===================== Portrait hero (approved target): compact top-left cluster, big centred art ===================== */
@media (max-aspect-ratio:1/1){
  .hero{height:calc(740 * var(--p))}
  /* the one logo heads the cluster (no second logo anywhere in the hero) */
  .brand{display:block;left:max(14px,env(safe-area-inset-left));top:calc(10 * var(--p));width:calc(134 * var(--p));min-width:0}
  .hero__copy::before{width:72%;height:calc(310 * var(--p));
    background:radial-gradient(ellipse 100% 100% at 0 0,rgba(3,14,48,.78) 0,rgba(4,20,64,.5) 55%,rgba(6,28,80,0) 80%)}
  .headline{left:16px;top:calc(76 * var(--p));font-size:calc(27 * var(--p));-webkit-text-stroke:calc(3 * var(--p)) #0b2f96;
    text-shadow:0 0 calc(12 * var(--p)) rgba(56,156,255,.9),0 calc(3 * var(--p)) 0 #08236e}
  .tagline{left:18px;top:calc(166 * var(--p));font-size:calc(10.5 * var(--p))}
  .steam--hero{left:18px;top:calc(186 * var(--p));width:calc(178 * var(--p));height:calc(36 * var(--p));font-size:calc(11.5 * var(--p));border-radius:calc(10 * var(--p))}
  .pillars{left:calc(8 * var(--p));top:calc(232 * var(--p));transform:none}
  .pillars li{width:calc(74 * var(--p))}
  .pillar__ring{width:calc(36 * var(--p));height:calc(36 * var(--p));border-width:calc(1.8 * var(--p))}
  .pillar__label{margin-top:calc(4 * var(--p));font-size:calc(7.6 * var(--p));white-space:nowrap}
  .pillar__note{margin-top:calc(2 * var(--p));font-size:calc(6 * var(--p));padding:0 calc(5 * var(--p))}
  /* characters: large, centred under the cluster */
  .hero__sign{left:auto;right:calc(6 * var(--p));top:calc(566 * var(--p));width:calc(168 * var(--p))}
  .hero__dots{top:calc(700 * var(--p))}
  .hero__arrow{top:calc(700 * var(--p))}
  /* scene slides fill the whole hero (no thin band) */
  .slide--scene::before{display:none}
  .slide--scene .scene-box{inset:0;height:auto;-webkit-mask-image:none;mask-image:none}
  .slide--scene .scene-box > .gbm{top:50%;translate:calc(-1 * var(--sx,50%)) -50%}
}
@media (max-aspect-ratio:1/1){.slide--scene .scene-box > .gbm{left:var(--psx,var(--sx,50%));translate:calc(-1 * var(--psx,var(--sx,50%))) -50%}}

/* ===================== README completion pass (2026-10-05) ===================== */
/* enemy + object cards: the name is the card */
.foe .foe__text{display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 8px 10px;text-align:center}
.foe .foe__text strong{font-size:clamp(13px,1.05vw,16px);font-weight:900;font-style:italic;letter-spacing:.02em;line-height:1.1;text-transform:uppercase;color:#0b2a6b}
/* world objects: cutouts on the light plinth, six across */
.panel--objects{margin-top:clamp(14px,1.6vw,22px)}
.objs{grid-template-columns:repeat(6,minmax(0,1fr))}
.obj .foe__stage{aspect-ratio:1/1}
.obj .foe__stage > .gbm.cutout{bottom:12%;width:min(calc(var(--s) * 100cqw),calc(var(--s) * 100cqh * var(--ar)))}
.panel__fine{margin:4px 0 0;font-size:11px;color:#5a7299;text-align:right}
@media (max-width:1099px){.objs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:719px){.objs{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* fast travel: regional portal switcher */
.ft__caption strong{font-size:14px}
.ft__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.ft__dots button{width:26px;height:26px;padding:0;border-radius:50%;border:2.5px solid #fff;background:var(--rc);box-shadow:0 2px 6px rgba(10,40,110,.3)}
.ft__dots button[aria-pressed="true"]{box-shadow:0 0 0 2.5px #0b2a6b,0 2px 6px rgba(10,40,110,.3);transform:scale(1.12)}
.ft__dots button:focus-visible{outline:3px solid #2f9bff;outline-offset:2px}
.dossier__states{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
/* front map pins */
.hotspot.pin .pin__icon{background:var(--rc,rgba(255,255,255,.18))}
/* phone portrait: compact feature strip, nothing truncated */
@media (max-width:599px) and (max-aspect-ratio:1/1){
  .feats{grid-template-columns:repeat(5,74%);gap:8px}
  .feat{display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center;padding:9px 12px;text-align:left}
  .feat__icon{grid-row:1 / span 3;width:38px;height:38px;margin:0}
  .feat__icon svg{width:58%;height:58%}
  .feat h3{font-size:12.5px;margin:0;white-space:normal;overflow:visible}
  .feat p{font-size:11.5px;line-height:1.3;margin:1px 0 0;overflow:visible;display:block}
  .feat .feat__note{justify-self:start;margin-top:3px}
}
.hotspot.pin{padding:4px 12px 4px 4px;background:rgba(6,24,70,.62)}
.hotspot.pin .pin__icon{width:28px;height:28px}
.hotspot.pin .pin__text strong{font-size:13px;opacity:1}
@media (max-width:599px){.hotspot.pin{padding:2px 8px 2px 2px}.hotspot.pin .pin__icon{width:20px;height:20px}.hotspot.pin .pin__text strong{font-size:10px}}

/* ===================== Drive sync pass (2026-10-05b) ===================== */
/* one name system for Enemies & Hazards and Adventure Finds™: heavy italic, white with navy stroke on a team-blue plate */
.foe .foe__text{min-height:54px;padding:10px 8px 12px;border-top:0;
  background:linear-gradient(180deg,#1d5fd6 0,#0b2a6b 100%);box-shadow:0 8px 18px rgba(20,60,140,.22),inset 0 2px 0 rgba(255,255,255,.25)}
.foe .foe__text strong{font-size:clamp(15px,1.3vw,19px);font-weight:900;font-style:italic;letter-spacing:.01em;line-height:1.05;
  color:#fff;-webkit-text-stroke:4px #071c4f;paint-order:stroke fill;text-shadow:0 3px 0 #071c4f,0 0 12px rgba(80,170,255,.55)}
.foe:hover .foe__text{background:linear-gradient(180deg,#2b78ff 0,#0d3592 100%)}
.foe:hover .foe__text strong{color:#fff}
@media (max-width:719px){.foe .foe__text strong{font-size:16px;-webkit-text-stroke-width:3.5px}}

/* phone portrait strip under the map: narrow cards, next card visibly peeks */
@media (max-width:599px) and (max-aspect-ratio:1/1){
  .feats{grid-template-columns:repeat(5,42%);gap:10px;padding:2px 16px 8px;margin-left:-16px;margin-right:-16px;scroll-padding:0 16px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 85%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(90deg,#000 0,#000 85%,rgba(0,0,0,.35) 100%)}
  .feats > li{scroll-snap-align:start}
  .feat{display:block;padding:10px 10px 12px;text-align:left}
  .feat__icon{width:32px;height:32px;margin:0 0 6px}
  .feat h3{font-size:12px;line-height:1.15}
  .feat p{font-size:11px;line-height:1.3;margin-top:3px}
}
.ft__frame.gbm{flex:none;aspect-ratio:var(--ar)}
.ft__frame.gbm > img{object-position:60% 50%}
.ft{flex:none}
.objs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:719px){.objs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.panel__intro{margin:-2px 0 4px;font-size:13.5px;line-height:1.45;color:#2c4a7c}
.panel__intro b{color:#0b2a6b}
.objs{grid-template-columns:repeat(4,minmax(0,1fr))}
.obj .foe__stage--scene{aspect-ratio:1/1}
.objs .obj .foe__stage,.objs .obj .foe__stage--scene{aspect-ratio:1.3/1}
.objs .obj .foe__stage--scene{overflow:hidden;border-radius:16px 16px 0 0}
@media (max-width:719px){.objs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.objs .obj .foe__stage::before{top:0;border-radius:16px 16px 0 0}

/* ---------- Gear & Tech (Phase 5): approved PATCHPAD™ + SMARTWATCH presentations ---------- */
.panel--gear{margin-top:clamp(14px,1.6vw,22px)}
.panel__intro a{color:#0b4fc4;font-weight:700}
.gear{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px);align-items:start}
.gear__card{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.gear__view{position:relative;display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#071634;cursor:zoom-in;box-shadow:0 8px 22px rgba(10,40,110,.25)}
.gear__view:focus-visible,.dossier__full:focus-visible{outline:3px solid #ffc21a;outline-offset:3px}
.gear__img{display:block;width:100%;aspect-ratio:var(--ar)}
.gear__img img{width:100%;height:auto;display:block}
.gear__zoom{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(5,18,48,.78);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;pointer-events:none}
.gear__zoom svg{width:16px;height:16px}
.gear__card figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.gear__card figcaption strong{font-size:15px;font-weight:800;font-style:italic;color:#0b2a6b;letter-spacing:.02em}
.gear__card figcaption>span{font-size:12.5px;font-weight:600;color:#3c5c8f}
.gear__seg{margin-left:auto;display:inline-flex;border:1.5px solid #9fb6dc;border-radius:999px;overflow:hidden;background:#fff}
.gear__seg button{border:0;background:none;padding:6px 12px;min-height:32px;font:inherit;font-size:12px;font-weight:700;color:#2c4a7c;cursor:pointer}
.gear__seg button[aria-pressed="true"]{background:#0b4fc4;color:#fff}
.gear__soon{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px 16px;border:2px dashed #9fb6dc;border-radius:14px;background:rgba(255,255,255,.55)}
.gear__soon-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e6eefb;color:#5a7299}
.gear__soon-icon svg{width:24px;height:24px}
.gear__soon p{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.gear__soon strong{font-size:15px;font-weight:800;font-style:italic;color:#0b2a6b}
.gear__soon span{font-size:13px;color:#3c5c8f}
.dossier__full{position:relative;display:block;border-radius:12px;overflow:hidden;cursor:zoom-in}
@media (max-width:719px){
  .gear{grid-template-columns:1fr}
  .gear__seg{margin-left:0}
}
.dossier__flip{margin:-2px 0 10px}
/* Phase 5: Claw Bot™ joins the bestiary. Studio cutout cards match the in-game scene cards' height;
   the evolution card becomes a full-width banner so the grid stays balanced (8 enemies + banner) */
#foes .foe__stage:not(.foe__stage--scene){aspect-ratio:1/.86}
#foes .foe__stage:not(.foe__stage--scene)::before{top:0;border-radius:16px 16px 0 0}
#foes > li.foes__evo{grid-column:1/-1 !important}
#foes .foe--evo{grid-template-columns:auto 1fr auto;align-items:center;gap:6px 18px;padding:12px 18px}
#foes .foe--evo .foe-evo__line{font-size:clamp(13px,1.1vw,16px)}
#foes .foe--evo .foe-evo__go{margin-top:0;white-space:nowrap}
@media (max-width:719px){
  #foes .foe--evo{grid-template-columns:1fr auto;gap:6px 12px}
  #foes .foe--evo .foe-evo__kicker{grid-column:1/-1}
}


/* Brightback V1 • fourth stage: approved scenic hero sits in a dedicated apex row,
   distinct from the studio-cutout enemy lineup. Existing bot cards remain unchanged. */
#foes > li.foes__apex{grid-column:1/-1;min-width:0}
#foes .foe--apex{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch;width:100%;overflow:hidden;background:#0b2a6b;border-radius:16px;box-shadow:0 10px 24px rgba(6,24,70,.18)}
#foes .foe--apex .foe__stage{aspect-ratio:16/9;min-height:0;overflow:hidden;border-radius:16px 0 0 16px;background:#9ab9e2}
#foes .foe--apex .foe__stage::before,#foes .foe--apex .foe__stage::after{display:none}
#foes .foe--apex .foe__stage > .gbm.foe__img{inset:0;width:100%;height:100%;aspect-ratio:auto}
#foes .foe--apex .foe__stage > .gbm.foe__img > img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
#foes .foe--apex .foe__text{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-height:0;border-radius:0 16px 16px 0;padding:20px}
#foes .foe--apex .foe__text strong{font-size:clamp(21px,3.5vw,35px)}
#foes .foe--apex .foe__text small{color:#d8edff;font-size:clamp(11px,1.3vw,15px);letter-spacing:.07em;text-transform:uppercase;font-weight:750}
@media(max-width:719px){
 #foes .foe--apex{display:block}
 #foes .foe--apex .foe__stage{aspect-ratio:16/9;border-radius:16px 16px 0 0}
 #foes .foe--apex .foe__text{border-radius:0 0 16px 16px;padding:16px 12px}
}
/* Four-phase evolution row and Brightback's source-verified scenic thumbnail. */
.evo__seq{grid-template-columns:repeat(8,minmax(0,1fr))}
.evo__step .stage-box > .gbm.evo__thumb-scene{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:12px;aspect-ratio:auto}
.evo__step .stage-box > .gbm.evo__thumb-scene > img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:719px){.evo__seq{grid-template-columns:none}}
@media(min-width:720px) and (max-width:899px){.evo__seq{grid-template-columns:repeat(4,minmax(0,1fr))}}