/* ============================================================================
   LIBERTY ARCADE — 3D KIT OVERLAY STYLES  (companion to game-kit.css)
   ----------------------------------------------------------------------------
   Only the bits the Three.js kit adds on top of the shared 2D chrome:
     - the WebGL canvas fill inside #liberty-stage
     - a center HUD reticle + lock-on indicator + targeting brackets
     - a radio-comms caption line (Penfist subtitles)
     - a full-screen hit-flash wash layer
   The header / HUD cells / GAME OVER / pause / boss overlays / touch joystick &
   buttons all come from game-kit.css unchanged — load game-kit.css FIRST.
   ============================================================================ */

/* the WebGL canvas fills the letterboxed stage */
.liberty3d-stage { position: relative; overflow: hidden; }
.liberty3d-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
  touch-action: none;            /* let the kit own pointer/touch for look */
  cursor: crosshair;
}

/* the overlay container holding reticle + lock + comms (sits above canvas,
   below the DOM HUD/overlays which game-kit.css depths higher) */
.liberty3d-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* ---- center reticle ---- */
.liberty3d-reticle {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
}
.liberty3d-reticle__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(247, 243, 232, 0.55);
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  transition: border-color .12s ease, transform .12s ease;
}
.liberty3d-reticle__dot {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(247, 243, 232, 0.9);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
}
/* corner targeting brackets — hidden until "aim/lock" */
.liberty3d-reticle__bracket {
  position: absolute; width: 14px; height: 14px;
  border: 2px solid rgba(201, 162, 39, 0.0);
  transition: border-color .12s ease;
}
.liberty3d-reticle__bracket.tl { left: -10px; top: -10px; border-right: none; border-bottom: none; }
.liberty3d-reticle__bracket.tr { right: -10px; top: -10px; border-left: none;  border-bottom: none; }
.liberty3d-reticle__bracket.bl { left: -10px; bottom: -10px; border-right: none; border-top: none; }
.liberty3d-reticle__bracket.br { right: -10px; bottom: -10px; border-left: none;  border-top: none; }

/* aim state: brackets fade in gold */
.liberty3d-reticle.is-aim .liberty3d-reticle__bracket { border-color: rgba(201, 162, 39, 0.7); }
.liberty3d-reticle.is-aim .liberty3d-reticle__ring   { border-color: rgba(201, 162, 39, 0.7); }

/* locked state: red ring + brackets, gentle pulse */
.liberty3d-reticle.is-locked .liberty3d-reticle__ring {
  border-color: rgba(178, 34, 52, 0.95);
  transform: scale(0.82);
}
.liberty3d-reticle.is-locked .liberty3d-reticle__bracket {
  border-color: rgba(178, 34, 52, 0.95);
  animation: liberty3d-lockpulse .5s ease-in-out infinite alternate;
}
@keyframes liberty3d-lockpulse { from { opacity: .55; } to { opacity: 1; } }

/* ---- LOCK label ---- */
.liberty3d-lock {
  position: absolute; left: 50%; top: calc(50% + 52px);
  transform: translateX(-50%);
  font: 700 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 3px;
  color: #B22234;
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
  opacity: 0; transition: opacity .12s ease;
}
.liberty3d-lock.is-on { opacity: 1; }

/* ---- radio comms caption (Penfist subtitles) ---- */
.liberty3d-comms {
  position: absolute; left: 50%; bottom: 78px;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(6, 21, 40, 0.78);
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: #E8E0CC;
  font: 500 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  opacity: 0; transition: opacity .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.liberty3d-comms.is-on { opacity: 1; }
.liberty3d-comms b { color: #E4C95B; letter-spacing: .5px; }

/* ---- full-screen hit-flash wash ---- */
.liberty3d-flash {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 7;
  mix-blend-mode: screen;
}

/* small screens: tuck comms up so the touch buttons don't cover it */
@media (max-width: 560px) {
  .liberty3d-comms { bottom: 120px; font-size: 13px; }
  .liberty3d-reticle { width: 52px; height: 52px; }
}