/* Mobile usa pixels de tela para menus/toque e escala somente o palco 16:9. */
#game-view { position: absolute; inset: 0; }
.mobile-only { display: none; }
body.mobile { touch-action: manipulation; }
body.mobile #app { position: fixed; left: var(--viewport-left, 0px); top: var(--viewport-top, 0px); width: var(--viewport-width, 100vw); height: var(--viewport-height, 100dvh); transform: none; }
body.mobile #app.crt::after { opacity: .22; }
body.mobile #game-view { inset: auto; width: 960px; height: 540px; left: var(--arena-left, 0px); top: var(--arena-top, 0px); transform: scale(var(--arena-scale, .4)); transform-origin: top left; touch-action: none; }
body.mobile .screen { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
body.mobile .screen.on { animation: none; }
body.mobile .mobile-only { display: block; }
body.mobile .panel, body.mobile .panel.wide, body.mobile .panel.tall { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; max-height: none; margin: 0; padding: 16px 12px; overflow: visible; }
body.mobile .panel h2, body.mobile .sel-head h2 { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
body.mobile .sub, body.mobile .net-hint { font: 14px/1.65 system-ui, sans-serif; overflow-wrap: anywhere; }
body.mobile .row { gap: 10px; }
body.mobile .btn { min-height: 44px; max-width: 100%; min-width: 0; font-size: 10px; line-height: 1.6; padding: 12px; overflow-wrap: anywhere; }
body.mobile .btn.tiny { font-size: 9px; min-height: 44px; margin: 0; }
body.mobile input:not([type=checkbox]):not([type=range]), body.mobile select { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font: 16px/1.3 system-ui, sans-serif; }
body.mobile input, body.mobile textarea { user-select: text; touch-action: auto; }
body.mobile input[type=checkbox] { width: 24px; height: 24px; flex: none; }
body.mobile input[type=range] { width: 100%; min-height: 44px; }
body.mobile button:focus-visible, body.mobile input:focus-visible, body.mobile select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.mobile #scr-title .logo { width: min(92%, 560px); margin-top: max(24px, calc(var(--viewport-height) * .16)); }
body.mobile .tagline { font-size: 9px; line-height: 1.8; letter-spacing: 0; padding: 0 12px; }
body.mobile .press-start { min-height: 56px; padding: 12px; font-size: 15px; line-height: 1.6; }
body.mobile .hint { font: 14px/1.6 system-ui, sans-serif; }
body.mobile .credit { position: relative; bottom: auto; font: 11px/1.6 system-ui, sans-serif; margin-top: 32px; }
body.mobile #scr-menu.on { display: flex; flex-direction: column; gap: 14px; }
body.mobile #scr-menu .logo.small { position: static; width: min(300px, 80%); margin: 0 auto; }
body.mobile .main-menu { position: static; width: 100%; max-height: none; overflow: visible; padding: 0; gap: 8px; }
body.mobile .mm { min-height: 60px; width: 100%; padding: 12px 12px 12px 28px; gap: 6px; }
body.mobile .mm span { font-size: 12px; line-height: 1.6; }
body.mobile .mm small { font: 13px/1.45 system-ui, sans-serif; }
body.mobile .mm:focus, body.mobile .mm:hover { transform: none; }
body.mobile .menu-side { position: static; width: 100%; }
body.mobile .stats-card { font: 13px/1.6 system-ui, sans-serif; }
body.mobile .stats-card h3 { font-size: 12px; }
body.mobile .account-card { font: 14px/1.6 system-ui, sans-serif; padding: 14px; }
body.mobile .account-card h3 { font: 12px/1.6 'Press Start 2P', monospace; }
body.mobile .account-help, body.mobile .account-error, body.mobile .account-state, body.mobile .account-cloud-status { font: 14px/1.6 system-ui, sans-serif; overflow-wrap: anywhere; }
body.mobile .account-action { min-height: 44px; font: 11px/1.5 'Press Start 2P', monospace; padding: 12px; }
body.mobile .opts { grid-template-columns: 1fr; gap: 18px; font: 14px/1.6 system-ui, sans-serif; }
body.mobile .custom-rules { flex-direction: column; align-items: stretch; gap: 16px; margin: 18px 0; }
body.mobile .custom-rules label { font: 14px/1.6 system-ui, sans-serif; flex-wrap: wrap; }
body.mobile .custom-rules select { flex: 1; min-width: 160px; }
body.mobile .sel-head { position: relative; padding: 4px 0 12px; }
body.mobile .sel-mode { font-size: 9px; line-height: 1.7; }
body.mobile .sel-layout { position: static; display: flex; flex-direction: column; gap: 14px; }
body.mobile .sel-grid-wrap { order: -1; display: block; height: auto; overflow: visible; }
body.mobile .sel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 4px; }
body.mobile .cell { width: 100%; height: auto; min-height: 64px; padding: 3px; }
body.mobile .cell .face { width: 100%; height: auto; aspect-ratio: 1; }
body.mobile .cell .nm { font-size: 6px; padding: 5px 0; }
body.mobile .sel-help { font: 13px/1.6 system-ui, sans-serif; max-width: none; margin: 14px 0 6px; }
body.mobile .sel-card { min-height: 300px; padding: 12px; }
body.mobile .sel-card .big-sprite { position: relative; left: 50%; margin: -34px 0 -72px -160px; transform: scale(.65); }
body.mobile .sel-card.p2 .big-sprite { transform: scale(.65) scaleX(-1); }
body.mobile .sel-card .big-sprite.q, body.mobile .sel-card .big-sprite.locked { left: auto; width: 100%; margin: 0; transform: none; height: 100px; font-size: 56px; }
body.mobile .sel-card h3 { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
body.mobile .sel-card .ttl, body.mobile .theme { font: 13px/1.6 system-ui, sans-serif; }
body.mobile .trait small { font: 13px/1.5 system-ui, sans-serif; }
body.mobile .kit .tx { min-width: 0; }
body.mobile .kit .tx b { font-size: 9px; line-height: 1.7; overflow-wrap: anywhere; }
body.mobile .kit .tx small, body.mobile .kit .tx em { font: 12px/1.5 system-ui, sans-serif; }
body.mobile .kit li { padding: 5px; }
body.mobile .stage-layout { position: static; display: flex; flex-direction: column; gap: 14px; }
body.mobile .stage-preview { font: 13px/1.6 system-ui, sans-serif; }
body.mobile .stage-preview h3 { font-size: 12px; }
body.mobile .stage-grid { overflow: visible; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.mobile .st-cell { min-height: 64px; }
body.mobile .st-cell .nm { font-size: 6px; line-height: 1.5; }
body.mobile .stage-opts { position: static; margin-top: 16px; flex-wrap: wrap; gap: 14px; }
body.mobile .stage-opts label { width: 100%; font: 14px/1.6 system-ui, sans-serif; }
body.mobile .stage-opts select { flex: 1; }
body.mobile .stage-opts .btn { width: 100%; }
body.mobile .pet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mobile .pet b { font-size: 9px; }
body.mobile .pet small { font: 12px/1.5 system-ui, sans-serif; }
body.mobile .pet-tabs { flex-wrap: wrap; }
body.mobile .tab, body.mobile .mp { min-height: 44px; min-width: 44px; }
body.mobile .moves-keys table, body.mobile .res-table { font: 12px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
body.mobile .moves-list h3 { font-size: 12px; line-height: 1.6; }
body.mobile .moves-list h3 small { font: 12px/1.6 system-ui, sans-serif; }
body.mobile .res-win { flex-direction: column; height: auto; overflow: hidden; }
body.mobile .res-win blockquote { margin: 0 0 10px; font: 14px/1.6 system-ui, sans-serif; }
body.mobile .score { font: 13px/1.5 system-ui, sans-serif; }
body.mobile .net-connect label, body.mobile .net-lobby label { width: 100%; flex-direction: column; align-items: stretch; font: 14px/1.6 system-ui, sans-serif; }
body.mobile .net-connect input[type=text] { width: 100%; }
body.mobile .net-connect .row, body.mobile .net-lobby .row { align-items: stretch; }
body.mobile .net-connect .row > *, body.mobile .net-lobby .row > .btn { flex: 1 1 130px; }
body.mobile .net-status { font: 14px/1.6 system-ui, sans-serif; overflow-wrap: anywhere; }
body.mobile .net-directory-head { flex-wrap: wrap; font-size: 10px; }
body.mobile .net-room-row span { min-width: 0; font: 13px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
body.mobile .net-room-row small { font: 12px/1.5 system-ui, sans-serif; }
body.mobile .lobby-players, body.mobile .lobby-players.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mobile .lp { min-width: 0; font: 13px/1.5 system-ui, sans-serif; }
body.mobile .lp .pn { font-size: 11px; overflow-wrap: anywhere; }
body.mobile .lobby-code { font: 13px/1.6 system-ui, sans-serif; }
body.mobile .lobby-code b { display: block; font: 20px/1.6 'Press Start 2P', monospace; letter-spacing: 3px; }
body.mobile .lobby-config { font: 13px/1.6 system-ui, sans-serif; }
body.mobile .lobby-config label { width: auto; flex-direction: row; align-items: center; }
body.mobile .chat-log { height: 120px; font: 13px/1.5 system-ui, sans-serif; }
body.mobile .lobby-chat input { width: 100%; }
body.mobile #toast { max-width: calc(100% - 24px); width: max-content; white-space: normal; font: 12px/1.5 system-ui, sans-serif; bottom: max(12px, env(safe-area-inset-bottom)); }
body.mobile[data-screen=fight] #toast { top: max(8px, env(safe-area-inset-top)); bottom: auto; }
body.mobile #touch-controls { position: absolute; inset: 0; }
body.mobile #touch-controls button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; font: 9px/1.3 'Press Start 2P', monospace; background: rgba(38,25,65,.95); border-color: #8b79ad; }
body.mobile #touch-controls button.on { background: #735825; border-color: var(--gold); }
body.mobile .dpad { left: max(12px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: 136px; height: 136px; }
body.mobile .dpad .t-up { left: 46px; top: 0; }
body.mobile .dpad .t-down { left: 46px; bottom: 0; }
body.mobile .dpad .t-left { left: 0; top: 46px; }
body.mobile .dpad .t-right { right: 0; top: 46px; }
body.mobile .tbtns { right: max(12px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); grid-template-columns: repeat(3, 44px); gap: 4px; }
.touch-toolbar { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; pointer-events: auto; }
#touch-controls .touch-toolbar button { border-radius: 8px; width: auto; min-width: 52px; }
body.mobile .touch-toolbar { top: max(8px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
body.mobile #touch-controls .touch-toolbar button { padding: 8px; width: auto; font-size: 8px; }
body.mobile .mobile-landscape-hint { position: absolute; left: 12px; top: 12px; max-width: 46%; font: 12px/1.5 system-ui, sans-serif; color: #c9b8ff; pointer-events: none; }
body.mobile.landscape .mobile-landscape-hint { display: none; }
body.mobile #loader .ld-title { font-size: 18px; }
body.mobile #loader #ld-text { max-width: 88%; text-align: center; line-height: 1.6; }
@media (orientation: landscape) {
  body.mobile .main-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.mobile .menu-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  body.mobile .sel-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  body.mobile .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.mobile .stage-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* HUD legível mantém medidas físicas mesmo quando o Canvas está reduzido. */
body.mobile #hud .side .face { display: none; }
body.mobile .hud-top { grid-template-columns: minmax(0,1fr) calc(56px / var(--arena-scale)) minmax(0,1fr); gap: calc(3px / var(--arena-scale)); }
body.mobile #hud .info { min-width: 0; }
body.mobile #hud .nameline { font: 700 calc(10px / var(--arena-scale))/1.5 system-ui, sans-serif; }
body.mobile #hud .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile #hud-timer { font: 800 calc(22px / var(--arena-scale))/1.2 system-ui, sans-serif; }
body.mobile #hud .life { height: calc(14px / var(--arena-scale)); }
body.mobile #hud .lifenum { font: 700 calc(10px / var(--arena-scale))/1.3 system-ui, sans-serif; }
body.mobile #hud .m { font: 700 calc(7px / var(--arena-scale))/1.2 system-ui, sans-serif; }
body.mobile #hud .m span { height: calc(4px / var(--arena-scale)); }
body.mobile #hud .statuses span { font: 700 calc(8px / var(--arena-scale))/1.4 system-ui, sans-serif; }
body.mobile #hud .statuses { max-height: calc(26px / var(--arena-scale)); overflow: hidden; }
body.mobile .hud-stage, body.mobile .speech { display: none; }
body.mobile .tbtns button { position: relative; }
.touch-key { position: absolute; bottom: 1px; right: 2px; color: #fff; background: rgba(0,0,0,.85); padding: 2px 3px; border-radius: 4px; }
body.mobile .mobile-landscape-hint { max-width: 42%; }