/* MU GAME, Hall da fama da Arena */
.hf-tabs { margin-bottom: 14px; }
.ar .hf-tabs .ar-rk-tab small { margin-left: 4px; font-weight: 500; opacity: .7; }
.hf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; transition: opacity .15s; }
.hf-grid.carregando { opacity: .45; }
.hf-c { position: relative; float: none; width: auto; min-width: 0; padding: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: linear-gradient(180deg, #0c1629, #070d18); box-shadow: inset 0 0 0 1px var(--line); }
.hf-c.novo { box-shadow: inset 0 0 0 1px rgba(255, 196, 64, .55), 0 0 30px -14px rgba(255, 196, 64, .7); }
.hf-c.novo::before { content: "Campeão mais recente"; position: absolute; z-index: 2; top: 10px; left: 10px; padding: 3px 8px; font: 700 10.5px var(--f-cond); letter-spacing: 1px; text-transform: uppercase; color: #2a1806; background: linear-gradient(180deg, #ffe08a, #e3b45e); }
.hf-palco { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; height: 270px; padding: 18px 8px 0;
  background: radial-gradient(55% 14% at 50% 90%, rgba(0, 200, 255, .3), transparent 72%), radial-gradient(70% 70% at 50% 55%, rgba(0, 200, 255, .1), transparent 70%); }
.hf-base { position: absolute; left: 18%; right: 18%; bottom: 14px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); pointer-events: none; }
.hf-foto { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 100%; display: grid; place-items: end center; }
.hf-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; }
.hf-foto .hf-cls { display: none; }
.hf-foto.sem3d { place-items: center; }
.hf-foto.sem3d .hf-cls { position: static; display: block; width: min(86px, 88%); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 200, 255, .45), 0 10px 30px -10px #000; }
.hf-foto.sem3d .hf-girando { display: none; }
.hf-girando { position: absolute; left: 50%; top: 45%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid rgba(0, 200, 255, .16); border-top-color: var(--gold); animation: hfGira .8s linear infinite; }
.hf-foto.pronta .hf-girando { display: none; }
@keyframes hfGira { to { transform: rotate(360deg); } }
.hf-c.time .hf-palco { gap: 0; }
.hf-c.time.n4 .hf-foto, .hf-c.time.n5 .hf-foto { margin: 0 -10px; }
.hf-txt { display: grid; align-content: start; gap: 4px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.hf-tipo { display: flex; align-items: center; gap: 6px; font: 600 10.5px var(--f-cond); letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-hi); }
.hf-tipo .i { color: var(--gold); }
.ar .hf-txt h3 { margin: 2px 0 0; font: 700 20px var(--f-display); letter-spacing: .03em; color: #fff; overflow-wrap: anywhere; }
.hf-txt h3 a, .hf-membros a { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.hf-txt h3 a:hover, .hf-membros a:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.hf-membros { margin: 0; font-size: 13.5px; color: var(--tx-2); }
.hf-ev { margin: 4px 0 0; font-size: 12.5px; color: var(--tx-3); }
.hf-ev a { color: var(--tx-2); }
.hf-premio { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12.5px; color: var(--gold-hi); }
.hf-vazio { grid-column: 1 / -1; padding: 26px; text-align: center; color: var(--tx-3); box-shadow: inset 0 0 0 1px var(--line-soft, rgba(255, 255, 255, .08)); }
.hf-pag { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--tx-3); }
.hf-pag:empty { display: none; }
.ar .hf-pag button:disabled { opacity: .4; cursor: default; }
.hf-palco-off { position: fixed; left: -10000px; top: 0; width: 340px; height: 420px; pointer-events: none; }
@media (max-width: 560px) { .hf-c.novo::before { content: "Mais recente"; top: 6px; left: 6px; padding: 2px 6px; font-size: 9.5px; } .hf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .hf-palco { height: 200px; } .ar .hf-txt h3 { font-size: 16px; } .hf-txt { padding: 10px 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .hf-girando { animation: none; } }