@media (max-width: 600px) {
  html, body, .world { height: 100%; min-height: 0; overflow: hidden; }
  header { height: 43px; padding: 3px 9px; }
  main { height: calc(100dvh - 43px); min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 4px 7px calc(5px + env(safe-area-inset-bottom)); overflow: hidden; }
  .paper { flex: none; width: 100%; padding: 5px; border-width: 5px; }
  .paper-head { margin-bottom: 2px; gap: 4px; font-size: 10px; }
  .paper-head #kind { max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .paper-head #progress, .paper-head #timer { flex: none; white-space: nowrap; }
  #grid { width: min(100%, calc(100dvh - 365px), calc(100vw - 24px)); }
  .entry { margin-top: 4px; padding: 5px; }
  .entry #active-clue { min-height: 0; font-size: 12px; }
  .entry label { margin: 3px 0 1px; font-size: 10px; }
  .entry input { min-height: 40px; padding: 4px 7px; }
  .entry p { display: none; }
  aside { width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
  .brand, .record, .settings { display: none; }
  .clues { flex: 1; min-height: 0; max-height: min(18dvh, 150px); margin: 0; overflow-y: auto; }
  .clues > div { padding: 3px; border-width: 2px; }
  .clues h2 { font-size: 13px; }
  .clue { font-size: 11px; padding: 4px; }
  .tools { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .tools button { min-height: 44px; padding: 3px; font-size: 11px; }
  .tools button:last-child { grid-column: auto; }
  .overlay { align-items: start; }
  .overlay .card { margin: auto; max-height: calc(100dvh - 16px); overflow-y: auto; }
  .world:has(#answer:focus) { overflow-y: auto; scroll-padding-bottom: 42dvh; }
  .world:has(#answer:focus) main { height: auto; min-height: calc(100dvh - 43px); overflow: visible; padding-bottom: 42dvh; }
}
@media (max-width: 600px) and (max-height: 500px) {
  .world { overflow-y: auto; }
  main { height: auto; min-height: calc(100dvh - 43px); overflow: visible; }
  #grid { width: min(100%, max(180px, 42dvh)); }
  .clues { flex: none; max-height: 110px; }
}