/* A composição mobile usa os rasters de /g/skin/ da família visual aprovada. A aceitação das telas executáveis é separada.
   Fora do modo mobile (body.ma-mobile, ligado por mobile.js), este arquivo é inerte. */
@font-face { font-family: "Barlow Condensed"; src: url("/g/skin/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }
@font-face { font-family: "Barlow Condensed"; src: url("/g/skin/BarlowCondensed-Black.ttf") format("truetype"); font-weight: 800 900; font-display: block; }
@font-face { font-family: "Yanone Kaffeesatz"; src: url("/g/skin/YanoneKaffeesatz.ttf") format("truetype"); font-weight: 200 700; font-display: block; }

#ma-root { display: none; }
body.ma-mobile { --ma-display: "Yanone Kaffeesatz", "DIN Condensed", "Arial Narrow", sans-serif; --ma-ui: "Barlow Condensed", "Avenir Next Condensed", Arial, sans-serif;
  --ma-gold: #ffe28a; --ma-steel: #c8dfe9; --ma-amber: #ffc12e; --ma-lime: #b3ef39; --ma-cyan: #42cfff; --ma-red: #ff786b; --ma-ivory: #f2f2e8;
  --ma-safe-t: env(safe-area-inset-top, 0px); --ma-safe-r: env(safe-area-inset-right, 0px); --ma-safe-b: env(safe-area-inset-bottom, 0px); --ma-safe-l: env(safe-area-inset-left, 0px); }

/* ---------- o modo mobile substitui as telas do canvas; a partida (canvas 4:3) continua a do desktop ---------- */
body.ma-mobile #ma-root { display: block; position: fixed; inset: 0; z-index: 20; color: var(--ma-ivory); font: 600 18px/1.25 var(--ma-ui); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.ma-mobile #a11y, body.ma-mobile #overlay { display: none; }
body.ma-mobile #ui, body.ma-mobile #matchHost, body.ma-mobile #matchHost canvas { pointer-events: none !important; }
body.ma-mobile:not(.ma-match) #stage { visibility: hidden; }
body.ma-mobile.ma-popup #ui { visibility: hidden; }
/* partida: o palco 4:3 sobe para o topo e a faixa livre (retrato) ou as laterais (paisagem) recebem os controles */
body.ma-mobile.ma-match { place-items: start center; padding-top: var(--ma-safe-t); }
body.ma-mobile.ma-match #ma-root { pointer-events: none; }
body.ma-mobile.ma-match .ma-app { display: none; }
body.ma-mobile.ma-match #ma-root .ma-modal, body.ma-mobile.ma-match #ma-root .ma-pad { pointer-events: auto; }
@media (orientation: landscape) { body.ma-mobile.ma-match { place-items: center; padding-top: 0; } }

.ma-app, .ma-modal, .ma-pad { position: absolute; inset: 0; }
.ma-app { background: #05080b; isolation: isolate; }
.ma-app::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/g/skin/background.png") center / cover no-repeat; filter: contrast(.7) brightness(.44); pointer-events: none; }
.ma-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ma-page button, .ma-page input, .ma-modal button { font-family: var(--ma-ui); }
#ma-root button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
#ma-root [inert] { pointer-events: none; }
.ma-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- matéria: painel nine-slice, cabeçalho e placas cortados dos rasters ---------- */
.ma-panel { --edge: 14px; border: var(--edge) solid transparent; border-image: url("/g/skin/panel.png") 87 fill / var(--edge) stretch; padding: 6px 8px 10px; min-width: 0; }
.ma-panel > .ma-head { margin: -6px -2px 8px; }

/* cabeçalho: headers.png (3 faixas: olive, amber, petrol); aba à esquerda (42%), corpo esticado, fecho à direita (4%) */
.ma-head { --hh: 52; --k: calc(var(--hh) / 241.33); position: relative; height: calc(var(--hh) * 1px); display: flex; align-items: center; min-width: 0; color: #fff; }
.ma-head i.l, .ma-head i.m, .ma-head i.r { position: absolute; top: 0; bottom: 0; background: url("/g/skin/headers.png") no-repeat; pointer-events: none; }
.ma-head i.l { left: 0; width: calc(var(--k) * 912px); background-size: calc(var(--k) * 2172px) calc(var(--k) * 724px); background-position: 0 calc(var(--row) * var(--hh) * -1px); }
.ma-head i.m { left: calc(var(--k) * 912px - 1px); right: calc(var(--k) * 87px - 1px); background-size: calc(100% * 2172 / 1173) calc(var(--k) * 724px); background-position: 91.29% calc(var(--row) * var(--hh) * -1px); }
.ma-head i.r { right: 0; width: calc(var(--k) * 87px); background-size: calc(var(--k) * 2172px) calc(var(--k) * 724px); background-position: calc(var(--k) * -2085px) calc(var(--row) * var(--hh) * -1px); }
.ma-head.t-olive { --row: 0; } .ma-head.t-amber { --row: 1; } .ma-head.t-petrol { --row: 2; }
.ma-head .ti { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 20px 0 22px; font: 700 26px/1 var(--ma-display); letter-spacing: .01em; word-spacing: .16em; text-shadow: 0 1px 0 #000, 0 0 4px rgba(0, 0, 0, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ma-head .ti .ma-ico { --is: 30px; flex: none; margin-top: -8px; }
.ma-head .aside { position: relative; margin-left: auto; padding: 12px 22px 0 8px; font: 700 20px/1 var(--ma-display); color: var(--ma-gold); text-shadow: 0 1px 0 #000; white-space: nowrap; }

/* placas de ação: chrome.png (steel, petrol, olive, amber, blue, orange). Caps de 55px de origem, corpo esticado só na horizontal */
.ma-btn { --bhn: 48; --k: calc(var(--bhn) / var(--ph)); --cap: calc(var(--k) * 55px); position: relative; display: inline-flex; align-items: center; justify-content: center; height: calc(var(--bhn) * 1px); min-width: 48px; padding: 0 calc(var(--cap) + 4px); margin: 0; border: 0; background: none; color: #fff; font: 800 20px/1 var(--ma-ui); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .85); }
.ma-btn > i { position: absolute; top: 0; bottom: 0; background: url("/g/skin/chrome.png") no-repeat; pointer-events: none; }
.ma-btn > i.l { left: 0; width: var(--cap); background-size: calc(var(--k) * 2172px) calc(var(--k) * 724px); background-position: calc(var(--k) * var(--px) * -1px) calc(var(--k) * var(--py) * -1px); }
.ma-btn > i.m { left: calc(var(--cap) - 1px); right: calc(var(--cap) - 1px); background-size: calc(100% * 2172 / (var(--pw) - 110)) calc(var(--k) * 724px); background-position: calc((var(--px) + 55) / (2172 - (var(--pw) - 110)) * 100%) calc(var(--k) * var(--py) * -1px); }
.ma-btn > i.r { right: 0; width: var(--cap); background-size: calc(var(--k) * 2172px) calc(var(--k) * 724px); background-position: calc(var(--k) * (var(--px) + var(--pw) - 55) * -1px) calc(var(--k) * var(--py) * -1px); }
.ma-btn .t { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.02; overflow: hidden; }
.ma-btn .ma-ico { --is: 28px; flex: none; }
.ma-btn.sm { font-size: 17px; letter-spacing: .02em; } .ma-btn.sm .ma-ico { --is: 20px; }
.ma-btn.sm .t { gap: 5px; }
.t-steel { --px: 44; --py: 32; --pw: 1023; --ph: 203; }   .t-petrol { --px: 1102; --py: 32; --pw: 1025; --ph: 203; }
.t-olive { --px: 44; --py: 254; --pw: 1023; --ph: 202; }  .t-amber { --px: 1101; --py: 254; --pw: 1026; --ph: 202; }
.t-blue { --px: 44; --py: 482; --pw: 1023; --ph: 207; }   .t-orange { --px: 1101; --py: 482; --pw: 1026; --ph: 205; }
.ma-btn.block { display: flex; width: 100%; }
.ma-btn.icon { min-width: 56px; } .ma-btn.flip .ma-ico { transform: scaleX(-1); }
.ma-btn.tall { --bhn: 56; font-size: 24px; }
.ma-btn.pressed, .ma-btn[aria-pressed="true"] { filter: brightness(1.3) saturate(1.1); }
.ma-btn:active { filter: brightness(1.22); }
.ma-btn:disabled, .ma-btn[aria-disabled="true"] { filter: grayscale(.85) brightness(.6); cursor: default; }
.ma-btn:focus-visible, .ma-row:focus-visible, .ma-hero:focus-visible, .ma-char:focus-visible, .ma-action:focus-visible, .ma-slot:focus-visible, .ma-input:focus-visible, .ma-pb:focus-visible { outline: 3px solid var(--ma-amber); outline-offset: 2px; box-shadow: 0 0 0 6px #000; }

/* placas grandes de actions.png: INICIAR (linha 0, triângulo à esquerda) e ADICIONAR BOT (linha 1, mira e cruz ao centro) */
.ma-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; margin: 0; padding: 0; border: 0; color: #fff; background: url("/g/skin/actions.png") no-repeat; background-size: 100% 200%; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .8); }
.ma-action.go { height: 74px; background-position: 0 0; padding-left: 20%; font: 800 30px/1 var(--ma-ui); letter-spacing: .03em; text-transform: uppercase; }
.ma-action.go small { display: block; margin-top: 1px; font: 700 16px/1 var(--ma-ui); letter-spacing: 0; text-transform: none; color: #ffe28a; }
.ma-action.go .ct { text-align: center; }
.ma-action.bot { background-position: 0 100%; padding: 0 8% 0 58%; font: 800 16px/1.05 var(--ma-ui); letter-spacing: 0; white-space: normal; text-align: center; overflow-wrap: normal; text-transform: uppercase; color: var(--ma-steel); }
.ma-action:disabled { filter: grayscale(.8) brightness(.6); }
.ma-action:active { filter: brightness(1.2); }

/* ícones: icons.png (4x5) e icons-extra.png (4x3) */
.ma-ico { --is: 28px; display: inline-block; flex: none; height: var(--is); width: calc(var(--is) * 1.4); background: url("/g/skin/icons.png") no-repeat; background-size: 400% 500%; background-position: calc(var(--c) * 100% / 3) calc(var(--r) * 100% / 4); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)); }
.ma-ico.x { width: var(--is); background-image: url("/g/skin/icons-extra.png"); background-size: 400% 300%; background-position: calc(var(--c) * 100% / 3) calc(var(--r) * 100% / 2); }
.ma-ico.neutral-skull { background-image: url("/g/skin/skull-neutral.png"); background-size: contain; background-position: center; }

/* retratos: portraits.png (2x2, cada célula 3:4) */
.ma-portrait { display: block; flex: none; aspect-ratio: 3 / 4; background: #0a121a url("/g/skin/portraits.png") no-repeat; background-size: 200% 200%; background-position: calc(var(--hc) * 100%) calc(var(--hr) * 100%); border: 2px solid #0a0e12; box-shadow: 0 0 0 1px rgba(200, 223, 233, .35); }

/* ---------- estrutura da página ---------- */
.ma-top { flex: none; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: calc(var(--ma-safe-t) + 6px) calc(var(--ma-safe-r) + 12px) 6px calc(var(--ma-safe-l) + 12px); background: linear-gradient(#020304, rgba(2, 3, 4, .7)); border-bottom: 2px solid rgba(200, 223, 233, .18); }
.ma-top img { height: 38px; width: auto; flex: none; }
.ma-top h1 { margin: 0; flex: 1; min-width: 0; font: 700 26px/1.05 var(--ma-display); word-spacing: .16em; letter-spacing: .01em; text-shadow: 0 1px 0 #000, 0 0 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-top h1:focus { outline: none; }
.ma-top .ma-btn { --bhn: 44; font-size: 17px; }
.ma-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px calc(var(--ma-safe-r) + 12px) 16px calc(var(--ma-safe-l) + 12px); scrollbar-width: thin; scrollbar-color: #ffc12e #0a0e12; }
.ma-scroll:focus { outline: none; }
.ma-scroll > * + * { margin-top: 12px; }
.ma-scroll > .ma-cols { margin-top: 12px; }
.ma-dock { flex: none; display: grid; gap: 8px; padding: 10px calc(var(--ma-safe-r) + 12px) calc(var(--ma-safe-b) + 10px) calc(var(--ma-safe-l) + 12px); background: linear-gradient(rgba(2, 3, 4, .72), #020304); border-top: 2px solid rgba(200, 223, 233, .18); }
.ma-dock .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.ma-cols { display: grid; gap: 12px; min-width: 0; }
.ma-cols > * { min-width: 0; }
.ma-cols > * + * { margin-top: 0; }
.ma-muted { color: var(--ma-steel); }
.ma-note { margin: 0; padding: 4px 4px 0; font: 600 18px/1.3 var(--ma-ui); color: var(--ma-steel); }
.ma-stack > * + * { margin-top: 8px; }
.ma-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ma-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ---------- personagens ---------- */
.ma-chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ma-char { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 44px; padding: 8px; margin: 0; color: inherit; text-align: center; background: #0a1017; border: 2px solid #26333d; border-radius: 4px; }
.ma-char .ma-portrait { width: 100%; max-height: 240px; }
.ma-char b { font: 700 28px/1 var(--ma-display); text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-char .sub { color: var(--ma-gold); font-size: 18px; }
.ma-char .tag { position: absolute; top: 12px; left: 12px; padding: 3px 8px; font: 800 16px/1.1 var(--ma-ui); letter-spacing: .05em; color: #10200a; background: var(--ma-lime); border-radius: 2px; }
.ma-char[aria-pressed="true"] { border-color: var(--ma-lime); box-shadow: 0 0 0 2px rgba(179, 239, 57, .35), inset 0 0 26px rgba(120, 170, 30, .28); }
.ma-char.free { justify-content: center; align-items: center; padding: 0; background: none; border: 0; }
.ma-char.free .ma-action { height: 100%; min-height: 96px; }
.ma-heroes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ma-hero { display: flex; flex-direction: column; gap: 4px; align-items: center; min-height: 44px; padding: 6px; margin: 0; color: inherit; background: #0a1017; border: 2px solid #26333d; border-radius: 4px; font: 700 18px/1.1 var(--ma-ui); }
.ma-hero .ma-portrait { width: 100%; }
.ma-hero[aria-pressed="true"] { border-color: var(--ma-lime); background: #142006; }
.ma-stage { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; }
.ma-stage .ma-portrait { width: min(42vw, 260px); }
.ma-stage .ma-btn { flex: none; }
.ma-field { display: grid; gap: 6px; }
.ma-field label { font: 700 20px/1 var(--ma-display); color: var(--ma-gold); word-spacing: .16em; }
.ma-input { width: 100%; height: 48px; padding: 0 12px; margin: 0; color: #f4f1e6; background: #142b3e; border: 2px solid var(--ma-amber); border-radius: 3px; font: 600 20px/1 var(--ma-ui); caret-color: var(--ma-amber); -webkit-appearance: none; appearance: none; }
.ma-input::placeholder { color: #a4aab0; }

/* ---------- lobby ---------- */
.ma-agent .body { display: flex; gap: 12px; align-items: stretch; }
.ma-agent .ma-portrait { width: 34%; max-width: 150px; }
.ma-agent .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ma-agent .who b { font: 700 36px/1 var(--ma-display); text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-agent .who .ln { display: flex; align-items: center; gap: 8px; color: var(--ma-steel); font-size: 20px; }
.ma-agent .who .ln.money { color: var(--ma-amber); font: 700 26px/1 var(--ma-display); }
.ma-equip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ma-equip span { width: 60px; height: 52px; padding: 2px; background: #0a1017 url("/g/skin/background.png") center / cover; border: 2px solid #3a4a58; border-radius: 3px; display: grid; place-items: center; }
.ma-equip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ma-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ma-quick .wide { grid-column: 1 / -1; }
.ma-list > * + * { margin-top: 8px; }
.ma-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 68px; padding: 8px 10px; margin: 0; color: inherit; text-align: left; background: rgba(4, 8, 12, .86); border: 2px solid #26333d; border-radius: 4px; }
.ma-row .no { flex: none; width: 3.1ch; font: 700 26px/1 var(--ma-display); color: var(--ma-steel); }
.ma-row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ma-row .ttl { font: 800 21px/1.15 var(--ma-ui); text-shadow: 0 1px 0 #000; overflow-wrap: anywhere; }
.ma-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ma-steel); font-size: 17px; }
.ma-row .meta span { display: inline-flex; align-items: center; gap: 5px; }
.ma-row .meta .ma-ico { --is: 22px; }
.ma-row .meta .mode { color: var(--ma-gold); }
.ma-row .go { flex: none; min-width: 96px; padding: 0 calc(var(--cap) + 8px); text-align: center; font: 800 20px/1 var(--ma-ui); letter-spacing: .03em; white-space: nowrap; }
.ma-row.is-sel { border-color: var(--ma-lime); background: rgba(24, 40, 8, .92); box-shadow: 0 0 0 2px rgba(179, 239, 57, .3); }
.ma-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 6px 8px; margin-top: 10px; }
.ma-pager .range { grid-column: 1 / -1; text-align: center; color: var(--ma-steel); font-size: 18px; }
.ma-pager .ma-btn { --bhn: 44; font-size: 17px; }

/* chat */
.ma-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ma-tabs .ma-btn { --bhn: 44; font-size: 17px; width: 100%; }
.ma-log { height: 132px; margin: 8px 0; padding: 6px 8px; overflow-y: auto; overscroll-behavior: contain; background: rgba(0, 0, 0, .35); border-radius: 3px; font-size: 18px; line-height: 1.3; }
.ma-log p { margin: 0 0 2px; overflow-wrap: anywhere; text-shadow: 0 1px 0 #000; }
.ma-send { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ma-send .ma-input { border-color: #3a4a58; }
.ma-send .ma-btn { --bhn: 48; min-width: 64px; }

/* ---------- sala ---------- */
.ma-lead { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ma-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin: 0; color: #fff; background: #10200a; border: 2px solid #4c7a14; border-radius: 3px; font: 800 19px/1 var(--ma-ui); text-shadow: 0 1px 0 #000; }
.ma-chip .ma-ico { --is: 26px; }
.ma-chip.gold { background: #2a1f08; border-color: #8a6410; color: var(--ma-gold); }
button.ma-chip:active { filter: brightness(1.3); }
.ma-brief { margin: 0 0 8px; padding: 8px 10px; background: rgba(8, 33, 57, .8); border: 2px solid #12445f; border-radius: 3px; }
.ma-brief h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 22px/1 var(--ma-display); color: var(--ma-cyan); word-spacing: .16em; }
.ma-brief h3 .ma-ico { --is: 24px; }
.ma-brief p { margin: 0; font-size: 19px; }
.ma-thumb { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: 2px solid #0a0e12; border-radius: 3px; box-shadow: 0 0 0 1px rgba(200, 223, 233, .3); }
.ma-map { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 700 24px/1.1 var(--ma-display); }
.ma-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ma-slot { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-height: 44px; padding: 6px; margin: 0; color: inherit; text-align: center; background: #0a1017; border: 2px solid var(--tone, #3a4a58); border-radius: 4px; }
.ma-slot .ma-portrait { width: 100%; aspect-ratio: 4 / 3; background-size: 200% auto; background-position: calc(var(--hc) * 100%) calc(var(--hr) * 69.57%); }
.ma-slot { container-type: inline-size; }
.ma-slot b { font: 700 22px/1.05 var(--ma-display); overflow-wrap: anywhere; text-shadow: 0 1px 0 #000; min-height: 2.1em; display: grid; align-content: center; }
.ma-slot .st { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ma-lime); font: 800 17px/1 var(--ma-ui); letter-spacing: .02em; white-space: nowrap; }
@container (max-width: 118px) { .ma-slot .st .ma-ico { display: none; } }
.ma-slot .st .ma-ico { --is: 22px; }
.ma-slot .hint { color: var(--ma-steel); font-size: 16px; line-height: 1.15; }
.ma-slot .lead { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; font: 800 16px/1.2 var(--ma-ui); color: #1b1200; background: var(--ma-amber); border-radius: 2px; }
.ma-slot .lead .ma-ico { --is: 20px; }
.ma-slot.n { --tone: #2d6ea8; cursor: default; } .ma-slot.h0 { --tone: #2d6ea8; } .ma-slot.h1 { --tone: #b46a1e; } .ma-slot.h2 { --tone: #b0364a; } .ma-slot.h3 { --tone: #7a45c0; }
.ma-slot.free { padding: 0; background: none; border: 0; }
.ma-slot.free .ma-action { height: 100%; min-height: 96px; }
.ma-slot.off { opacity: .55; cursor: default; }
.ma-slot.off .hint { padding: 12px 4px; }

/* ---------- carregamento, resultado, despedida ---------- */
.ma-center { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ma-load { display: flex; gap: 14px; align-items: center; }
.ma-load .ma-portrait { width: 34%; max-width: 150px; }
.ma-load h2, .ma-big { margin: 0; font: 700 34px/1 var(--ma-display); word-spacing: .16em; text-shadow: 0 1px 0 #000; }
.ma-load .sub { color: var(--ma-gold); font-size: 22px; }
.ma-bar { position: relative; height: 16px; overflow: hidden; background: rgba(0, 0, 0, .6); border: 2px solid #3a4a58; border-radius: 2px; }
.ma-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--ma-amber); animation: ma-slide 1.3s linear infinite; }
.ma-bar.err::after { animation: none; left: 0; width: 100%; background: var(--ma-red); }
@keyframes ma-slide { to { left: 100%; } }
.ma-alert { margin: 0; padding: 10px 12px; color: #fff; background: #4a1410; border: 2px solid var(--ma-red); border-radius: 3px; font-size: 19px; }
.ma-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.ma-table th { padding: 6px 4px; color: var(--ma-gold); font: 700 20px/1 var(--ma-display); text-align: center; background: #312742; word-spacing: .16em; }
.ma-table td { padding: 8px 4px; text-align: center; border-bottom: 1px solid rgba(200, 223, 233, .15); }
.ma-table td.nm { text-align: left; overflow-wrap: anywhere; }
.ma-table tr.me td { color: #b8f27a; font-weight: 800; }
.ma-reward { margin: 0; text-align: center; font: 700 26px/1.15 var(--ma-display); word-spacing: .16em; }
.ma-reward.up { color: var(--ma-amber); }

/* ---------- diálogos (popups do jogo) ---------- */
.ma-modal { z-index: 30; display: flex; align-items: center; justify-content: center; padding: calc(var(--ma-safe-t) + 12px) calc(var(--ma-safe-r) + 12px) calc(var(--ma-safe-b) + 12px) calc(var(--ma-safe-l) + 12px); background: rgba(0, 0, 0, .72); }
.ma-modal[hidden] { display: none; }
.ma-dialog { display: flex; flex-direction: column; width: min(100%, 520px); max-height: 100%; }
.ma-dialog > .ma-head { flex: none; }
.ma-dialog .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 6px 8px; }
.ma-dialog .scroll > * + * { margin-top: 10px; }
.ma-dialog .scroll > p { margin: 0; font-size: 19px; line-height: 1.3; }
.ma-dialog .foot { flex: none; display: grid; gap: 8px; padding: 8px 4px 0; }
.ma-dialog .foot.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ma-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.ma-toggles .ma-btn { width: 100%; min-width: 0; }
.ma-dialog .foot .ma-btn { width: 100%; min-width: 0; }
.ma-dialog .foot .ma-btn .t { white-space: normal; overflow: visible; line-height: 1.05; text-align: center; }
@media (max-width: 480px) { .ma-dialog .foot.two { grid-template-columns: 1fr; } }
.ma-dialog h2 { margin: 0; font: 700 24px/1.1 var(--ma-display); color: var(--ma-amber); word-spacing: .16em; }
.ma-dialog ul { margin: 0; padding: 0 0 0 22px; }
.ma-dialog li { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.ma-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ma-legend li { display: block; margin: 0; padding: 0; font-size: 18px; line-height: 1.2; }
.ma-legend b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ma-gold); font-weight: 800; overflow-wrap: anywhere; }
.ma-legend .d { display: block; color: var(--ma-ivory); }
.ma-legend .keys { display: inline-flex; gap: 4px; }
.ma-legend .ma-ico.k { --is: 22px; }
.ma-ico.rot-r { transform: scaleX(-1); } .ma-ico.rot-u { transform: rotate(90deg); } .ma-ico.rot-d { transform: rotate(-90deg); }
.ma-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ma-items > * + * { margin-top: 8px; }
.ma-item { display: flex; gap: 10px; align-items: center; padding: 8px; background: rgba(8, 33, 57, .8); border: 2px solid #12445f; border-radius: 3px; }
.ma-item.alt { background: rgba(4, 8, 12, .86); border-color: #26333d; }
.ma-item .pic { flex: none; width: 76px; height: 56px; display: grid; place-items: center; background: #0a1017 url("/g/skin/background.png") center / cover; border-radius: 3px; }
.ma-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ma-item b { display: block; font: 700 24px/1.05 var(--ma-display); text-shadow: 0 1px 0 #000; }
.ma-item .st { color: var(--ma-steel); font-size: 17px; }

/* ---------- controles de toque da partida ---------- */
.ma-pad { display: none; z-index: 25; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: none; }
body.ma-mobile.ma-match .ma-pad { display: block; }
.ma-pad.off { display: none !important; }
.ma-aim { position: fixed; touch-action: none; pointer-events: auto; }
.ma-pad > .c { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "strip strip strip" "dpad . acts"; align-items: end; gap: 8px 10px;
  padding: 0 calc(var(--ma-safe-r) + 10px) calc(var(--ma-safe-b) + 12px) calc(var(--ma-safe-l) + 10px); pointer-events: none; }
.ma-pad > .c > * { pointer-events: auto; }
.ma-pad > .c > .ma-strip { pointer-events: none; }   /* o vão entre os botões continua sendo área de mira */
.ma-pad > .c > .ma-strip .ma-pb { pointer-events: auto; }
.ma-pb { --bhn: 56; position: relative; display: grid; place-items: center; width: 100%; height: calc(var(--bhn) * 1px); min-width: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: #fff; font: 800 20px/1 var(--ma-ui); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 1px 0 #000, 0 0 4px #000; touch-action: none; user-select: none; -webkit-user-select: none; opacity: .93; }
.ma-pb .t { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; max-width: none; overflow: visible; pointer-events: none; }
.ma-pb .t .ma-ico { --is: 34px; }
.ma-pb.down { filter: brightness(1.5) saturate(1.2); }
.ma-pb .rot-u { transform: rotate(90deg); } .ma-pb .rot-d { transform: rotate(-90deg); } .ma-pb .rot-r { transform: scaleX(-1); }
.ma-pb.sm { font-size: 17px; }
.ma-pb.fire { --bhn: 80; } .ma-pb.fire .t .ma-ico { --is: 52px; }
.ma-strip { grid-area: strip; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.ma-strip .grp { display: flex; gap: 6px; }
.ma-strip .ma-pb { --bhn: 52; width: 52px; }
.ma-strip .ma-pb.pause { width: 100px; }
.ma-dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 4px; }
.ma-dpad .ma-pb { --bhn: 56; }
.ma-dpad > .u { grid-area: 1 / 2; } .ma-dpad > .l { grid-area: 2 / 1; } .ma-dpad > .r { grid-area: 2 / 3; } .ma-dpad > .d { grid-area: 3 / 2; }
.ma-acts { grid-area: acts; display: grid; grid-template-columns: repeat(2, 74px); grid-auto-rows: auto; gap: 6px; }
.ma-acts .wide { grid-column: 1 / -1; }
.ma-acts .ma-pb { --bhn: 56; }
.ma-acts .ma-pb.fire { --bhn: 80; }
@media (max-width: 359px) { .ma-dpad { grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); } .ma-dpad .ma-pb { --bhn: 52; } .ma-acts { grid-template-columns: repeat(2, 68px); } }

/* paisagem de celular: a partida fica 4:3 no centro e os controles ocupam as laterais */
@media (orientation: landscape) {
  .ma-pad > .c { inset: 0; grid-template-rows: auto 1fr; padding-top: calc(var(--ma-safe-t) + 6px); padding-bottom: calc(var(--ma-safe-b) + 8px); }
  .ma-strip { align-items: start; }
  .ma-strip .ma-pb { --bhn: 46; width: 46px; } .ma-strip .ma-pb.pause { width: 92px; }
  .ma-dpad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 3px; } .ma-dpad .ma-pb { --bhn: 46; }
  .ma-acts { align-self: end; }
  .ma-acts { grid-template-columns: repeat(2, 70px); gap: 5px; } .ma-acts .ma-pb { --bhn: 46; } .ma-acts .ma-pb.fire { --bhn: 68; }
}

/* telas baixas (paisagem): título e cabeçalhos menores, painéis lado a lado */
@media (orientation: landscape) and (max-height: 500px) {
  .ma-top { min-height: 48px; padding-top: calc(var(--ma-safe-t) + 4px); padding-bottom: 4px; }
  .ma-top img { height: 32px; }
  .ma-dock { grid-auto-flow: column; grid-auto-columns: 1fr; padding-top: 6px; padding-bottom: calc(var(--ma-safe-b) + 6px); }
  .ma-dock .row { display: contents; }
  .ma-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ma-cols > .full { grid-column: 1 / -1; }
  .ma-chars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ma-char .ma-portrait { max-height: 150px; }
  .ma-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 4 colunas deixariam cada cartão com ~85 px: nome, PRONTO e ADICIONAR BOT não cabem */
  .ma-slot .ma-portrait { aspect-ratio: 16 / 9; background-size: 200% auto; }
  .ma-dialog { width: min(100%, 640px); }
}
/* tablet em retrato (768) e telas largas: colunas e conteúdo centralizado */
@media (min-width: 640px) and (orientation: portrait) {
  .ma-scroll { padding-left: max(calc(var(--ma-safe-l) + 12px), calc((100% - 720px) / 2)); padding-right: max(calc(var(--ma-safe-r) + 12px), calc((100% - 720px) / 2)); }
  .ma-dock { padding-left: max(calc(var(--ma-safe-l) + 12px), calc((100% - 720px) / 2)); padding-right: max(calc(var(--ma-safe-r) + 12px), calc((100% - 720px) / 2)); }
  .ma-chars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ma-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ma-pad > .c { padding-left: max(calc(var(--ma-safe-l) + 10px), 5vw); padding-right: max(calc(var(--ma-safe-r) + 10px), 5vw); }
}
@media (prefers-reduced-motion: reduce) { .ma-bar::after { animation: none; left: 30%; } }
@media (forced-colors: active) { #ma-root button:focus-visible, #ma-root input:focus-visible { outline-color: Highlight; box-shadow: none; } }

/* ---------- HUD da partida em DOM (retrato: nos pretos livres sob o palco; paisagem: sobre o palco, sem tocar na mira) ---------- */
.ma-hud[hidden], .ma-pad > .c > .ma-hud[hidden] { display: none; }
.ma-pad > .c > .ma-hud { pointer-events: none; }
.ma-hud { grid-area: hud; display: grid; gap: 4px; color: var(--ma-ivory); font: 700 16px/1.15 var(--ma-ui); text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.ma-hud .hd-top, .ma-hud .hd-bot { --edge: 6px; border: var(--edge) solid transparent; border-image: url("/g/skin/panel.png") 87 fill / var(--edge) stretch; padding: 1px 4px 2px; min-width: 0; }
.ma-hud .k { color: var(--ma-gold); font: 800 16px/1 var(--ma-ui); letter-spacing: .04em; }
.ma-hud .cells { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.ma-hud .hd-c { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.ma-hud .hd-c b { font: 700 22px/1.1 var(--ma-display); }
.ma-hud .hd-c.opt { display: none; }
.ma-hud .obj { display: flex; align-items: flex-start; gap: 6px; margin: 1px 0 0; font-size: 16px; line-height: 1.12; }
.ma-hud .obj .ma-ico { --is: 18px; margin-top: 0; }
.ma-hud .team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 3px 0 0; padding: 0; list-style: none; }
.ma-hud .team li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 4px; align-items: center; min-width: 0; }
.ma-hud .team li.down { opacity: .5; }
.ma-hud .team .ma-portrait.mini { grid-row: 1 / 3; width: 24px; height: 32px; border-width: 1px; background-size: 200% 200%; }
.ma-hud .team .nm { min-width: 0; overflow-wrap: anywhere; white-space: normal; line-height: 1.02; font-size: 16px; }   /* nomes quebram em 2 linhas (nunca reticências): o nome inteiro é dado do jogo */
.ma-hud .hp { position: relative; display: block; height: 5px; background: rgba(0, 0, 0, .7); border: 1px solid #3a4a58; }
.ma-hud .hp::after { content: ""; position: absolute; inset: 0; width: var(--v); background: #d8412f; }
.ma-hud .hd-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ma-hud .gauge { position: relative; flex: 1 1 118px; min-width: 118px; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; background: rgba(0, 0, 0, .6); border: 1px solid #3a4a58; overflow: hidden; }
.ma-hud .gauge::before { content: ""; position: absolute; inset: 0; width: var(--v); background: linear-gradient(#e0523e, #a52a1e); }
.ma-hud .gauge > * { position: relative; }
.ma-hud .gauge b { font: 700 20px/1 var(--ma-display); }
.ma-hud .ammo, .ma-hud .gren { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ma-hud .ammo b, .ma-hud .gren b { font: 700 22px/1 var(--ma-display); }
.ma-hud .ammo .ma-ico, .ma-hud .gren .ma-ico { --is: 22px; }
.ma-hud .sub { flex: 1 0 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; height: 20px; overflow: hidden; }   /* altura fixa: recarga, arma e proteção não mudam o HUD de tamanho */
.ma-hud .easy { color: var(--ma-lime); font-size: 16px; white-space: nowrap; }
.ma-hud .wp { margin-left: auto; min-width: 0; color: var(--ma-steel); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-hud .wp.reload { color: var(--ma-amber); }
.ma-hud .toast { position: fixed; left: var(--cx); width: var(--cw); top: calc(var(--cy) + 6px); transform: none; pointer-events: none; margin: 0; padding: 5px 10px; text-align: center; font: 800 18px/1.15 var(--ma-ui); letter-spacing: .03em; color: #fff; background: rgba(0, 0, 0, .7); box-sizing: border-box; }
.ma-hud .toast.crit { color: var(--ma-amber); }
.ma-hud .toast.off { display: none; }
.ma-hud .dmg { position: fixed; left: calc(var(--cx) + var(--cw) - 8px); top: calc(var(--cy) + 8px); transform: translateX(-100%); margin: 0; padding: 2px 10px; font: 700 24px/1.1 var(--ma-display); color: #ff8a70; background: rgba(0, 0, 0, .7); pointer-events: none; }

/* retrato: HUD e faixa de armas ficam logo abaixo do palco; os comandos descem para o rodapé */
@media (orientation: portrait) {
  body.ma-mobile.ma-hud-on .ma-pad > .c { top: var(--ma-hud-top, auto); grid-template-rows: auto auto 1fr auto; grid-template-areas: "hud hud hud" "strip strip strip" ". . ." "dpad . acts"; align-content: stretch; }
  body.ma-mobile.ma-hud-on .ma-pad > .c .ma-strip { align-self: start; }
  body.ma-mobile.ma-hud-on .ma-pad > .c .ma-acts { align-self: end; }
}
/* retrato com altura de celular: HUD + faixa + comandos precisam caber inteiros abaixo do palco 4:3 (alvos ≥ 44 px) */
@media (orientation: portrait) and (max-height: 900px) {
  body.ma-mobile.ma-hud-on .ma-pad > .c { row-gap: 4px; padding-bottom: calc(var(--ma-safe-b) + 6px); }
  .ma-hud { gap: 3px; }
  .ma-strip .ma-pb { --bhn: 44; width: 44px; } .ma-strip .ma-pb.pause { --bhn: 44; width: 88px; }
  .ma-dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); gap: 3px; } .ma-dpad .ma-pb { --bhn: 50; }
  .ma-acts { grid-template-columns: repeat(2, 72px); gap: 4px; } .ma-acts .ma-pb { --bhn: 44; } .ma-acts .ma-pb.fire { --bhn: 56; }
}
@media (orientation: portrait) and (max-width: 420px) and (min-height: 901px) {
  .ma-strip .ma-pb { --bhn: 46; width: 46px; } .ma-strip .ma-pb.pause { --bhn: 46; width: 92px; }
  .ma-dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); } .ma-dpad .ma-pb { --bhn: 50; }
  .ma-acts { grid-template-columns: repeat(2, 72px); gap: 5px; } .ma-acts .ma-pb { --bhn: 50; } .ma-acts .ma-pb.fire { --bhn: 72; }
}
/* celular alto: sobra altura nos pretos, então a equipe cabe em 2 colunas e os nomes não são cortados */
@media (orientation: portrait) and (max-width: 639px) and (min-height: 830px) { .ma-hud .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tablet em retrato: mais espaço para o HUD e comandos em três colunas */
@media (min-width: 640px) and (orientation: portrait) {
  .ma-hud .team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ma-hud .hd-c.opt { display: inline-flex; }
  .ma-acts { grid-template-columns: repeat(3, 84px); }
  .ma-acts .ma-pb.wide:not(.fire) { grid-column: auto; }
  .ma-acts .ma-pb.fire { grid-column: span 2; }
  .ma-acts { gap: 5px; } .ma-acts .ma-pb { --bhn: 50; } .ma-acts .ma-pb.fire { --bhn: 64; }   /* o HUD e os comandos precisam caber abaixo do palco 4:3 (576 de 1024) */
  .ma-hud { max-width: 720px; margin: 0 auto; width: 100%; }
  .ma-strip .ma-pb { --bhn: 46; width: 46px; } .ma-strip .ma-pb.pause { --bhn: 46; width: 92px; }
}
@media (min-width: 640px) and (orientation: portrait) {
  .ma-hud .hd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; align-items: start; }
  .ma-hud .cells { grid-column: 1; } .ma-hud .obj { grid-column: 1; } .ma-hud .team { grid-column: 2; grid-row: 1 / 3; grid-template-columns: 1fr 1fr; margin: 0; }
}
/* paisagem: painéis sobre o topo e a base do palco; a cena inteira continua sendo a área de mira */
@media (orientation: landscape) {
  .ma-pad > .c > .ma-hud { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch); display: flex; flex-direction: column; justify-content: space-between; gap: 0; }
  .ma-hud .hd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; align-items: start; opacity: .94; }
  .ma-hud .cells { grid-column: 1; } .ma-hud .obj { grid-column: 1; } .ma-hud .team { grid-column: 2; grid-row: 1 / 3; grid-template-columns: 1fr 1fr; margin: 0; }
  .ma-hud .hd-c.opt { display: inline-flex; }
  .ma-hud .hd-bot { opacity: .94; }
  .ma-hud .toast { position: relative; left: auto; top: auto; width: auto; order: 1; margin: 4px 0 auto; }   /* logo abaixo do painel de cima: o painel e a base não se mexem, minimapa e mira ficam livres */
  .ma-hud .hd-bot { order: 2; }
  .ma-hud .dmg { top: calc(var(--cy) + var(--ch) * .3); }
}

/* diálogos em paisagem baixa: cabeçalho compacto, botões lado a lado e mais linhas de conteúdo */
@media (orientation: landscape) and (max-height: 500px) {
  .ma-modal { padding-top: calc(var(--ma-safe-t) + 6px); padding-bottom: calc(var(--ma-safe-b) + 6px); }
  .ma-dialog { width: min(100%, 760px); --edge: 12px; }
  .ma-dialog > .ma-head { --hh: 40; margin-bottom: 4px; }
  .ma-dialog > .ma-head .ti { font-size: 22px; padding-top: 9px; }
  .ma-dialog .scroll { padding: 2px 6px 4px; }
  .ma-dialog .scroll .intro { display: none; }
  .ma-dialog .scroll > * + * { margin-top: 6px; }
  .ma-dialog .ma-btn { --bhn: 46; font-size: 18px; }
  .ma-dialog .foot { grid-auto-flow: column; grid-auto-columns: 1fr; padding-top: 4px; }
  .ma-dialog .foot.two { grid-auto-flow: column; }
  .ma-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  .ma-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ma-items > * + * { margin-top: 0; }
  .ma-dialog h2 { font-size: 22px; }
}
/* tablet em retrato: agente compacto ao lado dos atalhos */
@media (min-width: 640px) and (orientation: portrait) {
  .ma-lobby .ma-cols > .ma-stack:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .ma-lobby .ma-cols > .ma-stack:first-child > * + * { margin-top: 0; }
  .ma-lobby .ma-agent .ma-portrait { width: 40%; max-width: 130px; }
  .ma-lobby .ma-quick { align-content: start; }
}

/* rótulos que não cabem em uma linha quebram dentro da própria placa (nada é cortado) */
.ma-slot.free .ma-action.bot { padding: 0 8% 0 44%; white-space: normal; text-align: center; line-height: 1.05; font-size: 16px; }
.ma-grid3 .ma-btn { --bhn: 56; }
.ma-grid3 .ma-btn .t { flex-direction: column; gap: 1px; }
.ma-grid3 .ma-btn .ma-ico { --is: 22px; }
.ma-pager .ma-btn { padding: 0 calc(var(--cap) + 1px); letter-spacing: .01em; }

/* carregamento em paisagem baixa: retrato e tipos menores para o painel inteiro (e o status) caber na altura */
@media (orientation: landscape) and (max-height: 500px) {
  .ma-center { justify-content: flex-start; gap: 6px; }
  .ma-load { gap: 12px; }
  .ma-load .ma-portrait { width: 92px; max-width: 92px; }
  .ma-load h2 { font-size: 28px; } .ma-load .sub { font-size: 20px; }
  .ma-load .ma-bar { margin-top: 8px !important; }
}

/* ---------- minimapa DOM (R-a): miniatura real, retângulo da câmera e heróis do snapshot; inerte ---------- */
/* coluna esquerda: o direcional fica embaixo e o minimapa usa o vão real acima dele (nunca cresce o HUD) */
.ma-left { grid-area: dpad; align-self: end; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-width: 0; pointer-events: none !important; }
.ma-left > .ma-dpad { pointer-events: auto; }
.ma-pad.has-map .ma-left { align-self: stretch; }
.ma-mm { flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; container-type: size; pointer-events: none !important; }
.ma-mm[hidden] { display: none; }
.ma-mm * { pointer-events: none !important; }
.ma-minimap { --edge: 6px; --inset: 9px; box-sizing: border-box; border: var(--edge) solid transparent; border-image: url("/g/skin/panel.png") 87 fill / var(--edge) stretch; padding: 3px;
  width: min(100cqw, calc((100cqh - 2 * var(--inset)) * var(--ar) + 2 * var(--inset))); }
.ma-minimap .mmap { position: relative; width: 100%; aspect-ratio: var(--ar); overflow: hidden; background: #111; }
.ma-minimap img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ma-minimap .cam { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65); }
.ma-minimap .hero { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--dot); outline: 1px solid #000; }
.ma-minimap .hero.me { --dot: #b8f27a; width: 10px; height: 10px; margin: -5px 0 0 -5px; } .ma-minimap .hero.ally { --dot: #3fd2ff; } .ma-minimap .hero.foe { --dot: #e2433c; }
/* retrato com minimapa: a linha do vão e a dos comandos viram uma só; a coluna esquerda (minimapa + direcional) ocupa dois trilhos */
@media (orientation: portrait) { body.ma-mobile.ma-hud-on .ma-pad.has-map > .c { grid-template-rows: auto auto 1fr; grid-template-areas: "hud hud hud" "strip strip strip" "dpad dpad acts"; } }

/* tablet em retrato: o minimapa fica ao lado do direcional, no vão entre ele e os comandos */
@media (min-width: 640px) and (orientation: portrait) {
  .ma-pad.has-map .ma-left { flex-direction: row; align-items: stretch; align-self: end; }
  .ma-pad.has-map .ma-left > .ma-dpad { flex: none; }
  .ma-pad.has-map .ma-mm { order: 2; display: flex; align-items: center; justify-content: center; padding-left: 12px; box-sizing: border-box; }
  .ma-pad.has-map .ma-mm[hidden] { display: none; }
}

/* ---------- desktop compacto (janela estreita, ponteiro fino): só os menus viram DOM; a partida segue a do desktop ---------- */
/* janela estreita (< 720 px) com ponteiro fino: coluna única, como o retrato do celular; a partir de 720 px, a composição do desktop compacto */
@media (min-width: 720px) {
  body.ma-compact .ma-scroll { padding-left: max(16px, calc((100% - 1040px) / 2)); padding-right: max(16px, calc((100% - 1040px) / 2)); }
  body.ma-compact .ma-dock { grid-auto-flow: column; grid-auto-columns: 1fr; padding-left: max(16px, calc((100% - 1040px) / 2)); padding-right: max(16px, calc((100% - 1040px) / 2)); }
  body.ma-compact .ma-dock .row { display: contents; }
  body.ma-compact .ma-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body.ma-compact .ma-cols > .full { grid-column: 1 / -1; }
  body.ma-compact .ma-lobby .ma-cols { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.25fr); }
  body.ma-compact .ma-lobby .ma-cols > .ma-stack:first-child { grid-row: 1 / span 2; }
  body.ma-compact .ma-chars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ma-compact .ma-char .ma-portrait { max-height: 260px; }
  body.ma-compact .ma-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ma-compact .ma-slot .ma-portrait { aspect-ratio: 16 / 9; background-size: 200% auto; }
  body.ma-compact .ma-charCreate .ma-scroll > *, body.ma-compact .ma-result .ma-scroll > *, body.ma-compact .ma-loading .ma-scroll > *, body.ma-compact .ma-bye .ma-scroll > * { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
  body.ma-compact .ma-charSelect .ma-scroll > .ma-panel, body.ma-compact .ma-charSelect .ma-scroll > .ma-note, body.ma-compact .ma-charSelect .ma-scroll > .ma-grid2 { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
  body.ma-compact .ma-dock > * { max-width: none; }
}
body.ma-compact .ma-dialog { width: min(100%, 680px); }
body.ma-compact .ma-modal { padding: 24px; }

/* ---------- tablet em paisagem com toque (altura > 500): a mesma composição do celular, com o espaço a mais ---------- */
/* o palco 4:3 reserva laterais fixas para o direcional, o minimapa e as ações; o que sobra em largura vira palco, a resolução do canvas segue a do palco (dpr) */
@media (orientation: landscape) and (min-height: 501px) {
  body.ma-mobile.ma-match { --ma-lat: calc(200px + max(var(--ma-safe-l), var(--ma-safe-r))); }
  body.ma-mobile.ma-match #stage { width: min(calc(100vw - 2 * var(--ma-lat)), calc(100vh * 4 / 3)); }
  .ma-strip .ma-pb { --bhn: 52; width: 52px; } .ma-strip .ma-pb.pause { --bhn: 52; width: 100px; }
  .ma-dpad { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 4px; } .ma-dpad .ma-pb { --bhn: 56; }
  .ma-acts { grid-template-columns: repeat(2, 80px); gap: 6px; } .ma-acts .ma-pb { --bhn: 56; } .ma-acts .ma-pb.fire { --bhn: 76; }
  /* menus: as duas colunas do desktop compacto, painéis centralizados, dock em fileira e diálogos maiores */
  body.ma-mobile .ma-scroll { padding-left: max(16px, calc((100% - 1040px) / 2)); padding-right: max(16px, calc((100% - 1040px) / 2)); }
  body.ma-mobile .ma-dock { grid-auto-flow: column; grid-auto-columns: 1fr; padding-left: max(16px, calc((100% - 1040px) / 2)); padding-right: max(16px, calc((100% - 1040px) / 2)); }
  body.ma-mobile .ma-dock .row { display: contents; }
  body.ma-mobile .ma-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body.ma-mobile .ma-cols > .full { grid-column: 1 / -1; }
  body.ma-mobile .ma-lobby .ma-cols { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.25fr); }
  body.ma-mobile .ma-lobby .ma-cols > .ma-stack:first-child { grid-row: 1 / span 2; }
  body.ma-mobile .ma-chars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ma-mobile .ma-char .ma-portrait { max-height: 260px; }
  body.ma-mobile .ma-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ma-mobile .ma-slot .ma-portrait { aspect-ratio: 16 / 9; background-size: 200% auto; }
  body.ma-mobile .ma-charCreate .ma-scroll > *, body.ma-mobile .ma-result .ma-scroll > *, body.ma-mobile .ma-loading .ma-scroll > *, body.ma-mobile .ma-bye .ma-scroll > * { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
  body.ma-mobile .ma-charSelect .ma-scroll > .ma-panel, body.ma-mobile .ma-charSelect .ma-scroll > .ma-note, body.ma-mobile .ma-charSelect .ma-scroll > .ma-grid2 { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
  body.ma-mobile .ma-dock > * { max-width: none; }
  body.ma-mobile .ma-dialog { width: min(100%, 680px); }
  body.ma-mobile .ma-modal { padding: 24px; }
}