/* Phones (2026-11-01). Loaded last: bigger touch targets, room for the notch, landscape in-game layout, open keyboard. */

/* hidden help tips still widened the whole page to the left (RTL): they only exist while shown */
.help-tip::after { display: none; }
.help-tip:hover::after, .help-tip:focus::after { display: block; }

/* the notch and the home bar, in both orientations */
.screen:not(.game) {
  padding-block-start: max(14px, env(safe-area-inset-top));
  padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right));
  padding-block-end: max(48px, env(safe-area-inset-bottom));
}
.home { padding-block-start: max(18px, env(safe-area-inset-top)); }
.hud { padding-block-start: max(8px, env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
.mm { margin-block-start: env(safe-area-inset-top); margin-right: env(safe-area-inset-right); }
#toasts { inset-block-start: max(10px, env(safe-area-inset-top)); }
.modal { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.lobby-actions { margin-left: calc(-1 * max(14px, env(safe-area-inset-left))); margin-right: calc(-1 * max(14px, env(safe-area-inset-right))); }
@supports (min-block-size: 100dvh) { body, #app { min-block-size: 100dvh; } }

/* a finger needs 44px */
@media (pointer: coarse), (max-width: 899px) {
  .btn.sm, .topbar .btn, .topbar .icon-btn, .icon-btn, .slop-badge { min-block-size: 44px; min-inline-size: 44px; }
  .ctl, .rm-bot { inline-size: 44px; block-size: 44px; }
  .rm-bot { margin-block: 0; }
  .team-name.editable { min-block-size: 44px; }
  .move-sel { font-size: 16px; min-block-size: 44px; }          /* under 16px iPhone zooms in on the field */
  .pl .move-sel { max-inline-size: 7em; }
  .swatches { grid-template-columns: repeat(auto-fill, 44px); justify-content: center; }
  .swatch { inline-size: 44px; block-size: 44px; max-inline-size: none; }
  .home-links a { display: inline-block; padding-block: 13px; }
  .help-tip::before { content: ""; position: absolute; inset: -10px; }
  .help-tip::after { position: fixed; inset-inline: 16px; inset-block-start: auto; inset-block-end: max(16px, env(safe-area-inset-bottom)); inline-size: auto; max-inline-size: none; }
}

/* home on an upright phone: name and the start button come right after the logo, not two screens down */
@media (max-width: 899px) and (orientation: portrait) {
  .home-hero { justify-items: center; }
  .home-hero > * { min-inline-size: 0; }
  .home-hero > :not(.hero-text) { order: 2; justify-self: stretch; }
  .hero-text { display: contents; }
  .hero-text .logo { order: 1; }
  .hero-text .tagline, .hero-text .facts, .hero-text .hero-demo, .hero-text .hero-board { order: 3; text-align: center; }
}

/* the game on an upright phone: the panel scrolls inside its own row, it used to grow up over the banner */
@media (max-width: 899px) and (orientation: portrait) {
  .hud-panel { align-self: stretch; min-block-size: 0; }
}
@media (max-width: 899px) and (orientation: portrait) and (max-height: 700px) {
  .turn-stage .tscore { display: none; }
  .scoreboard .sc-players { display: none; }
  .turn-stage:has(.cardwrap:not([hidden]) .card3d:not(.hidden)) .turn-top { display: none; }   /* explainer: the word and the skip button first */
}
@media (max-width: 400px) {   /* five buttons beside the minimap: tall enough for a finger, a little narrower */
  .topbar .btn, .topbar .icon-btn { min-inline-size: 40px; }
  .top-btns { gap: 2px; }
}

/* a phone held sideways gets the computer layout (the breakpoints in the other css files include it), just smaller */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .hud { zoom: .68; grid-template-columns: 152px minmax(0, 1fr) 440px; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; padding-block-end: max(8px, env(safe-area-inset-bottom)); }
  .room-id, .sc-players { display: none; }                      /* the side column is short here: the word must fit without scrolling */
  .topbar { justify-content: flex-end; }
  .top-btns { gap: 4px; }
  .scoreboard { gap: 5px; }
  .sc-team { padding-block: .2rem .25rem; }
  .turn-top { flex-wrap: nowrap; }
  .turn-stage .tscore { display: none; }
  .stage-box > section { gap: 6px; }
  .cardwrap { aspect-ratio: 3 / 1; }
  .mm { zoom: .68; }
  .chat-input { font-size: 24px; }                              /* 24 x .68 = 16px real: iPhone does not zoom in */
  .topbar .btn, .topbar .icon-btn { min-block-size: 58px; min-inline-size: 58px; }
  .ctl { inline-size: 58px; block-size: 58px; }
  .home-hero { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: 24px; }
}

/* keyboard open (viewport.js): the game fits the part of the screen that is left, the field stays above the keyboard */
html.kb-open .screen.game { inset-block-start: var(--vvt, 0); inset-block-end: auto; block-size: var(--vvh, 100dvh); }
html.kb-open .scoreboard, html.kb-open .mm, html.kb-open .topclock, html.kb-open .chat-log { display: none; }
html.kb-open .hud-panel { max-block-size: calc(var(--vvh, 50dvh) * .3); }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  html.kb-open .hud { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  html.kb-open .hud > :not(:has(:focus)) { display: none; }
  html.kb-open .hud > :has(:focus) { grid-column: 1; grid-row: 1; align-self: end; max-block-size: 100%; }
}