@font-face { font-family: "Comic"; src: url("/extracted_src/assets/main/fonts/3530_HVD%20Comic%20Serif.ttf") format("truetype"); font-display: swap; }

:root {
    --noche: #0b1722;
    --azul: #0f2a3d;
    --azul-2: #154263;
    --azul-3: #1a4565;
    --azul-4: #2b5f86;
    --claro: #eaf6ff;
    --apagado: #a9c8de;
    --tenue: #7b9bb4;
    --oro: #ffd93b;
    --oro-claro: #ffe466;
    --oro-hondo: #e0b400;
    --oro-borde: #8a6a00;
    --cesped: #3f9a3f;
    --cesped-claro: #5fb457;
    --cesped-hondo: #2c6f2e;
    --cielo: #8fd0ff;
    --rojo: #d9453a;
    --ok: #58c04a;
    --aviso: #f5a300;
    --bl-h: 56px;
    --bl-total: calc(var(--bl-h) + 3px);
    --bl-sans: "Trebuchet MS", Verdana, "Segoe UI", sans-serif;
    --bl-display: "Comic", "Trebuchet MS", sans-serif;
    --bl-sombra: 0 14px 34px rgba(2, 10, 20, 0.5);
}

.bl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bl-skip { position: absolute; left: 12px; top: -64px; z-index: 300; padding: 9px 16px; border-radius: 10px; background: var(--oro); color: var(--azul); font-weight: 700; text-decoration: none; }
.bl-skip:focus { top: 8px; }
.bl-ico { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }

.bl-header {
    position: relative; z-index: 60; flex: none; color: var(--claro); font: 16px/1.4 var(--bl-sans);
    background: linear-gradient(180deg, var(--azul-2) 0%, var(--azul) 64%, #0c2233 100%);
    border-bottom: 3px solid var(--oro);
    box-shadow: 0 3px 0 var(--noche), 0 10px 24px rgba(2, 10, 20, 0.45);
}
.bl-header *, .bl-header *::before, .bl-header *::after { box-sizing: border-box; }
.bl-header--fixed { position: fixed; top: 0; left: 0; right: 0; }
.bl-header--sticky { position: sticky; top: 0; }
.bl-header__in { max-width: 1920px; height: var(--bl-h); margin: 0 auto; padding: 0 14px; display: flex; align-items: center; gap: 10px; }
.bl-header :focus-visible, .bl-foot :focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.bl-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 4px 6px 4px 0; color: inherit; text-decoration: none; border-radius: 10px; }
.bl-emblem { width: 31px; height: 36px; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4)); }
.bl-wordmark {
    font-family: var(--bl-display); font-size: 27px; line-height: 1; letter-spacing: 0.06em; color: var(--oro);
    -webkit-text-stroke: 0.13em var(--noche); paint-order: stroke fill; text-shadow: 0 0.07em 0 var(--noche);
}

.bl-nav { display: flex; align-items: center; flex: none; gap: 2px; margin-right: auto; }
.bl-nav a, .bl-nav button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 12px;
    border: 0; border-radius: 10px; background: transparent; color: var(--apagado); font: 700 0.95rem/1 var(--bl-sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bl-nav a:hover, .bl-nav button:hover { color: var(--claro); background: rgba(255, 255, 255, 0.08); }
.bl-nav [aria-current="page"] { color: var(--azul); background: var(--oro); box-shadow: 0 2px 0 var(--oro-borde); }
.bl-nav [aria-current="page"]:hover { color: var(--azul); background: var(--oro-claro); }
.bl-badge-n {
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--rojo); color: #fff;
    font: 700 0.7rem/19px var(--bl-sans); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--azul);
}
.bl-badge-n b { font-weight: 700; }
.bl-nav .bl-badge-n { position: absolute; top: -2px; right: -3px; }
.bl-menu .bl-badge-n { margin-left: auto; box-shadow: none; }

.bl-hud { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
.bl-res { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.bl-res li {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 6px; border-radius: 17px; white-space: nowrap;
    background: #07131d; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--claro); font: 700 0.92rem/1 var(--bl-sans); font-variant-numeric: tabular-nums;
}
.bl-res .bl-ico { width: 24px; height: 24px; }
.bl-res b { min-width: 2ch; text-align: right; font-weight: 700; }
.bl-res li[data-pulse="up"] { animation: bl-up 0.8s ease; }
.bl-res li[data-pulse="down"] { animation: bl-down 0.8s ease; }
@keyframes bl-up { 0% { box-shadow: 0 0 0 0 rgba(88, 192, 74, 0.9); } 100% { box-shadow: 0 0 0 9px rgba(88, 192, 74, 0); } }
@keyframes bl-down { 0% { box-shadow: 0 0 0 0 rgba(217, 69, 58, 0.8); } 100% { box-shadow: 0 0 0 9px rgba(217, 69, 58, 0); } }

.bl-tools { display: flex; align-items: center; flex: none; gap: 8px; }
.bl-icon-btn, .bl-pop > summary.bl-pop__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 9px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: var(--claro); font: 700 0.84rem/1 var(--bl-sans); letter-spacing: 0.03em; text-decoration: none;
}
.bl-icon-btn:hover, .bl-pop > summary.bl-pop__btn:hover, .bl-pop[open] > summary.bl-pop__btn { background: rgba(255, 255, 255, 0.15); }
.bl-icon-btn .bl-ico { width: 20px; height: 20px; }
[data-when="off"] { display: none; }
[aria-pressed="true"] > [data-when="on"] { display: none; }
[aria-pressed="true"] > [data-when="off"] { display: block; }
[data-bl-sound][aria-pressed="true"] { color: #ffb4ac; }
.bl-flag { width: 22px; height: 15px; flex: none; border-radius: 3px; }

.bl-conn {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--apagado); font: 700 0.78rem/1 var(--bl-sans); white-space: nowrap;
}
.bl-conn__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(88, 192, 74, 0.22); }
.bl-conn[data-state="slow"] { color: #ffe0a0; }
.bl-conn[data-state="slow"] .bl-conn__dot { background: var(--aviso); box-shadow: 0 0 0 3px rgba(245, 163, 0, 0.25); }
.bl-conn[data-state="off"] { color: #ffb4ac; border-color: rgba(217, 69, 58, 0.55); }
.bl-conn[data-state="off"] .bl-conn__dot { background: var(--rojo); box-shadow: 0 0 0 3px rgba(217, 69, 58, 0.28); }

.bl-pop { position: relative; }
.bl-pop > summary { list-style: none; }
.bl-pop > summary::-webkit-details-marker { display: none; }
.bl-pop > summary .bl-chev { width: 15px; height: 15px; transition: transform 0.15s; }
.bl-pop[open] > summary .bl-chev { transform: rotate(180deg); }
.bl-pop__panel {
    position: absolute; right: 0; top: calc(100% + 11px); z-index: 80; min-width: min(272px, calc(100vw - 20px)); padding: 8px; color: var(--claro);
    background: linear-gradient(180deg, var(--azul-2), var(--azul)); border: 2px solid var(--oro); border-radius: 14px; box-shadow: 0 5px 0 var(--noche), var(--bl-sombra);
}
.bl-pop__panel a, .bl-pop__panel button {
    display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--claro);
    font: 600 0.92rem/1.2 var(--bl-sans); text-align: left; text-decoration: none; cursor: pointer;
}
.bl-pop__panel a:hover, .bl-pop__panel button:hover, .bl-pop__panel a:focus-visible, .bl-pop__panel button:focus-visible { background: rgba(255, 255, 255, 0.1); outline-offset: -3px; }
.bl-pop__panel .bl-ico { width: 18px; height: 18px; color: var(--apagado); }
.bl-pop__panel [aria-current="true"], .bl-pop__panel [aria-current="page"] { background: rgba(255, 217, 59, 0.14); }
.bl-pop__panel .bl-check { margin-left: auto; color: var(--oro); }
.bl-pop__panel form { margin: 0; }
.bl-pop__panel hr { height: 1px; margin: 6px 4px; border: 0; background: rgba(255, 255, 255, 0.14); }
.bl-menu__danger, .bl-menu__danger .bl-ico { color: #ffb4ac !important; }
.bl-menu__ver { margin: 4px 12px 2px; color: var(--tenue); font-size: 0.74rem; }
.bl-menu__narrow { display: none; }
.bl-menu__langs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 6px; }
.bl-menu__langs a { width: auto; min-height: 32px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.16); gap: 7px; font-size: 0.82rem; }
.bl-menu__langs a[aria-current="true"] { border-color: var(--oro); }
.bl-menu__label { margin: 6px 12px 2px; color: var(--tenue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.bl-avatar {
    display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--oro);
    background: var(--azul-4); color: #fff; font: 400 0.95rem/1 var(--bl-display); text-transform: uppercase;
}
.bl-pop > summary.bl-account { height: 40px; padding: 0 10px 0 5px; border-radius: 20px; gap: 8px; position: relative; }
.bl-account__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 0.9rem/1 var(--bl-sans); letter-spacing: 0; text-transform: none; }
.bl-account__dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); border: 2px solid var(--azul); }
.bl-menu__who { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.bl-menu__who .bl-avatar { width: 42px; height: 42px; font-size: 1.2rem; }
.bl-menu__who div b { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-menu__who div span { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tenue); font-size: 0.8rem; }

.bl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 2px solid var(--oro); background: transparent; color: var(--oro);
    font: 400 1rem/1 var(--bl-display); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.bl-btn:hover { background: rgba(255, 217, 59, 0.12); }
.bl-btn--gold { background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, #f0c400); color: var(--azul); border-color: var(--oro-borde); box-shadow: 0 3px 0 var(--oro-borde); }
.bl-btn--gold:hover { background: linear-gradient(180deg, #fff0a0, var(--oro-claro) 55%, var(--oro)); }
.bl-btn--gold:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--oro-borde); }
.bl-guest { display: flex; align-items: center; gap: 8px; flex: none; }

.bl-toasts { position: fixed; top: calc(var(--bl-total) + 12px); right: 12px; z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 24px)); pointer-events: none; font: 15px/1.4 var(--bl-sans); }
.bl-toast {
    pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 12px; color: var(--claro);
    background: linear-gradient(180deg, var(--azul-2), var(--azul)); border: 2px solid var(--oro); box-shadow: 0 4px 0 var(--noche), var(--bl-sombra); animation: bl-in 0.22s ease-out;
}
.bl-toast--bad { border-color: var(--rojo); }
.bl-toast--ok .bl-toast__dot { background: var(--ok); }
.bl-toast--bad .bl-toast__dot { background: var(--rojo); }
.bl-toast__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--oro); }
.bl-toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bl-toast button { flex: none; min-height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: inherit; font: 700 0.82rem/1 var(--bl-sans); cursor: pointer; }
.bl-toast button:hover { background: rgba(255, 255, 255, 0.2); }
.bl-toast.is-leaving { opacity: 0; transform: translateX(14px); transition: opacity 0.18s ease, transform 0.18s ease; }
@keyframes bl-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.bl-foot { background: linear-gradient(180deg, var(--azul), var(--noche)); border-top: 3px solid var(--oro); color: var(--apagado); font: 14px/1.5 var(--bl-sans); }
.bl-foot__in { max-width: 1080px; margin: 0 auto; padding: 22px 20px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.bl-foot__brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.bl-foot__brand .bl-emblem { width: 24px; height: 28px; }
.bl-foot__brand .bl-wordmark { font-size: 20px; }
.bl-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 auto 0 0; padding: 0; list-style: none; }
.bl-foot a { color: var(--oro); font-weight: 700; text-decoration: none; }
.bl-foot a:hover { text-decoration: underline; }
.bl-foot p { margin: 0; width: 100%; font-size: 13px; color: var(--tenue); }

@media (max-width: 1439px) {
    .bl-header--game .bl-nav__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .bl-nav a, .bl-nav button { padding: 0 10px; }
}
@media (max-width: 1179px) {
    .bl-conn__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .bl-conn { padding: 0 10px; }
    .bl-account__name { max-width: 90px; }
}
@media (max-width: 1039px) {
    .bl-account__name { display: none; }
    .bl-pop > summary.bl-account { padding: 0 8px 0 5px; }
}
@media (max-width: 899px) {
    .bl-header__in { padding: 0 10px; gap: 8px; }
    .bl-nav, .bl-tools > .bl-conn, .bl-tools > .bl-icon-btn, .bl-tools > .bl-pop--lang { display: none; }
    .bl-menu__narrow { display: block; }
    .bl-account__name { display: none; }
    .bl-pop > summary.bl-account { padding: 0 8px 0 5px; }
    .bl-hud { justify-content: flex-end; }
    .bl-header--guest .bl-nav, .bl-header--page .bl-nav, .bl-header--guest .bl-tools > .bl-pop--lang, .bl-header--page .bl-tools > .bl-pop--lang { display: flex; }
    .bl-header--guest .bl-nav, .bl-header--page .bl-nav { margin-right: auto; }
    .bl-header--page .bl-nav__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 560px) {
    :root { --bl-h: 52px; }
    .bl-wordmark { font-size: 23px; }
    .bl-emblem { width: 27px; height: 31px; }
    .bl-res { gap: 5px; }
    .bl-res li { height: 32px; padding: 0 10px 0 5px; font-size: 0.86rem; gap: 5px; }
    .bl-res .bl-ico { width: 22px; height: 22px; }
    .bl-header--guest .bl-nav, .bl-header--page .bl-nav { display: none; }
    .bl-btn { height: 36px; padding: 0 12px; font-size: 0.92rem; }
    .bl-header--guest .bl-btn { padding: 0 9px; font-size: 0.84rem; }
    .bl-header--guest .bl-guest [aria-current="page"], .bl-header--guest .bl-guest .bl-btn--sec { display: none; }
    .bl-pop__panel { right: -4px; }
    .bl-header--guest .bl-pop__panel { right: -4px; }
}
@media (max-width: 440px) {
    .bl-pop--lang > summary.bl-pop__btn > span { display: none; }
    .bl-pop--lang > summary.bl-pop__btn { padding: 0 8px; }
}
@media (max-width: 400px) {
    .bl-wordmark { font-size: 20px; }
    .bl-brand { gap: 6px; padding-right: 0; }
    .bl-res li { padding: 0 8px 0 4px; font-size: 0.8rem; }
    .bl-header__in { padding: 0 8px; gap: 6px; }
}
@media (max-width: 359px) {
    .bl-wordmark { display: none; }
}
@media (max-height: 480px) and (orientation: landscape) {
    :root { --bl-h: 44px; }
    .bl-emblem { width: 23px; height: 27px; }
    .bl-wordmark { font-size: 20px; }
    .bl-res li { height: 30px; }
    .bl-icon-btn, .bl-pop > summary.bl-pop__btn, .bl-nav a, .bl-nav button { height: 34px; }
    .bl-pop > summary.bl-account { height: 36px; }
    .bl-pop__panel { max-height: calc(100vh - 62px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .bl-header *, .bl-toast { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}