/* Confined to touch phones. Fine-pointer desktop styles remain in style.css. */
@media (max-width: 650px) and (pointer: coarse), (max-width: 1100px) and (max-height: 650px) and (pointer: coarse) {
  html {scroll-padding: 12px;}
  body {font-size: 16px;}
  button, select, input:not([type=checkbox]):not([type=range]) {min-height: 44px;}
  button, select {touch-action: manipulation;}
  button:focus-visible, select:focus-visible, .endpoint:focus-visible {outline: 3px solid #ffe09b; outline-offset: 3px;}
  .mast {gap: 8px; flex-wrap: wrap; padding: 10px 12px;}
  .mast nav {gap: 6px;}
  .mast nav button {font-size: 13px; padding: 8px 11px;}
  .tablepage {padding: 8px 10px 20px; min-width: 0;}
  .tabletop {gap: 10px;}
  .tabletop h2 {font-size: 25px; margin: 5px 0;}
  .tabletop .quiet {font-size: 13px; flex-shrink: 0;}
  .tabletop .eyebrow {font-size: 11px; letter-spacing: .1em;}
  .scorestrip {gap: 8px; padding: 9px 0; scroll-snap-type: x proximity; touch-action: pan-x pan-y;}
  .scoreseat {min-width: 138px; padding: 9px 10px; scroll-snap-align: start;}
  .scoreseat b {font-size: 16px;}
  .scoreseat span {font-size: 14px; line-height: 1.4;}
  .instruction {font-size: 16px; line-height: 1.4; padding: 10px 12px; margin: 5px 0 9px; overflow-wrap: anywhere;}
  .instruction strong {color: #ffe2a4;}
  .boardtools {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; margin: 8px 0 6px;}
  .boardtools button {font-size: 14px; min-width: 44px; height: 48px; line-height: 1.15; padding: 7px 5px;}
  .boardtools .quiet {grid-column: 2 / 4; font-size: 14px; text-align: center;}
  .boardtools .overview {width: 100%; max-width: 80px; height: 44px; justify-self: end; margin-left: 0; border-color: #b8c5ad;}
  .phone-board-zoom {font-size: 14px; font-variant-numeric: tabular-nums; min-width: 43px; text-align: center; color: #fff0ce;}
  .phone-board-navigation {margin: 4px 0 8px; min-width: 0;}
  .phone-board-navigation label {display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;}
  .phone-board-navigation select {flex: 1; min-width: 0; width: 0; font-size: 16px; padding: 8px;}
  .phone-board-context {font-size: 14px; color: #eee9d9; line-height: 1.35; min-height: 19px; margin: 5px 2px 0; overflow-wrap: anywhere;}
  .boardframe {border-width: 6px; border-radius: 12px; min-width: 0;}
  .board {height: clamp(270px, 39svh, 400px); min-height: 270px; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none;}
  .board .placed circle, .tilebutton svg circle {fill: #10221b;}
  .board .placed text, .tilebutton svg text {fill: #10221b; font-weight: 800;}
  .phone-last-outline {stroke: #ffd36c; stroke-width: 3; vector-effect: non-scaling-stroke;}
  .board .phone-last-label {font-size: 12px; font-weight: 800; fill: #ffe29b; stroke: #103b2b; stroke-width: 3px; paint-order: stroke; letter-spacing: .5px;}
  .board .endpoint {cursor: pointer;}
  .rackarea {position: static; padding: 14px 0 16px; margin-top: 12px; min-width: 0; background: transparent;}
  .rackhead {font-size: 16px; gap: 9px; align-items: center;}
  .rackhead b {line-height: 1.4;}
  .rackhead .quiet {white-space: nowrap; font-size: 14px;}
  .rackhead label {font-size: 14px; flex-shrink: 0;}
  .rackhead select {font-size: 16px; min-height: 44px; max-width: 112px; padding: 6px;}
  .rack {gap: 12px; padding: 14px 6px 23px; min-height: 158px; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-padding: 8px;}
  .tilebutton {min-width: 70px; width: 70px; height: 132px; border-radius: 10px;}
  .tilebutton svg {width: 66px; height: 128px; display: block;}
  .tilebutton.legal:after {color: #ffe08b; font-size: 28px; bottom: -20px;}
  .tilebutton.selected {outline: 4px solid #ffe08b; outline-offset: 1px; transform: translateY(-4px);}
  .tilebutton:disabled {opacity: .8;}
  .rackactions {gap: 8px;}
  .rackactions button, .destinations button {font-size: 16px; padding: 10px 12px; min-height: 46px;}
  .destinations {gap: 8px; margin-bottom: 10px;}
  .destinations button {text-align: left; overflow-wrap: anywhere;}
  .result {padding: 16px;}
  .result h2 {font-size: 25px;}
  .revealrow {gap: 8px; padding: 8px 0 12px;}
  .revealrow svg {width: 110px; height: 55px; flex-shrink: 0;}
  .log {font-size: 15px; line-height: 1.45;}
  .log summary {padding: 12px 0; min-height: 44px;}
  dialog {width: calc(100% - 20px); max-height: calc(100svh - 24px); padding: 18px; touch-action: pan-y; overflow-y: auto;}
  dialog p, dialog label, dialog .quiet {font-size: 16px; line-height: 1.45;}
  dialog p > label {display: flex; align-items: center; gap: 8px; min-height: 44px;}
  dialog input[type=checkbox] {width: 22px; height: 22px; flex-shrink: 0;}
  #closeDialog {min-width: 44px; min-height: 44px;}
  .formrow {min-width: 0;}
  .formrow label, .seatrow, .seatrow input, .seatrow select {min-width: 0;}
  .panel {padding: 18px;}
  .rule-summary {font-size: 16px; line-height: 1.45;}
}
@media (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) and (pointer: coarse) {
  .tablepage {display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); gap: 0 14px;}
  .tabletop, .scorestrip, .instruction, .log, .tablepage > p {grid-column: 1 / -1;}
  .boardtools {grid-column: 1; grid-row: 4;}
  .phone-board-navigation {grid-column: 1; grid-row: 5;}
  .boardframe {grid-column: 1; grid-row: 6;}
  .board {height: 280px; min-height: 280px;}
  .rackarea {grid-column: 2; grid-row: 4 / 7; margin-top: 0; padding-top: 8px; align-self: start;}
  .rackhead {flex-wrap: wrap;}
  #results {grid-column: 1 / -1; grid-row: 7;}
  .log {grid-row: 8;}
  .tablepage > p {grid-row: 9;}
}
@media (max-width: 350px) and (pointer: coarse) {
  .tablepage {padding-inline: 8px;}
  .tabletop h2 {font-size: 22px;}
  .tabletop .quiet {font-size: 12px;}
  .rackhead {flex-wrap: wrap;}
  .rackhead label {margin-left: auto;}
  .boardtools button {padding-inline: 8px;}
  .boardtools .overview {width: 65px;}
}