/* MU GAME Hard · v12: logo novo, apresentação refeita, sem réguas e sem efeitos sobrando */

/* ---------- sem as réguas tracejadas nos títulos ---------- */
.pn-rule { display: none !important; }
.pn-h .pn-more, .pn-h .pn-aux, .pn-h > .seg { margin-left: auto; }

/* ---------- LOGO ---------- */
.bar-in { height: 64px; }
.brand { position: relative; gap: 12px; align-self: stretch; padding-right: 6px; }
.brand-em { width: 50px; height: 54px; margin-top: 4px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.brand-tx { display: grid; line-height: 1; align-self: center; }
.brand-tx b { white-space: nowrap; display: flex; align-items: center; gap: 7px; font: 600 10.5px var(--f-disp); letter-spacing: .42em; color: #9aa6b1; }
.brand-tx b::before { content: ""; width: 14px; height: 2px; background: var(--red); }
.brand-tx strong { margin-top: 2px; font: 700 31px/.9 var(--f-disp); letter-spacing: .16em;
  background: linear-gradient(180deg, #ffffff 0%, #e9edf1 48%, #a9b3bc 52%, #f3f5f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-s2 { white-space: nowrap; align-self: center; margin-top: 14px; padding: 2px 6px; font: 600 10px var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: #ff8193; border: 1px solid rgba(255, 129, 147, .45); }
.nav a.on::after { bottom: -14px; }
.ftr-brand svg { width: 30px; height: 32px; }

/* ---------- APRESENTAÇÃO ---------- */
.hero { position: relative; height: 392px; margin: 0 4px; overflow: hidden; color: #e9edf1; background: #0d1116; isolation: isolate;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.hero-art { position: absolute; z-index: -2; top: -210px; right: -40px; width: 700px; height: 860px;
  background: url("../../imgs/hero-art.jpg") 50% 0 / 700px auto no-repeat; transform-origin: 62% 40%; animation: heroZoom 38s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07) translateX(-12px); } }
/* escurece a esquerda (texto), segura o vermelho na direita e fecha embaixo */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #0d1116 0%, #0d1116 30%, rgba(13, 17, 22, .86) 44%, rgba(13, 17, 22, .25) 66%, rgba(13, 17, 22, 0) 80%),
    linear-gradient(0deg, #0d1116 0%, rgba(13, 17, 22, .65) 22%, rgba(13, 17, 22, 0) 46%),
    radial-gradient(120% 90% at 100% 0%, rgba(13, 17, 22, 0) 40%, rgba(13, 17, 22, .5) 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--red) 0 34%, rgba(211, 18, 44, .25) 34%); }
.hero-in { position: relative; z-index: 1; width: 470px; padding: 40px 0 0 40px; }
.hero-st { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--f-body); color: #6fe0a6; }
.hero-st i { width: 7px; height: 7px; border-radius: 50%; background: #2fd07d; box-shadow: 0 0 0 0 rgba(47, 208, 125, .55); animation: beat 2.2s infinite; }
.hero h1 { margin: 14px 0 14px; font: 600 50px/.94 var(--f-disp); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.hero h1 span { display: block; margin-top: 6px; font-size: 32px; letter-spacing: .06em; color: #ff3b52; }
.hero p { margin: 0 0 22px; max-width: 420px; font-size: 13.5px; line-height: 1.7; color: #aeb8c2; }
.hero p b, .hero p strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: 10px; }
.btn-line { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.btn-line:hover { color: var(--ink); background: #fff; }

.hero-bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 3px; display: grid; grid-template-columns: 1.2fr 1.5fr .9fr .9fr; height: 74px;
  background: rgba(13, 17, 22, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, .08); }
@media (pointer: coarse) {
  .hero-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 17, 22, .9); }
  .hero-st i { animation: none; box-shadow: 0 0 0 3px rgba(47, 208, 125, .2); }
}
.hb-cell { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 22px; min-width: 0; }
.hb-cell + .hb-cell { border-left: 1px solid rgba(255, 255, 255, .08); }
.hb-cell span { font: 500 11.5px var(--f-body); color: #8f9ba6; }
.hb-cell strong { font: 600 21px/1.05 var(--f-disp); letter-spacing: .04em; text-transform: uppercase; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-cell b { font: 700 24px/1 var(--f-mono); color: #fff; font-variant-numeric: tabular-nums; }
.hb-on { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding-left: 40px; }
.hb-on b { font: 600 44px/1 var(--f-disp); color: #fff; letter-spacing: .01em; }
.hb-on span { max-width: 90px; font-size: 12px; line-height: 1.3; color: #aeb8c2; }
.hb-cd b { color: #ff6a7e; }

@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  .hero-art { animation-duration: 120s; }
  .hero-st i { animation-duration: 5s; }
}

/* ---------- PRÓXIMOS EVENTOS + BOLÃO lado a lado ---------- */
.duo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bl-tall { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 22px 22px 20px; overflow: hidden; isolation: isolate;
  color: #e9edf1; background: #0d1116; border: 0; border-left: 0; }
.bl-tall::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../../imgs/hero-art.jpg") 50% 36% / 420px auto no-repeat; opacity: .35; }
.bl-tall::before { z-index: 2; }
.bl-tall .bn-ic { width: 46px; height: 46px; color: #f0c76b; background: rgba(255, 255, 255, .06); }
.bl-tall .bn-tx { margin-top: 18px; }
.bl-tall .bn-tx small { color: #ff8193; }
.bl-tall .bn-tx strong { margin: 6px 0 6px; font-size: 26px; color: #fff; }
.bl-tall .bn-tx span { white-space: normal; font-size: 13px; line-height: 1.5; color: #aeb8c2; }
.bl-tall .bn-cd { justify-items: start; margin: auto 0 16px; padding-top: 18px; }
.bl-tall .bn-cd small { color: #8f9ba6; }
.bl-tall .bn-cd b { font-size: 30px; color: #fff; }
.bl-tall .bn-go { align-self: stretch; justify-content: center; height: 42px; font-size: 14px; }
.bl-tall:hover .bn-go { background: var(--red-2); }

/* barra: cabe logo maior + menu + botão Jogar */
.bar-in { gap: 14px; }
.nav a { padding: 8px 5px; font-size: 14.5px; letter-spacing: .06em; }
.nav a.on::after { left: 5px; right: 5px; }
.brand-s2 { display: none; }
.hero-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }

/* jogadores online no meio do banner, no céu vermelho ao lado da torre */
.hero-bar { grid-template-columns: 1.6fr 1fr 1fr; }
.hero-bar .hb-ev { padding-left: 40px; }
.hero-on { position: absolute; z-index: 1; left: 640px; top: 54px; width: 300px; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.hero-on::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 360px; height: 230px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(13, 17, 22, .62), rgba(13, 17, 22, .28) 60%, rgba(13, 17, 22, 0)); }
.ho-live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; font: 600 12px var(--f-disp); letter-spacing: .22em; text-transform: uppercase; color: #fff;
  background: rgba(211, 18, 44, .85); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.ho-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: hoPulse 1.6s ease-in-out infinite; }
@keyframes hoPulse { 50% { opacity: .25; } }
.hero-on b { margin-top: 6px; font: 600 112px/.92 var(--f-disp); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 28px rgba(255, 59, 82, .75), 0 0 2px rgba(255, 255, 255, .6), 0 6px 22px rgba(0, 0, 0, .65); }
.ho-lbl { position: relative; margin-top: 6px; padding-top: 9px; font: 600 15px var(--f-disp); letter-spacing: .26em; text-transform: uppercase; color: #ffd0d6; }
.ho-lbl::before { content: ""; position: absolute; left: 50%; top: 0; width: 64px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #ff3b52, transparent); }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .ho-live i { animation-duration: 5s; } }