/* ======== PHYSICS LAB ========
 * Only what is NEW for physics lives here. The lesson player chrome reuses
 * the shared .sci-les-* classes from science-styles.css, the same way the
 * math lesson does (see the note in math-lesson-views.js). */

/* ---- lab home ---- */
.phys-home { padding: 12px 16px 32px; max-width: 720px; margin: 0 auto; }
.phys-hero {
  display: flex; align-items: center; gap: 14px;
  background: var(--color-surface-2, #f1f5f9);
  border-radius: 16px; padding: 16px; margin-bottom: 18px;
}
.phys-hero-emoji { font-size: 2.6rem; }
.phys-hero h2 { margin: 0 0 4px; font-family: "Baloo 2", sans-serif; }
.phys-hero p { margin: 0; opacity: .8; font-size: .92em; }

.phys-tier { margin-bottom: 20px; }
.phys-tier h3 { margin: 0 0 10px; font-family: "Baloo 2", sans-serif; }
.phys-tier-locked { opacity: .55; }
.phys-lock { font-size: .7em; font-weight: 600; opacity: .8; }

.phys-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-surface, #fff);
  border: 2px solid var(--color-border, #e2e8f0);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.phys-card-done { border-color: #5fb56a; }
.phys-card-emoji { font-size: 2rem; }
/* A lesson card icon drawn as a sprite instead of an emoji. Sized to fill the
   emoji's 2rem line so a card with a missing sprite (emoji fallback) still
   lines up with its neighbours. */
.phys-card-px {
  width: 2.4rem; height: 2.4rem;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: middle;
  max-width: none;
}
.phys-card-body { flex: 1; min-width: 0; }
.phys-card-body h4 { margin: 0 0 2px; }
.phys-card-body p { margin: 0; font-size: .85em; opacity: .75; }
.phys-card-go { white-space: nowrap; }
.phys-card-lock { font-size: 1.3rem; }

/* ---- the sim stage ---- */
.phys-les-stage-sim { cursor: default; }
.phys-sim { width: 100%; padding: 6px 4px 2px; }
.phys-sim-canvas {
  display: block; width: 100%;
  /* the drag must drive the sim, never scroll the lesson underneath */
  touch-action: none;
  border-radius: 10px;
}
.phys-sim-goals {
  display: flex; gap: 14px; justify-content: center;
  margin: 6px 0 2px; font-size: .82em; font-weight: 700;
}
.phys-sim-goal { opacity: .55; }
.phys-sim-goal.done { opacity: 1; color: #2e8b3d; }

.phys-sim-ctls {
  display: flex; gap: 16px; justify-content: center;
  padding: 4px 8px 6px;
}
.phys-sim-ctl {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .8em; font-weight: 700; flex: 1; max-width: 220px;
}
.phys-sim-ctl input[type="range"] {
  width: 100%;
  touch-action: none;   /* the slider owns its drag on touch */
  accent-color: #3898e0;
  cursor: pointer;
  /* a fatter hit target for small fingers */
  height: 28px;
}

/* The ramp's floor picker: four fat, tappable surface buttons. */
.phys-ramp-surfaces { gap: 8px; flex-wrap: wrap; }
.phys-ramp-btn {
  flex: 1; min-width: 72px; max-width: 130px;
  padding: 8px 6px;
  font: inherit; font-size: .82em; font-weight: 700;
  border: 2px solid var(--color-border, #d8cfc6);
  border-radius: 10px;
  background: var(--color-surface-raised, #fff);
  color: var(--color-text);
  cursor: pointer;
}
.phys-ramp-btn.active {
  border-color: #3898e0;
  background: rgba(56, 152, 224, 0.12);
}

/* ======== TEST YOURSELF + PREDICT ========
   The quiz screen reuses the shared .sci-quiz-* chrome from science-styles.css,
   so only the physics-specific bits live here. */
.phys-quiz-tier .phys-quiz-blurb {
  margin: -4px 0 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.phys-quiz-emoji { font-size: 1.9rem; line-height: 1; }
.phys-quiz-next { margin-top: 12px; width: 100%; }
.phys-quiz-rewatch {
  display: block;
  margin: 10px 0 0;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.phys-quiz-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* Predict-before-you-play. Deliberately NOT styled like the verdict box: this
   is the question, and it appears while the machine is still covered up. */
.sci-les-predict-ask {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent, #f5a524) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #f5a524) 55%, transparent);
  font-weight: 600;
  text-align: center;
}
.sci-les-predict-chip {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* Doctor Dynamo on the home hero.
   .phys-hero is a flex row, and its emoji slot could shrink: with a portrait
   image in it she was squeezed from the declared 68px down to 39px, and
   narrower still on a small screen. flex: 0 0 auto is what stops that.
   Height-driven with width auto, so she keeps her own proportions instead of
   being letterboxed into a square. Pixel art must never be smoothed. */
.phys-hero-emoji { flex: 0 0 auto; }
.phys-hero-img {
  height: 68px;
  width: auto;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}