/* BOUNCER DOOM: deliberately self-contained first-person takeover layer. */
body.fps-active {
  background: #050505 !important;
  filter: none !important;
  cursor: crosshair;
}

body.fps-active > .bouncer,
body.fps-active > #ghostFace,
body.fps-active > #noiseOverlay,
body.fps-active > #blackout,
body.fps-active > #flashText,
body.fps-active > #statusHint {
  visibility: hidden !important;
}

#fpsTakeover {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#fpsTakeover.active {
  display: block;
}

#fpsCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
  cursor: crosshair;
}

#fpsVignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.18) 66%, rgba(0,0,0,0.65) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: normal;
}

#fpsDamageFlash,
#fpsMuzzleFlash,
#fpsBossFlash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
}

#fpsDamageFlash {
  background: rgba(160, 0, 0, 0.48);
  transition: opacity 100ms linear;
}

#fpsDamageFlash.active {
  opacity: 1;
}

#fpsMuzzleFlash {
  background: radial-gradient(circle at 50% 75%, rgba(255,255,255,0.78), rgba(255,228,117,0.32) 18%, transparent 44%);
}

#fpsMuzzleFlash.active {
  animation: fpsMuzzle 90ms linear both;
}

#fpsBossFlash {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#fpsBossFlash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

#fpsBossFlash.active {
  animation: fpsBossFlashAnim 520ms steps(2, end) both;
}

#fpsHUD {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  text-shadow: 2px 2px 0 #000, 0 0 5px #000;
}

#fpsTopLeft,
#fpsTopRight {
  position: absolute;
  top: 14px;
  font-weight: 700;
  letter-spacing: 0.045em;
  font-size: clamp(12px, 1.4vw, 18px);
}

#fpsTopLeft { left: 16px; }
#fpsTopRight { right: 16px; text-align: right; }

#fpsHealth {
  color: #fff;
}

#fpsShinyCount {
  color: #fff3a4;
}

#fpsBossBarWrap {
  position: absolute;
  left: 50%;
  top: 18px;
  width: min(540px, 62vw);
  transform: translateX(-50%);
  display: none;
  text-align: center;
}

#fpsBossBarWrap.active { display: block; }

#fpsBossName {
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 5px;
  font-size: clamp(12px, 1.6vw, 19px);
}

#fpsBossBar {
  height: 18px;
  border: 2px solid #fff;
  background: rgba(0,0,0,0.72);
  box-shadow: 0 0 0 2px #000;
}

#fpsBossBarFill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #cf1111, #ff5b1a, #ffcc39);
  transform-origin: left center;
}

#fpsCrosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

#fpsCrosshair::before,
#fpsCrosshair::after {
  content: "";
  position: absolute;
  background: #fff;
  box-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

#fpsCrosshair::before {
  left: 13px;
  top: 2px;
  width: 2px;
  height: 24px;
}

#fpsCrosshair::after {
  left: 2px;
  top: 13px;
  width: 24px;
  height: 2px;
}

#fpsMessage {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(860px, 88vw);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: clamp(22px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.02;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms linear;
}

#fpsMessage small {
  display: block;
  margin-top: 12px;
  font-size: clamp(11px, 1.5vw, 17px);
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255,255,255,0.84);
}

#fpsMessage.active { opacity: 1; }

#fpsHint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.72);
  max-width: 92vw;
}

#fpsTouchControls {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: none;
  pointer-events: none;
}

.fpsTouchPad,
.fpsTouchActions {
  position: absolute;
  bottom: 18px;
  display: grid;
  gap: 7px;
  pointer-events: auto;
}

.fpsTouchPad {
  left: 14px;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 52px);
}

.fpsTouchActions {
  right: 14px;
  grid-template-columns: repeat(2, 64px);
  grid-template-rows: repeat(2, 52px);
}

.fpsTouchButton {
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.56);
  color: #fff;
  font: 700 18px/1 "Courier New", monospace;
  border-radius: 8px;
  min-width: 48px;
  min-height: 48px;
  touch-action: none;
}

.fpsTouchButton:active {
  background: rgba(255,255,255,0.24);
}

#fpsMoveForward { grid-column: 2; grid-row: 1; }
#fpsMoveLeft { grid-column: 1; grid-row: 2; }
#fpsMoveBack { grid-column: 2; grid-row: 2; }
#fpsMoveRight { grid-column: 3; grid-row: 2; }
#fpsTurnLeft { grid-column: 1; grid-row: 1; }
#fpsTurnRight { grid-column: 2; grid-row: 1; }
#fpsShoot { grid-column: 1 / span 2; grid-row: 2; font-size: 13px; }

@media (hover: none), (pointer: coarse) {
  #fpsTouchControls { display: block; }
  #fpsHint { bottom: 132px; }
}

@keyframes fpsMuzzle {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes fpsBossFlashAnim {
  0% { opacity: 0; filter: contrast(1.1); transform: translate(0,0); }
  15% { opacity: 1; filter: contrast(1.7) brightness(1.2); transform: translate(-7px, 4px); }
  35% { opacity: 1; transform: translate(8px, -5px) scale(1.03); }
  58% { opacity: 0.82; transform: translate(-4px, 6px) scale(1.05); }
  100% { opacity: 0; transform: translate(0,0) scale(1.07); }
}

/* v8.1 mobile polish: larger safe-area-aware controls and HUD spacing. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .fpsTouchPad,
  .fpsTouchActions {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .fpsTouchPad {
    left: max(10px, env(safe-area-inset-left, 0px));
  }

  .fpsTouchActions {
    right: max(10px, env(safe-area-inset-right, 0px));
  }

  .fpsTouchButton {
    min-width: 56px;
    min-height: 56px;
    font-size: 20px;
    border-width: 2px;
    -webkit-tap-highlight-color: transparent;
  }

  #fpsHint {
    bottom: calc(145px + env(safe-area-inset-bottom, 0px));
    width: 92vw;
    font-size: 11px;
  }

  #fpsTopLeft {
    left: max(10px, env(safe-area-inset-left, 0px));
    top: max(10px, env(safe-area-inset-top, 0px));
  }

  #fpsTopRight {
    right: max(10px, env(safe-area-inset-right, 0px));
    top: max(10px, env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 430px) {
  .fpsTouchPad {
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(2, 48px);
    gap: 5px;
  }

  .fpsTouchActions {
    grid-template-columns: repeat(2, 58px);
    grid-template-rows: repeat(2, 48px);
    gap: 5px;
  }

  .fpsTouchButton {
    min-width: 46px;
    min-height: 46px;
    font-size: 17px;
  }

  #fpsShoot {
    font-size: 12px;
  }

  #fpsHint {
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
}

/* v9: exaggerated "RTX" screen-space polish. This is intentionally fake browser-side
   lighting (bloom/reflections/fog), not hardware ray tracing. */
#fpsTakeover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.055), transparent 24%),
    radial-gradient(circle at 16% 30%, rgba(102,82,255,.10), transparent 26%),
    radial-gradient(circle at 86% 35%, rgba(62,207,255,.08), transparent 25%);
  mix-blend-mode: screen;
  filter: blur(8px);
  opacity: .72;
}

#fpsTakeover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.025) 46%, transparent 57%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

#fpsCanvas {
  filter: saturate(1.16) contrast(1.06);
}

#fpsVignette {
  background:
    radial-gradient(circle at center, transparent 27%, rgba(0,0,0,.12) 59%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.02), transparent 35%, rgba(0,0,0,.20)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

#fpsBossBar {
  box-shadow: 0 0 0 2px #000, 0 0 22px rgba(255,68,35,.45);
}

#fpsVideoFallback {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  width: min(720px, 88vw);
  box-sizing: border-box;
  padding: 15px 18px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 12px;
  background: rgba(10,10,12,.92);
  color: #fff;
  font: 900 clamp(12px, 2vw, 18px)/1.25 "Courier New", monospace;
  text-align: center;
  text-decoration: none;
  letter-spacing: .05em;
  box-shadow: 0 0 28px rgba(255,255,255,.18);
  pointer-events: auto;
}

#fpsVideoFallback:focus-visible,
#fpsVideoFallback:hover {
  outline: 3px solid #fff;
  background: #27272e;
}

.gameExitButton {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 40;
  min-width: 74px;
  min-height: 42px;
  padding: 8px 12px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 10px;
  background: rgba(8,8,12,.78);
  color: #fff;
  font: 900 12px/1 system-ui, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.gameExitButton:hover,
.gameExitButton:focus-visible {
  background: rgba(85,15,25,.92);
  border-color: #fff;
  outline: 3px solid rgba(255,255,255,.2);
}