/* two breakpoints (860: the phone and the narrow tablet; 480: the phone held upright), touch, reduced motion */
@media (max-width: 860px) {
  /* the frame: a two-row header — brand | ♪ over nav strip | enter — and a slim footer */
  main { padding: 12px 12px 20px; }
  header.top { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand sound" "nav cta"; gap: 8px 12px; padding: 10px 12px; }
  header .left { display: contents; }
  .brand { grid-area: brand; }
  .soundbar { grid-area: sound; justify-self: end; }
  header .left a.cta { grid-area: cta; justify-self: end; white-space: nowrap; font-size: 13px; }
  /* the nav scrolls sideways inside its own row; the page never does */
  header nav { grid-area: nav; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; gap: 14px; padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { flex: none; padding: 4px 0; }
  /* the sound pill is a lone ♪: the select still opens natively, its label hides under the glyph */
  select.sound { width: 34px; height: 26px; padding: 0; color: transparent; background-image: none; margin: 0; }
  .soundbar::before { content: "♪"; position: absolute; left: 0; top: 0; width: 34px; height: 26px; line-height: 26px; text-align: center; font-size: 13px; color: var(--dim); pointer-events: none; }
  .soundbar:has(select.sound.on)::before { color: var(--gold); }
  .soundbar:has(select.sound.on) input.volume { width: 64px; }
  input.volume { transition: none; }
  footer { padding: 8px 16px 10px; font-size: 11px; }
  footer .crawl { margin: 0 -16px; width: calc(100% + 32px); }
  footer .item, footer .sep { font-size: 12px; }
  footer .advertise { display: none; }

  /* the stage: the ring alone, cards pinned, the transcript rolling beneath them as on a desk */
  .home { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); gap: 0; }
  .side-panel { display: none; }
  .bout-page > p, .bout-page > details { font-size: 12px; }
  article.bout .transcript { padding-top: 16px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 16px), transparent); }
  .transcript { gap: 12px; }
  .msg { width: 100%; max-width: 100%; padding: 4px 0 4px 10px; border-left: 2px solid var(--west); }
  .msg[data-side=west] { margin-left: 0; }
  .msg[data-side=east] { margin-right: 0; border-left: 0; border-right: 2px solid var(--east); padding: 4px 10px 4px 0; }
  .msg .body { font-size: 15px; }

  /* the tachiai: the clock row on top, the two names beneath */
  .tachiai { grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 0 0 8px; }
  .tachiai .vs { grid-column: 1 / -1; order: 0; flex-direction: row; justify-content: center; gap: 12px; min-width: 0; }
  .tachiai .name { font-size: 15px; }
  .tachiai .meta { font-size: 10px; }
  .stamp.to-east { left: 68%; } .stamp.to-west { left: 32%; }
  .stamp .hanko { padding: 8px 12px; }
  .dohyo-bg { top: 72px; }
  .shikiri .bow { gap: 12px; padding: 0 3%; }

  /* the rest of the site */
  .wgrid { grid-template-columns: repeat(2, 1fr); }
  .grid2, .cards2, .info { grid-template-columns: 1fr; }
  .info { padding: 28px 0; }
  .enter form[data-enter], .manage form[data-enter] { grid-template-columns: 1fr; padding: 16px; }
  .enter form[data-enter] > label:has(textarea), .manage form[data-enter] > label:has(textarea) { grid-column: 1; grid-row: auto; }
  .enter form[data-enter] label:has(textarea) textarea, .manage form[data-enter] label:has(textarea) textarea { min-height: 200px; }
  .banzuke-head { flex-wrap: wrap; align-items: flex-start; }
  .banzuke-head form.filter select { max-width: 100%; }
  .bout-filters select, .bout-filters input[type="search"] { flex: 1 1 45%; max-width: 100%; }
  table.mine td.moves { white-space: normal; }
  table.mine td.moves form { display: block; margin: 0 0 4px; }
  td, th { padding: 6px 8px; }
}

@media (max-width: 480px) {
  header .left a.cta .long { display: none; }
  .opt { display: none; }
  .tachiai .meta .model { display: none; }
  .prompt-top pre.prompt { font-size: 13px; }
}

@media (hover: none) {
  footer .crawl:hover .track { animation-play-state: running; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}