/* Touch matches use landscape browser space without requiring fullscreen permission. */
.landscape-gate { display: none; }
.mobile-actions { display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
#touch-dash { position: relative; isolation: isolate; overflow: visible; width: 64px; height: 64px; min-height: 64px; flex: 0 0 64px; gap: 1px; border: 2px solid #e3f3dc; color: #263c3c; background: #87b9b3; box-shadow: 0 3px 12px #273a3a30,inset 0 0 0 1px #e3f3dc55; opacity: 1; touch-action: none; }
#touch-dash>svg,#touch-dash>span,#touch-dash>small { position: relative; z-index: 1; color: #263c3c; }
#touch-dash svg { width: 20px; height: 20px; }
#touch-dash span { font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; }
#touch-dash small { font-size: 8px; font-weight: 800; letter-spacing: .8px; line-height: 1; }
#touch-dash.touch-active, #touch-dash.sprinting { background: #5d9d96; box-shadow: 0 0 0 4px #e3f3dc55,inset 0 0 0 1px #e3f3dc66; }
#touch-dash.stunned { border-color: #f6cf7f; }
@media (max-width: 850px), (pointer: coarse) {
  :root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
  }
  button, a, input { touch-action: manipulation; }
  .text-input { min-height: 48px; font-size: 16px; }
  .button, .text-button, .icon-button, .code-copy { min-height: 44px; }
  .icon-button { min-width: 44px; width: 44px; height: 44px; }
  .icon-button svg { width: 19px; height: 19px; }
  .difficulty-options span { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
  .practice-button { min-height: 64px; }
  .practice-button strong { font-size: 13px; }
  .practice-button small { font-size: 11px; }
  .room-bottom > .button { min-height: 44px; font-size: 12px; }
  .mobile-controls { display: flex; }
  #game-canvas, .joystick, .touch-attack { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .joystick.touch-active { border-color: #f9fff0; background: #f6ffe27a; }
  .touch-attack.touch-active { background: #bc5637; box-shadow: 0 0 0 5px #fff7df45; }
  .look-hint { pointer-events: none; white-space: normal; text-align: center; }
  dialog { max-height: calc(100dvh - 24px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); overflow-y: auto; padding: 24px; touch-action: pan-y; }
  .rules-list p, .dialog-lead, .rules-footnote { font-size: 12px; }
  .rules-list strong { font-size: 14px; }
  .dialog-close { right: 10px; top: 10px; }

  body:is(.in-match, .match-results) { overflow: hidden; overscroll-behavior: none; }
  :is(.in-match, .match-results) .app-shell { max-width: none; padding: 0; }
  :is(.in-match, .match-results) .site-header,
  :is(.in-match, .match-results) .sidebar,
  :is(.in-match, .match-results) .game-heading,
  :is(.in-match, .match-results) .controls-bar,
  :is(.in-match, .match-results) .how-it-works,
  :is(.in-match, .match-results) .site-footer { display: none; }
  :is(.in-match, .match-results) .workspace { display: block; margin: 0; }
  :is(.in-match, .match-results) .game-section { height: 100vh; height: 100dvh; }
  :is(.in-match, .match-results) .game-card {
    width: 100%; height: 100vh; height: 100dvh; min-height: 0; max-height: none;
    aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none;
  }
  :is(.in-match, .match-results) #leave-match-button { display: grid; }
  :is(.in-match, .match-results) .game-hud {
    top: calc(8px + var(--mobile-safe-top)); left: calc(12px + var(--mobile-safe-left));
    right: calc(12px + var(--mobile-safe-right)); gap: 8px; align-items: flex-start;
  }
  .game-hud .hud-location { display: none; }
  :is(.in-match, .match-results) .hud-center {
    display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
    gap: 2px 8px; padding: 7px 9px; margin: 0 auto 0 0; min-height: 44px;
  }
  .hud-center #round-label { grid-column: 1; grid-row: 1; font-size: 9px; }
  .hud-center #alive-label { grid-column: 1; grid-row: 2; font-size: 10px; }
  .hud-center #timer-label { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 22px; letter-spacing: 0; }
  :is(.in-match, .match-results) .game-tools { gap: 4px; }
  :is(.in-match, .match-results) .game-tools .icon-button { width: 44px; height: 44px; min-width: 44px; }
  :is(.in-match, .match-results) .zone-status {
    top: calc(68px + var(--mobile-safe-top)); min-width: 182px; max-width: calc(100% - 32px);
    padding: 7px 12px; gap: 10px;
  }
  .zone-status span:not(.zone-arrow) { font-size: 11px; }
  .zone-status strong { font-size: 25px; }
  .zone-status small { font-size: 10px; }
  :is(.in-match, .match-results) .event-feed {
    top: calc(164px + var(--mobile-safe-top)); left: calc(12px + var(--mobile-safe-left));
    max-width: calc(100% - 24px - var(--mobile-safe-left) - var(--mobile-safe-right));
  }
  .event-feed .event-item { font-size: 10px; padding: 6px 8px; }
  .in-match .event-feed .event-item:nth-last-child(n+2) { display: none; }
  :is(.in-match, .match-results) .mobile-controls {
    left: calc(18px + var(--mobile-safe-left)); right: calc(18px + var(--mobile-safe-right));
    bottom: calc(18px + var(--mobile-safe-bottom)); align-items: flex-end;
  }
  .joystick { width: 112px; height: 112px; border-width: 2px; flex: 0 0 112px; }
  .joystick:not(.custom-control) { margin-left: 32px; margin-bottom: 16px; }
  .joystick > span { width: 42px; height: 42px; left: 33px; top: 33px; }
  .touch-attack { width: 80px; height: 80px; min-height: 80px; flex: 0 0 80px; }
  .touch-attack svg { width: 28px; height: 28px; }
  .touch-attack span { font-size: 12px; font-weight: 750; }
  :is(.in-match, .match-results) .self-status {
    left: calc(18px + var(--mobile-safe-left)); bottom: calc(142px + var(--mobile-safe-bottom));
    max-width: calc(100% - 202px - var(--mobile-safe-left) - var(--mobile-safe-right));
    padding: 7px 8px; font-size: 10px; line-height: 1.4; pointer-events: none;
  }
  :is(.in-match, .match-results) .attack-status {
    right: calc(18px + var(--mobile-safe-right)); bottom: calc(116px + var(--mobile-safe-bottom));
    width: 164px; min-width: 0; max-width: 46%; padding: 8px; pointer-events: none;
  }
  .attack-status strong { font-size: 10px; line-height: 1.4; }
  .attack-status .attack-key { display: none; }
  :is(.in-match, .match-results) .look-hint {
    bottom: calc(188px + var(--mobile-safe-bottom)); width: 250px; max-width: calc(100% - 32px);
    font-size: 11px; line-height: 1.5; padding: 9px 12px;
  }
  .npc-stun-feedback { bottom: calc(188px + var(--mobile-safe-bottom)); }
  .in-match:has(.npc-stun-feedback:not([hidden])) .look-hint { visibility: hidden; }
  :is(.in-match, .match-results) .game-overlay {
    padding: calc(12px + var(--mobile-safe-top)) calc(12px + var(--mobile-safe-right)) calc(12px + var(--mobile-safe-bottom)) calc(12px + var(--mobile-safe-left));
  }
  .game-overlay .overlay-content, .game-overlay .overlay-content:has(.result-ranking) {
    width: min(440px, 100%); min-width: 0; max-width: 100%; max-height: 100%;
    padding: 20px 16px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .result-ranking .rank-row { min-height: 42px; font-size: 12px; }
  .result-ranking .rank-position { min-width: 51px; font-size: 11px; }
  .result-ranking .rank-name small { font-size: 10px; }
  .overlay-content .button { min-height: 48px; font-size: 13px; }
  .toast { bottom: calc(20px + var(--mobile-safe-bottom)); }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 850px),
       (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  :is(.in-match, .match-results) .zone-status {
    top: calc(8px + var(--mobile-safe-top)); width: 230px; min-width: 0; max-width: calc(100% - 340px);
    padding: 6px 10px; gap: 8px;
  }
  .zone-status > div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; }
  .zone-status #zone-label { grid-column: 1; grid-row: 1; font-size: 10px; }
  .zone-status #zone-total { grid-column: 1; grid-row: 2; font-size: 9px; margin-top: 0; }
  .zone-status #zone-points { grid-column: 2; grid-row: 1 / 3; font-size: 24px; }
  :is(.in-match, .match-results) .event-feed { top: calc(65px + var(--mobile-safe-top)); max-width: 220px; }
  :is(.in-match, .match-results) .mobile-controls { bottom: calc(12px + var(--mobile-safe-bottom)); }
  .joystick { width: 96px; height: 96px; flex-basis: 96px; }
  .joystick > span { left: 25px; top: 25px; }
  .touch-attack { width: 76px; height: 76px; min-height: 76px; flex-basis: 76px; }
  :is(.in-match, .match-results) .self-status { bottom: calc(118px + var(--mobile-safe-bottom)); max-width: 190px; }
  :is(.in-match, .match-results) .attack-status { bottom: calc(104px + var(--mobile-safe-bottom)); }
  :is(.in-match, .match-results) .look-hint { bottom: calc(18px + var(--mobile-safe-bottom)); width: max-content; max-width: calc(100% - 410px); text-wrap: balance; }
  .npc-stun-feedback { bottom: calc(18px + var(--mobile-safe-bottom)); max-width: calc(100% - 410px); min-width: 220px; }
  .combat-feedback { top: 31%; max-width: calc(100% - 320px); }
  .combat-feedback div > span { display: none; }
  .game-overlay .overlay-content, .game-overlay .overlay-content:has(.result-ranking) { width: 480px; padding: 14px 20px; }
}

/* Cover the lobby as well, so a portrait phone cannot start an unseen match. */
@media (orientation: portrait) and (max-width: 850px),
       (orientation: portrait) and (pointer: coarse) {
  body { overflow: hidden; overscroll-behavior: none; }
  .app-shell { visibility: hidden; pointer-events: none; }
  .landscape-gate {
    position: fixed; inset: 0; z-index: 1000; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    min-height: 100vh; min-height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
    background: #f6f4ed; color: #283e36; text-align: center;
    pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none;
  }
  .landscape-gate > span {
    display: grid; place-items: center; width: 104px; height: 70px; margin-bottom: 8px;
    border: 3px solid #63836d; border-radius: 15px; color: #cf714b;
    background: #ecf0e4; box-shadow: 0 7px 0 #ccd6bd5c; font-size: 49px; line-height: 1;
  }
  .landscape-gate h2 { margin: 0; font-size: clamp(21px, 6vw, 28px); line-height: 1.4; letter-spacing: -.8px; }
  .landscape-gate p { margin: 0; font-size: 15px; line-height: 1.7; color: #6e806d; }
}