/* arg/client/viewer.css */
.arg-viewer { position: fixed; inset: 0; z-index: 9000; background: #000; }
.arg-feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arg-layer { position: absolute; inset: 0; pointer-events: none; }
.arg-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.arg-plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: 0.8rem 1rem; max-width: 92vw; overflow-x: auto;
  font: 16px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre; color: #cfe9d8; background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(140, 220, 180, 0.5);
}

.arg-reference { position: absolute; inset: 0; pointer-events: none; }
.arg-reference img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.arg-hint {
  position: absolute; left: 0; right: 0; bottom: 6rem; margin: 0; padding: 0 1rem;
  text-align: center; color: #fff; text-shadow: 0 1px 3px #000; font-size: 16px;
}

.arg-hud {
  position: absolute; left: 0; right: 0; top: 0; padding: 0.75rem 1rem;
  display: flex; justify-content: space-between; gap: 1rem;
  color: #fff; text-shadow: 0 1px 3px #000; font-size: 16px;
}

.arg-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display: flex; gap: 0.75rem; justify-content: center;
}
/* 44px minimum touch target, as everywhere else in this game. */
.arg-controls button {
  min-height: 44px; min-width: 44px; padding: 0 1.25rem; font-size: 16px;
  background: #101a15; color: #cfe9d8; border: 1px solid #4d7a63;
}
.arg-health {
  position: absolute; z-index: 2; left: 0.75rem; right: 0.75rem; bottom: 5.5rem;
  max-width: 23rem; padding: 0.75rem; color: #cfe9d8;
  background: rgba(6, 16, 11, 0.94); border: 1px solid #4d7a63;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.arg-health[hidden] { display: none !important; }
.arg-health-readout { margin: 0 0 0.6rem; white-space: pre-wrap; }
.arg-health button {
  min-height: 44px; padding: 0 0.75rem; color: #cfe9d8;
  background: #101a15; border: 1px solid #4d7a63;
}

.arg-portal {
  transition: opacity 120ms linear;
  /* A hole, not a photograph taped over the camera. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 76%);
}
.arg-eras {
  position: absolute; left: 0; right: 0; bottom: 5rem;
  display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; padding: 0 1rem;
}
.arg-eras button {
  min-height: 44px; padding: 0 1rem; font-size: 16px;
  background: rgba(0, 0, 0, 0.66); color: #9fd9bd; border: 1px solid #4d7a63;
}
.arg-eras button.on { background: #cfe9d8; color: #101a15; }

/* A 6px hairline over a live camera feed is invisible at zero signal, which is
   exactly when somebody needs to know the thing is alive. Taller, with a glow
   on the fill so movement reads at arm's length in a bright corridor. */
.arg-meter {
  position: absolute; left: 1rem; right: 1rem; bottom: 8rem; height: 12px;
  background: rgba(0, 0, 0, 0.6); border: 1px solid #4d7a63; border-radius: 2px;
}
.arg-meter i {
  display: block; height: 100%; width: 0; background: #7fe3b0;
  box-shadow: 0 0 10px #7fe3b0; transition: width 160ms linear;
}

/*
 * The creature, standing in the room.
 *
 * left/top are written every frame from the angle between where the phone is
 * pointing and where the creature is, so it holds still in the world while the
 * view moves past it. NO transition on position: the phone is already the
 * smoothing, and easing a tracked object makes it swim.
 */
.arg-ghost {
  position: absolute;
  /* Defaults matter: with no left/top an absolutely positioned element sits at
     the container's top-left, and translate(-50%,-50%) then hangs it half off
     the corner. place() overwrites both every frame — this is what shows if it
     ever does not. */
  left: 50%; top: 50%;
  width: 46%; max-width: 280px; height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(127, 227, 176, 0.55));
  animation: arg-bob 3.2s ease-in-out infinite;
  pointer-events: none;
  will-change: left, top;
}
.arg-ghost.found { filter: drop-shadow(0 0 26px rgba(127, 227, 176, 0.95)); }
@keyframes arg-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .arg-ghost { animation: none; }
}

/* The player's own heading. Never the target's. */
.arg-heading {
  margin-left: auto; padding: 0 0.6rem; font-variant-numeric: tabular-nums;
  color: #9fd9bd; opacity: 0.85;
}
.arg-blip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.8rem 1rem; font-size: 16px; color: #101a15; background: #7fe3b0;
}

/* The revealed path has no camera behind it, so it needs its own ground. */
.arg-viewer:has(.arg-revealed-note) { background: #06100b; }
.arg-revealed-note {
  position: relative; margin: 1rem auto; max-width: 34rem; padding: 0 1rem;
  text-align: center; font-size: 16px; color: #9fd9bd;
}
.arg-viewer .arg-layer:has(.arg-revealed-note) {
  pointer-events: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem;
}
.arg-layer:has(.arg-revealed-note) .arg-plate { position: relative; left: auto; top: auto; transform: none; }

/* MindAR supplies its own feed for object entries; the shell's would sit behind
   it doing nothing but holding a second camera stream open. */
.arg-viewer.arg-object > .arg-feed { display: none; }
.arg-viewer.arg-object .arg-layer { pointer-events: auto; }
.arg-viewer.arg-object .arg-layer a-scene,
.arg-viewer.arg-object .arg-layer .a-canvas { position: absolute !important; inset: 0 !important; }

/* The reveal. Deliberately not a toast: this is the thing the player walked
   across a hotel for, and it should hold the screen until they dismiss it. */
.arg-creature {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(78vw, 22rem); padding: 1rem; text-align: center;
  background: rgba(6, 16, 11, 0.92); border: 1px solid #4d7a63; color: #cfe9d8;
}
.arg-creature img { width: 60%; height: auto; margin-bottom: 0.5rem; }
.arg-creature b { display: block; font-size: 18px; letter-spacing: 1px; }
.arg-creature p { margin: 0.4rem 0 0; font-size: 15px; }
.arg-creature.caught { border-color: #7fe3b0; }
.arg-creature.taken { border-color: #e3b07f; }