* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden;

  background: #000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

button,
input {
  font: inherit;
}

#app {
  position: fixed;

  inset: 0;

  overflow: hidden;

  background: #000;
}


/* ============================================================
   CAMERA
   ============================================================ */

#camera {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #000;
}


/* ============================================================
   DRAW CANVAS
   ============================================================ */

#view {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: 4;
}


/* ============================================================
   INTERNAL CANVASES
   ============================================================ */

#analysis,
#cropCanvas {
  display: none;
}


/* ============================================================
   OBJECT OVERLAYS
   ============================================================ */

.object-overlay {
  position: absolute;

  z-index: 8;

  left: 0;
  top: 0;

  width: 100px;
  height: 100px;

  pointer-events: none;

  opacity: 1;
  visibility: visible;

  transform-origin: top left;

  will-change:
    left,
    top,
    width,
    height,
    opacity;

  transition:
    left 0.5s ease,
    top 0.5s ease,
    width 1s ease,
    height 1s ease,
    opacity 0.15s ease;
}

.object-overlay {
  position: absolute;
  overflow: visible;
}

.object-overlay > img:first-child {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.object-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.object-overlay.no-motion {
  transition: none !important;
}

.object-overlay img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
}



.object-overlay .wave {
  position: absolute;

  z-index: 1;

  width: 80% !important;
  height: auto !important;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%)
    translateY(90px);

  object-fit: contain;

  pointer-events: none;
}


/* ============================================================
   START SCREEN
   ============================================================ */

#startScreen {
  position: absolute;

  z-index: 20;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 24px;

  background: rgba(0, 0, 0, 0.65);
}

#startScreen.hidden {
  display: none;
}

.loading-overlay {
  position: absolute;

  inset: 0;

  z-index: 30;

  display: grid;

  place-items: center;

  padding: 24px;

  background: rgba(0, 0, 0, 0.56);

  backdrop-filter: blur(3px);

  pointer-events: auto;
}

.loading-overlay.hidden {
  display: none;
}

.loading-card {
  min-width: 220px;

  padding: 18px 22px;

  border-radius: 14px;

  background: rgba(20, 20, 20, 0.92);

  color: #fff;

  display: flex;

  align-items: center;

  gap: 12px;
}

.loading-card p {
  margin: 0;

  font-weight: 600;

  letter-spacing: 0.2px;
}

.spinner {
  width: 24px;
  height: 24px;

  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;

  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.card {
  width: min(
    440px,
    100%
  );

  padding: 26px;

  border-radius: 20px;

  color: #fff;

  text-align: center;

  background: rgba(
    20,
    20,
    20,
    0.94
  );
}

.card h1 {
  margin:
    0
    0
    12px;

  font-size: 28px;
}

.card p {
  margin:
    0
    0
    22px;

  line-height: 1.45;

  opacity: 0.82;
}


/* ============================================================
   BUTTONS
   ============================================================ */

button {
  appearance: none;

  border: 0;

  border-radius: 999px;

  padding:
    14px
    22px;

  font-weight: 700;

  cursor: pointer;
}


/* ============================================================
   HUD
   ============================================================ */

#hud {
  position: absolute;

  z-index: 10;

  left: 12px;
  right: 12px;

  bottom: max(
    12px,
    env(safe-area-inset-bottom)
  );

  display: grid;

  gap: 8px;

  color: #fff;
}

.status-row {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

.pill,
.control,
.toggle,
.classification {
  border-radius: 11px;

  background: rgba(
    0,
    0,
    0,
    0.58
  );

  backdrop-filter: blur(8px);
}

.pill {
  width: fit-content;

  padding:
    8px
    11px;
}

.classification {
  width: fit-content;

  padding:
    10px
    13px;

  display: flex;

  gap: 9px;

  align-items: baseline;
}

.classification strong {
  font-size: 23px;
}

.classification.hidden {
  display: none;
}

.controls {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;
}

.control,
.toggle {
  padding:
    8px
    11px;
}

.control {
  display: flex;

  align-items: center;

  gap: 10px;
}

.control input {
  width: 145px;
}

.toggle {
  display: flex;

  align-items: center;

  gap: 7px;
}

.small-button {
  padding:
    9px
    13px;

  border-radius: 10px;
}

.small-button:disabled {
  opacity: 0.45;

  cursor: default;
}

#sensitivityControl,
#debugControl {
  display: none;
}

/* ============================================================
   CAMERA RECOGNITION EFFECT
   ============================================================ */

.camera-recognition-effect {
  position: absolute;

  inset: 0;

  z-index: 6;

  pointer-events: none;

  /*
   * Aclara la imagen.
   */
  background:
    rgba(255, 255, 255, 0.28);

  /*
   * Blur + un pequeño aumento de luminosidad.
   */
  -webkit-backdrop-filter:
    blur(12px)
    brightness(1.18);

  backdrop-filter:
    blur(12px)
    brightness(1.18);

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.camera-recognition-effect.hidden {
  opacity: 0;
  visibility: hidden;
}