/* Phone-only layout. The original desktop stylesheet is unchanged.
   Protect the board height; let #app scroll if controls outgrow the viewport. */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; top: var(--phone-top, 0px); left: 0; width: 100%; height: var(--phone-height, 100dvh); min-height: 0; overflow: hidden; display: flex; flex-direction: column; overscroll-behavior: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .topbar { flex: none; width: 100%; min-height: 44px; padding: 0 6px; gap: 5px; }
  #brand { font-size: 1.65rem; letter-spacing: -1.5px; }
  .brand-dot { font-size: .6rem; }
  .topbar .edition { display: none; }
  .topbar nav { gap: 0; }
  .topbar nav button { min-height: 44px; padding: 4px 8px; font-size: 13px; }
  main { flex: 1; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 3px 5px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  footer { flex: none; padding: 2px 5px; font-size: 10px; line-height: 1.1; }
  .phone-source { display: none !important; }
  .phone-game { height: auto; min-height: 100%; align-content: start; display: grid; gap: 3px; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto minmax(44px,auto) 64px auto auto; grid-template-areas: 'summary' 'location' 'board' 'play' 'aux' 'hands' 'scores' 'history'; font-size: 13px; line-height: 1.2; }
  .phone-board-side, .phone-control-side { display: contents; }
  .phone-game :is(button, summary) { font-size: 13px; min-height: 44px; padding: 5px 7px; border-radius: 6px; line-height: 1.2; overflow-wrap: anywhere; }
  .phone-game button:hover { transform: none; }
  .phone-game button.primary { box-shadow: none; }
  .phone-game button:disabled { opacity: .58; }
  .phone-game .panel { border-radius: 7px; box-shadow: none; }
  .phone-summary { grid-area: summary; display: grid; grid-template-columns: minmax(110px, .95fr) minmax(0, 1.65fr); grid-template-rows: auto auto; gap: 0 5px; background: #fff7e5; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
  .phone-summary .turn-banner { grid-column: 1; grid-row: 1 / 3; padding: 4px; gap: 4px; flex-wrap: wrap; align-content: center; }
  .phone-summary .turn-banner > .token-dot { width: 20px; height: 20px; font-size: 11px; }
  .phone-summary .turn-banner > div { flex: 1; min-width: 0; }
  .phone-summary .turn-banner h2 { font-size: 14px; margin: 1px 0 0; overflow-wrap: anywhere; }
  .phone-summary .turn-banner .eyebrow { font-size: 10px; letter-spacing: .3px; }
  .phone-summary .turn-banner .turn { font-size: 10px; margin: 0; }
  .phone-summary .stats { grid-column: 2; grid-row: 1; gap: 4px; margin: 0; padding-right: 3px; }
  .phone-summary .stat { padding: 3px 0 1px; border: 0; min-width: 0; }
  .phone-summary .stat .label { font-size: 10px; margin-bottom: 1px; color: #5d4a32; }
  .phone-summary .stat strong { font-size: 14px; overflow-wrap: anywhere; }
  .phone-summary .salary { grid-column: 2; grid-row: 2; margin: 0; padding: 0 4px 3px 0; font-size: 11px; }
  .phone-summary .private-summary { grid-column: 1 / -1; margin: 0; padding: 3px 5px; border-radius: 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1px 5px; }
  .phone-summary .private-summary > .eyebrow { grid-column: 1 / -1; font-size: 10px; letter-spacing: .4px; }
  .phone-summary .goal-line { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: 11px; min-width: 0; }
  .phone-summary .goal-line strong { overflow-wrap: anywhere; }
  .phone-summary .goal-line progress { height: 4px; }
  .phone-game .location { grid-area: location; margin: 0; padding: 3px 5px; font-size: 12px; line-height: 1.2; border-radius: 3px; }
  .phone-game .location strong { display: inline; font-size: 13px; margin: 0 5px 0 0; }
  .phone-board { grid-area: board; min-width: 0; height: clamp(280px, calc(var(--phone-height, 100dvh) * .42), 420px); min-height: 280px; display: flex; flex-direction: column; }
  .phone-board .board-tools { flex: none; height: 44px; margin: 0; gap: 3px; flex-wrap: nowrap; }
  .phone-board .board-tools .eyebrow { flex: 0 0 44px; font-size: 10px; letter-spacing: .3px; }
  .phone-board .board-tools button { min-width: 44px; }
  .phone-board .board-tools .hint { display: block; flex: 1; min-width: 0; font-size: 10px; line-height: 1.1; margin-left: auto; max-width: 96px; }
  .phone-board .board-wrap { flex: 1 0 224px; min-height: 224px; padding: 2px; box-shadow: none; border-radius: 6px; display: flex; }
  .phone-board .board-scroll { width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; border-radius: 4px; scrollbar-width: thin; }
  .phone-board .board { min-width: 1080px; max-width: none; height: auto; border-radius: 3px; }
  .phone-board .board-legend { flex: none; margin: 0; padding: 1px 0; gap: 8px; font-size: 10px; line-height: 1.15; flex-wrap: wrap; }
  .phone-board .board-legend i { width: 6px; height: 6px; margin-right: 2px; }
  .phone-play { grid-area: play; min-width: 0; min-height: 0; display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 4px; align-items: stretch; }
  .phone-play .dice-tray { margin: 0; padding: 3px 0; min-height: 44px; align-content: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
  .phone-play .die { width: 33px; height: 33px; font-size: 30px; border-radius: 6px; padding-top: 1px; box-shadow: 1px 2px 0 #d8c5a1; }
  .phone-play .dice-note { width: 100%; text-align: center; font-size: 11px; color: #5d4a32; }
  .phone-prompt { min-height: 44px; max-height: none; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 1px; border-radius: 6px; scrollbar-width: thin; }
  .phone-prompt--long { max-height: clamp(60px, calc(var(--phone-height, 100dvh) - 660px), 96px); }
  .phone-prompt .action-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px,1fr)); gap: 3px; }
  .phone-prompt .action-list > :is(strong,p,.paused-tag) { grid-column: 1 / -1; }
  .phone-prompt .action-list > p { font-size: 13px !important; line-height: 1.25; margin: 0 0 3px !important; }
  .phone-prompt .action-list .paused-tag { padding: 8px; font-size: 13px; }
  .phone-prompt .payment-receipt { padding: 4px; margin: 0 0 3px; border-width: 1px; font-size: 12px; line-height: 1.2; }
  .phone-prompt .payment-receipt strong, .phone-prompt .payment-receipt span { font-size: 12px; margin: 0; }
  .phone-game .aux-actions { grid-area: aux; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 3px; margin: 0; min-width: 0; }
  .phone-hands { grid-area: hands; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-height: 0; }
  .phone-hand { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 2px; background: #fff7e5; border: 1px solid var(--line); border-radius: 6px; }
  .phone-hand h3 { margin: 0 0 2px; font: bold 11px/1.15 'Trebuchet MS',Arial,sans-serif; }
  .phone-hand .hand-cards { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
  .phone-hand .hand-cards button { flex: none; width: 100%; }
  .phone-hand .fineprint { font-size: 12px; line-height: 1.2; margin: 4px 0; }
  .phone-scores { grid-area: scores; display: grid; grid-template-columns: 1fr 1fr; min-width: 0; }
  .phone-scores .section-label { grid-column: 1 / -1; padding: 2px 5px 0; font-size: 10px; letter-spacing: .4px; }
  .phone-scores .score-row { min-width: 0; padding: 2px 4px; gap: 3px; font-size: 12px; }
  .phone-scores .score-row > strong { min-width: 0; flex: 1; font-size: 12px; line-height: 1.15; }
  .phone-scores .token-dot { width: 18px; height: 18px; flex: none; font-size: 10px; border-width: 1px; }
  .phone-scores .score-numbers { font-size: 11px; line-height: 1.15; }
  .phone-history { grid-area: history; min-width: 0; }
  .phone-history .section-label { padding: 2px 5px 0; font-size: 10px; letter-spacing: .4px; }
  .phone-latest { padding: 2px 5px; margin: 0; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
  .phone-history .log { height: 23px; max-height: 23px; padding: 2px 5px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
  .phone-history .log p { margin: 0 0 5px; padding-left: 4px; font-size: 12px; line-height: 1.2; }
  .setup { display: block; height: 100%; max-width: none; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 3px; }
  .setup-art { display: none; }
  .setup-form { padding: 0; }
  .setup h1 { font-size: 25px; margin: 5px 0 !important; }
  .setup p { margin-bottom: 6px; line-height: 1.25; font-size: 13px; }
  .setup .mode-toggle, .setup .form-row { margin: 7px 0; gap: 6px; }
  .setup .player-row { margin: 5px 0; }
  .setup-form .primary { margin: 8px 0; }
  .setup input, .setup select { font-size: 16px; }
  .modal-backdrop { top: var(--phone-top, 0px); height: var(--phone-height, 100dvh); bottom: auto; overflow: hidden; padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); }
  .modal, .modal.wide { display: flex; flex-direction: column; width: min(680px,100%); max-height: 100%; min-height: 0; overflow: hidden; padding: 9px; border-radius: 12px; }
  .phone-modal-body { overflow: auto; min-height: 0; overscroll-behavior: contain; touch-action: pan-y; padding: 3px; }
  .modal .close { top: 4px; right: 4px; width: 44px; height: 44px; padding: 4px; min-height: 44px; z-index: 2; background: #fff7e3; }
  .phone-modal-body > :is(h2,.eyebrow) { padding-right: 40px; }
  .modal h2 { font-size: 22px; margin: 7px 0; }
  .modal h3 { margin: 6px 0; font-size: 15px; }
  .modal p { font-size: 14px; line-height: 1.3; margin: 6px 0; }
  .modal .actions { flex: none; margin: 5px 0 0; padding: 4px 0 0; gap: 5px; border-top: 1px solid var(--line); flex-wrap: wrap; background: #fff7e3; }
  .modal .actions button { min-height: 44px; font-size: 14px; padding: 5px 8px; }
  .modal .cover-icon { font-size: 30px; }
  .modal .pass-name { font-size: 26px; margin: 9px 0; overflow-wrap: anywhere; }
  .modal .formula-fields { gap: 5px; margin: 8px 0; }
  .modal .formula-fields input { font-size: 20px; }
  .modal input, .modal select { font-size: 16px; }
  .modal .formula-total { padding: 5px; font-size: 15px; }
  .modal .preset-row { margin: 6px 0; gap: 4px; }
  .modal .preset-row button { min-height: 44px; font-size: 12px; }
  .modal .trade-cols { grid-template-columns: 1fr 1fr; gap: 7px; }
  .modal .trade-cols label { margin: 6px 0; }
  .modal .help-grid { gap: 8px; }
  .modal .salary { margin: 6px 0; }
  .toast { bottom: auto; top: 46px; max-height: calc(var(--phone-height,100dvh) - 52px); overflow: auto; padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  .topbar { min-height: 44px; }
  footer { font-size: 10px; }
  .phone-game { height: 100%; min-height: 480px; grid-template-columns: minmax(240px,.85fr) minmax(0,1.55fr); grid-template-rows: minmax(0,1fr); grid-template-areas: none; gap: 5px; }
  .phone-board-side { display: flex; flex-direction: column; gap: 3px; min-height: 0; min-width: 0; }
  .phone-board { flex: 1; height: auto; }
  .phone-board .board-tools .hint { max-width: 74px; }
  .phone-board .board-tools { gap: 2px; }
  .phone-board .board-tools .eyebrow { font-size: 9px; }
  .phone-scores, .phone-history { flex: none; }
  .phone-control-side { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(44px,1fr) minmax(44px,auto) 66px; grid-template-areas: 'summary' 'location' 'play' 'aux' 'hands'; gap: 3px; min-height: 0; min-width: 0; }
  .phone-summary { grid-template-columns: minmax(100px,.8fr) minmax(0,1.4fr); }
  .phone-summary.has-formula { grid-template-columns: minmax(90px,.85fr) minmax(110px,1.2fr) minmax(130px,1.4fr); }
  .phone-summary .private-summary { grid-column: 3; grid-row: 1 / 3; display: block; border-left: 1px solid var(--line); }
  .phone-summary .private-summary .eyebrow { font-size: 9px; }
  .phone-summary .goal-line { display: grid; grid-template-columns: auto 1fr; gap: 0 3px; font-size: 10px; margin: 1px 0; }
  .phone-summary .goal-line strong { text-align: right; }
  .phone-summary .goal-line progress { grid-column: 1 / -1; height: 3px; }
  .phone-play { grid-template-columns: 100px minmax(0,1fr); }
  .phone-prompt { max-height: none; height: 100%; }
  .phone-play .dice-tray { align-content: start; }
  .phone-history .log { height: 20px; max-height: 20px; }
  .phone-scores .score-row > strong { font-size: 11px; }
  .phone-scores .score-numbers { font-size: 10px; }
  .phone-scores .token-dot { width: 16px; height: 16px; }
  .modal .help-grid { grid-template-columns: 1fr 1fr; }
}