/* Shared phone layouts, including short viewports while typing. */
@media (max-width: 620px), (pointer: coarse) {
  button, input, select, textarea { touch-action: manipulation; }
  dialog button { min-height: 44px; }
  dialog input, dialog select, .search input, .lobby-friend-search { font-size: 16px !important; }
  .friends-close, .profile-close, .shop-close, .daily-close { min-width: 44px; flex-shrink: 0; }
  .avatar-swatches button { width: 44px; height: 44px; }
  .friends-tabs-row { gap: 5px; margin-inline: 16px; }
  .friends-tabs { gap: 12px; flex: 1; }
  .friends-tabs button { font-size: 11px; }
  .friends-refresh { width: 44px; height: 44px; }
  .friend-row { flex-wrap: wrap; }
  .friend-row .friend-identity { overflow-wrap: anywhere; }
  .friend-action, .friend-more { min-height: 44px; min-width: 44px; }
  .profile-identity { min-width: 0; }
  .profile-identity h3 { overflow-wrap: anywhere; }
  .profile-tabs { gap: 12px; flex-wrap: wrap; }
  .profile-tabs button { padding-bottom: 8px; }
  .profile-wallet { grid-column: 1 / -1; }
  .game-controls { flex-wrap: wrap; gap: 8px; }
  .game-controls #hint { max-width: none; width: 100%; font-size: 12px; line-height: 1.4; }
  .game-controls .frame-actions { margin-left: auto; gap: 6px; }
  .game-controls .frame-actions > button, .game-controls .rating-votes button { width: 44px; height: 44px; }
  .game-controls .game-rating { width: 94px; }
  .game-controls #pool-reaim { min-height: 44px; order: 2; }
  .game-controls:has(#pool-reaim:not([hidden])) .frame-actions { order: 3; }
  .game-hud .player small { font-size: 8px; letter-spacing: .5px; }
  .game-hud .scoreboard > span { font-size: 9px; letter-spacing: .6px; }
  .game-hud .player { font-size: 12px; min-width: 0; flex: 1; }
  .game-hud .player > span:not(.player-face) { min-width: 0; overflow-wrap: anywhere; }
  .game-hud .player-face { flex-shrink: 0; }
  .game-hud .rival { justify-content: flex-end; }
  .scoreboard { padding-inline: 6px; }
  .live-invite { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: none; max-height: calc(100dvh - 24px); overflow: auto; }
}
@media (max-width: 620px) {
  body > .play-header { display: grid; grid-template-columns: minmax(0,1fr) auto 44px 44px; gap: 8px; padding: 12px; }
  .play-header > .brand { grid-column: 1; grid-row: 1; }
  .play-header > .shop-trigger { grid-column: 2; grid-row: 1; padding: 8px; min-height: 44px; }
  .play-header > .friends-trigger { grid-column: 3; grid-row: 1; margin: 0; width: 44px; height: 44px; justify-content: center; }
  .play-header > .avatar { grid-column: 4; grid-row: 1; width: 44px; height: 44px; margin: 0; }
  .play-header > .back { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 12px; padding-block: 8px; justify-self: start; }
  .game-controls:has(#pool-reaim:not([hidden])) .frame-actions { flex-basis: 100%; justify-content: flex-end; }
  .shop-head { gap: 8px; padding: 16px; }
  .shop-head h2 { font-size: 24px; }
  .shop-head-right { gap: 6px; }
  .shop-balance { padding: 8px; }
  .shop-tabs { flex-wrap: wrap; }
  #coin-shop { height: auto; max-height: calc(100dvh - 24px); overflow: auto; }
  .shop-head { height: auto; min-height: 84px; position: sticky; top: 0; z-index: 1; }
  .shop-layout { display: block; flex: none; overflow: visible; }
  .shop-preview { grid-template-rows: auto auto auto auto; overflow: visible; }
  .shop-preview h3 { white-space: normal; }
  .shop-preview > button { min-height: 44px; }
  .shop-main { display: block; }
  .shop-tabs { height: auto; overflow: visible; }
  .shop-grid { overflow: visible; grid-auto-rows: auto; }
  .shop-item { height: auto; min-height: 180px; }
  .shop-item .item-buy { height: auto; min-height: 44px; }
  .shop-status { height: auto; white-space: normal; }
}
/* A short landscape arena cannot also contain a tall result card. */
.game-shell .canvas-wrap:has(.result:not([hidden])) { min-height: 340px; aspect-ratio: auto !important; }
.game-shell .result { padding: 18px 12px; overflow: auto; z-index: 2; }
.game-shell .result > div { max-width: 100%; margin: auto; }
.game-shell .result h2 { font-size: clamp(28px, 7vw, 48px); margin: 10px 0; }
.game-shell .result button { min-height: 44px; max-width: 100%; }
.game-shell:has(.result:not([hidden])) .touch-controls { display: none; }
/* Native fullscreen and an in-page fallback share the same fitted arena. */
body.game-expanded { overflow: hidden; }
.game-shell.is-expanded { position: fixed; inset: 0; z-index: 9000; width: 100%; height: 100dvh; border-radius: 0; }
.game-shell:is(:fullscreen,.is-expanded) { display: flex; flex-direction: column; justify-content: center; background: #192e3f; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.game-shell:is(:fullscreen,.is-expanded) > .game-hud, .game-shell:is(:fullscreen,.is-expanded) > .game-controls, .game-shell:is(:fullscreen,.is-expanded) > .touch-controls { flex-shrink: 0; width: 100%; }
.game-shell:is(:fullscreen,.is-expanded) .canvas-wrap { flex-shrink: 0; align-self: center; width: min(100%, var(--arena-width, 100%)); aspect-ratio: 5 / 3 !important; min-height: 0; overflow: hidden; }
.game-shell:is(:fullscreen,.is-expanded) #game { position: relative; left: 0; top: 0; width: 100%; height: auto; }
.game-shell:is(:fullscreen,.is-expanded) .canvas-wrap:has(.result:not([hidden])) { flex: 1; width: 100%; min-height: 0; }
.game-shell:is(:fullscreen,.is-expanded) .platform-lobby { flex: 1; min-height: 0; overflow: auto; align-items: safe center; }
.game-shell:is(:fullscreen,.is-expanded) .live-status { max-width: calc(100% - 24px); text-align: center; }
@media (max-height: 500px) {
  .game-shell:is(:fullscreen,.is-expanded) .game-hud { padding: 4px 12px; }
  .game-shell:is(:fullscreen,.is-expanded) .game-controls { padding: 4px 10px; min-height: 52px; }
  .game-shell:is(:fullscreen,.is-expanded) #hint { display: none; }
  .game-shell:is(:fullscreen,.is-expanded) .touch-controls { display: flex; padding: 4px; }
  .game-shell:is(:fullscreen,.is-expanded) .touch-controls[hidden] { display: none; }
}

/* Programmatic focus on screen headings/status text is for announcements, not a selection. */
:where(h1,h2,h3,h4,h5,h6,p,div,span,section,article,main,dialog,canvas)[tabindex]:focus,:focus:not(:focus-visible){outline:none!important}
:focus{outline:none}