/* 3D rig view (js/ui/rig3d.js). Everything here is scoped to `.r3d-on`, which rig3d adds to the
   mount that currently holds the WebGL canvas. Without it the 2D board renders exactly as before. */

.rig3d-mount { position: relative; }
.rig3d-canvas { display: none; }
.rig3d-hero:not(.r3d-on) { display: none; }

.r3d-on > .rig3d-canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  border-radius: inherit; outline: none; -webkit-tap-highlight-color: transparent;
}
.r3d-on > .rig3d-canvas:active { cursor: grabbing !important; }

/* mount sizes per context */
.rig3d-mount.r3d-on {
  height: 318px; border-radius: 8px; overflow: hidden; background: #0b0611;
  box-shadow: 0 0 0 1px #0b0710, inset 0 0 0 1px rgba(226,182,92,.12), 0 8px 22px rgba(0,0,0,.45);
}
.shop-rig .rig3d-mount.r3d-on, .reward-rig .rig3d-mount.r3d-on { height: 372px; }
.modal .rig3d-mount.r3d-on { height: min(470px, 62vh); }

/* the 3D scene does its own RGB lighting: drop the 2D board's blurred RGB halo (also an expensive paint) */
.mb-panel:has(.r3d-on)::before { display: none !important; }

/* the 2D board becomes a transparent hotspot layer over the canvas */
.r3d-on .mobo {
  position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important;
  zoom: 1 !important; background: none !important; z-index: 1; pointer-events: none; border-radius: 8px;
}
.r3d-on .mobo:not(.throttle):not(.warn) { box-shadow: inset 0 0 calc(var(--ht) * 34px) rgba(var(--hc), calc(var(--ht) * .35)); }
.r3d-on .mobo > :not(.chip):not(.mb-lcd):not(.mb-banner) { display: none !important; }
.r3d-on .mobo .chip.part {
  pointer-events: auto; background: transparent !important; border: 0 !important; box-shadow: none !important;
  outline: 1px solid transparent; outline-offset: 0; border-radius: 6px; transition: outline-color .15s, background-color .15s;
}
.r3d-on .mobo .chip.part > i, .r3d-on .mobo .chip.part > .cond, .r3d-on .mobo .chip.part > svg { display: none !important; }
.r3d-on .mobo .chip.part:hover { outline-color: rgba(226,182,92,.85); background-color: rgba(226,182,92,.07) !important; }
.r3d-on .mobo .chip.part.empty { outline: 1px dashed rgba(226,182,92,.28); }
.r3d-on .mobo .chip.part .lbl {
  left: 50% !important; top: auto !important; bottom: auto !important; transform: translate(-50%, -120%);
  opacity: 0; transition: opacity .12s; white-space: nowrap !important;
}
.r3d-on .mobo .chip.part:hover .lbl { opacity: 1; }
.r3d-on .mobo .chip.part .off { border-radius: 6px; font-size: 8px; }
.r3d-on .mobo .chip.part.flash { animation: r3dflash .55s var(--ease-out, ease-out); }
@keyframes r3dflash { 0% { outline: 2px solid var(--gold); background-color: rgba(255,211,110,.22); } 100% { outline: 2px solid transparent; background-color: transparent; } }

/* LCD + danger banner float over the scene */
.r3d-on .mobo .mb-lcd {
  left: 8px !important; top: 8px !important; right: auto !important; bottom: auto !important; width: auto; height: auto;
  padding: 4px 7px; pointer-events: auto; background: rgba(8,14,12,.78); backdrop-filter: blur(3px);
}
.r3d-on .mobo .mb-banner { left: 8px !important; right: 8px !important; width: auto !important; bottom: 8px !important; }
.r3d-on .mobo.throttle::after { border-radius: 8px; }

/* title hero */
.rig3d-hero.r3d-on {
  position: relative; width: min(980px, 92vw); height: clamp(270px, 41vh, 470px); margin: 0 auto 4px;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
.rig3d-hero.r3d-on > .rig3d-canvas { pointer-events: none; }

@media (max-width: 1180px) { .enc .rig3d-mount.r3d-on { height: 262px; } }
@media (max-width: 860px) { .enc .rig3d-mount.r3d-on { height: 320px; } }