/* Projeto Nexus — palco fixo de 1200×720, escalado para caber na janela. */
@font-face {
  font-family: 'Russo One';
  src: url('assets/fonts/RussoOne-Regular.ttf') format('truetype');
  font-display: block;
}

:root {
  --rar-C: #9aa3ad; --rar-R: #2f8cff; --rar-E: #b04dff; --rar-L: #ffa31a; --rar-M: #ff2e2e;
  /* Tema OLED: preto puro, vermelho e dourado */
  --gold: #d4af37; --gold-hi: #ffd76a; --gold-lo: #8a6a14; --gold-rgb: 212, 175, 55;
  --red: #e3122b; --red-hi: #ff3a4f; --red-lo: #6e0612; --red-rgb: 227, 18, 43;
  --text: #f4efe6; --text-dim: #c4b8a6; --text-mute: #85796b;
  --sel: #ffd24a;            /* item/encaixe selecionado */
  --you: 255, 200, 64;       /* o seu lado na batalha (dourado); o inimigo é vermelho */
  --green: #2bdc44; --orange: #ff9d00;
  --font: 'Russo One', 'Arial Black', Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif;
}
/* ângulo animado das bordas douradas que giram */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinAng { to { --ang: 360deg; } }
@keyframes lineRun { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@keyframes goldText { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes selPulse { 50% { box-shadow: 0 0 0 3px #fff0b0, 0 0 22px rgba(255,200,64,.95); } }
@keyframes redPulse { 50% { box-shadow: inset 0 0 0 1px rgba(255,215,106,.75), 0 0 0 1px var(--gold-hi), 0 0 26px rgba(227,18,43,.85); } }
@keyframes cornerGlow { from { opacity: .55; } to { opacity: 1; } }
/* chinês e japonês: a Russo One não tem esses caracteres; usa a fonte do sistema certa para cada idioma */
html[data-lang="zh-CN"] { --font: 'Russo One', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', sans-serif; }
html[data-lang="ja"] { --font: 'Russo One', 'Yu Gothic UI', 'Meiryo UI', Meiryo, 'Hiragino Sans', sans-serif; }
html[data-lang="zh-CN"] body, html[data-lang="ja"] body { letter-spacing: 0; }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #000;
  font-family: var(--font);
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
button { font-family: var(--font); cursor: pointer; }
svg { fill: currentColor; }
.hidden { display: none !important; }

#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--stage-w, 1200px); height: 720px;   /* (v4.0.4) largura acompanha a tela: js/ui.js fitStage */
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  background: radial-gradient(ellipse at 50% 0%, #1c0307 0%, #070103 50%, #000 80%);
  overflow: hidden;
}
.screen { position: absolute; inset: 0; }

/* ================= Botões genéricos ================= */
.sm-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; height: 46px; padding: 0 22px;
  font-size: 19px; color: #fff; letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
  background: linear-gradient(180deg, #e01a33 0%, #a50d20 48%, #8a0818 52%, #5a0410 100%);
  border: 2px solid var(--gold); border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,210,200,.4), inset 0 0 0 1px rgba(0,0,0,.35), 0 3px 0 #2a0206, 0 0 12px rgba(227,18,43,.25);
  transition: filter .15s, box-shadow .2s;
}
/* reflexo dourado que atravessa o botão (fica entre o fundo e o texto) */
.sm-btn::after { content: ''; position: absolute; top: -2px; bottom: -2px; left: 0; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,236,180,.4) 50%, transparent); transform: translateX(-130%) skewX(-18deg); }
.sm-btn:hover:not(:disabled)::after { animation: btnSheen .7s ease-out; }
@keyframes btnSheen { 0% { transform: translateX(-130%) skewX(-18deg); } 60%, 100% { transform: translateX(330%) skewX(-18deg); } }
.sm-btn:hover { filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255,210,200,.45), inset 0 0 0 1px rgba(0,0,0,.35), 0 3px 0 #2a0206, 0 0 20px rgba(227,18,43,.55); }
.sm-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,210,200,.3), 0 1px 0 #2a0206; }
.sm-btn.red { color: #ffd6da; background: linear-gradient(180deg, #2a0609 0%, #140305 100%); border-color: #ff2a3d;
  text-shadow: 0 0 8px rgba(255,42,61,.75), 0 2px 0 #000; box-shadow: inset 0 0 14px rgba(255,42,61,.22), 0 3px 0 #000, 0 0 10px rgba(255,42,61,.3); }
.sm-btn.gray { color: var(--text); background: linear-gradient(180deg, #2b2628 0%, #191516 50%, #0e0b0c 100%); border-color: rgba(212,175,55,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #000; }
.sm-btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.sm-btn:disabled::after { animation: none !important; }

.panel {
  /* preto OLED com um fio dourado/vermelho girando na borda */
  background:
    radial-gradient(ellipse at 50% -14%, rgba(227,18,43,.2), transparent 58%) padding-box,
    linear-gradient(180deg, #0b0809 0%, #040303 100%) padding-box,
    conic-gradient(from var(--ang), rgba(212,175,55,.3), #ffd76a 8%, rgba(212,175,55,.3) 20%, rgba(227,18,43,.6) 50%, rgba(212,175,55,.3) 80%, #ffd76a 92%, rgba(212,175,55,.3)) border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.12), 0 10px 30px rgba(0,0,0,.7), 0 0 18px rgba(227,18,43,.14);
  animation: spinAng 9s linear infinite;
}
.panel-title {
  margin: 0; padding: 8px 0 6px;
  text-align: center; font-size: 18px; letter-spacing: 1px; font-weight: normal;
  background: linear-gradient(100deg, #c9971f 0%, #ffd76a 30%, #fff6d6 40%, #ffd76a 50%, #c9971f 75%, #c9971f 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.85)); animation: goldText 5s linear infinite;
}
.panel-title::after { content: ''; display: block; width: 180px; height: 1px; margin: 6px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ================= Barra lateral ================= */
.sidebar {
  position: absolute; left: 0; top: 0; width: 114px; height: 720px;
  background: linear-gradient(90deg, #000 0%, #080506 100%);
  border-right: 1px solid rgba(212,175,55,.38);
  box-shadow: 1px 0 0 rgba(227,18,43,.25), 4px 0 18px rgba(0,0,0,.6);
}
.side-btn {
  position: absolute; left: 7px; width: 100px; height: 94px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gold-hi);
  background: radial-gradient(ellipse at 50% 0%, rgba(227,18,43,.26), transparent 70%), linear-gradient(180deg, #161113 0%, #0a0708 100%);
  border: 1px solid rgba(212,175,55,.45); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.18), inset 0 0 0 1px rgba(0,0,0,.6), 0 2px 0 #000;
  padding: 0;
}
.side-btn:hover { filter: brightness(1.3); transform: translateY(-1px); }
.side-btn.active { color: #fff; border-color: var(--gold-hi);
  background: radial-gradient(ellipse at 50% 115%, rgba(227,18,43,.8), transparent 75%), linear-gradient(180deg, #2a070c, #120305);
  box-shadow: inset 0 0 0 1px rgba(255,215,106,.5), 0 0 0 1px rgba(212,175,55,.6), 0 0 16px rgba(227,18,43,.6); animation: redPulse 2.2s ease-in-out infinite; }
.side-btn svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,200,64,.25)); }
.side-btn .ico-lg { width: 60px; height: 60px; }
.side-btn .ico-person { width: 34px; height: 60px; }
.side-vs { font-size: 22px; line-height: 1; margin-top: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.pvp-ico, .duo-ico, .trio-ico { display: flex; align-items: flex-end; gap: 2px; }
.pvp-ico svg { width: 26px; height: 42px; } .pvp-ico svg.lap { width: 30px; height: 24px; margin-bottom: 4px; }
.duo-ico svg { width: 26px; height: 42px; }
.trio-ico svg { width: 24px; height: 44px; } .trio-ico svg:nth-child(2) { width: 28px; height: 52px; }

/* ================= Barra superior ================= */
.topbar {
  position: absolute; left: 114px; right: 0; top: 0; height: 58px;
  display: flex; align-items: center; gap: 8px; padding: 0 0 0 8px;
  background: linear-gradient(180deg, #0f0b0c 0%, #050404 100%);
  border-bottom: 1px solid rgba(212,175,55,.5);
  box-shadow: 0 1px 0 rgba(227,18,43,.3), 0 6px 16px rgba(0,0,0,.6);
}
/* faísca dourada correndo pelo fio de baixo */
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff0b0, transparent) 0 0 / 30% 100% no-repeat; animation: lineRun 7s linear infinite; }
.tb-coin { width: 40px; height: 40px; }
.tb-box {
  height: 40px; display: flex; align-items: center; padding: 0 12px;
  background: linear-gradient(180deg, #000, #0b0809);
  border: 1px solid rgba(212,175,55,.35); border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 1px 0 rgba(255,215,106,.06);
  font-size: 24px; color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 8px rgba(255,200,64,.3);
}
.tb-coins { width: 130px; } .tb-tokens { width: 80px; color: #d69bff; text-shadow: 0 1px 0 #000, 0 0 8px rgba(176,77,255,.45); } .tb-wins { width: 56px; color: #fff; justify-content: center; }
.tb-keys { height: 40px; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: linear-gradient(180deg, #000, #0b0809);
  border: 1px solid rgba(212,175,55,.35); border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0,0,0,.9); }
.tb-keys b { font-weight: normal; font-size: 20px; color: #fff; min-width: 18px; margin-right: 4px; text-shadow: 0 1px 0 #000; }
.key-ico { width: 30px; height: 17px; vertical-align: -3px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.key-ico.orange { color: #ffae22; } .key-ico.red { color: #ff3a2a; }
.key-line { display: flex; align-items: center; justify-content: center; gap: 6px; }
.key-line.orange { color: #ffc05a; } .key-line.red { color: #ff7a6a; }
.arena-line { color: #ffe08a; }
.tb-level { width: 64px; justify-content: center; color: var(--gold-hi); }
.tb-plus {
  width: 40px; height: 40px; font-size: 34px; line-height: 1; color: #2a1400; padding: 0 0 4px;
  background: linear-gradient(180deg, #fff0b0, #e8b830 50%, #a8770c); border: 1px solid #3a2600; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 10px rgba(255,200,64,.3); text-shadow: 0 1px 0 rgba(255,240,200,.6);
}
.tb-token {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, #e6b8ff, #b04dff 45%, #5a1490 100%); border-radius: 8px;
  border: 1px solid #f0d6ff; font-size: 24px; text-shadow: 0 2px 0 #2a0845; box-shadow: 0 0 12px rgba(176,77,255,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.tb-swords { width: 44px; height: 38px; object-fit: contain; }
.tb-xp {
  position: relative; flex: 1; height: 34px; margin-right: 4px;
  background: #000; border: 1px solid rgba(212,175,55,.38); border-radius: 3px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9);
}
.tb-xp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; overflow: hidden;
  background: linear-gradient(90deg, #6e0612, #e3122b 62%, #ffb13a); box-shadow: 0 0 12px rgba(227,18,43,.55); }
.tb-xp-fill::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255,240,200,.45), transparent) 0 0 / 40% 100% no-repeat; animation: lineRun 3.2s linear infinite; }
.tb-xp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; text-shadow: 0 2px 2px #000; white-space: nowrap; }
.tb-chevron {
  width: 74px; height: 56px; color: var(--gold-hi); padding: 8px 14px;
  background: linear-gradient(180deg, #1c1113, #0a0607); border: 1px solid rgba(212,175,55,.5);
  border-radius: 0 0 0 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 14px rgba(227,18,43,.25);
}
.tb-chevron svg { width: 100%; height: 100%; }
.tb-exit { flex: none; align-self: stretch; min-width: 82px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; border-left: 1px solid rgba(255,215,106,.35); background: linear-gradient(180deg, #6f0a15, #280307); color: #fff; font-family: var(--font); font-size: 15px; letter-spacing: 1px; cursor: pointer; box-shadow: inset 0 0 16px rgba(255,40,55,.25); }
.tb-exit svg { width: 23px; height: 23px; fill: none; color: #ffd76a; }
.tb-exit:hover { background: linear-gradient(180deg, #a40f20, #48050c); color: #fff3b0; }

/* ================= Oficina ================= */
.content { position: absolute; left: 118px; top: 62px; right: 4px; bottom: 4px; }
.ws-editor {
  position: absolute; left: 0; top: 0; width: 612px; height: 654px;
  background: #000 url('assets/brand/hangar.jpg') center / 100% 100% no-repeat;
  border: 1px solid rgba(212,175,55,.42); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 0 22px rgba(227,18,43,.12), 0 6px 18px rgba(0,0,0,.6);
}
/* brilho da plataforma pulsando sob o mech */
.ws-editor::before {
  content: ''; position: absolute; left: 116px; top: 440px; width: 380px; height: 92px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,40,60,.36), rgba(255,40,60,.08) 55%, transparent 72%);
  mix-blend-mode: screen; animation: padPulse 2.6s ease-in-out infinite alternate;
}
@keyframes padPulse { from { opacity: .35; } to { opacity: 1; } }
.ws-modules { position: absolute; left: 16px; top: 10px; display: flex; gap: 8px; }
.ws-col { position: absolute; top: 96px; display: flex; flex-direction: column; gap: 10px; }
.ws-left { left: 10px; } .ws-right { right: 10px; }
/* (v3.33) absorvedor equipado: marca de energia ou de calor no canto (os ícones do jogo) */
.slot .absorb-mark { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; pointer-events: none; filter: drop-shadow(0 0 2px #000) drop-shadow(0 1px 1px #000); }
.slot .absorb-mark svg { width: 100%; height: 100%; }
.slot.absorb-ene .absorb-mark { color: #6dff5a; } .slot.absorb-hea .absorb-mark { color: #ff6a3a; }
.ws-weapons { position: absolute; left: 65px; top: 566px; display: flex; gap: 10px; }

.slot {
  position: relative; width: 72px; height: 72px; padding: 0;
  background: rgba(8, 5, 6, .74) center / 100% 100% no-repeat;
  border: none; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.55), inset 0 0 14px rgba(227,18,43,.22), 0 3px 8px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 215, 106, .32);
  transition: transform .12s ease, filter .12s ease;
}
.ws-modules .slot { width: 66px; height: 66px; }
.slot.filled { background-size: cover; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.35); }
.slot.filled img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.slot .slot-ico { width: 60%; height: 60%; opacity: .9; }
.slot.selected { box-shadow: 0 0 0 3px var(--sel), 0 0 14px rgba(255,200,64,.7); animation: selPulse 1.4s ease-in-out infinite; }
.slot:hover { filter: brightness(1.18); transform: translateY(-2px); }
.slot.tool { background: linear-gradient(180deg, #2a2325 0%, #171214 50%, #0e0b0c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(212,175,55,.5), 0 0 0 1px rgba(0,0,0,.7), 0 4px 8px rgba(0,0,0,.45); color: var(--gold-hi); }
.slot.tool svg { width: 46%; height: 46%; }
.slot.tool.check { background: transparent; box-shadow: none; color: var(--gold-hi); }
.slot.tool.check svg { width: 80%; height: 80%; filter: drop-shadow(0 0 6px rgba(255,200,64,.7)); }
.slot.tool.plus-slot {
  background:
    linear-gradient(#ffd76a, #ffd76a) center / 40% 11% no-repeat,
    linear-gradient(#ffd76a, #ffd76a) center / 11% 40% no-repeat,
    linear-gradient(180deg, #2a2325 0%, #171214 50%, #0e0b0c 100%);
}

.rar-C, .rar-R, .rar-E, .rar-L, .rar-M { background-color: #1a2029 !important; }
.rar-C { background-image: radial-gradient(110% 85% at 20% 10%, rgba(255,255,255,.26), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(150deg, #87929e 0%, #56606b 45%, #2f363e 100%) !important; }
.rar-R { background-image: radial-gradient(110% 85% at 20% 10%, rgba(190,225,255,.34), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(150deg, #3d93ff 0%, #1d5cb8 45%, #0e2d5e 100%) !important; }
.rar-E { background-image: radial-gradient(110% 85% at 20% 10%, rgba(235,200,255,.34), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(150deg, #b862ff 0%, #6d26bd 45%, #34105f 100%) !important; }
.rar-L { background-image: radial-gradient(110% 85% at 20% 10%, rgba(255,236,190,.38), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(150deg, #ffb43c 0%, #c4700e 45%, #5f3304 100%) !important; }
.rar-M { background-image: radial-gradient(110% 85% at 20% 10%, rgba(255,200,200,.36), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(150deg, #ff5050 0%, #b8161c 45%, #58070a 100%) !important; }

.ws-mech { position: absolute; left: 92px; top: 92px; width: 428px; height: 412px; }
#mechCanvas { position: absolute; left: -6px; top: 4px; width: 440px; height: 400px; pointer-events: none; transform-origin: 50% 96%; animation: mechBreath 3.4s ease-in-out infinite; }
/* respiração bem leve do mech parado no hangar (os pés ficam no lugar) */
@keyframes mechBreath { 0%, 100% { transform: none; } 50% { transform: scale(1.004, 1.012); } }
.ws-mechname {
  position: absolute; left: 50%; top: -4px; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  padding: 2px 14px; border-radius: 12px; background: rgba(0, 0, 0, .72); box-shadow: inset 0 0 0 1px rgba(212,175,55,.45), 0 0 12px rgba(227,18,43,.25);
  font-size: 15px; color: var(--gold-hi); letter-spacing: 1px; text-shadow: 0 1px 2px #000;
}
.ws-arrow {
  position: absolute; top: 170px; width: 47px; height: 63px; z-index: 2;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 63'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff0b0'/><stop offset='.48' stop-color='%23e3b236'/><stop offset='1' stop-color='%237a5408'/></linearGradient></defs><path d='M9 5 L42 29 Q45 31.5 42 34 L9 58 Q4 61 4 55 V8 Q4 2 9 5Z' fill='url(%23g)' stroke='%231a0e00' stroke-width='3' stroke-linejoin='round'/><path d='M10 10 L36 29.5 L10 24Z' fill='white' fill-opacity='.32'/></svg>") center / contain no-repeat;
  border: none; opacity: .9; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.ws-arrow:hover { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,200,64,.8)); }
.ws-arrow.left { left: 6px; transform: scaleX(-1); }
.ws-arrow.right { right: 6px; }
/* (v3.33) seta da direita no último mech: cria um novo (até 4) — mostra um "+" */
.ws-arrow.add::after { content: '+'; position: absolute; left: 50%; top: 50%; transform: translate(-60%, -54%); font: bold 26px Arial, sans-serif; color: #2a1a05; text-shadow: 0 1px 0 rgba(255,240,180,.6); }
.ws-arrow.off { opacity: .25; pointer-events: none; }
.ws-mechname { cursor: pointer; }
.ws-mechname:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 12px rgba(255,200,64,.45); }
.stat-hp { position: relative; height: 26px; margin: 2px 0 10px; background: #111; border: 2px solid #000; }
.stat-hp div { position: absolute; inset: 0; background: linear-gradient(180deg, #ff4b4b, #c4161c 55%, #8b0d10); }
.stat-hp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; text-shadow: 0 1px 2px #000; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 16px; }
.stat-grid div { display: flex; align-items: center; gap: 8px; }
.stat-grid svg { width: 18px; height: 20px; flex: none; }
.stat-grid img { width: 18px; height: 20px; }
.c-ene { color: #6dff5a; } .c-hea { color: #ff5a3a; } .c-reg { color: #ffd23a; } .c-col { color: #7fd3ff; }
.stat-note { margin-top: 10px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); text-align: center; }

/* Inventário */
.ws-inventory {
  position: absolute; left: 620px; top: 0; width: 364px; height: 654px;
  display: flex; flex-direction: column;
}
.inv-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; font-size: 16px; color: var(--gold-hi); }
.inv-head span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#invSearch {
  width: 130px; height: 28px; padding: 0 8px;
  background: #000; border: 1px solid rgba(212,175,55,.35); border-radius: 3px; color: #fff; font-family: Arial, sans-serif; font-size: 13px;
}
.inv-grid {
  flex: 1; overflow-y: auto; padding: 4px 8px 10px;
  display: grid; grid-template-columns: repeat(4, 80px); grid-auto-rows: 80px; gap: 6px; align-content: start;
}
.inv-grid::-webkit-scrollbar { width: 8px; }
.inv-grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }
.inv-item {
  position: relative; width: 80px; height: 80px; padding: 0;
  background-size: cover; border: none; border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.32);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, filter .12s ease;
}
.inv-item img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.inv-item:hover { filter: brightness(1.15); transform: translateY(-2px); }
.inv-item.equipped::after {
  content: ''; position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
}
.inv-empty { grid-column: 1 / -1; padding: 30px 10px; text-align: center; color: var(--text-mute); font-size: 14px; }

.inv-tabs { position: absolute; left: 990px; top: 0; width: 88px; display: flex; flex-direction: column; gap: 6px; }
.inv-tab {
  position: relative; width: 88px; height: 74px; padding: 0;   /* (v3.33) 74 px: as 8 abas (com Absorvedores) cabem na altura da tela */
  background: radial-gradient(ellipse at 50% 0%, rgba(227,18,43,.2), transparent 70%), linear-gradient(180deg, #161113, #090607);
  border: 1px solid rgba(212,175,55,.45); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.16), 0 2px 0 #000;
}
.inv-tab .tab-ico {
  position: absolute; inset: 10px 12px 16px 10px;
  background: linear-gradient(180deg, #fff0b0, #d4af37 60%, #a07c18);
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
}
.inv-tab .tab-count { position: absolute; right: 6px; bottom: 2px; font-size: 18px; text-shadow: 0 2px 0 #000; }
.inv-tab:hover { filter: brightness(1.3); transform: translateX(-2px); }
.inv-tab.active { border-color: var(--gold-hi); background: radial-gradient(ellipse at 50% 115%, rgba(227,18,43,.75), transparent 75%), linear-gradient(180deg, #2a070c, #120305);
  box-shadow: inset 0 0 0 1px rgba(255,215,106,.5), 0 0 0 1px rgba(212,175,55,.6), 0 0 16px rgba(227,18,43,.6); animation: redPulse 2.2s ease-in-out infinite; }

/* Perfil */
.profile-panel { position: absolute; left: 240px; top: 60px; width: 600px; padding: 0 30px 26px; }
.profile-row { display: flex; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid rgba(212,175,55,.16); font-size: 18px; }
.profile-row b { color: var(--gold-hi); font-weight: normal; }
.profile-name { display: flex; gap: 10px; margin: 8px 0 14px; }
.profile-name input { flex: 1; height: 40px; padding: 0 10px; background: #000; border: 1px solid rgba(212,175,55,.45); color: #fff; font-family: var(--font); font-size: 18px; border-radius: 4px; }

/* ================= Tela de carregamento ================= */
#screen-loading { background: radial-gradient(ellipse at center, #22040a 0%, #080103 55%, #000 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; z-index: 30; }
.loading-logo { width: 420px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.8)); }
.loading-text { font-size: 22px; letter-spacing: 3px; color: var(--gold-hi); text-shadow: 0 0 12px rgba(255,200,64,.35); animation: tutTalk 1.6s ease-in-out infinite; }
.loading-bar { position: relative; width: 420px; height: 14px; background: #000; border: 1px solid rgba(212,175,55,.5); border-radius: 3px; overflow: hidden; box-shadow: 0 0 14px rgba(227,18,43,.2); }
.loading-fill { position: relative; height: 100%; width: 0; background: linear-gradient(90deg, #6e0612, #e3122b 65%, #ffb13a); transition: width .2s linear; overflow: hidden; }
.loading-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(255,240,200,.55), transparent) 0 0 / 40% 100% no-repeat; animation: lineRun 1.4s linear infinite; }

/* ================= Batalha ================= */
#screen-battle { background: #000; --battle-hud-height: 112px; }
#phaserArena { position: absolute; left: 0; top: 0; width: var(--stage-w, 1200px); height: 600px; display: flex; justify-content: center; overflow: hidden; }
#phaserArena canvas { display: block; flex: none; }

/* Painel de status da batalha: vidro escuro com a cor do lado (verde = você, vermelho = inimigo).
   O do inimigo é o espelho (flex invertido, barras presas na borda de fora). Acende no turno de quem joga. */
.hud {
  --acc: var(--you);
  position: absolute; top: 0; width: 470px; height: var(--battle-hud-height); box-sizing: border-box;
  display: flex; gap: 12px; padding: 10px 16px 10px 10px;
  background: linear-gradient(180deg, rgba(14, 10, 11, .95) 0%, rgba(3, 2, 2, .93) 100%);
  backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  transition: filter .3s;
}
.hud::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 40%); }
.hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--acc), .9), rgba(var(--acc), .35)); opacity: .45; transition: opacity .3s; }
.hud-player { left: 0; }
.hud-enemy { --acc: 255, 77, 77; right: 0; flex-direction: row-reverse; padding: 10px 10px 10px 16px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.hud-enemy::after { background: linear-gradient(270deg, rgba(var(--acc), .9), rgba(var(--acc), .35)); }
.hud:not(.active) { filter: saturate(.8) brightness(.9); }
.hud.active::after { opacity: 1; animation: hudAcc 1.6s ease-in-out infinite alternate; }
@keyframes hudAcc { from { box-shadow: 0 0 6px rgba(var(--acc), .6); } to { box-shadow: 0 0 16px rgba(var(--acc), 1); } }
.hud.hit { animation: hudHit .32s ease-out; }
@keyframes hudHit { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

.hud-avatar { position: relative; flex: none; width: 90px; height: 90px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #3a2a2e, #0c0809 72%);
  box-shadow: inset 0 0 0 2px rgba(var(--acc), .55), inset 0 -10px 18px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; transition: box-shadow .3s; }
.hud-avatar img { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.hud-enemy .hud-avatar img { transform: scaleX(-1); }
.hud.active .hud-avatar { box-shadow: inset 0 0 0 2px rgba(var(--acc), 1), 0 0 14px rgba(var(--acc), .5), inset 0 -10px 18px rgba(0,0,0,.5); }
.hud.low .hud-avatar { animation: lowRing .7s ease-in-out infinite alternate; }
@keyframes lowRing { to { box-shadow: inset 0 0 0 3px #ff3b3b, 0 0 16px rgba(255,59,59,.8), inset 0 -10px 18px rgba(0,0,0,.5); } }

.hud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hud-top { display: flex; align-items: center; gap: 8px; height: 24px; }
.hud-enemy .hud-top { flex-direction: row-reverse; }
.hud-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; line-height: 24px; white-space: nowrap; overflow: hidden;
  text-shadow: 0 2px 0 #000; letter-spacing: .3px; }
.hud-nick { flex: 1; min-width: 0; display: block; font-size: 19px; overflow: hidden; }   /* (v3.23: a letra diminui até o nome caber inteiro — fitText) */
.hud-flag { flex: none; display: inline-flex; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.hud-flag svg { display: block; width: 30px; height: 20px; }
.hud-enemy .hud-name { flex-direction: row-reverse; text-align: right; }
.hud-res { display: flex; gap: 5px; flex: none; }
.hud-enemy .hud-res { flex-direction: row-reverse; }
.res-chip { --c: 255, 198, 58; display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 5px; border-radius: 7px;
  font-size: 15px; color: rgb(var(--c)); background: rgba(0,0,0,.38); border: 1px solid rgba(var(--c), .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); cursor: help; }
.res-chip svg { width: 13px; height: 15px; fill: rgb(var(--c)); filter: drop-shadow(0 0 3px rgba(var(--c), .5)); }
.res-chip.c-exp { --c: 255, 106, 58; } .res-chip.c-ele { --c: 74, 184, 255; }
/* (v3.31, pedido do autor) o escudo NUNCA muda de cor: reduzido ganha o selo vermelho (▼N) e a barrinha de integridade */
/* os selos (queda ▼N e o escudo % dos módulos) ficam nos cantos, por cima: o chip não cresce e o NOME do piloto sempre cabe */
.res-chip { position: relative; overflow: visible; padding-bottom: 2px; }
.res-chip .rdrop { display: none; position: absolute; top: -8px; right: -4px; z-index: 2; text-decoration: none; padding: 0 3px; border-radius: 4px; font-size: 9px; line-height: 12px;
  color: #fff; background: linear-gradient(180deg, #ff4a4a, #b3121c); box-shadow: 0 0 6px rgba(255,50,50,.6), 0 1px 0 #000; pointer-events: none; }
.res-chip.dropped .rdrop, .res-chip.neg .rdrop { display: inline-block; }
.res-chip .rbar { position: absolute; left: 3px; right: 3px; bottom: 1px; height: 2px; border-radius: 2px; background: rgba(255,60,60,.85); }
.res-chip .rbar s { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--ri, 1) * 100%); border-radius: 2px; text-decoration: none;
  background: rgb(var(--c)); box-shadow: 0 0 4px rgba(var(--c), .9); transition: width .4s ease; }
.res-chip:not(.dropped):not(.neg) .rbar { background: rgba(var(--c), .25); }
.res-chip.hurt { animation: chipHurt .55s ease-out; }
@keyframes chipHurt { 0% { transform: scale(1); } 30% { transform: scale(1.16); box-shadow: 0 0 0 2px rgba(255,60,60,.9), 0 0 14px rgba(255,60,60,.8); } 100% { transform: scale(1); } }
.res-chip b { font-weight: normal; }
@keyframes chipPop { 40% { transform: scale(1.18); } }

.hud-hp { position: relative; height: 32px; border-radius: 8px; overflow: hidden; cursor: help;
  background: linear-gradient(180deg, #000, #0b0809); box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 1px rgba(255,215,106,.12); }
.hud-hp-fill, .hud-hp-ghost, .hud-hp-flash { position: absolute; left: 0; top: 0; bottom: 0; }
.hud-enemy .hud-hp-fill, .hud-enemy .hud-hp-ghost { left: auto; right: 0; }
.hud-hp-fill { background: linear-gradient(180deg, #ff6b5e 0%, #e3201c 52%, #a50e10 100%); transition: width .45s cubic-bezier(.2,.8,.3,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.hud-hp-ghost { background: linear-gradient(180deg, #fff1c4, #ffbf5a); opacity: .8; transition: width .7s ease .45s; }
.hud-hp-flash { right: 0; background: #fff; opacity: 0; pointer-events: none; }
.hud-hp.hit .hud-hp-flash { animation: hpFlash .35s ease-out; }
.hud-hp.heal .hud-hp-flash { background: #4dff7a; animation: hpFlash .6s ease-out; }
@keyframes hpFlash { from { opacity: .55; } to { opacity: 0; } }
.hud-hp-ticks { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.4) calc(10% - 1px) 10%); }
.hud.low .hud-hp-fill { animation: hpLow .7s ease-in-out infinite alternate; }
@keyframes hpLow { to { filter: brightness(1.45) saturate(1.2); } }
.hud-hp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  text-shadow: 0 2px 0 #000, 0 0 4px #000; pointer-events: none; }
.hud-enemy .hud-hp-text { flex-direction: row-reverse; }
.hud-hp-text b { font-weight: normal; font-size: 21px; }
.hud-hp-text b small { font-size: 14px; opacity: .75; margin-left: 4px; }
.hud-hp-pct { font-size: 14px; opacity: .85; }

.hud-meters { display: flex; gap: 10px; }
.hud-enemy .hud-meters { flex-direction: row-reverse; }
.hud-meter { --c: 255, 210, 58; flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; height: 22px; cursor: help; }
.hud-enemy .hud-meter { flex-direction: row-reverse; }
.hud-meter.m-hea { --c: 255, 110, 50; }
.hud-meter .mi { flex: none; width: 15px; height: 19px; fill: rgb(var(--c)); filter: drop-shadow(0 0 4px rgba(var(--c), .6)); }
.mbar { position: relative; flex: 1; height: 20px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #000, #0b0809); box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 0 1px rgba(255,215,106,.1); }
.mfill, .mprev { position: absolute; left: 0; top: 0; bottom: 0; transition: left .35s ease, width .35s ease; }
.hud-enemy .mfill { left: auto; right: 0; transition: right .35s ease, width .35s ease; }
.hud-enemy .mprev { left: auto; transition: right .35s ease, width .35s ease; }
.m-ene .mfill { background: linear-gradient(180deg, #fff08a, #ffc21a 55%, #c98a00); }
.m-hea .mfill { background: linear-gradient(180deg, #ffb07a, #ff5a24 55%, #c2260a); }
/* prévia do próximo turno: energia que volta (amarelo listrado) e calor que vai esfriar (azul listrado) */
.m-ene .mprev { background: repeating-linear-gradient(135deg, rgba(255,226,90,.45) 0 4px, rgba(255,226,90,.15) 4px 8px); }
.m-hea .mprev { background: repeating-linear-gradient(135deg, rgba(120,200,255,.55) 0 4px, rgba(120,200,255,.2) 4px 8px); }
.mtext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px;
  text-shadow: 0 1px 0 #000, 0 0 3px #000; pointer-events: none; }
.mchip { flex: none; min-width: 34px; text-align: center; font-size: 13px; padding: 1px 5px; border-radius: 6px;
  color: rgb(var(--c)); background: rgba(var(--c), .12); border: 1px solid rgba(var(--c), .35); }
.m-hea .mchip { --c: 120, 200, 255; }
.hud-meter.low .mbar { animation: meterLow .6s steps(2) infinite; }
@keyframes meterLow { 50% { box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 0 2px rgba(255,210,58,.9); } }
.hud-meter.hot .mbar { animation: meterHot .5s steps(2) infinite; }
.hud-meter.hot .mi { animation: shake .25s linear infinite; }
@keyframes meterHot { 50% { box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 0 2px #ff3b1a, 0 0 10px rgba(255,59,26,.8); } }
@keyframes shake { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }

/* ---------- (v3.31) HUD da luta, acabamento: avatar holográfico, brilho da vida, número do golpe e avisos nas barras */
.hud { box-shadow: inset 0 0 0 1px rgba(255,215,106,.08); }
.hud-avatar::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.hud-scan { position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--acc), .22), transparent); animation: hudScan 3.6s linear infinite; }
.hud:not(.active) .hud-scan { animation-duration: 7s; opacity: .5; }
@keyframes hudScan { to { top: 100%; } }
.hud-brk { position: absolute; inset: 4px; pointer-events: none; opacity: .85;
  background: linear-gradient(rgba(var(--acc), .9), rgba(var(--acc), .9)) left top / 12px 2px no-repeat,
              linear-gradient(rgba(var(--acc), .9), rgba(var(--acc), .9)) left top / 2px 12px no-repeat,
              linear-gradient(rgba(var(--acc), .9), rgba(var(--acc), .9)) right bottom / 12px 2px no-repeat,
              linear-gradient(rgba(var(--acc), .9), rgba(var(--acc), .9)) right bottom / 2px 12px no-repeat; }
.hud-hp-fill { overflow: visible; }
.hp-cap { position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: #fff3e0; box-shadow: 0 0 8px #ffd2b0, 0 0 14px rgba(255,90,60,.9); border-radius: 2px; }
.hud-enemy .hp-cap { right: auto; left: 0; }
.hud-hp-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hud-hp-sheen::before { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: hpSheen 4.5s ease-in-out infinite; }
@keyframes hpSheen { 0%, 70% { left: -80px; } 100% { left: 110%; } }
.hud-hp { overflow: visible; }
.hud-hp > div:not(.hud-hp-text) { border-radius: 8px; }
.hud-hp-ghost, .hud-hp-fill, .hud-hp-flash, .hud-hp-ticks, .hud-hp-sheen { clip-path: inset(0 round 8px); }
.hud-hp-dmg { position: absolute; top: -6px; z-index: 3; font-size: 22px; color: #ff4a3a; pointer-events: none; opacity: 0;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(255,40,30,.9); }
.hud-hp-dmg.heal { color: #5dff8a; text-shadow: 0 2px 0 #000, 0 0 8px rgba(60,255,120,.9); }
.hud-hp-dmg.go { animation: hpDmgUp 1.1s ease-out forwards; }
@keyframes hpDmgUp { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 70% { opacity: 1; transform: translateY(-12px) scale(1); } 100% { opacity: 0; transform: translateY(-22px); } }
.mfill { overflow: visible; }
.m-cap { position: absolute; top: 0; bottom: 0; right: 0; width: 3px; border-radius: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 6px rgba(var(--c), 1); }
.hud-enemy .m-cap { right: auto; left: 0; }
.mbar .mtag { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-style: normal; font-size: 9px; letter-spacing: 0; white-space: nowrap;
  pointer-events: none; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.m-hea.over .mtext { text-shadow: 0 1px 3px #000, 0 0 5px #000; }
.m-ene.empty .mtag:not(:empty) { display: flex; color: #bfe9ff; background: repeating-linear-gradient(135deg, rgba(40,150,255,.45) 0 6px, rgba(20,80,160,.35) 6px 12px); animation: eneEmpty 1s ease-in-out infinite alternate; }
.m-ene.empty .mbar { box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 0 2px rgba(69,198,255,.85), 0 0 12px rgba(69,198,255,.6); }
.m-ene.empty .mi { fill: #45c6ff; filter: drop-shadow(0 0 6px #45c6ff); }
@keyframes eneEmpty { to { filter: brightness(1.35); } }
.m-hea .mtag:not(:empty) { display: flex; color: #fff; background: repeating-linear-gradient(135deg, rgba(255,70,30,.5) 0 6px, rgba(140,20,0,.4) 6px 12px); }

/* Centro: relógio circular do turno (esvazia com o tempo) e botões */
.hud-center {
  position: absolute; left: 470px; top: 0; width: 260px; height: 104px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px 4px;
  background: linear-gradient(180deg, rgba(14, 10, 11, .95), rgba(3, 2, 2, .93)); backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%);
}
.hc-col { display: flex; flex-direction: column; gap: 6px; }
.hud-sq, .hud-power, .hud-speed {
  width: 44px; height: 40px; padding: 8px; border-radius: 10px; color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(255,215,106,.12), rgba(255,215,106,.02)); border: 1px solid rgba(212,175,55,.38);
  box-shadow: inset 0 1px 0 rgba(255,215,106,.14); transition: filter .15s, transform .1s;
}
.hud-sq svg, .hud-power svg { width: 100%; height: 100%; fill: currentColor; }
.hud-sq:hover, .hud-power:hover, .hud-speed:hover { filter: brightness(1.35); }
.hud-sq:active, .hud-power:active, .hud-speed:active { transform: scale(.94); }
.hud-power { color: #fff; background: linear-gradient(180deg, #e01a33, #6e0612); border-color: rgba(255,215,106,.6); }
.hud-speed { padding: 0; font-size: 18px; color: var(--gold-hi); text-shadow: 0 0 6px rgba(255,200,64,.6); }
.lcd { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.lcd .tring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tring circle { fill: none; stroke-width: 8; }
.tring .tr-bg { stroke: rgba(255,255,255,.08); }
.tring .tr-fg { stroke: #ff5a3a; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; filter: drop-shadow(0 0 4px currentColor); }
.lcd.player .tr-fg { stroke: #ffc840; }
.lcd-val { position: relative; font-size: 36px; line-height: 1; margin-top: -10px; color: #ff6a4a; text-shadow: 0 0 10px rgba(255,90,58,.7); }
.lcd.player .lcd-val { color: #ffd76a; text-shadow: 0 0 10px rgba(255,200,64,.8); }
.lcd.urgent .lcd-val { color: #ff4a3a; text-shadow: 0 0 12px rgba(255,58,42,.95); animation: tick 1s ease-out infinite; }
.lcd.urgent .tr-fg { stroke: #ff3a2a; }
@keyframes tick { 0% { transform: scale(1.22); } 40% { transform: scale(1); } }
.lcd-label { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: .5px; color: var(--text-dim); white-space: nowrap; }

/* Ações do turno: losangos numa aba embaixo do painel de cada lado */
.turn-dots { position: absolute; top: var(--battle-hud-height); display: flex; gap: 10px; padding: 7px 14px 8px; cursor: help;
  background: rgba(6, 4, 5, .92); backdrop-filter: blur(6px); }
.turn-dots.left { left: 0; border-radius: 0 0 12px 0; }
.turn-dots.right { right: 0; border-radius: 0 0 0 12px; }
.turn-dots i { width: 16px; height: 16px; transform: rotate(45deg); border-radius: 3px; background: #140f04; border: 2px solid #4a3a12; transition: all .25s; }
.turn-dots.right i { background: #160b0b; border-color: #4a1f1f; }
.turn-dots i.on { background: linear-gradient(135deg, #fff3c0, #ffc21a); border-color: #ffe08a; box-shadow: 0 0 10px rgba(255,194,26,.9); }
.turn-dots.right i.on { background: linear-gradient(135deg, #ffc4c4, #ff4d4d); border-color: #ffb0b0; box-shadow: 0 0 10px rgba(255,77,77,.9); }

.move-layer { position: absolute; left: var(--stage-ext, 0px); top: 0; width: 1200px; height: 600px; pointer-events: none; }
.move-target {
  position: absolute; width: 64px; height: 100px; pointer-events: auto; cursor: pointer; padding: 0;
  background: url('assets/sm/move_arrow.png') center / contain no-repeat; border: none;
  animation: bob .7s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(43,220,68,.8));
}
.move-target:hover { filter: drop-shadow(0 0 14px #9dff9d) brightness(1.3); }
.move-target.tele { filter: hue-rotate(160deg) drop-shadow(0 0 8px rgba(80,160,255,.8)); }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(14px); } }

.heat-banner {
  position: absolute; top: 470px; width: 290px; height: 38px; margin-left: -145px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #b01014, #6c0508); border: 2px solid #ff4a3a; border-radius: 3px;
  font-size: 17px; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 0 #000;
  box-shadow: 0 0 14px rgba(255,40,20,.7); animation: blink .6s steps(2) infinite;
}
.heat-banner svg { width: 16px; height: 20px; color: #ffb040; }
@keyframes blink { 50% { opacity: .65; } }

.battle-toast {
  position: absolute; left: 50%; top: 200px; transform: translateX(-50%);
  padding: 8px 26px; font-size: 26px; letter-spacing: 2px; white-space: nowrap;
  background: rgba(6, 3, 4, .9); border: 1px solid var(--gold); border-radius: 4px; color: var(--gold-hi);
  text-shadow: 0 2px 0 #000; opacity: 0; pointer-events: none; transition: opacity .25s; box-shadow: 0 0 18px rgba(227,18,43,.35);
}
.battle-toast.show { opacity: 1; }
.battle-toast.warn { border-color: #ff3b3b; color: #ffd0d0; }

.rail {
  position: absolute; left: 0; right: 0; top: 590px; height: 26px;
  background: linear-gradient(180deg, #1c1315 0%, #0d090a 45%, #050304 100%);
  border-top: 1px solid rgba(212,175,55,.6); border-bottom: 1px solid #000;
  box-shadow: 0 -1px 0 rgba(227,18,43,.3);
}
.rail i { position: absolute; top: 9px; width: 34px; height: 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px); opacity: .85; animation: railFlow .9s linear infinite; }
@keyframes railFlow { to { background-position: 8px 0; } }
.rail i:nth-child(1) { left: 8px; } .rail i:nth-child(2) { left: 190px; } .rail i:nth-child(3) { left: 250px; }
.rail i:nth-child(4) { left: 940px; } .rail i:nth-child(5) { left: 1000px; } .rail i:nth-child(6) { left: 1155px; }

.actionbar {
  position: absolute; left: 0; right: 0; top: 616px; height: 104px;
  background-color: #050304;
  background-image: linear-gradient(rgba(227,18,43,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(227,18,43,.16) 1px, transparent 1px),
    linear-gradient(180deg, #14080a, #000);
  background-size: 24px 24px, 24px 24px, 100% 100%;
}
.action-row { position: absolute; left: 10px; right: 430px; top: 4px; bottom: 4px; display: flex; gap: 8px; }
.act {
  position: relative; width: 110px; min-width: 0; max-width: 110px; flex: 1 1 110px; height: 96px; padding: 8px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,200,64,.08), transparent 70%), linear-gradient(180deg, #120d0f, #050304); border: 2px solid #000; border-radius: 9px;
  box-shadow: inset 0 0 0 2px rgba(212,175,55,.6), inset 0 0 0 4px #1a1214, 0 3px 6px rgba(0,0,0,.6);
  color: rgb(var(--you)); display: flex; align-items: center; justify-content: center;
  transition: box-shadow .15s;
}
.act svg.big { width: 76px; height: 64px; filter: drop-shadow(0 0 2px #3a2600) drop-shadow(0 2px 0 #1a1000) drop-shadow(0 0 8px rgba(255,200,64,.3)); }
.act.red { color: #ff2020; }
.act.red svg.big { filter: drop-shadow(0 2px 0 #3a0505); }
.act:hover:not(:disabled) { box-shadow: inset 0 0 0 2px #ffe9a8, inset 0 0 0 4px #3a2a10, 0 0 14px rgba(255,200,64,.45); }
.act:active:not(:disabled) { transform: translateY(2px); }
.act:disabled { cursor: default; }
.act:disabled > svg.big, .act:disabled > img { opacity: .3; filter: grayscale(.8); }
.act.on { box-shadow: inset 0 0 0 3px rgb(var(--you)), inset 0 0 0 5px #3a2a06, 0 0 16px rgba(255,200,64,.65); }
.act img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.act .badge { position: absolute; right: 6px; bottom: 4px; width: 26px; height: 26px; color: #ff2a2a; filter: drop-shadow(0 1px 0 #000); }
.act .dot { position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--you)); box-shadow: 0 0 8px rgb(var(--you)); }
.act .uses { position: absolute; left: 8px; bottom: 4px; font-size: 16px; color: #ffd23a; text-shadow: 0 1px 0 #000; }
.act.back { color: #e01818; } .act.back svg.big { width: 70px; height: 48px; }
.action-tip {
  position: absolute; left: auto; right: 10px; top: 6px; bottom: 6px; width: 400px; height: auto;
  box-sizing: border-box; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--gold) #10090b; padding: 5px 8px; border: 1px solid rgba(212,175,55,.42); border-radius: 5px;
  background: rgba(7,4,5,.94); font-family: Arial, sans-serif; font-size: 12px; line-height: 1.35; color: #f0dca8;
  overflow-wrap: anywhere; text-shadow: 0 1px 0 #000; pointer-events: auto;
}
.action-tip:empty { display: none; }
.action-tip b { font-family: var(--font); font-weight: normal; font-size: 14px; color: #fff; }
.action-tip:has(.weapon-details) { max-height: none; }
.weapon-details .weapon-level { font-size: 11px; opacity: .8; margin-top: 3px; }
.weapon-details .weapon-level svg { width: 11px; height: 11px; vertical-align: middle; fill: currentColor; }
.weapon-details .tip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 4px 0; }
.weapon-details .tip-stats div { align-items: flex-start; min-width: 0; }
.weapon-details .weapon-state { border-top: 1px solid rgba(212,175,55,.3); padding-top: 7px; font-size: 12px; }
.weapon-short { color: #ffab8e; font-size: 12px; margin-top: 5px; }

/* Fim de batalha */
.battle-end { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.end-banner { height: 122px; width: auto; max-width: 640px; object-fit: contain; animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.end-banner.defeat { height: 58px; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reward { width: 480px; padding: 0 0 18px; display: flex; flex-direction: column; align-items: center; animation: pop .45s .35s both cubic-bezier(.2,1.4,.4,1); }
.reward h3 { margin: 10px 0 8px; font-size: 34px; font-weight: normal; color: var(--gold-hi); text-shadow: 0 3px 0 #3a2600, 0 0 16px rgba(255,200,64,.45); letter-spacing: 1px; }
.reward h3.lost { color: #ff5a5a; text-shadow: 0 3px 0 #3d0a0a; }
.reward-row { width: 440px; display: flex; align-items: center; gap: 14px; margin: 4px 0; padding: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(212,175,55,.25); }
.reward-row img { width: 56px; height: 56px; object-fit: contain; }
.reward-row .rr-body { flex: 1; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.reward-row .rr-line { display: flex; justify-content: space-between; }
.reward-row .rr-total { margin-top: 4px; padding: 3px 6px; background: linear-gradient(90deg, #a50d20, #3a0208); color: var(--gold-hi); font-family: var(--font); font-size: 16px; display: flex; justify-content: space-between; box-shadow: inset 0 0 0 1px rgba(212,175,55,.4); }
.reward .sm-btn { margin-top: 14px; }
.levelup { font-size: 20px; color: #ffd23a; margin-top: 8px; }

/* ================= Modais ================= */
#modalRoot { position: absolute; inset: 0; pointer-events: none; z-index: 100; }
.modal-back { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(30,2,6,.55), rgba(0,0,0,.8)); display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.dialog { width: 440px; padding: 0 26px 22px; text-align: center; }
.dialog p { font-family: Arial, sans-serif; font-size: 15px; color: #ddd2c2; margin: 6px 0 14px; line-height: 1.4; }
.dialog input { width: 100%; height: 40px; padding: 0 10px; margin-bottom: 14px; background: #000; border: 1px solid rgba(212,175,55,.5); color: #fff; font-family: var(--font); font-size: 18px; border-radius: 4px; }
.dialog .btns { display: flex; gap: 12px; justify-content: center; }
.dialog .btns .sm-btn { min-width: 140px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(212,175,55,.14); font-size: 17px; }

.item-card { width: 560px; padding: 0 0 18px; }
.ic-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 3px solid rgba(0,0,0,.4); }
.ic-name { font-size: 24px; text-shadow: 0 2px 0 #000; }
.ic-elem { font-family: Arial, sans-serif; font-weight: bold; font-size: 13px; padding: 3px 8px; border-radius: 3px; background: rgba(0,0,0,.4); }
.ic-body { display: flex; gap: 16px; padding: 14px 16px 6px; }
.ic-img { flex: none; width: 170px; height: 170px; border-radius: 8px; background-size: cover; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.ic-img img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); }
.ic-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; align-content: start; font-size: 15px; }
.ic-stats div { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ic-stats .lbl { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); }
.ic-stats svg, .ic-stats img { width: 18px; height: 20px; flex: none; }
.ic-tiers { display: flex; justify-content: center; gap: 8px; padding: 8px 16px 4px; }
.tier-btn { width: 88px; height: 32px; font-size: 13px; color: #fff; border: 2px solid #000; border-radius: 4px; opacity: .45; text-shadow: 0 1px 0 #000; }
.tier-btn.active { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255,255,255,.4); }
.tier-btn:hover { opacity: .85; }
.ic-actions { display: flex; justify-content: center; gap: 12px; padding-top: 12px; }
.ic-warn { text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: #ffb0a0; padding-top: 6px; }
.t-C { background: linear-gradient(180deg, #b9c1c9, #6c747c); } .t-R { background: linear-gradient(180deg, #58a8ff, #1c5fc0); }
.t-E { background: linear-gradient(180deg, #cf86ff, #7b22c0); } .t-L { background: linear-gradient(180deg, #ffc35a, #d67a06); }
.t-M { background: linear-gradient(180deg, #ff6a6a, #b01014); }
.head-C { background: linear-gradient(90deg, #5c646c, #2a2f34); } .head-R { background: linear-gradient(90deg, #1d63c4, #0b2a55); }
.head-E { background: linear-gradient(90deg, #8a2fd0, #3a0f60); } .head-L { background: linear-gradient(90deg, #d88208, #5a3202); }
.head-M { background: linear-gradient(90deg, #c8161c, #4d0508); }

.roster-list { max-height: 330px; overflow-y: auto; margin: 4px 0 14px; text-align: left; }
.roster-entry { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; background: rgba(0,0,0,.5); border: 1px solid rgba(212,175,55,.25); border-radius: 4px; cursor: pointer; font-size: 17px; }
.roster-entry:hover { border-color: var(--gold-hi); }
.roster-entry.active { border-color: var(--sel); box-shadow: 0 0 10px rgba(255,200,64,.35); }
.roster-entry span { flex: 1; }
.roster-entry button { width: 34px; height: 34px; padding: 6px; background: #3a0a0c; border: 1px solid #8a1a1e; border-radius: 4px; color: #ff6a6a; }
.roster-entry button svg { width: 100%; height: 100%; }


/* ================= Menu: barra lateral variações ================= */
.side-btn.green { color: #fff; background: radial-gradient(ellipse at 50% 0%, rgba(255,215,106,.25), transparent 65%), linear-gradient(180deg, #d0142c 0%, #8a0818 55%, #4a030b 100%); box-shadow: inset 0 0 0 1px rgba(255,215,106,.55), inset 0 -8px 16px rgba(0,0,0,.35), 0 2px 0 #000; border-color: var(--gold); }
.side-btn.back { height: 78px; }
.side-btn .ico-md { width: 50px; height: 40px; }
.side-btn .ico-gear { width: 54px; height: 54px; animation: gearSpin 14s linear infinite; }
@keyframes gearSpin { to { transform: rotate(360deg); } }
.side-q { font-size: 56px; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.45); }
.side-label {
  position: absolute; left: 112px; z-index: 20; padding: 4px 10px; font-size: 14px; white-space: nowrap;
  background: #050304; border: 1px solid var(--gold); border-radius: 4px; pointer-events: none; color: var(--gold-hi); box-shadow: 0 0 12px rgba(227,18,43,.35);
}
.tb-level-label { font-size: 18px; color: var(--gold-hi); margin-left: 6px; text-shadow: 0 1px 0 #000; }

/* ================= Mapa principal ================= */
#sec-map { overflow: hidden; border: 1px solid rgba(212,175,55,.38); border-radius: 4px; background: #000; }
.world-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.world-view.dragging { cursor: grabbing; }
.world-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.world-layer.glide { transition: transform .42s cubic-bezier(.2,.8,.3,1); }
.world-img { position: absolute; left: 0; top: 0; user-select: none; pointer-events: none; image-rendering: auto; }
.map-route { position: absolute; left: 0; top: 0; pointer-events: none; }
.map-route polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-route .all { stroke: rgba(20,24,30,.28); stroke-width: 10; stroke-dasharray: 2 22; }
.map-route .done { stroke: #ffd24a; stroke-width: 9; stroke-dasharray: 2 20; filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
/* v3.22: mapa vivo — pulsos de luz correndo pela trilha já vencida, camada animada (js/map_fx.js) e anel na próxima fase */
.map-route .flow { stroke: #fff4c4; stroke-width: 7; stroke-dasharray: 2 150; animation: routeFlow 2.6s linear infinite; filter: drop-shadow(0 0 5px #ffd24a); }
@keyframes routeFlow { to { stroke-dashoffset: -152; } }
.map-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.map-mk.next::before, .map-mk.next::after { content: ''; position: absolute; left: -44px; top: -12px; width: 88px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,214,90,.9); box-shadow: 0 0 12px rgba(255,200,64,.6); animation: mkRing 2.2s ease-out infinite; pointer-events: none; }
.map-mk.next::after { animation-delay: 1.1s; }
@keyframes mkRing { from { transform: scale(.35); opacity: .95; } to { transform: scale(1.5); opacity: 0; } }
.map-mk.boss:not(.done) .mk-emblem.boss { animation: bossGlow 2.4s ease-in-out infinite; }
@keyframes bossGlow { 50% { box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 22px 6px rgba(255,40,30,.55); } }
.region-label { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.region-label span { font-size: 54px; color: #fff; letter-spacing: 3px; text-transform: uppercase; opacity: .82;
  text-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 16px rgba(0,0,0,.5); -webkit-text-stroke: 2px rgba(10,20,30,.55); }
.region-label small { font-size: 26px; color: #ffe08a; opacity: .9; text-shadow: 0 3px 0 rgba(0,0,0,.5); }

.map-mk { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; z-index: 2; }
.map-mk:hover { z-index: 6; }
.map-mk > * { position: absolute; }
.mk-dot { left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.mk-dot.open { background: radial-gradient(circle at 38% 32%, #fff2a8, #ffc62e 45%, #b87400); border: 3px solid #4d2f00; }
.mk-dot.locked { background: radial-gradient(circle at 38% 32%, #7a8494, #4a5362 60%, #2c333e); border: 3px solid #1a1f27; }
.map-mk:hover .mk-dot, .map-mk:hover .mk-bracket, .map-mk:hover .mk-flag { transform: scale(1.15); }
.mk-num { left: 0; top: 20px; transform: translateX(-50%); min-width: 30px; padding: 1px 7px; border-radius: 10px; font-size: 17px; color: #fff; white-space: nowrap;
  background: rgba(6,4,5,.85); border: 2px solid rgba(255,215,106,.22); text-align: center; line-height: 20px; }
.mk-num.locked { color: #8d9aab; }
.mk-num.done { border-color: var(--gold); }
.mk-num.next { background: linear-gradient(180deg, #ffe08a, #d4a017); color: #2a1400; border-color: #3a2600; top: 42px; font-size: 19px; box-shadow: 0 0 12px rgba(255,200,64,.6); }
.mk-stars { margin-left: 4px; } .mk-stars i { font-style: normal; color: #ffe24a; } .mk-stars i.r { color: #ff5a5a; }
.world-layer.far .mk-num:not(.next) { display: none; }
.mk-flag { left: -8px; top: -44px; width: 34px; height: 46px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); transition: transform .12s; }
.mk-flag svg { width: 100%; height: 100%; }
.mk-bracket { left: -38px; top: -38px; width: 76px; height: 76px; transition: transform .12s; }
.mk-bracket::before, .mk-bracket::after { content: ''; position: absolute; inset: 0; border: 7px solid currentColor; border-radius: 8px;
  -webkit-mask: linear-gradient(#000 0 0) top left / 24px 24px no-repeat, linear-gradient(#000 0 0) top right / 24px 24px no-repeat,
    linear-gradient(#000 0 0) bottom left / 24px 24px no-repeat, linear-gradient(#000 0 0) bottom right / 24px 24px no-repeat;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.mk-bracket::after { display: none; }
.mk-bracket.green { color: #ffd24a; animation: mkPulse 1.1s ease-in-out infinite; }
.mk-bracket.orange { color: #ffa62a; }
.mk-bracket.red { color: #ff3a2a; left: -46px; top: -46px; width: 92px; height: 92px; }
.mk-bracket.locked { opacity: .75; filter: saturate(.6); }
@keyframes mkPulse { 50% { transform: scale(1.08); } }
.mk-mech { position: absolute; left: -95px; top: -144px; width: 190px; height: 162px; pointer-events: none; filter: drop-shadow(0 4px 2px rgba(0,0,0,.5)); animation: mkBob .9s ease-in-out infinite alternate; }
@keyframes mkBob { to { transform: translateY(-5px); } }
.mk-emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.mk-emblem.boss { width: 56px; height: 56px; font-size: 34px; background: radial-gradient(circle at 38% 32%, #ff9a8a, #d8161c 55%, #6a0508); border: 3px solid #2a0203; }
.mk-emblem.sub { background: radial-gradient(circle at 38% 32%, #ffe0a0, #ff9a1a 55%, #9a4a00); border: 3px solid #3a1c00; font-family: var(--font); }

.map-region { position: absolute; left: 12px; top: 10px; padding: 6px 16px 8px; background: rgba(4,2,3,.86); border: 1px solid rgba(212,175,55,.55); border-radius: 6px;
  display: flex; flex-direction: column; pointer-events: none; box-shadow: 0 0 16px rgba(227,18,43,.25); }
.map-region b { font-weight: normal; font-size: 20px; color: #fff; letter-spacing: 1px; }
.map-region span { font-family: Arial, sans-serif; font-size: 12px; color: #ffcf5a; }
.map-tools { position: absolute; right: 12px; bottom: 164px; display: flex; flex-direction: column; gap: 6px; }
.map-btn { width: 40px; height: 40px; font-size: 24px; line-height: 1; color: var(--gold-hi); border-radius: 6px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #a50d20, #4a030b); box-shadow: inset 0 1px 0 rgba(255,210,200,.35), 0 3px 0 rgba(0,0,0,.5); }
.map-btn:hover { filter: brightness(1.15); }
.map-mini { position: absolute; right: 12px; bottom: 12px; width: 220px; height: 140px; border: 1px solid rgba(212,175,55,.55); border-radius: 4px; overflow: hidden;
  background: #000; box-shadow: 0 4px 10px rgba(0,0,0,.6); cursor: pointer; }
.map-mini img { width: 100%; height: 100%; display: block; pointer-events: none; }
.mini-view { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.map-missions-toggle { position: absolute; right: 12px; top: 10px; height: 36px; padding: 0 16px; font-size: 16px; color: #fff; border-radius: 6px;
  border: 1px solid var(--gold); background: linear-gradient(180deg, #e01a33, #6e0612); box-shadow: inset 0 1px 0 rgba(255,210,200,.35), 0 3px 0 rgba(0,0,0,.5), 0 0 12px rgba(227,18,43,.35); z-index: 3; }
#sec-map .missions-panel { display: none; top: 54px; z-index: 3; }
#sec-map.missions-open .missions-panel { display: block; }
.lp-region { margin: -8px 0 8px; text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: #ffcf5a; }
.missions-panel { position: absolute; right: 8px; top: 8px; width: 340px; padding: 0 10px 10px; }
.mission { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid rgba(212,175,55,.16); }
.mission:last-child { border-bottom: none; }
.m-ico { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: #000; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-hi); box-shadow: 0 0 8px rgba(227,18,43,.3); }
.m-ico svg { width: 20px; height: 20px; }
.m-body { flex: 1; min-width: 0; }
.m-title { font-family: Arial, sans-serif; font-weight: bold; font-size: 12px; color: var(--text); margin-bottom: 4px; }
.m-bar { position: relative; height: 14px; background: #000; border: 1px solid rgba(212,175,55,.38); }
.m-bar div { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a0818, #e3122b 70%, #ffb13a); }
.m-bar span { position: absolute; inset: 0; font-size: 10px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 0 #000; }
.m-reward { flex: none; text-align: right; font-size: 14px; color: var(--gold-hi); line-height: 1.3; }
.m-reward img { width: 16px; height: 16px; vertical-align: -3px; }
.map-profile { position: absolute; left: 12px; bottom: 12px; width: 230px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.map-profile b { font-weight: normal; font-size: 18px; color: var(--gold-hi); }
.map-profile span { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.t-mini { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, #d48bff, #7a22c8); box-shadow: 0 0 4px rgba(176,77,255,.6); color: #fff; font-size: 11px; vertical-align: -2px; }

/* Painel da fase */
.level-panel { width: 640px; padding: 0 16px 16px; }
.lp-body { display: flex; gap: 16px; }
.lp-enemy { width: 280px; background: radial-gradient(ellipse at 50% 80%, #2a070c, #050304); border: 1px solid rgba(212,175,55,.32); border-radius: 6px; padding: 8px 10px; text-align: center; }
.lp-enemy canvas { width: 260px; height: 230px; }
.lp-ename { font-size: 20px; color: #ff6a5a; }
.lp-estat { font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); display: flex; gap: 6px; justify-content: center; align-items: center; }
.lp-estat svg { width: 16px; height: 16px; }
.lp-eres { display: flex; gap: 12px; justify-content: center; margin-top: 4px; font-size: 15px; color: var(--text); }
.lp-eres span { display: flex; align-items: center; gap: 3px; }
.lp-eres img { width: 18px; height: 20px; object-fit: contain; }
.lp-eel { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.lp-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.lp-diffs { display: flex; flex-direction: column; gap: 6px; }
.diff-btn { height: 40px; font-size: 16px; color: #fff; border: 2px solid #000; border-radius: 4px; opacity: .6; display: flex; align-items: center; justify-content: center; gap: 6px; }
.diff-btn svg { width: 14px; height: 16px; }
.diff-btn.d-N { background: linear-gradient(180deg, #7a7276, #3a3336); }
.diff-btn.d-H { background: linear-gradient(180deg, #ffb13a, #c06a08); }
.diff-btn.d-I { background: linear-gradient(180deg, #ff4a4a, #9a0a0e); }
.diff-btn.active { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.4); }
.diff-btn:disabled { opacity: .25; cursor: default; }
.lp-rewards { display: flex; gap: 14px; justify-content: center; font-size: 20px; color: var(--gold-hi); }
.lp-rewards div { display: flex; align-items: center; gap: 6px; }
.lp-rewards img { width: 30px; height: 30px; object-fit: contain; }
.lp-estimate { text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); padding: 5px 8px; border-radius: 4px; background: rgba(0,0,0,.5); border: 1px solid rgba(212,175,55,.25); }
.lp-estimate b { font-family: 'Russo One', sans-serif; font-weight: normal; letter-spacing: .5px; }
.lp-estimate.easy b { color: #5dff6a; } .lp-estimate.even b { color: #ffd23a; } .lp-estimate.hard b { color: #ff9a3a; } .lp-estimate.vhard b { color: #ff4a3a; }
.lp-hint { text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #ffb36a; margin-top: -4px; }
.lp-note { font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); text-align: center; }
.lp-go { height: 54px; font-size: 24px; }
#lpQuick { font-size: 17px; }

/* ================= Oficina: barra de atributos e extras ================= */
.ws-statbar {
  position: absolute; left: 10px; right: 10px; top: 510px; height: 42px; padding: 0 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 16px;
  background: linear-gradient(180deg, rgba(10,7,8,.88), rgba(0,0,0,.92));
  border: 1px solid rgba(212,175,55,.42); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.1), 0 4px 12px rgba(0,0,0,.5), 0 0 14px rgba(227,18,43,.15);
  backdrop-filter: blur(3px);
}
.ws-statbar span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ws-statbar svg { width: 16px; height: 18px; }
.ws-statbar img { width: 15px; height: 17px; }
.ws-statbar .over { color: #ff4a4a; }
.ws-statbar .res3 { gap: 2px; font-size: 14px; }
.c-hp { color: #ff4a4a; font-weight: normal; }
.slot-x {
  position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: #c8161c; border: 2px solid #fff; color: #fff; font-size: 12px; line-height: 18px; text-align: center; z-index: 3;
}
.slot-x:hover { background: #ff3a3a; }
.lvl-badge { position: absolute; left: 3px; bottom: 2px; font-size: 13px; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.inv-empty .sm-btn { font-size: 15px; height: 38px; min-width: 120px; }

/* ================= Blocos de item e balão ================= */
.item-tile {
  position: relative; width: 80px; height: 80px; padding: 0; flex: none;
  background-size: cover; border: none; border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.32);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, filter .12s ease;
}
.item-tile img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.item-tile:hover { filter: brightness(1.15); transform: translateY(-2px); }
.item-tile.sel { box-shadow: 0 0 0 3px var(--sel), 0 0 12px rgba(255,200,64,.7); animation: selPulse 1.4s ease-in-out infinite; }
.item-tile.equipped::after {
  content: ''; position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
}
.item-tile.locked img { filter: grayscale(.85) brightness(.66); opacity: .85; }
.own-badge { position: absolute; z-index: 2; right: 3px; bottom: 2px; font-size: 13px; color: #7dff8a; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.lock-badge { position: absolute; inset: auto 0 0 0; height: 20px; display: flex; align-items: center; justify-content: center; gap: 3px; background: rgba(0,0,0,.75); font-size: 12px; color: var(--gold-hi); border-radius: 0 0 6px 6px; }
.lock-badge svg { width: 10px; height: 12px; }
.kit-tile { background: linear-gradient(180deg, #221a1c, #0a0607); flex-direction: column; gap: 2px; }
.kit-ico { display: flex; }
.kit-ico svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 #000); }
.kit-ico.big svg { width: 64px; height: 64px; }
.kit-name { font-size: 10px; color: var(--text); text-align: center; line-height: 1.1; padding: 0 3px; }
.rar-txt-C { color: #c3cbd3; } .rar-txt-R { color: #58a8ff; } .rar-txt-E { color: #cf86ff; } .rar-txt-L { color: #ffb13a; } .rar-txt-M { color: #ff5a5a; }

.item-tip {
  position: absolute; z-index: 90; width: 270px; padding: 8px 10px; pointer-events: none;
  background: rgba(6, 4, 5, .97); border: 1px solid var(--gold); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.7), 0 0 14px rgba(227,18,43,.3);
}
.tip-name { font-size: 16px; margin-bottom: 3px; }
.tip-sub { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
.tip-sub svg { width: 13px; height: 14px; }
.tip-sub .ok { color: #7dff8a; }
.tip-stats { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text); }
.tip-stats div { display: flex; align-items: center; gap: 6px; }
.tip-stats svg, .tip-stats img { width: 14px; height: 15px; flex: none; }
.tip-stats b { width: 14px; text-align: center; font-weight: normal; color: var(--gold-hi); }
.tip-stats i.dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 2px; flex: none; }
.tip-hint { margin-top: 6px; font-family: Arial, sans-serif; font-size: 11px; color: var(--gold-hi); }

.notify-stack { position: absolute; right: 12px; top: 66px; z-index: 110; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.notify {
  width: 290px; padding: 10px 14px; font-size: 14px; line-height: 1.4;
  background: linear-gradient(180deg, #140b0d, #050304); border: 1px solid var(--gold); border-radius: 5px;
  transform: translateX(330px); transition: transform .35s cubic-bezier(.2,1.2,.4,1); box-shadow: 0 6px 18px rgba(0,0,0,.7), 0 0 14px rgba(227,18,43,.3);
}
.notify.show { transform: translateX(0); }
.notify.ok-mission { border-color: var(--gold-hi); box-shadow: 0 6px 18px rgba(0,0,0,.7), 0 0 18px rgba(255,200,64,.45); }
.notify b { font-weight: normal; color: #7dff8a; }
.coin-txt { color: var(--gold-hi); } .tok-txt { color: #d69bff; }

/* ação principal (jogar, comprar, lutar, evoluir): ouro com brilho correndo */
.sm-btn.green { color: #2a1400; text-shadow: 0 1px 0 rgba(255,240,200,.55);
  background: linear-gradient(180deg, #fff0b0 0%, #f2c94c 30%, #d4a017 52%, #a8770c 53%, #7a5408 100%);
  border-color: #3a2600; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 #1e1300, 0 0 16px rgba(255,200,64,.35); }
.sm-btn.green:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 #1e1300, 0 0 24px rgba(255,200,64,.7); }
.sm-btn.green::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.75) 50%, transparent); animation: btnSheen 3.4s ease-in-out infinite; }
.sm-btn.purple { background: linear-gradient(180deg, #c06aff 0%, #8a2fd0 50%, #5a1490 100%); border-color: #2a0845; }
.btn-coin { width: 22px; height: 22px; margin: 0 4px 0 8px; }

/* ================= Loja ================= */
.shop-cats { position: absolute; left: 0; top: 0; width: 250px; height: 654px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.shop-cat {
  flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 12px;
  background: linear-gradient(180deg, #120d0f, #050304); border: 1px solid rgba(212,175,55,.3); border-radius: 4px; color: var(--text);
  font-family: Arial, sans-serif; font-weight: bold; font-size: 13px; text-align: left;
}
.shop-cat:hover { border-color: var(--gold-hi); transform: translateX(3px); }
.shop-cat.active { border-color: var(--gold-hi); background: linear-gradient(90deg, #5a0410, #1a0306); box-shadow: inset 3px 0 0 var(--gold-hi), 0 0 14px rgba(227,18,43,.45); }
.cat-ico { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #c8102e, #5a0410); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gold-hi); color: #fff3d0; }
.cat-ico svg { width: 26px; height: 26px; }
.cat-ico b { width: 32px; height: 32px; background: #fff0c8; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.shop-cats::-webkit-scrollbar, .shop-grid::-webkit-scrollbar, .upg-grid::-webkit-scrollbar { width: 8px; }
.shop-cats::-webkit-scrollbar-thumb, .shop-grid::-webkit-scrollbar-thumb, .upg-grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }
.shop-grid {
  position: absolute; left: 258px; top: 0; width: 446px; height: 654px; overflow-y: auto; padding: 8px;
  display: grid; grid-template-columns: repeat(5, 80px); grid-auto-rows: 80px; gap: 6px; align-content: start;
}
.shop-detail { position: absolute; left: 712px; top: 0; width: 366px; height: 654px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sd-head { display: flex; gap: 12px; align-items: center; }
.sd-img { width: 110px; height: 110px; flex: none; border-radius: 8px; background-size: cover; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.sd-img img { width: 88%; height: 88%; object-fit: contain; }
.sd-name { font-size: 20px; line-height: 1.15; }
.sd-sub { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); display: flex; gap: 4px; align-items: center; margin-top: 3px; }
.sd-sub svg { width: 13px; height: 14px; }
.sd-stats { flex: 1; overflow-y: auto; font-size: 13px; }
.sd-note { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.sd-price { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 28px; color: var(--gold-hi); padding: 6px; background: rgba(0,0,0,.55); border: 1px solid rgba(212,175,55,.32); border-radius: 4px; text-shadow: 0 0 10px rgba(255,200,64,.35); }
.sd-price img { width: 34px; height: 34px; }
.sd-price .short { color: #ff5a5a; }
.buy-btn { height: 54px; font-size: 24px; }

/* ================= Upgrade ================= */
.upg-panel {
  position: absolute; left: 0; top: 0; width: 630px; height: 654px; padding: 30px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.upg-row { display: flex; align-items: center; gap: 30px; }
.upg-slot { width: 124px; height: 124px; border-radius: 10px; background-size: cover; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); }
.upg-slot { position: relative; }
.upg-slot img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); }
.upg-lv { position: absolute; left: 6px; bottom: 4px; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000; }
.upg-slot.empty { background: rgba(6,4,5,.7); box-shadow: inset 0 0 0 2px rgba(212,175,55,.55), inset 0 0 18px rgba(227,18,43,.3); }
.upg-slot.glow { box-shadow: 0 0 0 4px var(--sel), 0 0 20px rgba(255,200,64,.7); animation: selPulse 1.4s ease-in-out infinite; }
.upg-slot.dim { filter: grayscale(.6) brightness(.6); }
.upg-arrow { font-size: 60px; color: #fff; }
.upg-hint { font-family: Arial, sans-serif; color: var(--text-dim); font-size: 15px; }
.upg-name { font-size: 24px; }
.upg-power { width: 400px; display: flex; flex-direction: column; gap: 5px; }
.upg-bar.xp { height: 18px; }
.upg-bar.xp div { background: linear-gradient(180deg, #ffc84a, #e08a10); }
.upg-bar.xp i { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #5dff6a, #5dff6a 6px, #2fbf45 6px, #2fbf45 12px); opacity: .9; animation: fuelPulse 1s ease-in-out infinite alternate; }
.upg-bar b { color: #7dff8a; margin-left: 4px; font-weight: normal; }
.upg-bar.xp span { font-size: 12px; }
@keyframes fuelPulse { from { opacity: .55; } to { opacity: 1; } }
.upg-fuel { width: 100%; background: rgba(0,0,0,.55); border: 1px solid rgba(212,175,55,.28); border-radius: 8px; padding: 8px 10px; box-shadow: inset 0 2px 8px rgba(0,0,0,.5); }
.fuel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; color: var(--gold-hi); }
.fuel-head span { flex: 1; }
.fuel-fee { font-family: Arial, sans-serif; font-style: normal; font-size: 13px; color: var(--gold-hi); display: inline-flex; align-items: center; gap: 4px; }
.fuel-fee .btn-coin { width: 16px; height: 16px; margin: 0 1px 0 4px; }
.fuel-fee.short, #upgFuse .short { color: #ff5a5a; }
.mini-btn { font-family: 'Russo One', sans-serif; font-size: 12px; padding: 5px 10px; border-radius: 4px; border: 1px solid #3a2600; color: #2a1400; cursor: pointer; background: linear-gradient(180deg, #ffe9a0, #d4a017); }
.mini-btn.gray { color: var(--text); background: linear-gradient(180deg, #2b2628, #0e0b0c); border-color: rgba(212,175,55,.45); }
.mini-btn:disabled { opacity: .45; cursor: default; }
.fuel-row { display: flex; gap: 6px; min-height: 56px; align-items: center; }
.fuel-slot { width: 56px; height: 56px; border-radius: 6px; background-size: cover; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
.fuel-slot img { width: 86%; height: 86%; object-fit: contain; }
.fuel-more { font-size: 18px; color: var(--text-dim); padding: 0 6px; }
.fuel-empty { font-family: Arial, sans-serif; font-size: 13px; color: var(--text-mute); }
.upg-head { flex-direction: column; align-items: flex-start !important; gap: 1px; height: auto !important; padding: 6px 10px !important; }
.upg-head em { font-family: Arial, sans-serif; font-style: normal; font-size: 11px; color: var(--text-mute); }
.item-tile.fuel { box-shadow: 0 0 0 3px #3cff64, 0 0 12px rgba(60,255,100,.6); }
#upgGrid .item-tile.equipped { opacity: .45; }   /* só na evolução: equipado não vira combustível */
.fuel-badge { position: absolute; top: 2px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #1faa3a; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #0b3a14; }
.eq-badge { position: absolute; top: 2px; left: 3px; font-size: 10px; padding: 1px 4px; border-radius: 3px; background: #a50d20; color: #fff; box-shadow: 0 0 0 1px rgba(255,215,106,.6); }
.pts-badge { position: absolute; bottom: 2px; right: 3px; font-size: 11px; color: #7dff8a; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.upg-bar { position: relative; height: 22px; background: #000; border: 1px solid rgba(212,175,55,.45); }
.upg-bar div { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6e0612, #e3122b 70%, #ff6a3a); transition: width .3s; }
.upg-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; text-shadow: 0 1px 0 #000; }
.upg-sub { font-family: Arial, sans-serif; font-size: 14px; color: var(--text-dim); }
.upg-diff { min-height: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; font-size: 16px; }
.upg-diff .up { color: #7dff8a; } .upg-diff .down { color: #ff7a6a; }
.upg-actions { display: flex; gap: 14px; margin-top: auto; }
.upg-inv { position: absolute; left: 638px; top: 0; width: 440px; height: 654px; display: flex; flex-direction: column; }
.upg-grid { flex: 1; overflow-y: auto; padding: 4px 8px 10px; display: grid; grid-template-columns: repeat(5, 80px); grid-auto-rows: 80px; gap: 5px; align-content: start; }

/* ================= Caixas ================= */
.boxes-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 28px;
  background:
    radial-gradient(ellipse 70% 42% at 50% 84%, rgba(227,18,43,.24), transparent 70%),
    linear-gradient(180deg, transparent 0 74%, rgba(0,0,0,.45) 74.2%, rgba(0,0,0,.2) 100%),
    radial-gradient(ellipse at 50% 30%, #2a1418 0%, #120809 52%, #040203 100%);
  border: 1px solid rgba(212,175,55,.42); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,215,106,.1); }
.box-card { position: relative; width: 198px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(180deg, #4a3d41, #161113); border: 3px solid #000; border-radius: 8px; box-shadow: inset 0 0 0 2px #b8a78c, 0 8px 24px rgba(0,0,0,.7); }
.box-card.box-silver { background: linear-gradient(180deg, #8c98a6, #3c4550); box-shadow: inset 0 0 0 2px #d6dde3, 0 8px 24px rgba(0,0,0,.6); }
.box-card.box-gold { background: linear-gradient(180deg, #e0a030, #8a5a08); box-shadow: inset 0 0 0 2px #ffd57a, 0 8px 24px rgba(0,0,0,.6); }
.box-title { font-size: 20px; line-height: 1.1; min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.box-img { height: 230px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition: transform .2s; }
.box-card:hover .box-img { transform: scale(1.04) rotate(-2deg); }
.box-odds { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-family: Arial, sans-serif; font-weight: bold; font-size: 12px; text-shadow: 0 1px 0 #000, 0 0 3px #000;
  background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 6px; }
.box-owned { font-family: Arial, sans-serif; font-size: 13px; }
.box-card .sm-btn { width: 100%; }
.box-open { display: flex; flex-direction: column; align-items: center; }
.box-shake { height: 300px; animation: shake .12s linear infinite; filter: drop-shadow(0 0 20px rgba(255,255,255,.4)); }
@keyframes shake { 0% { transform: rotate(-4deg) scale(1.02); } 50% { transform: rotate(4deg) scale(1.06); } 100% { transform: rotate(-4deg) scale(1.02); } }
.box-reveal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.box-flash { position: absolute; top: -60px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); pointer-events: none; }
.reveal-tile { width: 200px; height: 200px; border-radius: 12px; background-size: cover; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 0 40px rgba(255,255,255,.5); }
.reveal-tile img { width: 88%; height: 88%; object-fit: contain; }
.new-badge { position: absolute; top: -14px; right: -26px; width: 90px; transform: rotate(12deg); }
.reveal-name { font-size: 28px; text-shadow: 0 2px 0 #000; }
.reveal-sub { font-family: Arial, sans-serif; font-size: 14px; color: var(--text); margin-bottom: 8px; }

/* Novos equipamentos / ajuda */
.new-equip { width: 560px; }
.ne-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.help { width: 600px; }
.help-body { text-align: left; font-family: Arial, sans-serif; font-size: 14px; color: #ddd2c2; line-height: 1.5; }
.help-body b { color: var(--gold-hi); }
.setting-row input { height: 36px; padding: 0 10px; background: #000; border: 1px solid rgba(212,175,55,.5); color: #fff; font-family: var(--font); font-size: 16px; border-radius: 4px; }

/* ================= Batalha: extras ================= */
.range-banner {
  position: absolute; top: 470px; width: 250px; height: 36px; margin-left: -125px; z-index: 5;
  display: flex; align-items: center; justify-content: center; font-size: 17px; letter-spacing: 1px;
  background: linear-gradient(180deg, #b01014, #6c0508); border: 2px solid #ff4a3a; border-radius: 3px; box-shadow: 0 0 14px rgba(255,40,20,.7); pointer-events: none;
}
.bar-label {
  position: absolute; left: 50%; top: 596px; transform: translateX(-50%); z-index: 5; padding: 1px 16px; font-size: 13px; letter-spacing: 1px;
  background: rgba(8, 5, 2, .92); border: 1px solid rgba(212,175,55,.6); border-radius: 3px; color: #ffe9b0; pointer-events: none; white-space: nowrap;
}
.act.kit-act svg.big { width: 60px; height: 60px; filter: drop-shadow(0 2px 0 #000); }

/* ================= Velocidade, replay, atalhos ================= */
.replay-badge {
  position: absolute; left: 50%; top: 122px; transform: translateX(-50%); z-index: 6;
  padding: 4px 16px; font-size: 18px; letter-spacing: 2px; color: #fff;
  background: rgba(176, 16, 20, .85); border: 2px solid #ff4a3a; border-radius: 4px;
  animation: blink 1s steps(2) infinite; pointer-events: none;
}
.act .hotkey {
  position: absolute; left: 6px; top: 4px; min-width: 18px; height: 18px; padding: 0 3px;
  font-size: 11px; line-height: 16px; color: var(--gold-hi); text-align: center;
  background: rgba(0,0,0,.8); border: 1px solid rgba(212,175,55,.38); border-radius: 3px;
}
.end-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; width: 100%; padding: 0 16px; box-sizing: border-box; }
.end-btns .sm-btn { margin-top: 0; white-space: nowrap; min-width: 0; flex: 1 1 auto; padding: 0 14px; font-size: 16px; }   /* (v3.28) 3 botões cabem no quadro (antes saíam para fora) */
.replay-sub { font-family: Arial, sans-serif; color: var(--text-dim); margin: 0 0 6px; }

/* ================= Tela de título ================= */
#screen-title { overflow: hidden; background: #000; }
.title-bg { position: absolute; inset: -20px; background: url('assets/arena/arena-campeonato.jpg') center / cover; filter: brightness(.5) saturate(1.05); animation: titlePan 40s ease-in-out infinite alternate; }
@keyframes titlePan { from { transform: scale(1.08) translateX(-20px); } to { transform: scale(1.08) translateX(20px); } }
.title-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(227,18,43,.34), transparent 60%), radial-gradient(ellipse at 50% 120%, rgba(212,140,30,.22), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.88));
  animation: titleGlow 4.5s ease-in-out infinite alternate; }
@keyframes titleGlow { from { opacity: .8; } to { opacity: 1; } }
/* brasas vermelhas e douradas subindo (duas camadas em velocidades diferentes) */
.title-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.title-embers::before, .title-embers::after { content: ''; position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.title-embers::before { height: calc(100% + 512px); background: url('assets/brand/embers.png') 0 0 / 512px 512px repeat; animation: embersUp 24s linear infinite; opacity: .9; }
.title-embers::after { height: calc(100% + 320px); background: url('assets/brand/embers.png') 140px 60px / 320px 320px repeat; animation: embersUp2 11s linear infinite; opacity: .55; filter: blur(.6px); }
@keyframes embersUp { to { transform: translateY(-512px); } }
@keyframes embersUp2 { to { transform: translateY(-320px); } }
.title-logo { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.title-logo::before { content: ''; position: absolute; left: 50%; top: 52%; width: 680px; height: 260px; margin: -130px 0 0 -340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(227,18,43,.42), rgba(227,18,43,.1) 50%, transparent 72%); animation: logoGlow 3.2s ease-in-out infinite alternate; }
@keyframes logoGlow { from { opacity: .5; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.title-logo img { position: relative; width: 560px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.85)); animation: pop .7s cubic-bezier(.2,1.5,.4,1); }
.title-menu { position: absolute; left: 50%; top: 372px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 12px; width: 320px; }
.title-btn { width: 100%; height: 56px; font-size: 24px; white-space: nowrap; }
.title-pilot { position: absolute; left: 0; right: 0; bottom: 46px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; color: var(--text-dim); }
.title-pilot b { font-family: var(--font); font-weight: normal; color: var(--gold-hi); font-size: 18px; text-shadow: 0 0 10px rgba(255,200,64,.4); }
.title-footer { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #6e6358; }

/* Configurações */
.settings { width: 600px; max-height: 704px; overflow-y: auto; padding-top: 14px; padding-bottom: 14px; }
.settings .panel-title { margin-bottom: 4px; }
.settings .setting-row { padding: 3px 0; font-size: 16px; min-height: 42px; }
.settings .setting-row .sm-btn { height: 40px; }
.settings .setting-keys { margin-top: 6px; line-height: 1.5; }
.settings .btns { margin-top: 8px; }
.seg { display: flex; gap: 4px; }
.seg button { width: 56px; height: 36px; font-size: 16px; color: var(--text-dim); background: #000; border: 1px solid rgba(212,175,55,.4); border-radius: 4px; }
.seg button.on { color: #fff; background: linear-gradient(180deg, #e01a33, #6e0612); border-color: var(--gold-hi); box-shadow: 0 0 10px rgba(227,18,43,.5); }
.setting-row input[type=range] { accent-color: #e3122b; }
.lang-select { height: 36px; min-width: 190px; padding: 0 32px 0 10px; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23d4af37'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid rgba(212,175,55,.5); color: #fff; font-family: var(--font); font-size: 16px; border-radius: 4px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.lang-select:hover, .lang-select:focus { border-color: var(--gold-hi); outline: none; box-shadow: 0 0 10px rgba(255,200,64,.35); }
.lang-select option { background: #0b0809; color: #fff; }
.setting-keys { margin-top: 10px; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.6; color: #a89a88; text-align: left; }
.setting-keys b { color: var(--gold-hi); font-weight: normal; font-family: var(--font); }

/* ================= Missões de exploração ================= */
#screen-mission { background: radial-gradient(ellipse at 50% 45%, #1a0f11 0%, #050304 75%); }
#missionCanvas { position: absolute; left: var(--stage-ext, 0px); top: 0; width: 1200px; height: 720px; cursor: pointer; }
/* (v3.34) barra de cima da missão: fase/mapa/dificuldade, progresso, vida em faixas e contadores com ícone */
.mission-hud {
  position: absolute; left: 0; right: 0; top: 0; height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(24,18,20,.97) 0%, rgba(8,6,7,.96) 100%); border-bottom: 1px solid rgba(212,175,55,.45);
  box-shadow: 0 1px 0 rgba(227,18,43,.28), 0 6px 18px rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.mission-hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,90,60,.65), rgba(255,215,106,.7), rgba(255,90,60,.65), transparent); opacity: .55; }
.mh-left { display: flex; flex-direction: column; gap: 6px; min-width: 290px; }
.mh-title { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.mh-phase { font-size: 13px; padding: 2px 8px; border-radius: 3px; background: linear-gradient(180deg, #ffe08a, #c99419); color: #2a1a02; text-shadow: none; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.mh-map { font-size: 18px; color: var(--gold-hi); letter-spacing: .5px; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,190,60,.25); }
.mh-diff { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid; letter-spacing: .6px; }
.mh-diff.d-N { color: #8ff0b0; border-color: rgba(120,230,160,.6); background: rgba(40,140,80,.18); }
.mh-diff.d-H { color: #ffc070; border-color: rgba(255,170,70,.65); background: rgba(190,110,20,.2); }
.mh-diff.d-I { color: #ff8a8a; border-color: rgba(255,80,80,.7); background: rgba(170,20,30,.25); box-shadow: 0 0 10px rgba(255,40,40,.25); }
.mh-prog { display: flex; align-items: center; gap: 8px; font-size: 11px; font-family: Arial, sans-serif; color: #cfc6b4; }
.mh-prog-bar { width: 110px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.mh-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6a3a, #ffd76a); transition: width .5s; }
.mh-prog-txt.dim { color: #8f8676; }
.mh-boss { padding: 1px 6px; border-radius: 3px; font-family: var(--font); font-size: 10px; letter-spacing: .4px; }
.mh-boss.locked { color: #c9b98a; background: rgba(255,255,255,.06); }
.mh-boss.open { color: #fff; background: linear-gradient(180deg, #e3122b, #8e0a18); animation: mhPulse 1.2s ease-in-out infinite; }
.mh-boss.done { color: #8ff0b0; background: rgba(40,140,80,.2); }
@keyframes mhPulse { 50% { box-shadow: 0 0 12px rgba(255,40,60,.75); } }
.mh-life { display: flex; flex-direction: column; gap: 3px; }
.mh-life-label { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .8px; color: #b8ab92; }
.mh-life-label b { color: #fff; font-weight: normal; font-size: 11px; }
.mh-hp { position: relative; width: 270px; height: 26px; background: #050304; border: 1px solid rgba(212,175,55,.45); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8); }
.mh-hp-ghost { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,230,200,.45); transition: width .6s ease-out; }
.mh-hp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ff7a6a 0%, #e8202a 45%, #9a0a12 100%); transition: width .35s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 2px 0 8px rgba(255,60,60,.55); }
.mh-hp-fill.low { animation: mhLow .8s ease-in-out infinite; }
@keyframes mhLow { 50% { filter: brightness(1.45); } }
.mh-hp-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.45) calc(10% - 1px) 10%); pointer-events: none; }
.mh-hp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.mh-stats { flex: 1; display: flex; gap: 6px; justify-content: flex-end; min-width: 0; }
.mh-chip { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 9px 0 5px; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(212,175,55,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.mh-chip-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mh-chip-ico img { width: 24px; height: 24px; }
.mh-chip-ico svg { width: 20px; height: 20px; color: #5dff6a; }
.mh-chip-v { display: flex; flex-direction: column; line-height: 1.05; }
.mh-chip-v b { font-weight: normal; font-size: 17px; color: #fff; }
.mh-chip-v small { font-size: 9px; letter-spacing: .6px; color: #9f957f; }
.mh-chip.items .mh-chip-ico { color: #ffd76a; }
.mh-chip.foes .mh-chip-ico, .mh-chip.foes b { color: #ff6a5a; }
.mh-xp { font-weight: normal; font-size: 11px; color: #7fd8ff; border: 1px solid rgba(127,216,255,.6); border-radius: 3px; padding: 1px 3px; }
.mh-abort { min-width: 116px; height: 40px; font-size: 15px; flex: none; }
@media (max-width: 1100px) { .mh-chip-v small { display: none; } .mh-left { min-width: 0; } .mh-hp { width: 220px; } }
.mission-help { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #a89a88; pointer-events: none; }
.mission-end { width: 520px; }
.mission-end-banner { height: 70px; width: auto; max-width: 400px; object-fit: contain; margin: 6px auto 4px; display: block; }
.me-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 16px; text-align: left; font-family: Arial, sans-serif; font-size: 15px; color: var(--text); }
.me-rows div { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0,0,0,.5); border: 1px solid rgba(212,175,55,.22); }
.me-rows img, .me-rows svg { width: 22px; height: 22px; color: #5dff6a; }
.me-rows b { margin-left: auto; font-family: var(--font); font-weight: normal; color: var(--gold-hi); font-size: 17px; }
.me-rows .me-items { flex-wrap: wrap; font-family: var(--font); }
.me-rows .me-lost { color: #ff8a7a; }

/* ================= Caixas: especiais e abertura ================= */
.boxes-wrap { gap: 12px !important; }
.box-card .box-img { width: 178px; max-width: none; margin: 6px 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.box-card .box-odds { flex-wrap: wrap; justify-content: center; align-content: center; min-height: 38px; box-sizing: border-box; }   /* 1 ou 2 linhas: todos os cartões com a mesma altura */
.box-count { position: absolute; top: 62px; right: 10px; font-size: 26px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000; z-index: 2; }
.box-card.box-orange { background: linear-gradient(180deg, #ff9a2a, #9a4a00); box-shadow: inset 0 0 0 2px #ffd08a, 0 8px 24px rgba(0,0,0,.6); }
.box-card.box-red { background: linear-gradient(180deg, #e8362a, #6a0808); box-shadow: inset 0 0 0 2px #ff9a8a, 0 8px 24px rgba(0,0,0,.6); }
.box-card .sm-btn .key-ico { width: 26px; height: 15px; }

.box-open2 {
  --bo-c: 255,196,80;
  position: relative; width: 1000px; height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background:
    radial-gradient(ellipse 60% 42% at 50% 64%, rgba(var(--bo-c), .3), transparent 70%),
    linear-gradient(180deg, transparent 0 71%, rgba(0,0,0,.45) 71.3%, rgba(0,0,0,.2) 100%),
    radial-gradient(ellipse at 50% 36%, #2c1519 0%, #12080a 48%, #040203 100%);
  border: 1px solid rgba(212,175,55,.6); border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.16), 0 24px 70px rgba(0,0,0,.75), 0 0 30px rgba(227,18,43,.2);
}
.box-open2.best-C { --bo-c: 200,215,230; } .box-open2.best-R { --bo-c: 70,160,255; } .box-open2.best-E { --bo-c: 180,90,255; }
.box-open2.best-L { --bo-c: 255,170,40; } .box-open2.best-M { --bo-c: 255,64,72; }
.bo-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,215,106,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,215,106,.06) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask: radial-gradient(ellipse at 50% 55%, #000 30%, transparent 80%); mask: radial-gradient(ellipse at 50% 55%, #000 30%, transparent 80%); }
.bo-rays { position: absolute; left: 50%; top: 56%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; pointer-events: none;
  opacity: 0; transform: scale(.5); transition: opacity .7s, transform 1s cubic-bezier(.2,.9,.3,1);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); }
.bo-rays::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(var(--bo-c), .2) 0deg 5deg, transparent 5deg 15deg); animation: boSpin 30s linear infinite; }
.box-open2.opened .bo-rays { opacity: 1; transform: scale(1); }
@keyframes boSpin { to { transform: rotate(360deg); } }
.bo-title { position: relative; z-index: 6; margin: 24px 0 0; font-size: 40px; font-weight: normal; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff6d0 0%, #ffc34a 50%, #ff8a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a1c00) drop-shadow(0 0 16px rgba(255,160,40,.4)); animation: boTitle .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes boTitle { from { opacity: 0; transform: translateY(-26px) scale(.9); } }
.bo-stage { position: relative; width: 100%; flex: 1; }
.bo-glow { position: absolute; left: 50%; top: 66%; width: 560px; height: 170px; margin: -85px 0 0 -280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--bo-c), .55), transparent 70%); animation: boGlow 1.1s ease-in-out infinite alternate; }
@keyframes boGlow { to { opacity: .55; transform: scale(1.08); } }
.box-open2.opened .bo-glow { animation: none; opacity: 1; transform: scale(1.5); transition: transform .5s, opacity .5s; }
.box-open2.dealt .bo-glow { opacity: .75; transform: scale(1.9, 1.3); }

/* engradado: cai, assenta, treme carregando e abre */
.bo-crate { position: absolute; left: 50%; top: 60%; width: 380px; height: 300px; margin: -150px 0 0 -190px; z-index: 2;
  animation: boDrop .55s cubic-bezier(.3,1.35,.5,1) both, boCharge .11s linear .6s infinite;
  transition: opacity .5s .1s, transform .5s .1s; }
@keyframes boDrop { from { transform: translateY(-460px) scale(.92); } 72% { transform: translateY(0) scale(1.05, .93); } to { transform: none; } }
@keyframes boCharge { 0%, 100% { transform: rotate(-2.6deg) scale(1.02); } 50% { transform: rotate(2.6deg) scale(1.05); } }
.bo-body, .bo-lid { position: absolute; left: 0; top: 0; width: 380px; height: 300px; }
.bo-lid { transform-origin: 50% 38%; transition: transform .6s cubic-bezier(.2,1.1,.4,1), opacity .45s .2s; }
.bo-leak { position: absolute; left: 10%; right: 10%; top: 41%; height: 10px; border-radius: 50%; pointer-events: none;
  background: rgb(var(--bo-c)); box-shadow: 0 0 18px 6px rgba(var(--bo-c), .9); filter: blur(2px); opacity: 0; animation: boLeak .7s .6s ease-in forwards; }
@keyframes boLeak { to { opacity: 1; } }
.bo-light { position: absolute; left: 50%; top: 44%; width: 300px; height: 300px; margin-left: -150px; transform: translateY(-100%) scaleY(0); transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(var(--bo-c), .95), rgba(var(--bo-c), 0)); filter: blur(7px); opacity: 0; border-radius: 45% 45% 0 0;
  transition: transform .45s .05s, opacity .3s .05s; }
.box-open2.opened .bo-crate { animation: none; }
.box-open2.opened .bo-leak { animation: none; opacity: 0; transition: opacity .2s; }
.box-open2.opened .bo-lid { transform: translate(70px, -250px) rotate(30deg); opacity: 0; }
.box-open2.opened .bo-light { transform: translateY(-100%) scaleY(1); opacity: 1; }
.box-open2.dealt .bo-crate { opacity: 0; transform: translateY(70px) scale(.82); }
.box-open2.dealt .bo-light { opacity: 0; transition: opacity .6s .2s; }
.bo-shadow { position: absolute; left: 50%; top: calc(60% + 118px); width: 400px; height: 56px; margin-left: -200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%); animation: boShadow .55s cubic-bezier(.3,1.35,.5,1) both; transition: opacity .5s .1s; }
@keyframes boShadow { from { opacity: 0; transform: scale(.4); } }
.box-open2.dealt .bo-shadow { opacity: 0; }
.bo-dust { position: absolute; left: 50%; top: calc(60% + 112px); width: 520px; height: 80px; margin-left: -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,232,200,.5), transparent 70%); opacity: 0; animation: boDust .75s .4s ease-out both; }
@keyframes boDust { from { opacity: .95; transform: scale(.45, .6); } to { opacity: 0; transform: scale(1.35, 1); } }

/* clarão, onda de choque e faíscas da abertura */
.bo-flash { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 60%, #fff 0%, rgba(var(--bo-c), .7) 26%, transparent 62%); }
.box-open2.opened .bo-flash { animation: boFlash .75s ease-out; }
@keyframes boFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.bo-ring { position: absolute; left: 50%; top: 52%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; z-index: 3; pointer-events: none;
  border: 6px solid rgba(var(--bo-c), .95); box-shadow: 0 0 26px rgba(var(--bo-c), .85), inset 0 0 26px rgba(var(--bo-c), .6); opacity: 0; }
.box-open2.opened .bo-ring { animation: boRing .75s ease-out; }
@keyframes boRing { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(7.5); border-width: 1px; } }
.bo-sparks i { position: absolute; left: 50%; top: 52%; width: calc(var(--s) * 4); height: var(--s); margin: calc(var(--s) / -2) 0 0 0; border-radius: var(--s);
  background: #fff; box-shadow: 0 0 10px 2px rgba(var(--bo-c), .95); opacity: 0; transform-origin: 0 50%; pointer-events: none; z-index: 4; }
.box-open2.opened .bo-sparks i { animation: boSpark .95s cubic-bezier(.1,.75,.3,1) var(--t) both; }
@keyframes boSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) scaleX(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scaleX(.3); } }

/* cartas: saem do engradado num arco e viram com explosão de luz */
.bo-cards { position: absolute; inset: 0; z-index: 5; }
.bo-card { --c: 175,188,202; --cl: 235,241,247; --cd: 70,80,92;
  position: absolute; left: 50%; top: 52%; width: 190px; height: 266px; margin: -133px 0 0 -95px; opacity: 0; cursor: pointer; }
.bo-card.bc-R { --c: 55,145,255; --cl: 175,218,255; --cd: 14,52,112; }
.bo-card.bc-E { --c: 170,85,245; --cl: 232,192,255; --cd: 60,18,112; }
.bo-card.bc-L { --c: 255,165,30; --cl: 255,230,165; --cd: 112,58,4; }
.bo-card.bc-M { --c: 255,62,62; --cl: 255,195,195; --cd: 112,10,14; }
.box-open2.dealt .bo-card { animation: boDeal .65s cubic-bezier(.2,.9,.3,1.12) calc(var(--i) * .1s) both; }
@keyframes boDeal {
  0% { opacity: 0; transform: translate(0, 110px) scale(.18) rotate(-16deg); }
  15% { opacity: 1; }
  55% { transform: translate(calc(var(--x) * .6), -130px) scale(.92) rotate(7deg); }
  100% { opacity: 1; transform: translate(var(--x), -22px) scale(1) rotate(0deg); }
}
.bo-card::before { content: ''; position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--c), .8), rgba(var(--c), .22) 38%, transparent 68%); opacity: 0; transform: scale(.3); }
.bo-card.flip::before { animation: boBurst 1s ease-out forwards; }
@keyframes boBurst { 0% { opacity: 0; transform: scale(.3); } 22% { opacity: 1; } 100% { opacity: .5; transform: scale(1); } }
.bo-card.bc-L::after, .bo-card.bc-M::after { content: ''; position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(rgba(var(--c), .3) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%); opacity: 0; transition: opacity .6s .15s; animation: boSpin 12s linear infinite; }
.bo-card.flip.bc-L::after, .bo-card.flip.bc-M::after { opacity: 1; }
.bo-pop { position: absolute; inset: 0; perspective: 900px; filter: drop-shadow(0 14px 14px rgba(0,0,0,.5)); transition: filter .4s; }
.bo-card.flip .bo-pop { filter: drop-shadow(0 14px 14px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(var(--c), .9)); animation: boPop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes boPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.bo-card:hover:not(.flip) .bo-pop { transform: translateY(-4px); transition: transform .15s; }
.bo-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .62s cubic-bezier(.3,1.35,.5,1); }
.bo-card.flip .bo-inner { transform: rotateY(180deg); }
.bo-card.charge .bo-inner { animation: boWobble .1s linear infinite; }
@keyframes boWobble { 0%, 100% { transform: rotate(-2.2deg) scale(1.03); } 50% { transform: rotate(2.2deg) scale(1.07); } }
.bo-card.charge .bo-pop { filter: drop-shadow(0 14px 14px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(var(--c), 1)); }
.bo-back, .bo-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); }
.bb-panel, .bf-panel { position: absolute; inset: 5px; overflow: hidden;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }

/* verso: aço escovado com emblema NEXUS; a cor da raridade escapa pelas bordas */
.bo-back { background: linear-gradient(135deg, #fff0c0 0%, #c9971f 28%, #3a2a08 56%, #d4af37 80%, #fff0c0 100%); }
.bb-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--c), .42), transparent 60%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.04) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.04) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #1c1113 0%, #070405 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--cl), .35), inset 0 0 26px rgba(var(--c), .45); }
.bb-emblem { width: 104px; height: 104px; color: rgb(var(--cl)); filter: drop-shadow(0 0 8px rgba(var(--c), .95)); animation: bbPulse 1.3s ease-in-out infinite alternate; }
@keyframes bbPulse { from { filter: drop-shadow(0 0 4px rgba(var(--c), .7)); } to { filter: drop-shadow(0 0 14px rgba(var(--c), 1)); } }
.bb-label { font-size: 14px; letter-spacing: 6px; padding-left: 6px; color: rgba(var(--cl), .9); text-shadow: 0 0 8px rgba(var(--c), .9); }

/* frente: moldura metálica da raridade, janela iluminada com a peça, placa com o nome */
.bo-front { transform: rotateY(180deg);
  background: linear-gradient(135deg, rgb(var(--cl)) 0%, rgb(var(--c)) 26%, rgb(var(--cd)) 55%, rgb(var(--c)) 80%, rgb(var(--cl)) 100%); }
.bf-panel { background: linear-gradient(180deg, #181012, #070506); }
.bf-head { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px;
  font-size: 11px; letter-spacing: .8px; white-space: nowrap; color: rgb(var(--cl)); text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, rgba(var(--c), .5), rgba(var(--c), .16)); border-bottom: 1px solid rgba(var(--cl), .4); }
.bf-pips { display: flex; gap: 3px; }
.bf-pips i { width: 7px; height: 7px; transform: rotate(45deg); background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(var(--cl), .45); }
.bf-pips i.on { background: rgb(var(--cl)); box-shadow: 0 0 6px rgba(var(--c), 1); }
.bf-art { position: absolute; left: 0; right: 0; top: 26px; bottom: 58px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(var(--c), .6), rgba(var(--c), .14) 44%, transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #1c1416, #0a0708); }
.bf-rays { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(var(--cl), .16) 0deg 8deg, transparent 8deg 24deg); animation: boSpin 16s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); opacity: .45; }
.bc-E .bf-rays { opacity: .7; } .bc-L .bf-rays, .bc-M .bf-rays { opacity: 1; }
.bf-item { position: absolute; left: 50%; top: 50%; max-width: 90%; max-height: 86%; transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.6)); }
.bo-card.flip .bf-item { animation: bfFloat 2.4s ease-in-out .6s infinite alternate; }
@keyframes bfFloat { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, calc(-50% - 5px)); } }
.bf-plate { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding-top: 9px; text-align: center;
  background: linear-gradient(180deg, rgba(var(--cd), .96), rgba(8,5,6,.98)); border-top: 2px solid rgba(var(--cl), .65); }
.bf-name { font-size: 16px; line-height: 20px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; text-shadow: 0 0 8px rgba(var(--c), .9), 0 2px 0 #000; }
.bf-name.long { font-size: 13px; line-height: 14px; min-height: 20px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* nome longo: até 2 linhas */
.bf-type { margin-top: 3px; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-family: Arial, sans-serif; font-weight: bold; font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: rgba(var(--cl), .88); }
.bf-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 4px currentColor; }
.bf-shine { position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.6) 47%, rgba(255,255,255,.12) 55%, transparent 66%); }
.bo-card.flip .bf-shine { animation: bfShine 1s ease-out .4s; }
.bo-card.flip.bc-L .bf-shine, .bo-card.flip.bc-M .bf-shine { animation: bfShine 1s ease-out .4s, bfShine 1.1s ease-out 3.4s infinite; }
@keyframes bfShine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.bo-new { position: absolute; top: -14px; right: -20px; height: 29px; width: auto; z-index: 2; opacity: 0; transform: rotate(12deg) scale(.4); pointer-events: none;
  transition: opacity .25s .35s, transform .4s cubic-bezier(.2,1.8,.4,1) .35s; }
.bo-card.flip .bo-new { opacity: 1; transform: rotate(12deg) scale(1); }
.bo-ok { position: absolute; bottom: 24px; left: calc(50% - 110px); width: 220px; z-index: 7; opacity: 0; pointer-events: none;
  transform: translateY(18px); transition: opacity .3s, transform .35s cubic-bezier(.2,1.4,.4,1); }
/* (v3.28) centralizado sem translate(-50%): o efeito de passar o mouse/apertar do .sm-btn troca o transform e o botão
   "corria" para o lado ao clicar */
.box-open2.done .bo-ok { opacity: 1; pointer-events: auto; transform: none; }

/* ================= Arena ================= */
.arena-panel { width: 640px; padding: 0 16px 16px; }
.ar-stats { display: flex; justify-content: center; gap: 12px; margin: -4px 0 12px; }
.ar-stats div { width: 150px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; background: #050304; border: 1px solid rgba(212,175,55,.32); border-radius: 6px; }
.ar-stats b { font-weight: normal; font-size: 30px; color: #ffe08a; line-height: 1.1; }
.ar-stats span { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.ar-note { font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); text-align: center; line-height: 1.4; }

/* ================= Tema OLED: painéis pretos com fio dourado ================= */
.ws-inventory, .shop-grid, .upg-panel, .upg-inv {
  background:
    radial-gradient(ellipse at 50% -18%, rgba(227,18,43,.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #0b0809 0%, #050304 55%, #000 100%);
  border: 1px solid rgba(212,175,55,.42); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.12), inset 0 0 30px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.6);
}
/* cantoneiras douradas acesas nos painéis grandes */
.ws-editor::after, .ws-inventory::after, .upg-panel::after, .upg-inv::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; z-index: 3;
  --k: 20px; --w: 2px;
  background:
    linear-gradient(var(--gold-hi), var(--gold-hi)) top left / var(--k) var(--w) no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) top left / var(--w) var(--k) no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) top right / var(--k) var(--w) no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) top right / var(--w) var(--k) no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom left / var(--k) var(--w) no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom left / var(--w) var(--k) no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom right / var(--k) var(--w) no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom right / var(--w) var(--k) no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,200,64,.8)); animation: cornerGlow 2.6s ease-in-out infinite alternate;
}
#invSearch:focus { outline: none; border-color: var(--gold-hi); box-shadow: 0 0 8px rgba(212,175,55,.45); }
.shop-cat, .inv-tab, .side-btn { transition: transform .12s ease, filter .12s ease, border-color .12s; }

/* entrada suave de cada seção */
.content:not(.hidden) { animation: secIn .28s cubic-bezier(.2,.9,.3,1); }
@keyframes secIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* evolução: luz de bancada sobre os dois blocos e seta brilhando */
.upg-panel {
  background:
    radial-gradient(ellipse 58% 26% at 50% 14%, rgba(227,18,43,.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% -18%, rgba(255,200,64,.1), transparent 60%),
    linear-gradient(180deg, #0b0809 0%, #050304 55%, #000 100%);
}
.upg-arrow { color: var(--gold-hi); text-shadow: 0 0 12px rgba(255,200,64,.85), 0 2px 0 rgba(0,0,0,.6); animation: upgArrow 1.2s ease-in-out infinite alternate; }
@keyframes upgArrow { from { transform: translateX(-4px); opacity: .75; } to { transform: translateX(4px); opacity: 1; } }

/* ===================================================================
   Tutorial guiado (js/tutorial.js): sombra com buraco no alvo, anel pulsante,
   seta verde e a caixa de fala da NEX
   =================================================================== */
#tutLayer { position: absolute; inset: 0; z-index: 200; pointer-events: none; }
#tutLayer.suspended { visibility: hidden; }
.tut-shade { position: absolute; background: rgba(0, 0, 0, .76); pointer-events: auto; }
#tutLayer.passive .tut-shade, #tutLayer.lost .tut-shade { display: none; }
#tutLayer.lost .tut-ring, #tutLayer.lost .tut-arrow { display: none; }
.tut-ring { position: absolute; border-radius: 10px; pointer-events: none;
  border: 3px solid #ffd24a; box-shadow: 0 0 0 2px rgba(40, 26, 0, .9), 0 0 18px 4px rgba(255, 200, 64, .65), inset 0 0 14px rgba(255, 200, 64, .35);
  animation: tutRing 1.1s ease-in-out infinite; }
#tutLayer.passive .tut-ring { border-color: #ff3a4f; box-shadow: 0 0 16px 3px rgba(227, 18, 43, .6); }
@keyframes tutRing { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(1.035); } }
.tut-arrow { position: absolute; width: 80px; height: 80px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,200,64,.5)); }
.tut-arrow-in { width: 100%; height: 100%; animation: tutBob .75s ease-in-out infinite; }
.tut-arrow svg { width: 100%; height: 100%; display: block; transform: rotate(var(--rot, 0deg)); }
.tut-arrow[data-dir="down"] { --rot: 0deg; --bx: 0px; --by: -14px; }
.tut-arrow[data-dir="up"] { --rot: 180deg; --bx: 0px; --by: 14px; }
.tut-arrow[data-dir="left"] { --rot: 90deg; --bx: 14px; --by: 0px; }
.tut-arrow[data-dir="right"] { --rot: -90deg; --bx: -14px; --by: 0px; }
#tutLayer.passive .tut-arrow { filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)) hue-rotate(-45deg) saturate(1.4); }
@keyframes tutBob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--bx), var(--by)); } }

.tut-box { --acc: #ffb23e; position: absolute; width: 470px; display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px 12px 12px; pointer-events: auto;
  background: radial-gradient(ellipse at 20% -20%, rgba(227,18,43,.3), transparent 60%), linear-gradient(180deg, #170c0e 0%, #0a0607 60%, #040203 100%);
  border: 2px solid var(--gold); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,215,106,.18), 0 12px 30px rgba(0,0,0,.75), 0 0 22px rgba(227,18,43,.35); }
.tut-box.pop { animation: tutPop .28s cubic-bezier(.2, 1.5, .45, 1); }
@keyframes tutPop { from { transform: scale(.85) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#tutLayer.passive .tut-box { width: 340px; padding: 9px 12px 9px 9px; border-color: rgba(212,175,55,.7); box-shadow: 0 8px 22px rgba(0,0,0,.7), 0 0 16px rgba(227,18,43,.3); pointer-events: none; }
#tutLayer.passive .tut-box { width: 380px; }
#tutLayer.passive .tut-face { width: 58px; height: 66px; }
/* retrato de quem fala (equipe do hangar): moldura de cantos cortados, luz na cor do personagem */
.tut-face { position: relative; flex: none; width: 96px; height: 112px; cursor: pointer; overflow: hidden;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--acc) 38%, #120a0c), #07050a 72%); }
.tut-face::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(4,3,6,.85)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 70%, #000); }
.tut-face img { position: absolute; width: 150%; left: -25%; top: -3%; transform-origin: 50% 35%; animation: tutBreath 5s ease-in-out infinite; }
.tut-face i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.tut-face.enter img { animation: tutFaceIn .42s cubic-bezier(.2, .8, .3, 1), tutBreath 5s .42s ease-in-out infinite; }
@keyframes tutFaceIn { from { transform: translateX(-18px); opacity: 0; filter: brightness(1.8); } to { transform: none; opacity: 1; filter: none; } }
@keyframes tutBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015) translateY(-1px); } }
.tut-box { border-left: 4px solid var(--acc); }
.tut-who { font-weight: normal; color: var(--acc); text-transform: uppercase; letter-spacing: 1.5px; }
.tut-role { font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 11px; color: var(--text-dim); margin-left: 8px; letter-spacing: .5px; text-transform: uppercase; }
/* medidor de voz: anda enquanto a fala aparece */
.tut-voice { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; margin-left: 8px; vertical-align: -1px; }
.tut-voice i { width: 3px; height: 3px; background: var(--acc); opacity: .45; border-radius: 1px; }
.tut-box.talking .tut-voice i { opacity: 1; animation: tutVoice .5s ease-in-out infinite alternate; }
.tut-box.talking .tut-voice i:nth-child(2) { animation-delay: .17s; }
.tut-box.talking .tut-voice i:nth-child(3) { animation-delay: .33s; }
@keyframes tutVoice { from { height: 3px; } to { height: 11px; } }
.tut-text .tw { opacity: 0; transition: opacity .14s linear; }
.tut-text .tw.on { opacity: 1; }
.tut-text { cursor: default; }
/* a equipe lado a lado (apresentação) */
.tut-crew { display: flex; gap: 10px; margin-top: 12px; }
.tut-crew span { --acc: #fff; position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 0 6px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--acc) 30%, #120a0c), #07050a 75%); border-bottom: 3px solid var(--acc);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); animation: tutCrewIn .5s cubic-bezier(.2, .8, .3, 1) both; }
.tut-crew span:nth-child(2) { animation-delay: .12s; } .tut-crew span:nth-child(3) { animation-delay: .24s; } .tut-crew span:nth-child(4) { animation-delay: .36s; }
.tut-crew img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 10%; }
.tut-crew b { font-weight: normal; font-size: 13px; color: var(--acc); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.tut-crew small { font-family: Arial, sans-serif; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
@keyframes tutCrewIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
#tutLayer[data-box="center"] .tut-box { width: 560px; }
.tut-body { flex: 1; min-width: 0; }
.tut-name { font-size: 15px; color: var(--gold-hi); letter-spacing: 1px; text-shadow: 0 1px 0 #000; margin-bottom: 3px; }
.tut-name small { font-size: 11px; color: #ff8a95; margin-left: 8px; letter-spacing: .5px; }
.tut-name small:empty { display: none; }
.tut-text { font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 15px; line-height: 1.38; color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
#tutLayer.passive .tut-text { font-size: 13.5px; }
.tut-text b { color: #ffd23a; font-weight: bold; }
.tut-btns { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.tut-btns.hidden { display: none; }
.tut-next { min-width: 130px; height: 38px; font-size: 16px; }
.tut-skip { margin-right: auto; white-space: nowrap; background: rgba(0, 0, 0, .6); border: 1px solid rgba(212,175,55,.38); border-radius: 4px; color: var(--text-dim); font-family: Arial, sans-serif; font-size: 12px; cursor: pointer; padding: 5px 10px; }
.tut-skip:hover { color: #fff; border-color: var(--gold-hi); }
.tut-skip.hidden, .tut-next.hidden, .tut-escape.hidden { display: none; }
.tut-escape { height: 34px; font-size: 13px; padding: 0 12px; }
#tutLayer.lost .tut-box { border-color: #ff3a4f; }
.tut-extra:empty { display: none; }
.tut-unlock { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.tut-unlock span { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 84px; padding: 8px 4px 6px; border-radius: 8px;
  background: linear-gradient(180deg, #c8102e, #5a0410); border: 2px solid var(--gold-hi); box-shadow: 0 0 14px rgba(227,18,43,.55); animation: tutPop .4s cubic-bezier(.2,1.6,.4,1) both; }
.tut-unlock span:nth-child(2) { animation-delay: .12s; } .tut-unlock span:nth-child(3) { animation-delay: .24s; }
.tut-unlock svg { width: 40px; height: 40px; fill: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.tut-unlock b { font-size: 12px; font-weight: normal; color: #fff; text-shadow: 0 1px 0 #000; }

/* ✔ gigante quando o mech fica pronto */
.tut-check { position: absolute; width: 180px; height: 180px; z-index: 190; pointer-events: none; border-radius: 22px;
  background: linear-gradient(180deg, rgba(160,12,30,.88), rgba(50,3,8,.92)); border: 4px solid var(--gold-hi); box-shadow: 0 0 30px rgba(255,200,64,.65);
  animation: tutCheck 1.7s ease forwards; }
.tut-check svg { width: 100%; height: 100%; }
.tut-check path { stroke: #fff; stroke-width: 13; stroke-dasharray: 120; stroke-dashoffset: 120; animation: tutDraw .45s .2s ease-out forwards; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
@keyframes tutCheck { 0% { transform: scale(.3); opacity: 0; } 18% { transform: scale(1.08); opacity: 1; } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes tutDraw { to { stroke-dashoffset: 0; } }

/* botão recém-liberado na barra lateral */
.side-btn.tut-new { animation: tutNewBtn 1.2s ease-in-out infinite; }
.side-btn .side-new { position: absolute; top: -8px; right: -14px; height: 22px; width: auto; transform: rotate(10deg); pointer-events: none; }
@keyframes tutNewBtn { 0%, 100% { box-shadow: 0 0 0 0 rgba(125,255,138,0); } 50% { box-shadow: 0 0 0 3px #ffd24a, 0 0 18px 4px rgba(255,200,64,.6); } }
/* balão de detalhes do item fica por cima da sombra do tutorial */
.item-tip { z-index: 205; }
/* ================= Barra lateral: ícones de metal, nome e movimento ================= */
.side-btn { gap: 1px; padding: 4px 0 0; }
.side-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,236,180,.2) 50%, transparent 58%) 150% 0 / 250% 100% no-repeat;
  animation: navSheen 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .7s); }
@keyframes navSheen { 0%, 72% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.nav-ico { width: 58px; height: 58px; display: block; pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.75)) drop-shadow(0 0 6px rgba(255,190,60,.18));
  animation: navFloat 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.5s);
  transition: scale .2s cubic-bezier(.2,1.6,.4,1), filter .2s; }
@keyframes navFloat { 50% { translate: 0 -2px; } }
.side-btn:hover .nav-ico { scale: 1.1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,200,64,.6)); }
.side-btn:active .nav-ico { scale: .94; }
.nav-lbl { font-size: 11px; line-height: 13px; letter-spacing: .6px; color: var(--text-dim); text-shadow: 0 1px 0 #000;
  white-space: nowrap; max-width: 94px; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.side-btn:hover .nav-lbl { color: var(--gold-hi); }
.side-btn.active .nav-lbl { color: #fff; text-shadow: 0 0 8px rgba(255,200,64,.7), 0 1px 0 #000; }
.side-btn.active .nav-ico { scale: 1.06; filter: drop-shadow(0 3px 3px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(255,90,90,.6)); }
/* botão da seção aberta: borda dourada/vermelha girando e brasa pulsando embaixo */
.side-btn.active {
  background:
    radial-gradient(ellipse at 50% 115%, rgba(227,18,43,.75), transparent 75%) padding-box,
    linear-gradient(180deg, #2a070c, #120305) padding-box,
    conic-gradient(from var(--ang), rgba(212,175,55,.35), #ffd76a 10%, rgba(212,175,55,.35) 25%, rgba(227,18,43,.85) 50%, rgba(212,175,55,.35) 75%, #ffd76a 90%, rgba(212,175,55,.35)) border-box;
  border: 2px solid transparent;
  animation: spinAng 4s linear infinite, redPulse 2.2s ease-in-out infinite;
}
/* Arena: chamado vermelho pulsando */
.side-btn.green { color: inherit; border-color: rgba(255,90,100,.6);
  background: radial-gradient(ellipse at 50% 0%, rgba(227,18,43,.5), transparent 70%), linear-gradient(180deg, #1e0a0d, #0a0506);
  box-shadow: inset 0 1px 0 rgba(255,215,106,.18), 0 2px 0 #000; animation: arenaCall 2.4s ease-in-out infinite; }
@keyframes arenaCall { 50% { box-shadow: inset 0 1px 0 rgba(255,215,106,.18), 0 0 16px rgba(227,18,43,.6), 0 2px 0 #000; border-color: rgba(255,140,140,.9); } }
.side-btn.back .nav-ico { width: 44px; height: 44px; }
.side-btn.back .nav-ico.spin { animation: gearSpin 14s linear infinite; }
/* faísca dourada descendo pela borda da barra */
.sidebar::after { content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #fff0b0, transparent) 0 0 / 100% 22% no-repeat; animation: railDown 6s linear infinite; }
@keyframes railDown { from { background-position: 0 -100%; } to { background-position: 0 200%; } }
.side-btn.green.tut-new { animation: tutNewBtn 1.2s ease-in-out infinite; }   /* (o selo NOVO do tutorial vence o pulso da Arena) */
/* ================= Painel de status: elementos, negativos, energia/calor e munição ================= */
.res-chip { gap: 2px; padding: 0 6px 0 4px; }
.res-chip svg { width: 15px; height: 17px; }
.res-chip em { font-style: normal; font-size: 9px; letter-spacing: .3px; opacity: .78; margin-left: 1px; align-self: center; }
.res-chip.neg { background: rgba(var(--c), .1); animation: negGlow .9s ease-in-out infinite alternate; }   /* (a cor e o símbolo do elemento ficam) */
@keyframes negGlow { to { box-shadow: 0 0 9px rgba(255, 50, 60, .75); } }
.res-chip.neg b { color: #ff5a6a; text-shadow: 0 0 6px rgba(255,40,60,.8); }
@keyframes negPulse { to { box-shadow: 0 0 10px rgba(255, 40, 60, .85), inset 0 0 6px rgba(255, 40, 60, .5); } }
.mchip { display: flex; align-items: center; justify-content: center; gap: 3px; }
.mchip b { font-weight: normal; }
.mchip small { font-size: 9px; opacity: .72; }
.mchip svg { width: 11px; height: 11px; fill: currentColor; }
.ammo-chips { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.ammo-chips:empty { display: none; }
.ammo-chip { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 5px; border-radius: 6px; font-size: 13px; line-height: 1;
  color: var(--gold-hi); background: rgba(0,0,0,.5); border: 1px solid rgba(212,175,55,.38); }
.ammo-chip b { font-weight: normal; }
.ammo-chip svg { fill: currentColor; filter: drop-shadow(0 0 3px rgba(255,200,64,.5)); }
.ammo-chip.a-missile { color: #ffb070; border-color: rgba(255,140,80,.45); }
.ammo-chip.a-missile svg { width: 22px; height: 11px; }
.ammo-chip.a-bullet svg { width: 7px; height: 14px; }
.ammo-chip.low { color: #ff6a6a; border-color: rgba(255,80,80,.8); animation: negPulse .8s ease-in-out infinite alternate; }
.ammo-chip.out { opacity: .45; animation: none; text-decoration: line-through; }
.turn-dots.right { flex-direction: row-reverse; }
.turn-dots.right .ammo-chips { margin: 0 4px 0 0; flex-direction: row-reverse; }
/* balão das peças do inimigo: "contra você" e pontos fortes/fracos */
.tip-verdict { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(212,175,55,.3); font-family: Arial, sans-serif; font-size: 12px; }
.tv-vs { color: #fff; font-weight: bold; margin-bottom: 4px; }
.tv-vs small { font-weight: normal; color: var(--text-dim); }
.tv-h { font-family: var(--font); font-size: 11px; letter-spacing: .5px; margin: 4px 0 1px; }
.tv-h.tv-pro { color: #ff8a7a; } .tv-h.tv-con { color: #7dff8a; }
.tv-l { line-height: 1.35; }
.tv-l.tv-pro { color: #ffc0b8; } .tv-l.tv-con { color: #c8ffd0; }
/* ================= Loja: tintas ================= */
.paint-ico { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#d01430, #e0b030, #10a860, #18d0e8, #2058d8, #9030e0, #ff2a9a, #d01430);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 6px rgba(255,255,255,.25); }
.paint-tile { flex-direction: column; gap: 4px; background: linear-gradient(180deg, #1d1517, #0a0607); }
.paint-swatch, .sd-img.paint-big { position: relative; border-radius: 50%; background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 32%),
    radial-gradient(circle at 60% 70%, rgba(0,0,0,.45), rgba(0,0,0,0) 60%), var(--pc);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.45), 0 0 0 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.6); }
.paint-swatch { width: 44px; height: 44px; }
.paint-tile.on { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 12px rgba(255,200,64,.6); }
.sd-img.paint-big { width: 96px; height: 96px; margin: 6px 7px; }
.paint-preview { display: flex; justify-content: center; background: radial-gradient(ellipse at 50% 85%, rgba(227,18,43,.2), transparent 60%); border-radius: 8px; }
.paint-preview canvas { width: 330px; height: 290px; }
.t-mini.big { width: 30px; height: 30px; font-size: 20px; border-radius: 7px; }
.paint-price { font-size: 11px; color: #d69bff; }
.paint-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.paint-part { position: relative; width: 52px; height: 52px; padding: 0; border: none; border-radius: 7px; background-size: cover;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.paint-part img { width: 86%; height: 86%; object-fit: contain; }
.paint-part.sel { box-shadow: 0 0 0 3px var(--sel), 0 0 10px rgba(255,200,64,.6); }
.pp-dot { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(255,255,255,.6); }
.paint-preview canvas { height: 220px; }

/* munição e escudos (v3.13.0) */
.res-chip i.sh { position: absolute; top: -8px; left: -3px; z-index: 2; font-style: normal; font-size: 9px; line-height: 12px; color: #f2ead8; padding: 0 3px; border-radius: 4px;
  background: #2a2420; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 1px 0 #000; pointer-events: none; }
.hud-name { min-width: 76px; }
.hud-res { gap: 9px; }
.res3 small.sh { font-size: 10px; color: #9fe8ff; margin-left: 1px; }
.ammo-stat { display: inline-flex; align-items: center; gap: 3px; }
.ammo-stat svg { width: 10px; height: 16px; fill: #ffcf5a; }
.ammo-stat.warn { color: #ff5a5a; animation: negPulse .8s ease-in-out infinite alternate; }
.ammo-stat.warn svg { fill: #ff5a5a; }
.tip-stats svg.c-ammo { fill: #ffcf5a; width: 10px; height: 15px; }
.tip-stats .need-ammo span { color: #ffb070; }
.paint-tile .kit-name { margin-bottom: 9px; }   /* nome de 2 linhas não encosta no preço */

/* Hangar vivo (js/hangar_fx.js): camadas de efeito sem clique; a bomba lá fora faz o galpão tremer */
.hangar-fx { position: absolute; left: 0; top: 0; width: 612px; height: 654px; pointer-events: none; border-radius: 6px; }
.ws-editor.rumble { animation: hangarRumble .5s linear; }
@keyframes hangarRumble { 0%, 100% { transform: none; } 15% { transform: translate(-1.5px, 1px); } 30% { transform: translate(1.5px, -1px); }
  45% { transform: translate(-1px, -.5px); } 60% { transform: translate(1px, 1px); } 80% { transform: translate(-.5px, .5px); } }

/* Cinema (js/cinema.js): filme em tela cheia por cima de tudo */
#cinema { position: absolute; inset: 0; z-index: 9000; background: #000; animation: cinIn .5s ease-out; }
#cinema canvas { position: absolute; left: var(--stage-ext, 0px); top: 0; width: 1200px; height: 720px; }   /* (v4.0.4) filme no meio do palco */
#cinema.out { animation: cinOut .45s ease-in forwards; }
@keyframes cinIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cinOut { to { opacity: 0; } }
.cin-skip { position: absolute; right: 22px; top: 16px; z-index: 2; padding: 6px 16px; border-radius: 4px; cursor: pointer;
  font-family: 'Russo One', sans-serif; font-size: 14px; letter-spacing: 2px; color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); }
.cin-skip:hover { color: #fff; border-color: var(--gold-hi); }
.cin-loading { position: absolute; left: 0; right: 0; top: 340px; text-align: center; font-family: 'Russo One', sans-serif; font-size: 18px; letter-spacing: 4px; color: rgba(255,255,255,.55); }
.title-films { position: absolute; right: 22px; top: 20px; display: flex; gap: 10px; }
.title-film { padding: 7px 14px; border-radius: 4px; cursor: pointer; font-family: 'Russo One', sans-serif; font-size: 14px; letter-spacing: 1px;
  color: var(--gold-hi); background: rgba(0,0,0,.55); border: 1px solid rgba(212,175,55,.55); }
.title-film:hover { background: rgba(60,8,12,.8); border-color: var(--gold-hi); }

/* escolha do mech único do tutorial (js/tutorial.js tutChooseStarter) */
#starterPick { position: absolute; inset: 0; z-index: 250; display: flex; flex-direction: column; align-items: center; padding-top: 34px;
  background: radial-gradient(ellipse at 50% 38%, rgba(40,22,26,.82), rgba(4,3,5,.96) 70%); animation: spFade .4s ease-out; transition: opacity .4s; }
#starterPick.out { opacity: 0; }
@keyframes spFade { from { opacity: 0; } }
.sp-head { text-align: center; margin-bottom: 22px; }
.sp-head h2 { margin: 0; font-weight: normal; font-size: 34px; letter-spacing: 3px; color: var(--gold-hi); text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,200,64,.35); }
.sp-head p { margin: 6px 0 0; font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 15px; color: var(--text-dim); }
.sp-cards { display: flex; gap: 26px; }
.sp-card { --el: #fff; position: relative; width: 330px; padding: 0 0 16px; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #16111a 0%, #0b080d 55%, #060408 100%); border: 2px solid rgba(212,175,55,.32); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.6); transition: transform .25s ease, border-color .25s, box-shadow .25s, opacity .35s, filter .35s;
  animation: spIn .55s cubic-bezier(.2, .8, .3, 1) both; overflow: hidden; }
.sp-card:nth-child(2) { animation-delay: .12s; } .sp-card:nth-child(3) { animation-delay: .24s; }
@keyframes spIn { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-card:hover { transform: translateY(-6px); border-color: var(--el); box-shadow: 0 0 0 1px var(--el), 0 0 26px color-mix(in srgb, var(--el) 40%, transparent), 0 18px 40px rgba(0,0,0,.7); }
.sp-stage { position: relative; width: 100%; height: 250px; overflow: hidden;
  background: linear-gradient(180deg, #0c0a10, #17121c 80%, #0b080d); border-bottom: 1px solid rgba(255,255,255,.06); }
.sp-beam { position: absolute; left: 50%; top: -20px; width: 240px; height: 290px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--el) 30%, transparent), transparent 85%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  opacity: .55; transition: opacity .3s; }
.sp-card:hover .sp-beam, .sp-card.chosen .sp-beam { opacity: 1; }
.sp-pad { position: absolute; left: 50%; bottom: 10px; width: 230px; height: 34px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--el) 45%, transparent), transparent 70%); }
.sp-stage canvas { position: absolute; left: 15px; top: 0; animation: spBob 3.4s ease-in-out infinite; }
.sp-card:nth-child(2) .sp-stage canvas { animation-delay: -1.1s; } .sp-card:nth-child(3) .sp-stage canvas { animation-delay: -2.2s; }
@keyframes spBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.sp-unique { position: absolute; right: 10px; top: 10px; padding: 3px 8px; font-size: 11px; letter-spacing: 1.5px; color: #1a1205;
  background: linear-gradient(180deg, #ffe08a, #d4a017); border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.sp-name { margin-top: 12px; font-size: 26px; letter-spacing: 2px; color: #fff; text-transform: uppercase; text-shadow: 0 2px 0 #000; }
.sp-el { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-family: Arial, sans-serif; font-size: 12px; color: var(--el); text-transform: uppercase; letter-spacing: 1px; }
.sp-el i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.sp-desc { min-height: 54px; margin: 10px 20px 0; text-align: center; font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 13px; line-height: 1.38; color: var(--text-dim); }
.sp-stats { width: calc(100% - 40px); margin: 12px 20px 14px; display: flex; flex-direction: column; gap: 5px; }
.sp-stats div { display: flex; justify-content: space-between; padding: 4px 10px; background: rgba(255,255,255,.035); border-left: 2px solid var(--el);
  font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 13px; color: var(--text-dim); }
.sp-stats b { color: #fff; font-weight: bold; }
.sp-go { width: calc(100% - 40px); height: 42px; font-size: 17px; }
#starterPick.picked .sp-card:not(.chosen) { opacity: .16; filter: grayscale(.7); transform: scale(.96); }
#starterPick.picked .sp-card.chosen { transform: translateY(-10px) scale(1.04); border-color: var(--el);
  box-shadow: 0 0 0 2px var(--el), 0 0 46px color-mix(in srgb, var(--el) 55%, transparent), 0 20px 44px rgba(0,0,0,.7); }
#starterPick.picked .sp-card.chosen::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--el) 55%, #fff), transparent 60%); animation: spFlash .9s ease-out forwards; }
@keyframes spFlash { from { opacity: .85; } to { opacity: 0; } }
.tip-unique { margin: 4px 0 2px; padding: 4px 8px; font-family: Arial, sans-serif; font-size: 11.5px; line-height: 1.35; color: #f3e2b0;
  background: linear-gradient(90deg, rgba(212,160,23,.28), rgba(212,160,23,.04)); border-left: 2px solid #ffd24a; }
.tip-unique b { color: #ffd24a; font-weight: bold; letter-spacing: .5px; }

/* trilha do piloto: prêmios por nível (js/levels.js) */
.tb-track { cursor: pointer; transition: filter .15s; }
.tb-track:hover { filter: brightness(1.25); }
.lvl-track { width: 1020px; text-align: left; padding-bottom: 18px; }
.lt-head { display: flex; gap: 18px; align-items: flex-end; margin-top: 4px; }
.lt-mech { width: 130px; height: 130px; flex: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.lt-title { flex: 1; min-width: 0; }
.lt-title .panel-title { text-align: left; margin-bottom: 0; }
.lt-title p { margin: 4px 0 10px; font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 14px; color: var(--text-dim); }
.lt-xp { position: relative; height: 22px; background: #07050a; border: 1px solid rgba(212,175,55,.45); border-radius: 4px; overflow: hidden; }
.lt-xp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #47b6ff, #1557d6); box-shadow: 0 0 10px rgba(60,160,255,.5); }
.lt-xp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
.lt-track { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; padding: 14px 8px 10px; background: #050407; border: 2px solid #7a5512; border-radius: 10px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.8); }
.lt-nav { width: 32px; flex: none; background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.35); border-radius: 6px; color: var(--gold-hi); font-size: 30px; line-height: 1; cursor: pointer; }
.lt-nav:hover:not(:disabled) { background: rgba(255,200,64,.12); }
.lt-nav:disabled { opacity: .18; cursor: default; }
.lt-page { flex: 1; min-width: 0; }
.lt-bar { position: relative; height: 24px; margin: 0 0 8px; border-radius: 4px; background: linear-gradient(180deg, #1a1a1f, #2d2d34 50%, #131317); box-shadow: inset 0 0 0 2px #000; }
.lt-fill { position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #45b0ff 0 7px, #1f80ea 7px 10px); box-shadow: 0 0 14px rgba(60,160,255,.65); }
.lt-bar s { position: absolute; top: -5px; bottom: -5px; width: 6px; margin-left: -3px; border-radius: 2px; text-decoration: none;
  background: linear-gradient(180deg, #ffc84a, #b86f05); box-shadow: 0 0 0 1px #000; }
.lt-cols { display: grid; grid-template-columns: repeat(10, 1fr); }
.lt-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 196px; padding: 2px 2px 6px; border-radius: 6px; }
.lt-num { font-weight: normal; font-size: 25px; color: #fff; text-shadow: 0 2px 0 #000; }
.lt-col.got .lt-num { color: #6cc2ff; }
.lt-col.got .lt-num::after { content: '✓'; margin-left: 3px; font-size: 15px; color: #2bdc44; vertical-align: 4px; }
.lt-col.next { background: linear-gradient(180deg, rgba(255,200,64,.13), rgba(255,200,64,.02)); box-shadow: inset 0 0 0 1px rgba(255,200,64,.5); }
.lt-col.next .lt-num { color: var(--gold-hi); }
.lt-rw { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lt-chip { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 70px; height: 24px; padding: 0 5px;
  font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #1b3d6b, #0c213d); border: 1px solid #2f7ad6; border-radius: 3px; box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.lt-chip img { height: 16px; }
.lt-pn { color: #ffe7a0; }
.lt-tk i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 3px; background: #7b3dff; font-style: normal; font-size: 11px; color: #fff; }
.lt-box { width: 70px; height: 54px; background: radial-gradient(ellipse at 50% 60%, rgba(255,190,60,.25), #0c0a0a 70%); border-color: #c99417; }
.lt-box img { height: 50px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.lt-key { color: #ff9a2a; background: #120c06; border-color: #a8641a; }
.lt-key.red { color: #ff4040; border-color: #a82020; }
.lt-key svg { width: 34px; height: 18px; }
.lt-tier { background: #0b0b10; border-color: currentColor; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.lt-kit { background: #07140a; border-color: #2a8a3c; }
.lt-kit svg { width: 16px; height: 16px; fill: currentColor; }
.lt-items { background: #101014; border-color: #55555f; color: #d8d8e0; }
.lt-items svg { width: 15px; height: 13px; fill: currentColor; }
.lt-start { background: none; border-color: rgba(255,255,255,.15); color: var(--text-dim); box-shadow: none; }
.lt-col.got:not(.new) .lt-chip { filter: saturate(.5) brightness(.72); }
.lt-col.new { animation: ltGlow 1.3s ease-out both; animation-delay: var(--d); }
.lt-col.new .lt-chip { animation: ltPop .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--d); }
@keyframes ltPop { from { transform: scale(.35); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ltGlow { 0% { background: rgba(70,170,255,0); } 25% { background: rgba(70,170,255,.28); box-shadow: inset 0 0 0 1px rgba(110,190,255,.9); } 100% { background: rgba(70,170,255,.06); box-shadow: inset 0 0 0 1px rgba(110,190,255,.35); } }
.lt-new { margin-top: 12px; }
.lt-new > b { font-weight: normal; font-size: 15px; color: var(--gold-hi); letter-spacing: 1px; }
.lt-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lvl-track .btns { margin-top: 14px; justify-content: flex-end; }

/* Arena Online (js/online.js) */
.dialog input.wide { font-family: Consolas, 'Courier New', monospace; font-size: 15px; }
.online-panel { width: 900px; padding: 0 22px 16px; }
.op-head { display: flex; align-items: center; justify-content: space-between; }
.op-head .panel-title { margin-bottom: 0; }
.op-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 3px; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 1px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--text-dim); }
.op-status i { width: 8px; height: 8px; border-radius: 50%; background: #777; }
.op-status.st-on { color: #7dff9a; border-color: rgba(60,220,110,.4); }
.op-status.st-on i { background: #3cdc6e; box-shadow: 0 0 8px #3cdc6e; }
.op-status.st-connecting i { background: #ffc84a; animation: opBlink 1s ease-in-out infinite; }
.op-status.st-off, .op-status.st-error { color: #ff8a8a; border-color: rgba(255,80,80,.35); }
.op-status.st-off i, .op-status.st-error i { background: #ff4a4a; }
@keyframes opBlink { 50% { opacity: .25; } }
.op-body { display: flex; gap: 18px; margin-top: 12px; }
.op-me { width: 250px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 10px 10px 14px; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 35%, rgba(255,200,64,.1), transparent 70%), linear-gradient(180deg, #141016, #08060a); border: 1px solid rgba(212,175,55,.28); }
.op-name { margin-top: 4px; font-size: 20px; color: #fff; letter-spacing: 1px; }
.op-league { --lg: #fff; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lg) 22%, #0b0b0f), #0b0b0f); border: 1px solid color-mix(in srgb, var(--lg) 70%, #000); }
.op-league b { font-weight: normal; font-size: 13px; color: var(--lg); letter-spacing: 1px; text-transform: uppercase; }
.op-league i { font-style: normal; font-family: Arial, sans-serif; font-weight: bold; font-size: 13px; color: #fff; }
.op-league.off b { color: var(--text-dim); }
.op-wl { margin-top: 8px; font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 12px; color: var(--text-dim); text-align: center; }
.op-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.op-find { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 8px;
  background: #07060a; border: 1px solid rgba(212,175,55,.22); text-align: center; }
.op-find p { margin: 0; font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 13px; line-height: 1.4; color: var(--text-dim); }
.op-find .op-err { color: #ff9a9a; }
.op-go { min-width: 300px; height: 48px; font-size: 20px; }
.op-search { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.op-search b { font-weight: normal; font-size: 17px; color: var(--gold-hi); letter-spacing: 1px; }
.op-search span { font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); }
.op-bar { position: relative; width: 70%; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.08); }
.op-bar i { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); animation: opSweep 1.4s ease-in-out infinite; }
@keyframes opSweep { from { left: -30%; } to { left: 100%; } }
.op-rank { flex: 1; padding: 10px 14px; border-radius: 8px; background: #07060a; border: 1px solid rgba(212,175,55,.22); }
.op-rank h3 { margin: 0 0 6px; font-weight: normal; font-size: 15px; color: var(--gold-hi); letter-spacing: 2px; }
.op-rank ol { list-style: none; margin: 0; padding: 0; max-height: 236px; overflow-y: auto; }
.op-rank li { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.05);
  font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 13px; color: var(--text); }
.op-rank li em { width: 22px; font-style: normal; font-weight: bold; color: var(--text-dim); text-align: right; }
.op-rank li .op-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-rank li .op-league { margin: 0; padding: 1px 7px; }
.op-rank li .op-league b { font-size: 11px; }
.op-rank li > b { width: 46px; text-align: right; color: #fff; }
.op-rank li.you { background: rgba(255,200,64,.09); }
.op-rank li.you .op-pname { color: var(--gold-hi); }
.op-rank li.empty { justify-content: center; color: var(--text-dim); border: 0; padding: 14px 0; }
.op-myrank { margin-top: 6px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); text-align: right; }
.op-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.op-foot code { color: #d8e4f0; font-family: Consolas, 'Courier New', monospace; }
.op-foot .sm-btn { min-width: 0; height: 30px; padding: 0 12px; font-size: 13px; }
.op-count { margin-left: auto; }
/* tela VS: adversário encontrado */
#onlineVs { position: absolute; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center; gap: 30px;
  background: radial-gradient(ellipse at 50% 50%, #1d0d10, #040304 72%); animation: spFade .35s ease-out; transition: opacity .4s; }
#onlineVs.out { opacity: 0; }
#onlineVs .vs-band { position: absolute; left: 0; right: 0; top: 50%; height: 140px; transform: translateY(-50%) skewY(-4deg);
  background: linear-gradient(90deg, rgba(255,200,64,.14), rgba(255,200,64,.02) 45%, rgba(227,18,43,.02) 55%, rgba(227,18,43,.16)); }
.vs-side { position: relative; width: 380px; display: flex; flex-direction: column; align-items: center; animation: vsInL .55s cubic-bezier(.2, .8, .3, 1) both; }
.vs-side.opp { animation-name: vsInR; }
.vs-side.opp canvas { transform: scaleX(-1); }
@keyframes vsInL { from { transform: translateX(-120px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vsInR { from { transform: translateX(120px); opacity: 0; } to { transform: none; opacity: 1; } }
.vs-name { margin-top: 4px; font-size: 28px; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 0 #000; }
.vs-side.me .vs-name { color: var(--gold-hi); }
.vs-lvl { margin-top: 6px; font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); }
.vs-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: vsMid .5s .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.vs-mid b { font-weight: normal; font-size: 92px; line-height: 1; color: #fff; letter-spacing: 4px; text-shadow: 0 0 24px rgba(255,90,60,.6), 0 4px 0 #6e0612, 0 6px 0 #000; }
.vs-mid span { font-size: 15px; letter-spacing: 2px; color: var(--gold-hi); white-space: nowrap; }
@keyframes vsMid { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
.online-line { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; }
.online-line .op-league { margin: 0; }
.online-line .up { color: #6dff8f; }
.online-line .down { color: #ff7a7a; }

/* ================= Entrada na conta (js/login.js) ================= */
#screen-title .title-logo { transition: top .45s cubic-bezier(.2,.8,.3,1), transform .45s cubic-bezier(.2,.8,.3,1); transform-origin: 50% 0; }
#screen-title.auth-on .title-logo { top: 22px; transform: translateX(-50%) scale(.6); }
.title-auth { position: absolute; left: 50%; top: 190px; transform: translateX(-50%); z-index: 5; animation: spFade .35s ease-out; }
.au-panel { width: 400px; padding: 16px 26px 14px; border-radius: 8px; text-align: left;
  background: linear-gradient(180deg, rgba(14,10,12,.94), rgba(5,4,5,.96)); border: 1px solid rgba(212,175,55,.34);
  box-shadow: inset 0 1px 0 rgba(255,215,106,.1), 0 18px 40px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6); }
.au-panel.wide { width: 520px; }
.au-panel h3 { margin: 0 0 12px; text-align: center; font-weight: normal; font-size: 19px; letter-spacing: 2px; color: var(--gold-hi); }
.au-panel label { display: block; margin-bottom: 10px; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.au-panel label input:not([type=checkbox]) { display: block; width: 100%; height: 38px; margin-top: 4px; padding: 0 11px; border-radius: 4px; outline: none;
  background: #050405; border: 1px solid rgba(212,175,55,.28); color: #fff; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; letter-spacing: 0; text-transform: none;
  user-select: text; -webkit-user-select: text; transition: border-color .15s, box-shadow .15s; }
.au-panel label input::placeholder { color: #5f564c; }
.au-panel label input:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(255,215,106,.14); }
.au-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.au-check { display: flex !important; align-items: flex-start; gap: 9px; margin: 2px 0 8px !important; cursor: pointer;
  font-size: 13px !important; font-weight: normal !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; line-height: 1.35; }
.au-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--gold); cursor: pointer; }
.au-main { display: block; width: 100%; height: 44px; margin-top: 6px; font-size: 19px; }
.au-steam { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 8px; font-size: 15px;
  background: linear-gradient(180deg, #1f3f66, #10243d) !important; color: #dbe8f7 !important; border-color: #2d5a8a !important; }
.au-links { display: flex; justify-content: center; gap: 22px; margin-top: 10px; }
.au-link { padding: 0; background: none; border: 0; font-family: Arial, sans-serif; font-size: 13px; color: var(--gold-hi); cursor: pointer; }
.au-link:hover { color: #fff; text-decoration: underline; }
.au-link.inline { font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.au-err { margin: 2px 0 8px; padding: 7px 10px; border-radius: 4px; background: rgba(227,18,43,.1); border: 1px solid rgba(227,18,43,.35);
  font-family: Arial, sans-serif; font-size: 13px; line-height: 1.35; color: #ffb4b4; }
.au-tip { margin: 0 0 12px; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.45; color: var(--text-dim); text-align: center; }
.au-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 8px; }
.au-wait .op-bar { width: 80%; }
.au-wait b { font-weight: normal; font-size: 16px; letter-spacing: 1px; color: var(--gold-hi); }
.au-server { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06);
  font-family: Arial, sans-serif; font-size: 11px; color: var(--text-mute); }
.au-server code { color: var(--text-dim); font-family: Consolas, 'Courier New', monospace; }
.au-server .au-link { font-size: 11px; }
.au-dot { width: 7px; height: 7px; border-radius: 50%; background: #666; }
.au-dot.st-on { background: #3cdc6e; box-shadow: 0 0 6px #3cdc6e; }
.au-dot.st-connecting { background: #ffc84a; animation: opBlink 1s ease-in-out infinite; }
.au-dot.st-off, .au-dot.st-error { background: #ff4a4a; }
.title-account { position: absolute; left: 22px; top: 26px; text-align: left; font-family: Arial, sans-serif; font-size: 13px; color: var(--text-mute); }
.title-account b { color: var(--text-dim); }
.title-account .au-link { font-size: 13px; }
.net-banner { position: absolute; left: 50%; top: 10px; z-index: 900; transform: translateX(-50%); padding: 8px 18px; border-radius: 4px; pointer-events: none;
  background: rgba(40,6,10,.94); border: 1px solid rgba(227,18,43,.55); box-shadow: 0 6px 18px rgba(0,0,0,.6);
  font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: #ffd0d0; letter-spacing: .5px; }
.set-dim { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); }
.op-find p.op-note { font-size: 12px; color: var(--text-mute); }

/* ================= Termos de Uso / Privacidade / Regras da Arena (js/legal.js) ================= */
.legal-panel { width: 760px; padding: 0 26px 18px; }
.lg-tabs { display: flex; gap: 6px; margin: 4px 0 10px; border-bottom: 1px solid rgba(212,175,55,.2); }
.lg-tab { padding: 8px 14px; margin-bottom: -1px; background: none; border: 1px solid transparent; border-radius: 4px 4px 0 0;
  font-size: 14px; letter-spacing: .5px; color: var(--text-dim); }
.lg-tab:hover { color: #fff; }
.lg-tab.on { color: var(--gold-hi); background: rgba(212,175,55,.07); border-color: rgba(212,175,55,.3) rgba(212,175,55,.3) #060506; }
.lg-text { height: 380px; overflow-y: auto; padding: 4px 18px 10px 4px; margin-bottom: 12px; user-select: text; -webkit-user-select: text;
  font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 14px; line-height: 1.55; color: var(--text); }
.lg-text h3 { margin: 6px 0 10px; font-family: var(--font); font-weight: normal; font-size: 18px; color: var(--gold-hi); letter-spacing: .5px; }
.lg-text h4 { margin: 16px 0 6px; font-family: var(--font); font-weight: normal; font-size: 15px; color: #fff; letter-spacing: .5px; }
.lg-text p { margin: 0 0 8px; color: var(--text-dim); }
.lg-text ul { margin: 0 0 8px; padding-left: 20px; color: var(--text-dim); }
.lg-text li { margin-bottom: 4px; }
.lg-text b { color: #fff; }
.lg-text .op-search { padding-top: 160px; }
.lg-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: Consolas, 'Cascadia Mono', monospace; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.legal-panel .au-check { margin-bottom: 8px !important; font-family: Arial, sans-serif; font-size: 14px !important; }
.legal-panel .btns { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.legal-panel .btns .sm-btn { min-width: 150px; }
.legal-panel .btns .sm-btn:disabled { opacity: .4; filter: grayscale(.6); cursor: not-allowed; }
.settings .setting-row.acct > span:first-child { flex: 1; min-width: 0; text-align: left; }
.settings .setting-row.acct > span:last-child { flex: none; display: flex; gap: 8px; }
.settings .setting-row { min-height: 38px; }
.settings .setting-row .sm-btn { height: 36px; }
/* barras de rolagem no tema (painéis de texto, configurações, listas) */
.lg-text::-webkit-scrollbar, .settings::-webkit-scrollbar, .op-rank ol::-webkit-scrollbar { width: 8px; }
.lg-text::-webkit-scrollbar-track, .settings::-webkit-scrollbar-track, .op-rank ol::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 4px; }
.lg-text::-webkit-scrollbar-thumb, .settings::-webkit-scrollbar-thumb, .op-rank ol::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }

/* Caixas: abas (normais / Míticas) */
.box-tabs { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px; border-radius: 6px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(212,175,55,.3); z-index: 2; }
.box-tab { min-width: 170px; height: 34px; padding: 0 16px; border-radius: 4px; background: none; border: 1px solid transparent;
  font-size: 15px; letter-spacing: 1px; color: var(--text-dim); transition: color .15s, background .15s; }
.box-tab:hover { color: #fff; }
.box-tab.on { color: #1c1200; background: linear-gradient(180deg, #ffe08a, #d4a12a); border-color: #6e5210; }
.box-tab.mythic.on { color: #fff; background: linear-gradient(180deg, #e0344a, #7a0c1c); border-color: #3a0410; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.box-note { position: absolute; top: 64px; left: 0; right: 0; text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: #ffb0b8; letter-spacing: .3px; }
.box-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 34px; }
.boxes-wrap.mythic-tab .box-row { gap: 26px; margin-top: 52px; }
.boxes-wrap.mythic-tab { background:
    radial-gradient(ellipse 70% 42% at 50% 84%, rgba(255,40,70,.28), transparent 70%),
    linear-gradient(180deg, transparent 0 74%, rgba(0,0,0,.45) 74.2%, rgba(0,0,0,.2) 100%),
    radial-gradient(ellipse at 50% 30%, #2c0c14 0%, #12060a 52%, #040203 100%); }
.box-card.box-mythic1, .box-card.box-mythic2, .box-card.box-mythic3 { width: 236px; }
.box-card.box-mythic1 { background: linear-gradient(180deg, #7a1a2a, #24060c); box-shadow: inset 0 0 0 2px #c8a0a8, 0 8px 24px rgba(0,0,0,.6); }
.box-card.box-mythic2 { background: linear-gradient(180deg, #7a1a2a, #24060c); box-shadow: inset 0 0 0 2px #e0b04a, 0 8px 24px rgba(0,0,0,.6); }
.box-card.box-mythic3 { background: linear-gradient(180deg, #34343c, #0c0c10); box-shadow: inset 0 0 0 2px #e8c04a, 0 0 18px rgba(255,46,74,.25), 0 8px 24px rgba(0,0,0,.6); }
.box-card.box-mythic1 .box-img, .box-card.box-mythic2 .box-img, .box-card.box-mythic3 .box-img { width: 206px; }
.box-card .sm-btn.need { font-size: 15px; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ================= Conteúdo ao vivo (js/live.js): evento, novidades ================= */
.event-strip { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; max-width: 640px;
  height: 36px; padding: 0 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, rgba(40, 10, 16, .94), rgba(18, 6, 9, .94)); border: 1px solid rgba(255, 90, 106, .55);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 215, 106, .12); font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.event-strip:hover { border-color: #ff8a96; }
.event-strip.boss { border-color: rgba(255, 184, 58, .8); background: linear-gradient(180deg, rgba(54, 21, 8, .97), rgba(18, 7, 5, .97)); box-shadow: 0 6px 18px rgba(0, 0, 0, .65), 0 0 18px rgba(255, 129, 36, .14), inset 0 1px 0 rgba(255, 225, 130, .2); }
.event-strip.boss b { background: linear-gradient(180deg, #e05020, #8d160f); color: #fff4d0; }
.event-strip.boss .es-fx { color: #ffbd55; }
.event-strip b { font-family: var(--font); font-weight: normal; font-size: 12px; letter-spacing: 1px; color: #fff; padding: 2px 8px; border-radius: 3px; background: #c2152b; }
.event-strip .es-name { font-family: var(--font); font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.event-strip .es-name i { font-style: normal; font-size: 11px; color: var(--gold-hi); }
.event-strip .es-fx { color: var(--gold-hi); font-weight: bold; }
.event-strip .es-left { color: var(--text-mute); }
/* (v3.32) evento festivo: a faixa com as cores do tema e a camada de partículas por cima do mapa (js/festive.js) */
.festive-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.event-strip.festa b { background: var(--fest-b, #c2152b); color: #fff; }
.event-strip.festa { border-color: var(--fest-line, rgba(255, 90, 106, .55)); background: var(--fest-bg); box-shadow: 0 6px 16px rgba(0, 0, 0, .55), 0 0 22px var(--fest-glow, transparent); }
.event-strip[data-festa="halloween"] { --fest-b: linear-gradient(180deg, #ff8a1e, #a8400a); --fest-line: rgba(255, 138, 30, .8); --fest-bg: linear-gradient(180deg, rgba(40, 14, 44, .96), rgba(14, 6, 16, .96)); --fest-glow: rgba(255, 120, 20, .22); }
.event-strip[data-festa="natal"] { --fest-b: linear-gradient(180deg, #2fa24a, #136a2a); --fest-line: rgba(255, 90, 90, .8); --fest-bg: linear-gradient(180deg, rgba(60, 10, 14, .96), rgba(16, 6, 8, .96)); --fest-glow: rgba(120, 255, 160, .16); }
.event-strip[data-festa="anonovo"] { --fest-b: linear-gradient(180deg, #ffd84a, #b8860b); --fest-line: rgba(255, 216, 74, .85); --fest-bg: linear-gradient(180deg, rgba(14, 16, 40, .96), rgba(6, 6, 16, .96)); --fest-glow: rgba(255, 216, 74, .22); }
.event-strip[data-festa="anonovo"] b { color: #1c1300; }
.event-strip[data-festa="lunar"] { --fest-b: linear-gradient(180deg, #e8331a, #8a0a0a); --fest-line: rgba(255, 200, 80, .85); --fest-bg: linear-gradient(180deg, rgba(70, 8, 8, .96), rgba(24, 4, 4, .96)); --fest-glow: rgba(255, 180, 60, .22); }
.event-strip[data-festa="namorados"] { --fest-b: linear-gradient(180deg, #ff4a7a, #b0103a); --fest-line: rgba(255, 120, 170, .85); --fest-bg: linear-gradient(180deg, rgba(58, 10, 30, .96), rgba(20, 4, 10, .96)); --fest-glow: rgba(255, 74, 122, .24); }
.event-strip[data-festa="pascoa"] { --fest-b: linear-gradient(180deg, #8ad0ff, #4a8ad8); --fest-line: rgba(255, 220, 160, .85); --fest-bg: linear-gradient(180deg, rgba(30, 24, 48, .96), rgba(10, 8, 18, .96)); --fest-glow: rgba(255, 240, 160, .2); }
.map-news-toggle { position: absolute; right: 138px; top: 10px; height: 36px; padding: 0 16px; font-size: 16px; color: #fff; border-radius: 6px; cursor: pointer; z-index: 5;
  font-family: var(--font); letter-spacing: .5px; background: linear-gradient(180deg, #2a2224, #120d0f); border: 1px solid rgba(212, 175, 55, .55); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.map-news-toggle:hover { border-color: var(--gold-hi); }
.news-badge { position: absolute; right: -7px; top: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-style: normal; font-family: Arial, sans-serif;
  font-size: 12px; font-weight: bold; line-height: 20px; color: #fff; background: #d8122b; border: 2px solid #0a0607; }
.news-panel { width: 640px; max-height: 640px; display: flex; flex-direction: column; padding: 0 22px 16px; }
.news-showcase { position:relative;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.8),0 0 42px rgba(196,28,50,.13);animation:newsPanelIn .36s cubic-bezier(.2,.8,.2,1) both; }
@keyframes newsPanelIn { from { opacity:0;transform:translateY(18px) scale(.97);filter:blur(4px); } to { opacity:1;transform:none;filter:none; } }
.news-atmos { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0; }
.news-atmos i { position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;background:#ffb05a;box-shadow:0 0 8px #ff4b32;animation:newsSpark 4.8s linear infinite; }
.news-atmos i:nth-child(3n) { background:#ffe6af;animation-duration:6.2s; }
.news-atmos i:nth-child(1){left:6%;animation-delay:-1s}.news-atmos i:nth-child(2){left:13%;animation-delay:-3.4s}.news-atmos i:nth-child(3){left:20%;animation-delay:-2s}.news-atmos i:nth-child(4){left:27%;animation-delay:-4.2s}.news-atmos i:nth-child(5){left:34%;animation-delay:-.4s}.news-atmos i:nth-child(6){left:41%;animation-delay:-2.8s}.news-atmos i:nth-child(7){left:48%;animation-delay:-4.8s}.news-atmos i:nth-child(8){left:55%;animation-delay:-1.7s}.news-atmos i:nth-child(9){left:62%;animation-delay:-3.7s}.news-atmos i:nth-child(10){left:69%;animation-delay:-.8s}.news-atmos i:nth-child(11){left:76%;animation-delay:-2.4s}.news-atmos i:nth-child(12){left:83%;animation-delay:-4.5s}.news-atmos i:nth-child(13){left:90%;animation-delay:-1.4s}.news-atmos i:nth-child(n+14){left:96%;animation-delay:-3s}
@keyframes newsSpark { 0%{transform:translateY(0) scale(.5);opacity:0} 15%{opacity:.75} 100%{transform:translate(-28px,-650px) scale(1.5);opacity:0} }
.news-showcase > *:not(.news-atmos) { position:relative;z-index:1; }
.news-list { flex: 1; overflow-y: auto; margin: 6px 0 12px; padding-right: 6px; }
.news-list::-webkit-scrollbar { width: 8px; }
.news-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }
.news-item { border-radius: 6px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); margin-bottom: 8px; }
.news-carousel { overflow:hidden;padding:0;margin:6px 0 8px; }
.news-carousel .news-item { display:none;margin:0;min-height:360px;background:linear-gradient(155deg,rgba(30,11,15,.98),rgba(5,7,10,.98));border-color:rgba(214,55,80,.42);box-shadow:inset 0 0 40px rgba(222,28,58,.05); }
.news-carousel .news-item.active { display:block;animation:newsCardIn .34s ease-out both; }
@keyframes newsCardIn { from { opacity:0;transform:translateX(18px); } to { opacity:1;transform:none; } }
.news-item.unread { border-color: rgba(212, 175, 55, .45); }
.news-item header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.news-item header b { flex: 1; font-weight: normal; font-size: 15px; color: #fff; }
.news-item header small { font-family: Arial, sans-serif; font-size: 11px; color: var(--text-mute); }
.news-kind { flex: none; padding: 2px 7px; border-radius: 3px; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; letter-spacing: .6px; color: #fff; background: #3b4250; }
.news-kind.k-update { background: #1e5aa8; } .news-kind.k-event { background: #b3122a; } .news-kind.k-maintenance { background: #8a5a08; } .news-kind.k-promo { background: #6b2bb0; }
.news-full { display: none; padding: 0 12px 12px; }
.news-item.open .news-full, .news-item.ev .news-body { display: block; }
.news-visual { position:relative;overflow:hidden;margin:0 auto 10px;border-radius:5px;border:1px solid rgba(255,64,92,.48);background:radial-gradient(circle at 50% 50%,#51101b,#09070a);perspective:700px; }
.news-img { display:block;width:100%;max-height:290px;object-fit:cover;margin:0;transform:translate(var(--news-x,0px),var(--news-y,0px)) scale(1.025) rotateX(var(--news-rx,0deg)) rotateY(var(--news-ry,0deg));transition:transform .16s ease-out;filter:saturate(1.08) contrast(1.04); }
.news-scan { position:absolute;inset:-30% -10%;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.13) 48%,transparent 56%);transform:translateX(-70%);animation:newsScan 4.5s ease-in-out infinite; }
@keyframes newsScan { 0%,62%{transform:translateX(-70%)} 82%,100%{transform:translateX(70%)} }
.news-body { font-family: Arial, 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 14px; line-height: 1.55; color: var(--text-dim); user-select: text; }
.news-body h3, .news-body h4 { font-family: var(--font); font-weight: normal; color: #fff; margin: 10px 0 6px; }
.news-body p { margin: 0 0 8px; }
.news-body ul { margin: 0 0 8px; padding-left: 20px; }
.news-body b { color: #fff; }
.news-carousel .news-body li { opacity:0;transform:translateX(-10px);animation:newsLineIn .3s ease-out forwards; }
.news-carousel .news-body li:nth-child(1){animation-delay:.12s}.news-carousel .news-body li:nth-child(2){animation-delay:.18s}.news-carousel .news-body li:nth-child(3){animation-delay:.24s}.news-carousel .news-body li:nth-child(4){animation-delay:.30s}.news-carousel .news-body li:nth-child(5){animation-delay:.36s}.news-carousel .news-body li:nth-child(n+6){animation-delay:.42s}
@keyframes newsLineIn { to { opacity:1;transform:none; } }
.news-cta { display:block;margin:12px 0 0 auto;min-width:170px; }
.news-nav { display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 8px;color:var(--text-mute);font:12px Arial,sans-serif; }
.news-nav button { width:34px;height:28px;border-radius:4px;border:1px solid rgba(212,175,55,.42);background:#171008;color:#ffd76a;font-size:22px;line-height:20px;cursor:pointer; }
.news-nav > div { display:flex;gap:6px; }
.news-nav i { width:7px;height:7px;border-radius:50%;background:#514a45;cursor:pointer;transition:.2s; }
.news-nav i.on { width:22px;border-radius:5px;background:#e32b49;box-shadow:0 0 8px rgba(255,47,82,.55); }
.news-nav span { min-width:38px;text-align:center; }
.news-item.ev { padding-bottom: 10px; }
.news-item.ev header { cursor: default; }
.news-item .ev-fx { margin: 0 12px 8px; font-family: Arial, sans-serif; font-weight: bold; color: var(--gold-hi); }
.news-item.ev .news-body { padding: 0 12px; }
.news-empty { padding: 30px 0; text-align: center; font-family: Arial, sans-serif; color: var(--text-mute); }
.news-panel .btns { display: flex; justify-content: flex-end; }
.event-live-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 8px 2px; }
.event-live-list .news-item { flex: none; margin: 0; }
.boss-event-card { flex: none; overflow: hidden; border-radius: 8px; color: #fff; background: linear-gradient(145deg, rgba(40, 18, 15, .98), rgba(9, 8, 12, .98)); border: 1px solid rgba(255, 166, 67, .55); box-shadow: 0 10px 25px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.035); }
.boss-event-visual { position: relative; height: 154px; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #702414, #170a09 70%); }
.boss-event-banner { display: block; width: 100%; height: 100%; object-fit: cover; }
.boss-event-banner.placeholder { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 65%, rgba(255,112,36,.3), transparent 35%), repeating-linear-gradient(120deg, transparent 0 34px, rgba(255,255,255,.025) 35px 36px), linear-gradient(135deg, #41110e, #0b080b); }
.boss-event-banner.placeholder span { font-size: 84px; line-height: 1; color: rgba(255,183,69,.38); text-shadow: 0 0 28px rgba(255,91,31,.6); transform: rotate(45deg); }
.boss-event-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,5,8,.9), rgba(6,5,8,.15) 68%, rgba(6,5,8,.55)), linear-gradient(0deg, rgba(8,6,8,.9), transparent 58%); pointer-events: none; }
.boss-event-tag { position: absolute; left: 14px; top: 13px; padding: 3px 9px; border-radius: 3px; color: #fff5d0; background: linear-gradient(180deg, #e14e20, #86110c); border: 1px solid rgba(255,194,91,.55); font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.boss-event-title { position: absolute; left: 16px; bottom: 15px; display: flex; flex-direction: column; gap: 2px; max-width: 72%; text-shadow: 0 2px 4px #000; }
.boss-event-title small { font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; color: #ffbe58; letter-spacing: .7px; text-transform: uppercase; }
.boss-event-title strong { font-family: var(--font); font-size: 25px; font-weight: normal; line-height: 1.05; letter-spacing: .4px; color: #fff; }
.boss-event-time { position: absolute; right: 14px; bottom: 16px; padding: 4px 8px; border-radius: 4px; font-family: Arial, sans-serif; font-size: 11px; color: #ffe7ba; background: rgba(0,0,0,.68); border: 1px solid rgba(255,182,75,.3); }
.boss-event-content { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; padding: 12px 14px 14px; }
.boss-event-body { grid-column: 1 / -1; padding: 0; color: #c9c0bd; }
.boss-event-progress { display: flex; gap: 8px; min-width: 0; }
.boss-event-progress span { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 4px; white-space: nowrap; font-family: Arial, sans-serif; font-size: 11px; color: #bdb5b2; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.08); }
.boss-event-progress i { color: #ffb341; font-style: normal; }
.boss-event-progress b { color: #fff; }
.boss-event-reward { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); }
.boss-event-reward > span { display: block; margin-bottom: 7px; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; letter-spacing: 1px; color: #ffbd55; }
.boss-event-reward .of-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.boss-event-reward .of-tile { width: 56px; height: 54px; }
.boss-event-reward .of-tile img { max-width: 38px; max-height: 29px; }
.boss-event-reward .of-tile b { font-size: 10px; }
.boss-event-start { grid-column: 2; grid-row: 2; min-width: 190px; height: 42px; margin: 0; font-size: 15px; }
.boss-event-start:disabled { filter: grayscale(.55); opacity: .7; }
.boss-xp img { filter: drop-shadow(0 0 5px rgba(70,160,255,.6)); }
.boss-result { position: relative; width: 440px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; margin: 7px 0 2px; padding: 10px 11px 10px 50px; border-radius: 5px; overflow: hidden; background: linear-gradient(100deg, rgba(74,25,10,.9), rgba(18,10,10,.92)); border: 1px solid rgba(255,176,65,.55); box-shadow: inset 0 0 18px rgba(255,102,34,.08); }
.boss-result.lost { filter: saturate(.68); border-color: rgba(170,120,100,.4); }
.boss-result-mark { position: absolute; left: -10px; top: -8px; width: 58px; height: 58px; font-size: 54px; line-height: 58px; color: rgba(255,171,52,.5); text-shadow: 0 0 14px rgba(255,80,20,.45); transform: rotate(45deg); }
.boss-result-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.boss-result-copy small { font-family: Arial, sans-serif; font-size: 9px; font-weight: bold; letter-spacing: 1px; color: #ffb94b; }
.boss-result-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font); font-size: 17px; font-weight: normal; color: #fff; }
.boss-result-copy span { margin-top: 3px; font-family: Arial, sans-serif; font-size: 10px; color: #a99f9a; }
.boss-result-copy span b { color: #fff; }
.boss-result-loot { flex: none; display: flex; gap: 4px; max-width: 145px; overflow-x: auto; padding-bottom: 2px; }
.boss-result-loot .of-tile { width: 42px; height: 42px; flex: none; }
.boss-result-loot .of-tile img { max-width: 30px; max-height: 24px; }
.boss-result-loot .of-tile b { font-size: 9px; }
.old-price { margin-right: 6px; font-family: Arial, sans-serif; font-size: .8em; color: var(--text-mute); text-decoration-color: #ff5a6a; }
.rr-line.ev span { color: var(--gold-hi); }
.me-event { color: var(--gold-hi); }

.event-strip { top: 54px; max-width: 760px; height: 32px; }
.box-odds .odds-luck { flex-basis: 100%; text-align: center; color: #ffe08a; }

/* Ofertas do painel (aba OFERTAS da tela de caixas) */
.box-tab.offers { position: relative; }
.box-tab.offers i { position: absolute; right: -6px; top: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-style: normal; font-family: Arial, sans-serif;
  font-size: 11px; font-weight: bold; line-height: 18px; color: #fff; background: #d8122b; border: 2px solid #0a0607; }
.box-tab.offers.on { color: #1c1200; background: linear-gradient(180deg, #ffe08a, #d4a12a); }
.boxes-wrap.offers-tab .box-row { flex-wrap: wrap; align-content: flex-start; align-items: stretch; gap: 16px; max-height: 560px; overflow-y: auto; margin-top: 70px; padding: 4px 18px 14px; }
.offer-card { position: relative; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: 8px;
  background: linear-gradient(180deg, #1d1518, #0c0809); border: 1px solid rgba(212, 175, 55, .35); box-shadow: 0 8px 22px rgba(0, 0, 0, .6); }
.offer-card.hot { border-color: #ffd76a; box-shadow: 0 0 0 1px rgba(255, 215, 106, .25), 0 8px 26px rgba(0, 0, 0, .65), 0 0 22px rgba(255, 200, 64, .12); }
.of-flag { position: absolute; top: -9px; right: 12px; padding: 2px 8px; border-radius: 3px; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; letter-spacing: .8px; color: #1c1200; background: #ffd76a; }
.of-name { font-size: 18px; color: #fff; letter-spacing: .5px; line-height: 1.2; }
.of-time { font-family: Arial, sans-serif; font-size: 11px; color: #ff9aa6; }
.of-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.of-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 62px; height: 62px; border-radius: 6px;
  background: radial-gradient(circle at 50% 35%, #2c2226, #120d0f); border: 1px solid rgba(255, 255, 255, .08); }
.of-tile img { max-width: 44px; max-height: 34px; object-fit: contain; }
.of-tile .key-ico { width: 34px; height: 20px; }
.of-tile .kit-ico svg { width: 26px; height: 26px; }
.of-tile b { font-family: Arial, sans-serif; font-size: 11px; color: #fff; }
.of-tile.item { border-color: var(--rc, rgba(255, 255, 255, .15)); }
.of-tile.rar-C { --rc: var(--rar-C); } .of-tile.rar-R { --rc: var(--rar-R); } .of-tile.rar-E { --rc: var(--rar-E); } .of-tile.rar-L { --rc: var(--rar-L); } .of-tile.rar-M { --rc: var(--rar-M); }
.t-mini.big { width: 30px; height: 30px; font-size: 18px; line-height: 30px; }
.of-body { margin: 0; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.of-limits { min-height: 14px; font-family: Arial, sans-serif; font-size: 11px; color: var(--text-mute); }
.of-buy { margin-top: auto; height: 40px; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.of-confirm { text-align: left; margin: 0 0 12px; padding-left: 22px; font-family: Arial, sans-serif; font-size: 14px; color: var(--text-dim); }
.of-tiles.got { justify-content: center; margin-bottom: 14px; }
.boxes-wrap.offers-tab { align-items: flex-start; }

/* Atualização do jogo (js/update.js) */
.update-strip { position: absolute; right: 14px; bottom: 14px; z-index: 950; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px;
  background: rgba(12, 9, 10, .95); border: 1px solid rgba(212, 175, 55, .55); box-shadow: 0 8px 22px rgba(0, 0, 0, .6); font-family: Arial, sans-serif; font-size: 13px; color: var(--text); }
.update-strip .sm-btn { height: 32px; font-size: 14px; padding: 0 14px; min-width: 0; }
.update-strip .up-bar { position: relative; width: 140px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.update-strip .up-bar b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #c99a24, #ffd76a); }
.update-strip em { font-style: normal; color: var(--gold-hi); min-width: 34px; text-align: right; }

/* ================================================================ fase 3: patentes, clãs e chat (js/social.js) */
.nx-flag, .nx-rank { display: inline-block; flex: none; vertical-align: middle; }
.nx-flag { filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.rk-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 10px 2px 4px; border-radius: 4px; vertical-align: middle;
  background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.28); }
.rk-chip b { font-weight: normal; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: #e2b660; }
.rk-chip.rk-oficial b { color: #dfe6ee; }
.rk-chip.rk-general b { color: var(--gold-hi); }
.rk-chip i { font-style: normal; font-family: Arial, sans-serif; font-weight: bold; font-size: 13px; color: #fff; }
.rk-chip.off b { color: var(--text-dim); }
.clan-tag { font-style: normal; color: var(--gold-hi); margin-right: 5px; letter-spacing: .5px; }

/* ---------------- Arena Online: 3 colunas (piloto | luta e ranking | chat) */
.online-panel { width: min(1180px, calc(var(--stage-w, 1200px) * 96 / 100)); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.online-panel .op-dyn { padding: 0 20px 16px 22px; min-width: 0; }
.online-panel .op-side { display: flex; flex-direction: column; padding: 16px 16px 16px 0; min-width: 0; }
.online-panel .op-side h3 { margin: 6px 0 8px; font-weight: normal; font-size: 15px; color: var(--gold-hi); letter-spacing: 2px; }
.op-head { gap: 12px; }
.op-season { margin-left: auto; padding: 4px 10px; border-radius: 3px; border: 1px solid rgba(212,175,55,.3); font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 1px; color: var(--gold-hi); }
.op-me { width: 230px; }
.op-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.op-clan { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; min-width: 150px; height: 38px; padding: 0 12px; }
.op-rtabs { display: flex; gap: 4px; margin-bottom: 6px; border-bottom: 1px solid rgba(212,175,55,.2); }
.op-rtabs button { padding: 6px 12px; margin-bottom: -1px; background: none; border: 1px solid transparent; border-radius: 4px 4px 0 0; font-size: 13px; letter-spacing: 1px; color: var(--text-dim); }
.op-rtabs button:hover { color: #fff; }
.op-rtabs button.on { color: var(--gold-hi); background: rgba(212,175,55,.07); border-color: rgba(212,175,55,.3) rgba(212,175,55,.3) #07060a; }
.op-rank ol { max-height: 228px; }
.op-rank li { gap: 8px; }
.op-rank li .op-pname { display: flex; align-items: center; }

/* ---------------- caixa de chat */
.chat-box { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; background: #07060a; border: 1px solid rgba(212,175,55,.22); overflow: hidden; }
.op-side .chat-box { min-height: 470px; }
.cb-tabs { display: flex; border-bottom: 1px solid rgba(212,175,55,.2); }
.cb-tabs button { flex: 1; padding: 8px 0; background: none; border: 0; font-size: 13px; letter-spacing: 1.5px; color: var(--text-dim); }
.cb-tabs button:hover { color: #fff; }
.cb-tabs button.on { color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold); background: rgba(212,175,55,.06); }
.cb-log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; user-select: text; -webkit-user-select: text; }
.cb-msg { position: relative; font-family: Arial, 'Segoe UI Emoji', 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 13px; line-height: 1.4; color: var(--text); word-break: break-word; padding: 2px 22px 2px 0; }
.cb-msg .cb-time { margin-right: 6px; font-size: 11px; color: var(--text-mute); }
.cb-msg .cb-who { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.cb-msg .cb-who b { color: #9fd0ff; }
.cb-msg.me .cb-who b { color: var(--gold-hi); }
.cb-msg .cb-text { font-family: Arial, 'Segoe UI Emoji', 'Microsoft YaHei', 'Yu Gothic UI', Meiryo, sans-serif; }
.cb-rep { position: absolute; right: 0; top: 1px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--text-mute); font-size: 12px; opacity: 0; }
.cb-msg:hover .cb-rep { opacity: 1; }
.cb-rep:hover { color: #ff8a8a; background: rgba(255,80,80,.12); }
.cb-empty { margin: auto; padding: 20px 10px; text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: var(--text-mute); }
.cb-note { display: none; padding: 6px 10px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); border-top: 1px solid rgba(255,255,255,.05); }
.cb-note.show { display: block; }
.cb-note.err { display: block; color: #ff9a9a; }
.cb-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid rgba(212,175,55,.18); background: rgba(255,255,255,.02); }
.cb-input input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 4px; border: 1px solid rgba(212,175,55,.3); background: #000; color: #fff;
  font-family: Arial, 'Segoe UI Emoji', sans-serif; font-size: 13px; outline: none; }
.cb-input input:focus { border-color: var(--gold-hi); }
.cb-input input:disabled { opacity: .5; }
.cb-emo { width: 34px; height: 34px; padding: 0; border-radius: 4px; border: 1px solid rgba(212,175,55,.3); background: #0d0b10; font-size: 17px; font-family: 'Segoe UI Emoji', sans-serif; }
.cb-emo:hover { border-color: var(--gold-hi); }
.cb-send { height: 34px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--gold); background: linear-gradient(180deg, #2a2208, #120e03); color: var(--gold-hi); font-size: 12px; letter-spacing: 1px; }
.cb-send:hover { background: linear-gradient(180deg, #3a2f0a, #1a1404); }
.emoji-pick { position: absolute; left: 8px; right: 8px; bottom: 52px; z-index: 5; padding: 8px; border-radius: 8px; background: #0d0b10; border: 1px solid rgba(212,175,55,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.8); }
.ep-cats { display: flex; gap: 4px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 6px; }
.ep-cats button, .ep-grid button { border: 0; background: none; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; border-radius: 4px; }
.ep-cats button { width: 36px; height: 30px; font-size: 18px; opacity: .55; }
.ep-cats button.on { opacity: 1; background: rgba(212,175,55,.14); }
.ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.ep-grid button { height: 32px; font-size: 20px; }
.ep-grid button:hover { background: rgba(255,255,255,.08); transform: scale(1.12); }

/* ---------------- chat da luta online */
#battleChat { position: absolute; left: 12px; bottom: 132px; z-index: 30; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
.bc-btn { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(212,175,55,.5); background: rgba(8,6,10,.85);
  color: var(--gold-hi); box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.bc-btn:hover { border-color: var(--gold-hi); }
.bc-dot { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--red-hi); box-shadow: 0 0 8px var(--red); display: none; }
.bc-dot.on { display: block; }
.bc-panel { width: 360px; padding: 8px; border-radius: 8px; background: rgba(6,5,8,.92); border: 1px solid rgba(212,175,55,.35); box-shadow: 0 8px 26px rgba(0,0,0,.7); }
.bc-log { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.bc-log .cb-empty { padding: 8px; }
.bc-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.bc-quick button { height: 28px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(212,175,55,.25); background: #0d0b10; color: var(--text); font-family: Arial, 'Segoe UI Emoji', sans-serif; font-size: 14px; }
.bc-quick button:hover { border-color: var(--gold-hi); color: #fff; }
/* (v4) frases prontas em duas colunas, com rolagem */
.bc-phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-height: 128px; overflow-y: auto; margin-bottom: 6px; padding-right: 2px; }
.bc-phrases button { min-height: 26px; padding: 3px 7px; border-radius: 4px; border: 1px solid rgba(212,175,55,.2); background: #0d0b10; color: #e8dfd2; font: 12px Arial, sans-serif; text-align: left; cursor: pointer; }
.bc-phrases button:hover { border-color: var(--gold-hi); color: #fff; background: #1a1408; }
.bc-phrases::-webkit-scrollbar { width: 6px; }
.bc-phrases::-webkit-scrollbar-thumb { background: rgba(212,175,55,.5); border-radius: 3px; }
.bc-row { display: flex; gap: 6px; }
.bc-row input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 4px; border: 1px solid rgba(212,175,55,.3); background: #000; color: #fff; font-family: Arial, 'Segoe UI Emoji', sans-serif; font-size: 13px; outline: none; }
.bc-row input:focus { border-color: var(--gold-hi); }
.bc-send { width: 38px; height: 32px; border-radius: 4px; border: 1px solid var(--gold); background: #1a1404; color: var(--gold-hi); }
.bc-err { min-height: 0; font-family: Arial, sans-serif; font-size: 12px; color: #ff9a9a; }
.bc-err:not(:empty) { margin-top: 5px; }
.bc-bubble { position: absolute; top: 112px; z-index: 31; max-width: 300px; padding: 8px 12px; border-radius: 8px; background: rgba(6,5,8,.9); border: 1px solid rgba(212,175,55,.45);
  font-family: Arial, 'Segoe UI Emoji', sans-serif; font-size: 14px; color: #fff; word-break: break-word; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.bc-bubble b { display: block; font-size: 11px; letter-spacing: .5px; color: var(--gold-hi); margin-bottom: 2px; }
.bc-bubble.left { left: 22%; }
.bc-bubble.right { right: 22%; border-color: rgba(255,90,90,.5); }
.bc-bubble.right b { color: #ff9a9a; }
.bc-bubble.show { opacity: 1; transform: none; }

/* ---------------- editor de bandeira */
.flag-ed { display: flex; gap: 18px; }
.fe-left { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; }
.fe-preview { padding: 12px; border-radius: 8px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), transparent 70%), #07060a; border: 1px solid rgba(212,175,55,.22); }
.fe-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fe-sec h4 { margin: 0 0 6px; font-weight: normal; font-size: 13px; letter-spacing: 1.5px; color: var(--gold-hi); }
.fe-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.fe-grid button { padding: 3px; border-radius: 5px; border: 1px solid rgba(255,255,255,.08); background: #0b0a0d; line-height: 0; }
.fe-grid button:hover { border-color: rgba(212,175,55,.6); }
.fe-grid button.on { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 12px rgba(255,200,64,.4); }
.fe-colors { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.fe-colors span { width: 70px; flex: none; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.fe-colors button { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.18); background: var(--sw); }
.fe-colors button:hover { transform: scale(1.12); }
.fe-colors button.on { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold-hi); }

/* ---------------- tela do clã */
.clan-panel { width: min(1020px, calc(var(--stage-w, 1200px) * 96 / 100)); max-height: calc(100% - 16px); overflow-y: auto; padding: 0 24px 16px; }
.clan-panel::-webkit-scrollbar { width: 8px; }
.clan-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }
.clan-panel .btns.cp-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cp-foot .sp { flex: 1; }
.cp-foot .sm-btn { min-width: 0; padding: 0 16px; }
.cp-intro { margin: 8px 0 10px; font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); }
.cp-search { display: flex; gap: 8px; margin-bottom: 10px; }
.cp-search input { flex: 1; }
.cp-search input, .cp-form input:not([type=checkbox]) { height: 36px; padding: 0 12px; border-radius: 4px; border: 1px solid rgba(212,175,55,.3); background: #000; color: #fff; font-family: Arial, sans-serif; font-size: 14px; outline: none; }
.cp-search input:focus, .cp-form input:focus { border-color: var(--gold-hi); }
.cl-list, .cm-list { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.cl-row { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 6px; background: #0b0a0d; border: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.cl-row:hover { border-color: rgba(212,175,55,.45); background: #100e12; }
.cl-name { flex: 1; min-width: 0; }
.cl-name b { font-weight: normal; font-size: 16px; color: #fff; }
.cl-name small, .cl-stat small, .cm-name small { display: block; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-stat { width: 96px; flex: none; text-align: center; }
.cl-stat b { font-weight: normal; font-size: 14px; color: var(--text); }
.cl-act { width: 160px; flex: none; text-align: right; }
.cl-act .sm-btn, .cm-acts .sm-btn { min-width: 0; height: 30px; padding: 0 12px; font-size: 12px; }
.cp-head { display: flex; align-items: flex-start; gap: 20px; margin: 12px 0 12px; padding: 14px; border-radius: 8px; background: linear-gradient(180deg, rgba(212,175,55,.06), transparent), #07060a; border: 1px solid rgba(212,175,55,.22); }
.cp-flag { padding: 4px; }
.cp-info { flex: 1; min-width: 0; }
.cp-info h2 { margin: 0; font-weight: normal; font-size: 26px; color: #fff; letter-spacing: 1px; }
.cp-info h2 .clan-tag { font-size: 20px; }
.cp-motto { margin: 4px 0 0; font-family: Georgia, serif; font-style: italic; font-size: 15px; color: var(--text-dim); }
.cp-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.cp-stats span { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); }
.cp-stats b { display: block; font-family: var(--font); font-weight: normal; font-size: 17px; color: var(--gold-hi); }
.cp-leader { margin-top: 10px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); }
.cp-leader b { color: var(--text); }
.cm-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px; background: #0b0a0d; border: 1px solid rgba(255,255,255,.05); }
.cm-row.you { border-color: rgba(212,175,55,.35); background: rgba(255,200,64,.05); }
.cm-on { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #3a3a3a; }
.cm-on.on { background: #3cdc6e; box-shadow: 0 0 6px #3cdc6e; }
.cm-name { flex: 1; min-width: 0; }
.cm-name b { font-weight: normal; font-size: 15px; color: #fff; }
.cm-role { padding: 2px 8px; border-radius: 3px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); border: 1px solid rgba(255,255,255,.12); }
.cm-role.r-lider { color: var(--gold-hi); border-color: rgba(255,215,106,.5); }
.cm-role.r-oficial { color: #cfe0f0; border-color: rgba(190,210,230,.45); }
.cm-role.big { padding: 4px 12px; font-size: 13px; }
.cm-acts { display: flex; gap: 6px; flex: none; }
.cm-list.with-acts .cm-acts { width: 380px; justify-content: flex-end; }
.cp-edit { padding-bottom: 4px; }
.cp-body { min-height: 200px; }
.cp-chat { height: 360px; display: flex; }
.cp-edit, .cp-create { display: flex; flex-direction: column; gap: 14px; }
.cp-create { margin-top: 12px; }
.cp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: end; }
.cp-form label { display: flex; flex-direction: column; gap: 4px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.cp-form label.au-check { flex-direction: row; align-items: center; gap: 8px; }
.cp-form .au-err { grid-column: 1 / -1; margin: 0; }
.cp-edit .cp-form .sm-btn { justify-self: start; min-width: 140px; }
.season-end { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 4px; font-family: Arial, sans-serif; color: var(--text); }
.season-end p { margin: 0; }
.season-end .se-prize { color: var(--gold-hi); font-weight: bold; }
.season-end .se-next { font-size: 12px; color: var(--text-dim); }
.rank-note { display: flex; align-items: center; gap: 12px; }
.cl-list::-webkit-scrollbar, .cm-list::-webkit-scrollbar, .cb-log::-webkit-scrollbar, .bc-log::-webkit-scrollbar { width: 8px; }
.cl-list::-webkit-scrollbar-track, .cm-list::-webkit-scrollbar-track, .cb-log::-webkit-scrollbar-track, .bc-log::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 4px; }
.cl-list::-webkit-scrollbar-thumb, .cm-list::-webkit-scrollbar-thumb, .cb-log::-webkit-scrollbar-thumb, .bc-log::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }

/* ================= Suporte (js/support.js): tickets, respostas da equipe e denúncias ================= */
.tb-support { position: relative; height: 30px; padding: 0 10px; border: 1px solid rgba(212,175,55,.35); border-radius: 6px;
  background: linear-gradient(180deg, #2a2118, #17110c); color: #ffd76a; font: 700 11px "Russo One", sans-serif; letter-spacing: .06em; cursor: pointer; }
.tb-support:hover { border-color: #ffd76a; }
.sup-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #e3122b; color: #fff; font: 700 10px/16px Arial, sans-serif; text-align: center; }
.support-panel { width: 520px; max-width: calc(var(--stage-w, 1200px) * 92 / 100); }
.support-panel.wide { width: 640px; }
.support-panel .btns.col, .btns.col { flex-direction: column; align-items: stretch; gap: 6px; }
.sup-hint { color: #a89a88; font: 12px Arial, sans-serif; margin: 2px 0 10px; }
.sup-label { display: block; color: #ffd76a; font: 700 11px "Russo One", sans-serif; letter-spacing: .05em; margin: 10px 0 4px; }
.support-panel input, .support-panel select, .support-panel textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15); background: #0d0a0b; color: #f2e8d5; font: 13px Arial, sans-serif; }
.support-panel textarea { resize: vertical; }
.support-panel .wide { width: 100%; }
.support-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; margin-bottom: 10px; }
.support-row { padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.support-row:hover { border-color: rgba(212,175,55,.5); }
.support-row header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.support-row b { color: #f2e8d5; font: 700 13px Arial, sans-serif; }
.support-row small { color: #a89a88; font: 11px Arial, sans-serif; display: block; margin-top: 2px; }
.sup-empty { color: #a89a88; font: 12px Arial, sans-serif; text-align: center; padding: 14px 0; }
.sup-badge-st { font: 700 9px "Russo One", sans-serif; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.sup-badge-st.aberto { background: rgba(255,183,0,.15); color: #ffb700; }
.sup-badge-st.resp { background: rgba(64,200,90,.15); color: #58d878; }
.sup-badge-st.fechado { background: rgba(255,255,255,.08); color: #a89a88; }
.support-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding: 2px; margin-bottom: 10px; }
.support-msg { padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.support-msg.staff { background: rgba(212,175,55,.08); border-color: rgba(212,175,55,.35); }
.support-msg header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.support-msg b { font: 700 12px Arial, sans-serif; color: #ffd76a; }
.support-msg small { color: #a89a88; font: 10px Arial, sans-serif; }
.support-msg p { margin: 0; color: #f2e8d5; font: 13px/1.45 Arial, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ================= Pacotes por PIX e cupons (js/money.js + Loja) ================= */
.pack-tile .pack-price { color: #7fe08f; font-weight: 700; }
.pack-tile.hl { border-color: rgba(255, 183, 0, .55); }
.pack-tile .pack-tag { background: #ffb700; color: #1c1300; font-weight: 700; }
.pix-panel { width: 560px; max-width: calc(var(--stage-w, 1200px) * 94 / 100); }
.pix-steps { color: #a89a88; font: 12px/1.6 Arial, sans-serif; margin-bottom: 8px; }
.pay-methods .sup-hint { margin: -2px 0 12px; text-align: center; }   /* (v3.24) escolha PIX / cartão */
.pix-panel textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; letter-spacing: .02em; color: #ffd76a; cursor: text; }

/* ================= Enquetes (js/polls.js) ================= */
.poll-panel { width: 480px; max-width: calc(var(--stage-w, 1200px) * 92 / 100); }
.poll-q { color: #f2e8d5; font: 700 15px Arial, sans-serif; margin: 4px 0 12px; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-opt { text-align: left; justify-content: flex-start; }
.poll-result { display: flex; align-items: center; gap: 8px; font: 12px Arial, sans-serif; color: #f2e8d5; }
.poll-result.mine span:first-child { color: #ffd76a; }
.poll-result-bar { flex: 1; height: 10px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.poll-result-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a14, #ffd76a); border-radius: 4px; }
.poll-result span:last-child { min-width: 74px; text-align: right; color: #a89a88; }
.poll-note { color: #a89a88; font: 11px Arial, sans-serif; margin: 10px 0 2px; text-align: center; }
.poll-inline { border-top: 1px solid rgba(212,175,55,.25); margin-top: 12px; padding-top: 10px; }
.poll-inline h3 { color: #ffd76a; font: 700 12px "Russo One", sans-serif; letter-spacing: .08em; margin: 0 0 6px; }
.poll-inline h3 small { color: #a89a88; font: 10px Arial, sans-serif; letter-spacing: 0; }

/* ================================================================ v3.20: loja nova (js/store.js) */
.map-store-toggle { position: absolute; right: 290px; top: 10px; height: 36px; padding: 0 18px; font-size: 16px; color: #1c1300; border-radius: 6px; cursor: pointer; z-index: 5;
  font-family: var(--font); letter-spacing: 1px; background: linear-gradient(180deg, #ffe08a, #d4a42a 55%, #8a6a14); border: 1px solid #fff0b8; box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 14px rgba(255,200,64,.35); }
.map-store-toggle:hover { filter: brightness(1.08); }
.store-panel { width: min(1180px, calc(var(--stage-w, 1200px) * 96 / 100)); padding: 0; overflow: hidden; }
.st-head { display: flex; align-items: flex-end; gap: 6px; padding: 12px 14px 0; border-bottom: 2px solid rgba(212,175,55,.45); background: linear-gradient(180deg, #120d10, #0a0709); }
.st-tabs { flex: 1; display: flex; gap: 4px; overflow-x: auto; }
.st-tab { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 16px; border: 1px solid rgba(212,175,55,.25); border-bottom: 0; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #1c1518, #0d0a0c); color: var(--text-dim); font-size: 14px; letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
.st-tab img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.st-tab svg { width: 30px; height: 30px; fill: var(--gold); }
.st-tab .paint-ico { width: 30px; height: 30px; }
.st-tab:hover { color: #fff; }
.st-tab.on { color: var(--gold-hi); background: linear-gradient(180deg, #3a2a10, #1a1206); border-color: var(--gold); box-shadow: inset 0 2px 0 rgba(255,255,255,.12); }
.st-close { width: 46px; height: 46px; margin: 0 0 6px 8px; border-radius: 6px; border: 1px solid rgba(255,90,90,.5); background: linear-gradient(180deg, #5a1218, #2a070a);
  color: #fff; font-size: 22px; cursor: pointer; }
.st-close:hover { background: linear-gradient(180deg, #7a1820, #3a0a0e); }
.st-body { padding: 16px; min-height: 420px; background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.08), transparent 60%), #08070a; }
.st-row { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; scroll-snap-type: x proximity; }
.st-row::-webkit-scrollbar { height: 8px; }
.st-row::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ffd76a, #8a6a14); border-radius: 4px; }
.st-card { position: relative; flex: none; width: 214px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 14px; border-radius: 10px; overflow: hidden;
  scroll-snap-align: start; background: radial-gradient(ellipse at 50% 30%, rgba(80,120,200,.18), transparent 65%), linear-gradient(180deg, #161a26, #0b0d14);
  border: 1px solid rgba(160,180,220,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.5); }
.st-card:hover { border-color: rgba(255,215,106,.55); }
.st-art { position: relative; width: 190px; height: 150px; display: grid; place-items: center; }
.st-art img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.st-card.mech .st-art { height: 170px; }
.st-amount { font-size: 26px; color: #ffb43a; text-shadow: 0 2px 0 #000; text-align: center; line-height: 1.1; min-height: 30px; }
.st-card.mech .st-amount { font-size: 19px; color: #fff; }
.st-sub { min-height: 18px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); text-align: center; }
.st-note { color: #ffa31a; font-family: var(--font); font-weight: normal; font-size: 13px; }
.st-buy { width: 100%; height: 44px; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.st-buy:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.st-cur { width: 26px; height: 26px; object-fit: contain; }
.st-ribbon { position: absolute; top: 18px; left: -34px; width: 150px; padding: 4px 0; transform: rotate(-38deg); text-align: center; font-size: 11px; letter-spacing: .5px; color: #fff; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.st-ribbon.popular { background: linear-gradient(90deg, #7a1fc2, #b04dff); }
.st-ribbon.value { background: linear-gradient(90deg, #1f5fc2, #3f8cff); }
.st-pass { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 3px 10px; border-radius: 4px; background: rgba(0,0,0,.75); border: 1px solid var(--gold);
  color: var(--gold-hi); font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.st-days { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-size: 40px; color: #fff4c8; text-shadow: 0 3px 0 #3a0508, 0 0 12px rgba(0,0,0,.6); }
.st-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(176,77,255,.5);
  background: linear-gradient(90deg, rgba(120,40,190,.3), rgba(20,10,30,.6)); font-family: Arial, sans-serif; font-size: 14px; color: #f0e4ff; }
.st-banner img { width: 34px; height: 34px; }
.st-banner span { flex: 1; }
.st-banner .sm-btn { min-width: 0; height: 36px; padding: 0 16px; font-size: 14px; }
.st-banner.warn { border-color: rgba(255,120,80,.5); background: rgba(80,20,10,.4); color: #ffcfb8; }
.st-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); }
.st-foot .sm-btn { min-width: 0; height: 34px; padding: 0 14px; font-size: 13px; }
.st-empty { margin: 80px auto; color: var(--text-mute); font-family: Arial, sans-serif; }
.st-wait { padding: 140px 0; display: flex; justify-content: center; }
.st-wait .op-bar { width: 40%; }
.st-premium-info { flex: none; width: 250px; padding: 16px; border-radius: 10px; border: 2px solid var(--gold); background: linear-gradient(180deg, #1c1608, #0c0a05); }
.st-premium-info h3 { margin: 0 0 10px; font-weight: normal; font-size: 26px; line-height: 1.05; color: #ffb43a; text-align: center; text-shadow: 0 2px 0 #000; }
.st-premium-info ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: Arial, sans-serif; font-size: 14px; color: var(--text); }
.st-premium-info li b { color: #7dff8a; font-family: var(--font); font-weight: normal; margin-right: 4px; }
.st-premium-info p { margin: 0; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.st-premium-info p.on { color: #7dff8a; font-weight: bold; }

/* ================================================================ v3.20: saguão da Arena Online (js/online.js) */
.online-panel.ol-lobby { display: flex; flex-direction: column; width: min(1180px, calc(var(--stage-w, 1200px) * 96 / 100)); padding: 0; overflow: hidden; }
.ol-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 22px; border-bottom: 2px solid rgba(212,175,55,.45); background: linear-gradient(180deg, #120d10, #0a0709); }
.ol-top .panel-title { margin: 0 auto 0 0; }
.ol-top .st-close { width: 40px; height: 40px; margin: 0 0 0 4px; }
.ol-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35);
  font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 1px; color: var(--text); }
.ol-pill.gold { color: var(--gold-hi); border-color: rgba(212,175,55,.35); }
.ol-pill b { color: #fff; }
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3cdc6e; box-shadow: 0 0 6px rgba(60,220,110,.7); }
.ol-body { display: grid; grid-template-columns: 210px minmax(0, 1fr) 330px; gap: 16px; padding: 16px 18px;
  background: radial-gradient(ellipse at 50% 20%, rgba(212,175,55,.07), transparent 60%), #08070a; }
.ol-nav { display: flex; flex-direction: column; gap: 8px; }
.ol-nav button { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(212,175,55,.25);
  background: linear-gradient(180deg, #1c1518, #0d0a0c); color: var(--text); font-family: var(--font); font-size: 14px; letter-spacing: 1px; text-align: left; cursor: pointer; }
.ol-nav button:hover { border-color: var(--gold); color: #fff; background: linear-gradient(180deg, #2a1f14, #120c08); }
.ol-nav svg { flex: none; width: 26px; height: 26px; fill: var(--gold); }
.ol-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 6px rgba(255,215,106,.7); }
.ol-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(ellipse at 50% 85%, rgba(120,140,180,.14), transparent 60%), linear-gradient(180deg, #0f1118, #08090d); }
.ol-mech { width: 430px; max-width: 100%; height: auto; }
.ol-name { display: flex; align-items: baseline; gap: 8px; font-size: 22px; color: #fff; letter-spacing: 1px; }
.ol-name small { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); letter-spacing: 0; }
.ol-medals { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 3px 12px; border-radius: 3px; background: rgba(0,0,0,.4); border: 1px solid rgba(212,175,55,.3);
  font-size: 16px; color: var(--gold-hi); }
.ol-medals b { font-weight: normal; }
.medal-ico { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.medal-ico.big { width: 64px; height: 64px; }
.ol-fight { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; border: 1px solid rgba(212,175,55,.3); background: linear-gradient(180deg, #15110a, #0a0806); }
.ol-mode { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 26px; color: var(--gold-hi); letter-spacing: 3px; }
.ol-mode b { font-weight: normal; }
.ol-mode svg { width: 26px; height: 26px; fill: var(--gold); }
.ol-prev { padding: 10px 12px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); }
.ol-prev h4 { margin: 0 0 6px; font-weight: normal; font-size: 13px; color: var(--text-dim); letter-spacing: 2px; text-align: center; }
.ol-rw { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; color: #fff; }
.ol-rw b { width: 72px; font-family: var(--font); font-weight: normal; font-size: 13px; letter-spacing: 1px; }
.ol-rw.w b { color: #7dff8a; }
.ol-rw.l b { color: #ff9a8a; }
.ol-rw span { display: inline-flex; align-items: center; gap: 4px; min-width: 64px; }
.ol-rw img { width: 18px; height: 18px; object-fit: contain; }
.ol-prem { margin-top: 6px; font-family: Arial, sans-serif; font-size: 11px; color: #ffcf6a; text-align: center; }
.ol-find { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 86px; }
.ol-find .op-bar { width: 90%; }
.ol-go { width: 100%; height: 72px; border-radius: 8px; cursor: pointer; font-family: var(--font); font-size: 34px; letter-spacing: 4px; color: #0e1a06; border: 1px solid #d8ffb0;
  background: linear-gradient(180deg, #b6f56a, #5fae22 55%, #2f6a0c); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.ol-go:hover { filter: brightness(1.07); }
.ol-go:active { transform: translateY(1px); }
.ol-fight .op-note { margin: 0; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-mute); text-align: center; }
.ol-fight .op-err { margin: 0; font-family: Arial, sans-serif; font-size: 13px; color: #ff9a9a; text-align: center; }
.ol-queue { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); text-align: center; }
.ol-banner { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-top: 1px solid rgba(212,175,55,.35); background: linear-gradient(90deg, rgba(60,40,10,.55), rgba(10,8,6,.9)); }
.ol-season { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ol-season > div, .ol-ev { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ol-season b, .ol-ev b { font-weight: normal; font-size: 14px; color: var(--gold-hi); letter-spacing: 1px; }
.ol-season span, .ol-ev span { font-family: Arial, sans-serif; font-size: 13px; color: var(--text); }
.ol-ev { padding-right: 16px; border-right: 1px solid rgba(255,255,255,.12); }
.ol-ev small { font-family: Arial, sans-serif; font-size: 11px; color: var(--text-dim); }
.ol-count { display: flex; flex-direction: column; align-items: flex-end; }
.ol-count small { font-family: Arial, sans-serif; font-size: 11px; color: var(--text-dim); }
.ol-count b { font-weight: normal; font-size: 20px; color: #fff; }
.ol-banner .sm-btn { min-width: 0; height: 38px; padding: 0 16px; font-size: 14px; }
.rr-line.prem span { color: #ffcf6a; }

/* ================================================================ v3.20: telas da Arena (js/arena_hub.js) */
/* (v3.26) as janelas ficam DENTRO do palco do jogo (1200×720, ampliado): a altura máxima é a do palco, não a do monitor
   (com "vh" a janela de Patentes passava do palco, cortava embaixo e o botão de voltar sumia em cima) */
.ah-panel { width: min(1100px, calc(var(--stage-w, 1200px) * 96 / 100)); max-height: calc(100% - 16px); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ah-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 2px solid rgba(212,175,55,.45); background: linear-gradient(180deg, #120d10, #0a0709); }
.ah-back { flex: none; width: 44px; height: 44px; border-radius: 6px; border: 1px solid rgba(212,175,55,.4); background: linear-gradient(180deg, #2a1f14, #120c08);
  color: var(--gold-hi); font-size: 30px; line-height: 1; cursor: pointer; }
.ah-back:hover { border-color: var(--gold); color: #fff; }
/* (v3.26) botão de fechar claro no canto da janela */
.ah-x { flex: none; margin-left: auto; width: 40px; height: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #d8cfc6; font-size: 18px; cursor: pointer; }
.ah-x:hover { border-color: #e3122b; background: rgba(227,18,43,.18); color: #fff; }
.ah-title { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ah-title b { font-weight: normal; font-size: 20px; color: var(--gold-hi); letter-spacing: 2px; }
.ah-title span { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.ah-tabs { display: flex; gap: 4px; }
.ah-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid rgba(212,175,55,.25);
  background: linear-gradient(180deg, #1c1518, #0d0a0c); color: var(--text-dim); font-family: var(--font); font-size: 14px; letter-spacing: 1px; cursor: pointer; }
.ah-tabs button:hover { color: #fff; }
.ah-tabs button.on { color: var(--gold-hi); border-color: var(--gold); background: linear-gradient(180deg, #3a2a10, #1a1206); }
.ah-clock { font-style: normal; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,.5); color: #fff; letter-spacing: 0; }
/* chat */
.ah-who { display: flex; align-items: center; gap: 8px; padding: 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ah-who > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ah-who b { font-weight: normal; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-who small { font-family: Arial, sans-serif; font-size: 11px; color: var(--text-dim); }
.ah-status { display:inline-flex;align-items:center;gap:4px;margin-top:2px;color:#64dc86;font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.4px; }.ah-status i{font-style:normal}.ah-status.st-queue{color:#ffd44e}.ah-status.st-battle{color:#ff6574}.ah-status.st-away{color:#81909b}
.ah-who { cursor:pointer; }.ah-who:hover{background:rgba(92,203,255,.07)}
.ah-who.you b { color: var(--gold-hi); }
.ah-duel { flex: none; display: grid; place-items: center; width: 34px; height: 30px; border-radius: 4px; border: 1px solid rgba(212,175,55,.4); background: linear-gradient(180deg, #2a1f14, #120c08); cursor: pointer; }
.ah-duel svg { width: 16px; height: 16px; fill: var(--gold-hi); }
.ah-duel:hover { border-color: var(--gold); }
.ah-busy { font-family: Arial, sans-serif; font-size: 11px; color: var(--text-mute); }
.ah-inspect { width:680px;max-height:650px;padding:0 18px 16px;overflow:auto; }
.ah-inspect-head { display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid rgba(212,175,55,.25); }.ah-inspect-head>div:last-child{display:flex;flex-direction:column;gap:2px}.ah-inspect-head h2{margin:0;color:#fff;font-size:25px;font-weight:normal}.ah-inspect-head>div>b{color:var(--gold-hi);font-size:12px;font-weight:normal;letter-spacing:.8px}.ah-inspect-head>div>span{display:flex;align-items:center;gap:6px;color:var(--text-dim);font:11px Arial,sans-serif}
.ah-inspect-body { display:grid;grid-template-columns:310px 1fr;gap:14px;margin-top:13px; }.ah-inspect-mech{height:250px;display:grid;place-items:center;border:1px solid rgba(106,204,242,.25);border-radius:8px;background:radial-gradient(ellipse at 50% 80%,rgba(35,123,158,.25),rgba(3,8,12,.9) 65%)}.ah-inspect-mech canvas{width:300px;height:235px;object-fit:contain}.ah-inspect-mech.frame-gold{border-color:#ffd76a;box-shadow:inset 0 0 22px rgba(255,196,49,.12)}.ah-inspect-mech.frame-clan{border-color:#c77dff;box-shadow:inset 0 0 22px rgba(173,67,255,.12)}
.ah-inspect-stats { display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start; }.ah-inspect-stats>span{min-height:46px;display:flex;flex-direction:column;justify-content:center;padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:rgba(255,255,255,.035);color:#8ea0ae;font:9px Arial,sans-serif;letter-spacing:.5px}.ah-inspect-stats b{color:#fff;font-size:14px;font-weight:bold}.ah-inspect-stats .ele b{color:#6ac9ff}.ah-inspect-stats .heat b{color:#ff9a60}
.ah-inspect-items { display:flex;gap:6px;margin:12px 0;overflow-x:auto;padding:3px 0 7px; }.ah-inspect-items span{flex:none;width:74px;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(255,255,255,.1);border-radius:5px;background:#0a0d12}.ah-inspect-items img{max-width:48px;max-height:42px;object-fit:contain}.ah-inspect-items b{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dce8ef;font:8px Arial,sans-serif}
.ah-style-panel { width:390px; }.ah-style-panel>p{color:var(--text-dim);font:13px Arial,sans-serif}.ah-style-panel>label{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:8px;margin:9px 0;color:#d6e2e8;font:12px Arial,sans-serif}.ah-style-panel select{height:36px;border:1px solid rgba(90,202,239,.32);border-radius:4px;background:#090e13;color:#fff;padding:0 8px}
@media (max-width:850px){.ah-inspect{width:calc(var(--stage-w, 1200px) * 92 / 100)}.ah-inspect-body{grid-template-columns:1fr}.ah-inspect-mech{height:210px}}
/* convite para duelo amistoso */
.ah-invite { width: 440px; }
.ah-inv-who { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.ah-inv-who div { display: flex; flex-direction: column; }
.ah-inv-who b { font-weight: normal; font-size: 20px; color: #fff; }
.ah-inv-who small { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.ah-inv-bar { width: 100%; margin: 10px 0 4px; }
.ah-inv-bar i { left: 0; width: 100%; background: var(--gold-hi); transform-origin: left; animation-name: ahDrain; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes ahDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Loja da Arena */
.as-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; padding: 16px; background: #08070a; }
.as-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.as-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 10px; border-radius: 8px; border: 1px solid rgba(160,180,220,.2);
  background: linear-gradient(180deg, #161a26, #0b0d14); }
.as-tile.combat { border-color: rgba(255,150,100,.25); }
.as-tile.full { border-color: rgba(212,175,55,.5); }
.as-ico { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 6px; background: rgba(0,0,0,.4); }
.as-ico img { width: 34px; height: 34px; object-fit: contain; }
.as-ico svg { width: 30px; height: 30px; fill: #d8e4f0; }
.as-ico svg.mini { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; fill: var(--gold-hi); }
.as-ico svg.phy { fill: #ffd35a; }
.as-ico svg.exp { fill: #ff8a3a; }
.as-ico svg.ele { fill: #6ab8ff; }
.as-ico svg.cold { fill: #8ae0ff; }
.as-ico svg.hp { fill: #7dff8a; }
.as-info { display: flex; flex-direction: column; min-width: 0; }
.as-info b { font-weight: normal; font-size: 22px; line-height: 1.1; color: #fff; }
.as-info small { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-lv { display: flex; gap: 3px; margin-top: 5px; }
.as-lv i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.as-lv i.on { background: var(--gold-hi); }
.as-buy { grid-column: 1 / -1; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 5px; border: 1px solid #c8f0a0;
  background: linear-gradient(180deg, #8ad24a, #3f7e16); color: #fff; font-family: var(--font); font-size: 16px; text-shadow: 0 1px 0 rgba(0,0,0,.5); cursor: pointer; }
.as-buy:hover { filter: brightness(1.08); }
.as-buy:disabled { cursor: default; border-color: rgba(212,175,55,.5); background: rgba(212,175,55,.12); color: var(--gold-hi); filter: none; }
.as-side { display: flex; flex-direction: column; gap: 12px; }
.as-wallet { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 8px; border: 1px solid rgba(212,175,55,.4); background: linear-gradient(180deg, #1c1608, #0c0a05); }
.as-wallet b { font-weight: normal; font-size: 30px; color: var(--gold-hi); }
.as-wallet small { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.as-side p { margin: 0; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.as-prem { color: #ffcf6a; }
.as-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: auto; font-size: 16px; color: var(--text); }
.as-pg { width: 40px; height: 36px; border-radius: 5px; border: 1px solid rgba(212,175,55,.4); background: linear-gradient(180deg, #2a1f14, #120c08); color: var(--gold-hi); cursor: pointer; }
.as-pg:disabled { opacity: .35; cursor: default; }
/* Patentes e prêmios */
.ah-pbody { flex: 1; min-height: 0; padding: 16px; overflow: auto; background: #08070a; }   /* (encolhe e rola por dentro) */
.ap-group + .ap-group { margin-top: 14px; }
.ap-group h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: normal; font-size: 15px; letter-spacing: 1px; color: #e2b660; }
.ap-group h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: .45; }
.ap-group.g-oficial h4 { color: #c3ccd6; }
.ap-group.g-comando h4 { color: #7fd0ec; }
.ap-group.g-general h4 { color: #ffd76a; }
.ap-group.g-elite h4 { color: #d8a8ff; }
.ap-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 9px; }
.ap-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #13151c, #0a0b0f); animation: apIn .35s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes apIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ap-col.g-oficial { border-color: rgba(120,170,255,.22); }
.ap-col.g-comando { border-color: rgba(95,182,214,.35); background: linear-gradient(180deg, #0e1c26, #070d12); }
.ap-col.g-general { border-color: rgba(212,175,55,.4); background: linear-gradient(180deg, #1c1608, #0c0a05); }
.ap-col.g-elite { border-color: rgba(201,139,255,.45); background: linear-gradient(180deg, #1f0f2e, #0c0612); }
.ap-col.g-elite .nx-rank { filter: drop-shadow(0 0 8px rgba(201,139,255,.45)); }
.ap-top { padding: 1px 6px; border-radius: 3px; background: rgba(255,215,106,.12); color: #ffd76a; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; }
.ap-prize .ap-box img { width: 34px; height: 27px; }
.ap-col.you { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(255,215,106,.25); }
.ap-col > b { font-weight: normal; font-size: 14px; color: #fff; text-align: center; }
.ap-col em { position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 3px; background: var(--gold-hi); color: #1c1300; font-style: normal; font-size: 10px; }
.ap-prize { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: #fff; }
.ap-prize span { display: inline-flex; align-items: center; gap: 4px; }
.ap-prize img { width: 18px; height: 18px; object-fit: contain; }
.ap-none { color: var(--text-mute); }
.ap-rules { max-width: 760px; margin: 0 auto; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); }
.ap-rules li { margin: 4px 0; }
/* Ranking */
.ah-only { display: inline-flex; align-items: center; gap: 6px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.ah-only input { accent-color: var(--gold); }
.ah-prizes-btn { min-width: 0; height: 38px; padding: 0 14px; font-size: 14px; }
.ah-table { flex: 1; min-height: 0; max-height: 520px; overflow-y: auto; background: #08070a; }
.ah-table table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 13px; color: var(--text); }
.ah-table th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; background: #15110a; color: var(--gold-hi); font-family: var(--font); font-weight: normal; font-size: 12px; letter-spacing: 1px; text-align: left; }
.ah-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.ah-table td.nm { font-weight: bold; color: #fff; }
.ah-table .num { text-align: right; }
.ah-table tr.you td { background: rgba(255,200,64,.09); }
.ah-table tr.you td.nm { color: var(--gold-hi); }
.ah-myrank { padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.08); font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); text-align: right; }
/* Replays */
.ah-rlist { max-height: 520px; overflow-y: auto; padding: 10px 14px; background: #08070a; }
.ah-rrow { display: flex; align-items: center; gap: 14px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ah-rrow > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ah-rrow b { font-weight: normal; font-size: 16px; color: #fff; }
.ah-rrow small { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.ah-rrow .sm-btn { min-width: 0; height: 36px; padding: 0 14px; font-size: 14px; }
.ah-res { width: 100px; padding: 4px 0; border-radius: 3px; text-align: center; font-size: 13px; letter-spacing: 1px; background: rgba(255,255,255,.08); color: var(--text-dim); }
.ah-res.w { background: rgba(60,220,110,.15); color: #7dff8a; }
.ah-res.l { background: rgba(255,80,80,.14); color: #ff9a8a; }
.ah-noreplay { padding: 80px 0; text-align: center; }
.ah-table::-webkit-scrollbar, .ah-rlist::-webkit-scrollbar, .ah-side::-webkit-scrollbar, .ah-pbody::-webkit-scrollbar { width: 8px; }
.ah-table::-webkit-scrollbar-thumb, .ah-rlist::-webkit-scrollbar-thumb, .ah-side::-webkit-scrollbar-thumb, .ah-pbody::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }

/* ================================================================ v3.20: menu OPÇÕES (js/ui.js) */
.opt-panel { width: 620px; }
.opt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 4px; }
.opt-tile { position: relative; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 8px;
  border: 1px solid rgba(212,175,55,.3); background: linear-gradient(180deg, #1c1518, #0d0a0c); color: var(--text); font-family: var(--font); font-size: 14px; letter-spacing: 1px; cursor: pointer; }
.opt-tile:hover { border-color: var(--gold); color: #fff; background: linear-gradient(180deg, #2a1f14, #120c08); }
.opt-tile svg { width: 40px; height: 40px; fill: var(--gold); }
.opt-badge { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #c8202e; color: #fff; font-style: normal;
  font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; line-height: 20px; }
.opt-links { margin-top: 14px; text-align: center; }
.opt-links small { display: block; margin-bottom: 8px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.opt-links div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.opt-links .sm-btn { min-width: 0; height: 34px; padding: 0 14px; font-size: 13px; }
.info-panel { width: 460px; text-align: center; }
.info-logo { width: 260px; max-width: 80%; margin: 4px auto 0; display: block; }
.info-ver { margin: 8px 0 14px; font-family: Arial, sans-serif; font-size: 13px; color: var(--text-dim); }
.info-btns { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.info-btns .sm-btn { min-width: 300px; }
.ah-rank .ah-table { min-height: 300px; }
.ah-rank .ah-table th:nth-child(1) { width: 110px; }
.ah-rank .ah-table th:nth-child(2) { width: 90px; }
.ah-rank .ah-table th:nth-child(3) { width: 44px; }
.ah-rank .ah-table th:nth-child(5) { width: 40px; }
/* (v3.33) ficha do piloto: o nome no ranking abre os mechs e os replays dele */
.ah-pilot-link { all: unset; cursor: pointer; font-weight: bold; color: inherit; border-bottom: 1px dashed rgba(255,215,106,.35); }
.ah-pilot-link:hover { color: var(--gold-hi); border-bottom-color: var(--gold-hi); }
.ah-pilot-link:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.ah-pilot .ah-head { gap: 14px; }
.pc-patent { flex: none; display: flex; }
.pc-mechs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 14px; max-height: 540px; overflow-y: auto; background: #08070a; }
.pc-mech { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; border: 1px solid rgba(212,175,55,.22); background: linear-gradient(180deg, #14100c, #0b090a); }
.pc-mech.active { border-color: rgba(255,215,106,.7); box-shadow: 0 0 0 1px rgba(255,215,106,.25) inset; }
.pc-mech canvas { width: 100%; height: auto; aspect-ratio: 260 / 230; background: radial-gradient(ellipse at 50% 85%, rgba(255,200,90,.10), transparent 60%); border-radius: 6px; }
.pc-empty { aspect-ratio: 260 / 230; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px dashed rgba(255,255,255,.12); color: var(--text-dim); font-family: Arial, sans-serif; font-size: 13px; }
.pc-mech > b { font-weight: normal; font-size: 16px; color: #fff; letter-spacing: 1px; }
.pc-mech > b em { font-style: normal; font-size: 11px; color: #1a1206; background: var(--gold-hi); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
.pc-stats { display: flex; flex-wrap: wrap; gap: 10px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text); }
.pc-stats span { display: inline-flex; align-items: center; gap: 4px; }
.pc-stats svg { width: 14px; height: 14px; }
.pc-parts { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-parts img { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.ah-rank .ah-table th:nth-child(6) { width: 180px; }

/* v3.21: sem contagem contra o computador — o relógio só mostra de quem é a vez */
.lcd.free .lcd-val { margin-top: -12px; }
.lcd.free .lcd-val svg { width: 34px; height: 34px; fill: currentColor; filter: drop-shadow(0 0 6px currentColor); }
.lcd.free .tr-fg { transition: stroke .3s; animation: lcdBreath 2.4s ease-in-out infinite; }
@keyframes lcdBreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ================================================================ v3.21: interface no estilo do Super Mechs, com a nossa cor
   Peças em assets/ui/kit (tools/make_ui_frames.py): moldura de aço com cantos chanfrados e rebites, coroa com lâmpada,
   fita de título, placas rebaixadas, abas trapezoidais, botões da lista e da barra lateral, carta e a caixa do LUTAR.
   Movimento: janela entra com mola, um brilho passa no aço de vez em quando, a lâmpada da coroa respira. */
.panel {
  position: relative;
  border: 8px solid transparent; border-radius: 0;
  border-image: url('assets/ui/kit/frame.png') 56 / 28px stretch;
  background: radial-gradient(ellipse at 50% -12%, rgba(227,18,43,.16), transparent 55%), linear-gradient(180deg, #0d0a0b 0%, #050404 100%);
  background-clip: padding-box;
  box-shadow: none; animation: none;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.72));
}
/* brilho que passa pelo aço da moldura (só na borda: máscara com a mesma peça) */
.panel::before {
  content: ''; position: absolute; inset: -8px; z-index: 6; pointer-events: none;
  -webkit-mask-box-image: url('assets/ui/kit/frame.png') 56 / 28px stretch;
  background: linear-gradient(115deg, transparent 40%, rgba(255,240,200,.55) 50%, transparent 60%) 160% 0 / 260% 100% no-repeat;
  animation: frameSheen 9s ease-in-out infinite; animation-delay: var(--sheen-delay, 1.2s);
}
@keyframes frameSheen { 0%, 78% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.clan-panel::before, .settings::before { display: none; }

/* janela abrindo: o fundo escurece e a janela entra com mola */
.modal-back { animation: mbIn .18s ease-out both; }
@keyframes mbIn { from { background-color: transparent; opacity: 0; } }
.modal-back > .panel { animation: pnIn .32s cubic-bezier(.2,1.25,.4,1) both; }
@keyframes pnIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }

/* coroa de aço no topo das janelas de diálogo (a lâmpada respira) */
.dialog { padding-top: 16px; }
.dialog::after {
  content: ''; position: absolute; left: 50%; top: -23px; width: 220px; height: 32px; margin-left: -110px; z-index: 7; pointer-events: none;
  background: url('assets/ui/kit/crest.png') center / contain no-repeat;
  animation: crestLamp 2.8s ease-in-out infinite;
}
@keyframes crestLamp { 0%, 100% { filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)) drop-shadow(0 0 0 rgba(255,40,40,0)); }
  50% { filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(255,50,50,.65)); } }

/* fita vermelha de título (pontas dobradas), com entrada própria */
.dialog > .panel-title, .opt-panel > .panel-title {
  display: table; margin: 6px auto 14px; min-width: 230px; padding: 7px 18px 10px;
  border-style: solid; border-width: 0 34px; border-image: url('assets/ui/kit/plate.png') 0 70 fill / 0 34px stretch;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff1c4; -webkit-text-fill-color: #fff1c4; font-size: 19px; letter-spacing: 1.5px;
  text-shadow: 0 2px 0 #3d0006, 0 0 12px rgba(255,190,90,.35); filter: none;
  animation: plateIn .5s .08s cubic-bezier(.2,1.5,.4,1) both;
}
.dialog > .panel-title::after, .opt-panel > .panel-title::after { display: none; }
@keyframes plateIn { from { opacity: 0; transform: scaleX(.55); } }

/* botões: relevo de aço mais marcado e brilho que passa sozinho de tempos em tempos */
.sm-btn { border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,220,200,.45), inset 0 -3px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.4), 0 3px 0 #1e0104, 0 0 12px rgba(227,18,43,.25); }
.sm-btn::after { animation: btnSheen 6s ease-in-out infinite; animation-delay: var(--sheen-delay, 2s); }
.sm-btn:hover:not(:disabled) { transform: translateY(-1px); }
.sm-btn:active:not(:disabled) { transform: translateY(2px); }
.sm-btn.gray { background: linear-gradient(180deg, #3a3437 0%, #1f1b1d 48%, #141113 52%, #0b090a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.4), 0 3px 0 #000; }
/* interruptor (LIGADO/DESLIGADO) com luz */
.sm-btn.sw { gap: 10px; }
.sm-btn.sw::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; background: #3a2a2a; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); transition: background .2s, box-shadow .2s; }
.sm-btn.sw.on::before { background: #3cff6e; box-shadow: 0 0 8px #3cff6e, inset 0 -1px 1px rgba(0,0,0,.4); }

/* placa rebaixada das linhas de prêmio */
.reward-row { border: 6px solid transparent; border-image: url('assets/ui/kit/row.png') 24 fill / 12px stretch; background: none; padding: 6px 10px; }

/* ---------------------------------------------------------------- fim da luta: entra em etapas e conta os números */
.end-banner { animation: bannerDrop .6s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
@keyframes bannerDrop { from { opacity: 0; transform: translateY(-40px) scale(1.25); } }
.reward { animation: pnIn .4s .3s cubic-bezier(.2,1.25,.4,1) both; }
.reward h3 { animation: titlePop .45s .55s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes titlePop { from { opacity: 0; transform: scale(.4); } }
.reward .reward-row { animation: rowIn .38s cubic-bezier(.2,1.2,.4,1) both; }
.reward .reward-row:nth-of-type(1) { animation-delay: .7s; }
.reward .reward-row:nth-of-type(2) { animation-delay: .85s; }
.reward .reward-row:nth-of-type(3) { animation-delay: 1s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-26px); } }
.reward .reward-row img { animation: coinIn .6s cubic-bezier(.2,1.6,.4,1) both; animation-delay: inherit; }
@keyframes coinIn { from { transform: rotateY(180deg) scale(.4); opacity: 0; } }
.reward .rr-total { position: relative; overflow: hidden; }
.reward .rr-total::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,236,170,.55) 50%, transparent 65%) 180% 0 / 250% 100% no-repeat;
  animation: totalSheen 1s 1.9s ease-out both; }
@keyframes totalSheen { to { background-position: -80% 0; } }
.reward .levelup, .reward .arena-line, .reward .online-line { animation: titlePop .45s 1.35s cubic-bezier(.2,1.6,.4,1) both; }
.reward .end-btns { animation: rowIn .4s 1.5s ease-out both; }
.rr-line.prem span:last-child, .rr-line.ev span:last-child { color: var(--gold-hi); }
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- barra de cima: caixas de aço e números que cabem */
.topbar { gap: 6px; }
.tb-box, .tb-keys, .tb-xp {
  border: 4px solid transparent; border-radius: 0; border-image: url('assets/ui/kit/box.png') 16 fill / 8px stretch;
  background: none; box-shadow: none;
}
.tb-box { padding: 0 8px; white-space: nowrap; overflow: hidden; justify-content: center; }
.tb-coins { width: 122px; } .tb-tokens { width: 84px; } .tb-wins { width: 52px; } .tb-level { width: 52px; }
.tb-level-label { font-size: 14px; margin-left: 2px; }
.tb-xp { min-width: 170px; height: 40px; overflow: hidden; }
.tb-xp-fill { top: 0; bottom: 0; }
.tb-xp span { font-size: 15px; padding: 0 6px; }
.tb-support, .tb-chevron { flex: none; }
.tb-chevron { width: 62px; }
/* número que mudou: brilha um instante */
.tb-flash { animation: tbFlash .7s ease-out; }
@keyframes tbFlash { 0% { color: #fff; text-shadow: 0 0 14px rgba(255,230,150,.95); transform: scale(1.12); } 100% { transform: none; } }
.tb-xp.tb-gain .tb-xp-fill { animation: xpGain .8s ease-out; }
@keyframes xpGain { 0% { filter: brightness(1.8); } 100% { filter: none; } }

/* ---------------------------------------------------------------- barra lateral */
.side-btn, .side-btn.green, .side-btn.active {
  border: 6px solid transparent; border-radius: 0; border-image: url('assets/ui/kit/side.png') 40 fill / 20px stretch;
  background: none; box-shadow: none;
}
.side-btn.active { border-image-source: url('assets/ui/kit/side_on.png'); animation: sideOn 2.4s ease-in-out infinite; }
@keyframes sideOn { 50% { filter: drop-shadow(0 0 10px rgba(227,18,43,.7)); } }
.side-btn.green { animation: arenaCall2 2.4s ease-in-out infinite; }
@keyframes arenaCall2 { 50% { filter: drop-shadow(0 0 9px rgba(255,60,70,.75)); } }
.side-btn::before { inset: 0; border-radius: 0; }

/* ---------------------------------------------------------------- loja de peças: lista de categorias */
.shop-cat {
  border: 6px solid transparent; border-radius: 0; border-image: url('assets/ui/kit/cat.png') 12 40 12 14 fill / 6px 20px 6px 7px stretch;
  background: none; box-shadow: none;
}
.shop-cat.active { border-image-source: url('assets/ui/kit/cat_on.png'); background: none; box-shadow: none; }
.shop-cat:hover { transform: translateX(4px); }
.cat-ico { background: radial-gradient(circle at 50% 35%, #2a2426, #0a0809); box-shadow: inset 0 0 0 1px rgba(212,175,55,.55), 0 0 0 1px #000; }
.shop-cat.active .cat-ico { background: radial-gradient(circle at 50% 35%, #5a0d18, #1c0307); box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 10px rgba(255,200,64,.35); }
.cat-ico img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); transition: transform .2s cubic-bezier(.2,1.6,.4,1); }
.shop-cat:hover .cat-ico img, .shop-cat.active .cat-ico img { transform: scale(1.15) rotate(-4deg); }

/* ---------------------------------------------------------------- loja nova: abas trapezoidais e cartas */
.st-tab { border: 0 solid transparent; border-width: 10px 20px 0; border-radius: 0; border-image: url('assets/ui/kit/tab.png') 20 40 0 40 fill / 10px 20px 0 20px stretch; background: none; padding: 0 6px; height: 56px; }
.st-tab.on { border-image-source: url('assets/ui/kit/tab_on.png'); background: none; box-shadow: none; }
.st-tab:hover:not(.on) { filter: brightness(1.25); }
.st-card { border: 6px solid transparent; border-radius: 0; border-image: url('assets/ui/kit/card.png') 44 / 22px stretch; background-clip: padding-box;
  transition: transform .2s cubic-bezier(.2,1.4,.4,1), filter .2s; }
.st-card:hover { border-color: transparent; transform: translateY(-5px); filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,200,64,.25)); }
.st-card .st-art img { transition: transform .3s cubic-bezier(.2,1.4,.4,1); }
.st-card:hover .st-art img { transform: scale(1.06) translateY(-3px); }

/* ---------------------------------------------------------------- Arena Online: caixa de aço do LUTAR */
.ol-go { border: 10px solid transparent; border-radius: 0; border-image: url('assets/ui/kit/housing.png') 40 / 20px stretch; background-clip: padding-box; height: 84px;
  animation: goPulse 2.6s ease-in-out infinite; }
@keyframes goPulse { 50% { filter: brightness(1.12) drop-shadow(0 0 10px rgba(140,255,90,.45)); } }

/* ---------------------------------------------------------------- v3.22: saguão da Arena Online mais vivo (estilo SM, futurista)
   palco = hangar (holofotes que balançam devagar, piso em perspectiva, plataforma holográfica sob o mech, poeira subindo);
   botões em placas de aço com selo; painel da luta com moldura, cabeçalho holográfico e LUTAR com luz girando. */
@property --olA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes olSpinA { to { --olA: 360deg; } }
.ol-lobby.intro .ol-nav button { animation: olSlide .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
.ol-lobby.intro .ol-fight { animation: olRise .5s .2s cubic-bezier(.2,1.2,.4,1) both; }
.ol-lobby.intro .ol-stage { animation: olFade .6s both; }
@keyframes olSlide { from { opacity: 0; transform: translateX(-26px); } }
@keyframes olRise { from { opacity: 0; transform: translateX(26px); } }
@keyframes olFade { from { opacity: 0; } }
.ol-top { position: relative; }
.ol-top::after, .ol-banner::before { content: ''; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffd76a, transparent) no-repeat; background-size: 30% 100%; animation: olLine 5s linear infinite; }
.ol-top::after { bottom: -2px; }
.ol-banner::before { top: -1px; animation-delay: -2.5s; }
@keyframes olLine { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.on-dot { animation: olDot 1.8s ease-out infinite; }
@keyframes olDot { from { box-shadow: 0 0 0 0 rgba(60,220,110,.65); } to { box-shadow: 0 0 0 7px rgba(60,220,110,0); } }
/* botões do lado: placa de aço com o ícone num selo; ao passar o mouse a placa fica vermelha e um reflexo corre */
.ol-nav button { height: 58px; padding: 0 8px; gap: 10px; overflow: hidden; border: 6px solid transparent; border-radius: 0;
  border-image: url('assets/ui/kit/side.png') 40 / 14px stretch; background: linear-gradient(180deg, #1a1416, #0b0809) padding-box;
  transition: transform .22s cubic-bezier(.2,1.4,.4,1), color .15s; }
.ol-nav button::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%); transition: transform .55s ease-out;
  background: linear-gradient(105deg, transparent 35%, rgba(255,230,160,.22) 50%, transparent 65%); }
.ol-nav button:hover { border-image-source: url('assets/ui/kit/side_on.png'); border-color: transparent; transform: translateX(5px); color: #fff;
  background: linear-gradient(180deg, #3e0d16, #17050a) padding-box; }
.ol-nav button:hover::after { transform: translateX(130%); }
.ol-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #3d2d12, #0d0905 72%); box-shadow: 0 0 0 2px #6a5220, inset 0 1px 0 rgba(255,230,160,.3); transition: box-shadow .2s; }
.ol-nav .ol-ico svg { width: 20px; height: 20px; }
.ol-nav button:hover .ol-ico { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 12px rgba(255,215,106,.55), inset 0 1px 0 rgba(255,230,160,.3); }
.ol-nav button:hover .ol-ico svg { fill: var(--gold-hi); }
/* palco: hangar */
.ol-stage { position: relative; overflow: hidden; isolation: isolate; border-color: rgba(120,160,220,.16);
  background: radial-gradient(ellipse at 50% 110%, rgba(80,140,220,.24), transparent 55%), linear-gradient(180deg, #0c1220 0%, #0a0d15 55%, #06070b 100%); }
.ol-hangar { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ol-hangar::before { content: ''; position: absolute; inset: 0 0 36% 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 92px), linear-gradient(180deg, rgba(120,150,200,.07), transparent); }
.ol-floor { position: absolute; left: -40%; right: -40%; bottom: -6%; height: 44%; transform-origin: 50% 0; transform: perspective(320px) rotateX(64deg);
  background: repeating-linear-gradient(90deg, rgba(110,170,255,.16) 0 1px, transparent 1px 52px), repeating-linear-gradient(0deg, rgba(110,170,255,.12) 0 1px, transparent 1px 52px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%); }
.ol-spot { position: absolute; top: -18%; width: 40%; height: 118%; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(3px);
  background: linear-gradient(180deg, rgba(190,215,255,.18), rgba(190,215,255,0) 88%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.ol-spot.l { left: 6%; transform: rotate(-17deg); animation: olSpotL 7s ease-in-out infinite alternate; }
.ol-spot.r { right: 6%; transform: rotate(17deg); animation: olSpotR 8.5s ease-in-out infinite alternate; }
@keyframes olSpotL { to { transform: rotate(-7deg); } }
@keyframes olSpotR { to { transform: rotate(8deg); } }
.ol-motes i { position: absolute; bottom: 22%; left: var(--x); width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: rgba(180,215,255,.85); box-shadow: 0 0 6px rgba(140,200,255,.8); animation: olMote var(--s) linear var(--d) infinite; }
@keyframes olMote { 12% { opacity: .85; } 75% { opacity: .45; } 100% { transform: translate(14px, -230px); opacity: 0; } }
.ol-mechbox { position: relative; width: 430px; max-width: 100%; }
.ol-mechbox .ol-mech { position: relative; display: block; width: 100%; transform-origin: 50% 100%; animation: olBreath 3.6s ease-in-out infinite; }
@keyframes olBreath { 50% { transform: scale(1, 1.008); } }
/* plataforma holográfica sob o mech: brilho que respira, anel com uma luz girando e um anel tracejado */
.ol-pad { position: absolute; left: 50%; bottom: -12px; width: 330px; height: 66px; transform: translateX(-50%); pointer-events: none; }
.ol-pad::before { content: ''; position: absolute; inset: -6px -20px; border-radius: 50%; background: radial-gradient(ellipse, rgba(90,170,255,.38), rgba(90,170,255,.08) 55%, transparent 70%);
  animation: olPad 3.4s ease-in-out infinite; }
@keyframes olPad { 50% { opacity: .55; } }
.ol-pad i { position: absolute; inset: 8px 12px; border-radius: 50%; border: 2px solid rgba(120,200,255,.5); box-shadow: 0 0 14px rgba(90,170,255,.4), inset 0 0 16px rgba(90,170,255,.3); }
.ol-pad i::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; animation: olSpinA 4.5s linear infinite;
  background: conic-gradient(from var(--olA), transparent 0 68%, rgba(210,245,255,.95) 80%, transparent 92%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.ol-pad i::after { content: ''; position: absolute; inset: 10px 34px; border-radius: 50%; border: 1px dashed rgba(150,210,255,.45); }
.ol-stage .ol-name, .ol-stage .rk-chip, .ol-stage .op-wl, .ol-stage .ol-medals { position: relative; }
.ol-name { text-shadow: 0 0 14px rgba(120,180,255,.45), 0 2px 0 #000; }
/* painel da luta: moldura de ouro, cabeçalho holográfico, prêmios em placas e LUTAR com luz girando */
.ol-fight { border: 8px solid transparent; border-radius: 0; border-image: url('assets/ui/kit/frame.png') 60 / 22px stretch; background: linear-gradient(180deg, #15110b, #080605) padding-box; }
.ol-mode { position: relative; height: 54px; overflow: hidden; border-bottom: 1px solid rgba(255,215,106,.35);
  background: linear-gradient(180deg, rgba(255,215,106,.13), rgba(255,215,106,.02)); text-shadow: 0 0 14px rgba(255,215,106,.6); }
.ol-mode::before { content: ''; position: absolute; inset: 0; pointer-events: none; animation: olStripes 2.8s linear infinite;
  background: repeating-linear-gradient(135deg, rgba(255,215,106,.07) 0 7px, transparent 7px 14px); background-size: 39.6px 39.6px; }
@keyframes olStripes { to { background-position: 39.6px 0; } }
.ol-mode svg { animation: olSwords 2.6s ease-in-out infinite; }
@keyframes olSwords { 50% { transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(255,215,106,.8)); } }
.ol-prev { padding: 8px 6px 4px; }
.ol-rw { margin-top: 5px; padding: 4px 6px; gap: 4px; border: 6px solid transparent; border-image: url('assets/ui/kit/row.png') 24 / 10px stretch; }
.ol-rw b { width: 64px; }
.ol-rw span { min-width: 0; flex: 1; }
.ol-rw.w { background: linear-gradient(90deg, rgba(50,110,34,.5), rgba(10,14,8,.65)) padding-box; }
.ol-rw.l { background: linear-gradient(90deg, rgba(110,34,28,.5), rgba(14,8,8,.65)) padding-box; }
.ol-go-wrap { position: relative; width: 100%; padding: 3px; isolation: isolate; }
.ol-go-wrap::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 10px; filter: blur(4px); animation: olSpinA 3.2s linear infinite;
  background: conic-gradient(from var(--olA), rgba(140,255,90,0) 0 55%, rgba(190,255,130,.95) 75%, rgba(140,255,90,0) 92%); }
.ol-go { position: relative; overflow: hidden; }
.ol-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; animation: olSheen 3.6s ease-in-out infinite;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); }
@keyframes olSheen { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.ol-season .nx-rank { animation: olRankGlow 3.2s ease-in-out infinite; }
@keyframes olRankGlow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255,215,106,.3)); } 50% { filter: drop-shadow(0 0 14px rgba(255,215,106,.65)); } }
.ol-banner { position: relative; }

/* ---------------------------------------------------------------- v3.23: batalha surpresa (o desafiante aparece) */
.surprise-panel { width: min(560px, calc(var(--stage-w, 1200px) * 92 / 100)); text-align: center; overflow: hidden; animation: spIn .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes spIn { from { opacity: 0; transform: scale(.86) translateY(18px); } }
.sp-alert { position: relative; margin: -4px -4px 8px; padding: 10px 0; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(200,20,40,.55), transparent); border-top: 1px solid rgba(255,90,80,.5); border-bottom: 1px solid rgba(255,90,80,.5); }
.sp-alert::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.25) 0 10px, transparent 10px 20px); animation: olStripes 2.2s linear infinite; background-size: 28.3px 28.3px; }
.sp-alert span { position: relative; font-size: 30px; letter-spacing: 4px; color: #fff; text-shadow: 0 0 14px rgba(255,80,60,.9), 0 2px 0 #000; animation: spPulse 1.6s ease-in-out infinite; }
@keyframes spPulse { 50% { text-shadow: 0 0 24px rgba(255,120,80,1), 0 2px 0 #000; } }
.sp-stage { position: relative; height: 230px; display: flex; justify-content: center; }
.sp-glow { position: absolute; left: 50%; bottom: 6px; width: 300px; height: 70px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,60,60,.4), rgba(255,60,60,.05) 60%, transparent 72%); animation: olPad 2.6s ease-in-out infinite; }
.sp-mech { position: relative; width: 300px; height: auto; animation: spMechIn .7s .15s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes spMechIn { from { opacity: 0; transform: translateX(60px); filter: brightness(3); } }
.sp-who { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 6px; text-align: left; }
.sp-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,90,80,.75); box-shadow: 0 0 14px rgba(255,60,60,.4); }
.sp-name { display: block; font-weight: normal; font-size: 24px; color: #ff9a8a; letter-spacing: 1px; }
.sp-quote { margin: 2px 0 0; font-family: Arial, sans-serif; font-style: italic; font-size: 14px; color: var(--text); }
.sp-chips { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.sp-chips span { padding: 3px 10px; border-radius: 3px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); }
.sp-chips b { color: #fff; }
.sp-prize h4 { margin: 0 0 6px; font-weight: normal; font-size: 13px; letter-spacing: 2px; color: var(--gold-hi); }
.sp-prize .of-tiles { justify-content: center; }
.surprise-panel .btns { margin-top: 12px; }
.sp-fight { min-width: 180px; font-size: 22px; animation: goPulse 2.2s ease-in-out infinite; }
.surprise-result .boss-result-mark { color: #ff8a7a; }

/* ---------------------------------------------------------------- Configurações: a lista rola por dentro (a moldura e a coroa ficam paradas) */
.settings { overflow: visible; max-height: none; }
.set-scroll { max-height: 548px; overflow-y: auto; padding-right: 8px; margin-right: -8px; }
.set-scroll::-webkit-scrollbar { width: 8px; }
.set-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }
.settings .setting-row { position: relative; transition: background .15s; }
.settings .setting-row:hover { background: linear-gradient(90deg, transparent, rgba(212,175,55,.07), transparent); }
.settings input[type=range] { accent-color: var(--gold); }

/* v3.21: calor acima do máximo — a barra pulsa e o aviso pede para resfriar */
.m-hea.over .mfill { animation: heatOver .6s ease-in-out infinite alternate; }
@keyframes heatOver { from { filter: brightness(1); } to { filter: brightness(1.6) saturate(1.4); } }
.heat-banner.over { animation: heatOver .5s ease-in-out infinite alternate; }

/* v3.21: missões com prêmio para ABRIR e a caixa abrindo */
.missions-panel #missionList { max-height: 470px; overflow-y: auto; padding-right: 4px; }
.missions-panel #missionList::-webkit-scrollbar { width: 6px; }
.missions-panel #missionList::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 3px; }
.mission .m-reward { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 13px; color: var(--gold-hi); }
.mission .m-reward span { display: inline-flex; align-items: center; gap: 3px; }
.mission .m-reward img { width: 16px; height: 16px; object-fit: contain; }
.mission.ready { position: relative; border-color: var(--gold-hi); background: linear-gradient(90deg, rgba(212,175,55,.2), rgba(212,175,55,.04)); animation: mReady 2s ease-in-out infinite; }
@keyframes mReady { 50% { box-shadow: 0 0 14px rgba(255,200,64,.45); } }
.mission.ready .m-ico { color: #7dff8a; }
.mission .m-open { min-width: 0; height: 34px; padding: 0 12px; font-size: 14px; align-self: center; }
.map-missions-toggle.has-ready { animation: mReady 1.6s ease-in-out infinite; }
.map-missions-toggle.has-ready::after { content: attr(data-ready); position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #e3122b; border: 2px solid #ffd76a; color: #fff; font-size: 13px; line-height: 18px; text-align: center; box-shadow: 0 0 10px rgba(227,18,43,.7); }
.mreward { width: 470px; }
.mr-stage { position: relative; width: 280px; height: 220px; margin: 0 auto; }
.mr-stage img { position: absolute; left: 0; top: 0; width: 280px; height: auto; }
.mr-body { animation: crateShake .7s ease-in-out both; }
.mr-lid { animation: crateShake .7s ease-in-out both, lidFly .7s .75s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes crateShake { 0%, 100% { transform: none; } 15% { transform: rotate(-3deg); } 30% { transform: rotate(3deg); } 45% { transform: rotate(-2deg); } 60% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } }
@keyframes lidFly { to { transform: translateY(-120px) rotate(-18deg); opacity: 0; } }
.mr-burst { position: absolute; left: 50%; top: 45%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,240,190,.95), rgba(255,200,64,.55) 40%, transparent 70%); animation: mrBurst 1.1s .75s ease-out forwards; }
@keyframes mrBurst { 0% { opacity: 1; transform: scale(1); } 60% { opacity: .9; } 100% { opacity: 0; transform: scale(22); } }
.mr-name { margin: 4px 0 8px !important; color: var(--gold-hi) !important; font-family: var(--font) !important; font-size: 17px !important; }
.mr-tiles { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.mr-tile { width: 112px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 6px solid transparent;
  border-image: url('assets/ui/kit/row.png') 24 fill / 12px stretch; opacity: 0; animation: tileIn .5s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes tileIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.mr-tile:nth-child(1) { animation-delay: 1.1s; } .mr-tile:nth-child(2) { animation-delay: 1.25s; } .mr-tile:nth-child(3) { animation-delay: 1.4s; }
.mr-tile img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
.mr-tile b { font-weight: normal; font-size: 22px; color: #fff; }
.mr-tile small { font-family: Arial, sans-serif; font-size: 11px; color: var(--text-dim); }

/* v3.21: filtro do inventário e arrastar peças com o mouse */
.inv-head #invSearch { flex: none; width: 140px; }
.inv-filters { display: flex; flex-direction: column; gap: 5px; padding: 0 8px 6px; }
.if-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.inv-chip { height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 3px; border: 1px solid rgba(212,175,55,.3);
  background: linear-gradient(180deg, #1e191b, #0b090a); color: var(--text-dim); font-family: var(--font); font-size: 11px; letter-spacing: .5px; cursor: pointer; }
.inv-chip i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 -2px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.6); }
.inv-chip.dot { width: 28px; padding: 0; justify-content: center; }
.inv-chip:hover { color: #fff; border-color: var(--gold); }
.inv-chip.on { color: #fff; border-color: var(--gold-hi); background: linear-gradient(180deg, #5a0d18, #1c0307); box-shadow: 0 0 8px rgba(255,200,64,.3); }
#invSort { margin-left: auto; height: 26px; background: #000; color: var(--gold-hi); border: 1px solid rgba(212,175,55,.35); border-radius: 3px; font-family: var(--font); font-size: 11px; }
#sec-workshop .item-tile[draggable=true] { cursor: grab; }
#sec-workshop .item-tile[draggable=true]:active { cursor: grabbing; }
#sec-workshop .slot.filled { cursor: grab; }
.ws-dragging .slot[data-slot]:not(.drop-ok) { opacity: .45; filter: grayscale(.6); transition: opacity .15s; }
.ws-dragging .slot.drop-ok { animation: dropOk 1s ease-in-out infinite; }
@keyframes dropOk { 50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(255,200,64,.75); } }
.ws-dragging .slot.drop-hover { transform: scale(1.1); box-shadow: 0 0 0 3px #7dff8a, 0 0 22px rgba(125,255,138,.8) !important; }
.drag-from-slot .ws-inventory { box-shadow: inset 0 0 0 2px rgba(255,90,90,.45); }
.drag-from-slot .ws-inventory.drop-hover { box-shadow: inset 0 0 0 3px #ff6a6a, inset 0 0 30px rgba(255,60,60,.35); }
.drag-from-slot .ws-inventory.drop-hover::before { content: attr(data-drop); }

.info-copy { margin: -6px 0 14px; font-family: Arial, sans-serif; font-size: 11px; line-height: 1.5; color: var(--text-mute); }

/* v3.21: Vitrine Mítica (só para ver) */
.item-tile.showcase { position: relative; overflow: hidden; }
.item-tile.showcase::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255,120,120,.35) 50%, transparent 65%) 160% 0 / 260% 100% no-repeat;
  animation: showSheen 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .2s); }
@keyframes showSheen { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.item-tile.showcase:hover img { transform: scale(1.12); transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.sd-img.showcase { box-shadow: 0 0 18px rgba(255,46,46,.55), inset 0 0 0 2px #ff6a6a; animation: mReady 2.2s ease-in-out infinite; }
.sd-show-note { margin: 10px 0; padding: 8px 10px; border-radius: 4px; border: 1px solid rgba(255,90,90,.45); background: rgba(80,10,16,.45);
  font-family: Arial, sans-serif; font-size: 13px; line-height: 1.45; color: #ffd0d0; }
.sd-show-note b { color: #fff; }

/* v3.21: o piloto vira as cartas clicando */
.bo-hint { position: absolute; bottom: 92px; left: 0; right: 0; z-index: 7; text-align: center; font-size: 20px; letter-spacing: 2px; color: var(--gold-hi);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,200,64,.6); opacity: 0; pointer-events: none; transition: opacity .3s; }
.box-open2.ready:not(.done) .bo-hint { opacity: 1; animation: hintBlink 1.6s ease-in-out infinite; }
@keyframes hintBlink { 50% { opacity: .55; } }
.bo-all { position: absolute; bottom: 24px; left: calc(50% - 110px); width: 220px; z-index: 7; transform: translateY(10px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.box-open2.ready:not(.done) .bo-all { opacity: 1; pointer-events: auto; transform: none; }
.box-open2.ready .bo-card:not(.flip) { cursor: pointer; }
.box-open2.ready .bo-card:not(.flip):hover .bo-pop { transform: translateY(-10px) rotate(-2deg) scale(1.05); filter: drop-shadow(0 18px 16px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,215,106,.7)); }
.bo-card.tease .bo-pop { animation: cardTease 1.3s ease-in-out infinite; }
@keyframes cardTease { 0%, 100% { filter: drop-shadow(0 14px 14px rgba(0,0,0,.5)) drop-shadow(0 0 4px rgba(var(--c), .4)); }
  50% { filter: drop-shadow(0 14px 14px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(var(--c), 1)); } }

/* v3.21: insígnia da patente no canto do topo e o painel Minha patente */
.tb-rank { display: flex; align-items: center; justify-content: center; padding: 4px; }
.tb-rank span { display: flex; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); transition: transform .2s cubic-bezier(.2,1.6,.4,1); }
.tb-rank:hover span { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(255,200,64,.6)); }
.rank-panel { width: 470px; }
.rp-head { display: flex; align-items: center; gap: 18px; justify-content: center; margin: 4px 0 10px; }
.rp-head svg { filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(255,200,64,.3)); animation: rpIn .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes rpIn { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.rp-head div { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.rp-head b { font-weight: normal; font-size: 26px; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.rp-head span { font-family: Arial, sans-serif; font-size: 14px; color: #fff; }
.rp-head small { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.rp-stats { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.rp-stats span { width: 120px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 6px solid transparent;
  border-image: url('assets/ui/kit/row.png') 24 fill / 12px stretch; font-family: Arial, sans-serif; font-size: 11px; color: var(--text-dim); }
.rp-stats b { font-family: var(--font); font-weight: normal; font-size: 22px; color: #fff; }
.rp-goal { margin: 4px 0 10px; font-family: Arial, sans-serif; font-size: 13px; color: #ffe4a8; }
.rp-bar { position: relative; height: 10px; margin: 6px auto 0; width: 80%; border-radius: 5px; background: #000; box-shadow: inset 0 0 0 1px rgba(212,175,55,.45); overflow: hidden; }
.rp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a6a14, #ffd76a); box-shadow: 0 0 8px rgba(255,200,64,.6); animation: rpBar 1s ease-out both; }
@keyframes rpBar { from { width: 0 !important; } }
.rp-season { margin-bottom: 14px; padding: 8px 10px; border-radius: 4px; background: rgba(60,40,10,.4); border: 1px solid rgba(212,175,55,.3); font-family: Arial, sans-serif; font-size: 12px; color: var(--text); }
.rp-season b { font-family: var(--font); font-weight: normal; color: var(--gold-hi); }
.set-scroll { max-height: 490px; }
.rank-panel .btns .sm-btn { min-width: 200px; font-size: 15px; padding: 0 12px; }
.inv-tab .tab-img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.75)); transition: transform .2s cubic-bezier(.2,1.6,.4,1); }
.inv-tab:hover .tab-img, .inv-tab.active .tab-img { transform: scale(1.1) rotate(-4deg); }
.inv-tab:not(.active) .tab-img { filter: drop-shadow(0 3px 3px rgba(0,0,0,.75)) saturate(.7) brightness(.85); }
#showBoxes { font-size: 18px; }

/* v3.22: aba Tintas da LOJA (as tintas saíram da loja de peças) e Ofertas dentro da LOJA */
.sp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; height: 480px; }
.sp-left { display: flex; flex-direction: column; min-height: 0; }
.sp-filters { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.sp-chip { height: 30px; padding: 0 7px; display: inline-flex; align-items: center; gap: 6px; border-radius: 3px; border: 1px solid rgba(212,175,55,.3);
  background: linear-gradient(180deg, #1e191b, #0b090a); color: var(--text-dim); font-family: var(--font); font-size: 12px; letter-spacing: .5px; cursor: pointer; }
.sp-chip:hover { color: #fff; border-color: var(--gold); }
.sp-chip.on { color: #fff; border-color: var(--gold-hi); background: linear-gradient(180deg, #5a0d18, #1c0307); box-shadow: 0 0 8px rgba(255,200,64,.3); }
.rar-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 -2px 2px rgba(0,0,0,.4); }
.rar-bg-C { background: var(--rar-C); } .rar-bg-R { background: var(--rar-R); } .rar-bg-E { background: var(--rar-E); } .rar-bg-L { background: var(--rar-L); } .rar-bg-M { background: var(--rar-M); }
.sp-count { margin-left: auto; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.sp-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start; padding: 2px 6px 6px 2px; }
.sp-grid::-webkit-scrollbar { width: 8px; }
.sp-grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }
.sp-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 7px; border-radius: 6px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #16131a, #0a090c); cursor: pointer; transition: transform .15s cubic-bezier(.2,1.4,.4,1), border-color .15s; }
.sp-swatch .paint-swatch { width: 46px; height: 46px; transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.sp-swatch b { font-weight: normal; font-size: 11px; line-height: 1.15; color: #fff; text-align: center; min-height: 26px; display: flex; align-items: center; }
.sp-swatch small { display: flex; align-items: center; gap: 3px; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; color: var(--gold-hi); }
.sp-swatch small .st-cur { width: 14px; height: 14px; }
.sp-swatch.rar-R { border-color: rgba(47,140,255,.3); } .sp-swatch.rar-E { border-color: rgba(176,77,255,.35); }
.sp-swatch.rar-L { border-color: rgba(255,163,26,.4); } .sp-swatch.rar-M { border-color: rgba(255,46,46,.45); }
.sp-swatch:hover { transform: translateY(-3px); border-color: var(--gold); }
.sp-swatch:hover .paint-swatch { transform: scale(1.1) rotate(-8deg); }
.sp-swatch.sel { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 14px rgba(255,200,64,.45); background: linear-gradient(180deg, #3a2a10, #1a1206); }
.sp-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 8px 10px; border: 6px solid transparent; border-image: url('assets/ui/kit/row.png') 24 fill / 12px stretch; }
.sp-head { display: flex; align-items: center; gap: 10px; }
.paint-swatch.big { width: 54px; height: 54px; flex: none; }
/* v3.22: tintas com textura (selo) e animadas (um reflexo girando devagar na bolinha) */
.paint-swatch.tex::before, .paint-swatch.anim::before { content: ''; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%;
  background: #1a1d24 center/9px no-repeat; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
.paint-swatch.tex::before { background-image: linear-gradient(45deg, #cfd6e0 25%, transparent 25%, transparent 50%, #cfd6e0 50%, #cfd6e0 75%, transparent 75%); background-size: 6px 6px; }
.paint-swatch.anim::before { background: radial-gradient(circle, #fff 0 2px, transparent 3px), conic-gradient(#ff3a6a, #ffd23a, #3affc0, #3aa8ff, #c03aff, #ff3a6a); }
.paint-swatch.anim::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(255,255,255,.55) 72%, transparent 82%); animation: swSpin 2.8s linear infinite; }
@keyframes swSpin { to { transform: rotate(360deg); } }
.sp-kind { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.sp-kind.tex { background: repeating-linear-gradient(45deg, #cfd6e0 0 2px, #4a5260 2px 4px); }
.sp-kind.anim { background: conic-gradient(#ff3a6a, #ffd23a, #3affc0, #3aa8ff, #c03aff, #ff3a6a); animation: swSpin 2.8s linear infinite; }
.sp-kind-txt { color: #9fd8ff; }
.sp-head b { font-weight: normal; font-size: 18px; }
.sp-head small { display: block; font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
/* (v3.23) a prévia encolhe para caber tudo: mech de 9 peças deixava o botão PINTAR fora do quadro */
.sp-right .paint-preview { flex: 1 1 0; min-height: 110px; overflow: hidden; }
.sp-right .paint-preview canvas { width: auto; height: 100%; max-width: 100%; }
.sp-label { font-family: Arial, sans-serif; font-size: 12px; color: var(--text-dim); }
.sp-right .paint-part { width: 40px; height: 40px; }
.sp-right .paint-parts { flex: none; }
.sp-right .st-buy { flex: none; margin-top: auto; width: 100%; }
.st-offers { display: flex; flex-wrap: wrap; gap: 16px; align-content: flex-start; max-height: 480px; overflow-y: auto; padding: 4px; }


/* ---------------------------------------------------------------- v3.24.1: abertura no estilo do SM, com o tema do Nexus
   dois mechs nossos (magma × tempestade) sobre o emblema de aço (tools/make_title_art.py), o logo na frente, o JOGAR
   grande na caixa de aço do LUTAR, a bandeira do idioma em cima e a faixa de aviso embaixo (copyright e versão).
   Entrar/criar conta abre o painel e o palco sai de cena. */
.title-hero { position: absolute; left: 50%; top: 26px; width: 620px; height: 480px; margin-left: -310px; pointer-events: none; z-index: 1;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.3,1); }
.th-emblem { position: absolute; inset: 0; background: url('assets/ui/kit/title_emblem.png') center / 620px 480px no-repeat;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.8)); animation: thIn .7s ease-out both; }
.th-emblem::before { content: ''; position: absolute; left: 50%; top: 49%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(227,18,43,.34), rgba(227,18,43,.1) 52%, transparent 70%); animation: logoGlow 3.2s ease-in-out infinite alternate; }
/* (v3.34, pedido do autor: "faça igual ao Super Mechs Legacy de 2016") como na abertura do SM 2016: os dois mechs GRANDES
   de costas um para o outro, em cima do emblema (passam da borda dele), cada um com a espada no braço da frente; as pernas
   descem por trás do logo. O da esquerda é espelhado (olha para a esquerda). */
.th-duo { position: absolute; left: -210px; top: 4px; width: 1040px; height: 336px; }
.th-mech { position: absolute; top: 0; width: 520px; height: 336px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.8)); }
.th-mech canvas { width: 100%; height: 100%; display: block; }
/* (a respiração agora é a da batalha, peça por peça, no próprio desenho: main.js drawTitleHero → alive) */
.th-mech.th-l { left: 0; animation: thInL .9s cubic-bezier(.2,.9,.3,1) .1s both; }
.th-mech.th-r { right: 0; animation: thInR .9s cubic-bezier(.2,.9,.3,1) .1s both; }
.th-mech.th-l canvas { transform: scaleX(-1); }   /* o da esquerda olha para fora (para a esquerda) */
@keyframes thIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes thInL { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }
@keyframes thInR { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes thBreathe { 50% { translate: 0 -3px; } }
/* (v3.34, pedido do autor: "melhore o resto da abertura para combinar com os 2 mechs — seja criativo") DUELO: o lado esquerdo
   é do mech vermelho (calor) e o direito do azul (energia). Holofotes de cada cor varrendo a arena, o chão refletindo as
   duas, brasas vermelhas subindo à esquerda e faíscas azuis à direita, o emblema meio a meio com um raio de energia
   estalando no meio (onde as costas dos mechs se encontram) e o brilho do NEXUS indo do vermelho ao azul, com um reflexo
   de luz que cruza as letras de tempos em tempos. Artes: tools/make_title_duel.py. */
/* fundo: a arena fica desfocada (profundidade) e mais escura no centro, atrás do emblema — os mechs e o logo saltam */
#screen-title .title-bg { filter: brightness(.46) saturate(1.12) blur(3.2px); }
#screen-title .title-glow { background:
    radial-gradient(ellipse 28% 46% at 50% 36%, rgba(0,0,0,.55), rgba(0,0,0,.2) 60%, transparent 78%),
    radial-gradient(ellipse 46% 62% at 18% 34%, rgba(232,24,40,.42), transparent 70%),
    radial-gradient(ellipse 46% 62% at 82% 34%, rgba(30,130,255,.42), transparent 70%),
    radial-gradient(ellipse 22% 40% at 50% 30%, rgba(150,60,255,.22), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.2) 45%, rgba(0,0,0,.86)); }
.title-beams { position: absolute; inset: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.title-beams i { position: absolute; top: -12%; width: 46%; height: 128%; filter: blur(14px); opacity: .55; }
.title-beams .tb-l { left: -8%; transform-origin: 8% 0; animation: tbSweepL 9s ease-in-out infinite alternate;
  background: conic-gradient(from 148deg at 8% 0, transparent 0deg, rgba(255,60,60,.0) 4deg, rgba(255,70,70,.55) 12deg, rgba(255,40,40,.0) 22deg, transparent 30deg); }
.title-beams .tb-r { right: -8%; transform-origin: 92% 0; animation: tbSweepR 10s ease-in-out infinite alternate;
  background: conic-gradient(from 182deg at 92% 0, transparent 0deg, rgba(60,150,255,.0) 8deg, rgba(70,160,255,.55) 18deg, rgba(40,130,255,.0) 26deg, transparent 30deg); }
@keyframes tbSweepL { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes tbSweepR { from { transform: rotate(7deg); } to { transform: rotate(-9deg); } }
.title-floor { position: absolute; left: 0; right: 0; bottom: 64px; height: 230px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 34% 46% at 26% 78%, rgba(255,50,50,.34), transparent 72%),
              radial-gradient(ellipse 34% 46% at 74% 78%, rgba(50,140,255,.34), transparent 72%),
              radial-gradient(ellipse 20% 30% at 50% 84%, rgba(160,80,255,.22), transparent 72%);
  animation: titleGlow 3.6s ease-in-out infinite alternate; }
/* brasas: vermelhas à esquerda, faíscas azuis à direita (cada camada some no meio) */
#screen-title .title-embers::before { -webkit-mask-image: linear-gradient(90deg, #000 32%, transparent 62%); mask-image: linear-gradient(90deg, #000 32%, transparent 62%); }
#screen-title .title-embers::after { background-image: url('assets/brand/embers_blue.png'); opacity: .85; filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 68%); mask-image: linear-gradient(90deg, transparent 38%, #000 68%); }
.th-emblem { background-image: url('assets/ui/kit/title_emblem_duel.png'); }
.th-emblem::before { background: radial-gradient(circle at 34% 50%, rgba(232,24,40,.36), transparent 48%), radial-gradient(circle at 66% 50%, rgba(30,130,255,.36), transparent 48%),
  radial-gradient(circle, rgba(150,60,255,.18), transparent 62%); }
/* raio de energia no meio do círculo (atrás dos mechs): 4 quadros trocando e piscando */
.th-bolt { position: absolute; left: 50%; top: 40px; width: 112px; height: 336px; margin-left: -56px; mix-blend-mode: screen;
  background: url('assets/brand/title_bolt.png') 0 0 / 448px 336px no-repeat; animation: thBolt .44s steps(4) infinite, thBoltFlick 2.6s linear infinite; }
@keyframes thBolt { to { background-position: -448px 0; } }
@keyframes thBoltFlick { 0%, 100% { opacity: .95; } 18% { opacity: .35; } 22% { opacity: 1; } 47% { opacity: .55; } 52% { opacity: .9; } 74% { opacity: .25; } 78% { opacity: 1; } }
/* brilho do logo: vermelho à esquerda, azul à direita; reflexo de luz cruzando as letras (só onde há logo) */
#screen-title .title-logo::before { background: radial-gradient(ellipse 52% 70% at 28% 50%, rgba(232,24,40,.46), transparent 72%), radial-gradient(ellipse 52% 70% at 72% 50%, rgba(30,130,255,.46), transparent 72%); border-radius: 0; }
#screen-title .title-logo::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url('assets/brand/logo_duel.png') center / 100% 100% no-repeat; mask: url('assets/brand/logo_duel.png') center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%) no-repeat; background-size: 260% 100%;
  animation: logoShine 6s ease-in-out 1.4s infinite; }
@keyframes logoShine { 0% { background-position: 130% 0; } 28%, 100% { background-position: -30% 0; } }
#screen-title .title-logo { top: 296px; z-index: 2; }
#screen-title .title-logo img { width: 520px; }
#screen-title .title-logo::before { width: 600px; height: 220px; margin: -110px 0 0 -300px; }
#screen-title.auth-on .title-hero { opacity: 0; transform: scale(.9); }
#screen-title.auth-on .title-logo { top: 18px; transform: translateX(-50%) scale(.6); }
/* botão grande na caixa de aço e a fileira de botões menores */
.title-menu, .title-auth.welcome { top: 504px; width: 480px; gap: 6px; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.title-auth.welcome { left: 50%; transform: translateX(-50%); }
.title-housing { width: 340px; border: 12px solid transparent; border-image: url('assets/ui/kit/housing.png') 40 / 20px stretch; background: rgba(6,5,6,.88) padding-box; padding: 3px; }
.title-big { height: 58px; font-size: 30px; letter-spacing: 3px; }
.title-sub { display: flex; justify-content: center; gap: 8px; width: 100%; }
.title-sub .title-btn { width: auto; flex: 0 1 152px; min-width: 0; height: 34px; padding: 0 8px; font-size: 13px; letter-spacing: .5px; }
.title-auth.welcome .au-err { margin: 4px 0 0; text-align: center; }
/* faixa de aviso e placa de aço embaixo */
.title-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 2; pointer-events: none; }
.tbar-stripe { height: 10px; background: repeating-linear-gradient(-45deg, #c99a22 0 14px, #121012 14px 28px);
  box-shadow: inset 0 1px 0 rgba(255,236,170,.35), inset 0 -2px 0 rgba(0,0,0,.55), 0 -4px 14px rgba(0,0,0,.6); }
.tbar-panel { height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 26px;
  background: linear-gradient(180deg, #2a2629 0%, #161315 55%, #0a090a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
#screen-title .title-footer { position: static; text-align: left; font-size: 12px; line-height: 1.5; color: #8d8174; }
#screen-title .title-footer #titleVersion { color: #6e6358; }
#screen-title .title-pilot { position: static; text-align: right; font-size: 13px; }
#screen-title .title-pilot b { font-size: 16px; }
/* bandeira do idioma e a lista */
.title-films { align-items: center; z-index: 4; }
.title-flag { width: 58px; height: 40px; padding: 4px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(212,175,55,.55);
  background: linear-gradient(180deg, #2b2628, #121012); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #000; }
.title-flag:hover { border-color: var(--gold-hi); }
.title-flag svg { display: block; width: 100%; height: 100%; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.title-langs { position: absolute; right: 22px; top: 66px; z-index: 6; display: flex; flex-direction: column; min-width: 220px; padding: 6px;
  border-radius: 6px; border: 1px solid rgba(212,175,55,.5); background: linear-gradient(180deg, #1d191b, #0c0a0b); box-shadow: 0 10px 24px rgba(0,0,0,.7); animation: spFade .2s ease-out; }
.title-langs button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  font-family: Arial, sans-serif; font-size: 14px; color: var(--text-dim); text-align: left; }
.title-langs button:hover, .title-langs button.on { background: rgba(212,175,55,.14); color: var(--gold-hi); }
.title-langs svg { width: 30px; height: 20px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }

/* (v3.24.2) janela Informações: os dois botões de documentos cabem numa linha (antes o de licenças quebrava e
   encostava no FECHAR); em idiomas de texto longo, quebram sem vazar */
.info-btns .sm-btn { width: 400px; min-width: 0; height: auto; min-height: 42px; padding: 8px 18px; font-size: 15px; line-height: 1.25; white-space: normal; }
.info-panel .btns { margin-top: 16px; }

/* ================================================================ v3.27: Saguão da Comunidade (tela cheia)
   O mundo (hangar, mechs, portais) é desenhado em <canvas> por js/hub_world.js; aqui só o HUD por cima. */
.modal-back.hub-modal { display: block; background: #03050a; }
.hub { position: absolute; inset: 0; overflow: hidden; background: #03050a; animation: hubIn .55s ease-out; }
@keyframes hubIn { from { opacity: 0; filter: brightness(2.2) saturate(.4); } }
.hub-world { position: absolute; inset: 0; }
.hub-world::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 52%, transparent 56%, rgba(0,0,0,.5) 100%); transition: background .5s; }
.hub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.hub-top, .hub-chat, .hub-side, .hub-hint, .hub-feed, .hub-drawer { transition: opacity .35s, transform .35s; }
/* moldura chanfrada (cantos cortados) com borda em degradê: botões do HUD */
.hub-chamfer, .hub-back, .hub-btn, .hub-me, .hub-act, .hub-photo-exit { --cut: 9px; --edge: rgba(255,215,106,.75); --fill: linear-gradient(180deg, #1f2836, #0a0e15);
  position: relative; isolation: isolate; border: 0; background: linear-gradient(135deg, var(--edge), rgba(255,255,255,.08) 45%, rgba(255,255,255,.08) 55%, var(--edge));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: transform .15s, filter .15s; }
.hub-chamfer::before, .hub-back::before, .hub-btn::before, .hub-me::before, .hub-act::before, .hub-photo-exit::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.hub-back:hover, .hub-btn:hover, .hub-me:hover, .hub-act:hover { transform: translateY(-2px); filter: brightness(1.2); }
.hub-back:active, .hub-btn:active, .hub-me:active, .hub-act:active { transform: translateY(1px); }
/* barra de cima */
.hub-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px 30px;
  background: linear-gradient(180deg, rgba(2,4,8,.95), rgba(2,4,8,.6) 60%, rgba(2,4,8,0)); pointer-events: none; }
.hub-top > * { pointer-events: auto; }
.hub-top::after { content: ''; position: absolute; left: 12px; right: 12px; top: 64px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,215,106,.55) 20%, rgba(95,224,255,.45) 80%, transparent); }
.hub-back { flex: none; width: 46px; height: 46px; --fill: linear-gradient(180deg, #3a2a12, #120b05); color: #ffe7a6; font-size: 34px; line-height: 1; padding: 0 0 4px; }
.hub-title { flex: none; display: flex; flex-direction: column; min-width: 0; }
.hub-title b { font-weight: normal; font-size: 24px; letter-spacing: 1.5px; line-height: 1; color: #fff; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255,200,80,.35); }
.hub-title span { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: bold 11px Arial, sans-serif; letter-spacing: .6px; color: #9fdcff; white-space: nowrap; text-transform: uppercase; }
.hub-live { width: 8px; height: 8px; border-radius: 50%; background: #4dff8a; box-shadow: 0 0 8px #4dff8a; animation: hubLive 1.6s ease-in-out infinite; }
@keyframes hubLive { 50% { opacity: .35; transform: scale(.7); } }
.hub-rooms { flex: 0 1 auto; min-width: 0; display: flex; gap: 2px; margin-left: 6px; padding: 3px; border-radius: 10px; background: rgba(6,10,17,.85);
  border: 1px solid rgba(120,180,240,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.4); overflow-x: auto; scrollbar-width: none; }
.hub-rooms::-webkit-scrollbar { display: none; }
.hub-rooms button { flex: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 0; border-radius: 7px; background: none; color: #9fb6cf; transition: background .2s, color .2s, padding .25s; }
.hub-rooms button b { font-weight: normal; font-size: 13px; letter-spacing: .4px; }
.hub-rooms button small { min-width: 18px; padding: 1px 5px; border-radius: 8px; background: rgba(255,255,255,.07); color: #7f97b3; font: bold 10px Arial, sans-serif; text-align: center; }
.hub-rooms button:hover { color: #fff; background: rgba(255,255,255,.07); }
.hub-rooms button.on { padding: 0 13px; color: #fff6d0; background: linear-gradient(180deg, #b0142a, #5a0812); box-shadow: 0 0 14px rgba(227,18,43,.45), inset 0 0 0 1px rgba(255,215,106,.55); }
.hub-rooms button.on small { background: rgba(255,215,106,.25); color: #ffe7a6; }
.hub-rooms button.top b { color: #ffd24a; }
.hub-top-r { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hub-me { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px 0 7px; --edge: rgba(95,224,255,.7); color: #fff; text-align: left; }
.hub-me span { display: flex; flex-direction: column; line-height: 1.1; }
.hub-me b { font-weight: normal; font-size: 13px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-me small { font: bold 9px Arial, sans-serif; color: #9fdcff; text-transform: uppercase; letter-spacing: .4px; }
.hub-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; --fill: linear-gradient(180deg, #2c2214, #0f0a05); color: #ffe7a6; font-size: 12px; letter-spacing: .8px; }
.hub-btn svg { width: 16px; height: 16px; fill: currentColor; }
.hub-btn i { font-style: normal; min-width: 22px; padding: 1px 6px; border-radius: 10px; background: #ffd76a; color: #1a1205; font-size: 12px; text-align: center; }
.hub-inv { --edge: rgba(70,230,120,.7); --fill: linear-gradient(180deg, #0f3a1e, #05170b); color: #a5ffbf; font-family: Arial, sans-serif; font-weight: bold; font-size: 11px; letter-spacing: 0; }
.hub-inv.off { --edge: rgba(255,120,100,.7); --fill: linear-gradient(180deg, #3e1510, #170705); color: #ffb3a3; }
/* dicas, entradas e saídas */
.hub-hint { position: absolute; z-index: 4; left: 12px; top: 72px; display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 14px; background: rgba(0,0,0,.6);
  color: rgba(225,240,250,.9); font: 12px Arial, sans-serif; white-space: nowrap; pointer-events: none; transition: opacity .8s 2.5s; }
.hub-hint.gone { opacity: 0; }
.hub-hint kbd, .hub-prompt kbd { font-family: var(--font); }
.hub-hint kbd { padding: 1px 5px; border-radius: 4px; background: rgba(255,215,106,.18); border: 1px solid rgba(255,215,106,.45); color: #ffe7a6; font-size: 10px; }
.hub-feed { position: absolute; z-index: 4; left: 12px; top: 104px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.hub-feed-item { display: flex; align-items: center; gap: 6px; padding: 5px 26px 5px 9px; border-left: 3px solid #4dff8a; background: linear-gradient(90deg, rgba(6,10,17,.9), rgba(6,10,17,0));
  color: #e6f2ff; font: bold 12px Arial, sans-serif; text-shadow: 0 1px 2px #000; animation: hubFeedIn .35s ease-out; transition: opacity .5s, transform .5s; }
.hub-feed-item i { font-style: normal; color: #4dff8a; }
.hub-feed-item b { color: #fff; }
.hub-feed-item.k-out { border-left-color: #7f97b3; }
.hub-feed-item.k-out i { color: #7f97b3; }
.hub-feed-item.bye { opacity: 0; transform: translateX(-18px); }
@keyframes hubFeedIn { from { opacity: 0; transform: translateX(-24px); } }
/* chat flutuando por cima do hangar (como no Mecha Frontier), embaixo à esquerda */
.hub-chat { position: absolute; z-index: 4; left: 12px; bottom: 12px; width: 430px; height: 268px; display: flex; flex-direction: column; }
.hub-chat .chat-box { background: none; border: 0; border-radius: 0; overflow: visible; }
.hub-chat .cb-tabs { flex: none; align-self: flex-start; gap: 5px; border: 0; margin-bottom: 4px; }
.hub-chat .cb-tabs button { flex: none; padding: 5px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(3,6,10,.72); color: #b9c9d8; font-size: 11px; }
.hub-chat .cb-tabs button.on { border-color: var(--gold); background: rgba(80,58,14,.82); color: var(--gold-hi); box-shadow: none; }
.hub-chat .cb-log { padding: 4px 2px; gap: 3px; scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.hub-chat .cb-log::-webkit-scrollbar { display: none; }
.hub-chat .cb-msg { font-size: 14px; font-weight: bold; line-height: 1.32; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 2px #000; animation: hubMsgIn .3s ease-out; }
@keyframes hubMsgIn { from { opacity: 0; transform: translateY(6px); } }
.hub-chat .cb-msg .cb-time { display: none; }
.hub-chat .cb-msg .cb-who b { color: #8fd8ff; }
.hub-chat .cb-msg.me .cb-who b { color: var(--gold-hi); }
.hub-chat .cb-msg .cb-text { color: #f2f6fa; }
.hub-chat .cb-empty { margin: auto 0 0; padding: 4px 2px; text-align: left; color: #c8d6e2; text-shadow: 0 1px 3px #000; }
.hub-chat .cb-note { border: 0; border-radius: 5px; margin-top: 4px; background: rgba(0,0,0,.7); }
.hub-chat .cb-input { padding: 0; margin-top: 6px; border: 0; background: none; }
.hub-chat .cb-input input { height: 40px; border-radius: 7px; border: 1px solid rgba(140,200,255,.35); background: rgba(4,8,14,.84); font-size: 14px; backdrop-filter: blur(3px); transition: border-color .2s, box-shadow .2s; }
.hub-chat .cb-input input:focus { border-color: #9fdcff; box-shadow: 0 0 14px rgba(80,200,255,.3); }
.hub-chat .cb-emo { width: 40px; height: 40px; border-radius: 7px; background: rgba(4,8,14,.84); }
.hub-chat .cb-send { height: 40px; border-radius: 7px; padding: 0 16px; }
.hub-chat .emoji-pick { bottom: 48px; }
/* ações + emotes + minimapa, embaixo à direita */
.hub-side { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hub-actions { display: flex; gap: 6px; }
.hub-act { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 44px; padding: 0 11px; color: #fff; font-size: 12px; letter-spacing: .8px; }
.hub-act i { font-style: normal; font-size: 18px; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', var(--font); line-height: 1; }
.hub-act.wide { padding: 0 15px; --edge: rgba(255,120,200,.7); --fill: linear-gradient(180deg, #34163a, #12061a); }
.hub-emote-pop { position: absolute; right: 0; bottom: 100%; margin-bottom: 8px; display: grid; grid-template-columns: repeat(4, 62px); gap: 6px; padding: 10px; border-radius: 12px;
  background: rgba(6,10,17,.95); border: 1px solid rgba(255,215,106,.4); box-shadow: 0 14px 34px rgba(0,0,0,.65); transform-origin: 80% 100%; transform: scale(.85) translateY(12px);
  opacity: 0; pointer-events: none; transition: transform .18s ease-out, opacity .18s; }
.hub-emote-pop.open { transform: none; opacity: 1; pointer-events: auto; }
.hub-emote-pop button { position: relative; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 50% 30%, #26364a, #0b111a); color: #fff; transition: transform .12s, border-color .12s, box-shadow .12s; }
.hub-emote-pop button i { font-style: normal; font-size: 25px; line-height: 1; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.hub-emote-pop button i.gg { font-family: var(--font); font-size: 21px; color: #ffd24a; text-shadow: 0 2px 0 #3a2200; }
.hub-emote-pop button b { font: bold 9px Arial, sans-serif; color: #b9c9d8; text-transform: uppercase; letter-spacing: .3px; }
.hub-emote-pop kbd { position: absolute; top: 3px; right: 5px; font: bold 9px Arial, sans-serif; color: #ffd76a; opacity: .75; }
.hub-emote-pop button:hover { transform: translateY(-3px) scale(1.06); border-color: #ffd76a; box-shadow: 0 6px 14px rgba(0,0,0,.5), 0 0 12px rgba(255,215,106,.25); }
.hub-mini { position: relative; width: 218px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,215,106,.45); background: rgba(6,10,17,.92); box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.hub-mini-head { display: flex; align-items: center; justify-content: space-between; padding: 5px 9px; border-bottom: 1px solid rgba(255,215,106,.2); font-size: 11px; letter-spacing: 1.5px; color: #ffd76a; }
.hub-mini-head span { font: bold 10px Arial, sans-serif; letter-spacing: .3px; color: #9fdcff; }
.hub-mini canvas { display: block; width: 216px; height: 146px; cursor: crosshair; }
.hub-zoom { position: absolute; right: 5px; top: 31px; display: flex; flex-direction: column; gap: 3px; }
.hub-zoom button { width: 24px; height: 24px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.65); color: #fff; font-size: 16px; line-height: 1; }
.hub-zoom button:hover { border-color: var(--gold-hi); }
/* chegou perto de um portal */
.hub-prompt { position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px;
  border-radius: 9px; border: 2px solid var(--c, #ffd76a); background: rgba(4,8,14,.92); color: #fff; font-size: 15px; letter-spacing: .8px; white-space: nowrap;
  box-shadow: 0 0 22px rgba(0,0,0,.6), 0 0 16px color-mix(in srgb, var(--c, #ffd76a) 45%, transparent); animation: hubPromptIn .25s ease-out, hubPrompt 1.4s ease-in-out .25s infinite; }
.hub-prompt kbd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--c, #ffd76a); color: #050505; font-size: 16px; }
.hub-prompt:hover { filter: brightness(1.15); }
@keyframes hubPrompt { 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes hubPromptIn { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); } }
.hub-notice { position: absolute; z-index: 7; left: 50%; top: 112px; max-width: 70%; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #47c8ef; border-radius: 6px;
  background: rgba(3,24,34,.95); color: #e4f9ff; font: 13px Arial, sans-serif; opacity: 0; transform: translate(-50%, -10px); transition: .25s; pointer-events: none; }
.hub-notice.show { opacity: 1; transform: translate(-50%, 0); }
.hub-notice i { font-style: normal; }
/* cartão ao passar o mouse num mech */
.hub-card { position: absolute; left: 0; top: 0; z-index: 6; width: 260px; display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: rgba(6,10,17,.94); border: 1px solid rgba(95,224,255,.45); box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 18px rgba(95,224,255,.15); transition: opacity .15s; }
.hub-card.hidden { display: flex !important; opacity: 0; }
.hub-card > svg { flex: none; }
.hub-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-card b { font-weight: normal; font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-card small { font: bold 11px Arial, sans-serif; color: #ffd76a; }
.hub-card span { font: 11px Arial, sans-serif; color: #b9c9d8; }
.hub-card em { margin-top: 3px; font: italic 10px Arial, sans-serif; color: #7f97b3; }
/* abertura: nome do hangar no meio da tela */
.hub-intro { position: absolute; left: 50%; top: 36%; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.hub-intro.show { animation: hubIntro 2.8s ease forwards; }
.hub-intro small { font-size: 12px; letter-spacing: 7px; color: #ffd76a; }
.hub-intro b { font-weight: normal; font-size: 40px; letter-spacing: 3px; color: #fff; text-shadow: 0 3px 0 #000, 0 0 30px rgba(95,224,255,.6); white-space: nowrap; }
.hub-intro span { font: bold 14px Arial, sans-serif; color: #9fdcff; letter-spacing: 1px; text-transform: uppercase; }
.hub-intro::before, .hub-intro::after { content: ''; width: 420px; height: 1px; background: linear-gradient(90deg, transparent, #ffd76a, transparent); }
@keyframes hubIntro { 0% { opacity: 0; transform: translate(-50%, -38%) scale(1.12); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 72% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -62%); } }
/* modo foto: some o HUD, faixas de cinema e zoom no seu mech */
.hub-photo-exit { position: absolute; z-index: 8; left: 50%; bottom: 14px; height: 36px; padding: 0 18px; transform: translateX(-50%); color: #ffe7a6; font-size: 12px; letter-spacing: 1px;
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.hub::before, .hub::after { content: ''; position: absolute; left: 0; right: 0; z-index: 6; height: 0; background: #000; transition: height .45s ease; pointer-events: none; }
.hub::before { top: 0; }
.hub::after { bottom: 0; }
.hub.photo::before, .hub.photo::after { height: 56px; }
.hub.photo .hub-top { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.hub.photo .hub-top > * { pointer-events: none; }
.hub.photo .hub-chat, .hub.photo .hub-hint, .hub.photo .hub-feed { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.hub.photo .hub-hint { transition-delay: 0s; }
.hub.photo .hub-side, .hub.photo .hub-drawer { opacity: 0; transform: translateX(24px); pointer-events: none; }
.hub.photo .hub-prompt { display: none; }
.hub.photo .hub-photo-exit { opacity: 1; pointer-events: auto; }
.hub.photo .hub-world::after { background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.6) 100%); }
/* lista de pilotos (gaveta da direita) */
.hub-drawer { position: absolute; z-index: 6; right: 0; top: 70px; bottom: 262px; width: 300px; display: flex; flex-direction: column; border-radius: 10px 0 0 10px;
  border: 1px solid rgba(255,215,106,.35); border-right: 0; background: rgba(6,9,15,.95); box-shadow: -10px 0 30px rgba(0,0,0,.5); transform: translateX(104%); transition: transform .25s ease; }
.hub-drawer.open { transform: none; }
.hub-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255,215,106,.25); }
.hub-drawer-head b { font-weight: normal; font-size: 14px; letter-spacing: 1px; color: var(--gold-hi); }
.hub-drawer-head button { width: 28px; height: 28px; padding: 0; border-radius: 5px; border: 1px solid rgba(255,255,255,.15); background: none; color: #ccc; }
.hub-who { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px; }
.hub-who .ah-who { animation: hubFeedIn .25s ease-out both; }
.hub-safety { flex: none; padding: 8px 12px; background: rgba(120,80,10,.22); border-top: 1px solid rgba(255,200,64,.2); font: 11px Arial, sans-serif; color: #ffd98a; }
.ah-find { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 4px; border: 1px solid rgba(120,200,255,.4); background: linear-gradient(180deg, #14263a, #08111b); color: #9fdcff; font-size: 14px; }
.ah-find:hover { border-color: #9fdcff; color: #fff; }
.ah-style-tip { font-size: 12px !important; color: #9fb7cf !important; }

/* =====================================================================
   ATIVIDADES (v3.28): diário, Fantasmas, desafio, Raid de Clã, torneio, conquistas e álbum (js/activities.js)
   ===================================================================== */
.side-btn .act-badge { position: absolute; top: 4px; right: 4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center;
  font: 12px/1 Arial, sans-serif; font-weight: 700; font-style: normal; color: #fff; background: var(--red); border: 2px solid var(--gold-hi); box-shadow: 0 0 10px rgba(227,18,43,.8); animation: mReady 1.6s ease-in-out infinite; }
.act-panel { width: 1140px; height: 660px; display: flex; flex-direction: column; }
.act-panel .st-tab { position: relative; gap: 6px; border-width: 10px 12px 0; padding: 0 4px; }
.act-panel .st-tab span { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.act-panel .st-tab svg { width: 20px; height: 20px; }
.act-panel .st-tabs { gap: 2px; overflow: visible; }
.act-dot { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 11px/18px Arial, sans-serif; font-weight: 700; font-style: normal; color: #fff; background: var(--red); text-align: center; }
.act-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,175,55,.5) transparent; }
.act-body h3 { margin: 0 0 8px; font-weight: normal; font-size: 15px; letter-spacing: 1px; color: var(--gold-hi); }
.act-body h3 + small, .act-body header small { color: var(--text-mute); font: 12px Arial, sans-serif; }
.act-body header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.act-sub { margin: 6px 0; color: var(--text-dim); font: 13px/1.45 Arial, sans-serif; }
.act-empty { padding: 60px 30px; text-align: center; color: var(--text-dim); font: 15px/1.5 Arial, sans-serif; }
.act-empty b { display: block; font: 20px var(--font); color: var(--gold-hi); margin-bottom: 6px; }
.act-empty .sm-btn { margin-top: 14px; }
.act-empty.sm { padding: 18px 10px; font-size: 13px; }
.act-tiles { gap: 4px; }
.act-tiles .of-tile { width: 50px; height: 50px; }
.act-tiles .of-tile img { max-width: 34px; max-height: 26px; }
.sm-btn.small { min-width: 96px; height: 34px; padding: 0 12px; font-size: 14px; }
.act-card { position: relative; padding: 14px; border-radius: 8px; border: 1px solid rgba(212,175,55,.28); background: linear-gradient(180deg, rgba(30,22,26,.85), rgba(10,7,9,.92)); box-shadow: inset 0 1px 0 rgba(255,215,106,.08); }
.act-row-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.act-done { color: var(--green); font-size: 14px; }
.act-ok { font-style: normal; font-size: 22px; color: var(--green); width: 96px; text-align: center; }
.act-big { font-size: 34px; color: #fff; text-shadow: 0 2px 0 #000; }
.act-big small { font-size: 14px; color: var(--text-dim); }
.act-stats { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; color: var(--text-dim); font: 12px/1.4 Arial, sans-serif; }
.act-prize { margin-top: 10px; }
.act-prize small, .act-rw2 small, .act-places small { display: block; margin-bottom: 4px; color: var(--text-mute); font: 11px Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.act-rw2 { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.act-bar { position: relative; height: 16px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); overflow: hidden; margin-top: 4px; }
.act-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a0818, var(--red-hi)); border-radius: 8px; transition: width .4s; }
.act-bar.gold i { background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.act-bar span { position: relative; display: block; text-align: center; font: 11px/16px Arial, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.act-unlock { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 10px; font: 11px Arial, sans-serif; color: #1c1300; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.act-unlock.big { font-size: 13px; padding: 4px 12px; margin: 8px 0; }
/* diário */
.act-inbox { margin-bottom: 14px; padding: 12px; border-radius: 8px; border: 1px solid var(--gold); background: linear-gradient(90deg, rgba(212,175,55,.18), rgba(227,18,43,.12)); animation: actGlow 2.4s ease-in-out infinite; }
@keyframes actGlow { 50% { box-shadow: 0 0 18px rgba(255,200,64,.35); } }
.act-inbox-row { display: flex; gap: 10px; overflow-x: auto; }
.act-gift { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; min-width: 200px; border-radius: 6px; background: rgba(0,0,0,.45); }
.act-gift b { font-weight: normal; color: #fff; font-size: 13px; } .act-gift small { color: var(--text-dim); font: 12px Arial, sans-serif; }
.act-daily-top { display: grid; grid-template-columns: 1fr 210px; gap: 12px; margin-bottom: 12px; }
.act-loginbox { padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(212,175,55,.28); background: rgba(14,10,12,.9); }
.act-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.act-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-height: 104px; }
.act-day small { font-size: 12px; color: var(--text-dim); }
.act-day .act-tiles { justify-content: center; }
.act-day.last { background: linear-gradient(180deg, rgba(212,175,55,.2), rgba(255,255,255,.03)); border-color: rgba(212,175,55,.5); }
.act-day.now { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 18px rgba(255,200,64,.45); animation: actGlow 1.6s ease-in-out infinite; }
.act-day.now small { color: var(--gold-hi); }
.act-day.got { opacity: .55; }
.act-day em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 40px; color: var(--green); text-shadow: 0 2px 6px #000; }
.act-freebox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 8px; border: 1px solid rgba(212,175,55,.28); background: rgba(14,10,12,.9); text-align: center; }
.act-freebox img { width: 110px; height: 90px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.act-freebox.ready img { animation: actBob 1.8s ease-in-out infinite; }
@keyframes actBob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.act-freebox b { font-weight: normal; color: #fff; font-size: 13px; } .act-freebox small { color: var(--text-mute); font: 12px Arial, sans-serif; }
.act-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.act-tasks { padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(212,175,55,.28); background: rgba(14,10,12,.9); }
.act-task { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.act-task-txt b { display: block; font-weight: normal; font-size: 13px; color: #fff; }
.act-task-txt small { color: var(--text-mute); font: 11px Arial, sans-serif; }
.act-task.got { opacity: .55; }
.act-task.ready .act-task-txt b { color: var(--gold-hi); }
.act-task.bonus { background: linear-gradient(90deg, rgba(212,175,55,.1), transparent); padding-left: 8px; border-radius: 6px; }
/* fantasmas */
.act-ghost { display: grid; grid-template-columns: 290px 1fr 320px; gap: 12px; }
.act-me { text-align: center; }
.act-emblem { --c1: #c27a3a; --c2: #5a3010; width: 110px; height: 124px; margin: 6px auto 8px; display: grid; place-items: end center; padding-bottom: 18px;
  clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%); background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.2); }
.act-emblem span { font-size: 15px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.lg-bronze { --c1: #d08a4a; --c2: #5a2f10; } .lg-silver { --c1: #e6eef6; --c2: #6b7684; } .lg-gold { --c1: #ffe07a; --c2: #8a6208; }
.lg-platinum { --c1: #9ff0e6; --c2: #2f6f78; } .lg-diamond { --c1: #a8e4ff; --c2: #3550c8; } .lg-master { --c1: #ff8ad4; --c2: #6a0a8a; }
.act-league { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 4px; border-radius: 10px; font: 12px Arial, sans-serif; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.act-league i { width: 12px; height: 14px; clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%); background: linear-gradient(160deg, var(--c1, #c27a3a), var(--c2, #5a3010)); }
.act-opp { text-align: center; }
.act-mech { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.act-mech.boss { max-width: 420px; }
.act-oppname { font-size: 20px; color: #fff; margin: 2px 0 6px; } .act-oppname small { display: block; font: 12px Arial, sans-serif; color: var(--text-dim); }
.act-opp .act-rw2 { justify-content: center; }
.act-top ol { list-style: none; margin: 0; padding: 0; }
.act-top li { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.05); font: 13px Arial, sans-serif; color: #e8e0d4; }
.act-top li b { font: 14px var(--font); color: var(--gold-hi); text-align: center; font-weight: normal; }
.act-top li em { font-style: normal; color: #fff; font-weight: 700; }
.act-top li small { color: var(--text-mute); font-size: 11px; }
.act-top li.me { background: rgba(212,175,55,.12); border-radius: 4px; }
.act-leagues { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font: 11px Arial, sans-serif; color: var(--text-mute); }
/* (v3.31) Arena de Fantasmas em modo sequência */
.act-flame { --f1: #ffd36a; --f2: #ff7a1a; position: relative; width: 132px; height: 132px; margin: 4px auto 6px; display: grid; place-content: center; text-align: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, rgba(255,140,40,.35), rgba(60,20,0,.0) 62%), radial-gradient(circle, rgba(20,12,8,.95) 56%, transparent 57%), conic-gradient(from 200deg, var(--f1), var(--f2), #a31a00, var(--f1));
  box-shadow: 0 0 0 2px rgba(255,200,90,.25), 0 0 26px rgba(255,120,30,.25); }
.act-flame b { font: 50px/1 var(--font); color: #fff; text-shadow: 0 0 14px rgba(255,150,40,.8), 0 3px 0 #000; font-weight: normal; }
.act-flame small { max-width: 92px; margin: 2px auto 0; font: 10px/1.15 Arial, sans-serif; color: #ffd9a0; text-transform: uppercase; letter-spacing: .4px; }
.act-flame.h { --f1: #ffb36a; --f2: #ff3a1a; box-shadow: 0 0 0 2px rgba(255,120,60,.35), 0 0 34px rgba(255,70,20,.4); }
.act-flame.i { --f1: #ff8ad4; --f2: #b31aff; box-shadow: 0 0 0 2px rgba(220,110,255,.45), 0 0 40px rgba(180,40,255,.45); }
.act-streakbox.hot .act-flame { animation: actFlame 1.6s ease-in-out infinite; }
@keyframes actFlame { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.18); transform: scale(1.03); } }
.act-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px auto 10px; max-width: 250px; }
.act-pips i { width: 16px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.act-pips i.tier { border-color: rgba(255,215,106,.7); }
.act-pips i.on { background: linear-gradient(180deg, #ffd36a, #ff6a1a); border-color: #ffb050; box-shadow: 0 0 6px rgba(255,140,40,.6); }
.act-chips.center { justify-content: center; margin: 6px 0; }
.act-nextfight { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 6px; padding: 8px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,215,106,.16); font: 13px Arial, sans-serif; color: var(--text-dim); }
.act-nextfight small { font: 11px Arial, sans-serif; color: var(--text-mute); letter-spacing: .5px; }
.act-nextfight b, .act-chips b.up, .act-chips b.dn { font-weight: 700; }
b.up { color: #7dff9a; } b.dn { color: #ff8a7a; }
b.df-n { color: #9fdcff; } b.df-h { color: #ffb36a; } b.df-i { color: #ff7ad8; }
.act-sub.sm { font-size: 12px; margin: 0 0 8px; }
.act-note { display: block; margin-top: 4px; font: italic 11px Arial, sans-serif; color: var(--text-mute); }
.act-opp.revenge { border-color: rgba(255,90,70,.55); box-shadow: inset 0 0 40px rgba(255,40,20,.12); }
.act-opp.revenge h3 { color: #ff8a7a; }
.act-tiers { display: flex; flex-direction: column; gap: 5px; }
.act-tierrow { display: grid; grid-template-columns: 30px 50px 1fr 22px; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.act-tierrow > b { font: 20px var(--font); color: var(--gold-hi); text-align: center; font-weight: normal; }
.act-tierrow > small { font: 11px Arial, sans-serif; color: var(--text-mute); }
.act-tierrow .act-tiles .of-tile { width: 38px; height: 38px; }
.act-tierrow .act-tiles .of-tile img { max-width: 24px; max-height: 18px; }
.act-tierrow .act-tiles .of-tile b { font-size: 10px; }
.act-tierrow .act-ok { width: auto; font-size: 16px; }
.act-tierrow .act-tiles { flex-wrap: wrap; }
.act-tierrow.got { border-color: rgba(125,255,154,.4); background: rgba(60,160,80,.12); }
.act-h3b { margin-top: 14px; }
.act-body h3.act-red { color: #ff8a7a; }
.act-revenge { display: flex; flex-direction: column; gap: 5px; }
.act-revenge > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px; border-radius: 6px; background: rgba(255,60,40,.08); border: 1px solid rgba(255,90,70,.25); font: 13px Arial, sans-serif; color: #f2e6dc; }
.act-revenge span small { display: block; font-size: 11px; color: var(--text-mute); }
.boss-result.act-result.hot .boss-result-mark { animation: actFlame 1.2s ease-in-out infinite; }
@media (max-width: 1100px) { .act-ghost { grid-template-columns: 1fr 1fr; } .act-ghost .act-top { grid-column: 1 / -1; } }
/* desafio */
.act-chal { display: grid; grid-template-columns: 1fr 380px; gap: 12px; }
.act-chal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.act-chal-head small { color: var(--text-mute); font: 12px Arial, sans-serif; }
.act-tag { padding: 3px 10px; border-radius: 4px; font-size: 12px; letter-spacing: 1px; color: #1c1300; background: linear-gradient(180deg, #9fdcff, #3d8bff); }
.act-tag.red { color: #fff; background: linear-gradient(180deg, var(--red-hi), var(--red-lo)); }
.act-tag.gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.act-chal-name { margin: 10px 0 8px; font-weight: normal; font-size: 30px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 18px rgba(80,170,255,.35); }
.act-rules { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.act-rules li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font: 14px Arial, sans-serif; color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.act-rules li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.act-rules li.ok i { background: rgba(43,220,68,.2); color: var(--green); }
.act-rules li.bad { border-color: rgba(255,58,79,.5); background: rgba(227,18,43,.1); } .act-rules li.bad i { background: rgba(227,18,43,.3); color: #ff8a94; }
.act-chips { display: flex; gap: 8px; flex-wrap: wrap; font: 12px Arial, sans-serif; color: var(--text-dim); }
.act-chips span { padding: 3px 9px; border-radius: 10px; background: rgba(255,255,255,.06); }
.act-chips b { color: #fff; }
.act-chal-mech { text-align: center; }
/* raid */
.act-raid { display: grid; grid-template-columns: 1fr 340px; gap: 12px; }
.act-boss { text-align: center; background: radial-gradient(ellipse at 50% 60%, rgba(227,18,43,.25), transparent 70%), linear-gradient(180deg, rgba(30,10,14,.92), rgba(8,4,6,.95)); }
.act-boss .act-chal-name { text-shadow: 0 2px 0 #000, 0 0 22px rgba(255,40,60,.5); }
.act-boss.dead .act-mech { filter: grayscale(1) brightness(.5); }
.act-hp { position: relative; height: 26px; margin: 6px 20px; border-radius: 4px; border: 2px solid #3a0a10; background: #120305; overflow: hidden; box-shadow: 0 0 16px rgba(227,18,43,.3); }
.act-hp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ff5a6a, #c8102e 55%, #7a0614); transition: width .5s; }
.act-hp span { position: relative; display: block; font: 14px/22px var(--font); color: #fff; text-shadow: 0 1px 2px #000; }
.act-killed { margin: 12px 0; font-size: 18px; color: var(--green); }
.act-boss .act-stats { align-items: center; }
/* torneio */
.act-tourney { display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
.act-places { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.act-champ { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; background: radial-gradient(ellipse at 50% 30%, rgba(255,200,64,.22), transparent 70%), linear-gradient(180deg, rgba(30,22,8,.92), rgba(8,6,3,.95)); }
.act-crown { font-size: 64px; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 22px rgba(255,200,64,.7); animation: actBob 2.6s ease-in-out infinite; }
.act-crown.dim { opacity: .3; animation: none; }
.act-champ small { color: var(--text-dim); font: 12px Arial, sans-serif; } .act-champ b { font-weight: normal; font-size: 22px; color: #fff; } .act-champ span { color: var(--text-mute); font: 12px Arial, sans-serif; }
.act-myplace { margin-top: 6px; padding: 3px 10px; border-radius: 10px; background: rgba(212,175,55,.15); color: var(--gold-hi) !important; }
.act-warn { color: #ffb05a; font: 12px Arial, sans-serif; }
.act-bracket { grid-column: 1 / -1; }
.act-rounds { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.act-round { flex: none; width: 190px; display: flex; flex-direction: column; gap: 8px; justify-content: space-around; }
.act-round h4 { margin: 0; font-weight: normal; font-size: 12px; letter-spacing: 1px; color: var(--text-mute); text-align: center; }
.act-match { position: relative; display: flex; flex-direction: column; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); overflow: hidden; }
.act-match span { padding: 5px 30px 5px 9px; font: 12px Arial, sans-serif; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-match span + span { border-top: 1px solid rgba(255,255,255,.06); }
.act-match span.win { color: #fff; font-weight: 700; background: linear-gradient(90deg, rgba(212,175,55,.25), transparent); }
.act-match span.me { box-shadow: inset 3px 0 0 var(--gold-hi); }
.act-match span.bye { color: var(--text-mute); }
.act-watch { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: #1a1206; color: var(--gold-hi); font-size: 10px; cursor: pointer; }
.act-watch:hover { background: var(--gold); color: #1c1300; }
/* conquistas */
.act-ach-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.act-ach-head b { font-weight: normal; color: var(--gold-hi); } .act-ach-head small { color: var(--text-mute); font: 12px Arial, sans-serif; }
.act-ach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.act-achv { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(14,10,12,.9); }
.act-achv-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--text-mute); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.act-achv.got .act-achv-ico { color: var(--gold-hi); border-color: var(--gold); background: radial-gradient(circle, rgba(212,175,55,.35), rgba(0,0,0,.2)); }
.act-achv.ready { border-color: var(--gold-hi); box-shadow: 0 0 14px rgba(255,200,64,.25); } .act-achv.ready .act-achv-ico { color: #fff; background: var(--red); border-color: var(--gold-hi); }
.act-achv-txt b { display: block; font-weight: normal; color: #fff; font-size: 14px; } .act-achv-txt small { color: var(--text-dim); font: 12px Arial, sans-serif; }
.act-achv.got { opacity: .7; }
/* álbum */
.act-album-head { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: center; margin-bottom: 10px; }
.act-album-head b { font-weight: normal; color: var(--gold-hi); }
.act-steps { display: flex; gap: 8px; overflow-x: auto; }
.act-step { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.act-step small { color: var(--text-dim); font: 11px Arial, sans-serif; }
.act-step.ready { border-color: var(--gold-hi); } .act-step.got { opacity: .55; }
.act-step .act-ok { width: auto; font-size: 18px; }
.act-album-tabs { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.act-album-tabs button { padding: 5px 12px; border-radius: 14px; border: 1px solid rgba(212,175,55,.3); background: rgba(255,255,255,.03); color: var(--text-dim); font: 12px var(--font); cursor: pointer; }
.act-album-tabs button.on { color: #1c1300; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.act-album-tabs span { margin-left: auto; color: var(--text-mute); font: 12px Arial, sans-serif; }
.act-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.act-piece { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: radial-gradient(circle at 50% 35%, #2c2226, #120d0f); border: 1px solid var(--rc, rgba(255,255,255,.12)); }
.act-piece img { position: absolute; left: 9%; top: 9%; width: 82%; height: 82%; object-fit: contain; }
.act-piece.miss { border-color: rgba(255,255,255,.08); }
.act-piece.miss img { filter: brightness(0) opacity(.35); }
.act-piece.miss i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 18px; color: rgba(255,255,255,.35); }
/* janelas pequenas */
.act-login-pop { width: 900px; padding: 18px 22px; text-align: center; }
.act-login-pop .act-days.big .act-day { min-height: 130px; }
.act-gotpop { min-width: 380px; max-width: 640px; padding: 18px 24px; text-align: center; }
.act-gotpop .act-tiles { justify-content: center; margin: 10px 0; }
.act-gotpop .act-tiles .of-tile { width: 62px; height: 62px; }
.act-boximg { width: 160px; height: 130px; object-fit: contain; margin: 6px auto; display: block; animation: actBob 1.8s ease-in-out infinite; }
/* luta: rodada da raid e resultado */
.act-round-badge { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); z-index: 6; padding: 4px 14px; border-radius: 14px; font-size: 14px; letter-spacing: 1px; color: #fff;
  background: linear-gradient(180deg, rgba(227,18,43,.85), rgba(110,6,18,.85)); border: 1px solid var(--gold-hi); box-shadow: 0 0 12px rgba(227,18,43,.5); pointer-events: none; }
.act-result .boss-result-mark { font-size: 26px; }
/* molduras novas do saguão (conquistas e torneio) */
.ah-inspect-mech.frame-neon { border-color: #ff4fd8; box-shadow: inset 0 0 22px rgba(255,79,216,.18); }
.ah-inspect-mech.frame-ghost { border-color: #b9a6ff; box-shadow: inset 0 0 22px rgba(185,166,255,.18); }
.ah-inspect-mech.frame-diamond { border-color: #7fe8ff; box-shadow: inset 0 0 22px rgba(127,232,255,.2); }
.ah-inspect-mech.frame-raid { border-color: #ff5a5a; box-shadow: inset 0 0 22px rgba(255,90,90,.2); }
.ah-inspect-mech.frame-tourney { border-color: #ffd24a; box-shadow: inset 0 0 26px rgba(255,210,74,.3), 0 0 14px rgba(255,210,74,.35); }
.ah-inspect-mech.frame-collector { border-color: #5affc8; box-shadow: inset 0 0 22px rgba(90,255,200,.18); }
.ah-inspect-mech.frame-legend { border-color: #ff9a2a; box-shadow: inset 0 0 22px rgba(255,154,42,.22); }

/* (v3.29) selo da oferta (painel → ofertas): LIMITADO, SÓ HOJE… vermelho pulsando */
.of-flag.of-tag { color: #fff; background: linear-gradient(180deg, #ff3b4f, #b80d22); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 14px rgba(255,40,60,.55); animation: ofTagPulse 1.6s ease-in-out infinite; }
.offer-card.tag-novo .of-flag.of-tag, .offer-card.tag-lancamento .of-flag.of-tag { background: linear-gradient(180deg, #46d36b, #148a35); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 14px rgba(60,220,110,.5); }
.offer-card.tag-exclusivo .of-flag.of-tag { background: linear-gradient(180deg, #c06bff, #6a1fb8); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 14px rgba(170,80,255,.55); }
@keyframes ofTagPulse { 50% { transform: scale(1.07); } }

/* ===================================================================================================================
   (v3.29) NOVIDADES no estilo LANÇAMENTO — a peça gira num palco de luz da cor da raridade (raios girando, brilho
   pulsando, faíscas subindo, reflexo passando), selo carimbado, atributos, onde conseguir, contagem ao vivo e botão.
   =================================================================================================================== */
.news-launch { --nl: var(--rar-L); position: relative; display: grid; grid-template-columns: 250px 1fr; gap: 0; overflow: hidden; padding: 0 !important;
  border-color: color-mix(in srgb, var(--nl) 55%, transparent) !important; background: linear-gradient(155deg, rgba(18,10,14,.98), rgba(5,7,10,.98)) !important;
  box-shadow: inset 0 0 50px color-mix(in srgb, var(--nl) 10%, transparent), 0 0 24px color-mix(in srgb, var(--nl) 18%, transparent) !important; }
.news-launch.t-C { --nl: var(--rar-C); } .news-launch.t-R { --nl: var(--rar-R); } .news-launch.t-E { --nl: var(--rar-E); } .news-launch.t-L { --nl: var(--rar-L); } .news-launch.t-M { --nl: var(--rar-M); }
.news-carousel .news-item.news-launch { display: none; }
.news-carousel .news-item.news-launch.active, .news-list > .news-launch { display: grid; }
.nl-stage { position: relative; min-height: 330px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--nl) 42%, transparent) 0%, transparent 60%), radial-gradient(circle at 50% 120%, #000 30%, #0a0710 70%); border-right: 1px solid color-mix(in srgb, var(--nl) 35%, transparent); }
.nl-rays { position: absolute; inset: -60%; z-index: -1; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--nl) 22%, transparent) 0 7deg, transparent 7deg 20deg); animation: nlSpin 16s linear infinite; mask-image: radial-gradient(circle, #000 15%, transparent 58%); -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 58%); }
.nl-glow { position: absolute; width: 190px; height: 190px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--nl) 70%, #fff 10%) 0%, transparent 68%); filter: blur(10px); animation: nlPulse 2.4s ease-in-out infinite; }
.nl-floor { position: absolute; bottom: 38px; width: 170px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--nl) 55%, transparent), transparent 70%); animation: nlPulse 2.4s ease-in-out infinite; }
.nl-part { position: relative; width: min(80%, 230px); height: auto; max-height: 220px; object-fit: contain; image-rendering: auto;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000) drop-shadow(0 0 16px color-mix(in srgb, var(--nl) 80%, transparent)); animation: nlFloat 3.4s ease-in-out infinite; }
.nl-part.nl-pic { max-width: 100%; max-height: 100%; }
.news-launch.active .nl-part, .news-list > .news-launch .nl-part { animation: nlEnter .7s cubic-bezier(.2,1.4,.4,1) both, nlFloat 3.4s ease-in-out .7s infinite; }
.nl-shine { position: absolute; inset: -20% -40%; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); transform: translateX(-80%); animation: nlShine 3.6s ease-in-out 1s infinite; }
.nl-sparks { position: absolute; inset: 0; pointer-events: none; }
.nl-sparks i { position: absolute; bottom: 20px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--nl); opacity: 0; animation: nlSpark 3s linear infinite; }
.nl-sparks i:nth-child(1){left:12%;animation-delay:-.2s}.nl-sparks i:nth-child(2){left:24%;animation-delay:-1.4s}.nl-sparks i:nth-child(3){left:36%;animation-delay:-2.3s}.nl-sparks i:nth-child(4){left:48%;animation-delay:-.8s}.nl-sparks i:nth-child(5){left:60%;animation-delay:-1.9s}
.nl-sparks i:nth-child(6){left:72%;animation-delay:-2.7s}.nl-sparks i:nth-child(7){left:84%;animation-delay:-.5s}.nl-sparks i:nth-child(8){left:30%;animation-delay:-2.1s}.nl-sparks i:nth-child(9){left:66%;animation-delay:-1.1s}.nl-sparks i:nth-child(10){left:52%;animation-delay:-2.9s}
.nl-tag { position: absolute; top: 20px; left: -42px; transform: rotate(-38deg); padding: 5px 50px; background: linear-gradient(180deg, #ff3b4f, #b80d22); color: #fff; font: bold 12px Arial, sans-serif; letter-spacing: 1.2px; box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 16px rgba(255,40,60,.5); z-index: 2; }
.news-launch.active .nl-tag, .news-list > .news-launch .nl-tag { animation: nlStamp .5s cubic-bezier(.2,1.6,.4,1) .35s both; }
.nl-rarity { position: absolute; bottom: 12px; padding: 3px 14px; border-radius: 12px; font: bold 11px Arial, sans-serif; letter-spacing: 1px; color: #fff; text-transform: uppercase; box-shadow: 0 0 14px color-mix(in srgb, var(--nl) 60%, transparent); }
.nl-info { position: relative; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news-kind.k-launch { align-self: flex-start; background: linear-gradient(90deg, var(--nl), color-mix(in srgb, var(--nl) 60%, #000)); box-shadow: 0 0 12px color-mix(in srgb, var(--nl) 50%, transparent); }
.nl-title { margin: 2px 0 0; font-family: var(--font); font-weight: normal; font-size: 21px; line-height: 1.15; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.nl-name { font-family: var(--font); font-size: 17px; letter-spacing: .5px; text-shadow: 0 0 12px color-mix(in srgb, var(--nl) 60%, transparent); }
.nl-type { margin-top: -4px; font: 12px Arial, sans-serif; color: var(--text-mute); }
.nl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.nl-stats > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nl-stats > div:nth-child(n+9) { display: none; }
.nl-stats > .need-ammo { grid-column: 1 / -1; color: #ffc46a; }
.nl-stats > div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nl-stats img, .nl-stats svg { width: 14px; height: 14px; flex: none; }
.news-launch .news-body { font-size: 13.5px; }
.nl-where { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; background: rgba(255,163,26,.09); border: 1px solid rgba(255,163,26,.35); color: #ffc46a; font: bold 13px Arial, sans-serif; }
.nl-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: #ffc46a; stroke-width: 2; }
.nl-count { font: 13px Arial, sans-serif; color: var(--text-dim); }
.nl-count b { margin-left: 4px; padding: 2px 8px; border-radius: 4px; font-family: Consolas, 'Courier New', monospace; font-size: 15px; color: #ff6a7a; background: rgba(227,18,43,.12); border: 1px solid rgba(227,18,43,.4); }
.nl-count b.soon { animation: nlUrgent 1s ease-in-out infinite; }
.nl-cta { align-self: flex-start; min-width: 200px; margin-top: 4px; animation: nlCta 2s ease-in-out infinite; }
.nl-luck { margin-top: 2px; font-family: var(--font); font-size: 15px; letter-spacing: 3px; background: linear-gradient(90deg, #ffd76a, #fff6c8, #ffd76a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nlLuck 2.6s linear infinite; }
.news-panel.launch-pop { width: 760px; }
.box-card.nl-hl { animation: nlBoxHl .65s ease-in-out 4; }
@keyframes nlSpin { to { transform: rotate(360deg); } }
@keyframes nlPulse { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes nlFloat { 50% { transform: translateY(-9px) rotate(-1deg); } }
@keyframes nlEnter { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; filter: brightness(4) drop-shadow(0 0 30px #fff); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes nlShine { 0%, 55% { transform: translateX(-80%); } 85%, 100% { transform: translateX(80%); } }
@keyframes nlSpark { 0% { transform: translateY(0) scale(.4); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-300px) scale(1.2); opacity: 0; } }
@keyframes nlStamp { 0% { transform: rotate(-38deg) scale(2.4); opacity: 0; } 100% { transform: rotate(-38deg) scale(1); opacity: 1; } }
@keyframes nlUrgent { 50% { color: #fff; background: rgba(227,18,43,.45); } }
@keyframes nlCta { 50% { box-shadow: 0 0 0 3px rgba(60,220,110,.25), 0 0 22px rgba(60,220,110,.55); } }
@keyframes nlLuck { to { background-position: -200% 0; } }
@keyframes nlBoxHl { 50% { transform: scale(1.05); box-shadow: 0 0 0 3px #ffd76a, 0 0 30px rgba(255,215,106,.7); } }
@media (max-width: 760px) { .news-launch { grid-template-columns: 1fr; } .nl-stage { min-height: 220px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--nl) 35%, transparent); } .news-panel.launch-pop { width: auto; } }
@media (prefers-reduced-motion: reduce) { .nl-rays, .nl-glow, .nl-floor, .nl-part, .nl-shine, .nl-sparks i, .nl-cta, .nl-luck { animation: none !important; } }
.news-panel.news-showcase:has(.news-launch) { width: 780px; max-height: 680px; }

/* (v3.29) Ficha do piloto no hangar: cabe na tela (sem barras de rolagem brancas), peças em grade com contorno e
   moldura da raridade, nível em cada peça, rolagem fina dourada quando precisar */
.ah-inspect { width: min(900px, calc(var(--stage-w, 1200px) * 94 / 100)); max-height: min(calc(7.2px * 88), 740px); overflow: hidden; display: flex; flex-direction: column; padding: 0 18px 14px; }
.ah-inspect, .ah-inspect * { scrollbar-width: thin; scrollbar-color: #b8902a rgba(255,255,255,.04); }
.ah-inspect ::-webkit-scrollbar, .ah-inspect::-webkit-scrollbar { width: 7px; height: 7px; background: transparent; }
.ah-inspect ::-webkit-scrollbar-thumb, .ah-inspect::-webkit-scrollbar-thumb { border-radius: 4px; background: linear-gradient(180deg, #ffd76a, #8a6a14); }
.ah-inspect ::-webkit-scrollbar-track, .ah-inspect::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 4px; }
.ah-inspect-body { flex: none; grid-template-columns: minmax(280px, 1.1fr) 1fr; }
.ah-inspect-mech { height: 270px; position: relative; overflow: hidden; }
.ah-inspect-mech::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(106,204,242,.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(106,204,242,.05) 0 1px, transparent 1px 22px); pointer-events: none; }
.ah-inspect-mech canvas { position: relative; width: 100%; height: 255px; filter: drop-shadow(1px 0 0 rgba(0,0,0,.85)) drop-shadow(-1px 0 0 rgba(0,0,0,.85)) drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 -1px 0 rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(106,204,242,.28)); }
.ah-inspect-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 12px 0; padding: 2px 4px 4px 2px; overflow-x: hidden; overflow-y: auto; max-height: 252px; }
.ah-inspect-items .ah-part { position: relative; width: auto; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; padding: 6px 4px 0; overflow: hidden; border-radius: 7px;
  border: 1px solid rgba(0,0,0,.85); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), inset 0 -26px 22px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s; }
.ah-inspect-items .ah-part::before { content: ''; position: absolute; inset: 3px; border-radius: 5px; border: 1px solid rgba(255,255,255,.22); pointer-events: none; }
.ah-inspect-items .ah-part::after { content: ''; position: absolute; top: -40%; left: -60%; width: 40%; height: 180%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transition: left .5s; pointer-events: none; }
.ah-inspect-items .ah-part:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -26px 22px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.55), 0 0 14px rgba(255,215,106,.25); }
.ah-inspect-items .ah-part:hover::after { left: 130%; }
.ah-inspect-items .ah-part img { flex: 1; min-height: 0; max-width: 84px; max-height: 70px; object-fit: contain;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.ah-inspect-items .ah-part b { position: relative; z-index: 1; width: calc(100% + 8px); margin-top: 4px; padding: 4px 5px 5px; background: rgba(0,0,0,.62); color: #fff; font: bold 10px/1.15 Arial, sans-serif; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: none; text-shadow: 0 1px 0 #000; }
.ah-part-lv { position: absolute; top: 5px; right: 6px; z-index: 1; padding: 1px 5px; border-radius: 3px; font: bold 9px Arial, sans-serif; font-style: normal; color: #ffe9a8; background: rgba(0,0,0,.6); border: 1px solid rgba(255,215,106,.35); }
.ah-inspect .btns { flex: none; }
@media (max-width: 850px) { .ah-inspect { max-height: calc(7.2px * 92); overflow-y: auto; } .ah-inspect-body { grid-template-columns: 1fr; } .ah-inspect-items { max-height: none; } }
/* (v3.29) chat traduzido: 🌐 na mensagem; clicar alterna para o original */
.cb-msg.tr .cb-text { cursor: pointer; }
.cb-tr { font-style: normal; margin-right: 4px; font-size: 11px; opacity: .8; }
.cb-text.orig .cb-tr { opacity: .35; }
/* (v3.32) kits do pack do Super Mechs: a arte (assets/kits/) no lugar do ícone */
.kit-img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.7)); pointer-events: none; }
.kit-tile .kit-img { width: 46px; height: 46px; }
.kit-tile.locked .kit-img { filter: grayscale(.85) brightness(.66); }
.sd-img .kit-img.big { width: 82%; height: 82%; }
.lt-kit .kit-img { width: 18px; height: 18px; filter: none; }
.of-tile .kit-ico .kit-img { width: 30px; height: 30px; }
.act.kit-act img { object-fit: contain; }
.ammo-chip.a-guard { color: #9ad8ff; border-color: rgba(120,200,255,.55); }
.ammo-chip.a-guard svg { width: 13px; height: 13px; }
/* (v3.33) absorvedor ligado na luta (azul = energia, laranja = calor) */
.ammo-chip.a-absorb.a-ene { color: #7fdcff; border-color: rgba(90,208,255,.6); }
.ammo-chip.a-absorb.a-hea { color: #ffb15a; border-color: rgba(255,154,58,.6); }
.ammo-chip.a-absorb svg { width: 13px; height: 13px; }
/* Kits de Potência (evolução): no inventário da tela EVOLUIR, no sacrifício e na carta da caixa */
.evo-kit .kit-img { width: 54px; height: 54px; }
.evo-kit .lvl-badge { background: #2a1606; color: #ffcf8a; }
.fuel-slot { position: relative; }
.fuel-slot .kit-img { width: 86%; height: 86%; filter: none; }
.fuel-n { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.bf-item.bf-kit { object-fit: contain; }

/* (v3.33) entrada da luta: escuro por cima de tudo enquanto a arena carrega, some com um fade quando ela está pronta */
.battle-boot { position: absolute; inset: 0; z-index: 60; background: #05070a; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
#screen-battle.booting .battle-boot { opacity: 1; transition: none; }

/* (v4.0.22, pedido do autor: "a tela de carregamento... mais bonita") Tela VS antes da luta, em todas as versões (o PC
   ficava preto): cenário da luta ao fundo (só fora do Leve), modo e lugar no alto, os dois mechs com nome, patente e
   nível, barra do carregamento e uma dica embaixo. Animações só de posição/opacidade (baratas para o celular). */
.battle-vs { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse 45% 70% at 25% 50%, rgba(255,194,26,.2), transparent 70%), radial-gradient(ellipse 45% 70% at 75% 50%, rgba(255,58,42,.22), transparent 70%), linear-gradient(105deg, #0b0803, #120404 50%, #0e0303); }
.bvs-bg { position: absolute; inset: -3%; background: center / cover no-repeat; opacity: .5; transform: scale(1.06); animation: bvsBg 2.6s ease-out forwards; }
.bvs-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 62% at 25% 52%, rgba(255,194,26,.22), transparent 70%), radial-gradient(ellipse 42% 62% at 75% 52%, rgba(255,58,42,.26), transparent 70%),
    linear-gradient(105deg, rgba(14,10,2,.72), rgba(12,4,4,.38) 50%, rgba(18,3,3,.72)), radial-gradient(ellipse 75% 75% at 50% 50%, transparent 45%, rgba(0,0,0,.78) 100%); }
.battle-vs::before { content: ''; position: absolute; z-index: 1; left: 50%; top: -10%; bottom: -10%; width: 4px; transform: translateX(-50%) skewX(-12deg); background: linear-gradient(180deg, transparent, #ffd76a 30%, #ff5a3a 70%, transparent); box-shadow: 0 0 24px rgba(255,140,60,.9); }
.bvs-top { position: absolute; z-index: 2; top: 26px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.bvs-mode { padding: 6px 30px; font: 22px/1.1 var(--font); letter-spacing: 3px; color: #1a1206; background: linear-gradient(180deg, #fff0b0, #e8b830 55%, #b8860b);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.bvs-place { font: 17px/1 var(--font); letter-spacing: 6px; text-transform: uppercase; color: #f3e6c8; text-shadow: 0 2px 0 #000, 0 0 14px #000; }
.bvs-row { position: absolute; z-index: 1; left: 0; right: 0; top: 74px; bottom: 112px; display: flex; align-items: center; justify-content: center; gap: 56px; }
.bvs-side { --c: 255,194,26; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 420px; }
.bvs-side.foe { --c: 255,58,42; }
.bvs-mech { position: relative; width: 370px; height: 396px; display: flex; align-items: flex-end; justify-content: center; }
.bvs-mech::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 2px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(var(--c),.55), rgba(var(--c),.12) 55%, transparent 72%); box-shadow: 0 0 30px rgba(var(--c),.35); }
.bvs-mech canvas { position: relative; width: 370px; height: 396px; filter: drop-shadow(0 10px 14px #000) drop-shadow(0 0 18px rgba(var(--c),.25)); }
.bvs-side.foe .bvs-mech canvas { transform: scaleX(-1); }
.bvs-name { max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 32px var(--font); color: #fff; text-shadow: 0 2px 0 #000, 0 0 16px rgba(var(--c),.7); }
.bvs-tags { display: flex; align-items: center; gap: 8px; }
.bvs-rank { display: flex; filter: drop-shadow(0 2px 3px #000); }
.bvs-rank svg { width: 34px; height: 34px; }
.bvs-lvl { padding: 2px 14px; border-radius: 12px; font: 400 19px var(--font); color: #1a1206; background: linear-gradient(180deg, #fff0b0, #e8b830 55%, #b8860b); }
.bvs-side.foe .bvs-lvl { color: #ffd0c4; background: linear-gradient(180deg, #3a0a10, #160305); border: 1px solid rgba(255,90,58,.75); }
.bvs-vs { position: relative; z-index: 1; font: 400 118px/1 var(--font); color: #fff; transform: skewX(-10deg); text-shadow: 0 0 22px rgba(255,140,60,.95), 0 5px 0 #7a1010, 0 9px 14px #000; }
.bvs-foot { position: absolute; z-index: 2; left: 50%; bottom: 24px; width: min(780px, 80%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bvs-load { width: 100%; display: flex; align-items: center; gap: 14px; }
.bvs-load span { white-space: nowrap; font: 15px var(--font); letter-spacing: 2px; color: #ecd9a6; text-shadow: 0 2px 0 #000; }
.bvs-bar { flex: 1; height: 18px; padding: 3px; border: 1px solid rgba(212,175,55,.75); border-radius: 3px; background: #07090c; box-shadow: inset 0 2px 5px #000, 0 0 0 1px #000; overflow: hidden; }
.bvs-bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(.05); transition: transform .25s ease-out; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.35) 10px 13px), linear-gradient(#ffe39a, #ce851f); box-shadow: 0 0 10px rgba(233,165,52,.5); }
.bvs-tip { margin: 0; max-width: 100%; font: 16px/1.35 Arial, sans-serif; color: #ddd6c6; text-align: center; text-shadow: 0 1px 2px #000, 0 0 8px #000; }
.bvs-tip b { display: inline-block; margin-right: 10px; padding: 1px 9px; border-radius: 3px; font: 13px/1.5 var(--font); letter-spacing: 2px; color: #1a1206; background: #e8b830; vertical-align: 1px; }
.battle-vs:not(.lite) .bvs-side.me { animation: bvsL .45s cubic-bezier(.2,.9,.3,1) backwards; }
.battle-vs:not(.lite) .bvs-side.foe { animation: bvsR .45s cubic-bezier(.2,.9,.3,1) backwards; }
.battle-vs:not(.lite) .bvs-vs span { display: inline-block; animation: bvsVs .55s .12s cubic-bezier(.3,1.7,.5,1) backwards; }
.battle-vs:not(.lite) .bvs-top { animation: bvsTop .4s .1s ease-out backwards; }
.battle-vs:not(.lite) .bvs-foot { animation: bvsFoot .4s .2s ease-out backwards; }
@keyframes bvsL { from { opacity: 0; transform: translateX(-120px); } }
@keyframes bvsR { from { opacity: 0; transform: translateX(120px); } }
@keyframes bvsVs { from { opacity: 0; transform: scale(2.4); } }
@keyframes bvsTop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes bvsFoot { from { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes bvsBg { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .battle-vs *, .bvs-bg { animation: none !important; } }
/* no celular o palco encolhe ~0,57x: letras maiores para a dica, a barra e o modo continuarem legíveis */
.web-touch .bvs-mode { font-size: 28px; }
.web-touch .bvs-place { font-size: 22px; }
.web-touch .bvs-load span { font-size: 20px; }
.web-touch .bvs-bar { height: 24px; }
.web-touch .bvs-tip { font-size: 23px; }
.web-touch .bvs-tip b { font-size: 18px; }
.web-touch .bvs-row { bottom: 140px; }
.web-touch .bvs-foot { width: min(1000px, 88%); bottom: 22px; }

/* (v3.34) tela de upar: filtros e cadeado */
.upg-filters { padding: 2px 8px 6px; }
.upg-filters .if-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.upg-filters select { height: 26px; background: #15181f; color: #e8e2cf; border: 1px solid rgba(212,175,55,.35); border-radius: 3px; font: 12px 'Russo One', sans-serif; padding: 0 6px; }
.upg-filters .inv-chip.free { margin-left: auto; font-size: 11px; }
.upg-filters .inv-chip.free.on { background: rgba(80,200,120,.18); border-color: #5fd38a; color: #c8ffd8; }
.item-tile .lock-btn { position: absolute; right: 3px; top: 2px; font-size: 13px; line-height: 1; padding: 2px 3px; border-radius: 4px; cursor: pointer;
  background: rgba(0,0,0,.45); opacity: .45; transition: opacity .15s, transform .15s; z-index: 3; }
.item-tile:hover .lock-btn { opacity: .9; }
.item-tile .lock-btn:hover { transform: scale(1.18); opacity: 1; }
.item-tile .lock-btn.on { opacity: 1; background: rgba(255,196,60,.28); box-shadow: 0 0 0 1px rgba(255,210,90,.7); }
.item-tile.fuel .lock-btn { display: none; }
.item-tile.locked::after { content: ''; position: absolute; inset: 0; border: 2px solid rgba(255,206,84,.55); border-radius: inherit; pointer-events: none; }

/* ================================================================ (v4) AMIGOS (js/social.js: openFriends) */
.tb-friends { color: #9fe0ff; border-color: rgba(80,180,255,.4); }
.tb-friends:hover { border-color: #9fe0ff; }
.fr-panel { width: min(880px, calc(var(--stage-w, 1200px) * 96 / 100)); height: min(620px, calc(100% - 16px)); }
.fr-panel .ah-tabs button { padding: 0 13px; font-size: 13px; }
.fr-n { font-style: normal; font: 700 10px/16px Arial, sans-serif; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; letter-spacing: 0; }
.fr-n.hot { background: #e3122b; }
.fr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 14px; }
.fr-body::-webkit-scrollbar { width: 8px; }
.fr-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd76a, #8a6a14); border-radius: 4px; }
.fr-sum { font: 12px Arial, sans-serif; color: var(--text-dim); margin: 0 0 8px; }
.fr-sum .c-on { color: #64dc86; font-weight: normal; }
.fr-h { margin: 14px 0 6px; font: 400 13px var(--font); letter-spacing: 1.5px; color: var(--gold-hi); }
.fr-h:first-child { margin-top: 2px; }
.fr-list { display: flex; flex-direction: column; gap: 6px; }
.fr-list .cb-empty { padding: 12px 10px; }
.fr-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.fr-row:hover { border-color: rgba(212,175,55,.35); }
.fr-row.fav { border-color: rgba(255,215,106,.35); background: linear-gradient(90deg, rgba(255,200,64,.09), rgba(255,255,255,.015)); }
.fr-who { flex: 1.3; min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.fr-who svg { flex: none; }
.fr-who > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fr-who b { font-weight: normal; font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-who b .on-dot { margin-left: 4px; vertical-align: 2px; }
.fr-who small { font: 11px Arial, sans-serif; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-who:hover b { color: var(--gold-hi); }
.fr-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fr-mid small { font: 10px Arial, sans-serif; color: var(--text-mute); }
.fr-msg { font: italic 12px Arial, sans-serif; color: #e6dccb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-status { display: inline-flex; align-items: center; gap: 5px; font: 11px Arial, sans-serif; color: #64dc86; }
.fr-status i { font-style: normal; }
.fr-status.st-queue { color: #ffd44e; } .fr-status.st-battle { color: #ff6574; } .fr-status.st-offline { color: #81909b; }
.fr-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.fr-acts .sm-btn { min-width: 0; height: 32px; padding: 0 12px; font-size: 12px; }
.fr-ico { flex: none; width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #e8e0d4;
  font-size: 15px; line-height: 1; cursor: pointer; }
.fr-ico:hover:not(:disabled) { border-color: var(--gold); color: #fff; background: rgba(212,175,55,.14); }
.fr-ico:disabled { opacity: .32; cursor: default; filter: grayscale(1); }
.fr-star { border-color: transparent; background: none; font-size: 19px; color: #6f665b; }
.fr-star.on { color: #ffd76a; text-shadow: 0 0 8px rgba(255,200,64,.7); }
.fr-gift-open { animation: frGift 1.2s ease-in-out infinite; }
@keyframes frGift { 50% { box-shadow: 0 0 0 2px rgba(255,215,106,.55), 0 0 16px rgba(255,200,64,.7); } }
.fr-menu { position: absolute; right: 8px; top: calc(100% - 4px); z-index: 5; display: flex; flex-direction: column; min-width: 170px; padding: 4px; border-radius: 8px;
  border: 1px solid rgba(212,175,55,.45); background: #120d0c; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.fr-menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 5px; background: none; color: #eee4d6; font: 13px Arial, sans-serif; cursor: pointer; }
.fr-menu button:hover { background: rgba(255,255,255,.08); }
.fr-menu button.danger { color: #ff7d86; }
.fr-tag { font: 700 11px Arial, sans-serif; color: #64dc86; padding: 0 6px; }
.fr-tag.off { color: #ff7d86; }
.fr-search { display: flex; gap: 8px; margin-bottom: 10px; }
.fr-search input { flex: 1; height: 38px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(212,175,55,.35); background: #0b0809; color: #fff; font: 14px Arial, sans-serif; outline: none; }
.fr-search input:focus { border-color: var(--gold-hi); }
.fr-search #frQ { flex: .9; }
.fr-opts { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.fr-opts label { display: flex; align-items: center; gap: 8px; font: 13px Arial, sans-serif; color: #e8e0d4; cursor: pointer; }
.fr-opts input { width: 16px; height: 16px; accent-color: #d4af37; }
.fr-hint { margin: 8px 2px 0; font: 12px Arial, sans-serif; color: var(--text-mute); }
.fr-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 460px; line-height: 1.5; }
.fr-slot { display: inline-flex; }
.fr-card-btn { white-space: nowrap; }
.pc-friend { flex: none; }
.pc-friend .sm-btn { min-width: 0; height: 40px; padding: 0 14px; font-size: 13px; }

/* ================================================================ (v4.0.2) AMIGOS: conversa, ranking, ao vivo e convite */
.fr-dm-btn { position: relative; }
.fr-unread { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e3122b; color: #fff;
  font: 700 10px/16px Arial, sans-serif; font-style: normal; text-align: center; }
.fr-live { animation: frLive 1.1s ease-in-out infinite; }
@keyframes frLive { 50% { box-shadow: 0 0 0 2px rgba(255,80,90,.5), 0 0 14px rgba(255,40,60,.7); } }
.fr-chat { display: flex; flex-direction: column; height: 100%; min-height: 420px; }
.fr-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.fr-chat-head .sm-btn { min-width: 0; height: 34px; padding: 0 12px; font-size: 12px; }
.fr-chat-head .fr-who { flex: none; }
.fr-chat-log { flex: 1; min-height: 260px; max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 4px; }
.fr-chat-log::-webkit-scrollbar { width: 6px; }
.fr-chat-log::-webkit-scrollbar-thumb { background: rgba(212,175,55,.5); border-radius: 3px; }
.fr-dm { position: relative; max-width: 70%; padding: 7px 11px 5px; border-radius: 10px; font: 14px Arial, 'Segoe UI Emoji', sans-serif; color: #fff; word-break: break-word; }
.fr-dm p { margin: 0 0 2px; white-space: pre-wrap; }
.fr-dm small { display: block; font-size: 10px; color: rgba(255,255,255,.55); text-align: right; }
.fr-dm.me { align-self: flex-end; background: linear-gradient(180deg, #3a2a10, #24190a); border: 1px solid rgba(212,175,55,.45); }
.fr-dm.them { align-self: flex-start; background: #17141b; border: 1px solid rgba(255,255,255,.1); }
.fr-dm-rep { position: absolute; right: -24px; top: 4px; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #8a7f74; font-size: 12px; cursor: pointer; opacity: 0; }
.fr-dm.them:hover .fr-dm-rep { opacity: 1; }
.fr-dm-rep:hover { color: #ff7d86; }
.fr-dm-day { align-self: center; margin: 4px 0; padding: 2px 10px; border-radius: 10px; background: rgba(255,255,255,.06); font: 11px Arial, sans-serif; color: var(--text-mute); }
.fr-more { align-self: center; padding: 4px 12px; border-radius: 12px; border: 1px solid rgba(212,175,55,.3); background: none; color: var(--gold-hi); font: 11px Arial, sans-serif; cursor: pointer; }
.fr-chat-err { min-height: 0; font: 12px Arial, sans-serif; color: #ff9a9a; }
.fr-chat-err:not(:empty) { margin: 4px 0; }
.fr-chat-row { display: flex; gap: 8px; }
.fr-chat-row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(212,175,55,.35); background: #0b0809; color: #fff;
  font: 14px Arial, 'Segoe UI Emoji', sans-serif; outline: none; }
.fr-chat-row input:focus { border-color: var(--gold-hi); }
.fr-chat-row .sm-btn { min-width: 52px; height: 40px; padding: 0; font-size: 16px; }
.fr-rank.you { border-color: rgba(255,215,106,.55); background: linear-gradient(90deg, rgba(255,200,64,.12), rgba(255,255,255,.015)); }
.fr-pos { flex: none; width: 30px; text-align: center; font: 400 18px var(--font); color: var(--gold-hi); }
.fr-pts { font: 13px var(--font); color: #fff; letter-spacing: .5px; }
.fr-ref { margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(80,180,255,.35); background: linear-gradient(90deg, rgba(40,110,190,.18), rgba(255,255,255,.02)); }
.fr-ref p { margin: 8px 0 0; font: 12.5px/1.45 Arial, sans-serif; color: #dbe7f2; }
.fr-ref-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fr-ref-top small { display: block; font: 11px var(--font); letter-spacing: 1.5px; color: #9fd2ff; }
.fr-code { display: block; font: 400 26px var(--font); letter-spacing: 6px; color: #fff; text-shadow: 0 0 12px rgba(80,180,255,.6); }
.fr-ref-top .sm-btn { min-width: 0; height: 36px; padding: 0 16px; font-size: 13px; }
.fr-ref-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fr-ref-list span { padding: 3px 9px; border-radius: 10px; background: rgba(255,255,255,.07); font: 11px Arial, sans-serif; color: #cfd8e0; }
.fr-ref-list span.done { background: rgba(60,220,110,.16); color: #7df0a4; }
.fr-ref-use { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fr-ref-use input { width: 270px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(80,180,255,.45); background: #08090c; color: #fff; font: 14px Arial, sans-serif;
  letter-spacing: 2px; text-transform: uppercase; outline: none; }
.fr-ref-use .sm-btn { min-width: 0; height: 34px; padding: 0 14px; font-size: 12px; }
.fr-ref-use small { font: 11px Arial, sans-serif; color: var(--text-mute); }

/* (v4.0.2) barra de cima: AMIGOS e SUPORTE como ícones com o número em cima */
.tb-ico { width: 38px; padding: 0; display: grid; place-items: center; }
.tb-ico svg { width: 21px; height: 21px; fill: currentColor; }
.tb-ico.tb-friends { color: #8fd4ff; border-color: rgba(80,180,255,.45); }
.tb-ico.tb-friends:hover { color: #d6f0ff; border-color: #8fd4ff; }

/* ================================================================ (v4.0.2) GUERRA DE CLÃS (aba do Meu Clã) */
.cw { padding: 4px 2px 8px; }
.cw-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,200,64,.12), rgba(0,0,0,.2) 45%, rgba(0,0,0,.2) 55%, rgba(227,18,43,.16)); border: 1px solid rgba(212,175,55,.3); }
.cw-side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cw-side b { font: 400 16px var(--font); color: #fff; letter-spacing: 1px; }
.cw-side strong { font: 400 34px var(--font); color: var(--gold-hi); text-shadow: 0 0 14px rgba(255,200,64,.5); }
.cw-side.rival strong { color: #ff8a92; text-shadow: 0 0 14px rgba(255,60,80,.45); }
.cw-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cw-mid em { font: 400 32px var(--font); font-style: normal; color: #fff; text-shadow: 0 0 16px rgba(255,255,255,.4); }
.cw-mid small { font: 11px Arial, sans-serif; color: var(--text-dim); white-space: nowrap; }
.cw-bar { height: 10px; margin: 10px 0 6px; border-radius: 5px; background: linear-gradient(90deg, #6e0612, #e3122b); overflow: hidden; }
.cw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a14, #ffd76a); transition: width .6s; }
.cw-you { margin: 6px 0 10px; font: 13px Arial, sans-serif; color: #e8e0d4; text-align: center; }
.cw-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cw-top { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.cw-top h4 { margin: 0 0 6px; font: 400 12px var(--font); letter-spacing: 1px; color: var(--gold-hi); }
.cw-top > div { display: flex; align-items: center; gap: 8px; padding: 3px 0; font: 13px Arial, sans-serif; color: #e8e0d4; }
.cw-top > div.you b { color: var(--gold-hi); }
.cw-top i { width: 18px; font-style: normal; color: var(--text-mute); text-align: center; }
.cw-top b { flex: 1; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-top small { font: 12px Arial, sans-serif; color: var(--text-mute); }
.cw-rules { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px dashed rgba(212,175,55,.3); }
.cw-rules b { font: 400 12px var(--font); letter-spacing: 1px; color: var(--gold-hi); }
.cw-rules span { font: 12.5px Arial, sans-serif; color: #e0d6c8; }
.cw-rules small { font: 11px Arial, sans-serif; color: var(--text-mute); }
.cw-none { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; text-align: center; font: 14px Arial, sans-serif; color: #e8e0d4; }
.cw-none small { color: var(--text-mute); }
.cw-hist { display: flex; flex-direction: column; gap: 4px; }
.cw-h { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.035); font: 13px Arial, sans-serif; color: #e0d6c8; }
.cw-h b { width: 80px; font: 400 12px var(--font); }
.cw-h.win b { color: #64dc86; } .cw-h.loss b { color: #ff7d86; } .cw-h.draw b { color: #ffd44e; }
.cw-h span { flex: 1; }
.cw-h i { font-style: normal; color: #fff; }
/* (v4.0.2) a guerra rola dentro da aba: os botões de baixo do clã ficam sempre à vista */
.cw { max-height: 318px; overflow-y: auto; padding-right: 6px; }
.cw::-webkit-scrollbar { width: 6px; }
.cw::-webkit-scrollbar-thumb { background: rgba(212,175,55,.5); border-radius: 3px; }
.cw-vs { padding: 8px 12px; }
.cw-side svg { width: 64px; height: auto; }
.cw-side strong { font-size: 28px; line-height: 1.1; }

/* (v4.0.2) o texto de ajuda do campo do código aparece inteiro (sem maiúsculas espaçadas) */
.fr-ref-use input::placeholder { text-transform: none; letter-spacing: 0; font-size: 13px; color: #7f8b96; }

/* (v4.0.7) missão de exploração: tela de renascer por 20 P (texto com margem e no centro) */
.panel.reward.revive .replay-sub { padding: 0 22px; text-align: center; }
.panel.reward.revive .revive-have { color: #d69bff; font-weight: bold; }
/* (v4.0.7) "EXPLORAR MISSÃO" quebrava em duas linhas e ficava cortado no botão da fase (PC e celular) */
.lp-go { white-space: nowrap; font-size: 21px; letter-spacing: .5px; padding: 0 10px; }
/* (v4.0.8) relógio do turno no meio da tela também quando o palco é mais largo que 1200 (monitor largo); em 1200 fica igual */
.hud-center { left: calc(50% - 130px); }
/* (v4.0.8) número de peças de cada aba do hangar: estava preto em cima do fundo escuro (não dava para ler) */
.inv-tab .tab-count { z-index: 1; color: var(--gold-hi); }

/* (v4.0.9, pedido do autor: "melhore isso") relógio do turno no estilo de mostrador cyberpunk: disco escuro por dentro,
   marcas em volta (giram devagar quando não há contagem), anel com brilho e o "SEU TURNO / VEZ DO INIMIGO" numa plaquinha
   embaixo — antes o texto passava por cima do anel e ficava espremido. Dourado na sua vez, vermelho na do inimigo. */
.tring .tr-core { fill: rgba(8, 5, 4, .92); stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.lcd.player .tring .tr-core { fill: rgba(28, 18, 4, .92); }
.tring .tr-ticks { fill: none; stroke: rgba(255, 106, 74, .45); stroke-width: 3; stroke-dasharray: 1.2 3.83; transform-box: fill-box; transform-origin: center; }
.lcd.player .tring .tr-ticks { stroke: rgba(255, 215, 106, .55); }
.lcd.free .tring .tr-ticks { animation: lcdTicks 14s linear infinite; }
@keyframes lcdTicks { to { transform: rotate(360deg); } }
.tring .tr-bg { stroke: rgba(255, 255, 255, .1); stroke-width: 7; }
.tring .tr-fg { stroke-width: 7; filter: drop-shadow(0 0 5px #ff5a3a); }
.lcd.player .tring .tr-fg { filter: drop-shadow(0 0 6px #ffc840); }
.lcd::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 14px rgba(255, 90, 58, .28); }
.lcd.player::after { box-shadow: inset 0 0 16px rgba(255, 200, 64, .32); }
.lcd-val { margin-top: -6px; }
.lcd.free .lcd-val { margin-top: -8px; }
.lcd.free .lcd-val svg { width: 36px; height: 36px; }
.lcd-label { left: 50%; right: auto; bottom: -1px; transform: translateX(-50%); z-index: 1;
  padding: 2px 9px 3px; border-radius: 9px; font-size: 10px; line-height: 1.1; letter-spacing: 1px;
  color: #ffd0c4; background: linear-gradient(180deg, #3a0a10, #160305); border: 1px solid rgba(255, 90, 58, .7);
  box-shadow: 0 0 8px rgba(255, 58, 42, .45), 0 2px 4px rgba(0, 0, 0, .7); text-shadow: 0 1px 0 #000; }
.lcd.player .lcd-label { color: #1a1206; text-shadow: none; background: linear-gradient(180deg, #fff0b0, #e8b830 55%, #b8860b);
  border-color: #fff0b0; box-shadow: 0 0 10px rgba(255, 200, 64, .55), 0 2px 4px rgba(0, 0, 0, .7); }
.lcd-label:empty { display: none; }

/* ---------- (v4.0.11, pedido do autor: painel da luta inspirado no Super Mechs, no nosso estilo) nível e patente num
   selo ao lado da munição; números maiores na vida, energia, calor e resistências; munição numa barrinha de pentes
   (gomos) com o número ao lado. */
/* (pedido do autor: "pode deixar no lado das munições") selo do piloto na aba das ações, ao lado da munição: insígnia
   da patente e o nível — dourado para você e vermelho para o inimigo (espelhado do lado dele); o retrato fica limpo */
.pilot-chip { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 4px; border-radius: 11px; cursor: help;
  background: linear-gradient(180deg, rgba(60, 44, 10, .85), rgba(14, 10, 3, .9)); border: 1px solid rgba(255, 215, 106, .75);
  box-shadow: 0 0 8px rgba(255, 200, 64, .35), inset 0 1px 0 rgba(255, 240, 176, .25); }
.pilot-chip:not(.has-rank) { padding-left: 9px; }
.pc-rank { display: flex; margin: -4px 0; filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(255, 215, 106, .45)); }
.pc-rank svg { display: block; width: 26px; height: 26px; }
.pc-lvl { display: flex; align-items: baseline; gap: 2px; line-height: 1; white-space: nowrap; color: var(--gold-hi); text-shadow: 0 1px 0 #000; }
.pc-lvl small { font-size: 10px; letter-spacing: .5px; opacity: .75; }
.pc-lvl b { font-weight: normal; font-size: 16px; }
.turn-dots.right .pilot-chip { flex-direction: row-reverse; padding: 0 4px 0 9px;
  background: linear-gradient(180deg, rgba(70, 12, 16, .85), rgba(16, 3, 5, .9)); border-color: rgba(255, 90, 58, .75);
  box-shadow: 0 0 8px rgba(255, 58, 42, .35), inset 0 1px 0 rgba(255, 190, 170, .2); }
.turn-dots.right .pilot-chip:not(.has-rank) { padding-right: 9px; }
.turn-dots.right .pc-lvl { color: #ffd0c4; }
.turn-dots.right .pc-rank { filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(255, 90, 58, .45)); }
.hud-enemy .hud-brk { transform: scaleX(-1); }
/* números maiores */
.hud-hp-text b { font-size: 25px; letter-spacing: .3px; }
.hud-hp-text b small { font-size: 15px; }
.hud-hp-pct { font-size: 16px; }
.mtext { font-size: 17px; letter-spacing: .3px; }
.mchip { font-size: 15px; }
.res-chip b { font-size: 17px; }
/* munição em barra: um gomo por tiro (até 8), aceso = ainda tem; com 1/4 ou menos fica vermelha */
.ammo-chip.ammo-bar { --c: 255, 210, 58; height: 22px; gap: 5px; padding: 0 8px 0 6px; font-size: 15px; }
.ammo-chip.ammo-bar.a-missile { --c: 255, 140, 80; }
.ammo-chip.ammo-bar.low { --c: 255, 80, 80; }
.ammo-chip.ammo-bar.a-missile svg { width: 24px; height: 12px; }
.ammo-chip.ammo-bar.a-bullet svg { width: 8px; height: 15px; }
.ab-segs { display: flex; gap: 2px; }
.ab-segs s { width: 6px; height: 12px; border-radius: 1.5px; transform: skewX(-14deg); text-decoration: none;
  background: rgba(var(--c), .1); box-shadow: inset 0 0 0 1px rgba(var(--c), .3); transition: background .25s, box-shadow .25s; }
.ab-segs s.on { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgb(var(--c)) 45%, rgba(var(--c), .7)); box-shadow: 0 0 5px rgba(var(--c), .7); }
.turn-dots.right .ammo-chip.ammo-bar { flex-direction: row-reverse; }
.turn-dots.right .ab-segs { flex-direction: row-reverse; }
.turn-dots.right .ab-segs s { transform: skewX(14deg); }

/* ---------- (v4.0.13, pedido do autor: "podemos juntar sem deixar espaço cortado") em tela larga os painéis da luta
   ficavam soltos, com um vão de fundo entre eles e o painel do meio. Agora os dos lados crescem até encostar no do meio
   em qualquer largura (passam 16px por baixo da rampa dele, que fica por cima por vir depois no HTML) e as barras
   ficam mais compridas. No celular a conta desconta o aumento (--touch-k) para encostar do mesmo jeito. */
.hud { width: max(470px, calc(50% - 114px)); }

/* ---------- (v4.0.16, pedido do autor: "ter o máximo de jogadores") convite por link: COMPARTILHAR ao lado do COPIAR
   na tela de amigos e o aviso do prêmio na abertura para quem chegou pelo link de um amigo */
.fr-ref-btns { display: flex; gap: 8px; flex: none; }
.au-invite { margin: 8px 0 6px; padding: 8px 12px; border-radius: 6px; text-align: center; font: 13px/1.4 Arial, sans-serif; color: #fff3c4;
  background: linear-gradient(90deg, rgba(255, 194, 26, .16), rgba(255, 194, 26, .06)); border: 1px solid rgba(255, 215, 106, .55);
  box-shadow: 0 0 12px rgba(255, 194, 26, .18); }
.title-auth.welcome .au-invite { position: absolute; right: calc(100% + 24px); top: 6px; width: 250px; margin: 0; text-align: left;
  animation: inviteIn .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes inviteIn { from { opacity: 0; transform: translateX(-14px); } }