/* =====================================================================
   3D SKIN STAGE  (js/skins.js builds the models; this styles the stage + cards)
   ===================================================================== */
.crew{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1100px; margin:6px auto 12px; }
.crew-card{ --ac:124,92,255; position:relative; margin:0; padding:14px 12px 22px; text-align:center; border-radius:26px; isolation:isolate; overflow:hidden;
  background:linear-gradient(170deg, rgba(150,135,255,.08), rgba(80,100,220,.03) 55%, rgba(8,10,28,.35));
  border:1px solid rgba(255,255,255,.10); box-shadow:0 22px 60px rgba(2,3,16,.5), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.crew-card::before{ content:''; position:absolute; inset:-30% -10% auto; height:80%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--ac),.34), transparent 72%); filter:blur(22px); opacity:.9; }
.crew-card:hover{ transform:translateY(-6px); border-color:rgba(var(--ac),.55); box-shadow:0 30px 70px rgba(2,3,16,.6), 0 0 50px -8px rgba(var(--ac),.5), inset 0 1px 0 rgba(255,255,255,.14); }
.crew-card figcaption{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:6px; }
.crew-role{ display:inline-block; padding:4px 13px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:#fff;
  background:linear-gradient(120deg, rgba(var(--ac),.55), rgba(var(--ac),.25)); border:1px solid rgba(var(--ac),.6); box-shadow:0 0 20px rgba(var(--ac),.35); }
.crew-card b{ font-size:24px; font-weight:800; line-height:1.15; color:#fff; text-shadow:0 0 22px rgba(var(--ac),.8); }
.crew-card small{ font-size:12.5px; color:var(--cream-dim); }
.crew-hint{ text-align:center; font-size:12.5px; color:var(--cream-dim); margin:0 0 34px; letter-spacing:.3px; }
.crew-hint span{ display:inline-block; padding:5px 14px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }

/* the stage */
.mcs{ --u:7px; position:relative; width:100%; height:calc(var(--u) * 47); cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.mcs:active{ cursor:grabbing; }
.mcs-scene{ position:absolute; inset:0; perspective:900px; }
.mcs-floor{ position:absolute; left:50%; top:calc(var(--u) * 45); width:calc(var(--u) * 34); height:calc(var(--u) * 8); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--ac),.65), rgba(var(--ac),.18) 60%, transparent 100%); box-shadow:0 0 40px rgba(var(--ac),.35); }
.mcs-floor::after{ content:''; position:absolute; inset:18% 12%; border-radius:50%; border:1px solid rgba(255,255,255,.28); }
.m3-root{ position:absolute; left:50%; top:calc(var(--u) * 29); width:0; height:0; transform-style:preserve-3d; transform:rotateX(-9deg) rotateY(var(--yaw,0deg)); will-change:transform; }
.m3-rig{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; transform:translateY(calc(var(--u) * var(--by,0))); }
.pv{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d;
  transform:translate3d(calc(var(--u) * var(--x,0)), calc(var(--u) * var(--y,0)), calc(var(--u) * var(--z,0))) rotateZ(var(--rz,0deg)) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); }
.pvin{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; transform:translateY(calc(var(--u) * var(--cy,0))); }
.bx{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; }
.f{ position:absolute; display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; background-repeat:no-repeat; image-rendering:pixelated; image-rendering:crisp-edges; image-rendering:-moz-crisp-edges; }
.sk .f{ background-image:var(--sk); }
.scenery{ transform-style:preserve-3d; }
.lid-logo{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) translateZ(calc(var(--u) * .4)); font:800 calc(var(--u) * 2.4)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#a9e8ff; text-shadow:0 0 12px #5ac8ff, 0 0 28px #7a7dff; white-space:nowrap; backface-visibility:hidden; }
.holo{ position:absolute; left:calc(var(--u) * -5.5); top:calc(var(--u) * -4.5); width:calc(var(--u) * 11); height:calc(var(--u) * 9); padding:calc(var(--u) * .7); box-sizing:border-box; border-radius:calc(var(--u) * .8);
  border:1px solid rgba(130,210,255,.7); background:linear-gradient(160deg, rgba(80,140,255,.30), rgba(150,90,255,.20)); box-shadow:0 0 calc(var(--u) * 2.4) rgba(100,170,255,.55), inset 0 0 calc(var(--u) * 1.6) rgba(130,210,255,.25);
  animation:holoFloat 5s ease-in-out infinite; backface-visibility:visible; }
.holo i{ display:block; height:calc(var(--u) * .5); margin:calc(var(--u) * .55) 0 0 var(--ind,0); width:var(--w,60%); border-radius:3px; background:linear-gradient(90deg,#7ee7ff,#b79bff); transform-origin:left; animation:holoType 3.4s ease-in-out infinite; animation-delay:calc(var(--i) * .32s); }
@keyframes holoType{ 0%{ transform:scaleX(0); opacity:.4; } 35%,80%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(0); opacity:.4; } }
@keyframes holoFloat{ 0%,100%{ margin-top:0; } 50%{ margin-top:calc(var(--u) * -.8); } }
.mcs-fail{ display:grid; place-items:center; color:var(--cream-dim); font-size:13px; }
.mcs-fail::after{ content:'Skin preview unavailable'; }

@media (max-width:900px){
  .crew{ grid-template-columns:1fr; max-width:420px; gap:18px; }
  .mcs{ --u:7.4px; }
}
@media (max-width:380px){ .mcs{ --u:6.4px; } }
@media (prefers-reduced-motion: reduce){ .holo, .holo i{ animation:none; } .crew-card{ transition:none; } }
.crew-card figcaption{ margin-top:16px; }