/* =====================================================================
   Ether Core Labs — 3D Menu Layer (menu3d.css)
   An add-on skin that sits on top of app.css. It does not change layout,
   copy, colors or data; it gives the existing pieces physical depth:
   extruded slabs, keycap buttons, hinged menus, block-letter titles,
   a game-style selection cursor and a controls HUD.
   Turn it off for a visitor:  <html class="m3d-off">  (the HUD toggle does this)
   Remove it entirely: delete the menu3d.css / menu3d.js tags from the pages.
   ===================================================================== */

@property --ring { syntax: "<color>"; inherits: true; initial-value: #ff6a13; }

:root {
  --m3d-side: #2e1508;      /* resting slab edge: scorched black-orange */
  --m3d-side-hot: #8f3300;  /* slab edge when selected */
  --m3d-deep: #000;
  --m3d-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Extrusion helpers -------------------------------------------
   --ex / --ey steer which way the slab's thickness shows. JS turns them
   with the tilt, so the edge you see moves like a real object. Rest = 1,1
   (down-right), matching the site's existing hard-shadow direction.      */
html:not(.m3d-off) :is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.disc,.loc,.guide,.tcard,.slot-card,.eg-card,.quick a,.live-card) {
  --ex: 1; --ey: 1; --qx: 0; --qy: 0;
  --side: var(--m3d-side);
  --ring: transparent;
  --lift: 0px;
  box-shadow:
    0 0 0 2px var(--ring),
    calc(var(--ex) * 1px) calc(var(--ey) * 1px) 0 var(--side),
    calc(var(--ex) * 2px) calc(var(--ey) * 2px) 0 var(--side),
    calc(var(--ex) * 3px) calc(var(--ey) * 3px) 0 var(--side),
    calc(var(--ex) * 4px) calc(var(--ey) * 4px) 0 var(--side),
    calc(var(--ex) * 5px) calc(var(--ey) * 5px) 0 var(--side),
    calc(var(--ex) * 6px) calc(var(--ey) * 6px) 0 var(--side),
    calc(var(--ex) * 7px) calc(var(--ey) * 7px) 0 var(--side),
    calc(var(--ex) * 8px) calc(var(--ey) * 8px) 0 var(--m3d-deep),
    calc(var(--ex) * 9px) calc(var(--ey) * 9px) 0 var(--m3d-deep),
    calc(var(--ex) * 10px) calc(var(--ey) * 10px) 0 var(--m3d-deep),
    calc(var(--ex) * 11px) calc(var(--ey) * 11px) 0 var(--m3d-deep),
    0 30px 50px -16px rgba(0,0,0,.9) !important;
  transform: perspective(1000px) rotateX(calc(var(--cx,0deg) + var(--rx,0deg))) rotateY(calc(var(--cy,0deg) + var(--ry,0deg))) translate3d(0, var(--lift), calc(var(--cz,0px) + var(--pop,0px))) skewX(var(--sk,0deg));
  transition: transform .4s var(--m3d-ease), border-color .2s, background .2s, --ring .25s;
}
html:not(.m3d-off) .agent-card { --ring-hot: var(--c, #ff6a13); }
html:not(.m3d-off) .cat-card   { --ring-hot: var(--rc, #ff6a13); }

/* Selected state: the slab rises off the page and its edge heats up */
html:not(.m3d-off) :is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.disc,.loc,.guide,.tcard,.slot-card,.eg-card,.quick a,.live-card):is(:hover,:focus-visible) {
  --side: var(--m3d-side-hot);
  --ring: var(--ring-hot, #ff6a13);
  --lift: -6px;
  --pop: 18px;
  z-index: 3;
}
/* Non-clickable panels (disc sets, guides) lift less: they hold reading text */
html:not(.m3d-off) :is(article.disc,.guide:not(a)):hover { --lift: -3px; }
html:not(.m3d-off) :is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.loc,.tcard,.slot-card,.quick a):active {
  --lift: 2px; --ex: .3; --ey: .3;
  transition-duration: .08s;
}
/* while the pointer is steering the tilt, follow it tightly */
html:not(.m3d-off) .tilting,
html:not(.m3d-off) .m3d-tilting { transition: transform .08s linear, border-color .2s, background .2s, --ring .25s; }

@keyframes m3dHolo {
  0%,100% { --ring: var(--ring-hot, #ff6a13); }
  33%     { --ring: #ffe14a; }
  66%     { --ring: #ff5fa2; }
}

/* ---------- Inner parallax: art sinks, labels float -------------------- */
html:not(.m3d-off) :is(.desk>img, .feat>img, .agent-card>img, .cat-card .cat-art img, .boo-card img:first-of-type, .enemy img:first-of-type) {
  translate: calc(var(--qx) * -14px) calc(var(--qy) * -10px);
  transition: translate .45s var(--m3d-ease), transform .5s var(--m3d-ease), opacity .3s, filter .3s;
}
html:not(.m3d-off) :is(.desk>div, .feat>b, .feat>small, .feat>.feat-n, .agent-card .meta, .agent-card .rank, .agent-card .new, .cat-card>b, .desk-n, .desk-go) {
  translate: calc(var(--qx) * 9px) calc(var(--qy) * 7px);
  transition: translate .45s var(--m3d-ease), transform .3s;
}
html:not(.m3d-off) .m3d-tilting :is(img, .meta, .rank, .new, b, small, .desk-go, .desk-n, .feat-n, .desk>div) { transition-duration: .1s, .3s; }

/* ---------- Block-letter titles ----------------------------------------
   The site's sticker shadow (orange step, black step) becomes a solid
   extruded letterform: same two colors, filled in as depth.             */
html:not(.m3d-off) {
  --m3d-text-xl:
    1px 1px 0 var(--signal), 2px 2px 0 var(--signal), 3px 3px 0 var(--signal),
    4px 4px 0 var(--signal), 5px 5px 0 #b33a00, 6px 6px 0 #000, 7px 7px 0 #000,
    8px 8px 0 #000, 9px 9px 0 #000, 10px 10px 0 #000, 0 18px 30px rgba(0,0,0,.6);
  --m3d-text-md:
    1px 1px 0 var(--signal), 2px 2px 0 var(--signal), 3px 3px 0 #b33a00,
    4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0 #000;
  --m3d-text-sm: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000;
}
html:not(.m3d-off) .hero .display span:first-child,
html:not(.m3d-off) :is(.zh-title, .h1.zh-title) {
  text-shadow: var(--m3d-text-xl);
  animation: m3dChroma 6s steps(1) infinite;
}
html:not(.m3d-off) :is(.desk b, .faq-head .h2) { text-shadow: var(--m3d-text-md); }
html:not(.m3d-off) :is(.h2, .feat b, .agent-card .meta b) { text-shadow: var(--m3d-text-sm); }
html:not(.m3d-off) .ss-in b {
  text-shadow: 1px 1px 0 #fff3, 1px 2px 0 #7a2a00, 2px 3px 0 #7a2a00, 3px 4px 0 #7a2a00, 4px 5px 0 #000, 5px 6px 0 #000;
}
@keyframes m3dChroma {
  0%,88%,94%,100% { text-shadow: var(--m3d-text-xl); }
  90% { text-shadow: -3px 0 0 #19e3ff, 3px 0 0 #ff2e88, var(--m3d-text-xl); }
  92% { text-shadow: 3px 0 0 #19e3ff, -3px 0 0 #ff2e88, var(--m3d-text-xl); }
}


/* agent dossier name: extruded in that agent's own color */
html:not(.m3d-off) .dossier-hero .copy .display {
  text-shadow:
    1px 1px 0 color-mix(in srgb, var(--c, #ff6a13) 85%, #000),
    2px 2px 0 color-mix(in srgb, var(--c, #ff6a13) 70%, #000),
    3px 3px 0 color-mix(in srgb, var(--c, #ff6a13) 55%, #000),
    4px 4px 0 color-mix(in srgb, var(--c, #ff6a13) 40%, #000),
    5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 8px 8px 0 #000,
    0 2px 12px rgba(0,0,0,.85);
}
/* content panels: fixed thickness, no tilt (they hold forms and text) */
html:not(.m3d-off) .box {
  box-shadow: 1px 1px 0 #241208, 2px 2px 0 #241208, 3px 3px 0 #241208, 4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0 #000, 0 22px 40px -18px rgba(0,0,0,.8);
}

/* ---------- Keycap buttons -------------------------------------------- */
html:not(.m3d-off) .btn {
  box-shadow: 1px 1px 0 #2a2a2a, 2px 2px 0 #222, 3px 3px 0 #1a1a1a, 4px 4px 0 #000, 5px 5px 0 #000, 0 12px 18px -8px rgba(0,0,0,.8);
}
html:not(.m3d-off) .btn:hover {
  box-shadow: 1px 1px 0 #7a2a00, 2px 2px 0 #6b2400, 3px 3px 0 #5a1e00, 4px 4px 0 #3a1300, 5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 0 16px 22px -8px rgba(0,0,0,.85);
}
html:not(.m3d-off) .btn-primary {
  box-shadow: 1px 1px 0 #c94a00, 2px 2px 0 #b33a00, 3px 3px 0 #8f2e00, 4px 4px 0 #000, 5px 5px 0 #000, 0 12px 20px -8px rgba(255,106,19,.45);
}
html:not(.m3d-off) .btn-primary:hover {
  box-shadow: 1px 1px 0 #c94a00, 2px 2px 0 #b33a00, 3px 3px 0 #a33500, 4px 4px 0 #8f2e00, 5px 5px 0 #000, 6px 6px 0 #000, 7px 7px 0 #000, 0 16px 26px -8px rgba(255,106,19,.55);
}
html:not(.m3d-off) .btn:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 #000 !important; animation: none; }

html:not(.m3d-off) :is(.chip, .tier-tab) {
  box-shadow: 1px 1px 0 #262626, 2px 2px 0 #1a1a1a, 3px 3px 0 #000;
  transition: transform .12s, box-shadow .12s, background .15s, color .15s, border-color .15s;
}
html:not(.m3d-off) :is(.chip, .tier-tab)[aria-pressed="true"] {
  box-shadow: 1px 1px 0 #c94a00, 2px 2px 0 #8f2e00, 3px 3px 0 #000, 0 0 18px rgba(255,106,19,.35);
}
html:not(.m3d-off) :is(.chip, .tier-tab):active { transform: translate(3px,3px); box-shadow: 0 0 0 #000; animation: none; }

html:not(.m3d-off) .desk-go {
  box-shadow: 1px 1px 0 #b33a00, 2px 2px 0 #8f2e00, 3px 3px 0 #000, 4px 4px 0 #000;
}

/* nav: the current section sits like a pressed-in tab key */
html:not(.m3d-off) :is(.nav-btn, .nav a)[aria-current="page"] {
  box-shadow: 1px 1px 0 #b33a00, 2px 2px 0 #8f2e00, 3px 3px 0 #000, 4px 4px 0 #000;
}
html:not(.m3d-off) .cs-btn:active { transform: translateY(2px); }

/* ---------- Hinged menus ----------------------------------------------
   Dropdowns swing down from the bar on a hinge instead of fading.      */
html:not(.m3d-off) :is(.mega, .cs-menu) {
  transform-origin: 50% 0;
  transform: perspective(800px) rotateX(-62deg) translateY(-4px);
  transition: opacity .2s, visibility .2s, transform .38s var(--m3d-ease);
}
html:not(.m3d-off) .mega {
  box-shadow: 0 1px 0 #b33a00, 0 2px 0 #8f2e00, 0 3px 0 #6b2400, 0 4px 0 #000, 0 5px 0 #000, 0 30px 60px rgba(0,0,0,.7);
}
html:not(.m3d-off) .cs-menu {
  box-shadow: 0 1px 0 #5a2a10, 0 2px 0 #3a1a08, 0 3px 0 #000, 0 4px 0 #000, 0 30px 70px rgba(0,0,0,.6);
}
html:not(.m3d-off) :is(.nav-btn[aria-expanded="true"] + .mega, .nav-group:hover .mega, .nav-group:focus-within .mega, .cs-btn[aria-expanded="true"] + .cs-menu, .combat-sys:hover .cs-menu) {
  transform: perspective(800px) rotateX(0) translateY(0);
}
/* menu rows slide in from depth */
html:not(.m3d-off) :is(.nav-btn[aria-expanded="true"] + .mega a, .nav-group:hover .mega a, .cs-btn[aria-expanded="true"] + .cs-menu a, .combat-sys:hover .cs-menu a) {
  animation-name: m3dRowIn;
}
@keyframes m3dRowIn { from { opacity: 0; transform: perspective(600px) translateZ(-60px) translateX(-10px); } }

/* ---------- Hero stage ------------------------------------------------ */
html:not(.m3d-off) .hero-copy {
  transform: perspective(1400px) rotateY(calc(var(--px, 0) * -7deg)) rotateX(calc(var(--py, 0) * 5deg));
  transform-origin: 30% 50%;
  transition: transform .6s var(--m3d-ease);
}
/* the ticker belt gets a real thickness and tips toward the viewer */
html:not(.m3d-off) .tape {
  transform: perspective(900px) rotateX(14deg) rotate(-1.4deg);
  box-shadow: 0 1px 0 #d4520a, 0 2px 0 #b33a00, 0 3px 0 #a33500, 0 4px 0 #8f2e00, 0 5px 0 #6b2400, 0 6px 0 #000, 0 7px 0 #000, 0 16px 26px rgba(0,0,0,.6);
}
html:not(.m3d-off) .stats-strip {
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.28);
}
html:not(.m3d-off) .spot-card { box-shadow: 3px 3px 0 #000; }

/* ---------- Page swap: panels swing in like a menu screen ------------- */
html:not(.m3d-off):not(.rm) .view-in {
  animation: m3dViewIn .6s var(--m3d-ease) backwards;
  transform-origin: 50% 0;
}
@keyframes m3dViewIn {
  from { opacity: 0; transform: perspective(1600px) rotateX(9deg) translate3d(0, 28px, -90px); filter: blur(3px); }
}

/* ---------- Selection cursor (desktop pointer / keyboard) ------------- */
.m3d-cursor {
  position: fixed; left: 0; top: 0; z-index: 92;
  width: 0; height: 0;
  pointer-events: none; opacity: 0;
  transition: opacity .18s;
  will-change: transform, width, height;
}
.m3d-cursor.on { opacity: 1; }
.m3d-cursor i {
  position: absolute; width: 16px; height: 16px;
  border: 3px solid var(--signal);
  filter: drop-shadow(2px 2px 0 #000);
}
.m3d-cursor i:nth-child(1) { left: 0;  top: 0;    border-right: 0; border-bottom: 0; }
.m3d-cursor i:nth-child(2) { right: 0; top: 0;    border-left: 0;  border-bottom: 0; }
.m3d-cursor i:nth-child(3) { left: 0;  bottom: 0; border-right: 0; border-top: 0; }
.m3d-cursor i:nth-child(4) { right: 0; bottom: 0; border-left: 0;  border-top: 0; }
.m3d-cursor.small i { width: 9px; height: 9px; border-width: 2px; }
.m3d-cursor b {
  position: absolute; left: -20px; top: 50%;
  width: 0; height: 0; margin-top: -8px;
  border-left: 12px solid var(--hazard);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  filter: drop-shadow(2px 2px 0 #000);
  animation: m3dPip .7s ease-in-out infinite alternate;
}
.m3d-cursor.small b { display: none; }
.m3d-cursor.blink i { animation: m3dSnap .22s ease-out; }
@keyframes m3dPip  { to { transform: translateX(5px); } }
@keyframes m3dSnap { 0% { border-color: #fff; } 100% { border-color: var(--signal); } }

/* ---------- Controls HUD --------------------------------------------- */
.m3d-hud {
  position: fixed; right: 18px; bottom: 18px; z-index: 46;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 14px;
  font: 700 12px/1 var(--body); font-style: italic; color: #cfc4cd;
  background: rgba(8,8,8,.92);
  border: 2px solid #2a2a2a; border-radius: 12px;
  box-shadow: 1px 1px 0 #1a0b04, 2px 2px 0 #1a0b04, 3px 3px 0 #000, 4px 4px 0 #000, 0 14px 30px rgba(0,0,0,.6);
  transform: perspective(700px) rotateX(10deg);
  transform-origin: 50% 100%;
}
.m3d-hud span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.m3d-hud kbd {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  font: 800 11px/1 var(--body); font-style: normal; color: #fff;
  background: #1b1b1b; border: 1px solid #3a3a3a; border-radius: 5px;
  box-shadow: 0 1px 0 #000, 0 2px 0 #000, 0 3px 0 #000;
}
.m3d-hud button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  font: 800 11px/1 var(--body); font-style: italic; text-transform: uppercase;
  color: #000; background: var(--signal);
  box-shadow: 1px 1px 0 #b33a00, 2px 2px 0 #000, 3px 3px 0 #000;
}
.m3d-hud button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }
html.m3d-off .m3d-hud button { color: #cfc4cd; background: #1b1b1b; box-shadow: 1px 1px 0 #000, 2px 2px 0 #000; }
.m3d-hud.dim { opacity: .35; transition: opacity .3s; }
.m3d-hud.dim:hover { opacity: 1; }
@media (max-width: 1099px), (pointer: coarse) { .m3d-hud { display: none; } }
@media (max-width: 1240px) { .m3d-hud .m3d-k-search { display: none; } }

/* ---------- Comfort switches ----------------------------------------- */
html.rm .m3d-cursor b, html.rm .m3d-cursor.blink i { animation: none; }
html.rm:not(.m3d-off) :is(.hero .display span:first-child, .zh-title), html.rm:not(.m3d-off) :is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.disc,.loc,.guide,.tcard,.slot-card,.eg-card,.quick a,.live-card):is(:hover,:focus-visible) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.m3d-off) .view-in { animation: none; }
  html:not(.m3d-off) :is(.mega, .cs-menu) { transition: opacity .15s, visibility .15s; }
  .m3d-cursor b { animation: none; }
  html:not(.m3d-off) :is(.hero .display span:first-child, .zh-title) { animation: none; }
}
/* small screens: keep the depth, drop the tilt on the hero headline */
@media (max-width: 900px) {
  html:not(.m3d-off) .hero-copy { transform: none; }
  html:not(.m3d-off) .tape { transform: perspective(700px) rotateX(10deg) rotate(-1.4deg); }
}


/* =====================================================================
   v2 — DEEPER 3D: scene, curved screen, focus depth, deal-in, pedestal
   ===================================================================== */

/* Focus depth: the selected slab comes forward, its neighbours step back */
html:not(.m3d-off) .m3d-dim.m3d-dim {
  --pop: -44px;
  filter: brightness(.5) saturate(.6) blur(.4px);
  transition: transform .4s var(--m3d-ease), filter .3s, border-color .2s, background .2s, --ring .25s;
}

/* Deal-in: cards fly to their slots from deep in the scene */
html:not(.m3d-off):not(.rm) :is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.disc,.loc,.guide,.tcard,.slot-card,.eg-card,.quick a,.live-card).rv:not(.m3d-done) {
  animation: m3dDeal .8s var(--m3d-ease) 1 backwards; animation-delay: calc(var(--i, 0) * 45ms);
}
html:not(.m3d-off):not(.rm) .m3d-deal:not(.m3d-done) { animation: m3dDeal .8s var(--m3d-ease) 1 backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes m3dDeal {
  0%   { opacity: 0; transform: perspective(1000px) translate3d(0, 60px, -520px) rotateX(48deg) rotateZ(-6deg); filter: blur(4px) brightness(2); }
  60%  { opacity: 1; filter: blur(0) brightness(1.4); }
  100% { filter: none; }
}

/* ---------- Scene: perspective floor, horizon, drifting plates --------- */
.m3d-stage {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  perspective: 520px; perspective-origin: 50% 38%;
}
.m3d-floor {
  position: absolute; left: -60%; right: -60%; bottom: -14vh; height: 120vh;
  transform-origin: 50% 100%;
  transform: rotateX(80deg);
  background:
    linear-gradient(90deg, rgba(255,106,19,.55) 0 2px, transparent 2px) 0 0 / 90px 90px,
    linear-gradient(0deg,  rgba(255,106,19,.55) 0 2px, transparent 2px) 0 var(--m3d-scroll, 0px) / 90px 90px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 30%, transparent 75%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 30%, transparent 75%);
  opacity: .32;
  animation: m3dFloor 4s linear infinite;
}
@keyframes m3dFloor { to { background-position: 0 0, 0 calc(var(--m3d-scroll, 0px) + 90px); } }
.m3d-horizon {
  position: absolute; left: 0; right: 0; bottom: 21vh; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal) 30%, var(--hazard) 50%, var(--signal) 70%, transparent);
  box-shadow: 0 0 30px 6px rgba(255,106,19,.35);
  opacity: .35;
}
.m3d-plate {
  position: absolute; width: var(--w, 60px); height: calc(var(--w, 60px) * .62);
  left: var(--x); top: var(--y);
  border: 2px solid rgba(255,106,19,.55); border-radius: 6px;
  background: repeating-linear-gradient(-45deg, rgba(255,106,19,.16) 0 6px, transparent 6px 12px);
  box-shadow: 3px 3px 0 rgba(0,0,0,.6);
  opacity: var(--o, .5);
  transform: translate3d(0, calc(var(--m3d-y, 0px) * var(--d, .2)), var(--z, -200px)) rotateX(var(--a, 30deg)) rotateY(var(--b, 20deg));
  animation: m3dSpin var(--t, 18s) linear infinite;
}
@keyframes m3dSpin {
  from { rotate: 1 1 0 0deg; }
  to   { rotate: 1 1 0 360deg; }
}
html.m3d-off .m3d-stage, html.m3d-off .m3d-frame { display: none; }
html.rm .m3d-floor, html.rm .m3d-plate { animation: none; }

/* ---------- HUD frame: viewport corners + depth rail ------------------ */
.m3d-frame { position: fixed; inset: 0; z-index: 44; pointer-events: none; }
.m3d-frame i {
  position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255,106,19,.55);
}
.m3d-frame i:nth-child(1) { left: 10px;  top: calc(var(--bar-h) + 10px); border-right: 0; border-bottom: 0; }
.m3d-frame i:nth-child(2) { right: 10px; top: calc(var(--bar-h) + 10px); border-left: 0;  border-bottom: 0; }
.m3d-frame i:nth-child(3) { left: 10px;  bottom: 10px; border-right: 0; border-top: 0; }
.m3d-frame i:nth-child(4) { right: 10px; bottom: 10px; border-left: 0;  border-top: 0; }
.m3d-rail {
  position: absolute; right: 16px; top: calc(var(--bar-h) + 70px); bottom: 90px; width: 10px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
.m3d-rail b {
  position: absolute; right: -2px; top: calc(var(--m3d-p, 0) * (100% - 14px));
  width: 0; height: 0;
  border-right: 12px solid var(--signal); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  filter: drop-shadow(0 0 6px rgba(255,106,19,.8));
}
@media (max-width: 900px) { .m3d-frame { display: none; } }

/* ---------- Character pedestal (hero + agent dossier) ----------------- */
.m3d-pad {
  position: absolute; left: 55%; bottom: 0; width: min(560px, 90%); aspect-ratio: 1;
  translate: -50% 44%;
  transform: perspective(900px) rotateX(74deg);
  pointer-events: none; z-index: -1;
}
.m3d-pad i { position: absolute; inset: 0; border-radius: 50%; }
.m3d-pad i:nth-child(1) {
  background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--signal)) 55%, transparent) 0, transparent 62%);
  filter: blur(6px);
}
.m3d-pad i:nth-child(2) {
  inset: 8%;
  border: 3px dashed color-mix(in srgb, var(--c, var(--signal)) 90%, #fff);
  animation: m3dRing 14s linear infinite;
  box-shadow: 0 0 24px color-mix(in srgb, var(--c, var(--signal)) 70%, transparent), inset 0 0 24px color-mix(in srgb, var(--c, var(--signal)) 50%, transparent);
}
.m3d-pad i:nth-child(3) {
  inset: 20%;
  border: 6px solid transparent;
  border-top-color: var(--hazard); border-bottom-color: var(--c, var(--signal));
  animation: m3dRing 6s linear infinite reverse;
}
.m3d-pad i:nth-child(4) {
  inset: 31%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c, var(--signal)) 70%, transparent) 0 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%);
          mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%);
  animation: m3dRing 22s linear infinite;
}
@keyframes m3dRing { to { rotate: 360deg; } }
html.m3d-off .m3d-pad { display: none; }
.hero-art .m3d-pad { left: 72%; width: min(620px, 60%); translate: -50% 40%; opacity: 1; }
@media (max-width: 900px) { .hero-art .m3d-pad { left: 60%; width: 90%; } }
html.rm .m3d-pad i { animation: none; }
/* the character stands on it and turns with the camera */
html:not(.m3d-off) .dossier-hero .art img {
  transform: perspective(1200px) rotateY(calc(var(--hx, 0) * 16deg)) rotateX(calc(var(--hy, 0) * -6deg));
  transition: transform .5s var(--m3d-ease);
}
html:not(.m3d-off) .dossier-hero .copy {
  transform: perspective(1400px) rotateY(calc(var(--hx, 0) * -8deg + 4deg)) rotateX(calc(var(--hy, 0) * 4deg));
  transform-origin: 0 50%;
  transition: transform .6s var(--m3d-ease);
}

/* ---------- Section headings sit on angled 3D plates ------------------ */
html:not(.m3d-off) :is(.section-head, .desks-head) {
  transform: perspective(900px) rotateY(10deg) rotateX(4deg);
  transform-origin: 0 50%;
}
html:not(.m3d-off) .page-head { transform: perspective(1400px) rotateY(6deg); transform-origin: 0 50%; }
@media (max-width: 900px) {
  html:not(.m3d-off) :is(.section-head, .desks-head, .page-head) { transform: none; }
}

/* hero camera: bigger swing, and the copy block sits angled like a game title card */
html:not(.m3d-off) .hero-copy {
  transform: perspective(1200px) rotateY(calc(var(--px, 0) * -12deg + 9deg)) rotateX(calc(var(--py, 0) * 8deg + 2deg));
  transform-origin: 0 50%;
}
@media (max-width: 900px) { html:not(.m3d-off) .hero-copy { transform: perspective(1000px) rotateY(6deg); } }

html.rm:not(.m3d-off) .m3d-dim, html.rm:not(.m3d-off) .m3d-deal { animation: none; }


/* =====================================================================
   v3 — Labyrinth Maps 3D table view
   ===================================================================== */
.map-view { perspective: 1300px; perspective-origin: 50% 30%; }
.m3d-labwrap {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 55%;
  transition: transform .7s var(--m3d-ease);
}
.m3d-orbiting .m3d-labwrap { transition: none; }
.m3d-extrude { display: none; }
.m3d-lab .m3d-labwrap { transform: translateY(4%) rotateX(var(--lab-tilt, 58deg)) rotateZ(var(--lab-spin, -18deg)) scale(1.04); }
.m3d-lab #mi, .m3d-lab #pins { transform-style: preserve-3d; }
.m3d-lab .m3d-extrude { display: block; position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.m3d-lab .m3d-extrude i {
  position: absolute; inset: 0;
  background-size: 100% 100%;
  transform: translateZ(calc(var(--k) * 2.3px));
  filter: brightness(calc(.5 + var(--k) * .03));
}
.m3d-lab .m3d-extrude .m3d-glow { transform: translateZ(.6px); filter: blur(1.5px); }
.m3d-lab .m3d-extrude .m3d-top { filter: brightness(1.04) contrast(1.05); }
.m3d-lab #map-img { filter: brightness(.62) sepia(.35) hue-rotate(-12deg) saturate(1.3); }
.m3d-lab #route-svg { transform: translateZ(2px); }
.m3d-lab #pins { transform: translateZ(1px); }
/* pins stand up and face the camera, lifted above the rooftops */
.m3d-lab .pin {
  transform-origin: 50% 100%;
  transform: translateZ(44px) rotateZ(calc(-1 * var(--lab-spin, -18deg))) rotateX(calc(-1 * var(--lab-tilt, 58deg))) scale(calc(1.25 / var(--z, 1)));
  animation: pinin .4s cubic-bezier(.2,1.6,.4,1) both;
}
.m3d-lab .pin::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 44px; margin-left: -1px;
  background: linear-gradient(var(--pc, var(--signal)), transparent);
  opacity: .8; pointer-events: none;
}
.m3d-lab .pin.k-card { animation: pinin .4s cubic-bezier(.2,1.6,.4,1) both; }
.m3d-lab .pin:hover img, .m3d-lab .pin:focus-visible img { transform: scale(1.5) translateY(-4px); }
/* the camera swoops in from the top-down map */
.m3d-lab-intro .m3d-labwrap { animation: m3dSwoop 1.2s var(--m3d-ease); }
@keyframes m3dSwoop {
  from { transform: rotateX(0) rotateZ(0) scale(1); }
}
.m3d-lab-intro .m3d-extrude i { animation: m3dRaise 1.1s var(--m3d-ease) backwards; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes m3dRaise { from { transform: translateZ(0); opacity: 0; } }

/* camera controls */
.m3d-labctl {
  position: absolute; right: 12px; top: 12px; z-index: 6;
  display: flex; gap: 6px; padding: 6px;
  background: rgba(8,8,8,.88); border: 2px solid #2a2a2a; border-radius: 12px;
  box-shadow: 1px 1px 0 #1a0b04, 2px 2px 0 #1a0b04, 3px 3px 0 #000, 0 10px 24px rgba(0,0,0,.6);
}
.m3d-labctl button {
  min-width: 34px; height: 32px; padding: 0 10px; border-radius: 8px;
  font: 800 12px/1 var(--body); font-style: italic; text-transform: uppercase; color: #fff;
  background: #1b1b1b; border: 1px solid #3a3a3a;
  box-shadow: 0 1px 0 #000, 0 2px 0 #000, 0 3px 0 #000;
  cursor: pointer;
}
.m3d-labctl button[data-lab=toggle] { color: #000; background: var(--signal); border-color: var(--signal); box-shadow: 0 1px 0 #b33a00, 0 2px 0 #8f2e00, 0 3px 0 #000; }
.m3d-labctl button:active { transform: translateY(3px); box-shadow: 0 0 0 #000; }
.m3d-labctl button:not([data-lab=toggle]) { display: none; }
.m3d-lab .m3d-labctl button { display: inline-block; }
.m3d-lab::before {
  content: "Right-drag or Alt+drag to orbit";
  position: absolute; left: 12px; bottom: 12px; z-index: 6; pointer-events: none;
  padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.7);
  font: 700 12px/1 var(--body); font-style: italic; color: #cfc4cd;
}
html.m3d-off .m3d-labctl { display: none; }
html.rm .m3d-labwrap { transition: none; }
html.rm .m3d-lab-intro .m3d-labwrap, html.rm .m3d-lab-intro .m3d-extrude i { animation: none; }

/* entrance finished: lock the card in its final state (hover can't restart it) */
:is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.disc,.loc,.guide,.tcard,.slot-card,.eg-card,.quick a,.live-card).m3d-done { animation: none !important; opacity: 1; }