/* ============================================
   BOARD — WebGL 3D room canvas
   ============================================ */

.board-page {
  width: 100vw; height: 100vh;
  position: relative; overflow: hidden;
  background: var(--white);
}

/* Three.js renders its <canvas> into here */
.room-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  touch-action: none;        /* let pointer drag work on touch */
  cursor: grab;
}
.room-canvas:active { cursor: grabbing; }
.room-canvas canvas { display: block; }

/* Drag hint */
.drag-hint {
  position: absolute; right: 22px; bottom: 90px;
  z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--ink-3); font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  animation: hintPulse 2.5s ease infinite; pointer-events: none;
}
.drag-hint-line {
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, var(--ink-3), transparent);
}
@keyframes hintPulse {
  0%,100% { opacity: 0.25; } 50% { opacity: 0.6; }
}


/* Hover tag — follows the cursor when hovering a sticker */
.sticker-tag {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1000;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,0.5);
  border: none;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 4px 18px rgba(60,55,50,0.12);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.1px;
  opacity: 0;
  transform: translate(-50%, -100%) translate(0, -14px);
  transition: opacity 0.12s ease;
}
.sticker-tag.visible { opacity: 1; }
/* ── Sliding two-panel track ── */
.app-track {
  position: fixed; top: 0; left: 0;
  width: 200vw; height: 100vh;
  display: flex;
  transform: translateX(0);
  transition: transform 0.65s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.app-track.show-cv { transform: translateX(-100vw); }

.app-panel {
  width: 100vw; height: 100vh;
  flex-shrink: 0;
  position: relative;
}
.app-panel-cv {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
}