/* ===========================================================================
   ROBO ARENA — Estilos (tablet-first, botões grandes, alto contraste)
   =========================================================================== */
:root {
  --bg: #10131f;
  --panel: #1a1f33;
  --panel2: #232a44;
  --line: #39406a;
  --text: #eef1ff;
  --muted: #9aa3c8;
  --blue: #49b6ff;
  --green: #57d98e;
  --yellow: #ffcf48;
  --red: #ff5a5a;
  --purple: #b06cff;
  --orange: #ff7a18;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.4);
  font-size: 16px;
  /* Camadas de UI (ordem fixa: arena < hud < controles < alertas < narração < menus < modal) */
  --z-hud: 10; --z-controls: 20; --z-alerts: 30; --z-commentary: 40; --z-menus: 50; --z-modal: 60;
  /* Safe-area (iPhone/iPad: notch + barra home) como vars reutilizáveis */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  /* Altura REAL da viewport: 100vh mente no mobile (barra do Safari/Chrome).
     Fallback estático aqui; o LayoutManager sobrescreve com px medidos. */
  --app-h: 100vh;
}
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* text-size-adjust:100% impede o iOS/Safari de INFLAR o texto automaticamente
   (o "ajuste de fonte" do aparelho quebrava o layout da oficina no celular).
   A UI usa tamanhos próprios; o zoom manual do usuário continua funcionando. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 50% 0%, #1b2138, #0b0e17 70%);
  color: var(--text);
  touch-action: none;
  user-select: none;
}

/* Raiz do jogo: altura REAL (dvh/medida), nunca 100vh cru — a barra do
   navegador roubava a faixa de baixo (joystick/botões ficavam cobertos). */
#arena { position: fixed; top: 0; left: 0; width: 100vw; height: var(--app-h); display: block; }
#ui { position: fixed; top: 0; left: 0; width: 100vw; height: var(--app-h); }
.screen { position: absolute; inset: 0; overflow: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* O body tem touch-action:none (joystick/canvas não podem rolar a página),
   então TODO contêiner rolável de UI precisa REABILITAR o gesto de rolagem —
   sem isto, no celular a garagem "termina" no preview: chassi/armas/armadura
   ficam abaixo da dobra e o dedo não rola até elas. */
.screen, .ws-body, .ws-left, .ws-center, .ws-right, .mode-cards, .tutorial-box, .scan-panel { touch-action: pan-y; }
.cards { touch-action: pan-x pan-y; }   /* carrossel do celular rola no eixo X */

/* ---- Botões base ---- */
button { font-family: inherit; color: var(--text); cursor: pointer; border: none; }
.btn-big {
  font-size: 1.2rem; font-weight: 800; padding: 16px 26px; border-radius: var(--radius);
  background: var(--panel2); border: 2px solid var(--line); min-height: 56px;
  transition: transform .08s, filter .1s;
}
.btn-big:active { transform: scale(.96); }
.btn-big.primary { background: linear-gradient(135deg, var(--orange), #ff9d4d); border-color: #ffb066; color: #1a0e00; }
.btn-big:disabled { opacity: .5; filter: grayscale(.6); }
.btn-ghost { background: transparent; border: 2px solid var(--line); padding: 10px 16px; border-radius: 12px; font-weight: 700; }

/* ===================== MENU ===================== */
.menu-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.logo { font-size: clamp(3rem, 12vw, 6rem); font-weight: 900; letter-spacing: -2px; line-height: .9; }
.logo span { display: block; }
.logo .accent { color: var(--orange); text-shadow: 0 4px 0 #b34d00; }
.logo span:first-child { color: var(--blue); text-shadow: 0 4px 0 #1f6fa8; }
.tagline { color: var(--muted); font-size: 1.2rem; margin: 0; }
.menu-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.profile-strip { margin-top: 10px; color: var(--muted); background: var(--panel); padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); }
.tutorial-box { max-width: 620px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px; }
.tutorial-box ol { line-height: 1.7; }

/* ===================== MODOS ===================== */
.screen-head { display: flex; align-items: center; gap: 16px; padding: 16px; }
.screen-head h2 { margin: 0; }
.modes-screen { display: flex; flex-direction: column; }
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 20px; max-width: 1000px; margin: 0 auto; width: 100%; }
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--panel); border: 2px solid var(--line); border-radius: 20px; padding: 28px 20px; min-height: 180px; justify-content: center;
}
.mode-card:active { transform: scale(.97); }
.mode-card .mode-icon { font-size: 3rem; }
.mode-card b { font-size: 1.3rem; }
.mode-card small { color: var(--muted); }

/* ===================== OFICINA ===================== */
.workshop { display: flex; flex-direction: column; background: var(--bg); }
.ws-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ws-header h2 { margin: 0; flex: 0; }
.name-input { flex: 1; min-width: 120px; background: var(--panel2); border: 2px solid var(--line); color: var(--text); font-size: 1.1rem; font-weight: 700; padding: 10px 14px; border-radius: 12px; }
.ws-body { flex: 1; display: grid; grid-template-columns: 320px 1fr 320px; gap: 14px; padding: 14px; overflow: hidden; min-height: 0; }
.ws-left, .ws-right { display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.ws-center { overflow: auto; }
.preview { width: 100%; aspect-ratio: 1/1; background: radial-gradient(circle at 50% 40%, #20284a, #0e1120); border-radius: var(--radius); border: 1px solid var(--line); position: relative; min-height: 220px; }
.preview canvas { width: 100% !important; height: 100% !important; border-radius: var(--radius); }
.archetype-tag { text-align: center; font-weight: 800; font-size: 1.1rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 6px; }
.paints { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; }
.swatch.on { border-color: #fff; transform: scale(1.1); }

.ws-config h4 { margin: 8px 0 6px; color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.diff-btn { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 10px 6px; font-weight: 700; }
.diff-btn small { color: var(--muted); font-weight: 500; font-size: .72rem; margin-top: 2px; }
.diff-btn.on { border-color: var(--orange); background: #2a2113; }
.pilot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pilot-btn { display: flex; flex-direction: column; align-items: flex-start; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; text-align: left; }
.pilot-btn small { color: var(--muted); font-size: .75rem; }
.pilot-btn.on { border-color: var(--blue); background: #14283a; }

/* Cards de peça */
.part-section { margin-bottom: 18px; }
.part-section h3 { margin: 0 0 8px; font-size: 1.1rem; }
.part-section h3 small { color: var(--muted); font-weight: 500; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; min-height: 92px; justify-content: center; }
.card:active { transform: scale(.96); }
.card.on { border-color: var(--green); background: #143024; box-shadow: 0 0 0 2px rgba(87,217,142,.3); }
.card-icon { font-size: 1.8rem; }
.card-name { font-weight: 700; font-size: .9rem; }
.card-cost { color: var(--muted); font-size: .72rem; }
/* Chips de counter na carta de arma: 💪 forte contra / 😰 cuidado com (ícones) */
.card-chips { display: flex; gap: 6px; font-size: .72rem; line-height: 1; }
.card-chips em { font-style: normal; padding: 2px 5px; border-radius: 999px; background: var(--panel2); }
.card-chips .good { box-shadow: inset 0 0 0 1px rgba(87,217,142,.45); }
.card-chips .bad { box-shadow: inset 0 0 0 1px rgba(255,106,90,.45); }

/* Toast do auto-update (nova versão detectada → recarrega sozinho) */
.update-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--panel); border: 2px solid var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 700; z-index: 10000; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.update-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Armadura */
.armor-presets { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.preset { background: var(--panel2); border: 2px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.armor-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.armor-label { width: 70px; font-weight: 700; font-size: .85rem; }
.armor-tiers { display: flex; gap: 4px; flex: 1; }
.tier-btn { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 8px; padding: 8px 2px; font-size: .8rem; font-weight: 700; }
.tier-btn.on { border-color: var(--purple); background: #25193a; }

/* Painel de stats */
#statsPanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.budget-line { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin-bottom: 8px; }
.budget-line b { text-align: right; }
.budget-line.over b { color: var(--red); }
.mini-bar { grid-column: 1/3; height: 8px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--blue); }
.budget-line.over .mini-bar i { background: var(--red); }
.stat-list { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.stat { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 8px; }
.stat-label { font-size: .85rem; }
.stat-bar { height: 12px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.stat-bar i { display: block; height: 100%; transition: width .2s; }
.stat-val { text-align: right; font-weight: 700; font-size: .85rem; }
.warnings { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.warnings li { padding: 8px 12px; border-radius: 10px; background: var(--panel2); border-left: 4px solid var(--muted); }
.warn-error { border-color: var(--red); background: #2a1414; }
.warn-warn { border-color: var(--yellow); background: #2a2413; }
.warn-tip { border-color: var(--blue); }
.warn-good { border-color: var(--green); background: #143024; }

/* Carta de peça incompatível com o chassi (acinzentada, com cadeado) */
.card.locked { opacity: .42; filter: grayscale(.7); position: relative; }
.card.locked::after { content: "🔒"; position: absolute; top: 6px; right: 8px; font-size: .9rem; filter: none; }
.card.locked.on { border-color: var(--line); box-shadow: none; }

/* Banner do topo da oficina: trava de chassi + scouting do adversário */
.ws-banner { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
.lock-note { flex: 1; min-width: 240px; background: #2a2113; border: 1px solid var(--yellow); border-radius: 12px; padding: 10px 14px; font-size: .9rem; }
.scout-banner { flex: 1; min-width: 240px; background: var(--panel); border: 1px solid var(--red); border-radius: 12px; padding: 10px 14px; }
.scout-head { font-size: .95rem; }
.scout-stage { float: right; color: var(--red); font-weight: 800; }
.scout-line { color: var(--muted); margin-top: 4px; }
.scout-tip { margin-top: 6px; color: var(--blue); font-size: .85rem; }

/* Banner de scouting COLAPSÁVEL — no celular ele "comia muita tela" e ficava
   fixo no topo. Classes .collapsible/.collapsed entram via JS só no celular:
   colapsado mostra só a linha do adversário; toque expande. */
.ws-banner.collapsible .scout-banner { cursor: pointer; position: relative; padding-right: 30px; }
.ws-banner.collapsible .scout-banner::after { content: "⌄"; position: absolute; right: 12px; top: 8px; color: var(--muted); font-weight: 800; line-height: 1; }
.ws-banner.collapsible:not(.collapsed) .scout-banner::after { content: "⌃"; }
.ws-banner.collapsed .scout-line, .ws-banner.collapsed .scout-tip { display: none; }
/* Celular: banner enxuto (menos padding/fonte; some o rótulo de etapa). */
html[data-device="mobile"] .ws-banner { padding: 4px 8px; }
html[data-device="mobile"] .scout-banner { padding: 6px 10px; border-radius: 10px; min-width: 0; }
html[data-device="mobile"] .scout-head { font-size: .8rem; line-height: 1.3; }
html[data-device="mobile"] .scout-stage { display: none; }
html[data-device="mobile"] .scout-line { font-size: .75rem; margin-top: 2px; }
html[data-device="mobile"] .scout-tip { font-size: .7rem; margin-top: 3px; line-height: 1.25; }

/* Toast da oficina (feedback de bloqueio/autocorreção) */
.ws-toast { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(12px); background: rgba(0,0,0,.86); border: 1px solid var(--blue); border-radius: 14px; padding: 12px 18px; font-weight: 700; max-width: 86vw; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 20; }
.ws-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Overlay de scouting / reparo (reusa .result-overlay) */
.overlay-body { margin-bottom: 18px; }
.scout { text-align: left; display: flex; flex-direction: column; gap: 10px; }
.scout-oppo { background: var(--panel2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.scout-oppo-head { font-size: 1.15rem; }
.scout-oppo-parts { color: var(--muted); font-size: .9rem; }
.scout-oppo-dmg { font-size: .86rem; color: var(--yellow); background: #2a2413; border: 1px solid var(--yellow); border-radius: 8px; padding: 6px 10px; }
.scout-oppo-dmg.ok { color: var(--green); background: #143024; border-color: var(--green); }
.scout-row { font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scout-row > span:first-child { color: var(--muted); min-width: 76px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.chip.good { background: #143024; border: 1px solid var(--green); }
.chip.bad { background: #2a1414; border: 1px solid var(--red); }
.muted { color: var(--muted); }
.scout-tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.scout-tips li { background: var(--panel2); border-left: 3px solid var(--blue); border-radius: 8px; padding: 8px 12px; }
.scout-dmg { border-radius: 10px; padding: 10px 12px; font-size: .9rem; font-weight: 700; }
.scout-dmg.good { background: #143024; border: 1px solid var(--green); }
.scout-dmg.warn { background: #2a2413; border: 1px solid var(--yellow); }
.scout-dmg.bad { background: #2a1414; border: 1px solid var(--red); }

/* ===================== LIGA — escada visual do ranking (hub) ===================== */
.liga-ladder { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.liga-headline { font-weight: 800; font-size: 1.05rem; text-align: center; margin-bottom: 2px; }
.liga-sub { color: var(--muted); font-size: .8rem; text-align: center; margin-bottom: 6px; }
.liga-row { display: flex; align-items: center; gap: 9px; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 7px 10px; transition: transform .12s ease; }
.liga-row.you { border-color: var(--green); background: #12301f; box-shadow: 0 0 0 2px rgba(87,217,142,.22); }
.liga-row.next { border-color: var(--orange); background: #2a1c10; box-shadow: 0 0 0 2px rgba(255,122,24,.24); }
.liga-row.locked { opacity: .5; }
.liga-row.done { opacity: .62; }
.liga-rk { font-weight: 900; font-size: .95rem; min-width: 46px; color: var(--muted); }
.liga-row.you .liga-rk { color: var(--green); }
.liga-row.next .liga-rk { color: var(--orange); }
.liga-info { flex: 1; min-width: 0; }
.liga-nm { font-weight: 800; font-size: .92rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liga-wpn { color: var(--muted); font-size: .74rem; }
.pw-bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.pw-bars i { width: 5px; height: 13px; border-radius: 2px; background: #2f3556; }
.pw-bars i.on { background: var(--orange); }
.liga-tag { font-size: .72rem; font-weight: 800; white-space: nowrap; color: var(--muted); }
.liga-tag.tag-you { color: var(--green); }
.liga-tag.tag-next { color: var(--orange); }
.liga-hint { margin-top: 6px; color: var(--blue); font-size: .8rem; text-align: center; }
/* Notícias do leaderboard vivo (churn) — o "placar de bastidores" do hub. */
.liga-news { display: flex; flex-direction: column; gap: 3px; background: #1c2340; border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 8px; padding: 6px 10px; margin-bottom: 7px; text-align: left; }
.liga-news span { font-size: .78rem; color: var(--text); }
html[data-device="mobile"] .liga-news span { font-size: .72rem; }
html[data-device="mobile"] .liga-row { padding: 5px 8px; gap: 7px; border-radius: 9px; }
html[data-device="mobile"] .liga-rk { min-width: 40px; font-size: .88rem; }
html[data-device="mobile"] .liga-nm { font-size: .86rem; }
html[data-device="mobile"] .liga-wpn { font-size: .7rem; }
html[data-device="mobile"] .pw-bars i { height: 11px; width: 4px; }
html[data-device="mobile"] .liga-sub { font-size: .74rem; }

/* ===================== FIGHT UI / HUD ===================== */
#fight-ui { position: absolute; inset: 0; pointer-events: none; }
#fight-ui button { pointer-events: auto; }
.hud { position: absolute; inset: 0; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: calc(12px + var(--sa-top)) calc(16px + var(--sa-right)) 0 calc(16px + var(--sa-left)); gap: 12px; z-index: var(--z-hud); }
.fighter { flex: 1; max-width: 40%; }
.fighter.right { text-align: right; }
.f-name { font-weight: 800; margin-bottom: 4px; text-shadow: 0 2px 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Linha de barra: rótulo legível + barra + valor (sem adivinhação por cor) */
.bar-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; margin-bottom: 4px; }
.bar-lbl { font-size: .76rem; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 3px #000; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.bar-pct { font-size: .74rem; font-weight: 800; min-width: 34px; text-align: right; text-shadow: 0 1px 3px #000; }
.bar-pct.off { color: var(--muted); }
.bar-pct.st-danificado { color: var(--yellow); } .bar-pct.st-critico { color: var(--orange); } .bar-pct.st-quebrado { color: var(--red); }
.bar { height: 15px; background: rgba(0,0,0,.5); border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); }
.bar i { display: block; height: 100%; width: 100%; transition: width .15s, background .2s; }
.bar.battery { height: 11px; }
.bar.battery i { background: var(--blue) !important; }
/* Oponente (topo direito): a linha do rótulo fica à direita */
.fighter.right .bar-row { grid-template-columns: auto 1fr auto; }
/* ---- Painel PÚBLICO do oponente (consome publicStateOf) ---- */
#enemyPanel { position: relative; cursor: pointer; }
.scan-cue { font-size: .8rem; opacity: .55; }
/* Estados públicos de arma e mobilidade: 1 linha cada, palavra colorida */
.enemy-status { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-top: 3px; font-size: .8rem; font-weight: 700; color: var(--muted); text-shadow: 0 1px 3px #000; }
.estat { white-space: nowrap; }
.estat-ico { margin-right: 3px; }
.estat-word { font-weight: 900; }
.estat.lvl-ok .estat-word { color: var(--green); }
.estat.lvl-warn .estat-word { color: var(--yellow); }
.estat.lvl-bad .estat-word { color: var(--red); }
.estat.lvl-muted .estat-word { color: var(--muted); }
/* Flags óbvios (só aparecem quando ativos — sem poluir a tela) */
.enemy-flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.eflag { display: none; font-size: .68rem; font-weight: 900; padding: 2px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.eflag.show { display: inline-block; }
.eflag.crit { color: #fff; background: var(--red); border-color: var(--red); animation: pulse .6s infinite; }
.eflag.flip { color: #1a0e00; background: var(--orange); border-color: var(--orange); }
.eflag.jam { color: var(--yellow); background: #2a2413; border-color: var(--yellow); }
.eflag.spark { color: var(--blue); background: #0e2233; border-color: var(--blue); }
/* Mini-diagrama do oponente (só avançado): regiões de ARMADURA visível */
.enemy-diagram { margin-top: 6px; display: flex; justify-content: flex-end; }
.ediag-grid { display: grid; grid-template-columns: 22px 1fr 22px; grid-template-rows: 13px 22px 13px; grid-template-areas: ". front ." "left center right" ". rear ."; gap: 2px; width: 118px; }
.enemy-diagram .diag-cell { font-size: .5rem; }

/* ---- Alerta contextual do oponente (ancorado SOB o painel dele, ~2s) ---- */
.enemy-alert { position: absolute; top: 100%; right: 0; margin-top: 8px; max-width: 240px; background: rgba(10,12,20,.92); border: 2px solid var(--orange); border-radius: 12px; padding: 8px 14px; font-weight: 900; font-size: .9rem; text-align: right; color: #ffd9b0; opacity: 0; transform: translateX(16px); transition: opacity .18s, transform .18s; pointer-events: none; z-index: 6; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.enemy-alert.show { opacity: 1; transform: translateX(0); }
.enemy-alert.sev-danificado { border-color: var(--yellow); color: var(--yellow); }
.enemy-alert.sev-critico { border-color: var(--orange); color: #ffd9b0; }
.enemy-alert.sev-quebrado { border-color: var(--red); color: #ffd0d0; animation: pulse .5s 2; }

/* ---- Scan público sob demanda (translúcido, some sozinho) ---- */
.scan-panel { position: absolute; top: 72px; left: 50%; transform: translateX(-50%) translateY(-8px); width: min(330px, 86vw); background: rgba(10,14,24,.88); backdrop-filter: blur(4px); border: 1px solid var(--blue); border-radius: 14px; padding: 12px 16px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 7; box-shadow: 0 10px 34px rgba(0,0,0,.55); text-align: left; }
.scan-panel.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.scan-head { font-weight: 900; font-size: .98rem; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.scan-emblem { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.scan-row { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; padding: 2px 0; }
.scan-row > span { color: var(--muted); }
.scan-row > b { text-align: right; }
.scan-row .lvl-ok { color: var(--green); } .scan-row .lvl-warn { color: var(--yellow); } .scan-row .lvl-bad { color: var(--red); } .scan-row .lvl-muted { color: var(--muted); }
.scan-flag { margin-top: 6px; text-align: center; font-weight: 800; color: var(--orange); }
.scan-foot { margin-top: 8px; text-align: center; font-size: .7rem; color: var(--muted); }
.timer { font-size: 2.4rem; font-weight: 900; min-width: 80px; text-align: center; text-shadow: 0 3px 6px #000; background: rgba(0,0,0,.35); border-radius: 14px; padding: 2px 10px; }
.timer.low { color: var(--red); animation: pulse .6s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }

/* ---- Faixa de Sistemas (telemetria compacta; discreta quando OK) ---- */
.hud-systems { position: absolute; top: 116px; left: calc(14px + var(--sa-left)); width: max-content; max-width: 60%; pointer-events: auto; background: rgba(8,11,20,.5); border: 1px solid var(--line); border-radius: 12px; padding: 5px 7px 6px; backdrop-filter: blur(3px); z-index: var(--z-hud); }
.sys-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; font-size: .64rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; cursor: pointer; }
/* Colapsado (celular): só o título + tiles COM AVARIA; tocar expande/recolhe.
   Robô saudável = painel vira um selo mínimo, longe do joystick. */
.hud-systems.collapsed .tile.st-ok, .hud-systems.collapsed .tile.st-exposto { display: none; }
.hud-systems.collapsed .hud-diagram { display: none !important; }
.hud-systems.collapsed .sys-head { margin-bottom: 0; }
.hud-systems.collapsed .sys-strip:not(:empty) { margin-top: 4px; }
.hud-systems .sys-head::after { content: "▾"; color: var(--muted); }
.hud-systems.collapsed .sys-head::after { content: "▸"; }
.hud-mode-toggle { background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-weight: 800; font-size: .72rem; line-height: 1; padding: 3px 6px; border-radius: 7px; }
.hud-mode-toggle.on { background: var(--blue); color: #06243a; border-color: var(--blue); }
.hud-mode-toggle:active { transform: scale(.92); }
/* Tiles pequenos que embrulham em até ~3 por linha (bloco de canto, não coluna alta) */
.sys-strip { display: flex; flex-wrap: wrap; gap: 5px; max-width: 174px; }
.tile { position: relative; width: 52px; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #141a2e; border: 2px solid var(--line); border-radius: 10px; padding: 4px 2px; transition: border-color .2s, opacity .2s, box-shadow .2s; }
.tile-ico { font-size: 1.1rem; line-height: 1; }
.tile-img { width: 28px; height: 28px; object-fit: cover; display: block; border-radius: 6px; }
.tile-name { font-size: .56rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.tile-tag { font-size: .54rem; font-weight: 900; line-height: 1; }
/* Discreto quando OK; ganha cor/brilho conforme piora (legível por cor E palavra) */
.tile.st-ok { opacity: .6; border-color: rgba(87,217,142,.45); }
.tile.st-ok .tile-name { color: var(--green); }
.tile.st-danificado { border-color: var(--yellow); } .tile.st-danificado .tile-name, .tile.st-danificado .tile-tag { color: var(--yellow); }
.tile.st-critico { border-color: var(--orange); box-shadow: 0 0 9px rgba(255,122,24,.55); animation: pulse 1s infinite; } .tile.st-critico .tile-name, .tile.st-critico .tile-tag { color: var(--orange); }
.tile.st-quebrado { border-color: var(--red); background: rgba(255,90,90,.16); } .tile.st-quebrado .tile-name, .tile.st-quebrado .tile-tag { color: var(--red); } .tile.st-quebrado .tile-ico, .tile.st-quebrado .tile-img { filter: grayscale(.85); opacity: .55; }
/* Arte dedicada de QUEBRADO (roda rachada etc.) já mostra o dano — cor cheia */
.tile.st-quebrado .tile-img.broken-art { filter: none; opacity: 1; }
.tile.st-exposto { opacity: .5; border-style: dashed; } .tile.st-exposto .tile-name, .tile.st-exposto .tile-tag { color: var(--muted); }

/* ---- Mini-diagrama top-down do robô (modo avançado) ---- */
.hud-diagram { margin-top: 7px; border-top: 1px solid var(--line); padding-top: 6px; }
.diag-grid { display: grid; grid-template-columns: 26px 1fr 26px; grid-template-rows: 17px 26px 17px; grid-template-areas: ". front ." "left center right" ". rear ."; gap: 3px; width: 100%; max-width: 150px; margin: 0 auto; }
.diag-cell { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); font-size: .6rem; font-weight: 800; color: #0a0d16; }
.diag-cell.front { grid-area: front; } .diag-cell.left { grid-area: left; } .diag-cell.center { grid-area: center; } .diag-cell.right { grid-area: right; } .diag-cell.rear { grid-area: rear; }
.diag-cell b { position: relative; z-index: 1; text-shadow: 0 1px 1px rgba(255,255,255,.35); }
.dmg-ok { background: var(--green); } .dmg-danificado { background: var(--yellow); } .dmg-critico { background: var(--orange); }
.dmg-quebrado { background: var(--red); color: #fff; } .dmg-quebrado b { text-shadow: 0 1px 2px #000; }
.dmg-exposto { background: repeating-linear-gradient(45deg, #2a2f48, #2a2f48 5px, #1c2034 5px, #1c2034 10px); color: var(--muted); border-style: dashed; }
.diag-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin-top: 7px; font-size: .64rem; color: var(--muted); }
.diag-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.diag-legend .lg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.diag-legend .lg.ok::before { background: var(--green); } .diag-legend .lg.danificado::before { background: var(--yellow); }
.diag-legend .lg.quebrado::before { background: var(--red); } .diag-legend .lg.exposto::before { background: #2a2f48; border: 1px dashed var(--line); }

/* ---- Alerta grande de avaria (some em 2s) ---- */
.hud-alert { position: absolute; left: 50%; bottom: calc(120px + var(--sa-bottom)); transform: translateX(-50%) translateY(14px); background: rgba(10,12,20,.92); border: 2px solid var(--yellow); border-radius: 14px; padding: 12px 22px; font-weight: 900; font-size: 1.05rem; text-align: center; max-width: 84vw; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: var(--z-alerts); }
.hud-alert.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hud-alert.sev-danificado { border-color: var(--yellow); color: var(--yellow); }
.hud-alert.sev-critico { border-color: var(--orange); color: #ffd9b0; }
.hud-alert.sev-quebrado { border-color: var(--red); color: #ffd0d0; animation: pulse .5s 2; }

.hud-mode { position: absolute; bottom: calc(14px + var(--sa-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: var(--z-hud); }
.mode-switch { display: flex; gap: 4px; background: rgba(0,0,0,.5); padding: 5px; border-radius: 14px; }
.mode-switch button { background: transparent; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: .85rem; }
.mode-switch button.on { background: var(--blue); color: #06243a; }
/* Colapsado (celular): só o modo ATUAL como pílula pequena; tocar expande.
   A faixa central inferior fica livre durante a luta. */
.mode-switch.collapsed button:not(.on) { display: none; }
.mode-switch.collapsed button.on::after { content: " ⇄"; opacity: .7; }
.commander-orders { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 92vw; }
.commander-orders button { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,.55); border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 64px; }
.commander-orders button small { font-size: .68rem; }
.commander-orders button.on { border-color: var(--orange); background: #2a1c0c; }

.tip-toast { position: absolute; top: 120px; left: 50%; transform: translateX(-50%) translateY(-10px); background: rgba(0,0,0,.8); padding: 10px 18px; border-radius: 14px; font-weight: 700; opacity: 0; transition: opacity .2s, transform .2s; max-width: 80vw; text-align: center; border: 1px solid var(--blue); }
.tip-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hud.shake { animation: shake .2s; }
@keyframes shake { 25% { transform: translate(4px,2px); } 75% { transform: translate(-4px,-2px); } }

/* ---- Controles ---- */
.controls { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-controls); }
.controls > * { pointer-events: auto; }
.joy { position: absolute; left: calc(28px + var(--sa-left)); bottom: calc(90px + var(--sa-bottom)); width: 140px; height: 140px; border-radius: 50%; background: rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.2); touch-action: none; display: flex; align-items: center; justify-content: center; }
.joy-knob { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: var(--shadow); pointer-events: none; }
.joy-hint { position: absolute; bottom: -22px; color: var(--muted); font-size: .8rem; }
.action-pad { position: absolute; right: calc(24px + var(--sa-right)); bottom: calc(80px + var(--sa-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.btn-action { width: 92px; height: 92px; border-radius: 50%; font-size: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid rgba(255,255,255,.25); box-shadow: var(--shadow); }
.btn-action small { font-size: .6rem; font-weight: 800; }
.btn-action.fire { background: radial-gradient(circle at 40% 35%, #ff8a4d, #d83a1a); }
.btn-action.fire.offline { background: repeating-linear-gradient(45deg, #3a3030, #3a3030 6px, #2a2222 6px, #2a2222 12px); filter: grayscale(.5); }
.btn-action.fire.offline small { color: var(--red); }
.btn-action.special { background: radial-gradient(circle at 40% 35%, #8ad0ff, #2b7fd8); width: 76px; height: 76px; font-size: 1.6rem; }
.action-row { display: flex; gap: 10px; }
.btn-mini { width: 56px; height: 56px; border-radius: 50%; font-size: 1.4rem; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.2); }
/* Desvirar = AÇÃO do robô (agrupada com ARMA/ESPECIAL); roxo p/ distinguir. */
.btn-action.selfright { background: radial-gradient(circle at 40% 35%, #b98cff, #7a3fd8); width: 66px; height: 66px; font-size: 1.35rem; }
/* Câmera = VISÃO DO JOGO (não ação do robô): quadrado arredondado, menor e
   discreto, separado visualmente das ações redondas, com rótulo próprio. */
.btn-view { width: 52px; height: 52px; border-radius: 14px; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.18); font-size: 1.15rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow); margin-top: 6px; }
.btn-view small { font-size: .5rem; font-weight: 800; color: var(--muted); margin-top: 1px; }
.btn-action:active, .btn-mini:active, .btn-view:active { transform: scale(.9); filter: brightness(1.2); }

/* ---- Resultado ---- */
/* Overlay respeita a safe-area (notch/barra) — o card nunca cola nas bordas. */
.result-overlay { position: absolute; inset: 0; background: rgba(5,7,14,.82); display: flex; align-items: center; justify-content: center; pointer-events: auto; backdrop-filter: blur(4px); z-index: var(--z-modal);
  padding: calc(12px + var(--sa-top)) calc(12px + var(--sa-right)) calc(12px + var(--sa-bottom)) calc(12px + var(--sa-left)); }
/* max-height:100% + overflow interno: em tela curta (iPhone paisagem) o card
   ROLA por dentro em vez de estourar pra fora e esconder os botões.
   touch-action:pan-y reabilita o gesto de rolagem (o body tem touch-action:none). */
.result-card { background: var(--panel); border: 2px solid var(--line); border-radius: 24px; padding: 30px 36px; text-align: center; max-width: 480px; width: 90%; box-shadow: var(--shadow);
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.result-card.win { border-color: var(--green); }
.result-card.lose { border-color: var(--red); }
.result-card h1 { margin: 0 0 6px; font-size: 2.4rem; }
.result-card .reason { color: var(--muted); margin: 0 0 18px; }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.score-grid > div { background: var(--panel2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.score-grid b { font-size: 1.1rem; }
.score-grid span { color: var(--muted); font-size: .9rem; }
.result-actions { display: flex; flex-direction: column; gap: 10px; }
/* Celular: card mais enxuto (menos padding/fonte) — cabe mais sem rolar. */
html[data-device="mobile"] .result-card { padding: 14px 16px; border-radius: 16px; width: 96%; }
html[data-device="mobile"] .result-card h1 { font-size: 1.5rem; }
html[data-device="mobile"] .result-card .reason { margin-bottom: 10px; font-size: .9rem; }
html[data-device="mobile"] .overlay-body { margin-bottom: 12px; }
html[data-device="mobile"] .result-actions .btn-big { padding: 12px 16px; font-size: 1rem; }

/* Tela CURTA (celular deitado, a orientação de jogo): a Liga tem 6 postos + até
   5 botões — não cabe tudo sem rolar, então comprimo o máximo pra aproximar o
   "Desafiar" da dobra. O card já rola por dentro (max-height:100%). */
@media (max-height: 480px) {
  html[data-device="mobile"] .result-card { padding: 10px 14px; }
  html[data-device="mobile"] .result-card h1 { font-size: 1.15rem; margin-bottom: 2px; }
  html[data-device="mobile"] .overlay-body { margin-bottom: 8px; }
  html[data-device="mobile"] .result-actions { gap: 7px; }
  html[data-device="mobile"] .result-actions .btn-big { padding: 9px 14px; font-size: .9rem; }
  .liga-ladder { gap: 4px; }
  .liga-headline { font-size: .9rem; }
  .liga-sub { margin-bottom: 3px; font-size: .72rem; }
  .liga-row { padding: 4px 8px; }
  .liga-nm { font-size: .82rem; }
  .liga-wpn { font-size: .68rem; }
  .pw-bars i { height: 10px; }
  .liga-hint { margin-top: 4px; font-size: .74rem; }
  .liga-news { padding: 4px 8px; margin-bottom: 5px; }
  .liga-news span { font-size: .71rem; }
}

/* ===================== ARTE GERADA (opcional) ===================== */
.logo-img { max-width: min(82vw, 540px); height: auto; display: block; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.menu-screen.has-art { background-size: cover; background-position: center; }
.menu-screen.has-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(11,14,23,.35), rgba(11,14,23,.82)); z-index: -1; }
.menu-screen { position: relative; z-index: 0; }
.card-art { width: 100%; height: 56px; object-fit: cover; border-radius: 8px; pointer-events: none; }
.card.has-art .card-icon { display: none; }
.modes-screen { position: relative; z-index: 0; }
.modes-screen.has-art { background-size: cover; background-position: center; }
.modes-screen.has-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,14,23,.72), rgba(11,14,23,.88)); z-index: -1; }

/* ===================== RESPONSIVO (data-device do LayoutManager) =====================
   Três LAYOUTS, não um zoom: celular deitado (arena limpa acima de tudo),
   tablet (HUD intermediária) e desktop (completo). O <html> recebe
   data-device/data-orientation do src/ui/layout.js. */

/* ---------- TABLET LANDSCAPE (901–1280) ---------- */
html[data-device="tablet"] .timer { font-size: 2rem; min-width: 68px; }
html[data-device="tablet"] .bar-lbl { font-size: .7rem; }
html[data-device="tablet"] .hud-systems { max-width: 46%; }
html[data-device="tablet"] .sys-strip { max-width: 150px; }
html[data-device="tablet"] .tile { width: 47px; min-height: 45px; }
html[data-device="tablet"] .joy { width: 124px; height: 124px; }
html[data-device="tablet"] .joy-knob { width: 52px; height: 52px; }
html[data-device="tablet"] .btn-action { width: 86px; height: 86px; font-size: 1.8rem; }
html[data-device="tablet"] .btn-action.special { width: 70px; height: 70px; font-size: 1.4rem; }
html[data-device="tablet"] .btn-mini { width: 50px; height: 50px; font-size: 1.2rem; }
html[data-device="tablet"] .btn-action.selfright { width: 60px; height: 60px; font-size: 1.2rem; }
html[data-device="tablet"] .btn-view { width: 48px; height: 48px; font-size: 1.05rem; }
html[data-device="tablet"] .mode-switch button { padding: 7px 10px; font-size: .78rem; }
html[data-device="tablet"] .commentary-caption { max-width: min(520px, 52vw); font-size: 13.5px; }
html[data-device="tablet"] .ws-body { grid-template-columns: 260px 1fr 272px; gap: 10px; padding: 10px; }
html[data-device="tablet"] .preview { min-height: 180px; }

/* ---------- CELULAR LANDSCAPE (<=900 ou altura <=520) ----------
   Prioridade absoluta: VER a arena. HUD mínima, painéis colapsados,
   comentário compacto no topo, controles menores nos cantos + safe-area. */
html[data-device="mobile"] .hud-top { padding: calc(4px + var(--sa-top)) calc(10px + var(--sa-right)) 0 calc(10px + var(--sa-left)); gap: 8px; }
html[data-device="mobile"] .f-name { font-size: .78rem; margin-bottom: 2px; }
html[data-device="mobile"] .bar-row { gap: 4px; margin-bottom: 2px; }
html[data-device="mobile"] .bar-lbl { font-size: .6rem; max-width: 64px; }
html[data-device="mobile"] .bar-pct { font-size: .58rem; min-width: 26px; }
html[data-device="mobile"] .bar { height: 9px; }
html[data-device="mobile"] .bar.battery { height: 7px; }
html[data-device="mobile"] .timer { font-size: 1.4rem; min-width: 52px; padding: 0 8px; border-radius: 10px; }
html[data-device="mobile"] .enemy-status { font-size: .66rem; }
html[data-device="mobile"] .eflag { font-size: .56rem; padding: 1px 6px; }
html[data-device="mobile"] .enemy-alert { max-width: 190px; font-size: .74rem; padding: 6px 10px; }
html[data-device="mobile"] .scan-panel { top: calc(48px + var(--sa-top)); width: min(300px, 78vw); font-size: .9em; }
/* Sistemas: selo compacto no topo-esquerdo (colapsado via JS), longe do joystick */
html[data-device="mobile"] .hud-systems { top: calc(58px + var(--sa-top)); left: calc(8px + var(--sa-left)); max-width: 44%; padding: 4px 6px 5px; }
html[data-device="mobile"] .sys-strip { max-width: 132px; gap: 4px; }
html[data-device="mobile"] .tile { width: 42px; min-height: 40px; border-width: 1px; border-radius: 8px; }
html[data-device="mobile"] .tile-ico { font-size: .9rem; }
html[data-device="mobile"] .tile-img { width: 20px; height: 20px; }
html[data-device="mobile"] .tile-name { font-size: .5rem; }
/* Controles: joystick 104px / arma 78px, colados nos cantos com safe-area */
html[data-device="mobile"] .joy { width: 104px; height: 104px; left: calc(12px + var(--sa-left)); bottom: calc(52px + var(--sa-bottom)); border-width: 2px; }
html[data-device="mobile"] .joy-knob { width: 44px; height: 44px; }
html[data-device="mobile"] .joy-hint { display: none; }
html[data-device="mobile"] .action-pad { right: calc(10px + var(--sa-right)); bottom: calc(44px + var(--sa-bottom)); gap: 8px; }
html[data-device="mobile"] .btn-action { width: 78px; height: 78px; font-size: 1.6rem; border-width: 2px; }
html[data-device="mobile"] .btn-action.special { width: 62px; height: 62px; font-size: 1.25rem; }
html[data-device="mobile"] .btn-mini { width: 42px; height: 42px; font-size: 1rem; }
html[data-device="mobile"] .btn-action.selfright { width: 56px; height: 56px; font-size: 1.15rem; }
html[data-device="mobile"] .btn-view { width: 44px; height: 44px; font-size: .95rem; }
/* Modos de controle: pílula única (colapsada via JS) no rodapé */
html[data-device="mobile"] .hud-mode { bottom: calc(6px + var(--sa-bottom)); }
html[data-device="mobile"] .mode-switch { padding: 3px; border-radius: 11px; }
html[data-device="mobile"] .mode-switch button { padding: 6px 9px; font-size: .68rem; }
html[data-device="mobile"] .commander-orders button { min-width: 54px; padding: 6px 8px; }
html[data-device="mobile"] .commander-orders button small { font-size: .6rem; }
/* Comentário: faixa compacta no TOPO (sob o timer), máx 55% da tela */
html[data-device="mobile"] .commentary-caption { max-width: 55vw; font-size: 12px; padding: 5px 10px; border-radius: 10px; bottom: auto; top: calc(62px + var(--sa-top)); }
html[data-device="mobile"] .commentary-caption.cc-top { top: calc(62px + var(--sa-top)); }
html[data-device="mobile"] .commentary-caption.cc-bottom { top: auto; bottom: calc(86px + var(--sa-bottom)); }
html[data-device="mobile"] .commentary-caption .cc-who { font-size: 10px; }
html[data-device="mobile"] .hud-alert { bottom: calc(96px + var(--sa-bottom)); font-size: .85rem; padding: 8px 14px; }
html[data-device="mobile"] .tip-toast { top: calc(84px + var(--sa-top)); font-size: .82rem; max-width: 60vw; }
html[data-device="mobile"] .arena-dbg-btn { top: calc(46px + var(--sa-top)); width: 34px; height: 34px; font-size: 1rem; }

/* ---------- OFICINA no celular: coluna única + carrossel + barra fixa ---------- */
html[data-device="mobile"] .ws-header { padding: calc(6px + var(--sa-top)) 10px 6px; gap: 8px; }
html[data-device="mobile"] .ws-header h2 { font-size: 1.05rem; }
html[data-device="mobile"] .name-input { font-size: .95rem; padding: 7px 10px; }
/* O scroll mora no ws-body (a tela não rola): a barra fixa .ws-mini fica
   realmente FIXA embaixo em vez de rolar junto com o conteúdo. */
html[data-device="mobile"] .workshop { overflow: hidden; }
html[data-device="mobile"] .ws-body { display: flex; flex-direction: column; overflow: auto; gap: 10px; padding: 8px 10px calc(66px + var(--sa-bottom)); }
html[data-device="mobile"] .preview { aspect-ratio: auto; height: 158px; min-height: 158px; }
html[data-device="mobile"] .ws-left, html[data-device="mobile"] .ws-right { overflow: visible; }
/* No celular as colunas se DISSOLVEM (display:contents) e a ordem prioriza a
   MONTAGEM: preview → pintura → PEÇAS (chassi/arma/armadura) → configuração →
   atributos. Antes, toda a config vinha antes das peças e parecia que a
   garagem "não tinha opções". */
html[data-device="mobile"] .ws-left, html[data-device="mobile"] .ws-center, html[data-device="mobile"] .ws-right { display: contents; }
html[data-device="mobile"] .preview { order: 1; }
html[data-device="mobile"] .archetype-tag { order: 2; }
html[data-device="mobile"] .paints { order: 3; }
html[data-device="mobile"] #partsArea { order: 4; }
html[data-device="mobile"] .ws-config { order: 5; }
html[data-device="mobile"] #statsPanel { order: 6; }
/* Cards em carrossel horizontal com snap (nada de grade alta que enterra o resto) */
html[data-device="mobile"] .cards { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
html[data-device="mobile"] .card { flex: 0 0 116px; scroll-snap-align: start; min-height: 86px; }
html[data-device="mobile"] .ws-right #btnFight { display: none; }   /* o LUTAR mora na barra fixa */
/* Barra fixa inferior: custo/peso/energia + LUTAR sempre visíveis */
.ws-mini { display: none; }
html[data-device="mobile"] .ws-mini {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px calc(10px + var(--sa-right)) calc(7px + var(--sa-bottom)) calc(10px + var(--sa-left));
  background: rgba(10,13,23,.94); border-top: 1px solid var(--line); backdrop-filter: blur(6px); z-index: var(--z-menus);
}
.ws-mini .wsm-stats { flex: 1; display: flex; gap: 12px; font-size: .76rem; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; }
.ws-mini .wsm-stats b { color: var(--text); }
.ws-mini .wsm-stats b.over { color: var(--red); }
.ws-mini .btn-big { min-height: 44px; padding: 8px 18px; font-size: 1rem; }

/* ---------- PORTRAIT: na luta, peça para girar o aparelho ---------- */
.rotate-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(5,7,14,.95); flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }
.rotate-overlay .ro-icon { font-size: 3.6rem; animation: rotcue 1.8s ease-in-out infinite; }
.rotate-overlay h2 { margin: 0; }
.rotate-overlay p { margin: 0; color: var(--muted); }
@keyframes rotcue { 0%, 20% { transform: rotate(0); } 55%, 100% { transform: rotate(90deg); } }
html[data-orientation="portrait"] body[data-screen="fight"] .rotate-overlay { display: flex; }

/* ---------- DEBUG DE LAYOUT (?debug=layout) ---------- */
.layout-dbg-zone { position: fixed; border: 2px dashed rgba(73,182,255,.65); background: rgba(73,182,255,.07); z-index: 990; pointer-events: none; border-radius: 10px; }
.layout-dbg-panel { position: fixed; left: 8px; bottom: 8px; z-index: 991; background: rgba(10,13,23,.92); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: 11px/1.55 ui-monospace, monospace; pointer-events: none; color: var(--text); }
.layout-dbg-panel .ok { color: var(--green); }
.layout-dbg-panel .bad { color: var(--red); }

/* Painel de áudio (mixer simples no menu) */
.audio-panel { max-width: 420px; margin: 12px auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; text-align: left; }
.audio-panel h3 { margin: 0 0 10px; }
.audio-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.audio-row span { flex: 0 0 118px; font-size: 14px; opacity: 0.9; }
.audio-row input[type=range] { flex: 1; accent-color: var(--accent, #49b6ff); }
.audio-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; }
.audio-hint { opacity: 0.55; font-size: 12px; margin: 10px 0 0; }
.audio-sep { border: none; border-top: 1px solid var(--line); margin: 14px 0 8px; }
.audio-row.narr select {
  flex: 1; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; font-size: 14px;
}

/* Legenda da narração esportiva (dupla narrador/comentarista). Pílula discreta;
   NUNCA no centro da ação (combat safe zone). O main.js escolhe a âncora por
   dispositivo (cc-top/cc-bottom) e DESVIA se um robô estiver naquela faixa. */
.commentary-caption {
  position: absolute; left: 50%; bottom: calc(130px + var(--sa-bottom)); transform: translateX(-50%) translateY(8px);
  max-width: min(680px, 88vw); display: flex; gap: 9px; align-items: baseline;
  background: rgba(12, 16, 30, .82); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 14px; color: var(--text); font-size: 15px; line-height: 1.25; text-align: left;
  box-shadow: 0 8px 30px rgba(0,0,0,.42); opacity: 0; pointer-events: none; z-index: var(--z-commentary);
  transition: opacity .18s ease; backdrop-filter: blur(6px);
}
.commentary-caption.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.commentary-caption.cc-top { bottom: auto; top: calc(118px + var(--sa-top)); }   /* abaixo do bloco de barras */
.commentary-caption.cc-bottom { top: auto; bottom: calc(130px + var(--sa-bottom)); }
.commentary-caption .cc-who { font-weight: 800; white-space: nowrap; font-size: 11.5px; letter-spacing: .3px; padding-top: 2px; }
.commentary-caption .cc-who.cc-narrador { color: var(--orange); }
.commentary-caption .cc-who.cc-comentarista { color: var(--blue, #49b6ff); }
.commentary-caption .cc-text { font-weight: 600; }

/* ===================== SELETOR DE ARENA (tela de modos) ===================== */
.arena-pick-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 4px 16px 0; }
.arena-pick-label { color: var(--muted); font-weight: 800; font-size: .95rem; }
.arena-picker { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.arena-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 12px;
  padding: 8px 14px; cursor: pointer; color: var(--text); transition: transform .08s, border-color .15s, box-shadow .15s;
}
.arena-chip:active { transform: scale(.97); }
.arena-chip b { font-size: 1rem; }
.arena-chip small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.arena-chip.sel { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 18px rgba(73,182,255,.25); }
.arena-chip.sel small { color: var(--blue); }

/* ===================== OVERLAY DE DEBUG DE ESCALA (luta) ===================== */
.arena-dbg-btn {
  position: absolute; top: 12px; right: 12px; z-index: 30;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(26,31,51,.78); border: 2px solid var(--line); color: var(--text);
  font-size: 1.2rem; font-weight: 800; cursor: pointer; backdrop-filter: blur(4px);
}
.arena-dbg-btn.on { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 16px rgba(73,182,255,.35); }
.arena-dbg-panel {
  position: absolute; top: 60px; right: 12px; z-index: 30; width: 250px;
  background: rgba(20,26,46,.92); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; color: var(--text); font-size: .82rem; line-height: 1.5;
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.arena-dbg-panel b { color: #fff; }
.arena-dbg-panel > b { display: block; margin-bottom: 6px; font-size: .95rem; }
.arena-dbg-panel .ok { color: var(--green); }
.arena-dbg-panel .bad { color: var(--red); }
.arena-dbg-panel .legend { display: block; margin-top: 8px; color: var(--muted); font-size: .72rem; }

/* --- Progressão / economia: peças bloqueadas viram "vitrine de loja" -------- */
/* .shop = ainda não desbloqueada: carta escurecida com etiqueta de preço.
   Continua CLICÁVEL (1º toque mostra o preço, 2º confirma a compra). */
.card.shop { position: relative; opacity: .82; border-style: dashed; }
.card.shop .card-icon, .card.shop .card-art { filter: grayscale(.75) brightness(.8); }
.card-unlock {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  background: rgba(20,26,46,.92); border: 1px solid var(--yellow, #ffcf48);
  color: var(--yellow, #ffcf48); border-radius: 999px;
  font-size: .68rem; font-weight: 800; padding: 2px 7px;
}
.swatch.shop { position: relative; opacity: .8; }
.swatch-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.ws-money {
  margin-left: auto; margin-right: 6px; white-space: nowrap;
  background: rgba(20,26,46,.9); border: 1px solid var(--line);
  color: var(--yellow, #ffcf48); font-weight: 800; font-size: .85rem;
  border-radius: 999px; padding: 4px 10px;
}
.result-card .reward { color: var(--yellow, #ffcf48); font-weight: 800; margin: 2px 0 6px; }

/* --- Chave do campeonato (bracket de 8) ------------------------------------ */
.result-card.wide { max-width: min(760px, 94vw); width: 100%; }
.bracket-intro { color: var(--muted); font-size: .85rem; margin: 0 0 10px; }
.bracket { display: flex; gap: 10px; align-items: center; justify-content: center; text-align: left; overflow-x: auto; padding-bottom: 4px; }
.b-col { display: flex; flex-direction: column; gap: 10px; min-width: 130px; }
.b-col.current .b-match { border-color: var(--yellow, #ffcf48); }
.b-col-title { text-align: center; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.b-match { background: rgba(20,26,46,.85); border: 2px solid var(--line); border-radius: 10px; overflow: hidden; }
.b-slot { padding: 5px 9px; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.b-slot + .b-slot { border-top: 1px dashed var(--line); }
.b-slot.me { color: var(--yellow, #ffcf48); }
.b-slot.win { color: var(--green, #57d98e); }
.b-slot.win::after { content: " ✓"; }
.b-slot.lose { opacity: .45; text-decoration: line-through; }
.b-tbd { color: var(--muted); }
.b-champ { padding: 8px 10px; font-weight: 800; border-color: var(--yellow, #ffcf48); }
/* celular: colunas mais estreitas, rolagem horizontal natural */
html[data-device="mobile"] .b-col { min-width: 108px; }
html[data-device="mobile"] .b-slot { font-size: .72rem; max-width: 120px; }

/* Micro-hint de controles (tutorial invisível) — 1ª luta, some sozinho. */
.controls-hint {
  position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%);
  background: rgba(16,19,31,.92); color: #e8ecf8;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; white-space: nowrap;
  max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  z-index: 60; pointer-events: none; box-shadow: 0 6px 22px rgba(0,0,0,.45);
  animation: hintIn .35s ease both;
}
.controls-hint b { color: var(--yellow, #ffcf48); }
.controls-hint.out { animation: hintOut .4s ease both; }
@keyframes hintIn  { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hintOut { to { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .controls-hint { animation: none; } }