/* Fit every game screen on one phone screen, without scrolling.
   Spacing follows the viewport height; shorter screens get a compact layout.
   public/js/lib/fit.js shrinks the text slightly if a screen still overflows.
   The leaderboard (.screen.scrolls) is the only screen that scrolls. */

.app {
  padding-top: calc(clamp(10px, 2.4dvh, 20px) + var(--safe-top));
  padding-bottom: calc(clamp(10px, 2.4dvh, 20px) + var(--safe-bottom));
}
.screen { gap: clamp(8px, 2.2dvh, 20px); }

/* Join */
.hero h1 { font-size: clamp(2rem, min(11vw, 7dvh), 3.2rem); margin-top: clamp(4px, 1dvh, 10px); }
.hero p { margin-top: clamp(6px, 1.4dvh, 14px); }
.join-form { gap: clamp(10px, 2dvh, 18px); }

/* Question */
.q-text { font-size: clamp(1.15rem, min(6.6vw, 4.2dvh), 1.9rem); }
.options { gap: clamp(6px, 1.4dvh, 12px); }
.option { min-height: clamp(46px, 8dvh, 64px); padding-top: clamp(6px, 1.2dvh, 12px); padding-bottom: clamp(6px, 1.2dvh, 12px); }
.timer { font-size: clamp(2rem, 5.6dvh, 2.6rem); }
.player-bar { padding-top: clamp(8px, 1.6dvh, 14px); }

/* Feedback */
.verdict { padding: clamp(8px, 1.8dvh, 16px) 16px; gap: 12px; }
.verdict .v-icon { width: clamp(36px, 6dvh, 48px); height: clamp(36px, 6dvh, 48px); }
.verdict h2 { font-size: clamp(1.4rem, 4.2dvh, 1.9rem); }
.option.fb { min-height: clamp(42px, 7dvh, 56px); padding-top: clamp(4px, 1dvh, 10px); padding-bottom: clamp(4px, 1dvh, 10px); }
.why { padding: clamp(8px, 1.8dvh, 16px) 16px; gap: 4px; }
.why p { line-height: 1.35; }
.fb-foot { gap: clamp(6px, 1.4dvh, 12px); }
.fb-rank .big { font-size: clamp(1.7rem, 4.6dvh, 2.3rem); }

/* Results */
.res-rank .big { font-size: clamp(3.4rem, min(26vw, 13dvh), 7rem); }
.by-value li { padding: clamp(5px, 1.3dvh, 12px) 0; }

/* Onboarding: shorter screens get one-line step cards. */
@media (max-height: 900px) {
  .onboard .intro { font-size: 1rem; margin-top: 6px; }
  .steps { gap: 8px; }
  .step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
  .step p { display: none; }
  .step-icon { flex: none; width: 30px; height: 30px; }
  .step-icon svg { width: 17px; height: 17px; }
  .step h2 { font-size: 0.92rem; }
  .prenotes { padding: 10px 14px; gap: 6px; font-size: 0.9rem; }
}
@media (max-height: 640px) {
  .onboard h1 { font-size: clamp(1.6rem, 7.5vw, 2rem); }
  .onboard .intro { display: none; }
  .fb-question { font-size: 1rem; }
  .why p { font-size: 0.95rem; }
}
@media (max-height: 600px) {
  .onboard .vd-logo { height: 1.3rem; }
  .onboard h1 { margin-top: 2px; }
  .prenotes li:last-child { display: none; }
  .step { padding: 7px 10px; gap: 8px; }
  .step-icon { width: 26px; height: 26px; }
  .step h2 { font-size: 0.85rem; }
  .prenotes { padding: 8px 12px; gap: 4px; font-size: 0.82rem; line-height: 1.3; }
  .onboard-actions { gap: 2px; }
}