/* Phone layouts keep the same objects and materials, with room to read and touch. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.card-action { color: var(--ink); }
.close { min-width: 44px; min-height: 44px; flex-shrink: 0; }
.card-action,.filter { min-height: 44px; }
.acoustic-kit .kit-pedal { min-width: 44px; min-height: 44px; }
@media (min-width:601px) and (max-width:850px) {
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  :root { --readable-picture-filter: none; --picture-filter: none; }
  html[data-pixel="on"] { --readable-picture-filter: url(#pixel-screen); --picture-filter: url(#pixel-screen); }
  .wrap { width: calc(100% - 28px); }
  .header { min-height: 78px; height: auto; padding-block: 12px; gap: 8px; }
  .brand { font-size: 16px; gap: 7px; flex-shrink: 0; }
  .header-right { gap: 6px; }
  .sound { min-height: 44px; padding: 8px 10px; font-size: 12px; gap: 5px; white-space: nowrap; }
  .display-settings summary { min-height: 48px; font-size: 12px; }
  .settings-body { gap: 12px; padding: 12px; }
  .setting { flex-basis: 100%; }
  .setting label { font-size: 13px; }
  .setting input { height: 44px; margin-top: 2px; }
  .setting p,.settings-note { font-size: 11px; }
  #effects-off { min-height: 44px; font-size: 12px; }
  .hero-description { font-size: 14px; }
  .hero-note { font-size: 11px; line-height: 1.8; }
  .filters { justify-content: flex-start; gap: 5px; }
  .filter { min-height: 44px; padding: 10px 13px; font-size: 13px; }
  .search { min-height: 48px; }
  .search input { font-size: 16px; }
  .result-count { font-size: 12px; line-height: 1.8; }
  .cards { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .card { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .cards > .card { filter: none; }
  .card-art { height: auto; aspect-ratio: 16 / 9; filter: var(--picture-filter); }
  .card-art .toy-thumbnail { width: 64%; max-width: 220px; height: 100%; }
  .card-art .art { filter: none; }
  .card-badge { font-size: 11px; top: 12px; left: 12px; }
  .card-art::after { font-size: 11px; }
  .card-info { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 13px 0 0; filter: var(--readable-picture-filter); }
  .card-meta,.card h3,.card-description { grid-column: 1 / -1; }
  .card-meta { font-size: 11px; gap: 8px; }
  .card h3 { font-size: 18px; line-height: 1.6; margin: 0; }
  .card-description { font-size: 14px; line-height: 1.85; min-height: 0; margin-bottom: 3px; }
  .card-action { grid-column: 1; min-height: 44px; margin: 0; padding: 9px 0; font-size: 14px; align-items: center; color: var(--green); }
  .card-info .play-share { grid-column: 2; padding: 0; gap: 6px; align-self: center; }
  .card-info .share-icon { width: 44px; height: 44px; padding: 12px; border-color: #d1d5bf; background: #fffdf5; box-shadow: none; }
  .card-info .share-icon svg { width: 18px; height: 18px; }
  .making p,.about>div,.footer { font-size: 12px; }
  .making h3 { font-size: 15px; }
  .crt-overlay { opacity: calc(var(--crt) * .65); }
  /* Keep text crisp at the normal setting; pixel strength still affects it. */
  .hero-copy,.playground > :not(.cards),.about > * { filter: var(--readable-picture-filter); }
  .game-dialog,.game-dialog:has(.toy-workbench),.game-dialog[data-game="drum"],#bell-dialog {
    width: calc(100% - 12px); max-width: none;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    padding: 12px; border-radius: 14px; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
    scroll-padding-block: 72px 20px;
  }
  .game-dialog > .dialog-header,.game-dialog:has(.toy-workbench) > .dialog-header,
  .game-dialog[data-game="drum"] > .dialog-header,#bell-dialog > .dialog-header {
    top: -12px; padding: 8px 0; margin-bottom: 12px; gap: 8px; filter: none;
  }
  .dialog-header .eyebrow { font-size: 10px; letter-spacing: 0; }
  .game-header-actions { gap: 6px; }
  .game-sound { min-height: 44px; padding: 8px 10px; font-size: 12px; }
  #game-title { font-size: 22px; line-height: 1.5; overflow-wrap: anywhere; filter: var(--readable-picture-filter); }
  #game-content > :is(p,form,.toy-controls,.canvas-tools,.board-controls,.board-score,.board-status,.game-rules) { filter: var(--readable-picture-filter); }
  .game-dialog .game-intro,.game-dialog:has(.toy-workbench) .game-intro,.game-dialog[data-game="drum"] .game-intro {
    font-size: 14px; line-height: 1.8; margin: 12px 0 16px;
  }
  .game-note,.toy-footnote,.toy-status,.game-rules,.toy-select,.toy-range,.drum-guide,.hat-status,.drum-status { font-size: 12px; line-height: 1.85; }
  .toy-status { min-height: 24px; margin: 12px 0 5px; }
  .toy-credit,.drum-credit { font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
  .game-button,.toy-controls button,.canvas-tools button { font-size: 13px; min-height: 44px; min-width: 44px; padding: 10px 12px; }
  .toy-controls,.canvas-tools,.board-controls { gap: 8px; }
  .toy-range { padding-inline: 0; }
  .toy-range input { height: 44px; }
  .game-dialog > .play-share,#bell-dialog > .play-share { gap: 8px; flex-wrap: wrap; filter: none; }
  .game-dialog > .play-share::before,#bell-dialog > .play-share::before { font-size: 12px; }
  .play-canvas { width: 100%; }
  .reversi-board,.checker-board { width: 100%; max-width: 400px; }
  .board-zoom { display: block; margin: 0 0 10px auto; }
  .board-viewport { overflow: auto; overscroll-behavior: contain; margin-bottom: 16px; padding-bottom: 4px; }
  .board-viewport.is-zoomed { max-height: 60dvh; border: 1px solid #aab798; border-radius: 5px; }
  .board-viewport.is-zoomed > :is(.reversi-board,.checker-board) { width: 420px; max-width: none; margin: 0; }
  .friend-form label { font-size: 14px; }
  .friend-form input,.support-page input,.support-page select { font-size: 16px; }
  .friend-result p { font-size: 14px; }
  .friend-plus { padding: 0; }
  .domino-half { height: 32px; width: 26px; }
  .domino-half:first-child { width: 29px; }
  .domino-tile { min-height: 48px; }
  .support-small,.support-intro>p,.support-after p { font-size: 13px; }
  .support-page .support-intro .support-small { font-size: 13px; }
  .share-dialog p { font-size: 13px; }
  .share-heading { gap: 8px; }
}
@media (max-width:360px) {
  .header .support-link span { display: none; }
  .dialog-header .eyebrow { font-size: 9px; }
  .game-sound { font-size: 11px; }
  .card h3 { font-size: 17px; }
}
@media (hover:none) {
  .card:hover .art,.primary:hover { transform: none; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px) {
  .acoustic-kit { width: min(100%,560px); }
  .reversi-board,.checker-board { width: min(100%,380px); }
}