/* New UI is hidden unless the primary pointer and screen identify a touch phone. */
.gng-phone-only, #phoneNotice {display: none;}
@media (max-width: 650px) and (pointer: coarse), (max-width: 1100px) and (max-height: 650px) and (pointer: coarse) {
  body.gng-phone {position: fixed; inset: 0; overflow: hidden;}
  body.gng-phone #app {position: fixed; left: var(--gng-phone-left, 0px); top: var(--gng-phone-top, 0px); width: var(--gng-phone-width, 100vw); height: var(--gng-phone-height, 100dvh); max-width: none; margin: 0; overflow: hidden;}
  body.gng-phone .gng-phone-only {display: block;}
  body.gng-phone button, body.gng-phone select {min-width: 44px; min-height: 44px; touch-action: manipulation;}
  body.gng-phone button:focus-visible {outline: 3px solid #f4d797; outline-offset: 2px;}
  body.gng-phone #rotate {display: none !important;}
  body.gng-phone #hud {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: auto; min-height: 0; gap: 4px; padding: 6px; align-items: stretch;}
  body.gng-phone #hud .brand {display: none;}
  body.gng-phone #hud > div:nth-child(2), body.gng-phone #hud > div:nth-child(3), body.gng-phone #hud > div:nth-child(4), body.gng-phone #hud > div:nth-child(5) {grid-column: span 3; grid-row: 1; min-width: 0; margin: 0; align-self: center; padding: 2px 0 4px;}
  body.gng-phone #hud small {font-size: 9.5px; line-height: 1.2; letter-spacing: 0; color: #c7d4d4; margin-bottom: 3px; overflow-wrap: anywhere;}
  body.gng-phone #hud b {display: block; font-size: 11px; line-height: 1.25; letter-spacing: 0; color: #fff1d2; overflow-wrap: anywhere;}
  body.gng-phone #mapButton {grid-column: 9 / 11; grid-row: 2;}
  body.gng-phone #pauseButton {grid-column: 11 / 13; grid-row: 2;}
  body.gng-phone #hud button {padding: 5px 3px; min-height: 44px; font: 600 12px/1.2 Arial, sans-serif;}
  body.gng-phone #phoneZoomBar {grid-column: 1 / 9; grid-row: 2;}
  body.gng-phone .phone-zoom-controls {display: flex; align-items: center; gap: 4px; min-width: 0;}
  body.gng-phone .phone-zoom-controls button {flex: 0 0 auto; padding: 7px 6px; height: 44px; min-width: 65px; font: 600 12px/1.2 Arial, sans-serif;}
  body.gng-phone .phone-zoom-controls output {flex: 1; min-width: 35px; text-align: center; color: #ffe2a5; font: 700 12px Arial, sans-serif; font-variant-numeric: tabular-nums;}
  body.gng-phone #phoneBossHud {display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; grid-row: 3; padding: 4px 7px; min-width: 0; border: 1px solid #b6a06c; border-radius: 4px; color: #ffe2a5; background: #10232b; font-size: 12px; line-height: 1.25; text-align: center;}
  body.gng-phone #phoneBossHud span {flex: 1; min-width: 0;}
  body.gng-phone #phoneBossHud progress {flex: 0 1 180px; width: 28%; min-width: 70px; max-width: 28%; height: 9px; border: 0; border-radius: 4px; accent-color: #e0bb6c; background: #29423e;}
  body.gng-phone #phoneBossHud progress::-webkit-progress-bar {background: #29423e; border-radius: 4px;}
  body.gng-phone #phoneBossHud progress::-webkit-progress-value {background: #e0bb6c; border-radius: 4px;}
  body.gng-phone #phoneBossHud[hidden] {display: none;}
  body.gng-phone #phoneNotice {display: flex; align-items: center; justify-content: center; grid-column: 1 / -1; grid-row: 4; min-width: 0; height: 44px; padding: 4px 8px; border: 1px solid #586a65; border-radius: 4px; background: #0c202a; color: #f2dbad; font: 13px/16px Arial, sans-serif; text-align: center; white-space: normal; overflow-wrap: anywhere; overflow: hidden;}
  body.gng-phone #viewport {flex: 1; min-height: 0; width: 100%;}
  body.gng-phone #touch {
    --phone-key-size: clamp(44px, min(var(--touchSize), calc((var(--gng-phone-width, 100vw) - 150px) / 4)), 64px);
    display: flex; height: calc(var(--phone-key-size) * 2 + 17px); min-height: 0;
    padding: 6px 8px; gap: 10px; align-items: center; justify-content: space-between;
  }
  body.gng-phone:not([data-phone-screen=play]) #touch {visibility: hidden;}
  body.gng-phone #touch .touchHint {display: none;}
  body.gng-phone #touch .dpad {display: grid; grid-template-columns: var(--phone-key-size) max(60px, var(--phone-key-size)) var(--phone-key-size); gap: 4px; align-items: center;}
  body.gng-phone #touch .dpad > div {display: flex; flex-direction: column; gap: 4px;}
  body.gng-phone #touch .actions {display: flex; gap: 6px;}
  body.gng-phone #touch button {width: var(--phone-key-size); height: var(--phone-key-size); min-width: 44px; min-height: 44px; border-radius: 9px; padding: 2px; font-size: 13px; opacity: var(--touchOpacity); touch-action: none;}
  body.gng-phone #touch [data-action=up], body.gng-phone #touch [data-action=down] {width: max(60px, var(--phone-key-size));}
  body.gng-phone .phone-direction-arrow {display: block; font-size: 13px; line-height: 1;}
  body.gng-phone .phone-direction-label {display: block; font-size: 9.5px; line-height: 1.1; margin-top: 2px; letter-spacing: -.15px;}
  body.gng-phone #touch .actions button {font-size: 13px;}
  body.gng-phone #toast, body.gng-phone #phonePrompt {display: none !important;}
  body.gng-phone #overlay {
    position: fixed; inset: auto;
    left: calc(var(--gng-phone-left, 0px) + env(safe-area-inset-left)); top: calc(var(--gng-phone-top, 0px) + env(safe-area-inset-top));
    width: calc(var(--gng-phone-width, 100vw) - env(safe-area-inset-left) - env(safe-area-inset-right));
    height: calc(var(--gng-phone-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 8px; overflow: hidden; z-index: 5; touch-action: pan-y;
  }
  body.gng-phone .panel {max-height: 100%; min-height: 0; width: 100%; padding: 17px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; scroll-padding: 12px;}
  body.gng-phone h1 {font-size: clamp(31px, 8vw, 45px); letter-spacing: -1px;}
  body.gng-phone h2 {font-size: 27px;}
  body.gng-phone p {font-size: 15px; line-height: 1.5;}
  body.gng-phone .eyebrow {font-size: 10px; letter-spacing: 2px; margin-bottom: 12px;}
  body.gng-phone .fine {font-size: 12px; line-height: 1.45;}
  body.gng-phone .menuGrid {grid-template-columns: 1fr 1fr; gap: 8px;}
  body.gng-phone .menuGrid button {font-size: 14px; padding: 9px 10px;}
  body.gng-phone .row {gap: 8px; margin: 13px 0;}
  body.gng-phone .row label {font-size: 14px; min-width: 140px; min-height: 44px; display: flex; align-items: center; gap: 8px;}
  body.gng-phone .row input[type=range] {min-width: 95px; width: 50%; height: 44px; touch-action: pan-x;}
  body.gng-phone input[type=checkbox] {width: 24px; height: 24px; flex-shrink: 0;}
  body.gng-phone .row button {font-size: 14px; padding: 9px 11px;}
  body.gng-phone .cards, body.gng-phone .tutorial {grid-template-columns: 1fr;}
  body.gng-phone .map {grid-template-columns: 1fr 1fr; gap: 8px;}
  body.gng-phone .map .node {padding: 12px;}
  body.gng-phone table {font-size: 12px;}
  body.gng-phone td, body.gng-phone th {padding: 8px 6px; overflow-wrap: anywhere;}
  body.gng-phone .phone-view-settings {border: 1px solid #8ba39980; border-radius: 7px; padding: 12px; margin: 15px 0; background: #112730;}
  body.gng-phone .phone-view-settings h3 {font-size: 20px; margin: 0 0 8px;}
  body.gng-phone .phone-view-settings p {font-size: 13px; line-height: 1.4; margin: 7px 0 12px;}
}
@media (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) and (pointer: coarse) {
  body.gng-phone #hud {grid-template-columns: repeat(4, minmax(0, 1fr)) 200px 44px 44px; gap: 4px; padding: 5px 6px;}
  body.gng-phone #hud > div:nth-child(2) {grid-column: 1;}
  body.gng-phone #hud > div:nth-child(3) {grid-column: 2;}
  body.gng-phone #hud > div:nth-child(4) {grid-column: 3;}
  body.gng-phone #hud > div:nth-child(5) {grid-column: 4;}
  body.gng-phone #phoneZoomBar {grid-column: 5; grid-row: 1;}
  body.gng-phone #mapButton {grid-column: 6; grid-row: 1;}
  body.gng-phone #pauseButton {grid-column: 7; grid-row: 1;}
  body.gng-phone #phoneBossHud {grid-row: 2;}
  body.gng-phone #phoneNotice {grid-row: 3; height: 32px; padding: 2px 7px; font-size: 12px; line-height: 13px;}
  body.gng-phone #touch {--phone-key-size: clamp(44px, var(--touchSize), 78px); height: calc(var(--phone-key-size) + 13px); padding: 6px 10px;}
  body.gng-phone #touch .dpad {grid-template-columns: repeat(4, var(--phone-key-size)); gap: 6px;}
  body.gng-phone #touch .dpad > div {display: contents;}
  body.gng-phone #touch [data-action=up], body.gng-phone #touch [data-action=down] {width: var(--phone-key-size);}
  body.gng-phone .phone-direction-label {font-size: 10px;}
  body.gng-phone .menuGrid {grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none;}
  body.gng-phone .cards, body.gng-phone .tutorial {grid-template-columns: repeat(3, minmax(0, 1fr));}
  body.gng-phone .map {grid-template-columns: repeat(4, minmax(0, 1fr));}
}