/* ==========================================================================
   MU GAME Classic · Layout 1.0 (rev. 5: largura fixa, mais presença visual)
   Folha única do tema. Sem dependência de framework.
   Ordem: tokens > base > estrutura > componentes > páginas > responsivo
   ========================================================================== */

/* ---------- 0. FONTES (locais, sem depender do Google) ---------- */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/cinzel-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

/* ---------- 1. TOKENS ---------- */
:root {
  --ink-0: #080405;
  --ink-1: #0d0708;
  --ink-2: #130a0b;
  --ink-3: #1a0e0f;

  --red: #e0252c;
  --red-hi: #ff4a3d;
  --red-lo: #8e1016;
  --ember: #ff7a45;

  --gold: #e3b45e;
  --gold-hi: #f6d391;
  --silver: #cdd1d8;
  --bronze: #cf8c5c;
  --ok: #3fd98a;

  --tx-1: #f3e9e6;   /* títulos e nomes */
  --tx-2: #c4b2ad;   /* texto corrido */
  --tx-3: #8f7d78;   /* apoio */
  --tx-4: #65554f;   /* rótulos discretos */

  --line: rgba(255, 110, 95, .13);
  --line-soft: rgba(255, 255, 255, .055);
  --panel: linear-gradient(180deg, #150b0c 0%, #100809 100%);

  --f-display: "Cinzel", Georgia, serif;
  --f-body: "Barlow", Tahoma, Arial, sans-serif;
  --f-cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  --site: 1000px;  /* largura fixa: cabe em monitor 1024 sem rolagem lateral */
  --side: 272px;
  --gap: 22px;
  --r: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: var(--site);
  background: var(--ink-0);
  color: var(--tx-2);
  font: 400 14.5px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before { /* grão bem sutil */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after { /* brilho vinho nas laterais */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 900px at 0% 45%, rgba(142, 16, 22, .09), transparent 70%),
    radial-gradient(700px 900px at 100% 55%, rgba(142, 16, 22, .09), transparent 70%);
}
body > * { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
strong, b { color: var(--tx-1); font-weight: 600; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }
.i { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
.i-sm { width: 13px; height: 13px; }
.i-lg { width: 20px; height: 20px; }
.wrap { width: var(--site); margin: 0 auto; }
* { scrollbar-width: thin; scrollbar-color: var(--red-lo) var(--ink-1); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 3. MENU DO TOPO (medidas do MU Game Novo) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: 54px;
  border-bottom: 1px solid var(--line);
}
/* desfoque num pseudo-elemento: no próprio header ele prenderia o menu do celular */
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 5, 6, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.topbar .wrap { height: 100%; display: flex; align-items: center; }
.tb-mark { display: flex; align-items: center; margin-right: 18px; }
.tb-mark svg { width: 26px; height: 28px; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 110, 40, .55)); }
.nav { display: flex; align-items: stretch; height: 100%; margin-right: auto; }
.nav a {
  position: relative; display: flex; align-items: center; padding: 0 10px; white-space: nowrap;
  font: 600 14px var(--f-body); letter-spacing: .06em; text-transform: uppercase;
  color: #b3a19c; transition: color .15s;
}
.nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: var(--red-hi); transition: left .2s var(--ease), right .2s var(--ease); }
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { left: 11px; right: 11px; }
.nav a.is-active { color: #fff; }
.tb-actions { display: flex; gap: 8px; }
.tb-actions .hdr-burger { display: none; }

/* ---------- 4. BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px;
  font: 600 13px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-1);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: border-color .15s, background .15s, filter .15s;
}
.btn:hover { border-color: rgba(255, 110, 95, .4); background: rgba(224, 37, 44, .08); }
.btn-primary { border-color: transparent; background: linear-gradient(180deg, #ea3029, #b8151c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(224, 37, 44, .8); }
.btn-primary:hover { background: linear-gradient(180deg, #ea3029, #b8151c); border-color: transparent; filter: brightness(1.1); }
.btn-block { width: 100%; }

/* ---------- 5. BANNER ---------- */
.banner {
  position: relative; height: 168px; overflow: hidden;
  background:
    radial-gradient(480px 190px at 240px 86px, rgba(224, 37, 44, .26), transparent 70%),
    radial-gradient(1000px 260px at 50% -60px, rgba(142, 16, 22, .5), transparent 70%),
    linear-gradient(180deg, #1a0809 0%, #0b0405 100%);
  border-bottom: 1px solid var(--line);
}
.banner::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Cpath d='M0,110 L0,96 L0,56 L0,51 L8,51 L8,56 L15,56 L15,51 L22,51 L22,56 L30,56 L30,56 L30,83 L30,78 L38,78 L38,83 L47,83 L47,78 L56,78 L56,83 L64,83 L64,83 L64,62 L64,57 L71,57 L71,62 L79,62 L79,57 L86,57 L86,62 L94,62 L94,57 L101,57 L101,62 L101,46 L114,24 L127,46 L127,51 L127,46 L134,46 L134,51 L141,51 L141,46 L148,46 L148,51 L155,51 L155,51 L155,20 L163,20 L163,25 L171,25 L171,20 L179,20 L179,39 L186,39 L186,44 L193,44 L193,39 L200,39 L200,79 L200,74 L207,74 L207,79 L215,79 L215,74 L222,74 L222,79 L229,79 L229,74 L237,74 L237,79 L244,79 L244,74 L251,74 L251,79 L259,79 L259,74 L266,74 L266,79 L266,45 L266,40 L274,40 L274,45 L282,45 L282,40 L291,40 L291,45 L299,45 L299,45 L299,74 L299,69 L307,69 L307,74 L314,74 L314,69 L322,69 L322,74 L329,74 L329,69 L337,69 L337,74 L337,47 L337,42 L344,42 L344,47 L351,47 L351,42 L358,42 L358,47 L366,47 L366,42 L373,42 L373,47 L380,47 L380,47 L380,83 L380,78 L387,78 L387,83 L394,83 L394,78 L402,78 L402,83 L409,83 L409,78 L416,78 L416,83 L423,83 L423,78 L431,78 L431,83 L438,83 L438,78 L445,78 L445,83 L445,79 L445,74 L452,74 L452,79 L459,79 L459,74 L467,74 L467,79 L474,79 L474,74 L481,74 L481,79 L481,75 L481,70 L488,70 L488,75 L495,75 L495,70 L502,70 L502,75 L509,75 L509,70 L516,70 L516,75 L523,75 L523,75 L523,42 L538,20 L552,42 L552,80 L552,75 L560,75 L560,80 L567,80 L567,75 L575,75 L575,80 L582,80 L582,75 L590,75 L590,80 L598,80 L598,75 L605,75 L605,80 L613,80 L613,80 L613,58 L613,53 L620,53 L620,58 L627,58 L627,53 L635,53 L635,58 L642,58 L642,53 L649,53 L649,58 L649,75 L649,70 L656,70 L656,75 L664,75 L664,70 L671,70 L671,75 L678,75 L678,70 L686,70 L686,75 L693,75 L693,70 L701,70 L701,75 L708,75 L708,75 L708,51 L708,46 L716,46 L716,51 L724,51 L724,46 L731,46 L731,51 L739,51 L739,51 L739,56 L750,34 L761,56 L761,53 L761,48 L769,48 L769,53 L777,53 L777,48 L785,48 L785,53 L793,53 L793,48 L801,48 L801,53 L801,71 L801,66 L810,66 L810,71 L818,71 L818,66 L826,66 L826,71 L835,71 L835,71 L835,54 L835,49 L843,49 L843,54 L850,54 L850,49 L858,49 L858,54 L866,54 L866,54 L866,53 L878,31 L891,53 L891,78 L891,73 L898,73 L898,78 L905,78 L905,73 L912,73 L912,78 L919,78 L919,73 L926,73 L926,78 L934,78 L934,73 L941,73 L941,78 L948,78 L948,73 L955,73 L955,78 L962,78 L962,73 L969,73 L969,78 L969,75 L969,70 L976,70 L976,75 L983,75 L983,70 L990,70 L990,75 L998,75 L998,70 L1005,70 L1005,75 L1012,75 L1012,70 L1019,70 L1019,75 L1019,77 L1019,72 L1027,72 L1027,77 L1034,77 L1034,72 L1042,72 L1042,77 L1049,77 L1049,72 L1057,72 L1057,77 L1064,77 L1064,72 L1072,72 L1072,77 L1079,77 L1079,72 L1087,72 L1087,77 L1087,71 L1087,66 L1094,66 L1094,71 L1102,71 L1102,66 L1109,66 L1109,71 L1116,71 L1116,66 L1124,66 L1124,71 L1131,71 L1131,66 L1139,66 L1139,71 L1146,71 L1146,71 L1146,77 L1146,72 L1154,72 L1154,77 L1162,77 L1162,72 L1170,72 L1170,77 L1177,77 L1177,72 L1185,72 L1185,77 L1193,77 L1193,77 L1193,70 L1193,65 L1202,65 L1202,70 L1210,70 L1210,65 L1218,65 L1218,70 L1227,70 L1227,70 L1200,110 Z' fill='%23050203'/%3E%3C/svg%3E") center bottom / 1200px 70px repeat-x; opacity: .9; }
.banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(0deg, rgba(8, 4, 5, .96), transparent); }
.embers { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.embers i { position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 6px 2px rgba(255, 106, 61, .6); opacity: 0; animation: ember 9s linear infinite; }
@keyframes ember { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .8; } 75% { opacity: .35; } 100% { transform: translate3d(var(--dx, 20px), -180px, 0); opacity: 0; } }
.banner .wrap { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { position: relative; display: block; margin-left: -6px; }
.logo svg { width: 400px; height: 112px; display: block; overflow: visible; }
.logo .ver { position: absolute; left: 100%; top: 48px; margin-left: 4px; font: 600 11px var(--f-body); letter-spacing: .08em; color: var(--tx-3); }

/* status no banner: duas informações, bem respiradas */
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(63, 217, 138, .55); animation: dotPing 1.9s ease-out infinite; }
@keyframes dotPing { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(63, 217, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 217, 138, 0); } }

/* ---------- 6. GRADE ---------- */
.main { padding: var(--gap) 0 40px; }
.main .wrap { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.aside { display: flex; flex-direction: column; gap: 18px; }
.col-main { min-width: 0; display: flex; flex-direction: column; gap: 26px; }

/* ---------- 7. PAINEL ---------- */
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .9); }
.card-h { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.card-h h2, .card-h h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 13.5px var(--f-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx-1); }
.card-h h2::before, .card-h h3::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--red-hi); box-shadow: 0 0 8px rgba(255, 74, 61, .6); }
.card-h .aux { margin-left: auto; font-size: 12px; color: var(--tx-4); }
.card-h a.aux { display: inline-flex; align-items: center; gap: 4px; color: var(--tx-3); }
.card-h a.aux:hover { color: var(--red-hi); }
.card-b { padding: 16px; }
.card-f { padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.lnk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--tx-3); transition: color .15s; }
.lnk:hover { color: var(--red-hi); }

/* títulos de seção soltos (fora de painel) */
.sec-h { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.sec-h h2 { margin: 0; font: 700 14px var(--f-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx-1); white-space: nowrap; }
.sec-h .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ---------- 8. LOGIN / PAINEL DO JOGADOR ---------- */
.mnu-field { margin-bottom: 12px; }
.mnu-field-label, .fld-label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 500; color: var(--tx-3); }
.mnu-input, .fld-input {
  display: block; width: 100%; height: 40px; padding: 0 12px;
  font: 400 14.5px var(--f-body); color: var(--tx-1); -webkit-text-fill-color: var(--tx-1);
  background: #070304; color-scheme: dark;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 6px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.mnu-input::placeholder, .fld-input::placeholder { color: var(--tx-4); -webkit-text-fill-color: var(--tx-4); opacity: 1; }
.mnu-input:focus, .fld-input:focus { border-color: rgba(255, 74, 61, .6); box-shadow: 0 0 0 3px rgba(224, 37, 44, .14); }
.mnu-input:-webkit-autofill, .fld-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 200px #070304 inset; -webkit-text-fill-color: var(--tx-1); transition: background-color 99999s; }
.mnu-forgot { display: flex; justify-content: flex-end; margin: -4px 0 14px; }
.mnu-forgot a { font-size: 12.5px; color: var(--tx-3); cursor: pointer; }
.mnu-forgot a:hover { color: var(--red-hi); }
.mnu-error, .fld-error { display: none; margin-bottom: 12px; padding: 9px 12px; border-radius: 6px; background: rgba(224, 37, 44, .1); border: 1px solid rgba(255, 74, 61, .35); color: #ffb8ae; font-size: 13px; }
.mnu-error pre, .fld-error pre { margin: 0; white-space: pre-wrap; font-family: inherit; }
.mnu-btn-login { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; cursor: pointer; font: 600 14px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; border: 0; border-radius: 6px; background: linear-gradient(180deg, #ea3029, #b8151c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(224, 37, 44, .8); transition: filter .15s; }
.mnu-btn-login:hover { filter: brightness(1.1); }
.mnu-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--tx-3); text-align: center; }
.mnu-alt a { color: var(--tx-1); font-weight: 500; }
.mnu-alt a:hover { color: var(--red-hi); }

.mnu-user { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.mnu-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--f-display); color: #fff; background: linear-gradient(180deg, var(--red), var(--red-lo)); }
.mnu-user b { display: block; font-size: 15px; line-height: 1.25; }
.mnu-user span { font-size: 12.5px; color: var(--gold); }
.mnu-section-label { margin: 12px 0 4px; font-size: 12px; font-weight: 500; color: var(--tx-4); }
.mnu-section-label:first-child { margin-top: 0; }
.mnu-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 6px; font-size: 14.5px; color: var(--tx-2); transition: background .12s, color .12s; }
.mnu-link .i { color: var(--tx-4); }
.mnu-link:hover { background: rgba(224, 37, 44, .08); color: #fff; }
.mnu-link:hover .i { color: var(--red-hi); }
.mnu-link .chev { display: none; }
.mnu-link.legendary-link { color: var(--gold-hi); }
.mnu-link.legendary-link .i { color: var(--gold); }
.mnu-link.logout { color: var(--tx-3); }
.mnu-divider { height: 1px; margin: 10px 0; background: var(--line-soft); }

/* ---------- 9. SIDEBAR ---------- */
.dsb-desc { margin: 0 0 12px; font-size: 13.5px; color: var(--tx-3); }
.dsb-prize { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.dsb-prize .i { color: var(--ac, var(--red-hi)); }
.dsb-prize-lbl { font-size: 12px; color: var(--tx-3); line-height: 1.3; }
.dsb-prize-name { font-size: 14.5px; font-weight: 600; color: var(--tx-1); line-height: 1.3; }
.dsb-prize-tag { margin-left: auto; font-size: 12px; color: var(--ac, var(--red-hi)); }
.dsb-prize + .btn { margin-top: 6px; }

.cfg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.cfg-row:first-child { padding-top: 0; }
.cfg-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cfg-label { color: var(--tx-3); }
.cfg-val { color: var(--tx-1); font-weight: 500; text-align: right; }

.ev-group { padding: 12px 16px 4px; font-size: 12px; font-weight: 500; color: var(--tx-4); }
.ev-group:first-child { padding-top: 10px; }
.ev-sidebar-list { padding-bottom: 8px; }
.ev-sidebar-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 16px; border: 0; background: none; text-align: left; cursor: pointer; transition: background .12s; }
.ev-sidebar-item:hover { background: rgba(224, 37, 44, .07); }
.ev-sb-icon { display: grid; place-items: center; width: 18px; color: var(--tx-4); flex: none; transition: color .12s; }
.ev-sidebar-item:hover .ev-sb-icon { color: var(--red-hi); }
.ev-sb-info { min-width: 0; flex: 1; }
.ev-sb-name, .ev-sb-time { display: block; }
.ev-sb-name { font-size: 14.5px; font-weight: 500; color: var(--tx-1); line-height: 1.3; }
.ev-sb-time { font-size: 12.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-sb-arrow { display: none; }

.zap-panel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(180deg, #0f2318, #08140d); border: 1px solid rgba(63, 217, 138, .25); transition: border-color .15s; }
.zap-panel:hover { border-color: rgba(63, 217, 138, .5); }
.zap-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #062b14; flex: none; }
.zap-label, .zap-title { display: block; }
.zap-label { font-size: 12px; color: rgba(190, 240, 210, .6); }
.zap-title { font-size: 15px; font-weight: 600; color: #e9fff2; }
.zap-arrow { margin-left: auto; color: rgba(190, 240, 210, .5); }

/* ---------- 10. SOBRE ---------- */
.about { padding: 22px 24px; }
.about h1 { margin: 0 0 10px; font: 700 20px/1.35 var(--f-display); color: var(--tx-1); letter-spacing: .02em; }
.about p { margin: 0 0 10px; }
.about p:last-child { margin: 0; }

/* ---------- 11. NOTÍCIAS ---------- */
.news-item { display: flex; align-items: baseline; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); transition: background .12s; }
.news-item:last-child { border-bottom: 0; }
.news-item:hover { background: rgba(224, 37, 44, .05); }
.news-date { flex: none; width: 44px; font-size: 13px; color: var(--tx-4); font-variant-numeric: tabular-nums; }
.news-cat { flex: none; width: 74px; font-size: 13px; font-weight: 500; color: var(--red-hi); }
.news-cat.promo { color: var(--gold); }
.news-cat.info { color: var(--tx-3); }
.news-ttl { min-width: 0; font-size: 14.5px; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-item:hover .news-ttl { color: #fff; }
.news-new { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--red-hi); }

/* ---------- 12. LISTAS DE RANKING (killer, resets, eventos) ---------- */
.kc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.kc-row > * { min-width: 0; }
.rk3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rk-list, .killer-list { list-style: none; margin: 0; padding: 6px 0; }
.rk-list li, .killer-item { display: flex; align-items: center; gap: 10px; padding: 5px 16px; font-size: 14px; }
.rk-pos, .kr-pos { width: 18px; flex: none; text-align: center; font-size: 13px; color: var(--tx-4); font-variant-numeric: tabular-nums; }
.p1 .rk-pos, .kr-pos.gold-pos { color: var(--gold); font-weight: 600; }
.p2 .rk-pos, .kr-pos.silv-pos { color: var(--silver); font-weight: 600; }
.p3 .rk-pos, .kr-pos.bron-pos { color: var(--bronze); font-weight: 600; }
.rk-list .nm, .kr-name { min-width: 0; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-list .vl, .kr-kills { margin-left: auto; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.p1 .nm, .killer-item:first-child .kr-name { font-weight: 600; }
.rk-list .cl, .kr-kills em { display: none; }
.rk-prize { padding: 9px 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--tx-3); }
.rk-prize b { color: var(--gold-hi); font-weight: 500; }
.killer-foot { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--tx-3); }
.killer-countdown { font-size: 15px; font-weight: 600; color: var(--red-hi); font-variant-numeric: tabular-nums; }
.rk-empty, .tpl-error { padding: 20px; text-align: center; color: var(--tx-3); font-size: 13.5px; }

/* champions em lista */
.champions-grid { padding: 6px 0; }
.champ-card { display: flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 14px; transition: background .12s; }
.champ-card:hover { background: rgba(224, 37, 44, .06); }
.champ-top-row { display: flex; align-items: center; gap: 10px; color: var(--tx-3); }
.champ-top-row .i { width: 15px; height: 15px; color: var(--tx-4); }
.champ-name { margin-left: auto; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-card.king { margin: 4px 10px 6px; padding: 10px 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(227, 180, 94, .14), rgba(227, 180, 94, .02)); }
.champ-card.king .i, .champ-card.king .champ-label { color: var(--gold); }
.champ-card.king .champ-name { font: 700 16px var(--f-display); color: var(--gold-hi); }
.champs-week-bar { padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--tx-3); }
.champs-week-bar b { color: var(--tx-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.ver-foto-btn { display: none; }
#champ-photo-box { position: fixed; left: -9999px; top: -9999px; z-index: 90; width: 220px; padding: 5px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, .85); opacity: 0; pointer-events: none; transition: opacity .15s; }
#champ-photo-box img { width: 100%; height: 240px; object-fit: cover; border-radius: 5px; background: var(--ink-1); }
#champ-photo-box .lbl { padding: 6px 4px 1px; text-align: center; font-size: 13px; font-weight: 600; color: var(--tx-1); }

/* ---------- 13. GALERIA ---------- */
.gallery-track-outer { overflow: hidden; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.gallery-track { display: flex; gap: 12px; width: max-content; animation: gal 45s linear infinite; }
.gallery-track-outer:hover .gallery-track { animation-play-state: paused; }
@keyframes gal { to { transform: translateX(-50%); } }
.gallery-item { position: relative; width: 196px; height: 122px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: zoom-in; flex: none; background: var(--ink-3); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 7px; font-size: 12.5px; font-weight: 500; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.gallery-item .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--tx-4); background: radial-gradient(circle at 30% 20%, rgba(224, 37, 44, .2), transparent 60%), var(--ink-3); }

/* ---------- 14. TABELA COMPLETA ---------- */
.rk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rk-table th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 500; color: var(--tx-4); border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.rk-table td { padding: 8px 14px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-table tbody tr:hover td { background: rgba(224, 37, 44, .05); }
.rk-table tbody tr:last-child td { border-bottom: 0; }
.rk-table th:first-child, .rk-table td:first-child { width: 44px; text-align: center; }
.rk-table td:nth-child(2) { color: var(--tx-1); }
.rk-table th:last-child, .rk-table td:last-child { text-align: right; }
.rk-table td:last-child { color: var(--tx-1); font-weight: 500; }
.rk-table tr.p1 td:nth-child(2) { font-weight: 600; }
.cls { font-size: 13.5px; color: var(--tx-3); }

/* ---------- 15. MODAIS ---------- */
.esb-modal-overlay, .gallery-lightbox, .photo-modal-overlay, .mg-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(4, 2, 2, .78); opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s; }
.esb-modal-overlay.open, .gallery-lightbox.open, .photo-modal-overlay.open, .mg-modal.open { opacity: 1; visibility: visible; transition: opacity .18s; }
.esb-modal-box, .mg-modal-box { width: 480px; max-width: 100%; max-height: calc(100vh - 40px); overflow: auto; background: #140a0b; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 40px 90px -20px #000; transform: translateY(8px); transition: transform .2s var(--ease); }
.open .esb-modal-box, .open .mg-modal-box { transform: none; }
.esb-modal-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.esb-modal-icon { display: grid; place-items: center; color: var(--red-hi); }
.esb-modal-title { font: 700 18px var(--f-display); color: var(--tx-1); }
.esb-modal-close { margin-left: auto; width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--tx-3); background: none; border: 0; }
.esb-modal-close:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.esb-modal-body { padding: 16px 18px 20px; }
.esb-modal-desc { margin-bottom: 14px; }
.esb-sch-row { display: grid; grid-template-columns: 120px 60px 1fr; gap: 10px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.esb-sch-row:last-child { border-bottom: 0; }
.esb-sch-day { color: var(--tx-3); }
.esb-sch-time { color: var(--tx-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.esb-modal-prize { margin-top: 14px; padding: 11px 14px; border-radius: 6px; background: rgba(227, 180, 94, .08); color: var(--gold-hi); font-size: 13.5px; display: flex; gap: 10px; }
.esb-modal-prize .i { color: var(--gold); margin-top: 2px; }
.gl-box { position: relative; max-width: 960px; }
.gl-box img { max-height: 80vh; border-radius: 8px; }
.gl-close { position: absolute; top: -38px; right: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--tx-2); font-size: 13px; background: none; border: 0; }
.gl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .6); border: 0; }
.gl-nav.prev { left: 10px; } .gl-nav.next { right: 10px; }
.gl-nav:hover { background: var(--red); }

/* ---------- 16. TÍTULO DE PÁGINA INTERNA ---------- */
.page-head { padding: 20px 24px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx-4); }
.crumbs a:hover { color: var(--tx-1); }
.page-head h1 { margin: 6px 0 4px; font: 700 26px/1.15 var(--f-display); color: var(--tx-1); letter-spacing: .03em; }
.page-head p { margin: 0; color: var(--tx-3); }

/* ---------- 17. SHOPPING ---------- */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hub-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; transition: border-color .15s, transform .15s var(--ease); }
.hub-card:hover { border-color: rgba(255, 110, 95, .35); transform: translateY(-2px); }
.hub-card .ico { color: var(--ac, var(--red-hi)); margin-top: 2px; }
.hub-card h3 { margin: 0 0 3px; font: 700 15.5px var(--f-display); color: var(--tx-1); }
.hub-card p { margin: 0 0 8px; font-size: 13.5px; color: var(--tx-3); line-height: 1.5; }
.hub-card .go { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--tx-2); }
.hub-card:hover .go { color: var(--red-hi); }
.hub-card.is-top { border-color: rgba(227, 180, 94, .38); background: linear-gradient(180deg, #1c130b, #110a08); }
.hub-card.is-top h3 { color: var(--gold-hi); }
.hub-card .flag { margin-left: 8px; font: 500 11.5px var(--f-body); color: var(--gold); letter-spacing: 0; text-transform: none; vertical-align: 2px; }
.hub-card::after { display: none; }
.cur-list .cur { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); }
.cur-list .cur:last-child { border-bottom: 0; }
.cur-name { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--tx-1); }
.cur-name .i { color: var(--ac, var(--red-hi)); }
.cur-how { font-size: 13px; color: var(--tx-3); }
.cur-how em { font-style: normal; margin: 0 5px; }
.cur p { margin: 2px 0 0; font-size: 14px; }
.tier { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.tier:last-child { border-bottom: 0; }
.tier-badge { width: 44px; height: 44px; display: grid; place-items: center; font: 700 17px var(--f-display); color: var(--tc); border: 1px solid transparent; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); border-radius: 8px; }
.tier-h { display: flex; align-items: baseline; gap: 10px; }
.tier-h h3 { margin: 0; font: 700 15.5px var(--f-display); color: var(--tx-1); }
.tier-h .src { font-size: 12.5px; color: var(--tx-4); }
.tier p { margin: 3px 0 0; font-size: 14px; }
.tier p b { font-weight: 500; }
.pips { display: none; }
.callout { padding: 20px 24px; text-align: center; }
.callout h3 { margin: 0 0 6px; font: 700 17px var(--f-display); color: var(--tx-1); }
.callout p { margin: 0 auto; max-width: 560px; color: var(--tx-3); }

/* ---------- 18. RANKING (página) ---------- */
.rank-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.rank-pick > div { padding: 14px 16px; }
.rank-pick > div + div { border-left: 1px solid var(--line-soft); }
.rank-pick h4 { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--tx-4); }
.rank-pick a { display: block; padding: 3px 0; font-size: 14px; color: var(--tx-2); }
.rank-pick a:hover { color: #fff; }
.rank-pick a.is-active { color: var(--red-hi); font-weight: 600; }
.rank-top3 { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; padding: 18px 16px 6px; }
.podium { text-align: center; padding: 12px 8px; border-radius: 8px; background: rgba(0, 0, 0, .25); border-top: 2px solid var(--m); }
.podium.first { padding-top: 18px; background: linear-gradient(180deg, rgba(227, 180, 94, .1), rgba(0, 0, 0, .25)); }
.podium .pl { font-size: 12px; color: var(--m); }
.podium .nm { font: 700 16px var(--f-display); color: var(--tx-1); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium.first .nm { font-size: 18px; }
.podium .vl { font-size: 13px; color: var(--tx-3); }

/* ---------- 19. CADASTRO ---------- */
.reg-form { padding: 22px 24px; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.reg-grid .full { grid-column: 1 / -1; }
.field { margin-bottom: 14px; }
.fld-hint { margin-top: 4px; font-size: 12px; color: var(--tx-4); }
.fld-wrap { position: relative; }
.fld-wrap .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tx-4); pointer-events: none; width: 15px; height: 15px; }
.fld-wrap .fld-input { padding-left: 36px; }
.field.error .fld-input { border-color: var(--red-hi); box-shadow: 0 0 0 3px rgba(224, 37, 44, .14); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--tx-3); cursor: pointer; margin: 4px 0 18px; }
.check input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 2px 0 0; flex: none; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; background: #070304; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--red); border-color: var(--red); }
.check input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check a { color: var(--tx-1); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.reg-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.reg-steps > div { padding: 16px 18px; }
.reg-steps > div + div { border-left: 1px solid var(--line-soft); }
.reg-steps .n { font: 700 18px var(--f-display); color: var(--red-hi); }
.reg-steps b { display: block; margin-top: 2px; font-size: 14.5px; }
.reg-steps span { font-size: 13px; color: var(--tx-3); }

/* ---------- 20. RODAPÉ ---------- */
.ftr { border-top: 1px solid var(--line); background: #060203; }
.ftr .wrap { display: flex; align-items: center; gap: 26px; padding: 22px 0; }
.ftr-logo svg { width: 150px; height: 42px; display: block; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-right: auto; }
.ftr-links a { font-size: 13.5px; color: var(--tx-3); }
.ftr-links a:hover { color: var(--red-hi); }
.ftr-copy { text-align: right; font-size: 12.5px; color: var(--tx-4); line-height: 1.55; }

/* ---------- 21. NPROGRESS + CARREGANDO ---------- */
#nprogress { pointer-events: none; }
#nprogress .bar { background: linear-gradient(90deg, var(--red), var(--ember)); position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; }
#nprogress .peg { display: block; position: absolute; right: 0; width: 100px; height: 100%; box-shadow: 0 0 10px var(--red-hi), 0 0 5px var(--red-hi); transform: rotate(3deg) translate(0, -4px); }
#nprogress .spinner { display: none; }
.tpl-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 70px; padding: 18px; font-size: 13px; color: var(--tx-4); }
.tpl-loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--red-hi); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   23. DESTAQUES (rev. 4): medalhas, barras, killer, champions, agenda, painel
   ========================================================================== */

/* --- medalha do pódio (vale para listas e tabela) --- */
.p1 { --m: #f2c25c; --m2: #8a5a12; }
.p2 { --m: #d9dde4; --m2: #6d727c; }
.p3 { --m: #e09a63; --m2: #7a3f17; }
.p1 .rk-pos, .p2 .rk-pos, .p3 .rk-pos, .kr-pos.gold-pos, .kr-pos.silv-pos, .kr-pos.bron-pos {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 700 11px/1 var(--f-body); color: #1d1206;
  background: radial-gradient(circle at 35% 30%, #fffbe9 0%, var(--m) 42%, var(--m2) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35), 0 0 12px -3px var(--m);
}
.p1 .rk-pos::before, .p2 .rk-pos::before, .p3 .rk-pos::before,
.kr-pos.gold-pos::before, .kr-pos.silv-pos::before, .kr-pos.bron-pos::before { /* fita */
  content: ""; position: absolute; z-index: -1; left: 4px; top: -7px; width: 12px; height: 10px;
  background: linear-gradient(90deg, #c4161d 0 50%, #7d0b10 50% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.kr-pos.gold-pos { --m: #f2c25c; --m2: #8a5a12; }
.kr-pos.silv-pos { --m: #d9dde4; --m2: #6d727c; }
.kr-pos.bron-pos { --m: #e09a63; --m2: #7a3f17; }
.rk-list li.p1, .rk-list li.p2, .rk-list li.p3, .killer-item:nth-child(-n+3) { padding-top: 7px; padding-bottom: 7px; }
.rk-list li.p1 .nm { color: var(--gold-hi); }

/* --- barra proporcional atrás da linha --- */
.rk-list li, .killer-item { position: relative; isolation: isolate; }
.rk-list li[style*="--w"]::after, .killer-item[style*="--w"]::after {
  content: ""; position: absolute; z-index: -1; left: 10px; top: 3px; bottom: 3px; border-radius: 4px;
  width: calc((100% - 20px) * var(--w) / 100);
  background: linear-gradient(90deg, rgba(224, 37, 44, .14), rgba(224, 37, 44, .03));
}
.rk-list li.p1[style*="--w"]::after { background: linear-gradient(90deg, rgba(242, 194, 92, .16), rgba(242, 194, 92, .02)); }

/* --- KILLER: o líder em destaque --- */
.killer-top { display: flex; align-items: center; gap: 14px; margin: 12px 12px 4px; padding: 14px 16px; border-radius: 8px; position: relative; overflow: hidden;
  background: radial-gradient(220px 120px at 0% 50%, rgba(224, 37, 44, .32), transparent 70%), linear-gradient(90deg, rgba(224, 37, 44, .12), rgba(224, 37, 44, .02));
  border: 1px solid rgba(255, 74, 61, .28); }
.killer-top .sk { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff;
  background: radial-gradient(circle at 40% 30%, #ff5a4a, #9b0f16 70%); box-shadow: 0 0 22px -2px rgba(255, 60, 50, .7), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.killer-top .sk .i { width: 24px; height: 24px; }
.killer-top small { display: block; font-size: 12px; color: #ff9b8f; }
.killer-top b { display: block; font: 700 19px/1.2 var(--f-display); color: #fff; }
.killer-top .k { margin-left: auto; text-align: right; }
.killer-top .k b { font: 700 26px/1 var(--f-body); color: #fff; font-variant-numeric: tabular-nums; }
.killer-top .k small { color: var(--tx-3); }

/* --- CHAMPIONS --- */
.champ-royal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px 6px; }
.royal { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 10px; overflow: hidden; cursor: default;
  --c: #f2c25c; --c2: rgba(242, 194, 92, .18);
  background: radial-gradient(260px 140px at 0% 0%, var(--c2), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .15));
  border: 1px solid transparent; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); transition: transform .2s var(--ease), box-shadow .2s; }
.royal:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px transparent; box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 70%, transparent); }
.royal.queen { --c: #ff8fb0; --c2: rgba(255, 120, 160, .16); }
.royal::after { /* brilho que passa */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); animation: sheen 6s ease-in-out infinite;
}
.royal.queen::after { animation-delay: 3s; }
@keyframes sheen { 0%, 60% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
.royal .crest { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--c);
  background: radial-gradient(circle at 50% 35%, transparent, rgba(0, 0, 0, .4) 75%); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 30%, transparent), rgba(0, 0, 0, .4) 75%);
  box-shadow: inset 0 0 0 1px transparent, 0 0 20px -6px var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 20px -6px var(--c); }
.royal .crest .i { width: 24px; height: 24px; filter: drop-shadow(0 0 6px var(--c)); }
.royal small { display: block; font-size: 12px; color: var(--c); }
.royal b { display: block; font: 700 19px/1.2 var(--f-display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.royal > div { min-width: 0; }

.champ-classes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 10px 16px 16px; }
.cls-tile { display: block; text-align: center; padding: 14px 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft); transition: border-color .2s, transform .2s var(--ease); min-width: 0; }
.cls-tile:hover { border-color: rgba(255, 110, 95, .35); transform: translateY(-2px); }
.cls-av { display: block; width: 58px; height: 58px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; position: relative;
  box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 3px var(--ring, var(--red)), 0 8px 20px -8px var(--ring, var(--red)); background: #2a1a18; }
.cls-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.55); transform-origin: 50% 20%; }
.cls-tile small { display: block; font-size: 12px; color: var(--tx-3); }
.cls-tile b { display: block; font-size: 14.5px; font-weight: 600; color: var(--tx-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }

/* --- AGENDA DE HOJE --- */
.agenda { list-style: none; margin: 0; padding: 6px 0; }
.agenda li { display: flex; align-items: center; gap: 12px; padding: 7px 16px; cursor: pointer; transition: background .12s; }
.agenda li:hover { background: rgba(224, 37, 44, .06); }
.agenda .tm { width: 44px; font-weight: 600; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.agenda .ic { color: var(--tx-4); display: grid; }
.agenda .nm { min-width: 0; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda .in { margin-left: auto; font-size: 12.5px; color: var(--tx-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.agenda li.now { background: linear-gradient(90deg, rgba(224, 37, 44, .14), transparent); }
.agenda li.now .ic, .agenda li.now .in { color: var(--red-hi); }
.agenda li.now .nm { color: #fff; font-weight: 500; }

/* --- PAINEL DO JOGADOR (logado) --- */
.pl-head { position: relative; margin: -16px -16px 14px; padding: 18px 16px 16px; border-radius: 0; overflow: hidden;
  background: radial-gradient(260px 140px at 100% 0%, rgba(242, 194, 92, .16), transparent 70%), radial-gradient(260px 160px at 0% 100%, rgba(224, 37, 44, .2), transparent 70%); border-bottom: 1px solid var(--line-soft); }
.pl-id { display: flex; align-items: center; gap: 12px; }
.pl-av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 3px var(--gold), 0 0 18px -4px var(--gold); background: #2a1a18; }
.pl-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.55); transform-origin: 50% 20%; }
.pl-id b { display: block; font: 700 17px/1.2 var(--f-display); color: #fff; }
.pl-vip { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--gold-hi); }
.pl-vip .i { width: 13px; height: 13px; color: var(--gold); }
.pl-vip span { color: var(--tx-3); }
.pl-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pl-bal div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft); }
.pl-bal .i { color: var(--c); }
.pl-bal b { display: block; font-size: 14.5px; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }
.pl-bal small { display: block; font-size: 11.5px; color: var(--tx-3); line-height: 1.2; }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-grid a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 12px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line-soft); font-size: 13.5px; color: var(--tx-1); transition: border-color .15s, background .15s; }
.pl-grid a .i { color: var(--red-hi); }
.pl-grid a:hover { border-color: rgba(255, 110, 95, .35); background: rgba(224, 37, 44, .07); }
.pl-shop { display: grid; gap: 8px; margin-top: 10px; }
.btn-legend { position: relative; overflow: hidden; color: #2a1806; border: 0; background: linear-gradient(180deg, #ffe0a0, #e3b45e 55%, #b98432); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px -8px rgba(242, 194, 92, .8); }
.btn-legend:hover { filter: brightness(1.06); background: linear-gradient(180deg, #ffe0a0, #e3b45e 55%, #b98432); }
.btn-legend::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: sheen 5s ease-in-out infinite; }
.pl-foot { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.pl-foot a { color: var(--tx-3); display: inline-flex; align-items: center; gap: 6px; }
.pl-foot a:hover { color: var(--red-hi); }

/* ==========================================================================
   24. REV. 5: mais presença visual (banner, online, notícias, eventos)
   ========================================================================== */

/* --- painéis com brilho no topo e ícone no cabeçalho --- */
.card::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 74, 61, .75), transparent); pointer-events: none; }
.card-h { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)); border-radius: var(--r) var(--r) 0 0; min-height: 48px; }
.hi { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(180deg, #e8302a, #8e1016); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 14px -4px rgba(224, 37, 44, .8); }
.hi .i { width: 15px; height: 15px; }
.hi + h2::before, .hi + h3::before { display: none; }
.card-h .hi + h2, .card-h .hi + h3 { font-size: 14px; }

/* --- BANNER com cenário (imagem que já existe no site, colorida de vermelho) --- */
.banner {
  height: 184px;
  background:
    radial-gradient(520px 200px at 230px 92px, rgba(224, 37, 44, .32), transparent 70%),
    linear-gradient(90deg, rgba(8, 4, 5, .78) 0%, rgba(8, 4, 5, .15) 35%, rgba(8, 4, 5, .15) 62%, rgba(8, 4, 5, .8) 100%),
    linear-gradient(180deg, rgba(8, 4, 5, .55) 0%, rgba(8, 4, 5, 0) 40%, rgba(8, 4, 5, .9) 100%),
    linear-gradient(#8a0f15, #8a0f15),
    url("../../imgs/bg-banner.jpg") center top / 2000px 184px no-repeat,
    #0b0405;
  background-blend-mode: normal, normal, normal, color, normal, normal;
  border-bottom: 1px solid rgba(255, 74, 61, .25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 20px 40px -20px rgba(0, 0, 0, .9);
}
.banner::before { display: none; }
.banner::after { height: 70px; background: linear-gradient(0deg, rgba(8, 4, 5, .9), transparent); }

/* --- JOGADORES ONLINE (conta de 0 até o valor) --- */
.bn-online { position: relative; width: 292px; padding: 13px 20px 14px; border-radius: 14px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 18px 40px -16px rgba(0, 0, 0, .95), 0 0 46px -12px rgba(255, 74, 30, .6); }
.bo-frame { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.bo-frame::before { content: ""; position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  background: conic-gradient(from 0deg, rgba(255, 74, 61, .25) 0deg, rgba(255, 74, 61, .25) 250deg, #ff7a45 300deg, #ffd27a 318deg, rgba(255, 74, 61, .25) 345deg);
  animation: boSpin 5s linear infinite; }
.bo-frame::after { content: ""; position: absolute; inset: 1px; border-radius: 13px;
  background: radial-gradient(260px 120px at 50% 135%, rgba(255, 96, 30, .32), transparent 70%), linear-gradient(180deg, #170809 0%, #0c0405 100%); }
@keyframes boSpin { to { transform: rotate(360deg); } }
.bo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bo-state { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ok); }

@keyframes boPing { 0% { box-shadow: 0 0 0 0 rgba(63, 217, 138, .6); } 80%, 100% { box-shadow: 0 0 0 8px rgba(63, 217, 138, 0); } }
.bo-ver { font: 600 10.5px var(--f-display); letter-spacing: .1em; color: var(--tx-3); }
.bo-num { margin: 4px 0 2px; min-height: 60px; display: flex; align-items: center; }
.bo-num b { font: 700 58px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #ffe3c2 45%, #ff9a4a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 90, 40, .55)); }

@keyframes boGlow { 50% { filter: drop-shadow(0 0 22px rgba(255, 110, 40, .9)); } }
.bo-lbl { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tx-2); }
.bo-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.bo-eq i { width: 3px; height: 100%; border-radius: 1px; background: linear-gradient(0deg, #ff4a3d, #ffb35c); transform-origin: bottom; animation: boEq 1.1s ease-in-out infinite; }
.bo-eq i:nth-child(2) { animation-delay: -.3s; } .bo-eq i:nth-child(3) { animation-delay: -.6s; } .bo-eq i:nth-child(4) { animation-delay: -.15s; } .bo-eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes boEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.bn-online.is-off .bo-state { color: var(--red-hi); }
.bn-online.is-off .live-dot { background: var(--red-hi); }
.bn-online.is-off .live-dot::after { display: none; }
.bn-online.is-off .bo-num b { background: none; color: var(--tx-3); filter: none; font-size: 40px; }
.bn-online.is-off .bo-eq { display: none; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* --- SOBRE com números --- */
.about { position: relative; overflow: hidden; padding: 24px 26px; }
.about::after { content: ""; position: absolute; right: -30px; top: -20px; width: 230px; height: 250px; opacity: .06; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 52'%3E%3Cpath d='M24 2 44 8.5V24c0 12.2-8.6 20.7-20 25.6C12.6 44.7 4 36.2 4 24V8.5z' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M14.5 34V17.5l9.5 9.8 9.5-9.8V34' fill='none' stroke='%23fff' stroke-width='3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.about > * { position: relative; z-index: 1; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.about-stats div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line-soft); }
.about-stats .i { color: var(--red-hi); width: 18px; height: 18px; }
.about-stats b { display: block; font: 700 16px/1.1 var(--f-display); color: #fff; }
.about-stats small { display: block; font-size: 11.5px; color: var(--tx-3); line-height: 1.2; }

/* --- NOTÍCIAS: destaque + grade --- */
.news-feat { position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 18px; margin: 14px; padding: 18px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(360px 160px at 100% 0%, rgba(224, 37, 44, .22), transparent 70%), linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .2));
  border: 1px solid rgba(255, 74, 61, .25); transition: border-color .15s; }
.news-feat:hover { border-color: rgba(255, 74, 61, .5); }
.nf-date { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(180deg, #e8302a, #7d0b10); box-shadow: 0 10px 24px -10px rgba(224, 37, 44, .8), inset 0 1px 0 rgba(255, 255, 255, .25); color: #fff; }
.nf-date b { font: 700 34px/1 var(--f-display); }
.nf-date span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font: 600 11px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--tg, var(--red)); }
.tag.promo { --tg: linear-gradient(180deg, #e3b45e, #a8742a); color: #2a1806; }
.tag.info { --tg: #3a2a28; color: var(--tx-2); }
.tag.new { --tg: transparent; color: var(--red-hi); padding: 0; margin-left: 8px; }
.nf-body h3 { margin: 8px 0 6px; font: 700 19px/1.3 var(--f-display); color: #fff; }
.nf-body p { margin: 0 0 10px; font-size: 14px; color: var(--tx-2); }
.nf-body .go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--red-hi); }
.news-feat:hover .go .i { transform: translateX(3px); }
.news-feat .go .i { transition: transform .15s; }
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 14px; }
.news-mini { display: block; padding: 12px 14px; border-radius: 8px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft); border-left: 3px solid var(--nc, var(--red)); transition: background .15s, border-color .15s; }
.news-mini:hover { background: rgba(224, 37, 44, .07); }
.news-mini.promo { --nc: var(--gold); }
.news-mini.info { --nc: #6d5a56; }
.news-mini .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--tx-4); }
.news-mini .meta em { font-style: normal; font-weight: 600; color: var(--nc, var(--red-hi)); }
.news-mini.info .meta em { color: var(--tx-3); }
.news-mini b { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 500; color: var(--tx-1); line-height: 1.4; }

/* --- RANKINGS DE RESETS: cabeçalho de coluna --- */
.rk-cols { display: flex; justify-content: space-between; padding: 8px 16px 2px; font-size: 11.5px; color: var(--tx-4); }

/* --- RANKINGS DE EVENTO: visual próprio --- */
.evrk { overflow: hidden; --ac: #ff4a3d; --ac2: rgba(255, 74, 61, .28); }
.evrk::before { background: linear-gradient(90deg, transparent, var(--ac), transparent); }
.evrk-h { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px;
  background: radial-gradient(240px 110px at 0% 0%, var(--ac2), transparent 75%), linear-gradient(180deg, rgba(255, 255, 255, .04), transparent); }
.evrk-h .em { width: 42px; height: 42px; flex: none; display: grid; place-items: center; color: #fff; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, var(--ac), var(--ac) 75%); background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--ac) 85%, #fff), color-mix(in srgb, var(--ac) 55%, #000) 75%);
  box-shadow: 0 0 22px -4px var(--ac), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.evrk-h .em .i { width: 20px; height: 20px; }
.evrk-h b { display: block; font: 700 16px/1.2 var(--f-display); color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.evrk-h small { font-size: 12px; color: var(--tx-3); }
.evrk-champ { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 12px 14px; border-radius: 9px;
  background: linear-gradient(90deg, transparent, transparent 85%); background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 22%, transparent), transparent 85%); border: 1px solid transparent; border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); }
.evrk-champ .cr { color: var(--gold); filter: drop-shadow(0 0 6px rgba(242, 194, 92, .7)); }
.evrk-champ small { display: block; font-size: 11.5px; color: var(--gold); }
.evrk-champ .nm { display: block; font-size: 15.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evrk-champ > div { min-width: 0; }
.evrk-champ .pts { margin-left: auto; text-align: right; }
.evrk-champ .pts b { display: block; font: 700 22px/1 var(--f-body); color: #fff; font-variant-numeric: tabular-nums; }
.evrk-champ .pts small { color: var(--tx-3); }
.evrk-list { list-style: none; margin: 0; padding: 4px 0 8px; counter-reset: ev 1; }
.evrk-list li { display: flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 14px; counter-increment: ev; }
.evrk-list li::before { content: counter(ev); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 600; color: var(--tx-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); }
.evrk-list li:nth-child(1)::before, .evrk-list li:nth-child(2)::before { color: #fff; border-color: transparent; border-color: color-mix(in srgb, var(--ac) 45%, transparent); background: transparent; background: color-mix(in srgb, var(--ac) 18%, transparent); }
.evrk-list .nm { min-width: 0; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evrk-list .vl { margin-left: auto; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.evrk-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--tx-3); }
.evrk-foot .i { color: var(--gold); width: 14px; height: 14px; }
.evrk-foot b { color: var(--gold-hi); font-weight: 600; }
.evrk.ember { --ac: #ff8a3d; --ac2: rgba(255, 138, 61, .26); }
.evrk.gold { --ac: #e3b45e; --ac2: rgba(227, 180, 94, .24); }

/* títulos de seção soltos com mais presença */
.sec-h h2 { font-size: 15px; display: flex; align-items: center; gap: 10px; }
.sec-h h2::before { content: ""; width: 8px; height: 8px; background: var(--red-hi); transform: rotate(45deg); box-shadow: 0 0 10px var(--red); }
.sec-h .rule { background: linear-gradient(90deg, rgba(255, 74, 61, .45), transparent); }

/* ==========================================================================
   22. MODO CELULAR: só nas páginas com <body class="rsp">
   (compras, shopping, promoção, eventos). O resto do site fica sempre
   no layout de PC, inclusive no celular.
   ========================================================================== */
@media (max-width: 1020px) {
  body.rsp { min-width: 0; }
  .rsp .wrap { width: auto; margin: 0 12px; }
}
@media (max-width: 900px) {
  .rsp .tb-actions .hdr-burger { display: inline-flex; width: 38px; padding: 0; }
  .rsp .nav { position: fixed; top: 54px; left: 0; right: 0; bottom: 0; z-index: 49; height: auto; flex-direction: column; padding: 8px 16px 30px; overflow-y: auto; background: var(--ink-0); opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s; }
  .rsp .nav.open { opacity: 1; visibility: visible; transition: opacity .18s; }
  .rsp .nav a { padding: 15px 2px; font-size: 16px; border-bottom: 1px solid var(--line-soft); }
  .rsp .nav a::after { display: none; }
  .rsp .nav a.is-active { color: var(--red-hi); }
  .rsp.nav-open { overflow: hidden; }
  .rsp .banner { height: 116px; }
  .rsp .banner .wrap { justify-content: center; }
  .rsp .logo svg { width: 290px; height: 81px; }
  .rsp .logo .ver, .rsp .bn-online { display: none; }
  .rsp .main .wrap { grid-template-columns: 1fr; }
  .rsp .aside { order: 2; }
  .rsp .ftr .wrap { flex-direction: column; text-align: center; gap: 14px; }
  .rsp .ftr-links { justify-content: center; margin: 0; }
  .rsp .ftr-copy { text-align: center; }
}
@media (max-width: 640px) {
  .rsp .tb-actions .txt-hide-sm { display: none; }
  .rsp .tb-actions .btn-primary { width: 38px; padding: 0; }
  .rsp .hub-grid { grid-template-columns: 1fr; }
  .rsp .cur-list .cur { grid-template-columns: 1fr; gap: 4px; }
  .rsp .logo svg { width: 250px; height: 70px; }
  .rsp .page-head { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .embers { display: none; }
}


/* ---------- NOTÍCIAS (lista compacta, dados do noticias-data.js) ---------- */
.card > .news-list { padding: 16px 18px 18px; }
.news-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.news-row { --nc: var(--red-hi); display: block; padding: 9px 13px 10px; border-radius: 8px; background: rgba(255, 74, 61, .04);
  border: 1px solid var(--line); border-left: 3px solid var(--nc); transition: background .2s, border-color .2s, transform .2s; }
.news-row:hover { background: rgba(255, 74, 61, .09); border-color: rgba(255, 110, 95, .28); border-left-color: var(--nc); transform: translateY(-1px); }
.nr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.nr-date { font-size: 11.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-type { flex: none; font: 700 9.5px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; color: #fff; background: var(--nc); }
.nr-title { display: block; font: 600 13px/1.38 var(--f-body); color: var(--tx-1); transition: color .2s; }
.news-row:hover .nr-title { color: #fff; }
.nr-tags { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gold-hi); opacity: .8; }
.news-row.type-noticia { --nc: #2fbf73; }
.news-row.type-evento { --nc: #e0252c; }
.news-row.type-agenda { --nc: #ff7a45; }
.news-row.type-promocao { --nc: #d9a441; }
.news-row.type-promocao .nr-type { color: #2a1803; }
.news-row.type-whatsapp { --nc: #1fae58; }
.news-row.type-info { --nc: #9b6cff; }
.news-msg { grid-column: 1 / -1; padding: 14px 4px; text-align: center; font-size: 13px; color: var(--tx-3); }
.news-msg.error { color: #ff8f86; }
.news-list.one { grid-template-columns: 1fr; }

/* ---------- PÁGINA SEM BARRA LATERAL (largura inteira) ---------- */
.main.is-full .wrap { display: block; }

/* ---------- FOGO DO ESCUDO (partículas em canvas, desenhado pelo classic.js) ---------- */
.logo svg { position: relative; z-index: 1; }
.logo-fire { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
/* ==========================================================================
   25. SEMANTIC UI NO TEMA CLASSIC (modais e formulários do painel)
   ========================================================================== */
.ui.dimmer { background: rgba(4, 2, 2, .82) !important; }
.ui.modal { background: #140a0b !important; border: 1px solid var(--line); border-radius: 12px !important; box-shadow: 0 40px 90px -20px #000 !important; color: var(--tx-2); font-family: var(--f-body); }
.ui.modal > .header { background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent) !important; color: var(--tx-1) !important; border-bottom: 1px solid var(--line-soft) !important; font: 700 17px var(--f-display) !important; letter-spacing: .04em; border-radius: 12px 12px 0 0 !important; padding: 16px 20px !important; }
.ui.modal > .content { background: transparent !important; color: var(--tx-2) !important; font-size: 14.5px; line-height: 1.6; padding: 18px 20px !important; }
.ui.modal > .actions { background: rgba(0, 0, 0, .25) !important; border-top: 1px solid var(--line-soft) !important; border-radius: 0 0 12px 12px !important; padding: 12px 20px !important; }
.ui.modal > .close { color: var(--tx-3) !important; }
.mg-modal-lead { margin: 0 0 14px; color: var(--tx-3); }
.ui.button { font-family: var(--f-body) !important; font-weight: 600 !important; letter-spacing: .04em; border-radius: 6px !important; background: rgba(255, 255, 255, .06) !important; color: var(--tx-1) !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; transition: filter .15s, background .15s; }
.ui.button:hover { background: rgba(224, 37, 44, .12) !important; }
.ui.primary.button, .ui.positive.button, .ui.green.button, .ui.red.button, .ui.blue.button { background: linear-gradient(180deg, #ea3029, #b8151c) !important; border-color: transparent !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important; }
.ui.primary.button:hover, .ui.positive.button:hover, .ui.green.button:hover, .ui.red.button:hover, .ui.blue.button:hover { filter: brightness(1.1); }
.ui.form .field > label, .ui.form label { color: var(--tx-3) !important; font-weight: 500 !important; font-size: 13px !important; }
.ui.form input:not([type=checkbox]):not([type=radio]), .ui.form select, .ui.form textarea, .ui.input > input, .ui.selection.dropdown {
  background: #070304 !important; color: var(--tx-1) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 6px !important; font-family: var(--f-body) !important; box-shadow: none !important; }
.ui.form input:focus, .ui.form select:focus, .ui.form textarea:focus, .ui.input > input:focus { border-color: rgba(255, 74, 61, .6) !important; box-shadow: 0 0 0 3px rgba(224, 37, 44, .14) !important; }
.ui.form .field.error input, .ui.form .fields.error .field input { background: #1a0607 !important; border-color: var(--red-hi) !important; color: #ffd2cc !important; }
.ui.message { background: rgba(255, 255, 255, .04) !important; color: var(--tx-2) !important; box-shadow: 0 0 0 1px var(--line) inset !important; border-radius: 8px !important; }
.ui.negative.message, .ui.error.message { background: rgba(224, 37, 44, .1) !important; color: #ffb8ae !important; box-shadow: 0 0 0 1px rgba(255, 74, 61, .35) inset !important; }
.ui.positive.message, .ui.success.message { background: rgba(63, 217, 138, .08) !important; color: #b8f5d2 !important; box-shadow: 0 0 0 1px rgba(63, 217, 138, .3) inset !important; }
.ui.message .header { color: inherit !important; font-family: var(--f-body) !important; }
.ui.table { background: transparent !important; color: var(--tx-2) !important; border-color: var(--line) !important; }
.ui.table thead th { background: rgba(255, 255, 255, .03) !important; color: var(--tx-3) !important; border-color: var(--line-soft) !important; }
.ui.table td { border-color: var(--line-soft) !important; }
.ui.divider { border-color: var(--line-soft) !important; }
.ui.divider.hidden { border-color: transparent !important; }
.ui.form.error .mnu-error, #login.error .mnu-error, #forgot.error .mnu-error { display: block; }
.mnu-field.error .mnu-input { border-color: var(--red-hi); box-shadow: 0 0 0 3px rgba(224, 37, 44, .14); }
.pl-ini { width: 100%; height: 100%; display: grid; place-items: center; font: 700 20px var(--f-display); color: #fff; background: linear-gradient(180deg, var(--red), var(--red-lo)); }
.pl-vip.free, .pl-vip.free .i { color: var(--tx-3); }
.bn-gauge .val .off { color: var(--tx-3); }
.rk-scroll { overflow-x: auto; }
.rank-pick + .tpl-loading, .card > .tpl-loading { min-height: 120px; }

/* conteúdo legado dentro da coluna central: nada passa da largura */
.col-main img { max-width: 100%; height: auto; }
.col-main iframe { max-width: 100%; }
.col-main > div[data-template], .col-main > div:not([class]) { min-width: 0; }
.fld-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--tx-4); cursor: pointer; display: grid; place-items: center; }
.fld-eye:hover, .fld-eye.on { color: var(--red-hi); }
.fld-wrap .fld-eye .i { position: static; transform: none; }
.reg-submit { width: auto; padding: 0 32px; }
.reg-submit:disabled { opacity: .6; cursor: wait; }
.fld-error div + div { margin-top: 3px; }
.pp-page-title { display: none !important; }

/* login: aviso do reCAPTCHA (o selo flutuante do Google fica escondido) */
.mnu-safe { margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--tx-4); text-align: center; }
.mnu-safe a { color: var(--tx-3); text-decoration: underline; text-underline-offset: 2px; }
.grecaptcha-badge { visibility: hidden !important; }
.mnu-btn-login[disabled] { opacity: .65; cursor: wait; }
h1.info-hero-title { margin-top: 0; }
/* perguntas frequentes (página Info) */
.faq { margin-top: 22px; }
.faq-list { padding: 8px 20px 18px; display: grid; gap: 8px; }
.faq-item { border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 74, 61, .035); }
.faq-item summary { cursor: pointer; list-style: none; padding: 12px 16px; font: 600 14.5px var(--f-body); color: var(--tx-1); display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--red-hi); font-weight: 600; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0; padding: 0 16px 14px; color: var(--tx-2); font-size: 14px; line-height: 1.6; }
/* enquanto uma compra/troca está em andamento, os botões de ação não aceitam outro clique */
body.is-posting [data-button], body.is-posting [data-execute], body.is-posting .buy .button, body.is-posting button[type="submit"] { pointer-events: none; opacity: .6; cursor: progress; }
body.is-posting { cursor: progress; }
#perguntas-frequentes { margin: 22px 20px 0; }

/* ==========================================================================
   26. COMPRAS E AÇÕES (api.js): botão carregando e tela "Processando"
   ========================================================================== */
.is-loading { position: relative !important; color: transparent !important; text-shadow: none !important; pointer-events: none !important; cursor: progress; }
.is-loading > * { visibility: hidden; }
.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 210, 200, .3); border-top-color: #fff; animation: spin .7s linear infinite; visibility: visible; }

.wait-ov { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; background: rgba(4, 2, 2, .82);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.wait-ov.on { opacity: 1; visibility: visible; }
.wait-box { width: 100%; max-width: 380px; padding: 30px 26px 24px; text-align: center; background: #140a0b; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 40px 90px -20px #000, 0 0 50px -20px rgba(224, 37, 44, .55); }
.wait-spin { display: block; width: 50px; height: 50px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid rgba(224, 37, 44, .16);
  border-top-color: var(--red-hi); border-left-color: var(--ember); animation: spin .8s linear infinite; }
.wait-t { display: block; font: 700 19px/1.25 var(--f-display); letter-spacing: .04em; color: var(--tx-1); }
.wait-box p { margin: 10px 0 8px; font-size: 14.5px; color: var(--tx-2); }
.wait-box small { font-size: 12px; color: var(--tx-3); }
html.wait-lock, html.wait-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .wait-spin, .is-loading::after { animation-duration: 2s; } }

/* Semantic UI chega sem travar a página: as janelas continuam escondidas até abrir */
.ui.modal:not(.active), .ui.dimmer:not(.active) { display: none; }

/* ---------- MENU DOS SHOPS (abas das moedas e categorias, como no MU GAME Easy) ---------- */
/* menu dos shops: 4 boxes grandes com foto (Shop 3D, Golds, Cash e Game Points), como os cartões do Shop 3D (25/10) */
.shopx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shopx-b { --c: var(--gold); position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 10px; min-height: 104px; padding: 12px 10px 12px 12px;
  border-radius: 6px; text-decoration: none; color: var(--tx-1);
  background: radial-gradient(120% 90% at 0% 100%, transparent, transparent 60%), linear-gradient(180deg, #1a0e0f, #0d0708); background: radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), linear-gradient(180deg, #1a0e0f, #0d0708);
  box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 4px rgba(6, 3, 3, .9); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent), inset 0 0 0 4px rgba(6, 3, 3, .9); transition: box-shadow .2s, transform .2s; }
.shopx-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0d0708 34%, rgba(13, 7, 8, .55) 70%, rgba(13, 7, 8, .15)); }
.shopx-art { position: absolute; inset: 0 0 0 46%; z-index: -2; pointer-events: none; opacity: .62; transition: opacity .25s;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.shopx-art img { position: absolute; top: -6%; right: -8%; height: 112%; width: auto; max-width: none; object-fit: contain; filter: saturate(.95); }
.shopx-art img.a1 { right: 34%; top: 4%; height: 92%; opacity: .55; }
.shopx-em { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px transparent); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px color-mix(in srgb, var(--c) 35%, transparent)); transition: transform .25s; }
.shopx-em svg { display: block; width: 100%; height: 100%; }
.shopx-tx { min-width: 0; }
.shopx-tx b { display: block; font: 700 16px/1.1 var(--f-display); letter-spacing: .03em; color: var(--c); color: color-mix(in srgb, var(--c) 70%, #fff); text-shadow: 0 1px 0 #000; white-space: nowrap; }
.shopx-tx small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--tx-3); }
.shopx-b:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 4px rgba(6, 3, 3, .9), 0 14px 26px -18px var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0 4px rgba(6, 3, 3, .9), 0 14px 26px -18px var(--c); }
.shopx-b:hover .shopx-art { opacity: .85; }
.shopx-b:hover .shopx-em { transform: scale(1.06); }
.shopx-b.on { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 4px rgba(6, 3, 3, .9), 0 0 26px -8px var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 0 4px rgba(6, 3, 3, .9), 0 0 26px -8px var(--c); }
.shopx-b.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--c), transparent); }
.shopx-b.on .shopx-art { opacity: .9; }
.shopx-b:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.shopx-b.s3d { --c: #ff7a45; }
.shopx-b.gold { --c: #e3b45e; }
.shopx-b.cash { --c: #cdd1d8; }
.shopx-b.gc { --c: #3fd98a; }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .shopx-b, .shopx-em, .shopx-art { transition: none; } .shopx-b:hover { transform: none; } }
@media (max-width: 760px) {
  .rsp .shopx { grid-template-columns: 1fr 1fr; }
  .rsp .shopx-b { min-height: 84px; }
  .rsp .shopx-tx small { display: none; }
}
/* coluna estreita do site: emblema e nome embaixo, foto grande em cima */
.shopx-b { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; min-height: 118px; padding: 12px 12px 14px; }
.shopx-b::before { background: linear-gradient(0deg, #0d0708 8%, rgba(13, 7, 8, .5) 42%, rgba(13, 7, 8, 0) 75%); }
.shopx-art { inset: 0 0 0 28%; opacity: .95; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.shopx-art img { top: -8%; right: -4%; height: 120%; filter: saturate(1.05) brightness(1.15); }
.shopx-b:hover .shopx-art, .shopx-b.on .shopx-art { opacity: 1; }
.shopx-em { width: 30px; height: 30px; }
.shopx-tx b { font-size: 15px; }
.shopx-tx small { margin-top: 3px; font-size: 11.5px; white-space: nowrap; }
.shopx-b.on::after { bottom: 5px; }
/* fim do menu dos shops */

.ezc { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0; padding: 0; overflow: hidden; border-color: rgba(227, 180, 94, .22); }
.ezc-tabs { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: rgba(0, 0, 0, .2); border-right: 1px solid var(--line); }
.ezc-g { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 8px; cursor: pointer;
  font: 700 14px var(--f-display); letter-spacing: .06em; color: var(--tx-2); }
.ezc-g small { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px; font: 700 11px var(--f-cond); color: var(--tx-3); background: rgba(255, 255, 255, .05); }
.ezc-g:hover { color: var(--tx-1); }
.ezc-g.on { color: #1d1204; background: linear-gradient(180deg, #ffe0a0, var(--gold)); box-shadow: 0 0 20px -8px rgba(227, 180, 94, .8); }
.ezc-g.on small { color: #1d1204; background: rgba(29, 18, 4, .14); }
.ezc-g:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.ezc-list { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; padding: 14px 16px; }
.ezc-list[hidden] { display: none; }
.ezc-list a, .ezc-list button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border-radius: 9px; cursor: pointer; text-decoration: none;
  font: 600 14.5px var(--f-body); color: var(--tx-1); background: rgba(255, 255, 255, .03); border: 1px solid rgba(227, 180, 94, .16); transition: border-color .15s, background .15s; }
.ezc-list .i { width: 17px; height: 17px; color: var(--gold); }
.ezc-list a:hover, .ezc-list button:hover { border-color: rgba(227, 180, 94, .45); background: rgba(227, 180, 94, .06); }
.ezc-list a.on, .ezc-list button.on { color: #1d1204; border-color: transparent; background: linear-gradient(180deg, #ffe0a0, var(--gold)); box-shadow: 0 0 18px -8px rgba(227, 180, 94, .9); }
.ezc-list a.on .i, .ezc-list button.on .i { color: #1d1204; }
@media (max-width: 760px) {
  .rsp .cur-tabs { grid-template-columns: 1fr 1fr; }
  .rsp .cur-tab small { display: none; }
  .rsp .ezc { grid-template-columns: 1fr; }
  .rsp .ezc-tabs { flex-direction: row; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rsp .ezc-g { flex: 1; justify-content: center; gap: 6px; padding: 10px 6px; font-size: 13px; }
  .rsp .ezc-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 12px; }
  .rsp .ezc-list a, .rsp .ezc-list button { flex: none; }
}

/* menu preso no topo em todas as páginas (o Semantic UI deixa o body com a altura da tela) */
html body { height: auto; min-height: 100%; }

/* modo leve: liga sozinho quando o PC não acompanha o fogo da logo */
html.leve .embers i, html.leve .bo-frame::before, html.leve .bo-eq i, html.leve .live-dot::after, html.leve .btn-legend::after, html.leve [class*="sheen"] { animation-play-state: paused !important; }

/* ===================================================================== 25/10: página inicial nova */
/* caixa Info do servidor (coluna da esquerda) */
.inf-l { display: grid; padding: 6px 8px; }
.inf-l a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 6px; color: var(--tx-2); transition: background .15s; }
.inf-l a:hover { background: rgba(224, 37, 44, .07); }
.inf-l img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .8)); }
.inf-l b { display: block; font: 700 13px/1.2 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--tx-1); }
.inf-l small { display: block; font-size: 12px; line-height: 1.35; color: var(--tx-3); }
.inf-l .i { color: var(--tx-4); }
.inf-l a:hover .i { color: var(--red-hi); }
/* caixa da Chaos Machine Elite, com o goblin em 3D pequeno */
.cxh { overflow: hidden; }
.cxh-a { position: relative; display: grid; color: var(--tx-2); }
.cxh-palco { position: relative; display: block; height: 190px; background: radial-gradient(60% 70% at 50% 72%, #2a1640 0%, #140a1e 55%, #0a0608 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.cxh-palco::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 150px; height: 26px; margin-left: -75px; border-radius: 50%; border: 1px solid rgba(227, 180, 94, .45);
  box-shadow: 0 0 22px rgba(154, 107, 255, .45), inset 0 0 14px rgba(154, 107, 255, .35); }
.cxh-foto, .cxh-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 100%; }
.cxh-cv { z-index: 1; opacity: 0; transition: opacity .5s; }
.cxh-palco.vivo .cxh-cv { opacity: 1; }
.cxh-palco.vivo .cxh-foto { opacity: 0; transition: opacity .5s; }
.cxh-tx { padding: 12px 16px 4px; }
.cxh-tx b { display: block; font: 700 16px/1.2 var(--f-display); color: #fff; letter-spacing: .04em; }
.cxh-tx small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--tx-3); }
.cxh-go { display: inline-flex; align-items: center; gap: 6px; margin: 6px 16px 14px; font: 600 13px var(--f-body); letter-spacing: .04em; color: var(--gold-hi); }
.cxh-a:hover .cxh-go { color: #fff; }
/* eventos no jeito do MU GAME Easy */
.ev-home-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; padding: 14px 16px 16px; }
.ev-live { display: flex; flex-direction: column; gap: 10px; }
.ev-clock { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(8, 4, 5, .55); }
.ev-clock span { font: 700 10px var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.ev-clock b { font: 700 26px/1 var(--f-cond); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 16px rgba(255, 74, 61, .4); }
.live-now { padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(8, 4, 5, .45); }
.live-now small { display: inline-flex; align-items: center; gap: 7px; font: 700 10px var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.live-now small i { width: 6px; height: 6px; border-radius: 50%; background: var(--tx-4); }
.live-now strong { display: block; margin-top: 3px; font: 700 15px/1.2 var(--f-display); letter-spacing: .03em; color: var(--tx-2); }
.live-now span { font-size: 12px; color: var(--tx-3); }
.live-now.on { border-color: rgba(255, 74, 61, .55); background: radial-gradient(200px 100px at 0% 0%, rgba(255, 74, 61, .18), transparent 70%), rgba(8, 4, 5, .5); box-shadow: 0 0 24px -8px rgba(255, 74, 61, .6); }
.live-now.on small { color: var(--red-hi); }
.live-now.on small i { background: var(--red-hi); animation: evPisca 1.2s infinite; }
.live-now.on strong { color: #fff; }
@keyframes evPisca { 50% { opacity: .2; } }
.ev-next { position: relative; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(227, 180, 94, .3); background: radial-gradient(180px 90px at 100% 0%, rgba(227, 180, 94, .14), transparent 70%), rgba(8, 4, 5, .5); }
.ev-next small { display: block; font: 700 10px var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ev-next strong { display: block; margin-top: 3px; font: 700 15px/1.2 var(--f-display); letter-spacing: .03em; color: #fff; }
.ev-next > span:not(.cd) { display: block; font-size: 12px; color: var(--tx-3); }
.ev-next .cd { display: block; margin-top: 4px; font: 700 22px/1 var(--f-cond); font-variant-numeric: tabular-nums; color: var(--gold-hi); }
.ev-up { min-width: 0; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(8, 4, 5, .35); }
.ev-up h4 { margin: 0; padding: 10px 14px; font: 700 12px var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); border-bottom: 1px solid var(--line-soft); }
.ev-up .agenda { padding: 2px 0 4px; }
.ev-up .agenda li { cursor: default; padding: 6px 14px; }
.agenda .nm small { display: block; font-size: 11.5px; color: var(--tx-4); }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .live-now.on small i { animation: none; } }
/* rankings: resets e eventos com duas abas */
.rkx-cl .sec-h { margin-bottom: 12px; }
.rkx-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; border: 1px solid var(--line); background: rgba(8, 4, 5, .5); }
.rkx-tabs button { height: 30px; padding: 0 14px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: 700 12px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); transition: background .15s, color .15s; }
.rkx-tabs button:hover { color: #fff; }
.rkx-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, var(--red), var(--red-lo)); box-shadow: 0 0 16px -4px rgba(224, 37, 44, .7); }
.rkx-tabs button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.rkx-p[hidden] { display: none; }

/* cabeçalho da página aberto na largura toda, com a coluna da esquerda e o conteúdo embaixo (25/10) */
.main .wrap > .page-head { grid-column: 1 / -1; margin-bottom: 0; }

/* sisx: sistemas interligados (sistemas.py) */
.sisx { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.sisx-b { --c: var(--gold); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 108px; padding: 10px 11px 12px;
  border-radius: 4px; text-decoration: none; color: var(--tx-1); background: #0d0708;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 4px rgba(6, 3, 3, .9); transition: transform .2s, box-shadow .2s; }
.sisx-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0d0708 10%, rgba(13, 7, 8, .55) 46%, rgba(13, 7, 8, 0) 80%); }
.sisx-art { position: absolute; inset: 0 0 0 26%; z-index: -2; pointer-events: none; opacity: .8; transition: opacity .25s;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%); }
.sisx-art img { position: absolute; top: -6%; right: -4%; height: 116%; width: auto; max-width: none; object-fit: contain; filter: saturate(1.05) brightness(1.1); }
.sisx-b.ban .sisx-art img { top: 8%; right: 6%; height: 50%; }
.sisx-b.ban .sisx-art img.a1 { right: 30%; top: 26%; height: 46%; }
.sisx-b.ban .sisx-art img.a2 { right: 48%; top: 6%; height: 42%; opacity: .8; }
.sisx-b.bau .sisx-art img { top: 4%; right: -6%; height: 84%; }
.sisx-b.cha .sisx-art img { top: -2%; right: -6%; height: 112%; }
.sisx-b.mkt .sisx-art img { top: 2%; right: -10%; height: 100%; }
.sisx-em { flex: none; width: 28px; height: 28px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8)) drop-shadow(0 0 8px transparent); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8)) drop-shadow(0 0 8px color-mix(in srgb, var(--c) 35%, transparent)); transition: transform .25s; }
.sisx-em svg { display: block; width: 100%; height: 100%; }
.sisx-tx b { display: block; font: 700 14.5px/1.15 var(--f-display); letter-spacing: .02em; color: var(--c); color: color-mix(in srgb, var(--c) 70%, #fff); text-shadow: 0 1px 0 #000, 0 0 8px #000; }
.sisx-tx small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--tx-3); text-shadow: 0 1px 2px #000; }
.sisx-b:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 4px rgba(6, 3, 3, .9), 0 14px 26px -18px var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0 4px rgba(6, 3, 3, .9), 0 14px 26px -18px var(--c); }
.sisx-b:hover .sisx-art { opacity: 1; }
.sisx-b:hover .sisx-em { transform: scale(1.06); }
.sisx-b.on { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 4px rgba(6, 3, 3, .9), 0 0 24px -8px var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 0 4px rgba(6, 3, 3, .9), 0 0 24px -8px var(--c); }
.sisx-b.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--c), transparent); }
.sisx-b.on .sisx-art { opacity: 1; }
.sisx-b:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.sisx-b.per { --c: #e3b45e; } .sisx-b.bau { --c: #d98a3a; } .sisx-b.ban { --c: #8f8cff; } .sisx-b.cha { --c: #f2b03a; } .sisx-b.mkt { --c: #5fd08a; }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .sisx-b, .sisx-em, .sisx-art { transition: none; } .sisx-b:hover { transform: none; } }
@media (max-width: 760px) {
  .rsp .sisx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rsp .sisx-tx small { display: none; }
}
/* fim sisx */

/* 25/10: notícias uma embaixo da outra, igual ao MU GAME Easy (selo e data à esquerda, título no meio, seta à direita) */
.news-list, .news-list.one { grid-template-columns: 1fr; gap: 0; }
.card > .news-list { padding: 8px 12px 10px; }
.news-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 16px; grid-template-areas: "h t s" "h g s"; align-items: center; column-gap: 12px; row-gap: 2px;
  padding: 10px 8px; border: 0; border-radius: 8px; border-bottom: 1px solid var(--line); background: none; }
.news-row:last-child { border-bottom: 0; }
.news-row:hover { transform: none; background: rgba(255, 74, 61, .06); border-color: var(--line); }
.news-row .nr-head { grid-area: h; flex-direction: column-reverse; align-items: flex-start; justify-content: center; gap: 4px; margin: 0; }
.news-row .nr-date { font-size: 10.5px; line-height: 1.2; white-space: normal; }
.news-row .nr-type { border-radius: 5px; padding: 3px 7px; }
.news-row .nr-title { grid-area: t; font-size: 13px; line-height: 1.45; }
.news-row .nr-tags { grid-area: g; margin: 0; font-size: 11px; color: var(--tx-3); opacity: 1; }
.news-row::after { content: ""; grid-area: s; width: 8px; height: 8px; border-top: 2px solid var(--tx-3); border-right: 2px solid var(--tx-3); transform: rotate(45deg); transition: transform .15s, border-color .15s; }
.news-row:hover::after { border-color: var(--red-hi); transform: translateX(2px) rotate(45deg); }
@media (max-width: 620px) { .news-row { grid-template-columns: 96px minmax(0, 1fr) 12px; column-gap: 10px; } }