:root {
  --bg: #0b0c11;
  --panel: rgba(18, 19, 27, .92);
  --panel-2: #1b1d27;
  --line: rgba(255, 255, 255, .09);
  --text: #eef0f6;
  --muted: #9aa0b3;
  --accent: #ff4d1a;
  --accent-2: #ff8a1f;
  --gold: #ffcf4a;
  --money: #5fd4ff;
  --hp: #3ddc84;
  --anger: #4aa8ff;
  --danger: #ff5a5f;
  --radius: 12px;
  --display: 'Teko', 'Impact', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.4 'Inter', system-ui, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#bgfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#app { position: relative; z-index: 1; height: 100%; }
.screen { height: 100%; }

/* ---------- botões ---------- */
.btn { border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 800; letter-spacing: .02em; transition: transform .08s, filter .15s, opacity .15s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: 0 6px 18px rgba(255, 77, 26, .35); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn small { display: block; font-weight: 600; font-size: 11px; opacity: .85; }
.chip { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 700; min-width: 44px; }
.chip:hover { background: rgba(255, 255, 255, .13); }

/* ---------- login ---------- */
#screen-auth { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: end; align-items: safe center; padding: 28px clamp(16px, 7vw, 120px) 14px; overflow: auto; }
/* escurece o lado do cartão sem apagar o logo animado do lado esquerdo */
.auth-shade { position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 4, 7, 0) 30%, rgba(4, 4, 7, .5) 58%, rgba(4, 4, 7, .86) 100%),
    radial-gradient(130% 100% at 40% 50%, transparent 55%, rgba(0, 0, 0, .65) 100%); }
.auth-card { position: relative; width: min(420px, 100%); padding: 30px 30px 22px;
  background: linear-gradient(165deg, rgba(30, 24, 30, .93), rgba(11, 11, 16, .96) 55%);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  backdrop-filter: blur(10px); animation: auth-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.auth-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--gold), var(--accent-2) 30%, var(--accent) 65%, #a8101a); }
/* três faixas diagonais no canto, como nas telas do KOF */
.auth-card::after { content: ''; position: absolute; top: 18px; right: 22px; width: 46px; height: 14px; opacity: .55;
  background: repeating-linear-gradient(115deg, var(--accent) 0 5px, transparent 5px 10px); }
.auth-kicker { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 60px); font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.auth-kicker::before { content: ''; width: 18px; height: 2px; background: var(--gold); }
.brand { font-family: var(--display); font-weight: 700; font-size: 82px; line-height: .8; margin: 14px 0 0; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.brand-image { font-size: 0; line-height: 1; }
.brand-image img { display: block; width: 100%; max-width: 360px; height: auto; }
.brand span { background: linear-gradient(180deg, #ffe07a 5%, var(--accent-2) 45%, #ff3a12 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 90, 20, .35)); }
.brand-sub { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.auth-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 0; font-size: 12px; font-weight: 600; color: #c4c8d6; }
.auth-perks li { display: inline-flex; align-items: center; gap: 6px; }
.auth-perks svg { width: 15px; height: 15px; color: var(--accent-2); }

.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 18px; padding: 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 8px; }
.auth-tabs button { position: relative; z-index: 1; background: none; border: 0; padding: 8px 0 5px; font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.auth-tabs button:hover { color: #fff; }
.auth-tabs button[aria-selected="true"] { color: #fff; }
.auth-tabs-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 6px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 18px rgba(255, 77, 26, .3); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
#screen-auth[data-tab="register"] .auth-tabs-ink { transform: translateX(100%); }

.auth-form { animation: auth-fade .3s ease both; }
.field { margin-bottom: 12px; }
/* no cadastro o cabeçalho encolhe para o formulário caber na tela */
#screen-auth[data-tab="register"] .brand-sub, #screen-auth[data-tab="register"] .auth-perks { display: none; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b7bccb; margin-bottom: 7px; }
.input { position: relative; display: flex; align-items: center; background: #0b0c12; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.input:focus-within { border-color: rgba(255, 138, 31, .85); box-shadow: 0 0 0 3px rgba(255, 98, 31, .18); }
.input > svg { flex: none; width: 18px; height: 18px; margin-left: 13px; color: #6c7184; transition: color .15s; }
.input:focus-within > svg { color: var(--accent-2); }
.input input { flex: 1; min-width: 0; padding: 12px 12px; background: none; border: 0; outline: none; color: var(--text); font: inherit; }
.input input::placeholder { color: #565b6d; }
.reveal-pass { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: #767b8e; }
.reveal-pass:hover, .reveal-pass:focus-visible { color: #fff; }
.reveal-pass svg { width: 18px; height: 18px; }
.reveal-pass .eye-off, .reveal-pass[aria-pressed="true"] .eye { display: none; }
.reveal-pass[aria-pressed="true"] .eye-off { display: block; }
.field[data-state="bad"] .input { border-color: rgba(255, 90, 95, .75); }
.field[data-state="ok"] .input { border-color: rgba(61, 220, 132, .55); }
.hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.hint:empty { display: none; }
.field[data-state="bad"] .hint:not(.caps) { color: #ff8a8e; }
.field[data-state="ok"] .hint:not(.caps) { color: #6fe3a5; }
.hint.caps { color: var(--gold); font-weight: 600; }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.meter i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); transition: background .2s; }
.meter[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.meter[data-score="2"] i:nth-child(-n+2) { background: #ff9f1a; }
.meter[data-score="3"] i:nth-child(-n+3) { background: #ffd34d; }
.meter[data-score="4"] i { background: var(--hp); }
.meter-label { font-size: 11px; letter-spacing: .04em; text-transform: none; font-weight: 700; }
.meter-label[data-score="1"] { color: var(--danger); }
.meter-label[data-score="2"] { color: #ff9f1a; }
.meter-label[data-score="3"] { color: #ffd34d; }
.meter-label[data-score="4"] { color: var(--hp); }
.form-error { position: relative; margin: 2px 0 14px; padding: 10px 12px 10px 38px; border-radius: 8px; background: rgba(255, 90, 95, .1); border: 1px solid rgba(255, 90, 95, .35); color: #ffb9bb; font-size: 13px; line-height: 1.4; }
.form-error::before { content: '!'; position: absolute; left: 11px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-weight: 900; font-size: 12px; display: grid; place-items: center; }
.form-error:empty { display: none; }
.btn-lg { position: relative; overflow: hidden; width: 100%; padding: 14px 18px 11px; border-radius: 8px; font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: .09em; text-transform: uppercase; }
.btn-lg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s; }
.btn-lg:hover:not(:disabled)::after { transform: translateX(120%); }
.btn.busy span { visibility: hidden; }
.btn.busy::before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.auth-switch { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.auth-switch button { padding: 0; background: none; border: 0; color: var(--accent-2); font-weight: 700; }
.auth-switch button:hover { text-decoration: underline; }
.auth-foot { position: relative; justify-self: center; padding-top: 14px; font-size: 11.5px; color: rgba(255, 255, 255, .38); text-align: center; }
.shake { animation: shake .42s; }
@keyframes auth-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes auth-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-form, .shake { animation: none; }
  .auth-tabs-ink, .btn-lg::after { transition: none; }
}

/* ---------- escolha ---------- */
#screen-select { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.sel-shade { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 25% 100%, rgba(255, 77, 26, .16), transparent 70%), linear-gradient(180deg, rgba(5, 5, 8, .72), rgba(5, 5, 8, .93) 35%); }
.sel-head { position: relative; padding: 16px clamp(16px, 4vw, 48px) 4px; }
.sel-head h2 { font-family: var(--display); font-weight: 700; font-size: 50px; line-height: .82; margin: 8px 0 0; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.sel-head h2 span { background: linear-gradient(180deg, #ffe07a 5%, var(--accent-2) 45%, #ff3a12 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sel-head p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.sel-body { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; min-height: 0; padding: 12px clamp(16px, 4vw, 48px) 14px; }

/* painel de destaque: boneco animado, atributos e golpes */
.sel-feature { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); min-height: 0; overflow: hidden;
  background: linear-gradient(165deg, rgba(30, 24, 30, .92), rgba(11, 11, 16, .96) 60%); border: 1px solid rgba(255, 255, 255, .08);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.sel-feature::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--gold), var(--accent-2) 30%, var(--accent) 65%, #a8101a); }
.feat-stage { position: relative; min-height: 280px; overflow: hidden;
  background: radial-gradient(85% 60% at 50% 88%, rgba(255, 110, 40, .3), transparent 70%), linear-gradient(180deg, #19131b, #0b0a0f); }
.feat-stage::after { content: ''; position: absolute; left: 50%; bottom: 74px; width: 64%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 150, 70, .45), rgba(255, 90, 30, .12) 60%, transparent); }
.feat-art { position: absolute; top: -4%; right: -30%; height: 118%; opacity: .2; pointer-events: none; object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
#feat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.feat-info { display: flex; flex-direction: column; gap: 11px; min-height: 0; overflow: auto; padding: 20px 22px 16px; }
.feat-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.feat-title h3 { font-family: var(--display); font-weight: 700; font-size: 50px; line-height: .82; margin: 0; letter-spacing: .01em; }
.feat-title .role { margin: 0; }
.feat-desc { margin: 0; color: #c9ccd8; font-size: 13.5px; line-height: 1.5; }
.feat-stats { display: grid; gap: 7px; }
.stat { display: grid; grid-template-columns: 58px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b7bccb; }
.stat .bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.stat .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.stat b { text-align: right; color: #fff; font-size: 12.5px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.feat-skills { list-style: none; display: grid; gap: 9px; margin: 2px 0 0; padding: 0; }
.feat-skills li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; }
.feat-skills img { width: 38px; height: 38px; border-radius: 8px; background: #000; border: 1px solid rgba(255, 255, 255, .12); }
.feat-skills .k { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.feat-skills .k.super { color: var(--gold); }
.feat-skills strong { display: block; font-size: 14px; line-height: 1.2; }
.feat-skills p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-pick { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); width: min(78%, 240px); padding: 12px 18px 10px; font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; border-radius: 8px; }
.feat-pick.remove { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; }

/* grade de retratos */
.sel-roster { min-height: 0; overflow: auto; padding: 2px; }
.sel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { --rc: var(--accent); position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: linear-gradient(180deg, #241a20, #0d0c11);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); transition: transform .14s, opacity .2s; }
.tile img { position: absolute; left: 50%; top: 2%; height: 165%; transform: translateX(-50%); object-fit: cover; object-position: top; pointer-events: none;
  filter: saturate(.8) brightness(.78); transition: filter .2s, transform .3s; }
.tile .tname { position: absolute; inset: auto 0 0; z-index: 1; padding: 22px 9px 8px; text-align: left; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9) 70%);
  font-family: var(--display); font-size: 22px; line-height: .9; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.tile .tname small { display: block; margin-top: 3px; font-family: Inter, sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--rc); }
.tile::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 2px solid rgba(255, 255, 255, .08); transition: border-color .15s, box-shadow .15s; }
.tile .stripe { position: absolute; inset: auto 0 0; height: 3px; z-index: 2; background: var(--rc); }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); outline: none; }
.tile:hover img, .tile:focus-visible img, .tile.active img, .tile.picked img { filter: none; transform: translateX(-50%) scale(1.05); }
.tile.active::before { border-color: rgba(255, 207, 74, .75); }
.tile.picked::before { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 28px rgba(255, 77, 26, .4); }
.tile.picked::after { content: attr(data-order); position: absolute; top: 7px; right: 7px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1; padding-top: 2px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.sel-grid.full .tile:not(.picked) { opacity: .45; }

/* barra do time */
.sel-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px clamp(16px, 4vw, 48px) 16px;
  background: linear-gradient(180deg, rgba(10, 10, 14, .55), rgba(10, 10, 14, .97)); border-top: 1px solid var(--line); }
.team-slots { display: flex; gap: 10px; flex: 1; min-width: 0; }
.slot { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; max-width: 240px; height: 64px; padding: 0 10px 0 0; overflow: hidden; text-align: left;
  background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .16); border-radius: 8px; color: var(--muted); }
.slot .snum { flex: none; align-self: stretch; width: 34px; display: grid; place-items: center; font-family: var(--display); font-size: 26px; font-weight: 600; color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); }
.slot .sinfo { min-width: 0; }
.slot b { display: block; font-family: var(--display); font-size: 23px; font-weight: 600; line-height: .95; letter-spacing: .03em; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot small { display: block; font-size: 11px; color: var(--muted); }
.slot img { flex: none; width: 54px; height: 64px; object-fit: cover; object-position: top; }
.slot .sx { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; line-height: 1; color: var(--muted); background: rgba(255, 255, 255, .06); }
.slot.filled { border-style: solid; border-color: rgba(255, 138, 31, .45); background: linear-gradient(90deg, rgba(255, 77, 26, .16), rgba(255, 255, 255, .03)); color: #fff; cursor: pointer; }
.slot.filled .snum { color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.slot.filled:hover .sx { color: #fff; background: var(--danger); }
#btn-start.btn-lg { width: auto; min-width: 240px; }

.role { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; margin: 6px 0 8px; }
.role-tank { background: rgba(95, 212, 255, .15); color: #7fdcff; }
.role-dps { background: rgba(255, 90, 95, .15); color: #ff8a8e; }
.role-gank { background: rgba(255, 207, 74, .15); color: var(--gold); }
.skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.skills li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #d4d7e2; }
.skills img { width: 26px; height: 26px; border-radius: 6px; background: #000; flex: none; }
.skills .k { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; display: block; letter-spacing: .06em; }

@media (max-width: 1100px) {
  #screen-select { grid-template-rows: auto auto auto; align-content: start; overflow: auto; }
  .sel-body { grid-template-columns: 1fr; min-height: auto; }
  .sel-feature, .feat-info { min-height: auto; }
  .feat-info, .sel-roster { overflow: visible; }
  .sel-foot { position: sticky; bottom: 0; z-index: 3; background: rgba(10, 10, 14, .97); backdrop-filter: blur(6px); }
}
@media (max-width: 640px) {
  .sel-head h2 { font-size: 46px; }
  .sel-feature { grid-template-columns: 1fr; }
  .feat-stage { min-height: 230px; }
  .feat-title h3 { font-size: 42px; }
  .sel-grid { gap: 8px; }
  .tile .tname { font-size: 17px; padding: 16px 6px 6px; }
  .tile .tname small { display: none; }
  .sel-foot { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 12px; }
  .slot { height: 52px; gap: 0; padding: 0; }
  .slot img { width: 44px; height: 52px; }
  .slot .sinfo, .slot .sx { display: none; }
  .slot:not(.filled) .snum { width: 100%; }
  #btn-start.btn-lg { width: 100%; }
}

/* ---------- jogo ---------- */
#screen-game { position: relative; overflow: hidden; background: #07080b; }
.coin { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.coin.gold { background: radial-gradient(circle at 35% 30%, #fff6c4, var(--gold) 42%, #a8740a 100%); box-shadow: 0 0 10px rgba(255, 207, 74, .45), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.coin.money { background: radial-gradient(circle at 35% 30%, #e8fbff, var(--money) 42%, #13649e 100%); box-shadow: 0 0 10px rgba(95, 212, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .25); }

/* HUD */
.hud { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); padding: 8px clamp(12px, 2vw, 22px);
  background: linear-gradient(180deg, #15131a, #0c0c11); }
.hud::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--accent-2) 30%, var(--accent) 65%, #a8101a); opacity: .85; }
.hud-stage { display: grid; line-height: 1; min-width: 0; }
.hud-kicker { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hud-stage strong { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: .03em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-wave { display: flex; align-items: center; gap: 12px; padding-left: clamp(10px, 2vw, 26px); border-left: 1px solid var(--line); }
.wave-num { display: grid; justify-items: center; line-height: .85; }
.wave-num small { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.wave-num b { font-family: var(--display); font-size: 38px; font-weight: 700; background: linear-gradient(180deg, #fff, #ffd9a8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wave-meta { display: grid; gap: 5px; }
.boss-pips { display: flex; gap: 3px; }
.boss-pips i { width: 12px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .1); transform: skewX(-20deg); }
.boss-pips i.done { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.boss-pips i.now { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.boss-pips svg { width: 14px; height: 14px; margin-left: 2px; color: rgba(255, 255, 255, .3); }
.boss-pips.boss svg { color: var(--danger); filter: drop-shadow(0 0 6px var(--danger)); }
.wave-hint { display: flex; gap: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
#best-wave { color: var(--gold); font-weight: 700; }
.hud-res { display: flex; gap: 10px; margin-left: auto; }
.res { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 6px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); }
.res > span { display: grid; line-height: 1.05; }
.res b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.res small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.res.gold small { color: #e9c66a; }
.res.bump b { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.18); } }
.hud-actions { display: flex; align-items: center; gap: 6px; }
.hud-user { max-width: 140px; margin-right: 4px; font-size: 12.5px; font-weight: 700; color: #c4c8d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-user::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--hp); box-shadow: 0 0 6px var(--hp); vertical-align: 1px; }
.hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; min-width: 36px; padding: 0 9px; border-radius: 8px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: #d7dae4; font-weight: 800; font-size: 13px; transition: background .15s, color .15s; }
.hbtn:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.hbtn svg { width: 17px; height: 17px; }
#btn-sound .off, #btn-sound[aria-pressed="true"] .on { display: none; }
#btn-sound[aria-pressed="true"] .off { display: block; }
#btn-logout:hover { background: rgba(255, 90, 95, .18); color: #ff9da0; }

/* arena */
.arena { position: relative; min-height: 0; overflow: hidden; }
#battle { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arena-vignette { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 11, .55), transparent 14%, transparent 86%, rgba(7, 8, 11, .6)), radial-gradient(130% 120% at 50% 45%, transparent 60%, rgba(0, 0, 0, .45)); }
.banner { position: absolute; inset: 24% 0 auto; display: grid; justify-items: center; gap: 2px; pointer-events: none; opacity: 0; transition: opacity .25s; }
.banner::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: clamp(70px, 11vw, 112px); transform: translateY(-50%) scaleX(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .72) 22%, rgba(0, 0, 0, .72) 78%, transparent);
  border-block: 1px solid rgba(255, 138, 31, .35); }
.banner.show { opacity: 1; }
.banner.show::before { transform: translateY(-50%) scaleX(1); }
.banner-kicker { position: relative; font-size: 12px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.banner-kicker:empty { display: none; }
.banner-text { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(46px, 7.5vw, 92px); line-height: .9; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 10%, #ffe0a0 45%, var(--accent-2) 75%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .9)); transform: scale(1.5); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.banner.show .banner-text { transform: scale(1); opacity: 1; }
.banner.boss .banner-text { background-image: linear-gradient(180deg, #ffe07a 5%, #ff6a2a 55%, #d0101c); }
.banner.boss::before { border-color: rgba(255, 90, 95, .6); background: linear-gradient(90deg, transparent, rgba(60, 0, 6, .78) 22%, rgba(60, 0, 6, .78) 78%, transparent); }
.banner.boss .banner-kicker { color: #ff8a8e; }
.banner.defeat .banner-text { background-image: linear-gradient(180deg, #e8e9ef, #8a8f9f 60%, #565b6b); }
.banner.defeat .banner-kicker { color: var(--muted); }
.toasts { position: fixed; z-index: 55; top: 18%; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.toast { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 999px; background: rgba(10, 10, 14, .82); border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; animation: toast 2.6s ease forwards; }
.toast .coin { width: 18px; height: 18px; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* barra do time */
.team-bar { position: relative; z-index: 2; display: flex; align-items: stretch; gap: 12px; padding: 10px clamp(10px, 1.6vw, 18px) 12px; background: linear-gradient(0deg, #0c0c11, #13121a); }
.team-bar::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 138, 31, .45), transparent); }
.team-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; min-width: 0; }
.tcard { --rc: var(--accent); position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 11px; padding: 8px 10px 8px 8px; overflow: hidden;
  background: linear-gradient(165deg, rgba(32, 26, 32, .95), rgba(14, 14, 19, .98) 65%); border: 1px solid rgba(255, 255, 255, .08);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); transition: box-shadow .2s, border-color .2s; }
.tcard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--rc); }
.tcard .pic { position: relative; height: 92px; overflow: hidden; border-radius: 6px; background: radial-gradient(120% 90% at 50% 100%, #3a1d14, #15161e 70%); }
.tcard .pic img { position: absolute; left: 50%; top: 0; height: 175%; transform: translateX(-50%); }
.tcard .slot-n { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .7); font-family: var(--display); font-size: 16px; padding-top: 2px; }
.tcard .ko { position: absolute; inset: 0; display: none; place-items: center; background: rgba(0, 0, 0, .55); font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--danger); letter-spacing: .04em; transform: rotate(-10deg); text-shadow: 0 2px 0 #000; }
.tcard.dead .pic img { filter: grayscale(1) brightness(.55); }
.tcard.dead .ko { display: grid; }
.tcard.dead .tbody { opacity: .55; }
.tbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tcard .top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tcard h4 { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 600; line-height: .9; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .lvl { flex: none; padding: 2px 7px; border-radius: 4px; background: rgba(255, 207, 74, .14); color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.meter-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 46px; align-items: center; gap: 7px; }
.meter-row .lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.meter-row .val { text-align: right; font-size: 11px; font-weight: 700; color: #d6d9e3; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: #08090d; border-radius: 99px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.bar > i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s; }
.bar.hp > i { background: linear-gradient(90deg, #1f9e5f, var(--hp)); }
.bar.hp.low > i { background: linear-gradient(90deg, #b3121b, var(--danger)); }
.bar.anger > i { background: linear-gradient(90deg, #2a6fd0, var(--anger)); }
.bar.anger.full > i { background: linear-gradient(90deg, #ffb31a, var(--gold)); box-shadow: 0 0 10px var(--gold); }
.tcard.ready { border-color: rgba(255, 207, 74, .55); box-shadow: inset 0 0 22px rgba(255, 207, 74, .12); }
.tcard.ready .meter-row.en .val { color: var(--gold); }
.tfoot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.tcard .sk { display: flex; gap: 4px; }
.tcard .sk img { width: 24px; height: 24px; border-radius: 6px; background: #000; border: 1px solid rgba(255, 255, 255, .1); }
.tcard .up { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 8px; border: 0; border-radius: 6px; white-space: nowrap;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(255, 77, 26, .3); transition: filter .15s, opacity .15s; }
.tcard .up svg { width: 14px; height: 14px; }
.tcard .up b { display: inline-flex; align-items: center; gap: 4px; padding-left: 7px; border-left: 1px solid rgba(255, 255, 255, .3); }
.tcard .up .coin { width: 14px; height: 14px; }
.tcard .up:hover:not(:disabled) { filter: brightness(1.1); }
.tcard .up:disabled { background: rgba(255, 255, 255, .07); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.tcard.leveled { animation: leveled .6s; }
@keyframes leveled { 30% { box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 40px rgba(255, 207, 74, .35); } }
.team-side { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.side-btn { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 8px; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); transition: background .15s, filter .15s; }
.side-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.side-btn svg { width: 20px; height: 20px; flex: none; color: var(--accent-2); }
.side-btn > span { display: grid; line-height: 1.1; }
.side-btn b { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.side-btn small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.side-btn small .coin { width: 13px; height: 13px; }
.side-btn.recruit { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; box-shadow: 0 6px 16px rgba(255, 77, 26, .3); }
.side-btn.recruit svg, .side-btn.recruit small { color: #fff; }
.side-btn.recruit:hover:not(:disabled) { filter: brightness(1.08); }
.side-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: min(760px, 100%); max-height: 88vh; overflow: auto; padding: 26px;
  background: linear-gradient(165deg, rgba(30, 24, 30, .98), rgba(12, 12, 17, .99) 60%); border: 1px solid rgba(255, 255, 255, .09);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); animation: auth-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.modal-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--gold), var(--accent-2) 30%, var(--accent) 65%, #a8101a); }
.modal-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-size: 22px; line-height: 1; color: var(--muted); }
.modal-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.modal h3 { font-family: var(--display); font-size: 42px; font-weight: 700; margin: 6px 0 4px; line-height: .9; }
.modal p { color: var(--muted); }
.modal-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.modal-actions .btn { min-width: 160px; }

/* elenco */
.roster-step { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 9px 12px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13px; color: #d4d7e2; }
.roster-step b { color: var(--gold); }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 14px; }
.rcard { aspect-ratio: auto; height: 168px; }
.rcard .tname small { display: block; }
.rcard .lvbadge { position: absolute; top: 7px; left: 7px; z-index: 3; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .7); color: var(--gold); font-size: 10.5px; font-weight: 800; }
.rcard.in-team::before { border-color: rgba(255, 138, 31, .7); }
.rcard.in-team .team-mark { position: absolute; top: 7px; right: 7px; z-index: 3; padding: 2px 6px; border-radius: 4px; background: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rcard.incoming::before { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 28px rgba(255, 207, 74, .35); }
.rcard.incoming img { filter: none; }

/* lutador novo (herogot-ui.js): a tela inteira do jogo, por cima das telas e dos popups */
.hg-layer { position: fixed; inset: 0; z-index: 86; overflow: hidden; background: #000; user-select: none; -webkit-user-select: none; touch-action: none; }
.hg-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hg-ok { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hg-ok[hidden] { display: none; }

/* ---------- tela inicial (lobby): réplica da tela principal do jogo; posições em public/js/lobby.js ---------- */
@font-face { font-family: 'FZCuYuan'; src: url('/assets/fonts/fzcuyuan.woff2') format('woff2'); font-display: block; }
#screen-home { position: relative; overflow: hidden; background: #5a8fc9; }
.lobby { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; font-family: 'FZCuYuan', Inter, sans-serif; }
.lb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lb-fx { pointer-events: none; }
.lb-fx-add { mix-blend-mode: plus-lighter; }
/* Hand of Midas (midas-ui.js): camada própria com a máscara do PopupViewGroup, o layout de 960×640 no centro */
.md-pop { position: fixed; inset: 0; z-index: 80; overflow: hidden; background: rgba(0, 0, 0, .353); user-select: none; -webkit-user-select: none; }
.md-pop.md-alert { z-index: 90; }
.md-ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.md-in { transform-origin: 50% 50%; animation: bl-scale .3s cubic-bezier(.175, .885, .32, 1.275) both, bl-fade .15s linear both; }
/* Ganho offline: conteúdo contido no painel, lista rolável de itens e rodapé fixo. */
.of-popup { z-index: 95; font-family: 'FZCuYuan', Inter, sans-serif; }
.of-content { left: 233px; bottom: 170px; width: 500px; height: 308px; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000; }
.of-duration, .of-detail, .of-credited, .of-items-title { text-align: center; line-height: 1.2; flex: none; overflow-wrap: anywhere; }
.of-duration { font-size: 22px; color: #edca82; }
.of-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; flex: none; }
.of-reward { display: flex; align-items: center; gap: 10px; min-width: 0; }
.of-icon { width: 64px; height: 64px; flex: none; }
.of-icon .it-icon { transform: scale(.60377); transform-origin: 0 0; }
.of-icon .lb-txt { display: none; }
.of-icon .of-exp-pic { width: 78px; height: auto; }
.of-values { flex: 1; min-width: 0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 0 2px 1px #000; }
.of-label { font-size: 20px; color: #fff; }
.of-amount { font-size: 25px; color: #ffd442; white-space: nowrap; }
.of-exp .of-amount { color: #09dfff; }
.of-detail { font-size: 16px; color: #fff; }
.of-credited { font-size: 15px; color: #bfc5cf; }
.of-items-title { font-size: 18px; color: #edca82; }
.of-items { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; align-content: start; padding: 4px 8px 4px 4px; scrollbar-width: thin; scrollbar-color: #8956b0 #171124; }
.of-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px; border-radius: 4px; background: #141026a6; }
.of-item-icon { width: 48px; height: 48px; flex: none; }
.of-item-icon .it-icon { transform: scale(.45283); transform-origin: 0 0; }
.of-item-values { min-width: 0; }
.of-item-name { font-size: 14px; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.of-item-count { font-size: 18px; line-height: 1.2; color: #ffd442; }
.of-empty { grid-column: 1 / -1; padding: 12px 0; text-align: center; color: #bfc5cf; font-size: 16px; }
.of-items:focus-visible { outline: 1px solid #ffd442; outline-offset: -1px; }
.of-button-label { position: absolute; inset: 0; display: grid; place-items: center; font: 27px/1 'FZCuYuan', Inter, sans-serif;
  color: #fff; text-shadow: 2px 2px 0 #4b2d00, -1px -1px 0 #4b2d00; pointer-events: none; }
.of-popup .cc-btn:focus-visible { outline: 2px solid #ffd442; outline-offset: 3px; }
.md-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.md-add { mix-blend-mode: plus-lighter; }
.md-block { position: absolute; inset: 0; }
/* rótulos do layout sem contorno (Label do cocos); os números da faixa vermelha com o contorno preto de 1 (CustomText) */
.md-midas .cc-text { text-shadow: none; }
.md-midas .cc-text.md-stroke { text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.md-more { width: 500px; font-size: 24px; color: #fff; text-align: center; line-height: 1.2; transform: translateY(50%); }
/* Indicadores de espera do jogo (waiting.js): a camada que segura os toques (transparente, z 900) com o Terry jogando
   a moeda, o aviso de conexão e a tela de carregamento da luta */
.wt-block { position: fixed; inset: 0; z-index: 900; display: none; background: transparent; cursor: default; }
.wt-block.on { display: block; }
.wt-block.pass { pointer-events: none; }
.wt-spin { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.wt-block.spin .wt-spin { display: block; }
.wt-add { mix-blend-mode: plus-lighter; }
.wt-tip { position: absolute; left: 50%; top: 50%; width: 511px; height: 138px; display: none; pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--wt-s, 1)); }
.wt-tip.on { display: block; animation: wt-tip .2s linear both; }
.wt-tip img { display: block; width: 100%; height: 100%; }
.wt-tip span { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 30px; font: 18px Arial, Helvetica, sans-serif;
  color: #fff; text-align: center; }
@keyframes wt-tip { from { transform: translate(-50%, -50%) scale(calc(var(--wt-s, 1) * .5)); opacity: .478; }
  to { transform: translate(-50%, -50%) scale(var(--wt-s, 1)); opacity: 1; } }
.wt-loading { position: fixed; inset: 0; z-index: 890; overflow: hidden; background: #000; font-family: 'FZCuYuan', Inter, sans-serif;
  user-select: none; -webkit-user-select: none; --wt-s: 1; }
.wt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wt-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(108px * var(--wt-s)); }
.wt-progress { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wt-loadtip { position: absolute; left: 50%; bottom: calc(28px * var(--wt-s)); transform: translate(-50%, 50%); white-space: nowrap;
  font-size: calc(20px * var(--wt-s)); color: #fff; line-height: 1; }
.wt-status { position: absolute; left: calc(50% - 17px * var(--wt-s)); bottom: calc(66px * var(--wt-s)); transform: translateX(-50%);
  white-space: nowrap; font-size: calc(17px * var(--wt-s)); color: rgb(10, 223, 225); line-height: 1; }
.wt-pct { position: absolute; bottom: calc(66px * var(--wt-s)); white-space: nowrap; font-size: calc(17px * var(--wt-s));
  color: rgb(10, 223, 225); line-height: 1; }
/* Recharge (recharge-ui.js): a tela inteira de 1136×640 com o fundo cobrindo a tela; os popups dela (md-pop) por cima */
.rc-area { position: fixed; inset: 0; z-index: 75; overflow: hidden; background: #160c3a center / cover no-repeat;
  user-select: none; -webkit-user-select: none; font-family: 'FZCuYuan', Inter, sans-serif; }
.rc-ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.rc-area .cc-text, .rc-pop .cc-text { text-shadow: none; }
.rc-tabview, .rc-view { position: absolute; left: 0; bottom: 0; width: 1136px; height: 640px; pointer-events: none; }
.rc-tabview > *, .rc-view > *, .rc-row > *, .rc-page > *, .rc-tab > * { position: absolute; }
.rc-view > *, .rc-tabview > * { pointer-events: auto; }
.rc-view > .cc-panel, .rc-view > .cc-text, .rc-view > .cc-img { pointer-events: none; }
.rc-clip { position: absolute; pointer-events: none !important; }
.rc-clip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc-clip-add { mix-blend-mode: plus-lighter; }
.rc-scroll { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; }
.rc-hscroll { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; }
.rc-scroll::-webkit-scrollbar { display: none; }
.rc-content { position: relative; }
.rc-row { position: absolute; }
.rc-tab { padding: 0; border: 0; background: none; cursor: pointer; }
.rc-tab > img { left: 0; top: 0; width: 198px; height: 78px; display: block; -webkit-user-drag: none; pointer-events: none; }
.rc-tab > .rc-tab-icon { width: 41px; height: 41px; left: auto; top: auto; }
.rc-tab-label { font-size: 22px; line-height: 1.05; text-align: left; white-space: nowrap; transform: translate(-50%, 50%); pointer-events: none; }
.rc-pager { position: absolute; overflow: hidden; pointer-events: auto; }
.rc-strip { position: absolute; left: 0; top: 0; height: 100%; }
.rc-page { position: absolute; top: 0; }
.rc-tq { position: relative; width: 650px; padding: 4.5px 0 4.5px 70px; box-sizing: border-box; }
.rc-tq img { position: absolute; left: 36.5px; top: 4.5px; width: 31px; height: 32px; transform: translateY(calc(14px - 16px)); }
.rc-tq-text { width: 596px; font-size: 20px; line-height: 1.18; color: #fff8d2; word-break: break-word; }
.rc-icon { position: absolute; width: 100px; height: 100px; pointer-events: none; }
.rc-icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rc-icon .pic { width: 88px; height: 88px; object-fit: contain; }
.rc-icon b { position: absolute; right: 7px; bottom: 4px; font: 20px 'FZCuYuan', Inter, sans-serif; color: #fff; font-weight: normal;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
.rc-gift { position: absolute; pointer-events: none; transform-origin: 50% 50%; }
.rc-gift > img { position: absolute; left: 0; top: 0; width: 106px; height: 106px; }
.rc-gift > .rc-icon { left: 3px; top: 3px; }
.rc-gray, .cc-btn.rc-gray:hover, .cc-btn.rc-gray:active { filter: grayscale(1); }
.rc-cardrw { position: absolute; display: flex; align-items: flex-end; pointer-events: none; }
.rc-cardslot { position: relative; width: 75px; height: 75px; flex: none; }
.rc-cardslot > .rc-icon { left: 50%; top: 50%; }
.rc-got { position: absolute; left: 37.5px; top: 37.5px; width: 54px; height: 53px; transform: translate(-50%, -50%); z-index: 2; }
.rc-card-line { position: relative; padding: 4px 0 4px 26px; box-sizing: border-box; font-size: 24px; line-height: 1.15; color: #bef0fc; }
.rc-card-line img { position: absolute; left: 0; top: 6px; width: 21px; height: 21px; }
.rc-price30 { font-size: 30px; color: #672017; transform: translate(-50%, 50%); pointer-events: none; }
.rc-rule-line { width: 480px; margin: 3px auto 3px 12px; font-size: 20px; line-height: 1.2; color: #fff; }
.rc-award-icon { position: absolute; pointer-events: none; z-index: 2; }
.rc-award-icon .rc-icon { left: 0; top: 0; }
.rc-award-name { position: absolute; left: -5px; top: 160px; width: 110px; font-size: 18px; line-height: 1.1; text-align: center; white-space: normal; }
.rc-clipbox { overflow: hidden; }
.rc-clipbox > * { position: absolute; }
.rc-marquee { animation: rc-roll 6s linear infinite; }
@keyframes rc-roll { 0%, 15% { transform: translate(0, 50%); } 85%, 100% { transform: translate(calc(-1 * var(--rc-roll)), 50%); } }
/* Configurações (settings-ui.js): o settingView e os popups dele; os Label do cocos sem contorno (os CustomText
   recebem a sombra/contorno do layout no próprio elemento) */
.sg-pop .cc-text { text-shadow: none; }
.sg-pop .cc-wrap { line-height: 1.2; }
.sg-scroll { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; }
.sg-scroll::-webkit-scrollbar { display: none; }
.sg-content { position: relative; width: 100%; }
.sg-row { position: absolute; left: 0; }
.sg-row > * { position: absolute; }
.sg-gray { filter: grayscale(1); }
.sg-hit { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; }
.sg-off, .cc-btn.sg-off:hover, .cc-btn.sg-off:active { filter: grayscale(1); cursor: default; }
.sg-canvas { position: absolute; pointer-events: none; }
.sg-hslot, .sg-islot { pointer-events: none; }
.sg-islot > .sg-hit { pointer-events: auto; }
.sg-hicon { position: absolute; left: 0; top: 0; width: 102px; height: 102px; pointer-events: none; }
.sg-hicon img { position: absolute; display: block; -webkit-user-drag: none; }
.sg-sicon { position: absolute; left: -10px; top: -10px; width: 120px; height: 120px; pointer-events: none; }
.sg-sicon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sg-sicon .pic { width: 90px; height: 90px; margin-top: 2px; }
.sg-sicon .lock { width: 30px; height: 35px; margin-top: 11px; }
.sg-reward { position: absolute; pointer-events: none; }
.sg-link { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap; transform: translate(-50%, 50%);
  font: 21px 'FZCuYuan', Inter, sans-serif; color: #01a6fc; text-decoration: underline; text-underline-offset: 3px; }
.sg-pop .cc-text.sg-touchable { pointer-events: auto !important; cursor: default; }
.sg-input { position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #fff;
  font-family: 'FZCuYuan', Inter, sans-serif; line-height: 1.25; caret-color: #fff; user-select: text; -webkit-user-select: text; }
textarea.sg-input { resize: none; overflow: hidden; text-align: left; }
.sg-sectitle, .sg-sharename { white-space: nowrap; }
.sg-sharename { font-size: 21px; color: #fff; transform: translate(-50%, 50%);
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important; }
.sg-notice-text { box-sizing: border-box; width: 600px; padding: 80px 30px 10px; color: #fff; font: 22px/1.35 'FZCuYuan', Inter, sans-serif; user-select: text; }
.sg-notice-text p { margin: 0 0 10px; white-space: pre-wrap; }
.sg-tip { position: fixed; left: 50%; top: 46%; z-index: 95; transform: translate(-50%, -50%); padding: 10px 24px; border-radius: 6px; max-width: 80vw;
  background: rgba(0, 0, 0, .74); color: #fff; font: 18px 'FZCuYuan', Inter, sans-serif; text-align: center; pointer-events: none; animation: hx-toast 1.8s ease both; }
.sg-touchfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
.sg-touchfx-add { mix-blend-mode: plus-lighter; }
.lb-ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lb-group { position: absolute; left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none; }
.lb-group > * { position: absolute; pointer-events: auto; }
.lb-group img { display: block; -webkit-user-drag: none; }
.lb-hidden { display: none !important; }
.lb-txt { color: #fffcf6; white-space: nowrap; line-height: 1;
  text-shadow: 1px 1px 0 #1b1410, -1px 1px 0 #1b1410, 1px -1px 0 #1b1410, -1px -1px 0 #1b1410, 0 2px 2px rgba(0, 0, 0, .45); }
.lb-btn { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; transition: transform .08s, filter .12s; }
.lb-btn:hover { filter: brightness(1.12); }
.lb-btn:active { filter: brightness(.88); }
.lb-btn:focus-visible, .lb-hit:focus-visible { outline: 2px solid #ffd34d; outline-offset: 2px; }
/* time */
.lb-hit { width: 110px; height: 260px; padding: 0; border: 0; background: none; cursor: pointer; }
.lb-bar { width: 122px; height: 27px; pointer-events: none !important; }
.lb-bar-bg { position: absolute; inset: 0; }
.lb-type { position: absolute; left: calc(61px - 39px); top: 50%; transform: translate(-50%, -50%); }
.lb-lv { position: absolute; left: calc(61px - 14px); top: 50%; transform: translateY(-50%); font-size: 24px; }
.lb-stars { width: 0; height: 23px; pointer-events: none !important; }
.lb-stars img { position: absolute; top: 0; transform: translateX(-50%); }
.lb-name { width: 133px; height: 27px; pointer-events: none !important; }
.lb-name img { position: absolute; inset: 0; }
.lb-name span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14.4px; }
/* a luta idle da campanha acima do time (lobby.js, renderRun): a placa de nome de ponto do KOF a 360 (×0,818); a
   faixa dela vai de x 111 a ~335 e de y 35 a 66; os blocos das fases ficam embaixo da faixa */
.lb-run { width: 360px; height: 88px; }
.lb-run > * { position: absolute; pointer-events: none; }
.lb-run-plate { left: 0; top: 0; width: 360px; height: 78.5px; transition: filter .3s; }
.lb-run-shine { left: 0; top: 0; width: 360px; height: 78.5px; mix-blend-mode: screen;
  -webkit-mask: url(/assets/campaign/ui/pic_emengtiaozhan_guankamingchengdi.png) 0 0 / 100% 100%;
  mask: url(/assets/campaign/ui/pic_emengtiaozhan_guankamingchengdi.png) 0 0 / 100% 100%;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 236, 190, .42) 50%, transparent 56%) no-repeat;
  background-size: 300% 100%; animation: lb-run-shine 5s ease-in-out infinite; }
.lb-run-tag { left: 120px; top: 13px; display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.lb-run-tag b { font-weight: normal; color: #ffd54a; }
.lb-run-name { left: 124px; top: 35px; width: 196px; height: 31px; line-height: 31px; font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
.lb-run-pips { left: 118px; top: 69px; height: 18px; display: flex; align-items: center; gap: 3px; padding: 0 6px 0 8px; }
.lb-run-pips::before { content: ''; position: absolute; inset: 2px 0; transform: skewX(-20deg); border-radius: 2px;
  background: linear-gradient(rgba(8, 10, 16, .8), rgba(20, 24, 34, .66)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 0 rgba(0, 0, 0, .6); }
.lb-run-pips i { position: relative; display: grid; place-items: center; width: 14px; height: 9px; overflow: hidden; transform: skewX(-20deg);
  background: linear-gradient(#2a2f3c, #151820); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: width .25s, height .25s; }
.lb-run-pips u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffe7a1, #ffb12e 55%, #f07400); transition: width .3s linear; }
.lb-run-pips i.done u { width: 100% !important; }
.lb-run-pips i:not(.done):not(.cur) u { width: 0 !important; }
.lb-run-pips i.done { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 4px rgba(255, 150, 30, .5); }
.lb-run-pips b { position: relative; display: none; transform: skewX(20deg); font: 12px/1 'FZCuYuan', Inter, sans-serif; color: #fff;
  text-shadow: 1px 0 0 #4a1a00, -1px 0 0 #4a1a00, 0 1px 0 #4a1a00, 0 -1px 0 #4a1a00; }
.lb-run-pips i.cur { width: 26px; height: 14px; animation: lb-run-cur 1.1s ease-in-out infinite alternate; }
.lb-run-pips i.cur b { display: block; }
.lb-run-pips i.pop { animation: lb-run-pop .7s ease-out; }
.lb-run.near .lb-run-pips i:not(.done):not(.cur) { box-shadow: inset 0 0 0 1px rgba(255, 70, 40, .75), 0 0 4px rgba(255, 40, 20, .35); }
.lb-run-skull { position: relative; flex: none; width: 19px; height: 19px; margin-left: 2px; filter: drop-shadow(0 1px 1px #000); transition: transform .3s; }
.lb-run-skull .bone { fill: #cfc8bc; stroke: #2a160c; stroke-width: 4; stroke-linejoin: round; }
.lb-run-skull .eye { fill: #2a160c; }
.lb-run.near .lb-run-skull .eye { fill: #ff3d1f; }
.lb-run.boss .lb-run-plate { animation: lb-run-boss .6s ease-in-out infinite alternate; }
.lb-run.boss .lb-run-tag span { color: #ff6a4a; }
.lb-run.boss .lb-run-skull { animation: lb-run-skull .5s ease-in-out infinite; }
.lb-run.boss .lb-run-skull .bone { fill: #f3ede2; }
.lb-run.boss .lb-run-skull .eye { fill: #ffde3a; }
.lb-run.off .lb-run-skull { filter: grayscale(1) brightness(.5); }
.lb-run.pop .lb-run-plate { animation: lb-run-new .6s ease-out; }
@keyframes lb-run-shine { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0 0; } }
@keyframes lb-run-cur { from { box-shadow: inset 0 0 0 1px #fff, 0 0 3px 1px rgba(255, 170, 40, .55); } to { box-shadow: inset 0 0 0 1px #fff, 0 0 10px 3px rgba(255, 190, 60, .95); } }
@keyframes lb-run-pop { 0% { filter: brightness(3); transform: skewX(-20deg) scale(1.9); } 60% { filter: brightness(1.4); transform: skewX(-20deg) scale(.9); } 100% { filter: none; transform: skewX(-20deg) scale(1); } }
@keyframes lb-run-boss { from { filter: drop-shadow(0 0 2px #ff3000); } to { filter: drop-shadow(0 0 8px #ff3000) brightness(1.1); } }
@keyframes lb-run-skull { 0%, 100% { transform: scale(1.15) rotate(-6deg); } 50% { transform: scale(1.3) rotate(6deg); } }
@keyframes lb-run-new { 0% { filter: brightness(2.2); } 100% { filter: none; } }
/* perfil (playerinfo.json + TopPlayerInfoMediator) e moedas */
.lb-head { width: 104px; height: 104px; padding: 0; border: 0; background: none; cursor: pointer; }
/* o retrato: nó de 102×102 com o centro a 54 do pé do icon_rect, a 1,1 */
.lb-head-icon { position: absolute; left: 1px; top: -1px; width: 102px; height: 102px; transform: scale(1.1); pointer-events: none; }
.lb-head-icon img { position: absolute; }
.lb-head-bg { left: 0; top: 4px; width: 102px; height: 102px; }
.lb-head-pic { left: 6px; top: 8px; width: 90px; height: 90px; }
.lb-head-frame { left: -23px; top: -22px; width: 148px; height: 154px; }
.lb-vip-area { width: 170px; height: 100px; padding: 0; border: 0; background: none; cursor: pointer; }
/* textos do perfil: FZCuYuan 24 da cor do layout, sem contorno nem sombra (como no jogo) */
.lb-ptxt { font-size: 24px; line-height: normal; white-space: nowrap; color: #fffcf6; pointer-events: none !important; }
.lb-plv { color: #e8ba16; }
.lb-group > .lb-vip, .lb-group > .lb-max { pointer-events: none; }
.lb-atlas { display: flex; pointer-events: none !important; }
.lb-atlas i { flex: none; background-repeat: no-repeat; }
.lb-power i { width: 15px; height: 21px; background-image: url('/assets/ui/lobby/pic_zhandoulishuzi.png'); background-position: calc(var(--d) * -15px) 0; }
.lb-vipnum i { width: 14px; height: 20px; background-image: url('/assets/ui/lobby/pic_vipshuzi.png'); background-position: calc(var(--d) * -14px) 0; }
/* textos das moedas: FZCuYuan 21 da cor do layout, sem contorno; no gold/s, o número em ciano e o resto em branco */
.lb-ctxt { font-size: 21px; line-height: normal; white-space: nowrap; color: #fffcf6; pointer-events: none !important; }
.lb-ctxt b { font-weight: inherit; color: #08d1fc; }
.lb-ctxt i { font-style: normal; color: #fff; }
/* relógio: fonte do sistema (o layout pede "微软雅黑") a 24, branca, com a sombra preta do CustomText em (2, −2) */
.lb-clock { font-size: 24px; line-height: normal; white-space: nowrap; color: #fff; font-family: 'Microsoft YaHei', Roboto, 'Segoe UI', sans-serif;
  text-shadow: 2px 2px 0 #000; pointer-events: none !important; }
.lb-extend img { transform: scaleX(-1); }
.lb-extend.open img { transform: none; }
/* aviso */
/* chat */
.lb-chat { width: 315px; height: 78px; border: 10px solid transparent; border-image: url('/assets/ui/lobby/pic_zhujiemiandichen_xinbanliaotian.png') 10 fill / 10px stretch; box-sizing: border-box; }
/* barra inferior */
.lb-bottom { width: 1056px; height: 80px; pointer-events: none !important; }
/* ícones do Phantom Brawlers (quadro de 200 com a moldura redonda de 160 no centro) num botão de 96×93 como os do KOF:
   a moldura fica com 70 de diâmetro, o centro a 52 do pé do botão, e o nome cobre a borda de baixo dela, como no PB */
.lb-bbtn { width: 96px; height: 93px; }
.lb-bbtn > img:first-child { position: absolute; left: 50%; bottom: 8px; width: 88px; height: auto; transform: translateX(-50%); pointer-events: none; }
/* bloqueado pelo nível: cinza, com o cadeado do PB (uires/common/icon_common_lock) e o nível no meio da moldura */
.lb-bbtn.lb-locked > img:first-child { filter: grayscale(1) brightness(.55); }
.lb-bbtn.lb-locked:hover { filter: none; }
.lb-block { display: none; position: absolute; left: 50%; bottom: 31px; transform: translateX(-50%); flex-direction: column; align-items: center; pointer-events: none; }
.lb-bbtn.lb-locked > .lb-block { display: flex; }
.lb-block img { width: 30px; height: auto; filter: drop-shadow(0 1px 1px #000); }
.lb-block b { margin-top: -2px; font: 14px/1 'PB Normal', 'FZCuYuan', sans-serif; color: #ffe27a;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
.lb-bbtn.lb-locked > .lb-bname { color: #b9b2a0; }
/* o Ranking da fileira de cima (104×77, o nome já vem na textura): o cadeado e o Lv, do tamanho dos outros (Bijuu),
   centrados no disco da medalha, que na textura tem uns 41 de diâmetro com o centro em (47,5; 35) */
.lb-rbtn.lb-locked > img:first-child { filter: grayscale(1) brightness(.55); }
.lb-rbtn.lb-locked:hover { filter: none; }
.lb-rbtn > .lb-block { left: 47.5px; top: 35px; bottom: auto; transform: translate(-50%, -50%); }
.lb-rbtn.lb-locked > .lb-block { display: flex; }
/* nome: fonte dos botões do Phantom Brawlers, #fdf1c7 com contorno preto */
@font-face { font-family: 'PB Normal'; src: url('/assets/fonts/pb-normal.woff2') format('woff2'); font-display: block; }
.lb-bname { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 17px/1 'PB Normal', 'FZCuYuan', sans-serif; color: #fdf1c7; letter-spacing: .2px;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 1.5px 0 #000, 0 -1.5px 0 #000, 1.5px 0 0 #000, -1.5px 0 0 #000, 0 2px 3px rgba(0, 0, 0, .6); }
.lb-bbtn[data-action="challenges"] > .lb-bname { font-size: 15px; }
.lb-bbtn > .kf-red { position: absolute; right: 0; top: 0; width: 19px; height: 19px; pointer-events: none; }
.lb-multi { width: 55px; height: 67px; pointer-events: none !important; }
.lb-fight { width: 159px; height: 131px; border-radius: 50%; }
.lb-toast { position: absolute; left: 50%; top: 42%; z-index: 5; transform: translate(-50%, -50%); padding: 10px 26px; border-radius: 8px; background: rgba(10, 12, 24, .82);
  font-size: 20px; pointer-events: none; transition: opacity .35s; }
.lb-toast.out { opacity: 0; }
.hbtn.back { gap: 4px; padding: 0 12px 0 7px; }
.hbtn.back svg { width: 16px; height: 16px; }

/* ---------- time com 6 vagas ---------- */
.team-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tcard { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 8px; padding: 7px 8px 8px 7px; cursor: pointer; }
.tcard .pic { height: 54px; }
.tcard .slot-n { width: 17px; height: 17px; font-size: 13px; }
.tcard h4 { font-size: 19px; }
.tcard .lvl { padding: 1px 5px; font-size: 10px; }
.tcard .meter-row { grid-template-columns: 15px minmax(0, 1fr) 38px; gap: 5px; }
.tcard .meter-row .val { font-size: 10px; }
.tcard .ko { font-size: 22px; }
.tcard .up { grid-column: 1 / -1; width: 100%; margin: 0; justify-content: center; height: 27px; font-size: 11.5px; }
.tcard.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 108px; text-align: center; color: var(--muted);
  background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .2); }
.tcard.empty::before { display: none; }
.tcard.empty svg { width: 20px; height: 20px; color: rgba(255, 255, 255, .5); }
.tcard.empty b { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .04em; color: #c9ccd8; }
.tcard.empty small { font-size: 10.5px; }
.tcard.empty .slot-n { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .5); font-family: var(--display); padding-top: 2px; }
.tcard.empty:hover { border-color: rgba(255, 138, 31, .6); color: #fff; }
.slot.locked { opacity: .5; }
.slot.locked > svg { flex: none; width: 15px; height: 15px; color: var(--muted); }

/* ---------- lista de lutadores e ficha ---------- */
.fighters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.fighters-head p { margin: 0; font-size: 13px; }
.fighters-head .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fighters-head .coin { width: 16px; height: 16px; }
.rcard.locked { cursor: default; }
.rcard.locked img { filter: grayscale(1) brightness(.38) !important; transform: translateX(-50%) !important; }
.rcard.locked:hover { transform: none; }
.rcard.locked .tname { color: #8b90a2; }
.rcard .lock { position: absolute; top: 7px; left: 7px; z-index: 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(0, 0, 0, .6); }
.rcard .lock svg { width: 14px; height: 14px; color: var(--muted); }
.hero-detail { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; }
.hd-art { position: relative; min-height: 320px; overflow: hidden; border-radius: 10px;
  background: radial-gradient(90% 70% at 50% 85%, rgba(255, 110, 40, .3), transparent 70%), linear-gradient(180deg, #19131b, #0b0a0f); }
.hd-art::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--rc); }
.hd-art img { position: absolute; left: 50%; bottom: 0; height: 104%; transform: translateX(-50%); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.hd-info h3 { display: flex; align-items: center; gap: 10px; }
.hd-info h3 .lvl { padding: 3px 8px; border-radius: 6px; background: rgba(255, 207, 74, .15); color: var(--gold); font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.hd-info > p { margin: 4px 0 0; font-size: 13.5px; }
.hd-info .feat-stats { margin: 12px 0 14px; }
.modal-actions.start { justify-content: flex-start; }
.feat-skills .k.passive, .skills .k.passive { color: #7fdcff; }
.feat-skills .k.skill { color: var(--accent-2); }

@media (min-width: 761px) and (max-width: 1060px) {
  .team-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tcard { grid-template-columns: 44px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .team-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tcard { grid-template-columns: 38px minmax(0, 1fr); padding: 6px; }
  .tcard .pic { height: 46px; }
  .tcard h4 { font-size: 16px; }
  .tcard .meter-row .val { display: none; }
  .tcard .meter-row { grid-template-columns: 14px minmax(0, 1fr); }
  .tcard.empty { min-height: 92px; }
  .hero-detail { grid-template-columns: 1fr; }
  .hd-art { min-height: 220px; }
  .fighters-head { flex-direction: column; align-items: stretch; }
}

/* ---------- loading ---------- */
.loading { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(5, 6, 9, .85); color: var(--muted); }
.loading.hidden { display: none; }
/* antes do JavaScript: só o preto da tela de carregamento do jogo */
.loading.wt-boot { background: #000; z-index: 885; }
.spinner { width: 46px; height: 46px; border: 4px solid rgba(255, 255, 255, .12); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  #screen-auth { justify-items: center; padding: 18px 16px 12px; }
  .auth-shade { background: rgba(4, 4, 7, .6); }
  .auth-card { padding: 26px 20px 20px; }
  .brand { font-size: 68px; }
  .auth-kicker { letter-spacing: .14em; }
  .auth-kicker::before { flex: none; }
  .hud { flex-wrap: wrap; row-gap: 8px; }
  .hud-stage, .hud-user { display: none; }
  .hud-wave { padding-left: 0; border-left: 0; }
  .hud-actions { margin-left: auto; }
  .hud-res { order: 3; width: 100%; margin-left: 0; }
  .res { flex: 1; }
  .team-bar { flex-direction: column; gap: 8px; }
  .team-side { flex-direction: row; min-width: 0; }
  .side-btn { flex: 1; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .hud-user, .hud-stage { display: none; }
  .hud-wave { padding-left: 0; border-left: 0; }
}

/* escolha inicial: vagas bloqueadas compactas e textos curtos no destaque (4 habilidades) */
.team-slots { min-width: 0; }
.slot.locked { flex: 0 0 60px; gap: 6px; padding-right: 8px; }
.slot.locked .sinfo { display: none; }
.sel-foot #btn-start { flex: none; }
.sel-feature .feat-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 4.5em; }
.sel-feature .feat-skills { gap: 7px; }
.sel-feature .feat-skills p { -webkit-line-clamp: 1; }
@media (max-width: 760px) {
  .tcard.empty { min-height: 0; padding: 8px 6px; flex-direction: row; gap: 6px; }
  .tcard.empty small { display: none; }
  .tcard.empty b { font-size: 15px; }
  .tcard.empty svg { width: 15px; height: 15px; }
  .tcard.empty .slot-n { position: static; }
}

/* ---------- estrelas, nível máximo e reset ---------- */
.stars { margin-right: 4px; color: #ffd34d; letter-spacing: -1px; text-shadow: 0 1px 0 #6b4300; }
.tcard .pic-stars { position: absolute; left: 0; right: 0; bottom: 1px; z-index: 1; text-align: center; font-size: 9px; line-height: 1; letter-spacing: -1px; color: #ffd34d; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.up.reset { background: linear-gradient(180deg, #ffd34d, #e89a10); color: #2a1600; }
.up.reset b { color: #2a1600; }
.hd-stars { display: flex; align-items: center; gap: 2px; margin: 4px 0 2px; font-size: 18px; }
.hd-stars i { font-style: normal; color: rgba(255, 255, 255, .18); }
.hd-stars i.on { color: #ffd34d; text-shadow: 0 0 8px rgba(255, 190, 40, .55); }
.hd-stars span { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.hd-progress { display: grid; justify-items: start; gap: 6px; margin: 0 0 12px; }
.hd-exp { position: relative; display: flex; align-items: center; gap: 8px; height: 18px; margin: 0 0 10px; padding: 0 8px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow: hidden; font-size: 11px; }
.hd-exp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #1b7fc4, #4fd2ff); opacity: .55; }
.hd-exp span, .hd-exp b { position: relative; font-weight: 800; }
.hd-exp b { margin-left: auto; }
.hd-progress small { font-size: 12px; color: var(--muted); }
.manual { margin: 8px 0 4px; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; color: #d9dbe6; }
.manual b { color: #fff; }

/* ---------- campanha (mapa): layouts do jogo montados por public/js/ccui.js e campaign-ui.js ---------- */
#screen-campaign { position: relative; overflow: hidden; background: #0b1b3a; }
.cc-hidden { display: none !important; }
.cc-img, .cc-s9, .cc-panel, .cc-bar { display: block; box-sizing: border-box; }
.cc-img { -webkit-user-drag: none; }
.cc-text { white-space: nowrap; line-height: 1; font-family: 'FZCuYuan', Inter, sans-serif; pointer-events: none !important;
  text-shadow: 1px 1px 0 #10131c, -1px 1px 0 #10131c, 1px -1px 0 #10131c, -1px -1px 0 #10131c, 0 2px 2px rgba(0, 0, 0, .45); }
.cc-text b { font-weight: inherit; color: #08d1fc; }
.cc-wrap { white-space: normal; line-height: 1.25; }
.cc-btn { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.cc-btn img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.cc-btn:hover { filter: brightness(1.12); }
.cc-btn:active { filter: brightness(.88); }
.cc-bar { overflow: hidden; }
.cc-bar img { display: block; width: 100%; height: 100%; }
.cc-panel { pointer-events: none !important; }
#campaign [data-id$=".target_panel"], #campaign .cp-hit { pointer-events: auto !important; cursor: pointer; }
.cp-point { position: absolute; left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none !important; }
.cp-point > * { position: absolute; pointer-events: none; }
.cp-point > .cp-hit { pointer-events: auto; cursor: pointer; }
.cp-point.locked > .cc-img { filter: grayscale(1) brightness(.72); }
.cp-point.locked > .cp-hit { cursor: not-allowed; }
.cp-point:not(.locked) > .cp-hit:hover ~ .cc-img { filter: brightness(1.15); }
.cc-in-btn { pointer-events: none !important; }
.cc-btn.cp-locked:hover, .cc-btn.cp-locked:active { filter: none; }
.cp-multi { transform: translate(-50%, 50%); pointer-events: none !important; }
.cp-box { position: absolute; transform: translate(-50%, 50%); pointer-events: none !important; }
.cp-popup { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .55); }
.cp-banner { position: absolute; inset: 0; width: 100%; height: 100%; }
#campaign [data-id$=".map_bg"] { overflow: hidden; }
.cp-drop-exp { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translate(-50%, 50%) scale(var(--fit, 1)); white-space: nowrap; color: #fff; font: 26px/1 'FZCuYuan', Inter, sans-serif;
  pointer-events: none; }
.cp-drop-exp span { display: flex; align-items: center; gap: 4px; }
.cp-drop-exp img { width: 58px; }
.cp-drop-exp small { font-size: 18px; color: #9fd3ff; }
.cp-toast-box { position: absolute; inset: 0; pointer-events: none; }
.hbtn.auto[aria-pressed="true"] { background: linear-gradient(180deg, #3fbf62, #1f7d3a); border-color: #7cf09a; color: #fff; }
.banner.win .banner-text { color: #ffd34d; letter-spacing: .1em; }


/* ---------- Elite e Hell: tela do ponto (EliteMap_1 / NightmareMap_1) montada por public/js/elite-ui.js ---------- */
.ep-screen { position: absolute; inset: 0; z-index: 5; background: #000; }
.ep-screen > .lb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ep-dialog { z-index: 2; }
.ep-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.ep-icon { width: 106px; height: 106px; pointer-events: auto !important; cursor: pointer; }
.ep-icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ep-icon .pic { width: 92px; height: 92px; }
.ep-icon .coin { width: 62px; height: auto; }
.ep-icon .badge { left: 6px; top: 6px; transform: none; }
.ep-icon b { position: absolute; right: 9px; bottom: 7px; font-size: 20px; }
.ep-off, .cc-btn.ep-off:hover, .cc-btn.ep-off:active { filter: grayscale(1) brightness(.8); }
.ep-nav-off { opacity: .6; }
.ep-screen [data-id$=".left_img"], .ep-screen [data-id$=".right_img"] { cursor: pointer; }
.ep-speak { width: 380px; min-height: 60px; box-sizing: border-box; padding: 18px 40px 22px 18px; border: 10px solid transparent;
  border-image: url('/assets/campaign/ui/pic_emengtiaozhan_duihuagongyongdi.png') 10 fill / 10px stretch;
  color: #340002; font: 21px/1.2 'FZCuYuan', Inter, sans-serif; white-space: normal; pointer-events: none !important;
  transform: scale(.2); opacity: 0; transform-origin: 30px 100%; transition: transform .28s cubic-bezier(.3, 1.6, .6, 1), opacity .18s; }
.ep-speak.pop { transform: scale(1); opacity: 1; }
.ep-speak i { position: absolute; left: 10px; bottom: -46px; width: 38px; height: 38px; background: url('/assets/campaign/ui/pic_emengtiaozhan_duihuagongyongdijiantou.png') no-repeat; }
.frag-list { display: grid; gap: 8px; margin-top: 8px; }
.frag-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.frag-row img { width: 44px; height: 44px; border-radius: 8px; }
.frag-row span { flex: 1; }
.frag-row b { color: var(--gold); margin-left: 6px; }
.muted { color: var(--muted); font-size: 13px; }

/* ---------- ícone de item (item-icon.js) e mochila (bag-ui.js) ---------- */
.it-icon { position: relative; width: 100px; height: 100px; flex: none; }
.it-icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.it-icon .pic { width: 88px; height: 88px; object-fit: contain; }
.it-icon .pic.coin { width: 62px; height: auto; }
.it-icon .badge { left: 4px; top: 4px; transform: none; }
.it-icon b { position: absolute; right: 7px; bottom: 5px; font-size: 20px; pointer-events: none; }
#screen-bag { position: relative; overflow: hidden; background: #0b1020; }
.bag-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bag-grid { display: grid; grid-template-columns: repeat(4, 106px); grid-auto-rows: 116px; column-gap: 10px; align-content: start;
  padding: 6px 0 0 4px; overflow-y: auto; overflow-x: hidden; pointer-events: auto !important; scrollbar-width: thin; }
.bag-cell { position: relative; width: 106px; height: 106px; cursor: default; }
.bag-cell[data-item] { cursor: pointer; }
.bag-cell > .frame { position: absolute; inset: 0; width: 106px; height: 106px; }
.bag-cell > .it-icon { position: absolute; left: 3px; top: 3px; }
.bag-cell > .ind { position: absolute; left: -14px; top: -14px; width: 134px; height: 134px; pointer-events: none; }
.bag-detail-icon { transform: translate(-50%, 50%); pointer-events: none !important; }
.bag-off, .cc-btn.bag-off:hover, .cc-btn.bag-off:active { filter: grayscale(1) brightness(.75); }
.bag-qty { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.bag-qty-card { min-width: 320px; padding: 18px 22px; border-radius: 12px; background: #1d2333; border: 1px solid #3c4a6b; color: #fff; text-align: center; font-family: 'FZCuYuan', Inter, sans-serif; }
.bag-qty-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 12px 0 0; }
.bag-qty-row button { padding: 6px 12px; border-radius: 8px; border: 1px solid #4a5a80; background: #28324a; color: #fff; cursor: pointer; }
.bag-qty-row button.ok { background: #e08a12; border-color: #ffc25a; }
.bag-qty-row b { min-width: 48px; font-size: 22px; }
.award-icons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; }
.pick-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 12px 0; }
.pick-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; }
.pick-hero img { width: 64px; height: 64px; border-radius: 8px; }
.pick-hero small { color: var(--muted); }
.feat-skills li.locked { opacity: .5; }
.feat-skills li em { display: block; font-style: normal; font-size: 11.5px; color: var(--gold); }
.frag-ico { width: 22px; height: 22px; vertical-align: middle; border-radius: 4px; }
/* prêmio do chefe na luta (GetAward): ícones na faixa "Congratulations" */
.bt-award { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-top: 70px; pointer-events: auto; }
.bt-award-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 600px; transform: scale(.78); }
.bt-award-ok { position: relative; width: 172px; height: 71px; border: 0; padding: 0; background: none; cursor: pointer; transform: scale(.85); }
.bt-award-ok img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------- luta: interface do jogo (BattleUI_1) montada por public/js/battle-ui.js ---------- */
#screen-game .banner { z-index: 3; }
.battle-ui { z-index: 2; }
.cc-btn.cp-speed { border: 1px solid #b18b69; background: linear-gradient(135deg, #7b4b31, #352723 75%); box-shadow: inset 0 0 8px #c1834855; }
.cc-btn.cp-speed img { visibility: hidden; }
.cc-btn.cp-speed::after { content: attr(data-speed) '×'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff5d4;
  font: bold 25px/1 'FZCuYuan', Inter, sans-serif; text-shadow: 0 2px 3px #22150e; pointer-events: none; }
.cc-btn.cp-speed:disabled { cursor: default; }
.battle-ui .cc-panel { pointer-events: none !important; }
.battle-ui .bt-card { pointer-events: auto !important; cursor: pointer; }
.battle-ui .cc-img { pointer-events: none !important; }
.bt-off { display: none !important; }
.battle-ui .bt-ult-hide { visibility: hidden !important; }
/* imagem ainda sem arquivo (retrato que não existe, vaga vazia): nada, em vez da moldura cinza do navegador */
.battle-ui img:not([src]), .battle-ui img[src=""] { visibility: hidden; }
.bt-dead { filter: grayscale(1) brightness(.6); }
/* botão desabilitado do jogo (FighterButtonHandler, ButtonState.kDisabled): brilho -50 e opacidade 30% */
.battle-ui .bt-acted { filter: brightness(.5) !important; opacity: .3 !important; }
.battle-ui .bt-acted.bt-glow { opacity: .12 !important; }
.battle-ui .bt-acted.bt-dead { filter: grayscale(1) brightness(.5) !important; }
.bt-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bt-flip { transform: scaleX(-1); }
.bt-prio { margin: 0 14px 0 26px; }
.battle-ui [data-id$=".enemyName"] .bt-prio { margin: 0 26px 0 0; }
.battle-ui [data-id$=".prepareCD"] { display: flex; justify-content: center; align-items: center; }
.battle-ui [data-id$=".prepareCD"] i { display: block; flex: none; }
.bt-icon { position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; transform: translate(-50%, -50%); }
.bt-icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bt-icon .pic { width: 100px; height: 100px; }
.bt-icon .rect { width: 129.6px; height: 129.6px; margin: -3px 0 0 -1px; }
.bt-lv { position: absolute; transform: translateY(50%); font-size: 15px; pointer-events: none; z-index: 1; }
.bt-exp { position: absolute; width: 102px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .65); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); overflow: hidden; pointer-events: none; }
.bt-exp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2a9df4, #7fe3ff); transition: width .2s; }
.bt-tint { background: rgb(46, 189, 0); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.bt-tint.bt-lag { background: rgb(255, 236, 170); }
.bt-glow { mix-blend-mode: screen; opacity: .5; filter: sepia(1) saturate(4) hue-rotate(35deg) brightness(1.15); }
/* trilha das fases do ponto (embaixo do "1/20"): blocos inclinados como as pontas das barras e o escudo do chefe */
.bt-stage { position: absolute; transform: translate(-50%, 50%) scale(.8); pointer-events: none; font-family: 'FZCuYuan', Inter, sans-serif; }
.bt-stage-track { position: relative; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 22px 0 16px;
  pointer-events: auto; }
.bt-stage-track::before { content: ''; position: absolute; left: 4px; right: 4px; top: 6px; bottom: 6px; transform: skewX(-20deg);
  background: linear-gradient(rgba(8, 10, 16, .78), rgba(20, 24, 34, .62)); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 0 rgba(0, 0, 0, .6); }
.bt-pip { position: relative; display: grid; place-items: center; width: 17px; height: 12px; transform: skewX(-20deg); cursor: pointer;
  background: linear-gradient(#2a2f3c, #151820); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: width .25s, height .25s, background .25s; }
.bt-pip b { display: none; transform: skewX(20deg); font: 13px/1 'FZCuYuan', Inter, sans-serif; color: #fff;
  text-shadow: 1px 0 0 #6a2400, -1px 0 0 #6a2400, 0 1px 0 #6a2400, 0 -1px 0 #6a2400; }
.bt-pip.done { background: linear-gradient(#ffe7a1, #ffb12e 55%, #f07400); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 5px rgba(255, 150, 30, .55); }
.bt-pip.cur { width: 25px; height: 18px; background: linear-gradient(110deg, #fff5c4 0%, #ffc43c 40%, #ff7a00 60%, #ffc43c 80%);
  background-size: 300% 100%; box-shadow: inset 0 0 0 1px #fff, 0 0 8px 2px rgba(255, 170, 40, .85);
  animation: bt-pip-cur 1.1s ease-in-out infinite alternate, bt-pip-shine 1.6s linear infinite; }
.bt-pip.cur b { display: block; }
.bt-pip.pop { animation: bt-pip-pop .7s ease-out; }
.bt-stage.near .bt-pip.next { box-shadow: inset 0 0 0 1px rgba(255, 70, 40, .75), 0 0 4px rgba(255, 40, 20, .35); }
@keyframes bt-pip-cur { from { box-shadow: inset 0 0 0 1px #fff, 0 0 4px 1px rgba(255, 170, 40, .6); } to { box-shadow: inset 0 0 0 1px #fff, 0 0 12px 4px rgba(255, 190, 60, 1); } }
@keyframes bt-pip-shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes bt-pip-pop { 0% { filter: brightness(3); transform: skewX(-20deg) scale(1.9); } 60% { filter: brightness(1.4); transform: skewX(-20deg) scale(.9); } 100% { filter: none; transform: skewX(-20deg) scale(1); } }
/* escudo do chefe (BlockPoint do mapa: fundo vermelho e moldura) com a caveira */
.bt-boss { position: relative; flex: none; width: 46px; height: 46px; margin: 0 -22px 0 2px; cursor: pointer;
  filter: grayscale(.85) brightness(.7); transition: filter .4s; }
.bt-boss > img, .bt-boss > svg { position: absolute; pointer-events: none; }
.bt-boss-bg, .bt-boss-frame { left: 0; top: 0; width: 100%; height: 100%; }
.bt-boss-ring { left: 50%; bottom: -8px; width: 52px; transform: translateX(-50%); opacity: 0; }
.bt-skull { left: 25%; top: 17%; width: 50%; height: 50%; }
.bt-skull .bone { fill: #f3ede2; stroke: #2a160c; stroke-width: 3.5; stroke-linejoin: round; }
.bt-skull .eye, .bt-skull .nose { fill: #2a160c; }
.bt-stage.near .bt-boss { filter: none; animation: bt-boss-near 1.4s ease-in-out infinite; }
.bt-stage.near .bt-skull .eye { fill: #ff3d1f; filter: drop-shadow(0 0 3px #ff2a00); }
.bt-stage.boss .bt-boss { filter: drop-shadow(0 0 6px #ff3000); animation: bt-boss-on .5s ease-in-out infinite; }
.bt-stage.boss .bt-boss-ring { opacity: 1; animation: bt-boss-ring .8s ease-in-out infinite alternate; }
.bt-stage.boss .bt-skull .eye { fill: #ffde3a; filter: drop-shadow(0 0 4px #ff3000); }
.bt-stage.off .bt-boss { filter: grayscale(1) brightness(.45); animation: none; }
@keyframes bt-boss-near { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes bt-boss-on { 0%, 100% { transform: scale(1.06) rotate(-5deg); } 50% { transform: scale(1.14) rotate(5deg); } }
@keyframes bt-boss-ring { from { opacity: .55; transform: translateX(-50%) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1.15); } }
.bt-stage-tip { position: absolute; left: 50%; top: 100%; margin-top: 4px; transform: translateX(-50%); padding: 4px 10px; font-size: 16px;
  border-radius: 3px; background: rgba(8, 10, 16, .85); box-shadow: inset 0 0 0 1px rgba(255, 200, 80, .5); opacity: 0;
  transition: opacity .2s; pointer-events: none; }
.bt-stage-tip.show { opacity: 1; }
/* mapa: a luta em andamento no ponto (campaign-ui.js): espadas se chocando e a etiqueta da fase */
.cp-fight { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; }
.cp-fight-hero { position: absolute; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.cp-swords { position: absolute; left: 37px; bottom: 72px; width: 42px; height: 42px; transform: translate(-50%, 50%); overflow: visible;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(255, 170, 40, .55)); }
.cp-sw { transform-box: fill-box; transform-origin: 50% 92%; animation: cp-sw .8s ease-in infinite; }
.cp-sw .blade { fill: #eef2f8; stroke: #1b1410; stroke-width: 1.6; stroke-linejoin: round; }
.cp-sw .guard { fill: #ffc430; stroke: #1b1410; stroke-width: 1.4; }
.cp-sw .grip { fill: #8a2414; stroke: #1b1410; stroke-width: 1.4; }
.cp-swords .spark { fill: #fff6b0; stroke: #ff8a00; stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 50%;
  animation: cp-spark .8s ease-out infinite; }
@keyframes cp-sw { 0%, 100% { transform: rotate(16deg); } 42% { transform: rotate(42deg); } 54% { transform: rotate(35deg); } }
@keyframes cp-spark { 0%, 38% { opacity: 0; transform: scale(.2); } 45% { opacity: 1; transform: scale(1.1); } 72%, 100% { opacity: 0; transform: scale(1.6) rotate(20deg); } }
.cp-fight-tag { position: absolute; left: 0; bottom: -31px; transform: translate(-50%, 50%); display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 4px 8px 5px; border-radius: 3px; white-space: nowrap; background: rgba(6, 10, 22, .84);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 80, .6), 0 2px 4px rgba(0, 0, 0, .6); }
.cp-fight-tag b { font: 15px/1 'FZCuYuan', Inter, sans-serif; color: #ffd54a; }
.cp-fight-pips { display: flex; align-items: center; gap: 2px; height: 14px; }
.cp-fight-pips i { width: 7px; height: 6px; transform: skewX(-20deg); background: #2a2f3c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cp-fight-pips i.done { background: linear-gradient(#ffe7a1, #ff9a10); }
.cp-fight-pips i.cur { width: 10px; height: 8px; background: #fff3b0; box-shadow: 0 0 5px 1px #ffb020; animation: cp-pip .7s ease-in-out infinite alternate; }
.cp-skull { width: 14px; height: 14px; margin-left: 2px; }
.cp-skull .bone { fill: #cfc8bc; stroke: #2a160c; stroke-width: 4; stroke-linejoin: round; }
.cp-skull .eye { fill: #2a160c; }
.cp-fight.near .cp-skull .eye { fill: #ff3d1f; }
.cp-fight.boss .cp-fight-tag { box-shadow: inset 0 0 0 1px #ff4a2a, 0 0 10px 2px rgba(255, 50, 20, .75); animation: cp-boss .6s ease-in-out infinite alternate; }
.cp-fight.boss .cp-fight-tag b { color: #ff6a4a; }
.cp-fight.boss .cp-skull { width: 17px; height: 17px; animation: cp-skull .5s ease-in-out infinite; }
.cp-fight.boss .cp-skull .eye { fill: #ffde3a; }
.cp-fight.boss .cp-sw, .cp-fight.boss .cp-swords .spark { animation-duration: .5s; }
.cp-fight.pop .cp-fight-tag { animation: cp-pop .6s ease-out; }
@keyframes cp-pip { from { opacity: .6; } to { opacity: 1; } }
@keyframes cp-boss { from { transform: translate(-50%, 50%) scale(1); } to { transform: translate(-50%, 50%) scale(1.08); } }
@keyframes cp-skull { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes cp-pop { 0% { transform: translate(-50%, 50%) scale(1.35); filter: brightness(2); } 100% { transform: translate(-50%, 50%) scale(1); filter: none; } }
/* Fighters' List (HeroManage_1, public/js/heromanage-ui.js) */
#screen-heromanage { position: relative; overflow: hidden; background: #0b1020; }
.hm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hm-list { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.hm-list::-webkit-scrollbar { display: none; }
.hm-row { position: relative; width: 920px; flex: none; }
.hm-row > * { position: absolute; }
.hm-icon, .hm-type { transform: translate(-50%, 50%); pointer-events: none !important; }
.hm-icon { width: 120px; height: 120px; }
.hm-rec { width: 120px; height: 80px; pointer-events: none !important; }
.hm-search { background: transparent; border: 0; outline: 0; padding: 0; color: #c0b17c; font: 20px/1 'FZCuYuan', Inter, sans-serif; }
.hm-search::placeholder { color: #c0b17c; opacity: 1; }
.hm-panel { left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none !important; }
.hm-panel > * { position: absolute; pointer-events: auto; }
.hm-panel [data-ftype], .hm-panel [data-fsort] { cursor: pointer; }
/* baús da campanha (campaign-ui.js): popup do baú (PveBox_2), prêmio (GetAward_1), brilho dos que podem ser abertos,
   baús da rota do Elite e o ponto vermelho das setas */
.cp-boxpop .cc-btn, .cp-awardpop .cc-btn { cursor: pointer; }
.cp-btn-off { filter: grayscale(1) brightness(.75); pointer-events: none !important; }
.cp-box-tip { font-size: 18px; line-height: 1.25; text-align: center; white-space: normal; }
.cp-box-glow { position: absolute; width: 200px; height: 200px; pointer-events: none !important; }
.cp-gift-hit { position: absolute; transform: translate(-50%, 50%); cursor: pointer; pointer-events: auto !important; }
.cp-arrow-red { position: absolute; width: 29px; height: 29px; transform: translate(-50%, 50%); pointer-events: none !important; }
.cp-award-fx { position: absolute; left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none !important; }
.cp-award-icons { position: absolute; left: 120px; bottom: 265px; width: 720px; height: 130px; display: flex; align-items: center;
  justify-content: center; gap: 12px; pointer-events: none; }
/* ---------- Lineup (Team_1 do jogo): posições em public/data/ui/Team_1.json, montagem em public/js/lineup-ui.js ---------- */
#screen-lineup { position: relative; overflow: hidden; background: #0b1020; }
.lu-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* CustomText do layout: sombra preta (2, -2) */
.lu .cc-text { text-shadow: 2px 2px 1px #000; }
.lu-fashion-icon { position: absolute; left: 50%; top: 50%; width: 59px; height: 66px;
  background: url('/assets/sheets/shizhuangrukouimage.png') -2px -2px no-repeat;
  transform: translate(-50%, -50%) scale(1.2); pointer-events: none; }
.lu .cc-panel.lu-touch { pointer-events: auto !important; cursor: pointer; }
.lu-cv { position: absolute; pointer-events: none !important; }
.lu-type-hit { position: absolute; cursor: pointer; }
.lu [data-id$=".Image_leftBg"] { cursor: pointer; }
/* faixa do nome (z 99999) é só imagem, como o ImageView sem toque do KOF: cobria a metade esquerda do Fashion */
.lu [data-id$=".Image_namebg"] { pointer-events: none !important; }
/* Fate: cc.Label de 20, cinza (119,119,119) ou amarelo (255,234,0) quando ativo */
.lu-fates { position: absolute; left: 0; bottom: 0; width: 0; height: 0; pointer-events: none !important; }
.lu-fate { position: absolute; transform: translateY(50%); font-size: 20px; line-height: 1; white-space: nowrap; color: #777; }
.lu-fate.r { transform: translate(-100%, 50%); }
.lu-fate.on { color: #ffea00; }
/* lista do time (listview horizontal, células de 123×133) */
.lu-list { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lu-cell { position: relative; width: 123px; height: 133px; flex: none; cursor: pointer; }
.lu-cell > img, .lu-cell-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.lu-cell-icon { margin: -1px 0 0 1px; }
.lu-cell-sel { z-index: 2; }
/* ícones (IconFactory): nó do tamanho da moldura, tudo centrado */
.lu-icon { position: relative; width: 120px; height: 120px; pointer-events: none; }
.lu-icon.lu-eq { width: 121px; height: 121px; }
.lu-icon > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lu-icon > .lu-ic-pic { width: 90px; height: 90px; }
.lu-icon > .lu-ic-rect, .lu-icon > .lu-eq-rect { margin-top: -3.5px; }
.lu-icon > .lu-ic-star { top: calc(50% + 40px); }
.lu-ic-lv { position: absolute; left: 16px; bottom: 30px; font-size: 21px; line-height: 1; color: #fff; white-space: nowrap;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.lu-eq-slot { position: absolute; width: 0; height: 0; cursor: pointer; }
.lu-eq-slot > .lu-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.lu-eq-slot > .lu-lock { position: absolute; left: 17px; top: 20px; width: 54px; transform: translate(-50%, -50%); pointer-events: none; }
.lu-eq-slot::before { content: ''; position: absolute; left: -52px; top: -52px; width: 104px; height: 104px; }
/* dica do tipo (pic_zr_smdk_1 em 9 fatias, 400×66, em (520, 600)) */
.lu-tip { position: absolute; left: 320px; bottom: 567px; width: 400px; height: 66px; box-sizing: border-box; z-index: 5;
  border-style: solid; border-width: 14px 24px 46px 60px; border-image: url('/assets/ui/lineup/pic_zr_smdk_1.png') 14 24 46 60 fill / 14px 24px 46px 60px stretch;
  pointer-events: none !important; }
.lu-tip::after { content: ''; position: absolute; left: 132.5px; bottom: -59px; width: 15px; height: 14px; background: url('/assets/ui/lineup/pic_zr_smdk_2.png'); }
/* PCRichText de 400 de largura centrado 12 à direita do meio: o texto começa a 12 da borda */
.lu-tip > span { position: absolute; left: -48px; width: 400px; top: -14px; bottom: -46px; display: flex; align-items: center;
  font-size: 21px; line-height: 1.1; white-space: normal; }

/* ---------- barras de rolagem: finas, escuras e translúcidas, integradas às telas (sem a barra branca padrão) ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) rgba(0, 0, 0, .28); }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .28); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
/* a barra do jogo (spmoveback + spmove) nas listas das telas de lutador */
.hx-track { position: absolute; background: url('/assets/ui/hero/pic_lashenxian_renwushuxing.png') center / 100% 100%; pointer-events: none !important; }
.hx-thumb { position: absolute; box-sizing: border-box; border-style: solid; border-width: 21px 2px;
  border-image: url('/assets/ui/hero/pic_lashentiao_renwushuxing.png') 21 2 fill / 21px 2px stretch; pointer-events: none !important; }
.hx-track[hidden], .hx-thumb[hidden] { display: none; }

/* ---------- telas de lutador (fighters-ui.js): base ---------- */
.hx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-img { display: block; position: absolute; -webkit-user-drag: none; }
.hx-anim { position: absolute; pointer-events: none !important; }
.hx-anim[hidden] { display: none; }
.hx-toast { position: fixed; left: 50%; top: 46%; z-index: 80; transform: translate(-50%, -50%); padding: 10px 24px; border-radius: 6px;
  background: rgba(0, 0, 0, .74); color: #fff; font: 18px 'FZCuYuan', Inter, sans-serif; pointer-events: none; animation: hx-toast 1.8s ease both; }
@keyframes hx-toast { 0% { opacity: 0; transform: translate(-50%, -30%); } 12%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -60%); } }

/* ---------- Hall of Fame (heros_1 / FavourMediator): a grade de arcade ---------- */
.hf-scroll { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; pointer-events: auto !important; overscroll-behavior: contain; }
.hf-scroll::-webkit-scrollbar { display: none; }
.hf-inner { position: relative; width: 100%; }
.hf-inner.hf-in { animation: hf-in .417s linear both; }
.hf-icon { position: absolute; width: 100px; height: 100px; transform: scale(.88); transform-origin: 0 0; cursor: pointer; }
.hf-frame { left: -10px; bottom: -10px; width: 120px; height: 120px; }
.hf-pic { left: 5px; bottom: 1px; width: 90px; height: 90px; }
.hf-nobody { left: 6px; bottom: 6px; width: 88px; height: 88px; }
.hf-dark { left: -2px; bottom: -3.5px; width: 104px; height: 103px; }
.hf-icon.has:hover { filter: brightness(1.18); }
/* entrada (main_mingrentangzairu, 11 quadros a 24/s): sai pequena e escura do centro, passa de 1,05 e assenta */
@keyframes hf-in {
  0% { opacity: .3; transform: scale(.5); filter: brightness(0); }
  40% { opacity: 1; transform: scale(1.03); filter: brightness(1); }
  60% { transform: scale(1.05); }
  70% { transform: scale(1.02); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* contador: a placa azul do jogo, a barra de progresso da ficha e conquistados/total */
.hf-count { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 14px;
  border-style: solid; border-width: 0 44px; border-image: url('/assets/ui/hero/pic_duiwuming_bg.png') 0 44 fill / 0 44px stretch;
  pointer-events: none !important; white-space: nowrap; line-height: 1;
  text-shadow: 2px 0 0 #00123a, -2px 0 0 #00123a, 0 2px 0 #00123a, 0 -2px 0 #00123a, 1px 1px 0 #00123a, -1px -1px 0 #00123a, 1px -1px 0 #00123a, -1px 1px 0 #00123a; }
.hf-count-label { font-size: 20px; color: #80ddff; }
.hf-count-bar { position: relative; width: 150px; height: 15px; }
.hf-count-bar > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hf-count-bar > i { position: absolute; left: 1%; top: 7%; height: 86%; width: 0; overflow: hidden; }
.hf-count-bar > i > img { display: block; width: 147px; height: 100%; }
.hf-count-num { font-size: 24px; color: #fff; }
.hf-count-num b { font-weight: inherit; color: #ffdc00; }

/* ---------- ficha do lutador (HeroAttribute_1 / HeroAttributeMediator) ---------- */
.hi-scroll { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; pointer-events: auto !important; overscroll-behavior: contain; }
.hi-scroll::-webkit-scrollbar, .hi-dlist::-webkit-scrollbar, .hi-tip-list::-webkit-scrollbar, .hi-help-list::-webkit-scrollbar { display: none; }
.hi-inner { position: relative; width: 500px; }
.hi-inner > * { position: absolute; }
.hi-intro { width: 400px; font-size: 21px; line-height: 30px; color: #ecca82; white-space: normal; pointer-events: none; }
.hi-pos { font-size: 21px; line-height: 26px; white-space: nowrap; color: #fff; pointer-events: none; }
.hi-fate-name { width: 120px; font-size: 20px; line-height: 24px; color: #7f7f7f; pointer-events: none; }
.hi-fate-name.on { color: #ffeb00; }
.hi-fate { width: 274px; font-size: 21px; line-height: 28px; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
.hi-skill, .hi-soul { cursor: pointer; }
.hi-skill > *, .hi-soul > * { position: absolute; pointer-events: none; }
.hi-skill:hover, .hi-soul:hover { filter: brightness(1.12); }
.hi-skill-shade { background: rgba(0, 0, 0, .55); border-radius: 6px; }
.hi-soul-shade { opacity: .467; }
.hi-skill-name { font-size: 18px; line-height: 21px; color: #fff8d2; white-space: normal; overflow: hidden; pointer-events: none; }
.hi-see { cursor: pointer; }
.hi-side { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; }
.hi-side[hidden] { display: none; }
/* card: 383×512 na escala do jogo (1,7 × 0,59) */
.hi-cardbox { position: absolute; transform: scale(var(--s, 1)); transform-origin: 50% 50%; pointer-events: none !important; }
.hi-cardbox[hidden] { display: none; }
.hi-cardbox > * { position: absolute; }
.hi-cardbox.hi-flip { transition: transform .3s cubic-bezier(.895, .03, .685, .22); transform: scale(.001, var(--s, 1)); }
.hi-typeback { transform: scale(1.25); }
.hi-flipx { transform: scaleX(-1); }
.hi-bust { overflow: hidden; }
.hi-bust > img { max-width: none; }
.hi-name, .hi-plus { white-space: nowrap; line-height: 1; font-size: 33px; color: #fff;
  text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }
.hi-plus { font-size: 31px; }
.hi-detailbox { pointer-events: auto !important; }
.hi-dbg { transform: scale(1.25); }
.hi-dmask { transform: scale(1.3); }
.hi-dlist { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.hi-dinner { position: relative; width: 411px; }
.hi-drow { position: absolute; left: 60px; display: flex; gap: 15px; font-size: 21px; line-height: 1.15; white-space: nowrap; }
.hi-drow b { font-weight: inherit; color: #01a5fc; }
.hi-drow span { color: #fffcf5; }
/* popups (SkillTipsView e HeroAttTipView) */
.hi-popup { position: absolute; inset: 0; z-index: 20; }
.hi-popgroup { pointer-events: auto !important; }
/* tags do lutador (HeroLabel: HeroLabelDescMediator) */
.hi-marks > .hi-mark { pointer-events: auto; cursor: pointer; }
.hi-marks > .hi-mark:hover { filter: brightness(1.12); }
.hl-floor { pointer-events: none; }
.hl-desc { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.hl-desc::-webkit-scrollbar, .hl-list::-webkit-scrollbar { display: none; }
.hl-desc-text { margin: auto 0; width: 100%; font-size: 20px; line-height: 26px; color: #f3ad34; white-space: normal; }
.hl-list { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.hl-inner { position: relative; width: 100%; }
.hl-cell { position: absolute; width: 106px; height: 106px; transform: scale(.8); }
.hl-cell.on { cursor: pointer; }
.hl-cell > .hl-cell-bg { left: 0; top: 0; width: 106px; height: 106px; }
.hl-cell > .lu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.88); }
.hi-tip, .hi-help { position: absolute; box-sizing: border-box; }
.hi-tip > *, .hi-help > *, .hi-tip-head > *, .hi-tip-icon > * { position: absolute; }
.hi-tip-list, .hi-help-list { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.hi-tip-list { width: 386px; }
.hi-tip-text { position: relative; width: 365px; padding-bottom: 10px; font-size: 21px; line-height: 32px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hi-tip-icon.locked > img:not(.hi-tip-lock) { filter: grayscale(1); }
.hi-help-title { font-size: 33px; color: #fff; }
.hi-help-row { display: flex; padding: 0 0 15px 30px; font-size: 21px; line-height: 26px; }
.hi-help-row b { flex: none; font-weight: inherit; color: #00a5fe; white-space: pre; }
.hi-help-row span { flex: none; width: 430px; color: #fffcf6; }

/* ---------- Equipamento (layout equip do jogo): posições em public/data/ui/equip.json, montagem em public/js/equip-ui.js ---------- */
#screen-equip { position: relative; overflow: hidden; background: #0b1020; }
.eq .cc-text { text-shadow: 2px 2px 1px #000; }
.lu-icon > .lu-eq-star { top: calc(50% + 38px); }
.eq-slot { position: absolute; width: 0; height: 0; transform: scale(.8); cursor: pointer; }
.eq-slot.eq-big { transform: none; cursor: default; pointer-events: none !important; }
.eq-slot > .lu-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.eq-slot > .lu-lock { position: absolute; left: 17px; top: 20px; width: 54px; transform: translate(-50%, -50%); pointer-events: none; }
.eq-item { position: absolute; width: 100px; height: 100px; transform-origin: 50% 50%; cursor: pointer; }
.eq-item:empty { pointer-events: none !important; }
.eq-item > .it-icon { position: absolute; left: 0; top: 0; }
.eq-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.eq-list::-webkit-scrollbar { display: none; }
.eq-cell { position: relative; width: 109px; height: 109px; cursor: pointer; }
.eq-cell > img, .eq-cell-icon { position: absolute; transform: translate(-50%, 50%); pointer-events: none; }
.eq-cell-frame { left: 58px; bottom: 52px; }
.eq-cell-icon { left: 58px; bottom: 52px; z-index: 1; }
.eq-cell-icon .lu-icon { transform: none; }
.eq-cell-sel { left: 58px; bottom: 52px; z-index: 2; }
.eq-cell-red { left: 94px; bottom: 85px; z-index: 4; }
.eq-cell-on { left: 30px; bottom: 78px; width: 70.7px; z-index: 3; }

/* raridade (APT do jogo) e o cartão do chefe do ponto com a chance do fragmento */
.rarity { display: inline-block; padding: 1px 6px; border-radius: 4px; font: 700 11px/1.4 Inter, sans-serif; color: #fff; background: #5b6370; }
.rarity.r-common { background: #5b6370; }
.rarity.r-rare { background: #2b7fd8; }
.rarity.r-epic { background: #8e44d9; }
.rarity.r-legendary { background: linear-gradient(90deg, #ff8a00, #e94e1b); }
.rcard .rarity { position: absolute; left: 6px; top: 6px; z-index: 2; font-size: 9px; }
.hd-rarity { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 12px; color: var(--muted, #aab); }
.cp-boss, .ep-boss { position: absolute; pointer-events: auto !important; cursor: pointer; }
.cp-boss { transform: none; }
.ep-boss { width: 220px; transform: translate(-100%, 100%); z-index: 3; }
.boss-chip { width: 100%; padding: 10px; border: 4px solid transparent;
  border-image: url('/assets/campaign/ui/bg_common_lashenkuang2.png') 10 fill / 4px stretch;
  font-family: 'FZCuYuan', Inter, sans-serif; color: #fff; line-height: 1.15; white-space: normal;
  text-shadow: 1px 1px 1px #000; }
.boss-chip-head { display: flex; align-items: center; gap: 7px; }
.boss-chip-icon { position: relative; width: 52px; height: 52px; flex: none; }
.boss-chip-icon .it-icon { position: absolute; left: 0; top: 0; transform: scale(.52); transform-origin: 0 0; }
.boss-chip-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.boss-chip-txt small { font-size: 12px; color: #ffcc55; }
.boss-chip-txt > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: 17px; font-weight: normal; overflow-wrap: anywhere; }
.boss-chip-apt { font-size: 12px; color: #b8c9dd; }
.boss-chip-have { margin-top: 8px; font-size: 13px; color: #08d1fc; }
.boss-chip-drops { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 5px; padding-top: 6px; border-top: 1px solid #7775; font-size: 12px; color: #c8c8c8; }
.boss-chip-drops span { min-width: 0; }
.boss-chip-drops strong { flex: none; font-size: 15px; font-weight: normal; color: #ffcc55; }
/* popups de sucesso da evolução e do despertar: a animação no canvas e os pedaços do layout presos aos nós dela */
.eq-pop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; pointer-events: auto; }
.eq-pop-cv { position: absolute; left: 0; top: 0; pointer-events: none; }
.eq-pop-slot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.eq-pop-slot > * { position: absolute; }
.eq-pop-icon > .lu-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.eq-pop { background: rgba(0, 0, 0, .353); }   /* máscara do PopupViewGroup: preto a 90/255 */

/* ---------- Strengthen (Strengthen.json do jogo), aba FightSoul e o treino das almas: public/js/strengthen-ui.js ---------- */
#screen-strengthen { position: relative; overflow: hidden; background: #0b1020; }
#strengthen { position: absolute; inset: 0; }
.st .cc-text { text-shadow: 2px 2px 1px #000; }
.st [hidden] { display: none !important; }
.st-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.st-list::-webkit-scrollbar { display: none; }
.st-cell { position: relative; width: 112px; height: 111px; cursor: pointer; }
.st-cell > img, .st-cell-icon { position: absolute; transform: translate(-50%, 50%); pointer-events: none; }
.st-cell-frame, .st-cell-icon, .st-cell-sel { left: 59px; bottom: 53px; }
.st-cell-icon { z-index: 1; }
.st-cell-icon .lu-icon { transform: none; }
.st-cell-sel { z-index: 2; }
.st-cell-red { left: 104px; bottom: 93px; z-index: 4; }
.st-cell-on { left: 30px; bottom: 78px; width: 70.7px; z-index: 3; }
.st-dadi { position: absolute; transform: translate(-50%, 50%); pointer-events: none !important; }
.st-slot { position: absolute; width: 0; height: 0; pointer-events: none !important; }
.st-slot > img { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.st-gray { filter: grayscale(1); }
.st-progress { font-family: 'FZCuYuan', Inter, sans-serif; color: #fffcf6; pointer-events: none !important;
  line-height: 1.15; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.st-progress h3 { margin: 0; text-align: center; color: #ffdc68; font-size: 23px; line-height: 1.2; }
.st-progress-owner { color: #bfc5cf; text-align: center; font-size: 16px; margin-top: 3px; }
.st-affinity-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 20px; color: #ffdc68; }
.st-affinity-heading b { font-weight: normal; color: #01e0ff; }
.st-affinity-bar { position: relative; height: 25px; margin-top: 3px;
  border-image: url('/assets/ui/strengthen/bg_strengthen_info2.png') 10 52 9 52 fill / 10px 16px 9px 16px stretch; }
.st-affinity-bar img { position: absolute; inset: 4px 6px; width: calc(100% - 12px); height: 17px; }
.st-affinity-bonus { color: #18ff00; text-align: center; font-size: 18px; margin-top: 6px; }
.st-affinity-next { text-align: center; font-size: 14px; line-height: 1.2; margin-top: 5px; color: #edca82; }
.st-progress-stats { display: grid; gap: 4px; margin-top: 9px; }
.st-progress-stats > div { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; min-height: 21px;
  border-image: url('/assets/ui/strengthen/bg_strengthen_info2.png') 10 52 9 52 fill / 10px 16px 9px 16px stretch; }
.st-progress-stats span { color: #01c9ff; font-size: 15px; }
.st-progress-stats b { font-size: 17px; font-weight: normal; }
.st-affinity-title { margin-top: 8px; color: #ffdc68; text-align: center; font-size: 16px; }
.st-affinity-milestones { display: flex; gap: 3px; margin-top: 4px; }
.st-affinity-milestones > div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 3px 0; color: #8f949d;
  background: url('/assets/ui/strengthen/bg_strengthen_info2.png') center / 100% 100% no-repeat; font-size: 14px; line-height: 1.2; }
.st-affinity-milestones b { font-weight: normal; }
.st-affinity-milestones .reached { color: #18ff00; }
.st-progress-guide { margin-top: 8px; color: #fff; text-align: center; font-size: 14px; line-height: 1.2; }
.st-progress-note { margin-top: 6px; color: #9aa0b3; text-align: center; font-size: 12px; line-height: 1.2; }
.st-wrap { white-space: normal !important; line-height: 1.2; }
.st-locktext { position: absolute; left: 772px; bottom: 82px; width: 120px; transform: translateY(50%); font-size: 21px; line-height: 1.15;
  font-family: 'FZCuYuan', Inter, sans-serif; text-shadow: 2px 2px 1px #000; pointer-events: none !important; }
.st-blink { animation: st-blink .9s ease-in-out infinite alternate; }
@keyframes st-blink { from { opacity: 1; } to { opacity: .15; } }
/* o treino (FightingAddHero_1): máscara do PopupViewGroup (preto a 90/255) */
.st-pop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; background: rgba(0, 0, 0, .353); pointer-events: auto; }
.st-sub { z-index: 30; }
.st-items { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; z-index: 2; }
.st-items::-webkit-scrollbar { display: none; }
.st-row { position: relative; height: 114px; }
.st-it { position: absolute; top: 13px; width: 106px; height: 106px; transform: scale(.88); cursor: pointer; touch-action: none; }
.st-it > * { position: absolute; }
.st-it-bg { left: 0; top: 0; width: 106px; height: 106px; pointer-events: none; }
.st-it-icon { left: 3px; top: 5px; pointer-events: none; }
.st-it-sel { left: -14px; top: -14px; z-index: 3; pointer-events: none; }
.st-it-mix { left: 83px; top: 19px; transform: translate(-50%, -50%); z-index: 4; }
.st-it-mix.st-check { pointer-events: none; }
.st-it-mix.cc-btn { width: 63px; height: 43px; }
.st-it-count { left: 53px; top: 86px; transform: translate(-50%, -50%); font-size: 20px; color: #fffcf6; z-index: 4; }
.st-full .st-it-icon { filter: grayscale(1); }
.st-slider { position: absolute; cursor: pointer; touch-action: none; z-index: 3; }
.st-slider > * { position: absolute; }
.st-sl-bg { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.st-sl-fill { left: 0; top: 0; width: 0; height: 100%; overflow: hidden; pointer-events: none; }
.st-sl-fill img { display: block; width: 214px; height: 24px; }
.st-sl-ball { top: 50%; width: 45px; height: 54px; transform: translate(-50%, -50%); pointer-events: none; }
.st-yb { position: absolute; width: 172px; height: 71px; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, 50%) scale(.9); z-index: 5; }
.st-yb > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.st-yb:active > img:first-child { content: url('/assets/ui/strengthen/ybpress.png'); }
.st-yb:hover { filter: brightness(1.12); }
.st-cost { position: absolute; display: flex; align-items: center; gap: 5px; transform: translate(-100%, 50%); z-index: 5; pointer-events: none !important; }
.st-cost-ic { width: 39.2px; height: 37.6px; }
.st-cost .cc-text { position: static; transform: none; font-size: 21px; }
.st-hold { position: absolute; transform: translate(-100%, 50%); font-size: 21px; color: #fdd601; z-index: 5; }
.st-rich { position: absolute; transform: translate(-50%, 50%); white-space: nowrap; font-family: 'FZCuYuan', Inter, sans-serif; font-size: 21px;
  line-height: 1.25; color: #fffcf6; text-shadow: 2px 2px 1px #000; pointer-events: none !important; }
.st-rich-c { text-align: center; }
.st-rich[style*='width'] { white-space: normal; }
.st-rich .st-rt-img { display: inline-block; vertical-align: middle; height: 34px; margin: 0 2px; }

/* aba Bless do equipamento (bless-ui.js) */
.bl-extra { position: absolute; left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none !important; }
.bl-extra > * { position: absolute; pointer-events: none; }
.bl-cv, .bl-fxdom { position: absolute; pointer-events: none; }
.bl-clip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.bl-slot, .bl-cl { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.bl-cl > * { position: absolute; pointer-events: none !important; }
.bl-ghost { visibility: hidden !important; }
.bl-gray, .cc-btn.bl-gray:hover, .cc-btn.bl-gray:active { filter: grayscale(1); }
.eq .cc-text.bl-touch { pointer-events: auto !important; cursor: pointer; }
.eq-pop.bl-clear { background: transparent; }
/* popups do jogo: centerScaleWithAlphaFrom (escala 0,3 -> 1 em 0,3 s com EaseBackOut; opacidade em 0,15 s) */
.bl-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.bl-stage.bl-in { animation: bl-scale .3s cubic-bezier(.175, .885, .32, 1.275) both, bl-fade .15s linear both; }
@keyframes bl-scale { from { transform: scale(.3); } to { transform: none; } }
@keyframes bl-fade { from { opacity: 0; } to { opacity: 1; } }
.bl-scroll { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; pointer-events: auto; }
.bl-scroll::-webkit-scrollbar { display: none; }
.bl-inner { position: relative; width: 100%; }
.bl-cl > .bl-hit { left: 0; bottom: 0; width: 463px; height: 50px; pointer-events: auto !important; cursor: pointer; }
.bl-mark { position: absolute; pointer-events: none; }
.bl-rule { position: relative; box-sizing: border-box; }
.bl-tips { white-space: normal; line-height: 1.2; transform: translate(-50%, 50%); }
/* Strengthen: Upgrade e Promote */
.st-mat > .st-mat-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.st-fly { position: absolute; width: 0; height: 0; transform: translate(-50%, 50%); pointer-events: none !important; z-index: 5; }
.st-fly > .st-mat-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.st-qmax { position: absolute; width: 0; height: 0; pointer-events: none !important; }
.st-qmax > img { position: absolute; left: 0; transform: translate(-50%, 50%); }
.st-qmax-bg { bottom: 8px; }
.st-qmax-logo { bottom: 100px; }
.st-qmax-txt { bottom: -100px; }
.st-attrtip { position: absolute; transform: translate(-50%, 50%); font-size: 21px; color: #18ff00; z-index: 9;
  animation: st-attrtip 1.4s ease-out forwards; }
@keyframes st-attrtip { 0% { opacity: 0; margin-bottom: -10px; } 15% { opacity: 1; margin-bottom: 0; } 70% { opacity: 1; } 100% { opacity: 0; margin-bottom: 60px; } }
.st-anim-cv { position: absolute; left: 0; top: 0; pointer-events: none; }
.st-anim-slot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.st-anim-slot > * { position: absolute; }
.st-pp-icon { left: 0; top: 0; }
.st-pp-icon > .lu-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.st-pp-name { left: 0; top: 0; transform: translate(-50%, -50%); font-size: 21px; }
.st-atlas { left: 0; top: 0; display: flex; transform: translate(-50%, -50%); }
.st-atlas i { display: block; width: 16px; height: 25px; background: url('/assets/ui/strengthen/num_strengthen_new_shushuzi.png') calc(var(--d) * -16px) 0 no-repeat; }
.st-pp-soulframe { left: 0; top: 5px; transform: translate(-50%, -50%) scale(.8); }
.st-pp-soulpic { left: 0; top: 5px; transform: translate(-50%, -50%) scale(.8); }
.st-pp-soulname { left: -40px; top: 0; transform: translate(0, -50%); font-size: 21px; color: #08d1fc; }
.st-pp-souldes { left: -168px; top: 15px; width: 260px; transform: translate(0, -50%); font-size: 20px; color: #edca82; white-space: normal !important; }
/* Strengthen: Skill, Evolve, "Way to gain" e Promote em lote (strengthen-ui.js) */
.st .st-off, .st .cc-btn.st-off:hover, .st .cc-btn.st-off:active { filter: grayscale(1); }
.st-sk-pic { position: absolute; left: 0; top: 0; width: 100px; height: 100px; transform: translate(-50%, -50%) scale(.9); pointer-events: auto; cursor: pointer; }
.st-sk-pic > .st-sk-img { position: absolute; left: 0; top: 0; width: 100px; height: 100px; transform: none; }
.st-sk-pic > .st-sk-badge { position: absolute; left: 24px; top: 11px; transform: translate(-50%, -50%); }
.st-slot.st-gray .st-sk-pic { filter: grayscale(1); }
.st-skmode { position: absolute; width: 112px; height: 38px; transform: translate(-50%, 50%) scale(.8); z-index: 11; }
.st-flash { animation: st-flash .12s linear; }
@keyframes st-flash { 0% { scale: 1; color: #18ff00; } 50% { scale: 1.4; color: #18ff00; } 100% { scale: 1; color: #18ff00; } }
.st-skilltip { position: absolute; transform: translate(-50%, 50%); font-size: 21px; color: #18ff00; z-index: 9; pointer-events: none;
  animation: st-skilltip .6s linear forwards; }
@keyframes st-skilltip { 0% { margin-bottom: 0; opacity: 1; } 50% { margin-bottom: 40px; } 100% { margin-bottom: 40px; opacity: 0; } }
.st .cc-text.st-area { white-space: pre-wrap !important; text-align: center; line-height: 1.25; }
.st .cc-text.st-outline2 { text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }
.st .cc-text.st-outline-w { text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.st-slider2 .st-sl-fill { left: 2px; top: 3px; height: 20px; }
.st-slider2 .st-sl-fill img { width: 232px; height: 20px; }
.st-pop.st-clear { background: transparent; }
.st-pop.st-dark { background: rgba(0, 0, 0, .706); }
.st-s9 { position: absolute; left: 0; top: 0; box-sizing: border-box; }
/* Evolve e Dark Force */
.st-dark-pic { position: absolute; left: 0; top: 0; width: 100px; height: 100px; transform: translate(-50%, -50%) scale(.9); pointer-events: auto; cursor: pointer; }
.st-dark-pic > img { width: 100px; height: 100px; display: block; }
.st .cc-text.st-darklv { font-size: 16.8px !important; z-index: 5; }
.st-su-frame { left: 0; top: 0; transform: translate(-50%, -50%) scale(.7); }
.st-su-pic { left: 0; top: -1px; width: 63px; height: 63px; transform: translate(-50%, -50%); }
.st-su-name { left: -42px; top: 0; transform: translate(0, -50%); font-size: 21px; color: #08d1fc; }
.st-su-des { left: -168px; top: 10px; width: 350px; transform: translate(0, -50%); font-size: 18px; color: #edca82; white-space: normal !important; line-height: 1.2; }
.st-aw-card { left: 0; top: 0; width: 305px; transform: translate(-50%, -50%); }
/* "Way to gain" */
.st-src-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.st-src-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; pointer-events: auto; }
.st-src-list::-webkit-scrollbar { display: none; }
.st-src-row { position: relative; width: 638px; height: 88px; margin: 6px 0 0; cursor: pointer; pointer-events: auto; }
.st-src-scroll .st-src-row { margin: 5px 7px 0; }
.st-src-row:active { transform: scale(.95); }
.st-src-row > * { position: absolute; }
.st-src-tab { left: 52px; bottom: 74px; transform: translate(-50%, 50%); }
.st-src-des { left: 32px; bottom: 34px; transform: translate(0, 50%); font-size: 21px; color: #fef9d3; white-space: pre !important; }
.st-src-drops { left: 299px; bottom: 8px; width: 223px; height: 59px; }
.st-src-drops > * { position: absolute; }
.st-src-dbg { left: 0; top: 0; width: 223px; height: 60px; }
.st-src-drop { top: 29.5px; width: 52px; height: 52px; transform: translate(-50%, -50%); }
.st-src-drop > img { position: absolute; left: 0; top: 0; width: 52px; height: 52px; }
.st-src-dic { position: absolute; left: 26px; top: 26px; transform: translate(-50%, -50%) scale(.4); }
.st-src-lock { left: 571px; bottom: 38px; transform: translate(-50%, 50%); font-size: 21px; color: #d20000; }
.st-src-go { left: 580px; bottom: 34px; transform: translate(-50%, 50%); font-size: 20px; color: #fef9d3; }
/* Promote em lote */
.st-ok-hero { position: absolute; width: 0; height: 0; pointer-events: none; }
.st-ok-hic { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.9); }
.st-ok-hic .lu-icon { transform: none; }
.st-ok-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; pointer-events: auto; }
.st-ok-list::-webkit-scrollbar { display: none; }
.st-ok-row { position: relative; width: 396px; height: 90px; }
.st-ok-it { position: absolute; top: 0; width: 90px; height: 90px; }
.st-ok-it > * { position: absolute; }
.st-ok-bg { left: 45px; top: 44px; transform: translate(-50%, -50%) scale(.85); }
.st-ok-ic { left: 45px; top: 44px; transform: translate(-50%, -50%) scale(.85); }
.st-ok-add { left: 45px; top: 44px; width: 92px; height: 92px; transform: translate(-50%, -50%) scale(.85); cursor: pointer; pointer-events: auto;
  background: url('/assets/ui/strengthen/pic_strengthen_add.png') center / 52px no-repeat; animation: st-blink .9s ease-in-out infinite alternate; }
.st-ok-count { left: 43px; top: 73px; transform: translate(-50%, -50%); font-size: 15px !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important; }
.st-slider3 .st-sl-fill { left: 3px; top: 2px; height: 20px; }
.st-slider3 .st-sl-fill img { width: 351px; height: 20px; }
/* Gem Convert e a dica do item */
.st-pop.st-dim59 { background: rgba(0, 0, 0, .588); }
.st-gem-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; pointer-events: auto; }
.st-gem-list::-webkit-scrollbar { display: none; }
.st-gem-row { position: relative; width: 285px; height: 95px; }
.st-gem-it { position: absolute; top: 5px; width: 85px; height: 85px; cursor: pointer; touch-action: pan-y; }
.st-gem-it > * { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.st-gem-bg { width: 85px; height: 85px; transform: translate(-50%, -50%); }
.st-gem-ic { transform: translate(-50%, -50%) scale(.85); }
.st-gem-sel { transform: translate(-50%, -50%) scale(.85); z-index: 2; }
.st-gem-slider { transform: scale(.7); }
.st-gem-rule { position: absolute; width: 350px; height: 400px; z-index: 6; pointer-events: none; }
.st-gem-rule > .st-gem-rule-arrow { position: absolute; left: 350px; top: 21px; transform: translate(-50%, -50%) scaleX(-1); }
.st-gem-rule-text { position: absolute; left: 5px; top: 8px; width: 340px; font-family: 'FZCuYuan', Inter, sans-serif; font-size: 19px;
  line-height: 1.2; color: #fff5be; text-align: center; }
.st-gem-rule-text p { margin: 0; }
.st-gem-got { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.st-itip { position: absolute; width: 350px; height: 173px; z-index: 40; pointer-events: none; }
.st-itip > * { position: absolute; }
.st-itip > .st-s9 { left: 0; top: 0; }
.st-itip-detail { left: 16px; top: 99px; width: 320px; }
.st-itip-ibg { left: 58px; top: 53px; width: 106px; height: 106px; transform: translate(-50%, -50%) scale(.75); }
.st-itip-icon { left: 58px; top: 53px; transform: translate(-50%, -50%) scale(.75); }
.st-itip-name { left: 108px; top: 23px; transform: translate(0, -50%); font-size: 21px; }
.st-itip-own { left: 108px; top: 60px; transform: translate(0, -50%); font-size: 21px; color: #ffa200; }
.st-itip-num { left: 165px; top: 61px; transform: translate(0, -50%); font-size: 21px; color: #edca82; }
.st-itip .cc-text.st-itip-desc { left: 31px; top: 118px; width: 275px; font-size: 19px; color: #edca82; white-space: normal; line-height: 22px; }
/* os popups de animação (Promoted, Evolved, troca de gemas) ficam acima dos popups de layout */
.st-pop.st-anim { z-index: 35; }
/* Strengthen: como no jogo, imagens não pegam o toque (a borda do painel e a aba escolhida ficavam por cima dos botões
   das abas); só as que o jogo deixa tocáveis: a barra de fragmentos do Evolve, os ícones da Skill, as almas da FightSoul
   e os ícones da Dark Force */
#strengthen .cc-img, #strengthen .cc-s9 { pointer-events: none !important; }
#strengthen .cc-img:is([data-id$=".layout_upstar.Image_109"], [data-id$=".Image_109.Image_380"], [data-id$=".Image_109.Image_261"],
  [data-id*=".layout_skill.rect"], [data-id$=".Image_310"], [data-id*=".back4.skill"], [data-id*=".back4.lock"],
  [data-id*=".back4.levelicon"]) { pointer-events: auto !important; cursor: pointer; }
/* Formation (formation-ui.js) */
.fm-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .753); pointer-events: none; }
.fm-strip { position: absolute; left: 0; top: 0; width: 100%; height: 50px; pointer-events: none;
  background: url('/assets/ui/formation/bg_task_tipsbackground02.png') center / 100% 100% no-repeat; }
.fm .cc-text { text-shadow: 2px 2px 1px #000; }
.fm .cc-img, .fm .cc-s9 { pointer-events: none !important; }
.fm .fm-fighter-hit { pointer-events: auto !important; cursor: pointer; touch-action: none; }
.fm .fm-fighter-hit[hidden] { display: none !important; }
.fm .fm-fighter-hit:focus-visible { outline: 2px solid #00dbff; outline-offset: -3px; }
.fm-selection { left: -40px; bottom: 385px; width: 210px; height: 130px; pointer-events: auto;
  font-family: 'FZCuYuan', sans-serif; text-align: center; text-shadow: 2px 2px 1px #000; }
.fm-selection-hint { color: #00c9ef; font-size: 17px; line-height: 22px; min-height: 44px; }
.fm-selection-name { color: #ffe27b; font-size: 23px; margin: 7px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-remove { display: block; margin: auto; width: 148px; height: 52px; border: 0; padding: 0; cursor: pointer;
  background: url('/assets/ui/club/btn_common_blue_normal.png') center / 100% 100% no-repeat;
  font: 25px 'FZCuYuan', sans-serif; color: white; text-shadow: 2px 2px 1px #000; }
.fm-remove:active { background-image: url('/assets/ui/club/btn_common_blue_press.png'); }
.fm-remove:disabled { filter: grayscale(1); opacity: .55; cursor: default; }
.fm-remove[hidden] { display: none; }
.fm-list { position: absolute; overflow: hidden; pointer-events: auto; touch-action: none; }
.fm-strip-icons { position: absolute; left: 0; top: 0; height: 100%; }
.fm-icon { position: absolute; top: 47.5px; width: 0; height: 0; cursor: grab; }
.fm-icon > .lu-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.8); pointer-events: auto; }
.fm-ghost { position: absolute; width: 0; height: 0; opacity: .6; pointer-events: none !important; }
.fm-ghost > .lu-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.8); }
.fm .cc-btn.fm-off { filter: grayscale(1); opacity: .5; }
.fm-core { position: absolute; width: 106px; height: 106px; transform: translate(-50%, 50%) scale(.6); cursor: pointer; }
.fm-core > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.fm-core-name { position: absolute; transform: translate(-50%, 50%); pointer-events: none !important; }
/* mochila: o texto do item, os popups do jogo e as animações (bag-ui.js) */
.bag .cc-img, .bag .cc-s9 { pointer-events: none !important; }
.bag-desc { position: absolute; overflow-y: auto; scrollbar-width: none; font-family: 'FZCuYuan', Inter, sans-serif; font-size: 22px;
  color: #dec389; line-height: 1.25; text-shadow: 2px 2px 1px #000; pointer-events: auto; }
.bag-desc::-webkit-scrollbar { display: none; }
.bag-desc > p { margin: 0 13px; white-space: normal; }
.bag-desc > .bag-b { font-size: 20px; }
.bag-desc > .bag-lock { color: #ff0000; font-size: 20px; }
.bag-desc > .bag-sep { display: block; width: 311px; height: 35px; margin: -4px auto -6px; }
.bag-cell > .bag-glow { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); pointer-events: none; }
.bag-cv { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 30; }
.bag-goldnum { position: absolute; left: 0; top: 0; display: flex; transform-origin: 0 0; pointer-events: none; z-index: 31; }
.bag-goldnum[hidden] { display: none; }
.bag-goldnum i { display: block; width: 40px; height: 53px; background: url('/assets/ui/bag/num_main_fightup.png') calc(var(--d) * -40px) 0 no-repeat; }
.bag-pop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; background: rgba(0, 0, 0, .353); pointer-events: auto; }
.bag-pop .cc-text { text-shadow: 2px 2px 1px #000; }
.bag-pop .cc-text.bag-wrap { white-space: normal !important; line-height: 1.25; }
.bag-pop-icon { position: absolute; width: 0; height: 0; pointer-events: none; }
.bag-pop-icon > .it-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.bag-slider { position: absolute; cursor: pointer; touch-action: none; pointer-events: auto; }
.bag-slider > * { position: absolute; pointer-events: none; }
.bag-slider > .bg { left: 0; top: 0; width: 100%; height: 100%; }
.bag-slider > .fill { left: 2px; top: 3px; height: calc(100% - 6px); width: 0; overflow: hidden; }
.bag-slider > .fill img { display: block; height: 100%; }
.bag-slider > .ball { top: 50%; width: 45px; height: 54px; transform: translate(-50%, -50%); }
.bag-award { background: rgba(0, 0, 0, .55); }
.bag-award-cv { position: absolute; left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none !important; }
/* GetAward: o ícone no iconMiddle (9,45 acima do centro) e o nome no nameLabel (72 abaixo do ícone; 16 px, até 120 de
   largura, as linhas a mais descem) */
.bag-award-row { position: absolute; left: 0; bottom: 0; width: 960px; height: 640px; pointer-events: none !important; }
.bag-award-it { position: absolute; top: 310.55px; width: 0; height: 0; }
.bag-award-it > .it-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.bag-award-it > span { position: absolute; left: 1px; top: 62.1px; width: 120px; transform: translateX(-50%); font-size: 16px;
  line-height: 20.8px; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.bag-award-cheer { position: absolute; left: 0; width: 960px; top: 547.55px; font-size: 18px; line-height: 23px; text-align: center;
  color: rgb(248, 254, 180); pointer-events: none !important; }
/* GetAwardView compartilhado (getaward.js): a camada por cima da tela e o título de 18 px no nó titleLabel */
.ga-award { position: absolute; inset: 0; z-index: 100; pointer-events: auto; cursor: pointer; }
.ga-award-title { position: absolute; left: 0; width: 960px; text-align: center; font-size: 18px; color: #fff; pointer-events: none; }
/* o fundo preto do main_huodejiangli (heidi, 0,602) na tela inteira: o canvas de 960x640 cortava ele no meio da tela */
.ga-award-mask { position: absolute; inset: -2000px; background: rgba(0, 0, 0, .602); pointer-events: none !important; }
.bag-pick-list { position: absolute; overflow-y: auto; scrollbar-width: none; pointer-events: auto; }
.bag-pick-list::-webkit-scrollbar { display: none; }
.bag-pick-row { position: relative; width: 500px; height: 110px; margin: 0 auto; }
.bag-pick-it { position: absolute; top: 55px; width: 106px; height: 106px; transform: translate(-50%, -50%); cursor: pointer; }
.bag-pick-it > * { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.bag-pick-it > [hidden] { display: none; }
.bag-pick-it > .sel { left: calc(50% + 5px); top: calc(50% + 9px); z-index: 3; }
/* fragmento de lutador que o jogador não tem (Items.pickView): a carta trancada do Bar no tamanho do ícone de item */
.bag-pick-it.locked > .ic { width: 100px; height: 100px; }
.bag-pick-it.locked .lu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.84); }
.bag-pick-it.locked .bag-pick-n { position: absolute; right: 4px; top: 2px; font-size: 20px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.bag-pick-count { position: absolute; transform: translate(-50%, 50%); font-family: 'FZCuYuan', Inter, sans-serif; font-size: 25px;
  white-space: nowrap; text-shadow: 2px 2px 1px #000; pointer-events: none !important; }

/* ---------- loja (Store): ShopUi_1 montada por public/js/shop-ui.js ---------- */
#screen-shop { position: relative; overflow: hidden; background: #0b1020; }
.shop-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-cv { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 30; }
#shop .cc-img, #shop .cc-s9 { pointer-events: none; }
.shop-scroll { position: absolute; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; pointer-events: auto; touch-action: none; user-select: none; }
.shop-scroll::-webkit-scrollbar { display: none; }
.shop-scroll[hidden] { display: none; }
.shop-inner { position: relative; height: 100%; overflow: hidden; }
.shop-cell { position: absolute; width: 286px; height: 214px; cursor: pointer; }
.shop-cell > * { position: absolute; }
.shop-cell > .bg { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.shop-goodsicon { width: 106px; height: 106px; pointer-events: none; }
.shop-goodsicon > .bgi { position: absolute; inset: 0; width: 100%; height: 100%; }
.shop-goodsicon > .it-icon { position: absolute; left: 3px; top: 3px; }
.shop-goodsicon > .sel { position: absolute; left: 50%; top: 50%; width: 134px; height: 134px; transform: translate(-50%, -50%); }
.shop-goodsicon > .sel[hidden] { display: none; }
.shop-goodsname { font-size: 21px; transform: translate(-50%, 50%); }
.shop-goodsname.shop-fade { animation: shop-fade .6s linear; }
@keyframes shop-fade { 50% { opacity: 0; } }
.shop-costicon { width: auto; height: auto; transform: none; pointer-events: none; }
.shop-costnum { font-size: 25px; transform: translate(-50%, 50%); }
.shop-discount { pointer-events: none; }
.shop-discount img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shop-discount b { position: absolute; left: 50%; top: 42%; font-size: 25px; transform: translate(-50%, -50%); color: #fff; }
.shop-loadcells { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none !important; }
.shop-loadcells > .shop-cell { left: 0; top: 0; transform-origin: 0 0; }
.shop-site { position: absolute; left: 200px; bottom: 150px; transform: translateY(100%); font-size: 15px; color: rgb(226, 239, 255); pointer-events: none !important; }
.shop-site[hidden] { display: none; }
.shop-pop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 40; background: rgba(0, 0, 0, .353); pointer-events: auto; }
.shop-pop .cc-text { text-shadow: 2px 2px 1px #000; }
.shop-pop .cc-text.cc-wrap { white-space: normal !important; line-height: 1.25; }
.shop-pop-icon { position: absolute; width: 0; height: 0; pointer-events: none; }
.shop-pop-icon > .it-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.shop-pop-cur { position: absolute; transform: translate(-50%, 50%); pointer-events: none; }
.shop-sale-list { position: absolute; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; pointer-events: auto; }
.shop-sale-list::-webkit-scrollbar { display: none; }
.shop-sale-inner { position: relative; width: 100%; }
.shop-sale-cell { position: absolute; }
.shop-sale-cell > * { position: absolute; }
.shop-sale-cell .cc-text { transform: translate(0, 50%); }
.shop-sale-icon { width: 0; height: 0; }
.shop-sale-icon > .it-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.shop-glow { position: absolute; left: 50%; top: 50%; width: 420px; height: 340px; transform: translate(-50%, -50%);
  mix-blend-mode: plus-lighter; pointer-events: none; }
.shop-cell { isolation: auto; }
.shop-goodsicon, .shop-goodsname, .shop-costicon, .shop-costnum, .shop-discount { z-index: 1; }
.shop-glow.t { z-index: 2; }
.shop-cv-add { mix-blend-mode: plus-lighter; z-index: 31; }
#shop [data-id$=".canget.Image_own"] { pointer-events: auto; cursor: pointer; }
.shop-gemtext { position: absolute; font-size: 14px; line-height: 1.1; text-align: center; white-space: normal; transform: translate(-50%, 50%); }
.shop-gemtext[hidden], .shop-canget[hidden], .shop-boxhit[hidden] { display: none; }
.shop-canget { position: absolute; left: 0; bottom: 0; width: 0; height: 0; pointer-events: none; }
.shop-canget-it { position: absolute; width: 0; height: 0; }
.shop-canget-it > .it-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.65); }
.shop-boxhit { position: absolute; width: 290px; height: 320px; transform: translate(-50%, 50%); cursor: pointer; pointer-events: auto; }
.shop-boxmask { position: absolute; inset: 0; z-index: 32; background: transparent; pointer-events: auto; }
.shop-boxmask[hidden] { display: none; }
.shop-res { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 33; }
.shop-res-node { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.shop-res-node[hidden] { display: none; }
.shop-res-node.name, .shop-res-node.desc { font-size: 21px; text-shadow: 2px 2px 1px #000; white-space: nowrap; }
.shop-res-node.desc { color: rgb(250, 255, 0); }
.shop-res-node.btn { width: 134px; height: 57px; }
.shop-res-node.btn > .cc-btn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; }
.shop-res-node.btn > .txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.shop-res-node.btn > .txt.ten { transform: translate(-50%, -50%) scale(.7); }
.shop-res-node.cost { width: 150px; height: 30px; }
.shop-res-node.cost > .bg { position: absolute; inset: 0; border-image: url('/assets/ui/shop/pic_tubiaolkuang_xinxidi.png') 10 5 3 50 fill / 10px 5px 3px 50px stretch; }
.shop-res-node.cost > img { position: absolute; left: 0; top: 50%; transform: translate(-10%, -50%); }
.shop-res-node.cost > .cc-text { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); font-size: 21px; }
.shop-bubble { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 31; pointer-events: none; }
.shop-bubble[hidden] { display: none; }
.shop-bubble img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.1, 1.2); }
.shop-bubble span { position: relative; display: block; width: 159px; font: 21px/1.15 'FZCuYuan', Inter, sans-serif; color: rgb(99, 0, 0); text-align: center; }
.shop-prev-list { position: absolute; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; pointer-events: auto; }
.shop-prev-list::-webkit-scrollbar { display: none; }
.shop-prev-row { position: relative; }
.shop-prev-it { position: absolute; width: 146px; height: 173px; transform: translate(-50%, -50%); }
.shop-prev-it > .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shop-prev-it > .ic { position: absolute; left: 75px; bottom: 113px; width: 0; height: 0; }
.shop-prev-it > .ic > .it-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.shop-prev-it > .cc-text { position: absolute; left: 75px; top: 113px; width: 110px; transform: translateX(-50%); font-size: 16px; text-align: center; }
.shop-debris-scroll { z-index: 1; }
.shop-cell > .center { transform: translate(-50%, 50%); }
.shop-cell > .shop-goodsicon.center { width: 106px; height: 106px; }
.shop-limit-badge { pointer-events: none; }
.shop-own { position: absolute; font-size: 25px; transform: translate(-50%, 50%); }
.shop-pop .cc-btn.shop-off { filter: grayscale(1) brightness(.7); pointer-events: none; }

/* ---------- Bar (recrutamento): HeroRecruitMain montada por public/js/bar-ui.js ---------- */
#screen-bar { position: relative; overflow: hidden; background: #0b1020; }
.bar-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bar-group { width: 1136px; }
#bar .cc-img, #bar .cc-s9 { pointer-events: none; }
.bar-cv { position: absolute; left: 0; bottom: 0; width: 1136px; height: 640px; pointer-events: none !important; }
.bar-cv-add { mix-blend-mode: plus-lighter; }
.bar-cv-pop { left: 0; top: 0; bottom: auto; width: 100%; height: 100%; z-index: 2; }
/* os painéis do meio (Destiny, Wish, Daily), cada um numa caixa: na troca de aba o novo entra inteiro (jiazai) */
.bar-view { position: absolute; left: 0; bottom: 0; width: 1136px; height: 640px; pointer-events: none !important; }
.bar-view > * { position: absolute; pointer-events: auto; }
.bar-view.bar-enter { animation: bar-enter .17s ease-out; }
.bar-view.bar-leave { animation: bar-leave .17s linear forwards; }
.bar-view.bar-leave * { pointer-events: none !important; }
@keyframes bar-enter { from { opacity: 0; transform: scale(.8); } }
@keyframes bar-leave { to { opacity: 0; } }
.bar-touch { cursor: pointer; pointer-events: auto !important; }
/* o busto do Destiny (createBustImage: o largepic 872×640 a 0,7) e os nomes/tipo da ficha */
.bar-bust { position: absolute; left: 0; bottom: 0; width: 0; height: 0; pointer-events: none; }
.bar-bust-img { position: absolute; width: 610.4px; height: 448px; transform: translate(-50%, 50%); }
.bar-namepic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.5); }
.bar-namepic-s { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.25); }
.bar-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 26px; color: #fff; }
.bar-typeicon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.4); }
.bar-atl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #fff; }
.bar-locktext { white-space: normal !important; width: 300px; text-align: center; }
.bar-rich { white-space: normal; line-height: 1.25; }
.bar-rich-img { display: inline-block !important; width: 30px; height: 30px; vertical-align: middle; margin: 0 2px; }
#bar .cc-text { text-shadow: 1px 1px 1px #000; }
/* a lista de desejos no painel: o retrato pequeno a 0,9 e as estrelas (light_star a 0,9) de 20 em 20 a partir de (20, 5) */
.bar-small { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); pointer-events: none; }
.bar-small-pic { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); object-fit: contain; }
.bar-small-star { position: absolute; bottom: 5px; width: 27px; height: 27px; }
/* o resultado (p_anim / Panel_100): os nós seguem a animação */
.bar-res { position: absolute; left: 0; bottom: 0; width: 1136px; height: 640px; pointer-events: auto; z-index: 35; }
.bar-res-node { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bar-res-node[hidden] { display: none; }
.bar-res-node.icon { width: 100px; height: 100px; }
.bar-res-node.icon > .it-icon, .bar-res-node.icon > .lu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bar-res-node.name { font-size: 21px; white-space: nowrap; text-shadow: 1px 1px 1px #000; }
.bar-res-node.btn { width: 221px; height: 69px; }
.bar-res-node.btn > .cc-btn { position: absolute; left: 0; top: 0; width: 221px; height: 69px; }
.bar-res-node.bar-wait > .cc-btn { pointer-events: none; }
.bar-cost { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.bar-cost > .ic { position: absolute; left: -40px; top: -19px; transform-origin: 0 50%; transform: translateY(-50%); }
.bar-cost > .cc-text { position: absolute; left: -5px; top: -20px; transform: translateY(-50%); font-size: 18px; white-space: nowrap; }
.bar-skip { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%) translate(200px, -330px); cursor: pointer; }
.bar-skip > img { position: absolute; left: 0; top: 0; width: 34px; height: 34px; }
.bar-skip > .check { display: none; }
.bar-skip.on > .check { display: block; }
.bar-skip-txt { position: absolute; left: 50%; top: 50%; width: 64px; height: 18px; transform: translate(-50%, -50%) translate(250px, -330px); pointer-events: none; }
.bar-skip-pop { transform: translate(0, 0); width: 39px; height: 39px; }
.bar-skip-pop > img { width: 39px; height: 39px; }
.bar-list100 { position: absolute; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.bar-list100::-webkit-scrollbar { display: none; }
.bar-cell100 { position: relative; width: 741px; height: 320px; }
.bar-cell-icon { position: absolute; width: 0; height: 0; }
.bar-cell-icon > .it-icon, .bar-cell-icon > .lu-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.8); }
.bar-cell-name { position: absolute; font-size: 15px; white-space: nowrap; transform: translate(-50%, 50%); }
.bar-live100 { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* as janelas */
.bar-pop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 40; background: rgba(0, 0, 0, .353); pointer-events: auto; }
.bar-pop .cc-text.cc-wrap { white-space: normal !important; line-height: 1.25; }
.bar-reclist, .bar-rulelist, .bar-heartlist, .bar-sellist { position: absolute; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; pointer-events: auto; }
.bar-reclist::-webkit-scrollbar, .bar-rulelist::-webkit-scrollbar, .bar-heartlist::-webkit-scrollbar, .bar-sellist::-webkit-scrollbar { display: none; }
.bar-rulelist[hidden] { display: none; }
.bar-recrow { position: relative; width: 788px; height: 40px; }
.bar-recrow > .bg { position: absolute; width: 763px; height: 49px; }
.bar-recrow > .cc-text { position: absolute; font-size: 18px; color: rgb(235, 233, 213); transform: translate(-50%, 50%); }
.bar-recrow.yellow > .cc-text { color: rgb(255, 198, 0); }
.bar-rulehead { position: relative; width: 740px; height: 40px; }
.bar-rulehead > .bg { position: absolute; left: 43.5px; top: 2px; width: 643px; height: 36px; }
.bar-rulehead > .cc-text { position: absolute; left: 48px; top: 20px; transform: translateY(-50%); font-size: 22px; width: 640px; }
.bar-ruleline { position: relative; width: 740px; min-height: 30px; padding: 3px 0 3px 60px; box-sizing: border-box; }
.bar-ruleline > .cc-text { position: relative; display: block; width: 640px; font-size: 18px; }
.bar-rulerow { position: relative; width: 735px; height: 100px; }
.bar-rulecell { position: absolute; bottom: 2px; width: 100px; height: 100px; }
.bar-rulecell > .ic { position: absolute; left: 0; bottom: 22px; width: 100px; height: 100px; transform: scale(.7); transform-origin: 0 100%; }
.bar-rulecell > .ic > .it-icon, .bar-rulecell > .ic > .lu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* o lutador ainda não descoberto (hiddenIcon em bar-ui.js): o cadeado sobre a sombra e o selo da raridade embaixo */
.lu-icon > .bar-lock { width: 30px; height: 35px; margin-top: -4px; }
.lu-icon > .bar-tier { top: calc(50% + 33px); width: auto; height: 26px; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000); }
.bar-heart-cell.locked { cursor: default; }
.bar-small-hidden > .lu-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); }
.bar-rulecell > .nm { position: absolute; left: -16px; bottom: 0; width: 100px; text-align: center; font-size: 16px; white-space: nowrap; overflow: hidden; }
.bar-heart-row { position: relative; width: 465px; height: 90px; }
.bar-heart-cell { position: absolute; bottom: 4px; width: 80px; height: 80px; cursor: pointer; }
.bar-heart-cell > .lu-icon, .bar-heart-icon > .lu-icon { position: absolute; left: 0; top: 0; transform: scale(.667); transform-origin: 0 0; }
.bar-heart-cell > img, .bar-heart-icon > img { position: absolute; pointer-events: none; }
.bar-heart-cell > .w, .bar-heart-cell > .m, .bar-heart-icon > .w, .bar-heart-icon > .m { left: 50%; bottom: 10px; width: 88px; height: 28px; transform: translateX(-50%); }
.bar-heart-cell > .g { right: -6px; top: -10px; width: 31px; height: 35px; display: none; }
.bar-heart-cell.sel > .g { display: block; }
.bar-heart-icon { position: absolute; left: 0; top: 0; width: 80px; height: 80px; }
.bar-selrow { position: relative; width: 780px; height: 221px; }
.bar-selcard { position: absolute; width: 147px; height: 210px; cursor: pointer; }
.bar-selcard > img { position: absolute; pointer-events: none; }
.bar-selcard > .bg { left: 0.5px; bottom: 0.5px; width: 146px; height: 209px; }
.bar-selcard > .nm { position: absolute; left: 73px; top: 23px; width: 0; height: 0; }
.bar-selcard > .nm > .cc-text { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 16px; color: #fff; }
.bar-selcard > .st { bottom: 170px; width: 26.6px; height: 25.9px; transform: translate(-50%, 50%); }
.bar-selcard > .tp { left: 9px; top: 132.5px; width: 32px; height: 35px; }
.bar-selcard > .own { left: 50%; bottom: 18.5px; width: 119px; height: 23px; transform: translateX(-50%); }
.bar-selcard > .frame { left: 50%; top: 50%; width: 167.7px; height: 222px; transform: translate(-50%, -50%); display: none; }
.bar-selcard.sel > .frame { display: block; }

/* Presença no lugar da energia nas barras superiores. */
.players-online-icon { width: 40px !important; height: 40px !important; object-fit: contain; cursor: pointer; pointer-events: auto !important;
  /* o busto é cortado reto embaixo: some aos poucos no último quarto */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.players-online-count { color: #fffcf6 !important; cursor: pointer; pointer-events: auto !important; }
.players-online-icon:focus-visible, .players-online-count:focus-visible { outline: 2px solid #ffcc55; outline-offset: 2px; }
.players-online-status { display: block; font-size: 23px; }
.players-online-total { display: block; margin-top: 14px; font-size: 52px; font-weight: normal; color: #08d1fc; }
.lb-online-bg { width: 184px; height: 48px; background: url('/assets/ui/lobby/btn_commom_tianjia_normal.png') no-repeat;
  /* sem o "+": o fim corta na mesma inclinação do começo da barra (\), como as caixas de gold e diamante */
  clip-path: polygon(0 0, 110px 0, 136px 100%, 0 100%); pointer-events: none !important; }
/* Treino offline no lugar da energia (o raio): a barra sem o "+" abre a explicação; a presença vira um chip curto depois */
.lb-group > .lb-offline { pointer-events: auto !important; cursor: pointer; }
.lb-offline:focus-visible { outline: none; filter: brightness(1.35); }
.lb-group > .lb-offline-icon { pointer-events: none; }
.lb-online-chip { clip-path: polygon(0 0, 74px 0, 100px 100%, 0 100%); }
.of-info-total { margin-top: 6px; font-size: 46px; line-height: 1.1; color: #08d1fc; }
.of-info-text { margin-top: 12px; font-size: 21px; line-height: 1.3; }