@media (max-width: 760px) {
  :root { --orb-size: min(78vw, 430px); }
  .topbar { align-items: flex-start; padding-inline: 14px; }
  .brand img { width: clamp(145px, 42vw, 230px); }
  .control-label { display: none; }
  .icon-button { width: 42px; justify-content: center; padding: 8px; }
  .experience { padding-inline: 12px; padding-top: 96px; grid-template-rows: auto 1fr auto; }
  .eyebrow { letter-spacing: .22em; }
  .intro h1 { font-size: clamp(2.2rem, 12vw, 4.2rem); }
  .instruction { max-width: 90%; font-size: .9rem; }
  .frog-stage { min-height: calc(var(--orb-size) + 70px); }
  .answer-overlay { width: 62%; }
  .answer-text { font-size: clamp(.7rem, 3.4vw, 1rem); }
  .answer-text.is-long { font-size: clamp(.58rem, 2.6vw, .78rem); }
  .answer-text.is-very-long { font-size: clamp(.51rem, 2.15vw, .68rem); }
  .energy-panel { bottom: 2px; }
  .footer { justify-content: center; }
  .footer span:first-child { display: none; }
}

@media (max-height: 720px) and (min-width: 761px) {
  :root { --orb-size: min(43vh, 390px); }
  .experience { padding-top: 88px; padding-bottom: 60px; }
  .intro h1 { font-size: clamp(2rem, 7vh, 4rem); }
  .instruction { margin-top: 6px; }
  .frog-stage { min-height: calc(var(--orb-size) + 56px); }
}

@media (max-width: 420px) {
  :root { --orb-size: min(82vw, 350px); }
  .experience { padding-top: 88px; }
  .brand img { width: 142px; }
  .controls { gap: 5px; }
  .icon-button { width: 38px; min-height: 38px; }
  .primary-button, .secondary-button { min-height: 46px; padding: 11px 18px; font-size: .83rem; }
  .footer { font-size: .6rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
  :root { --orb-size: min(58vh, 310px); }
  .experience { width: 100%; grid-template-columns: .85fr 1.25fr .7fr; grid-template-rows: 1fr; padding: 72px 16px 44px; gap: 8px; }
  .intro { text-align: left; }
  .intro h1 { font-size: clamp(2rem, 8vh, 3.2rem); }
  .instruction { margin-left: 0; }
  .frog-stage { min-height: calc(var(--orb-size) + 34px); }
  .action-panel { align-content: center; }
  .status-text { max-width: 180px; }
}

/* V6 performance safeguards: preserve the visual design while reducing
   expensive blur and shadow rasterization on smaller displays. */
@media (max-width: 700px) {
  .noise-layer { opacity: 0.055; }
  .frog-orb { filter: drop-shadow(0 24px 30px rgba(0,0,0,.58)); }
  .sphere-highlight { filter: blur(5px); }
  .frog-shadow { filter: blur(12px); }
  .icon-button { backdrop-filter: blur(7px); }
}