/* ================================================================
   DRESSER DRAWER GAME — style.css
   Complete visual styles for the full app
   ================================================================ */


/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  font-family: Georgia, 'Times New Roman', serif;
}


/* ── Page Background ──────────────────────────────────────────── */
#page-bg {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a120a;
}


/* ── Game Area — 16:9 Frame ───────────────────────────────────── */
/* Maintains a perfect 16:9 ratio at any screen size.
   All game elements are positioned absolutely inside here. */
#game-area {
  position: relative;
  overflow: hidden;

  /* 16:9 sizing: take the smaller of full-width or 16/9 × full-height */
  width:  min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);

  background-color: #d8cfc0;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 20px 60px rgba(0,0,0,0.7);
}


/* ── Drawer Background Image ─────────────────────────────────── */
#drawer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}


/* ── Draggable Objects ────────────────────────────────────────── */
/* All objects are positioned absolutely within #game-area.
   transform: translate(-50%, -50%) means the left/top % refers
   to the CENTER of each object, not its top-left corner.
   This makes positioning feel intuitive. */
.draggable-object {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* Sit above background */
  z-index: 10;
  /* Smooth "lift" animation when grabbed */
  transition: filter 0.15s ease;
}

/* The image inside each object tile */
.draggable-object img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* Soft shadow for depth against the drawer */
  filter: drop-shadow(2px 5px 8px rgba(0,0,0,0.22));
}

/* ── Per-object sizes ─────────────────────────────────────────── */
/* Width as % of game area. Height is always auto (keeps ratio). */
#obj-ring       { width: 7.5%; }
#obj-brush      { width: 22%;  }
#obj-sunglasses { width: 27%;  }
#obj-perfume    { width: 11%;  }
#obj-envelope   { width: 20%;  }
#obj-scrunchie  { width: 15%;  }
#obj-lipstick   { width: 6.5%; }

/* ── Grabbed state (added by JS when pinching an object) ──────── */
.draggable-object.is-grabbed {
  cursor: grabbing;
  z-index: 50;
  /* Stronger shadow = feels lifted off the drawer surface */
  filter: drop-shadow(4px 10px 22px rgba(0,0,0,0.4)) !important;
  /* Very subtle scale-up for tactile feedback */
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.04);
  transition: filter 0.1s ease, transform 0.1s ease;
}


/* ── Hand Cursor ──────────────────────────────────────────────── */
/* The dot that follows the user's pinch point on the game area.
   Shown/hidden by JavaScript when hand is/isn't detected. */
#hand-cursor {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(200, 150, 120, 0.85);
  background: rgba(230, 180, 150, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;
  display: none;    /* hidden until hand is detected */
  transition: width 0.1s, height 0.1s, background 0.1s, border-color 0.1s;
}

/* Pinching state: cursor shrinks and turns more solid */
#hand-cursor.pinching {
  width: 14px;
  height: 14px;
  background: rgba(200, 100, 80, 0.6);
  border-color: rgba(200, 80, 60, 0.9);
}


/* ── Hint Text ────────────────────────────────────────────────── */
/* Gentle instruction shown at the bottom of the screen
   until the user's hand is first detected. */
#hint-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 250, 245, 0.85);
  color: #6a4a30;
  font-size: clamp(10px, 1.1vw, 15px);
  padding: 0.4em 1.2em;
  border-radius: 20px;
  pointer-events: none;
  z-index: 150;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  /* Gentle fade in */
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* ── Audio Hint ───────────────────────────────────────────────── */
/* Small notice shown until the user's first click unlocks audio.
   Sits at the top-left, very unobtrusive.
   Fades away when audio.js removes it. */
#audio-hint {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 200;
  background: rgba(255, 255, 255, 0.82);
  color: #5a3e28;
  font-size: clamp(9px, 0.9vw, 13px);
  font-family: Georgia, serif;
  padding: 0.35em 1em;
  border-radius: 20px;
  pointer-events: none;   /* doesn't block clicks */
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  transition: opacity 0.5s ease;
}


/* ── Reset Button ─────────────────────────────────────────────── */
/* Top-right corner. Soft white pill to match the reference. */
#reset-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 200;

  background: rgba(255, 255, 255, 0.90);
  color: #3a2a18;
  border: none;
  border-radius: 20px;
  padding: 0.45em 1.3em;
  font-size: clamp(10px, 1.05vw, 15px);
  font-family: Georgia, serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0,0,0,0.14);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

#reset-btn:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 18px rgba(0,0,0,0.2);
}

#reset-btn:active {
  transform: scale(0.96);
}


/* ── Camera Preview Box ───────────────────────────────────────── */
/* Bottom-right corner. Soft light rounded box.
   Shows the live webcam + hand tracking landmarks. */
#camera-preview-box {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 200;

  /* Width = 22% of game area; height auto-follows 4:3 ratio */
  width: 22%;
  aspect-ratio: 4 / 3;

  background: rgba(220, 215, 210, 0.95);
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* Live webcam video fills the preview box */
#webcam {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mirror so it looks like a mirror (feels natural) */
  transform: scaleX(-1);
}

/* Hand canvas sits on top of the video, same size.
   JS draws landmark dots here.
   Also mirrored to match the video. */
#hand-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);   /* mirror to match mirrored video */
  pointer-events: none;
}

/* Status label at the bottom of the preview */
#camera-status {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: clamp(6px, 0.75vw, 11px);
  font-family: Georgia, serif;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}