/* ============================================================
   SHADOW STEP — Section layouts
   ============================================================ */

/* ════ SECTION 0 — VOID ════════════════════════════ */
#void{ height:100vh; min-height:680px; overflow:hidden; background:var(--black-true) }
#void .stagewrap{ position:absolute; inset:0; perspective:1400px; }
#void .scatter{
  position:absolute; inset:0; transform-style:preserve-3d;
  will-change:transform; pointer-events:none;
}
#void .scatter .scard{
  position:absolute; top:50%; left:50%; transform-style:preserve-3d; pointer-events:auto;
  will-change:transform,filter,opacity;
}
/* hero card holder, dead center */
#void .hero-holder{
  position:absolute; top:50%; left:50%;
  z-index:20; will-change:transform; pointer-events:auto;
}
#void .hero-copy{
  position:absolute; left:50%; bottom:16%; transform:translateX(-50%);
  text-align:center; z-index:40; width:min(760px,86vw);
}
#void .hero-copy .status{
  font-family:var(--font-data); font-size:clamp(13px,1.6vw,17px);
  letter-spacing:.26em; color:var(--chalk-primary); text-transform:uppercase;
}
#void .hero-copy .status em{color:var(--red-flare); font-style:normal}
#void .hero-copy .sub{
  font-family:var(--font-data); font-size:13px; letter-spacing:.16em;
  color:var(--chalk-muted); margin-top:14px; text-transform:lowercase;
}
#void .hero-copy .cta{ margin-top:30px }
/* big ghost wordmark behind it all */
#void .void-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:400;
  font-size:min(30vw,420px); line-height:.8; letter-spacing:.02em;
  color:#fff; opacity:.025; white-space:nowrap; z-index:1; pointer-events:none;
  will-change:transform;
}
#void .scan-sweep{
  position:absolute; top:0; bottom:0; width:2px; left:0;
  background:linear-gradient(to bottom,transparent,var(--red-flare),transparent);
  box-shadow:0 0 18px 2px var(--red-glow); opacity:0; z-index:15; pointer-events:none;
}

/* ════ SECTION 1 — WELCOME / FIRST BOOT ════════════ */
#welcome{ padding:170px 0 150px; background:var(--black-warm); position:relative }
#welcome .boot-dialog{
  max-width:560px; margin:0 auto; position:relative;
  background:linear-gradient(180deg,var(--black-surface),var(--black-2));
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), inset 0 0 0 .5px var(--border-subtle);
  overflow:hidden;
}
#welcome .bd-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid var(--border-subtle);
  font-family:var(--font-data); font-size:10px; letter-spacing:.22em; color:var(--chalk-muted);
  text-transform:uppercase;
}
#welcome .bd-bar .dots{display:flex; gap:6px}
#welcome .bd-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--black-5);display:block}
#welcome .bd-bar .dots i:last-child{background:var(--red-deep)}
#welcome .bd-body{ padding:42px 40px 36px }
#welcome .bd-q{
  font-family:var(--font-display); font-size:clamp(30px,4vw,46px); line-height:1.02;
  letter-spacing:.01em; margin-bottom:26px;
}
#welcome .bd-q em{color:var(--red-flare); font-style:normal}
#welcome .bd-field{
  display:flex; align-items:center; gap:0; border:1px solid var(--border-default);
  border-radius:var(--radius-md); background:var(--black-true); overflow:hidden;
  transition:border-color var(--dur-snap);
}
#welcome .bd-field:focus-within{border-color:var(--red-hot)}
#welcome .bd-field .pre{ padding:0 4px 0 16px; color:var(--red-flare); font-family:var(--font-data); font-size:15px }
#welcome .bd-field input{
  flex:1; appearance:none; background:transparent; border:0; outline:0;
  color:var(--chalk-primary); font-family:var(--font-data); font-size:15px;
  letter-spacing:.06em; padding:15px 12px;
}
#welcome .bd-field input::placeholder{color:var(--chalk-muted)}
#welcome .bd-confirm{
  display:flex; gap:10px; margin-top:22px;
}
#welcome .bd-confirm .opt{
  flex:1; text-align:center; font-family:var(--font-ui); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; padding:13px; border:1px solid var(--border-default);
  border-radius:var(--radius-md); cursor:pointer; color:var(--chalk-mid);
  transition:all var(--dur-snap); user-select:none;
}
#welcome .bd-confirm .opt.yes{border-color:var(--border-red); color:var(--chalk-primary)}
#welcome .bd-confirm .opt.yes:hover{background:var(--red-hot); border-color:var(--red-hot); color:#fff}
#welcome .bd-confirm .opt.no:hover{border-color:var(--border-strong); color:var(--chalk-primary)}
#welcome .bd-hint{
  margin-top:18px; font-family:var(--font-data); font-size:10px; letter-spacing:.2em;
  color:var(--chalk-dim); text-transform:uppercase; text-align:center;
}
/* player details preview tease */
#welcome .preview{
  max-width:560px; margin:22px auto 0; opacity:0;
  border:1px dashed var(--border-default); border-radius:var(--radius-lg);
  padding:22px 24px; background:rgba(14,14,18,.5);
}
#welcome .preview .pv-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
#welcome .preview .pv-badge{
  font-family:var(--font-ui); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding:6px 11px; border:1px solid var(--border-red); border-radius:3px; color:var(--chalk-mid);
}
#welcome .preview .pv-id{ font-family:var(--font-data); font-size:11px; letter-spacing:.2em; color:var(--chalk-muted) }
#welcome .pv-bar{ margin-bottom:13px }
#welcome .pv-bar .lab{
  display:flex; justify-content:space-between; font-family:var(--font-data);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--chalk-muted); margin-bottom:5px;
}
#welcome .pv-bar .track{ height:5px; border-radius:3px; background:var(--black-true); overflow:hidden }
#welcome .pv-bar .fill{ height:100%; background:linear-gradient(90deg,var(--red-deep),var(--red-flare)); width:0 }

/* ════ SECTION 2 — THE MAP ═════════════════════════ */
#map{ height:100vh; min-height:640px; overflow:hidden; background:#050507; position:relative }
#map .mapworld{ position:absolute; inset:0; will-change:transform }
#map svg.grid{ position:absolute; inset:0; width:100%; height:100%; opacity:.5 }
#map .node{ position:absolute; transform:translate(-50%,-50%); will-change:transform,opacity }
#map .node .ring{
  width:14px; height:14px; border-radius:50%; background:var(--red-flare);
  box-shadow:0 0 0 0 rgba(224,34,34,.7); animation:livePulse 1.4s ease-in-out infinite;
}
#map .node.dim .ring{ background:var(--chalk-muted); box-shadow:none; animation:none; opacity:.5; width:8px; height:8px }
#map .node.gold .ring{ background:var(--gold-bright); box-shadow:0 0 12px var(--gold-bright); animation:none }
/* entity card popping in the map sequence */
#map .entity{
  position:absolute; left:50%; top:calc(50% + 168px); transform:translate(-50%,-50%);
  width:330px; opacity:0; z-index:25; will-change:transform,opacity;
}
#map .entity .ecard{
  background:linear-gradient(180deg,var(--black-surface),var(--black-2));
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  padding:18px 20px; box-shadow:0 30px 80px -24px #000;
}
#map .entity .ecard .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
#map .entity .ecard .name{ font-family:var(--font-display); font-size:26px; letter-spacing:.02em }
#map .entity .ecard .badge{
  font-family:var(--font-ui); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding:5px 10px; border-radius:3px; display:inline-flex; align-items:center; gap:7px;
}
#map .badge.live{ background:var(--red-shadow); color:var(--red-flare); border:1px solid var(--border-red) }
#map .badge.train{ background:rgba(255,255,255,.04); color:var(--chalk-mid); border:1px solid var(--border-default) }
#map .badge.rec{ background:rgba(20,184,166,.08); color:#5fd6c4; border:1px solid rgba(20,184,166,.3) }
#map .badge.bounty{ background:var(--red-deep); color:#fff; border:1px solid var(--red-hot); box-shadow:0 0 18px var(--red-glow) }
#map .entity .ecard .meta{ display:flex; gap:22px; font-family:var(--font-data); font-size:12px; letter-spacing:.14em; color:var(--chalk-mid) }
#map .entity .ecard .meta b{ color:var(--chalk-primary); font-weight:400 }
#map .entity .ecard .meta .v{ display:block; font-size:24px; color:#fff; margin-top:3px; font-family:var(--font-data) }
#map .map-cap{
  position:absolute; left:0; right:0; bottom:7.5%; text-align:center; z-index:30;
  font-family:var(--font-display); font-size:clamp(26px,4vw,52px); letter-spacing:.02em;
  color:#fff; opacity:0; will-change:transform,opacity; padding:0 24px;
}
#map .map-cap.small{ font-family:var(--font-data); font-size:clamp(12px,1.5vw,15px); letter-spacing:.28em; text-transform:uppercase; bottom:11% }
#map .map-logo{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:35; opacity:0; will-change:opacity,transform;
}
#map .map-logo .ml{ font-family:var(--font-display); font-size:clamp(48px,10vw,140px); letter-spacing:.06em; color:#fff }
#map .map-logo .ml b{ color:var(--red-flare); font-weight:400 }
#map .map-scan{
  position:absolute; top:0; bottom:0; width:2px; left:-10px;
  background:linear-gradient(to bottom,transparent,var(--red-flare),transparent);
  box-shadow:0 0 18px 3px var(--red-glow); z-index:12; opacity:.7;
}
#map .map-progress{
  position:absolute; top:0; left:0; height:2px; background:var(--red-hot); width:0%; z-index:40;
  box-shadow:0 0 10px var(--red-glow);
}

/* ── Real Mapbox overworld + tactical chrome ─────── */
#map #mapGL{ position:absolute; inset:0; background:#050507 }
#map #mapGL canvas{ outline:none }
#map .map-vignette{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(5,5,7,.78) 100%),
    linear-gradient(180deg, rgba(5,5,7,.55) 0%, transparent 22%, transparent 74%, rgba(5,5,7,.6) 100%);
}
/* POI markers placed by mapbox */
#map .ss-marker{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--chalk-primary);
  display:flex; align-items:center; justify-content:center; cursor:default;
  font-family:var(--font-ui); font-weight:600; font-size:10px; color:var(--chalk-primary);
}
#map .ss-marker.live{ background:var(--red-hot); box-shadow:0 0 10px var(--red-glow) }
#map .ss-marker.dormant{ background:var(--black-5); opacity:.85 }
#map .ss-marker.locked{ background:rgba(242,237,228,.12); border-style:dashed; opacity:.6 }
#map .ss-marker.home{
  width:16px; height:16px; background:var(--red-flare); border:2px solid var(--chalk-primary);
  box-shadow:0 0 14px var(--red-flare); animation:livePulse 2.2s ease-in-out infinite;
}
/* lock-on reticle — sits at viewport centre, frames the centred POI */
#map .map-reticle{
  position:absolute; left:50%; top:50%; width:150px; height:150px;
  transform:translate(-50%,-50%) scale(1.35); transform-origin:center;
  z-index:22; opacity:0; pointer-events:none; will-change:transform,opacity;
}
#map .map-reticle .rk{ position:absolute; width:20px; height:20px; border:2px solid var(--red-flare); box-shadow:0 0 8px var(--red-glow) }
#map .map-reticle .rk.tl{ left:0; top:0; border-right:0; border-bottom:0 }
#map .map-reticle .rk.tr{ right:0; top:0; border-left:0; border-bottom:0 }
#map .map-reticle .rk.bl{ left:0; bottom:0; border-right:0; border-top:0 }
#map .map-reticle .rk.br{ right:0; bottom:0; border-left:0; border-top:0 }
#map .map-reticle .rdot{
  position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--red-flare);
  box-shadow:0 0 0 0 rgba(224,34,34,.65); animation:livePulse 1.4s ease-in-out infinite;
}
#map .map-reticle .rline{
  position:absolute; left:50%; top:100%; width:1px; height:74px; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--red-flare),rgba(224,34,34,0));
}

/* ════ SECTION 3 — THE CARD ════════════════════════ */
#card{ height:100vh; min-height:660px; overflow:hidden; background:var(--black-warm); position:relative }
#card .card-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; perspective:1500px }
#card .card-holder{ position:relative; z-index:20; will-change:transform; transform:scale(.82); opacity:0 }
#card .phase-tag{
  position:absolute; top:clamp(64px,9%,130px); left:50%; transform:translateX(-50%);
  font-family:var(--font-data); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--chalk-muted); z-index:30; text-align:center; width:max-content; max-width:90vw; padding:0 16px;
}
#card .phase-tag b{ color:var(--red-flare); font-weight:400 }
#card .annoset{ position:absolute; inset:0; z-index:25; pointer-events:none; opacity:0 }
#card .anno{
  position:absolute; width:230px; opacity:0; will-change:transform,opacity;
}
#card .anno .lab{
  font-family:var(--font-data); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--chalk-primary); line-height:1.5;
}
#card .anno .lab small{ color:var(--chalk-muted); display:block; letter-spacing:.2em; font-size:9px; margin-bottom:4px }
#card .anno.l{ text-align:right }
#card .anno.r{ text-align:left }
#card .anno .dash{
  position:absolute; top:8px; height:0; border-top:1px dashed var(--chalk-muted);
  width:0; will-change:width;
}
#card .anno.l .dash{ right:-86px; }
#card .anno.r .dash{ left:-86px; }
#card .anno .dash::after{
  content:''; position:absolute; top:-3px; width:6px; height:6px;
  border-top:1px solid var(--red-flare); border-right:1px solid var(--red-flare);
}
#card .anno.l .dash::after{ right:-1px; transform:rotate(45deg) }
#card .anno.r .dash::after{ left:-1px; transform:rotate(-135deg) }
#card .card-closer{
  position:absolute; left:50%; bottom:clamp(52px,10%,130px); transform:translateX(-50%);
  font-family:var(--font-display); font-size:clamp(22px,3vw,38px); color:#fff; opacity:0;
  text-align:center; z-index:30; letter-spacing:.01em; width:90vw; max-width:640px;
}
#card .card-closer em{ color:var(--red-flare); font-style:normal }

/* ════ SECTION 4 — THE FEED ════════════════════════ */
#feed{ padding:150px 0 160px; background:var(--black-true); position:relative }
#feed .feed-head{ max-width:1280px; margin:0 auto 64px; padding:0 48px }
#feed .feed-head h2{
  font-family:var(--font-display); font-size:clamp(40px,6vw,80px); line-height:.96; margin-top:16px;
}
#feed .feed-head p{ color:var(--chalk-mid); max-width:440px; margin-top:18px; font-family:var(--font-data); font-size:13px; letter-spacing:.06em; line-height:1.7 }
#feed .stream{ max-width:760px; margin:0 auto; padding:0 48px; display:flex; flex-direction:column; gap:18px }
#feed .item{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--black-surface),var(--black-2));
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:24px 26px; display:flex; gap:22px; align-items:center;
  opacity:0; will-change:transform,opacity;
}
#feed .item .ic{
  width:54px;height:54px;flex:none;border-radius:var(--radius-md);
  display:grid; place-items:center; border:1px solid var(--border-default);
  background:var(--black-true);
}
#feed .item .ic svg{width:26px;height:26px}
#feed .item .body{flex:1}
#feed .item .tagrow{display:flex; align-items:center; gap:10px; margin-bottom:8px}
#feed .item .etype{ font-family:var(--font-ui); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--chalk-muted) }
#feed .item .pill{ font-family:var(--font-ui); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:3px 8px; border-radius:3px; border:1px solid currentColor }
#feed .item h3{ font-family:var(--font-data); font-size:17px; letter-spacing:.02em; color:var(--chalk-primary); font-weight:400; line-height:1.35 }
#feed .item h3 b{ color:#fff; font-weight:400 }
#feed .item .scan{
  position:absolute; top:0; bottom:0; width:2px; left:0;
  background:linear-gradient(to bottom,transparent,var(--red-flare),transparent);
  box-shadow:0 0 12px var(--red-glow); opacity:0;
}

/* ════ SECTION 5 — CAROUSEL ════════════════════════ */
#carousel{ height:100vh; min-height:700px; background:var(--black-warm); position:relative; overflow:hidden; transition:background .8s ease }
#carousel .car-head{ position:absolute; top:9%; left:0; right:0; text-align:center; z-index:30 }
#carousel .car-head h2{ font-family:var(--font-display); font-size:clamp(36px,6vw,76px); line-height:.96; margin-top:14px }
#carousel .track-mask{ position:absolute; inset:0; display:flex; align-items:center; }
#carousel .track{
  display:flex; gap:40px; padding:0 max(48px,calc(50vw - 180px));
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; width:100%;
  scrollbar-width:none; -ms-overflow-style:none; align-items:center;
}
#carousel .track::-webkit-scrollbar{display:none}
#carousel .cslide{
  scroll-snap-align:center; flex:none; display:flex; flex-direction:column; align-items:center;
  will-change:transform; transition:transform .5s var(--ease-snap),opacity .5s;
}
#carousel .cmount{ width:360px; height:520px }
#carousel .cmeta{ text-align:center; margin-top:26px; width:360px }
#carousel .cmeta .nm{ font-family:var(--font-display); font-size:30px; letter-spacing:.03em }
#carousel .cmeta .ds{ font-family:var(--font-data); font-size:12px; letter-spacing:.1em; color:var(--chalk-mid); margin-top:8px; line-height:1.6 }
#carousel .cmeta .claim{
  margin-top:18px; font-family:var(--font-ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--chalk-muted); cursor:pointer; display:inline-flex; gap:9px; align-items:center; transition:color var(--dur-snap);
}
#carousel .cmeta .claim:hover{color:var(--red-flare)}
#carousel .car-nav{ position:absolute; bottom:8%; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:30 }
#carousel .car-nav i{ width:26px; height:3px; background:var(--border-strong); border-radius:2px; transition:background .3s; cursor:pointer; display:block }
#carousel .car-nav i.on{ background:var(--red-flare) }
#carousel .car-hint{ position:absolute; bottom:13%; left:0; right:0; text-align:center; z-index:30; font-family:var(--font-data); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--chalk-dim) }

/* ════ SECTION 6 — FINAL CTA ═══════════════════════ */
#cta{ min-height:100vh; background:var(--black-true); position:relative; display:flex; align-items:center; overflow:hidden }
#cta .court-lines{opacity:.4}
#cta .cta-inner{ max-width:720px; margin:0 auto; text-align:center; padding:120px 48px; position:relative; z-index:10 }
#cta .cta-inner .kicker{justify-content:center}
#cta h2{ font-family:var(--font-display); font-size:clamp(48px,9vw,120px); line-height:.92; margin:22px 0 14px }
#cta h2 em{color:var(--red-flare); font-style:normal}
#cta .cta-sub{ font-family:var(--font-data); font-size:14px; letter-spacing:.16em; color:var(--chalk-mid); text-transform:lowercase; margin-bottom:40px }
#cta .cta-form{ display:flex; gap:12px; max-width:520px; margin:0 auto; }
#cta .cta-form .field{
  flex:1; border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--black-surface); display:flex; align-items:center; transition:border-color var(--dur-snap);
}
#cta .cta-form .field:focus-within{border-color:var(--red-hot)}
#cta .cta-form input{
  flex:1; appearance:none; background:transparent; border:0; outline:0; color:var(--chalk-primary);
  font-family:var(--font-data); font-size:14px; letter-spacing:.06em; padding:17px 18px;
}
#cta .cta-form input::placeholder{color:var(--chalk-muted)}
#cta .cta-note{ margin-top:18px; font-family:var(--font-data); font-size:10px; letter-spacing:.22em; color:var(--chalk-dim); text-transform:uppercase }
/* post-submit state */
#cta .cta-result{ position:relative; z-index:10; text-align:center; padding:120px 48px; display:none }
#cta .cta-result .gen-holder{ display:flex; justify-content:center; margin-bottom:34px; perspective:1200px }
#cta .cta-result .draftno{ font-family:var(--font-display); font-size:clamp(30px,5vw,58px); color:#fff; letter-spacing:.02em }
#cta .cta-result .draftno em{ color:var(--gold-bright); font-style:normal }
#cta .cta-result .draftsub{ font-family:var(--font-data); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--chalk-muted); margin-top:14px }
#cta .cta-result .share{ display:flex; gap:10px; justify-content:center; margin-top:30px }
#cta footer{ position:absolute; bottom:0; left:0; right:0; padding:26px 48px; display:flex; justify-content:space-between; align-items:center; z-index:10;
  font-family:var(--font-data); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-dim); border-top:1px solid var(--border-void) }

/* ── chalk section index marker, fixed left ───────── */
.sec-index{
  position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:115;
  display:flex; flex-direction:column; gap:14px; mix-blend-mode:difference; pointer-events:none;
}
.sec-index i{ width:6px; height:6px; border:1px solid #fff; border-radius:50%; opacity:.35; transition:all .3s; display:block }
.sec-index i.on{ background:var(--red-flare); border-color:var(--red-flare); opacity:1 }

@media(max-width:900px){
  #void .void-mark{font-size:46vw}
  #void .hero-copy{bottom:14%; width:88vw}
  #card .anno{display:none}
  #map .entity{top:calc(50% + 132px)}
  #map .map-cap{bottom:6%}
  #welcome{padding:120px 0 90px}
  #feed{padding:104px 0 110px}
  #feed .stream{padding:0 24px}
  #feed .feed-head{padding:0 24px; margin-bottom:44px}
  #cta .cta-inner{padding:104px 24px}
  #cta .cta-result{padding:104px 24px}
  .sec-index{display:none}
  #carousel .car-head{top:6%}
  #carousel .cmount{width:300px;height:433px}
  #carousel .cmeta{width:300px; margin-top:20px}
}
@media(max-width:760px){
  #welcome{padding:104px 0 80px}
  #welcome .bd-body{padding:30px 24px}
  #welcome .bd-q{margin-bottom:20px}
  #map .entity{width:280px}
  #map .entity .ecard .meta{gap:16px}
  #feed .feed-head h2{font-size:clamp(34px,9vw,56px)}
  #feed .item{padding:18px; gap:16px}
  #feed .item .ic{width:46px;height:46px}
  #feed .item .ic svg{width:22px;height:22px}
  #feed .item h3{font-size:15px}
  #feed .stream{gap:14px}
  #cta .cta-form{flex-direction:column}
  /* touch targets ≥ 44px */
  #carousel .car-nav i{height:5px; padding:14px 0; background-clip:content-box}
  .switcher button{padding:13px 13px}
}
@media(max-width:520px){
  #carousel .car-head{top:5%}
  #carousel .cmount{width:262px;height:378px}
  #carousel .cmeta{width:262px; margin-top:16px}
  #carousel .cmeta .nm{font-size:26px}
  #carousel .cmeta .ds{font-size:11px}
  #map .entity{width:252px}
  #map .entity .ecard{padding:15px 16px}
  #map .entity .ecard .name{font-size:22px}
  #map .entity .ecard .meta .v{font-size:20px}
}
/* short viewports: keep the carousel card + its caption fully on-screen */
@media(max-height:720px) and (max-width:900px){
  #carousel .car-head{top:3%}
  #carousel .cmount{width:244px;height:352px}
  #carousel .cmeta{width:244px; margin-top:12px}
  #carousel .car-hint{bottom:10%}
  #carousel .car-nav{bottom:5%}
}
/* short viewports (any width): keep the bounty card clear of the caption */
@media(max-height:740px){
  #map .entity{top:calc(50% + 96px)}
  #map .map-cap{bottom:6%}
}