/* The Lab styles. Reuses the photobooth tokens + app.css base, the fashion sheet
   (pack cards, totals, result rows) and the riddle sheet (dials, chips, reveal cards,
   timers) — all linked in index.html. This file adds only what's lab-specific: the
   problem card, the mode badge, and the shared scratchpad overlay. */

.start-tagline { color: var(--ink-soft); font-size: 15px; text-align: center; max-width: 38ch; }
.presence-text { color: var(--ink-soft); font-size: 14px; }

/* ============ PROBLEM ============ */
.scene.lb-problem { gap: var(--s2); }
.lb-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-raised);
}
.lb-mode {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 6px 16px;
  border: 1px dashed var(--line); border-radius: 999px;
}
.lb-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 3vw, 23px);
  line-height: 1.5; letter-spacing: -0.01em;
  text-align: center; margin: 0; max-width: 56ch;
  padding: var(--s2) var(--s3);
  background: var(--paper-raised);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.lb-answer { width: 100%; max-width: 560px; display: flex; justify-content: center; }
.lb-opts { grid-template-columns: 1fr 1fr; }
.lb-actions { display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; justify-content: center; }
.lb-pad-btn { font-size: 14px; }

/* co-op solution card spans the row */
.lb-answers--coop { grid-template-columns: 1fr; max-width: 480px; }
.lb-team-card { border-color: var(--pink-tint); border-left: 4px solid var(--pink); border-right: 4px solid var(--blue); }

/* ============ shared scratchpad overlay ============ */
.pad {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: min(58vh, 480px);
  z-index: 60;
  display: flex; flex-direction: column;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--paper-raised);
  border-top: 2px solid var(--ink);
  box-shadow: 0 -12px 40px rgba(23, 24, 28, 0.18);
  animation: pad-up 240ms cubic-bezier(.2,1,.4,1) both;
}
.pad.is-hidden { display: none; }
@keyframes pad-up { from { transform: translateY(100%); } }
.pad-bar {
  display: flex; align-items: center; gap: var(--s1);
  padding: 8px 14px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.pad-title { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); margin-right: auto; }
.pad-clear, .pad-close {
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px;
  padding: 4px 14px;
  color: var(--ink-soft);
}
.pad-clear:hover, .pad-close:hover { color: var(--ink); border-color: var(--ink-soft); }
.pad-canvas {
  flex: 1;
  width: 100%;
  touch-action: none;   /* the pad IS the gesture surface — no scroll fights */
  cursor: crosshair;
}

/* keep the pad from covering the lock button on tiny screens: the scenes scroll */
@media (max-width: 560px) {
  .pad { height: 52vh; }
  .lb-opts { grid-template-columns: 1fr; }
}