html, body { overscroll-behavior: none; }

:root {
    --topbar-height: 40px;
    --topbar-height-editor: 0px;
    --neon-cyan: #8dff9b;
    --neon-blue: #2fd06b;
    --panel-dark: rgba(7, 18, 10, 0.92);
    --panel-glow: rgba(86, 255, 138, 0.30);
    --cyan-soft: #b6ffbf;
    --cyan-strong: #dbffe0;
    --bg-main: #07110a;
    --bg-panel: #0c1b10;
    --border-soft: rgba(255, 255, 255, 0.08);
    --text-soft: #cfd6e4;
    --text-strong: #ffffff;
    --map-stroke: rgba(0, 0, 0, 0.95);
}

#app { width: 100%; height: 100%; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 18% 12%, rgba(96, 255, 146, 0.16) 0%, rgba(96, 255, 146, 0) 32%),
        radial-gradient(circle at 82% 10%, rgba(58, 204, 104, 0.14) 0%, rgba(58, 204, 104, 0) 34%),
        linear-gradient(180deg, rgba(6, 16, 9, 0.96) 0%, rgba(5, 14, 8, 0.92) 100%),
        url('/assets/img/branding/site-bg.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
 
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(118,255,152,0.08) 0%, rgba(5,18,8,0.30) 58%, rgba(2,8,4,0.56) 100%);
}

.site-watermark {
    position: absolute;
    right: clamp(10px, 1.4vw, 18px);
    bottom: clamp(10px, 1.6vw, 18px);
    z-index: 19;
    width: min(19%, clamp(86px, 10vw, 168px));
    min-width: 72px;
    max-width: 168px;
    opacity: 0.50;
    pointer-events: none;
    user-select: none;
}

.site-watermark img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none !important;
    transform-origin: bottom right !important;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 14px rgba(100, 255, 145, 0.10));
}

#topbar {
    position: relative;
    height: var(--topbar-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 10px 18px 8px;
    background:
        radial-gradient(circle at 18% -20%, rgba(138, 247, 255, 0.12) 0%, rgba(138, 247, 255, 0) 34%),
        radial-gradient(circle at 82% -45%, rgba(111, 123, 255, 0.10) 0%, rgba(111, 123, 255, 0) 36%),
        linear-gradient(180deg, rgba(4, 11, 24, 0.98) 0%, rgba(5, 12, 24, 0.94) 100%);
    border-bottom: 1px solid rgba(140, 238, 255, 0.18);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), inset 0 -1px 0 rgba(255,255,255,0.03), 0 0 42px rgba(111, 123, 255, 0.08);
    backdrop-filter: blur(20px);
}

#topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(103, 223, 255, 0.6) 50%, transparent 100%);
    pointer-events: none;
}

.topbar-left, .topbar-center, .topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar-left {
    justify-content: flex-start;
    flex-wrap: nowrap;
}

#lastUpdateBtn {
    min-width: 168px;
}

.topbar-center {
    position: relative;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}

.topbar-right {
    justify-content: flex-end;
}

.topbar-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border: 1px solid rgba(112, 199, 255, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(7, 17, 34, 0.86) 0%, rgba(5, 12, 24, 0.72) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 34px rgba(0,0,0,0.28), 0 0 26px rgba(77,184,255,0.08);
    backdrop-filter: blur(22px);
}

.topbar-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(44vw, 420px);
    padding: 10px 18px 8px;
    border-radius: 24px;
    border: 1px solid rgba(111, 214, 255, 0.22);
    background:
        radial-gradient(circle at 50% 0%, rgba(118, 230, 255, 0.20) 0%, rgba(118, 230, 255, 0) 62%),
        linear-gradient(180deg, rgba(9, 22, 43, 0.90) 0%, rgba(5, 14, 28, 0.78) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 28px rgba(0,0,0,0.26), 0 0 34px rgba(68, 191, 255, 0.10);
    overflow: hidden;
}

.topbar-brand::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.03);
    pointer-events: none;
}

.topbar-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(134, 239, 255, 0.16) 50%, transparent 80%);
    transform: translateX(-155%);
    animation: brandSweep 9s linear infinite;
    pointer-events: none;
}

.topbar-brand img {
    position: relative;
    display: block;
    height: 50px;
    width: auto;
    max-width: min(40vw, 360px);
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(123, 225, 255, 0.10)) drop-shadow(0 0 18px rgba(123, 225, 255, 0.06));
    animation: brandFloat 6s ease-in-out infinite;
}

.topbar-tab, .topbar-link, .topbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1px solid rgba(120, 205, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(22, 35, 63, 0.92) 0%, rgba(10, 20, 39, 0.9) 100%);
    color: #e8f8ff;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 22px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(114,227,255,0.04);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.topbar-tab::before, .topbar-link::before, .topbar-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.035);
    pointer-events: none;
}

.topbar-tab::after, .topbar-link::after, .topbar-btn::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(166,239,255,0.75), transparent);
    opacity: .6;
    pointer-events: none;
}

.topbar-tab > span, .topbar-link > span, .topbar-btn > span {
    position: relative;
    z-index: 1;
}

.topbar-tab:hover, .topbar-link:hover, .topbar-btn:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(146, 225, 255, 0.38);
    background: linear-gradient(180deg, rgba(31, 51, 87, 0.99) 0%, rgba(12, 24, 44, 0.95) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 16px 34px rgba(0, 0, 0, 0.28), 0 0 28px rgba(84, 213, 255, 0.18);
}

.topbar-tab:hover::before, .topbar-link:hover::before, .topbar-btn:hover::before {
    border-color: rgba(160, 233, 255, 0.10);
}

.topbar-tab:hover::after, .topbar-link:hover::after, .topbar-btn:hover::after {
    animation: buttonSweep 1.4s linear infinite;
}

.topbar-tab.is-active {
    color: #f6feff;
    border-color: rgba(154, 234, 255, 0.54);
    background:
        radial-gradient(circle at 50% 0%, rgba(136,242,255,0.22) 0%, rgba(136,242,255,0) 68%),
        linear-gradient(180deg, rgba(38, 63, 102, 0.96) 0%, rgba(14, 29, 52, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 34px rgba(0, 0, 0, 0.26), 0 0 34px rgba(107, 214, 255, 0.22);
}

.topbar-link {
    min-width: 230px;
    justify-content: center;
    text-align: center;
    color: #dffaff;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(21, 35, 63, 0.95) 0%, rgba(10, 20, 39, 0.9) 100%);
}

.topbar-btn {
    font-weight: 800;
}

.topbar-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5dffb4;
    box-shadow: 0 0 0 4px rgba(93, 255, 180, 0.08), 0 0 18px rgba(93, 255, 180, 0.45);
}

.topbar-status-label {
    color: rgba(216, 244, 255, 0.84);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.history-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    color: rgba(225, 247, 255, 0.78);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: linear-gradient(180deg, rgba(18, 34, 56, 0.54) 0%, rgba(10, 18, 34, 0.46) 100%);
    border: 1px solid rgba(123, 225, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 20px rgba(106,222,255,0.06);
    backdrop-filter: blur(14px);
}

.topbar-panels {
    position: fixed;
    top: calc(var(--topbar-height) + 10px);
    left: 18px;
    right: 18px;
    z-index: 40;
    pointer-events: none;
}

.topbar-panels.has-open-panel {
    pointer-events: auto;
}

.topbar-panel {
    max-width: 460px;
}

.topbar-panel-card {
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(111, 230, 255, 0.18);
    background: linear-gradient(180deg, rgba(7, 16, 31, 0.78) 0%, rgba(8, 16, 34, 0.64) 100%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.34), 0 0 40px rgba(72, 196, 255, 0.12);
    backdrop-filter: blur(20px);
}

.topbar-panel-kicker {
    color: var(--cyan-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.topbar-panel-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}

.topbar-panel-card p {
    margin: 0;
    color: rgba(220, 234, 245, 0.82);
    line-height: 1.55;
}

.hidden { display: none !important; }

@keyframes brandFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

@keyframes brandSweep {
    0% { transform: translateX(-155%); }
    100% { transform: translateX(155%); }
}

@keyframes buttonSweep {
    0% { left: 12px; right: 88%; opacity: 0.18; }
    50% { left: 18%; right: 18%; opacity: 0.85; }
    100% { left: 88%; right: 12px; opacity: 0.12; }
}

body.editor-mode {
    --topbar-height: var(--topbar-height-editor);
}

body.editor-mode .site-watermark {
    opacity: 0.18;
    width: clamp(110px, 12vw, 190px);
}

body.editor-mode #mapPage {
    height: 100%;
}

body.editor-mode #mapFrame {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    border-radius: 18px;
}

#mapPage {
    width: 100%;
    height: calc(100% - var(--topbar-height));
    background:
        radial-gradient(circle at center, rgba(41, 61, 102, 0.18) 0%, rgba(11, 16, 32, 0.08) 55%),
        linear-gradient(180deg, rgba(11, 16, 32, 0.46) 0%, rgba(8, 12, 24, 0.6) 100%);
}

#mapViewport {
    position: relative;
    touch-action: none;
    overscroll-behavior: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
}

#mapFrame {
    position: absolute;
    touch-action: none;
    overscroll-behavior: none;
    left: 50%;
    top: 50%;
    width: calc(100vw - 24px);
    height: calc(100vh - var(--topbar-height) - 24px);
    max-width: 1800px;
    max-height: 1400px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255,255,255,0.04);
    background: #0f172a;
}

#mapFrame::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    pointer-events: none;
    z-index: 20;
}

.map-controls {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-control-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(13, 24, 43, 0.86) 0%, rgba(9, 17, 31, 0.86) 100%);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,0.24);
    backdrop-filter: blur(12px);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.map-control-btn:hover {
    background: linear-gradient(180deg, rgba(21, 38, 67, 0.94) 0%, rgba(10, 22, 40, 0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 28px rgba(0,0,0,0.28), 0 0 18px rgba(84, 213, 255, 0.12);
    transform: translateY(-1px);
}

.map-control-reset {
    font-size: 20px;
}

#world {
    position: absolute;
    touch-action: none;
    left: 0;
    top: 0;
    width: 3132px;
    height: 4096px;
    transform-origin: 0 0;
    background: transparent;
}

#tilesLayer, #symbolsLayer, #numbersLayer, #logosLayer, #mapSvg {
    position: absolute;
    left: 0;
    top: 0;
}

#tilesLayer, #symbolsLayer, #numbersLayer, #logosLayer {
    width: 3132px;
    height: 4096px;
}

#tilesLayer {
    z-index: 1;
    overflow: hidden;
    background: #0f172a;
}

/* Mantém os tiles antigos cobrindo o novo mundo em resolução cheia */
#tilesLayer .map-tile {
    image-rendering: auto;
    -webkit-user-drag: none;
}

.map-number-pill,
.map-number-text {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.map-tile {
    position: absolute;
    display: block;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

#mapSvg {
    z-index: 2;
    width: 3132px;
    height: 4096px;
    display: block;
}

#symbolsLayer {
    z-index: 3;
    pointer-events: none;
}

#numbersLayer {
    z-index: 4;
    pointer-events: none;
}

#logosLayer {
    z-index: 5;
    pointer-events: none;
}

.regiao {
    touch-action: manipulation;
    fill: rgba(190,190,190,0.35);
    stroke: var(--map-stroke);
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill 0.15s ease;
}

#labels { pointer-events: none; }

.node-label {
    fill: #ffffff;
    font-size: 36px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.45);
    stroke-width: 4px;
}

.map-logo {
    touch-action: manipulation;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}

.map-logo img {
    pointer-events: none;
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}

.map-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(12, 16, 28, 0.94);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.map-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}


#mapFrame {
    cursor: grab;
}

#mapFrame.is-dragging {
    cursor: grabbing;
}


#mapFrame {
    cursor: grab;
    touch-action: none;
}

#mapFrame.is-dragging {
    cursor: grabbing;
}

@media (max-width: 900px) {
    :root {
        --mobile-top-gap: 12px;
        --future-sidebar-space: 12px;
    }

    #mapViewport {
        padding: 0;
    }

    #mapFrame {
        left: 50%;
        top: calc(50% + 2px);
        width: calc(100vw - var(--future-sidebar-space));
        height: calc(100vh - var(--topbar-height) - var(--mobile-top-gap));
        max-height: none;
        transform: translate(-50%, -50%);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: none;
    }

    .map-logo {
        touch-action: manipulation;
        z-index: 5;
        display: block;
    }

    .map-logo img {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        display: block;
    }
}


@media (max-width: 520px) {
    .map-logo img {
        filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
    }
}

@media (max-width: 768px) {
    .site-watermark {
        right: 10px;
        bottom: 10px;
        width: min(22%, clamp(64px, 16vw, 108px));
        min-width: 58px;
        opacity: 0.50;
    }
}
@media (max-width: 980px) {
    #topbar {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--topbar-height);
        align-items: stretch;
        gap: 10px;
        padding: 10px 12px 12px;
    }

    .topbar-left,
    .topbar-center,
    .topbar-right {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .topbar-left {
        order: 2;
        flex-wrap: wrap;
    }

    .topbar-center {
        order: 1;
    }

    .topbar-right {
        order: 3;
        justify-content: center;
    }

    .topbar-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .topbar-brand {
        min-width: 0;
        width: min(100%, 380px);
        padding: 10px 14px 8px;
    }

    .topbar-brand img {
        height: 48px;
        max-width: min(88vw, 340px);
    }

    .topbar-link {
        min-width: min(100%, 340px);
    }

    .topbar-status-dot,
    .topbar-status-label {
        display: none !important;
    }
}

.topbar-panel-ranking {
    max-width: 620px;
}

.ranking-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 0% 0%, rgba(83, 182, 255, 0.14) 0%, rgba(83, 182, 255, 0) 34%),
        radial-gradient(circle at 100% 0%, rgba(118, 95, 255, 0.14) 0%, rgba(118, 95, 255, 0) 38%),
        linear-gradient(180deg, rgba(8, 13, 26, 0.96) 0%, rgba(10, 17, 31, 0.94) 100%);
    border: 1px solid rgba(120, 208, 255, 0.14);
    box-shadow: 0 22px 54px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ranking-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 23px;
    border: 1px solid rgba(255,255,255,0.05);
    pointer-events: none;
}

.ranking-shell {
    display: grid;
    gap: 16px;
}

.ranking-shell-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.ranking-shell-title {
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f4fbff;
}

.ranking-shell-caption {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(178, 214, 235, 0.58);
}

.ranking-board {
    display: grid;
    gap: 14px;
}

.ranking-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 214, 102, 0.20);
    background: linear-gradient(135deg, rgba(255, 199, 87, 0.10) 0%, rgba(90, 228, 255, 0.08) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 28px rgba(0,0,0,0.18);
}

.ranking-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 20px;
    background: linear-gradient(180deg, #fff0b8 0%, #ffc24a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 22px rgba(0,0,0,0.24);
}

.ranking-hero-main {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.ranking-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(189, 224, 243, 0.66);
}

.ranking-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ranking-hero-logo {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    border: 1px solid rgba(122, 210, 255, 0.14);
    background: rgba(10, 18, 32, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ranking-hero-logo img,
.ranking-logo img {
    width: 64%;
    height: 64%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.22));
}

.ranking-hero-logo span,
.ranking-logo span {
    font-size: 18px;
    font-weight: 900;
    color: #dffaff;
}

.ranking-hero-name {
    min-width: 0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-hero-sub {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(210, 230, 242, 0.74);
}

.ranking-hero-score {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

.ranking-hero-value {
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    color: #9cf7ff;
}

.ranking-hero-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(189, 224, 243, 0.64);
}

.ranking-list {
    display: grid;
    gap: 10px;
}

.ranking-row {
    position: relative;
    display: grid;
    grid-template-columns: 52px 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(120, 208, 255, 0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.025) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ranking-row:hover {
    transform: translateY(-1px);
    border-color: rgba(120, 208, 255, 0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 24px rgba(0,0,0,0.20);
}

.ranking-row::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(117, 214, 255, 0.05) 0%, rgba(117, 214, 255, 0) 38%);
}

.ranking-row.is-top-1 { border-color: rgba(255, 214, 102, 0.20); }
.ranking-row.is-top-2 { border-color: rgba(180, 214, 235, 0.16); }
.ranking-row.is-top-3 { border-color: rgba(255, 176, 118, 0.16); }

.ranking-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 36px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #9eeeff;
    background: rgba(10, 18, 32, 0.82);
    border: 1px solid rgba(122, 210, 255, 0.10);
}

.ranking-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(122, 210, 255, 0.12);
    background: rgba(10, 18, 32, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ranking-main {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.ranking-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ranking-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    color: #f6fbff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ranking-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(182, 217, 235, 0.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.ranking-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(126, 225, 255, 0.07);
    overflow: hidden;
}

.ranking-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(114,116,255,0.88) 0%, rgba(110,224,255,0.95) 100%);
    box-shadow: 0 0 14px rgba(108,220,255,0.20);
}

.ranking-side {
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: right;
}

.ranking-score {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 900;
    color: #9cf7ff;
}

.ranking-score span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(182, 217, 235, 0.65);
}

.ranking-share {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(182, 217, 235, 0.65);
}

.ranking-loading {
    padding: 18px 4px 6px;
    color: rgba(220, 234, 245, 0.82);
}

@media (max-width: 900px) {
    .topbar-panel-ranking {
        max-width: none;
    }

    .ranking-shell-caption {
        display: none;
    }

    .ranking-hero {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .ranking-hero-score {
        justify-items: start;
        text-align: left;
    }

    .ranking-row {
        grid-template-columns: 44px 36px minmax(0, 1fr);
        padding: 11px 12px;
        gap: 9px;
    }

    .ranking-pos {
        width: 44px;
        height: 32px;
        font-size: 11px;
    }

    .ranking-logo {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .ranking-side {
        grid-column: 3;
        justify-items: start;
        text-align: left;
    }

    .ranking-score {
        font-size: 15px;
    }
}


/* 20260309 ranking refinement */
.topbar-left {
    justify-content: flex-start;
}

.topbar-nav {
    justify-content: flex-start;
}

.ranking-board {
    max-height: min(68vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ranking-board::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.ranking-hero {
    position: sticky;
    top: 0;
    z-index: 3;
}

.ranking-list {
    padding-top: 2px;
}

@media (max-width: 900px) {
    .topbar-left,
    .topbar-center,
    .topbar-right {
        justify-content: flex-start;
    }

    .topbar-right {
        justify-content: flex-end;
    }

    .topbar-nav {
        justify-content: flex-start;
    }

    .ranking-board {
        max-height: min(62vh, 500px);
    }
}


/* 20260309 top3 unified ranking cards */
.ranking-board {
    max-height: min(68vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ranking-board::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.ranking-list {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.ranking-row {
    min-height: 74px;
}

.ranking-row.is-top-1 {
    border-color: rgba(255, 214, 102, 0.30);
    background: linear-gradient(180deg, rgba(255, 214, 102, 0.10) 0%, rgba(255,255,255,0.03) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.20), 0 0 20px rgba(255, 205, 86, 0.08);
}

.ranking-row.is-top-2 {
    border-color: rgba(198, 214, 228, 0.28);
    background: linear-gradient(180deg, rgba(198, 214, 228, 0.11) 0%, rgba(255,255,255,0.03) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.18), 0 0 18px rgba(198, 214, 228, 0.07);
}

.ranking-row.is-top-3 {
    border-color: rgba(210, 138, 91, 0.28);
    background: linear-gradient(180deg, rgba(210, 138, 91, 0.12) 0%, rgba(255,255,255,0.03) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.18), 0 0 18px rgba(210, 138, 91, 0.07);
}

.ranking-row.is-top-1 .ranking-pos {
    color: #1c1502;
    background: linear-gradient(180deg, #fff2bf 0%, #ffc74d 100%);
    border-color: rgba(255, 214, 102, 0.38);
}

.ranking-row.is-top-2 .ranking-pos {
    color: #15202a;
    background: linear-gradient(180deg, #edf5fb 0%, #b8cad9 100%);
    border-color: rgba(198, 214, 228, 0.40);
}

.ranking-row.is-top-3 .ranking-pos {
    color: #25140d;
    background: linear-gradient(180deg, #efc2a3 0%, #c98254 100%);
    border-color: rgba(210, 138, 91, 0.42);
}

.ranking-row.is-top-1 .ranking-logo {
    border-color: rgba(255, 214, 102, 0.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px rgba(255, 205, 86, 0.08);
}

.ranking-row.is-top-2 .ranking-logo {
    border-color: rgba(198, 214, 228, 0.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px rgba(198, 214, 228, 0.07);
}

.ranking-row.is-top-3 .ranking-logo {
    border-color: rgba(210, 138, 91, 0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px rgba(210, 138, 91, 0.07);
}

.ranking-row.is-top-1 .ranking-score { color: #ffd567; }
.ranking-row.is-top-2 .ranking-score { color: #d8e4ee; }
.ranking-row.is-top-3 .ranking-score { color: #e6a375; }

.ranking-row.is-top-1 .ranking-bar span {
    background: linear-gradient(90deg, rgba(255, 186, 72, 0.92) 0%, rgba(255, 223, 126, 0.96) 100%);
    box-shadow: 0 0 14px rgba(255, 205, 86, 0.22);
}

.ranking-row.is-top-2 .ranking-bar span {
    background: linear-gradient(90deg, rgba(174, 191, 204, 0.92) 0%, rgba(224, 236, 245, 0.96) 100%);
    box-shadow: 0 0 14px rgba(198, 214, 228, 0.18);
}

.ranking-row.is-top-3 .ranking-bar span {
    background: linear-gradient(90deg, rgba(187, 111, 69, 0.92) 0%, rgba(233, 170, 129, 0.96) 100%);
    box-shadow: 0 0 14px rgba(210, 138, 91, 0.18);
}

@media (max-width: 900px) {
    .ranking-board {
        max-height: min(62vh, 500px);
    }

    .ranking-row {
        min-height: 66px;
    }
}


/* 20260310 topbar refinement */
#topbar {
    height: 46px;
    gap: 14px;
    padding: 0 16px;
    overflow: visible;
    background:
        linear-gradient(180deg, rgba(6, 18, 46, 0.985) 0%, rgba(4, 13, 32, 0.97) 56%, rgba(2, 8, 22, 0.985) 100%);
    border-bottom: 1px solid rgba(118, 225, 255, 0.16);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.26),
        inset 0 -1px 0 rgba(255,255,255,0.03),
        inset 0 1px 0 rgba(130, 220, 255, 0.06);
}

#topbar::before {
    inset: auto 18px 0 18px;
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(118, 230, 255, 0.12) 12%,
            rgba(118, 230, 255, 0.95) 30%,
            rgba(170, 244, 255, 0.98) 50%,
            rgba(118, 230, 255, 0.95) 70%,
            rgba(118, 230, 255, 0.12) 88%,
            transparent 100%);
    box-shadow:
        0 0 10px rgba(98, 223, 255, 0.48),
        0 0 24px rgba(98, 223, 255, 0.22);
    animation: topbarNeonSweep 3.8s linear infinite;
}

#topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%),
        repeating-linear-gradient(180deg, rgba(120, 220, 255, 0.045) 0 1px, rgba(0,0,0,0) 1px 3px),
        linear-gradient(90deg, rgba(120,220,255,0) 0%, rgba(120,220,255,0.05) 50%, rgba(120,220,255,0) 100%);
    opacity: .5;
    mix-blend-mode: screen;
}

.topbar-left,
.topbar-right {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
}

.topbar-center {
    position: relative;
    z-index: 2;
    pointer-events: none;
    gap: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.topbar-nav {
    position: relative;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
}

.topbar-brand {
    width: min(42vw, 560px);
    min-width: min(42vw, 560px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.topbar-brand::before,
.topbar-brand::after,
.topbar-nav::before,
.topbar-nav::after {
    display: none;
}

.topbar-brand img {
    display: block;
    width: 100%;
    height: 58px;
    max-width: min(42vw, 560px);
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 14px rgba(120, 224, 255, 0.12));
    animation: brandFloat 7s ease-in-out infinite;
}

.topbar-tab,
.topbar-link,
.topbar-btn {
    min-height: 30px;
    height: 30px;
    padding: 0 15px;
    border: 1px solid rgba(126, 214, 255, 0.18);
    border-radius: 0;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    background:
        linear-gradient(180deg, rgba(23, 48, 98, 0.82) 0%, rgba(10, 24, 52, 0.78) 54%, rgba(7, 18, 40, 0.84) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(130, 225, 255, 0.02),
        0 8px 16px rgba(0,0,0,0.16),
        0 0 0 1px rgba(54, 119, 181, 0.12);
    backdrop-filter: blur(10px);
    color: rgba(236, 245, 255, 0.9);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(72, 180, 255, 0.10);
}

.topbar-tab::before,
.topbar-link::before,
.topbar-btn::before {
    display: block;
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: inherit;
    background:
        linear-gradient(90deg, rgba(120, 225, 255, 0.00) 0%, rgba(120, 225, 255, 0.10) 50%, rgba(120, 225, 255, 0.00) 100%);
    border: 1px solid rgba(255,255,255,0.035);
    opacity: 1;
    transition: opacity .2s ease, border-color .2s ease, background .2s ease;
}

.topbar-tab::after,
.topbar-link::after,
.topbar-btn::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(170, 233, 255, 0.98) 50%, transparent 100%);
    opacity: .38;
    transform: scaleX(.72);
    transition: opacity .22s ease, transform .22s ease;
}

.topbar-tab:hover,
.topbar-link:hover,
.topbar-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(120, 220, 255, 0.42);
    background:
        linear-gradient(180deg, rgba(32, 65, 124, 0.90) 0%, rgba(11, 28, 58, 0.85) 56%, rgba(8, 22, 46, 0.90) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 0 1px rgba(128, 226, 255, 0.05),
        0 0 0 1px rgba(125, 214, 255, 0.12),
        0 10px 20px rgba(0,0,0,0.17),
        0 0 16px rgba(86, 198, 255, 0.14);
    color: #ffffff;
}

.topbar-tab:hover::before,
.topbar-link:hover::before,
.topbar-btn:hover::before,
.topbar-tab.is-active::before {
    border-color: rgba(165, 237, 255, 0.08);
    background:
        linear-gradient(90deg, rgba(120, 225, 255, 0.00) 0%, rgba(120, 225, 255, 0.17) 50%, rgba(120, 225, 255, 0.00) 100%);
}

.topbar-tab:hover::after,
.topbar-link:hover::after,
.topbar-btn:hover::after,
.topbar-tab.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.topbar-tab.is-active {
    color: #ffffff;
    border-color: rgba(130, 228, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(40, 82, 150, 0.94) 0%, rgba(13, 34, 71, 0.88) 58%, rgba(8, 23, 46, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 0 0 1px rgba(128, 226, 255, 0.05),
        0 0 0 1px rgba(125, 214, 255, 0.13),
        0 10px 20px rgba(0,0,0,0.19),
        0 0 20px rgba(88, 200, 255, 0.18);
}

.topbar-link {
    min-width: 0;
    padding-right: 13px;
    padding-left: 13px;
    color: rgba(228, 240, 252, 0.84);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

#lastUpdateBtn {
    min-width: 0;
}

.history-indicator {
    margin-top: -1px;
}

@keyframes topbarNeonSweep {
    0% {
        filter: hue-rotate(0deg);
        transform: translateX(-1.5%) scaleX(.96);
        opacity: .82;
    }
    50% {
        transform: translateX(1.5%) scaleX(1.02);
        opacity: 1;
    }
    100% {
        filter: hue-rotate(10deg);
        transform: translateX(-1.5%) scaleX(.96);
        opacity: .82;
    }
}

@media (max-width: 980px) {
    #topbar {
        height: auto;
        min-height: 92px;
        padding: 10px 12px 8px;
    }

    .topbar-center {
        order: 1;
        pointer-events: none;
    }

    .topbar-brand {
        width: min(100%, 420px);
        min-width: 0;
    }

    .topbar-brand img {
        height: 62px;
        max-width: min(92vw, 440px);
    }

    .topbar-nav {
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .topbar-tab,
    .topbar-link,
    .topbar-btn {
        font-size: 10px;
        height: 30px;
        min-height: 30px;
        padding: 0 10px;
    }
}

@media (max-width: 640px) {
    .topbar-brand img {
        height: 54px;
        max-width: min(92vw, 320px);
    }

    .topbar-nav {
        gap: 6px;
    }

    .topbar-tab,
    .topbar-link,
    .topbar-btn {
        letter-spacing: 0.06em;
        padding: 0 9px;
    }
}

/* =====================================
   AJUSTE FINO DOS BOTÕES DA TOPBAR
   (não altera logo nem barra)
===================================== */

#topbar .topbar-btn,
#topbar .topbar-tab,
#topbar .topbar-link,
#topbar button,
#topbar a{

    transform: translateY(-7px);

}



/* =====================================
   CONTROLE DE ESCALA DO WATERMARK
   altera SOMENTE watermark-logo.png
===================================== */

img[src*="watermark-logo"]{

    transform: none !important;

    transform-origin: bottom right !important;

    pointer-events: none;

}

.map-symbol,
.map-number {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.map-symbol { touch-action: none; }
.map-symbol img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(0,0,0,.55));
}

.map-number { touch-action: none; z-index: 6; }
.map-number-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    transform: scale(var(--numero-scale, 1));
    transform-origin: center center;
}
.map-number-text {
    color: #111;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}
.map-number-image {
    display: block;
    max-width: 64px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

#mapViewport,
#mapFrame,
#world,
#app {
    touch-action: none;
}


/* FORÇAR contorno das regiões do mapa */
svg path,
svg polygon,
svg polyline,
svg .regiao,
svg .territorio,
svg [id^="territorio"],
svg [id^="regiao"] {
    stroke: #000 !important;           /* contorno preto */
    stroke-width: 2.5px !important;      /* espessura da linha */
    vector-effect: non-scaling-stroke !important; /* não aumenta com zoom */
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
}

/* =====================================================
   NÚMERO VIA PNG: mantém logo/cores do mapa e remove a pílula
   somente quando a região usa numero_imagem_url
   ===================================================== */
.map-number-pill.has-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: 64px !important;
    min-height: 40px !important;
    width: 64px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.map-number-pill.has-image .map-number-image {
    display: block !important;
    width: 64px !important;
    height: 40px !important;
    max-width: 64px;
    max-height: 40px;
    object-fit: contain;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.map-number-pill.has-image .map-number-text {
    display: none !important;
}

/* esconde os textos originais do SVG para não duplicar números */
#mapSvg text {
    display: none;
}


#mapPage[hidden],
#rulesPage[hidden] {
    display: none !important;
}

.rules-page {
    height: calc(100% - var(--topbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
}

.rules-shell {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.rules-sidebar {
    position: sticky;
    top: 18px;
}

.rules-sidebar-card,
.rules-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(108, 255, 156, 0.18);
    background:
        linear-gradient(180deg, rgba(7, 22, 16, 0.94) 0%, rgba(5, 18, 13, 0.90) 100%),
        radial-gradient(circle at 0% 0%, rgba(82, 255, 155, 0.10) 0%, rgba(82, 255, 155, 0) 38%),
        radial-gradient(circle at 100% 0%, rgba(154, 255, 122, 0.08) 0%, rgba(154, 255, 122, 0) 40%);
    box-shadow:
        0 24px 60px rgba(0,0,0,0.34),
        0 0 34px rgba(84, 255, 155, 0.10),
        inset 0 0 0 1px rgba(196, 255, 214, 0.03);
    backdrop-filter: blur(20px);
}

.rules-sidebar-card::before,
.rules-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(214,255,226,0.04);
    pointer-events: none;
}

.rules-sidebar-card::after,
.rules-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(170, 255, 196, 0.024) 0px,
            rgba(170, 255, 196, 0.024) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: screen;
    opacity: 0.28;
}

.rules-sidebar-card {
    padding: 24px;
}

.rules-sidebar-kicker,
.rules-kicker {
    color: #8fffb0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.rules-sidebar-card h1 {
    margin: 10px 0 8px;
    font-size: 30px;
    line-height: 1.02;
    color: #f2fff4;
}

.rules-sidebar-subtitle {
    margin: 0 0 20px;
    color: rgba(223, 245, 229, 0.78);
    line-height: 1.55;
}

.rules-anchor-nav {
    display: grid;
    gap: 10px;
}

.rules-anchor-nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(108, 255, 156, 0.14);
    background: linear-gradient(180deg, rgba(14, 36, 24, 0.76) 0%, rgba(8, 21, 15, 0.66) 100%);
    color: #effff1;
    text-decoration: none;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(204,255,221,0.03);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.rules-anchor-nav a:hover {
    transform: translateY(-2px);
    border-color: rgba(132, 255, 176, 0.42);
    background: linear-gradient(180deg, rgba(18, 48, 31, 0.82) 0%, rgba(10, 28, 19, 0.72) 100%);
    box-shadow: 0 14px 28px rgba(0,0,0,0.20), 0 0 20px rgba(84, 255, 155, 0.12);
}

.rules-content {
    display: grid;
    gap: 18px;
}

.rules-card {
    padding: 24px 26px;
}

.rules-hero h2,
.rules-card h3 {
    margin: 8px 0 0;
    font-size: 34px;
    line-height: 1.05;
    color: #f4fff5;
}

.rules-card h3 {
    font-size: 28px;
}

.rules-card h4 {
    margin: 0 0 10px;
    font-size: 19px;
    color: #f6fff7;
}

.rules-card p,
.rules-card li {
    color: rgba(226, 242, 230, 0.90);
    line-height: 1.72;
}

.rules-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.rules-highlight-grid,
.rules-action-grid,
.rules-example-list,
.rules-faq-list {
    display: grid;
    gap: 14px;
}

.rules-highlight-grid {
    margin-top: 18px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.rules-highlight-grid article,
.rules-action-grid article,
.rules-example-list article,
.rules-faq-list article {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(108, 255, 156, 0.12);
    background: linear-gradient(180deg, rgba(13, 33, 23, 0.84) 0%, rgba(8, 20, 15, 0.70) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.rules-highlight-grid span {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(176, 236, 193, 0.66);
}

.rules-highlight-grid strong,
.rules-example-list strong,
.rules-action-grid strong,
.rules-faq-list h4 {
    display: block;
    color: #f7fff8;
}

.rules-subsection + .rules-subsection {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(186,255,211,0.07);
}

.rules-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rules-badge-grid span,
.rules-note {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(108, 255, 156, 0.18);
    background: linear-gradient(180deg, rgba(16, 39, 28, 0.88) 0%, rgba(9, 22, 16, 0.82) 100%);
    color: #f1fff3;
    box-shadow: 0 0 18px rgba(84,255,155,0.06);
}

.rules-note {
    margin-top: 14px;
    border-radius: 18px;
}

.rules-list,
.rules-ordered-list {
    margin: 14px 0 0;
    padding-left: 20px;
}

.rules-ordered-list li + li,
.rules-list li + li {
    margin-top: 8px;
}

.rules-example-list {
    margin: 16px 0;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rules-action-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rules-faq-list article h4 {
    margin-bottom: 10px;
    font-size: 18px;
}

@media (max-width: 1080px) {
    .rules-shell {
        grid-template-columns: 1fr;
    }

    .rules-sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .rules-page {
        padding: 12px;
    }

    .rules-sidebar-card,
    .rules-card {
        border-radius: 22px;
        padding: 20px;
    }

    .rules-sidebar-card h1,
    .rules-hero h2,
    .rules-card h3 {
        font-size: 24px;
    }
}


/* ===== Freedom green theme overrides (colors only, no layout changes) ===== */
:root {
    --neon-cyan: #9dff8f;
    --neon-blue: #4cff9a;
    --panel-dark: rgba(7, 17, 11, 0.88);
    --panel-glow: rgba(109, 255, 158, 0.22);
    --cyan-soft: #b9ffb0;
    --cyan-strong: #dbffd1;
    --bg-main: #061008;
    --bg-panel: #0a140c;
    --border-soft: rgba(177, 255, 194, 0.10);
    --text-soft: #d7ead8;
    --text-strong: #f3fff2;
}
html, body { background: #071009; }
body::before {
    background:
        linear-gradient(180deg, rgba(4, 12, 6, 0.84) 0%, rgba(5, 13, 8, 0.74) 100%),
        url('/assets/img/branding/site-bg.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}
body::after {
    background:
      linear-gradient(rgba(120,255,120,0.04) 1px, transparent 1px),
      radial-gradient(circle at center, rgba(110,255,145,0.05) 0%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.48) 100%);
    background-size: 100% 3px, auto;
    mix-blend-mode: screen, normal;
}
.site-watermark img {
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 18px rgba(100, 255, 145, 0.14));
}
#topbar {
    background:
        radial-gradient(circle at 18% -20%, rgba(132, 255, 159, 0.09) 0%, rgba(132, 255, 159, 0) 34%),
        radial-gradient(circle at 82% -45%, rgba(87, 255, 149, 0.08) 0%, rgba(87, 255, 149, 0) 36%),
        linear-gradient(180deg, rgba(5, 16, 8, 0.58) 0%, rgba(6, 18, 10, 0.42) 100%);
    border-bottom: 1px solid rgba(140, 255, 170, 0.16);
    box-shadow: 0 18px 50px rgba(0,0,0,0.34), inset 0 -1px 0 rgba(255,255,255,0.02), 0 0 36px rgba(95,255,155,0.05);
}
#topbar::before {
    background: linear-gradient(90deg, transparent 0%, rgba(136, 255, 160, 0.56) 50%, transparent 100%);
}
.topbar-brand, .topbar-nav { background: transparent; box-shadow: none; }
.topbar-brand img {
    transform: none !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 14px rgba(132, 255, 161, 0.12));
}
.topbar-tab, .topbar-link, .topbar-btn {
    border-color: rgba(139, 255, 170, 0.18);
    background: linear-gradient(180deg, rgba(18, 47, 24, 0.82) 0%, rgba(9, 28, 14, 0.78) 54%, rgba(7, 20, 11, 0.84) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(160,255,191,0.02), 0 8px 16px rgba(0,0,0,0.16), 0 0 0 1px rgba(57,145,82,0.12);
    color: rgba(240,255,240,0.92);
    text-shadow: 0 0 10px rgba(128, 255, 156, 0.12);
}
.topbar-tab::before, .topbar-link::before, .topbar-btn::before {
    background: linear-gradient(90deg, rgba(120, 255, 160, 0.00) 0%, rgba(120, 255, 160, 0.10) 50%, rgba(120, 255, 160, 0.00) 100%);
}
.topbar-tab::after, .topbar-link::after, .topbar-btn::after {
    background: linear-gradient(90deg, transparent 0%, rgba(195, 255, 204, 0.98) 50%, transparent 100%);
}
.topbar-tab:hover, .topbar-link:hover, .topbar-btn:hover, .topbar-tab.is-active {
    border-color: rgba(150, 255, 179, 0.34);
    background: linear-gradient(180deg, rgba(32, 77, 39, 0.90) 0%, rgba(11, 34, 17, 0.85) 56%, rgba(8, 24, 12, 0.90) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(160,255,191,0.05), 0 0 0 1px rgba(120,255,160,0.10), 0 10px 20px rgba(0,0,0,0.17), 0 0 16px rgba(95,255,135,0.10);
    color: #fffef6;
}
.topbar-tab:hover::before, .topbar-link:hover::before, .topbar-btn:hover::before, .topbar-tab.is-active::before {
    border-color: rgba(216, 255, 219, 0.08);
    background: linear-gradient(90deg, rgba(120, 255, 160, 0.00) 0%, rgba(120, 255, 160, 0.17) 50%, rgba(120, 255, 160, 0.00) 100%);
}
.ranking-card, .topbar-panel-ranking {
    background:
        radial-gradient(circle at 0% 0%, rgba(110,255,145,0.11) 0%, rgba(110,255,145,0) 34%),
        radial-gradient(circle at 100% 0%, rgba(180,255,131,0.09) 0%, rgba(180,255,131,0) 38%),
        linear-gradient(180deg, rgba(8, 18, 10, 0.96) 0%, rgba(10, 18, 12, 0.94) 100%);
    border-color: rgba(148,255,168,0.14);
    box-shadow: 0 22px 54px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04), 0 0 28px rgba(92,255,138,0.08);
}
.ranking-shell-title, .ranking-title, .ranking-card-title, .panel-title { color: #f4fff1; }
[class*="ranking"] .bar, .ranking-progress-fill { box-shadow: 0 0 12px rgba(120,255,160,0.18); }
.map-shell, .map-frame, #mapPane, #mapStage {
    box-shadow: 0 0 0 1px rgba(144,255,170,0.08), 0 20px 44px rgba(0,0,0,0.32);
}
.map-zoom-btn, .map-control-btn, .calendar-btn {
    border-color: rgba(145,255,172,0.16) !important;
    background: linear-gradient(180deg, rgba(22,48,28,0.92) 0%, rgba(10,24,14,0.92) 100%) !important;
    color: #efffee !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22), 0 0 14px rgba(110,255,150,0.08) !important;
}


.regiao.is-claiming{
  --claim-color-rgb: 130,255,170;
  animation: claimPulseZone 1.45s ease-in-out infinite;
  stroke: rgb(var(--claim-color-rgb)) !important;
  stroke-width: 3.2px !important;
}

@keyframes claimPulseZone{
  0%{
    stroke-width:3px;
    filter:drop-shadow(0 0 6px rgba(var(--claim-color-rgb), .30)) drop-shadow(0 0 12px rgba(var(--claim-color-rgb), .14));
  }
  50%{
    stroke-width:5.6px;
    filter:drop-shadow(0 0 12px rgba(var(--claim-color-rgb), .82)) drop-shadow(0 0 24px rgba(var(--claim-color-rgb), .44));
  }
  100%{
    stroke-width:3px;
    filter:drop-shadow(0 0 6px rgba(var(--claim-color-rgb), .30)) drop-shadow(0 0 12px rgba(var(--claim-color-rgb), .14));
  }
}


/* overlays do mapa ficam na frente visualmente, mas agem como a própria região */
.map-logo,
.map-number {
    z-index: 8;
}

.map-logo.is-claiming {
    animation: claimLogoPulse 1.45s ease-in-out infinite;
}

.map-logo.is-claiming img {
    filter:
        drop-shadow(0 0 6px rgba(var(--claim-color-rgb, 130,255,170), .42))
        drop-shadow(0 0 14px rgba(var(--claim-color-rgb, 130,255,170), .26));
}

.map-number.is-claiming .map-number-pill {
    box-shadow:
        0 4px 14px rgba(0,0,0,.28),
        0 0 0 1px rgba(var(--claim-color-rgb, 130,255,170), .32),
        0 0 18px rgba(var(--claim-color-rgb, 130,255,170), .30);
}

@keyframes claimLogoPulse{
    0%{
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 6px rgba(var(--claim-color-rgb, 130,255,170), .28));
    }
    50%{
        transform: translate(-50%, -50%) scale(1.08);
        filter: drop-shadow(0 0 12px rgba(var(--claim-color-rgb, 130,255,170), .75)) drop-shadow(0 0 24px rgba(var(--claim-color-rgb, 130,255,170), .35));
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 6px rgba(var(--claim-color-rgb, 130,255,170), .28));
    }
}

/* Escala do topbar-logo.png pelo centro */
img[src*="topbar-logo.png"]{
    transform: scale(3.5) !important; /* ajuste a escala aqui */
    transform-origin: center center !important;
}



/* 2026-03 public/mobile/layout refinements */
body.public-mode{
  overflow:hidden;
}
#topbar{
  position:sticky;
  top:0;
  z-index:1400;
}
#mapPage{
  height:calc(100dvh - var(--topbar-height) - 2px);
}
.rules-page{
  height:calc(100dvh - var(--topbar-height) - 2px);
  padding-top:12px;
}
.topbar-link{
  white-space:nowrap;
}
#lastUpdateBtn{
  min-width:220px;
}
@media (max-width: 980px){
  #topbar{
    position:sticky;
    top:0;
    z-index:1400;
    padding:10px 10px 12px;
  }
  .topbar-left,
  .topbar-center,
  .topbar-right{
    justify-content:center;
    align-items:center;
  }
  .topbar-nav{
    width:100%;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .topbar-tab,
  .topbar-link,
  .topbar-btn{
    min-height:40px;
    transform:none !important;
  }
  .topbar-link{
    width:min(100%, 460px);
    white-space:nowrap;
    padding-inline:18px;
  }
  #lastUpdateBtn{
    width:min(100%, 460px);
    min-width:0;
    font-size:12px;
  }
  #mapPage{
    height:calc(100dvh - 126px);
    min-height:calc(100dvh - 126px);
  }
  #mapViewport{
    height:100%;
  }
  #mapFrame{
    width:calc(100vw - 8px);
    height:calc(100dvh - 138px);
    max-width:none;
    max-height:none;
    border-radius:14px;
  }
  #mapFrame::before{
    inset:6px;
  }
  .rules-page{
    height:calc(100dvh - 126px);
    padding:12px 10px 18px;
    scroll-padding-top:12px;
  }
  .rules-sidebar-card{
    position:relative;
    z-index:1;
  }
}
@media (max-width: 640px){
  .topbar-tab{
    flex:1 1 calc(33.333% - 6px);
    min-width:96px;
  }
  .topbar-brand{
    width:min(100%, 360px);
    padding:8px 12px 6px;
  }
  .topbar-brand img{
    height:48px;
    max-width:min(88vw, 300px);
  }
  #lastUpdateBtn{
    width:100%;
    min-height:44px;
    font-size:11px;
    letter-spacing:.04em;
  }
  #mapFrame{
    width:100vw;
    height:calc(100dvh - 150px);
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .rules-page{
    padding-top:10px;
  }
}

/* rules links keep visible and inherit theme while selecting text on mobile */
.rules-anchor-nav a,
.rules-badge-grid span,
.rules-note{
  color:#effff1;
}

/* clean topbar vertical alignment */
#topbar .topbar-btn,
#topbar .topbar-tab,
#topbar .topbar-link,
#topbar button,
#topbar a{
  transform:none !important;
}

/* make update button text stay on one line */
.topbar-link,
#lastUpdateBtn{
  white-space:nowrap;
}

/* claim/faction region hover fill */
.regiao.is-claiming{
  --claim-color: rgba(120,255,160,.82);
  animation: claimBorderPulse 1.9s ease-in-out infinite, claimFillPulse 2.2s ease-in-out infinite;
}
@keyframes claimBorderPulse{
  0%{filter:drop-shadow(0 0 4px var(--claim-color));}
  50%{filter:drop-shadow(0 0 18px var(--claim-color));}
  100%{filter:drop-shadow(0 0 4px var(--claim-color));}
}
@keyframes claimFillPulse{
  0%{fill-opacity:.46;}
  50%{fill-opacity:.68;}
  100%{fill-opacity:.46;}
}


/* ===============================
   CONTROLES VISUAIS DAS REGIÕES EM REIVINDICAÇÃO
   AUMENTE/DIMINUA ESTES VALORES PARA AJUSTAR O EFEITO
   --claim-glow-min: brilho mínimo do glow
   --claim-glow-max: brilho máximo do glow
   --claim-pulse-start: espessura inicial do contorno
   --claim-pulse-end: espessura máxima do contorno
   --claim-fill-start: transparência inicial do preenchimento
   --claim-fill-end: transparência máxima do preenchimento
   --claim-logo-scale: quanto logo/número aumentam no pico
   =============================== */
:root{
  --claim-glow-min: 15px;
  --claim-glow-max: 400px;
  --claim-pulse-start: 3px;
  --claim-pulse-end: 100px;
  --claim-fill-start: .54;
  --claim-fill-end: 1.00;
  --claim-logo-scale: 1.08;
}

/* padronização geral do site público */
body.public-mode button,
body.public-mode .topbar-tab,
body.public-mode .topbar-link,
body.public-mode .map-control-btn,
body.public-mode .modal-close,
body.public-mode input,
body.public-mode select,
body.public-mode textarea{
  border-radius:16px;
  border:1px solid rgba(145,255,172,.18);
  color:#efffee;
}
body.public-mode input,
body.public-mode select,
body.public-mode textarea{
  background:linear-gradient(180deg, rgba(15,29,18,.92) 0%, rgba(9,19,11,.92) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(120,255,160,.04);
}
body.public-mode button,
body.public-mode .topbar-tab,
body.public-mode .topbar-link,
body.public-mode .map-control-btn{
  background:radial-gradient(circle at 50% 0%, rgba(122,255,146,.16) 0%, rgba(122,255,146,0) 68%), linear-gradient(180deg, rgba(22,44,25,.96) 0%, rgba(10,22,12,.94) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.24), 0 0 16px rgba(93,255,154,.10);
}
body.public-mode button:hover,
body.public-mode .topbar-tab:hover,
body.public-mode .topbar-link:hover,
body.public-mode .map-control-btn:hover,
body.public-mode input:hover,
body.public-mode select:hover,
body.public-mode textarea:hover,
body.public-mode input:focus,
body.public-mode select:focus,
body.public-mode textarea:focus{
  border-color:rgba(145,255,172,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(145,255,172,.08), 0 0 18px rgba(93,255,154,.12);
  outline:none;
}

/* números, logos e territórios no mesmo padrão de cursor */
.regiao,
.map-logo,
.map-number,
.map-number-pill,
.map-logo img{
  cursor:pointer;
}

/* efeito da facção reivindicante: preenchimento + glow + pulso na cor real */
.regiao.is-claiming{
  animation: claimFactionBorderPulse 1.9s ease-in-out infinite, claimFactionFillPulse 2.2s ease-in-out infinite;
  stroke: rgb(var(--claim-color-rgb, 120,255,160)) !important;
  stroke-width: var(--claim-pulse-start) !important;
}
@keyframes claimFactionBorderPulse{
  0%{
    stroke-width: var(--claim-pulse-start);
    filter: drop-shadow(0 0 var(--claim-glow-min) rgba(var(--claim-color-rgb, 120,255,160), .30)) drop-shadow(0 0 calc(var(--claim-glow-min) * 1.75) rgba(var(--claim-color-rgb, 120,255,160), .18));
  }
  50%{
    stroke-width: var(--claim-pulse-end);
    filter: drop-shadow(0 0 var(--claim-glow-max) rgba(var(--claim-color-rgb, 120,255,160), .72)) drop-shadow(0 0 calc(var(--claim-glow-max) * 1.6) rgba(var(--claim-color-rgb, 120,255,160), .32));
  }
  100%{
    stroke-width: var(--claim-pulse-start);
    filter: drop-shadow(0 0 var(--claim-glow-min) rgba(var(--claim-color-rgb, 120,255,160), .30)) drop-shadow(0 0 calc(var(--claim-glow-min) * 1.75) rgba(var(--claim-color-rgb, 120,255,160), .18));
  }
}
@keyframes claimFactionFillPulse{
  0%{ fill-opacity: var(--claim-fill-start); }
  50%{ fill-opacity: var(--claim-fill-end); }
  100%{ fill-opacity: var(--claim-fill-start); }
}
.map-logo.is-claiming,
.map-number.is-claiming{
  animation: claimOverlayPulse 1.9s ease-in-out infinite;
}
.map-logo.is-claiming img{
  filter: drop-shadow(0 0 8px rgba(var(--claim-color-rgb,120,255,160), .50)) drop-shadow(0 0 20px rgba(var(--claim-color-rgb,120,255,160), .30));
}
.map-number.is-claiming .map-number-pill{
  border-color: rgba(var(--claim-color-rgb,120,255,160), .45);
  box-shadow:0 8px 18px rgba(0,0,0,.28), 0 0 0 1px rgba(var(--claim-color-rgb,120,255,160), .34), 0 0 22px rgba(var(--claim-color-rgb,120,255,160), .34);
}
@keyframes claimOverlayPulse{
  0%{ transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 6px rgba(var(--claim-color-rgb,120,255,160), .26)); }
  50%{ transform: translate(-50%, -50%) scale(var(--claim-logo-scale)); filter: drop-shadow(0 0 16px rgba(var(--claim-color-rgb,120,255,160), .58)) drop-shadow(0 0 28px rgba(var(--claim-color-rgb,120,255,160), .26)); }
  100%{ transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 6px rgba(var(--claim-color-rgb,120,255,160), .26)); }
}


/* =========================
   REIVINDICACAO - CONTROLES
   ========================= */
:root{
  --claim-stroke-width: 3px;   /* aumenta/diminui a espessura da borda */
  --claim-glow-min: 8px;       /* brilho mínimo */
  --claim-glow-max: 300px;      /* brilho máximo */
  --claim-fill-start: 0.30;    /* transparência inicial do preenchimento */
  --claim-fill-end: 0.9;      /* transparência final do preenchimento */
  --claim-pulse-speed: 0.6s;   /* velocidade da pulsação */
}

/* aplique no path/polygon/g da regiao */
svg .reivindicando-claim{
  stroke: var(--faction-color) !important;
  stroke-width: var(--claim-stroke-width) !important;
  vector-effect: non-scaling-stroke;
  animation: claimPulse var(--claim-pulse-speed) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes claimPulse{
  0%{
    fill: color-mix(in srgb, var(--faction-color) calc(var(--claim-fill-start) * 100%), transparent) !important;
    filter:
      drop-shadow(0 0 var(--claim-glow-min) var(--faction-color))
      drop-shadow(0 0 calc(var(--claim-glow-min) / 2) var(--faction-color));
  }
  50%{
    fill: color-mix(in srgb, var(--faction-color) calc(var(--claim-fill-end) * 100%), transparent) !important;
    filter:
      drop-shadow(0 0 var(--claim-glow-max) var(--faction-color))
      drop-shadow(0 0 calc(var(--claim-glow-max) / 2) var(--faction-color))
      drop-shadow(0 0 calc(var(--claim-glow-max) * 1.3) var(--faction-color));
  }
  100%{
    fill: color-mix(in srgb, var(--faction-color) calc(var(--claim-fill-start) * 100%), transparent) !important;
    filter:
      drop-shadow(0 0 var(--claim-glow-min) var(--faction-color))
      drop-shadow(0 0 calc(var(--claim-glow-min) / 2) var(--faction-color));
  }
}

/* =====================================================
   AJUSTE FINAL - REIVINDICACAO VISUAL
   - remove caixa do numero-imagem
   - remove borda eletrica
   - reforca glow real no contorno da regiao
   ===================================================== */
:root{
  --claim-stroke-width-final: 2.5px;   /* aumente/diminua a espessura da borda */
  --claim-glow-near: 300px;           /* glow minimo */
  --claim-glow-far: 500px;            /* glow maximo */
  --claim-fill-opacity-start: .3;   /* transparencia inicial */
  --claim-fill-opacity-end: .75;     /* transparencia maxima */
  --claim-border-speed: 1.5s;        /* velocidade do contorno */
  --claim-fill-speed: 1.1s;          /* velocidade do preenchimento */
}

/* numero por imagem nunca ganha caixa quadrada */
.map-number-pill.has-image,
.map-number-pill.has-image:hover,
.map-number.is-claiming .map-number-pill.has-image,
.map-number.is-claiming .map-number-pill.has-image:hover{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.map-number-pill.has-image .map-number-image,
.map-number.is-claiming .map-number-pill.has-image .map-number-image{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* glow visivel no proprio numero-imagem, sem criar quadrado */
.map-number.is-claiming .map-number-pill.has-image .map-number-image{
  filter: drop-shadow(0 0 5px rgba(var(--claim-color-rgb,120,255,160), .42)) drop-shadow(0 0 12px rgba(var(--claim-color-rgb,120,255,160), .22));
}

/* remove efeitos antigos de borda eletrica */
.regiao.is-claiming{
  stroke: rgb(var(--claim-color-rgb, 120,255,160)) !important;
  stroke-width: var(--claim-stroke-width-final) !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
  animation: claimBorderGlowFinal var(--claim-border-speed) ease-in-out infinite, claimAreaPulseFinal var(--claim-fill-speed) ease-in-out infinite !important;
}

@keyframes claimBorderGlowFinal{
  0%{
    stroke-width: var(--claim-stroke-width-final);
    filter: drop-shadow(0 0 var(--claim-glow-near) rgba(var(--claim-color-rgb,120,255,160), .48)) drop-shadow(0 0 calc(var(--claim-glow-near) * 1.8) rgba(var(--claim-color-rgb,120,255,160), .22));
  }
  50%{
    stroke-width: calc(var(--claim-stroke-width-final) + 1.5px);
    filter: drop-shadow(0 0 var(--claim-glow-far) rgba(var(--claim-color-rgb,120,255,160), .88)) drop-shadow(0 0 calc(var(--claim-glow-far) * 1.8) rgba(var(--claim-color-rgb,120,255,160), .34));
  }
  100%{
    stroke-width: var(--claim-stroke-width-final);
    filter: drop-shadow(0 0 var(--claim-glow-near) rgba(var(--claim-color-rgb,120,255,160), .48)) drop-shadow(0 0 calc(var(--claim-glow-near) * 1.8) rgba(var(--claim-color-rgb,120,255,160), .22));
  }
}

@keyframes claimAreaPulseFinal{
  0%{ fill-opacity: var(--claim-fill-opacity-start); }
  50%{ fill-opacity: var(--claim-fill-opacity-end); }
  100%{ fill-opacity: var(--claim-fill-opacity-start); }
}

/* logo e numero acompanham a cor da faccao sem caixa */
.map-logo.is-claiming,
.map-number.is-claiming{
  animation: claimOverlayPulseFinal 1.65s ease-in-out infinite !important;
}

.map-logo.is-claiming img{
  filter: drop-shadow(0 0 7px rgba(var(--claim-color-rgb,120,255,160), .52)) drop-shadow(0 0 16px rgba(var(--claim-color-rgb,120,255,160), .26)) !important;
}

.map-number.is-claiming .map-number-pill:not(.has-image){
  border-color: rgba(var(--claim-color-rgb,120,255,160), .46) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.28), 0 0 0 1px rgba(var(--claim-color-rgb,120,255,160), .34), 0 0 22px rgba(var(--claim-color-rgb,120,255,160), .28) !important;
}

@keyframes claimOverlayPulseFinal{
  0%{ transform: translate(-50%, -50%) scale(1); }
  50%{ transform: translate(-50%, -50%) scale(1.06); }
  100%{ transform: translate(-50%, -50%) scale(1); }
}


/* 2026-03 mobile overlay/fixed panel fixes */
:root{
  --topbar-real-height: var(--topbar-height);
}
.topbar-panels{
  top: calc(var(--topbar-real-height) + 10px) !important;
  z-index: 1502 !important;
}
#modalBackdrop{ z-index: 1590 !important; }
#regionModal{ z-index: 1600 !important; }
.calendar-popup{ z-index: 1550 !important; }
@media (max-width: 980px){
  #topbar{ z-index: 1500 !important; }
  .topbar-panels{
    left: 10px !important;
    right: 10px !important;
    top: calc(var(--topbar-real-height) + 8px) !important;
  }
  .topbar-panel,
  .topbar-panel-ranking,
  .topbar-panel-card{
    max-width: none !important;
    width: 100% !important;
  }
  #mapPage,
  .rules-page{
    height: calc(100dvh - var(--topbar-real-height) - 6px) !important;
    min-height: calc(100dvh - var(--topbar-real-height) - 6px) !important;
  }
  #mapFrame{
    height: calc(100dvh - var(--topbar-real-height) - 18px) !important;
  }
}


/* 2026-03 final mobile zoom stability + clickable numbers */
.map-number,
.map-logo,
.regiao{
  cursor:pointer !important;
}

.map-number{
  pointer-events:auto !important;
}

#numbersLayer,
#logosLayer{
  pointer-events:none;
}

#numbersLayer .map-number,
#logosLayer .map-logo{
  pointer-events:auto;
}

@media (max-width: 980px){
  :root{
    --topbar-height: var(--topbar-real-height, 96px);
  }

  html, body{
    height:100%;
    overflow:hidden;
  }

  #app{
    height:100dvh;
    overflow:hidden;
  }

  #mapPage{
    height: calc(100dvh - var(--topbar-real-height, var(--topbar-height))) !important;
    min-height: calc(100dvh - var(--topbar-real-height, var(--topbar-height))) !important;
    overflow:hidden;
  }

  #mapViewport{
    height:100%;
    overflow:hidden;
  }

  #mapFrame{
    width: calc(100vw - 8px) !important;
    height: calc(100dvh - var(--topbar-real-height, var(--topbar-height)) - 2px) !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:14px !important;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    touch-action:none !important;
  }

  #regionModal{
    z-index: 1600 !important;
  }

  #regionModal.open{
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

/* histórico sem deslocar topbar */
#topbar {
  overflow: visible;
}

.topbar-center {
  position: relative;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
}

#historyIndicator,
.history-indicator {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  transform: translateX(-50%);
  margin-top: 0 !important;
  white-space: nowrap;
  z-index: 6;
  pointer-events: none;
}


/* =========================================
   AJUSTE MANUAL DA POSIÇÃO DOS BOTÕES DO TOPO
   ========================================= */

:root{
    --topbar-offset-y: 0px;          /* sobe/desce o bloco dos botões */
    --topbar-buttons-offset-y: -4.5px;  /* ajuste fino só dos botões */
    --topbar-update-offset-y: 0px;   /* ajuste fino do botão de atualização */
    --topbar-calendar-offset-y: 0px; /* ajuste fino do calendário */
}

/* bloco central / área dos menus */
.topbar-center,
.topbar-inner,
.topbar-content{
    position: relative;
    top: var(--topbar-offset-y);
}

/* botões principais */
.topbar-nav,
.topbar-menu,
.topbar-actions,
.topbar-center nav,
.topbar-center .menu,
.topbar-center .buttons{
    position: relative;
    top: var(--topbar-buttons-offset-y);
}

/* botão de atualização */
.topbar .update-btn,
.topbar .history-toggle,
.topbar .btn-update,
.topbar .toolbar-update{
    position: relative;
    top: var(--topbar-update-offset-y);
}

/* calendário */
.topbar .calendar-wrap,
.topbar .calendar-dropdown,
.topbar .calendar-panel,
.topbar .date-picker-wrap{
    position: relative;
    top: var(--topbar-calendar-offset-y);
}



@media (hover: none), (pointer: coarse) {
  .map-tooltip {
    display: none !important;
  }
}


/* ===============================
   REIVINDICAÇÃO ULTRA-PROFISSIONAL
   =============================== */
 :root{
  --claim-effects-enabled: 1;
  --claim-border-enabled: 1;
  --claim-fill-enabled: 1;
  --claim-logo-enabled: 1;
  --claim-number-enabled: 1;
  --claim-stroke-width-final: 2.9px;
  --claim-glow-near: 20px;
  --claim-glow-far: 46px;
  --claim-fill-glow-near: 10px;
  --claim-fill-glow-far: 24px;
  --claim-fill-opacity-start: .34;
  --claim-fill-opacity-end: .80;
  --claim-border-speed: 1.55s;
  --claim-fill-speed: 1.15s;
  --claim-logo-scale: 1.04;
  --claim-logo-glow: 18px;
  --claim-number-glow: 14px;
}

.regiao.is-claiming{
  stroke: rgb(var(--claim-color-rgb, 120,255,160)) !important;
  stroke-width: calc(var(--claim-stroke-width-final) * var(--claim-effects-enabled) * var(--claim-border-enabled)) !important;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill markers;
  animation:
    claimBorderGlowUltra var(--claim-border-speed) ease-in-out infinite,
    claimAreaPulseUltra var(--claim-fill-speed) ease-in-out infinite !important;
}

.map-logo.is-claiming img{
  filter:
    drop-shadow(0 0 calc(var(--claim-logo-glow) * .55 * var(--claim-logo-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .62))
    drop-shadow(0 0 calc(var(--claim-logo-glow) * var(--claim-logo-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .42));
}

.map-logo.is-claiming,
.map-number.is-claiming{
  animation: claimOverlayPulseUltra var(--claim-border-speed) ease-in-out infinite;
}

.map-number.is-claiming .map-number-pill,
.map-number.is-claiming .map-number-pill.has-image{
  border-color: rgba(var(--claim-color-rgb,120,255,160), .55);
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(var(--claim-color-rgb,120,255,160), calc(.38 * var(--claim-number-enabled) * var(--claim-effects-enabled))),
    0 0 calc(var(--claim-number-glow) * var(--claim-number-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .34);
}

.map-number.is-claiming .map-number-image{
  filter:
    drop-shadow(0 0 calc(var(--claim-number-glow) * .45 * var(--claim-number-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .58))
    drop-shadow(0 0 calc(var(--claim-number-glow) * var(--claim-number-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .28));
}

@keyframes claimBorderGlowUltra{
  0%{
    stroke-width: calc(var(--claim-stroke-width-final) * var(--claim-border-enabled) * var(--claim-effects-enabled));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-near) * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .50))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 1.8 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .22));
  }
  50%{
    stroke-width: calc((var(--claim-stroke-width-final) + .9px) * var(--claim-border-enabled) * var(--claim-effects-enabled));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-far) * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .95))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 1.9 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .40))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 2.4 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .18));
  }
  100%{
    stroke-width: calc(var(--claim-stroke-width-final) * var(--claim-border-enabled) * var(--claim-effects-enabled));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-near) * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .50))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 1.8 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .22));
  }
}

@keyframes claimAreaPulseUltra{
  0%{
    fill-opacity: calc(var(--claim-fill-opacity-start) * var(--claim-fill-enabled) * var(--claim-effects-enabled));
    filter:
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .30));
  }
  50%{
    fill-opacity: calc(var(--claim-fill-opacity-end) * var(--claim-fill-enabled) * var(--claim-effects-enabled));
    filter:
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .50))
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * 1.9 * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .18));
  }
  100%{
    fill-opacity: calc(var(--claim-fill-opacity-start) * var(--claim-fill-enabled) * var(--claim-effects-enabled));
    filter:
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .30));
  }
}

@keyframes claimOverlayPulseUltra{
  0%{ transform: translate(-50%, -50%) scale(1); }
  50%{ transform: translate(-50%, -50%) scale(var(--claim-logo-scale)); }
  100%{ transform: translate(-50%, -50%) scale(1); }
}


/* 2026-03 neon claim override - unified visible glow */
#mapSvg,
#mapSvg svg,
#mapSvg .regiao,
#mapSvg .territorio {
  overflow: visible;
}

:root{
  --claim-border-min-alpha: .62;
  --claim-border-max-alpha: .98;
  --claim-fill-min-alpha: .20;
  --claim-fill-max-alpha: .72;
}

.regiao.is-claiming{
  stroke: rgb(var(--claim-color-rgb, 120,255,160)) !important;
  stroke-width: max(1px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001))) !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
  paint-order: stroke fill markers;
  animation: claimRegionUltraUnified var(--claim-border-speed) ease-in-out infinite !important;
}

@keyframes claimRegionUltraUnified{
  0%{
    stroke-width: max(1px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    stroke-opacity: calc(var(--claim-border-min-alpha) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0));
    fill-opacity: calc(var(--claim-fill-opacity-start) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-near) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .58))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 2.1 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .24))
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .24));
  }
  50%{
    stroke-width: max(1.2px, calc((var(--claim-stroke-width-final) + 1.2px) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    stroke-opacity: calc(var(--claim-border-max-alpha) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0));
    fill-opacity: calc(var(--claim-fill-opacity-end) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-far) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .95))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 1.8 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .48))
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .55))
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * 1.8 * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .20));
  }
  100%{
    stroke-width: max(1px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    stroke-opacity: calc(var(--claim-border-min-alpha) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0));
    fill-opacity: calc(var(--claim-fill-opacity-start) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-near) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .58))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 2.1 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .24))
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .24));
  }
}

.map-logo.is-claiming,
.map-number.is-claiming{
  animation: claimOverlayPulseUltra var(--claim-border-speed) ease-in-out infinite !important;
}

.map-logo.is-claiming img{
  filter:
    drop-shadow(0 0 calc(var(--claim-logo-glow) * .75 * max(var(--claim-logo-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .82))
    drop-shadow(0 0 calc(var(--claim-logo-glow) * 1.45 * max(var(--claim-logo-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .38)) !important;
}

.map-number.is-claiming .map-number-pill:not(.has-image){
  border-color: rgba(var(--claim-color-rgb,120,255,160), calc(.72 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0))) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(var(--claim-color-rgb,120,255,160), calc(.52 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0))),
    0 0 calc(var(--claim-number-glow) * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .42) !important;
}

.map-number.is-claiming .map-number-image{
  filter:
    drop-shadow(0 0 calc(var(--claim-number-glow) * .65 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .78))
    drop-shadow(0 0 calc(var(--claim-number-glow) * 1.25 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .32)) !important;
}

/* Painel Efeitos - override final */
:root {
  --map-region-stroke-width: 2.5px;
}

#mapSvg,
#mapSvg svg,
#mapSvg g,
#mapSvg .svg-pan-zoom_viewport,
#mapSvg .svg-pan-zoom_viewport > svg {
  overflow: visible !important;
}

.regiao {
  stroke: var(--map-stroke) !important;
  stroke-width: var(--map-region-stroke-width) !important;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.regiao.is-claiming {
  stroke: rgb(var(--claim-color-rgb, 120,255,160)) !important;
  stroke-width: max(1.2px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001))) !important;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill markers;
  isolation: isolate;
  animation:
    claimBorderLedStrip var(--claim-border-speed) ease-in-out infinite,
    claimAreaPulseLed var(--claim-fill-speed) ease-in-out infinite !important;
}

@keyframes claimBorderLedStrip {
  0% {
    stroke-width: max(1.2px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    stroke-opacity: 0.96;
    filter:
      brightness(1.08)
      saturate(1.24)
      drop-shadow(0 0 calc(var(--claim-glow-near) * 0.28 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .95))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 0.62 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .88))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 1.15 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .54))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 0.55 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .24));
  }
  50% {
    stroke-width: max(1.5px, calc((var(--claim-stroke-width-final) + 1.35px) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    stroke-opacity: 1;
    filter:
      brightness(1.18)
      saturate(1.42)
      drop-shadow(0 0 calc(var(--claim-glow-near) * 0.36 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), 1))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 0.86 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .96))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 0.52 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .66))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 1.02 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .34));
  }
  100% {
    stroke-width: max(1.2px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    stroke-opacity: 0.96;
    filter:
      brightness(1.08)
      saturate(1.24)
      drop-shadow(0 0 calc(var(--claim-glow-near) * 0.28 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .95))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 0.62 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .88))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 1.15 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .54))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 0.55 * var(--claim-border-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .24));
  }
}

@keyframes claimAreaPulseLed {
  0% {
    fill-opacity: calc(var(--claim-fill-opacity-start) * var(--claim-fill-enabled) * var(--claim-effects-enabled));
    filter:
      brightness(1.04)
      saturate(1.14)
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * 0.55 * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .52))
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * 0.36 * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .16));
  }
  50% {
    fill-opacity: calc(var(--claim-fill-opacity-end) * var(--claim-fill-enabled) * var(--claim-effects-enabled));
    filter:
      brightness(1.14)
      saturate(1.26)
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * 0.88 * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .66))
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * 0.72 * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .24));
  }
  100% {
    fill-opacity: calc(var(--claim-fill-opacity-start) * var(--claim-fill-enabled) * var(--claim-effects-enabled));
    filter:
      brightness(1.04)
      saturate(1.14)
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * 0.55 * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .52))
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * 0.36 * var(--claim-fill-enabled) * var(--claim-effects-enabled)) rgba(var(--claim-color-rgb,120,255,160), .16));
  }
}


/* 2026-03 claim glow final real-working override */
#mapSvg,
#mapSvg svg,
#mapSvg .svg-pan-zoom_viewport,
#mapSvg .svg-pan-zoom_viewport > g,
#mapSvg .regiao{
  overflow: visible !important;
}

:root{
  --claim-effects-enabled: 1;
  --claim-border-enabled: 1;
  --claim-fill-enabled: 1;
  --claim-logo-enabled: 1;
  --claim-number-enabled: 1;
  --claim-stroke-width-final: 2.9px;
  --claim-glow-near: 36px;
  --claim-glow-far: 88px;
  --claim-fill-glow-near: 12px;
  --claim-fill-glow-far: 28px;
  --claim-fill-opacity-start: .28;
  --claim-fill-opacity-end: .82;
  --claim-border-speed: 1.55s;
  --claim-fill-speed: 1.15s;
  --claim-logo-scale: 1.04;
  --claim-logo-glow: 22px;
  --claim-number-glow: 18px;
}

.regiao.is-claiming{
  stroke: rgb(var(--claim-color-rgb, 120,255,160)) !important;
  stroke-width: max(1px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001))) !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
  paint-order: stroke fill markers !important;
  will-change: filter, fill-opacity, stroke-width;
  animation: claimRegionContourPulseReal var(--claim-border-speed) ease-in-out infinite !important;
}

@keyframes claimRegionContourPulseReal{
  0%,100%{
    stroke-opacity: calc(.78 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0));
    stroke-width: max(1px, calc(var(--claim-stroke-width-final) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    fill-opacity: calc(var(--claim-fill-opacity-start) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-near) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .74))
      drop-shadow(0 0 calc(var(--claim-glow-near) * 2.2 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .28))
      drop-shadow(0 0 calc(var(--claim-fill-glow-near) * 1.2 * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .18));
  }
  50%{
    stroke-opacity: calc(.99 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0));
    stroke-width: max(1.25px, calc((var(--claim-stroke-width-final) + 1.2px) * max(var(--claim-border-enabled), 0.001) * max(var(--claim-effects-enabled), 0.001)));
    fill-opacity: calc(var(--claim-fill-opacity-end) * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0));
    filter:
      drop-shadow(0 0 calc(var(--claim-glow-far) * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .98))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 1.85 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .56))
      drop-shadow(0 0 calc(var(--claim-glow-far) * 2.5 * max(var(--claim-border-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .20))
      drop-shadow(0 0 calc(var(--claim-fill-glow-far) * 1.4 * max(var(--claim-fill-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .20));
  }
}

.map-logo.is-claiming,
.map-number.is-claiming{
  animation: claimOverlayPulseUltra var(--claim-border-speed) ease-in-out infinite !important;
}

.map-logo.is-claiming img{
  filter:
    drop-shadow(0 0 calc(var(--claim-logo-glow) * .85 * max(var(--claim-logo-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .92))
    drop-shadow(0 0 calc(var(--claim-logo-glow) * 1.65 * max(var(--claim-logo-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .34)) !important;
}

.map-number.is-claiming .map-number-pill:not(.has-image){
  border-color: rgba(var(--claim-color-rgb,120,255,160), calc(.72 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0))) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(var(--claim-color-rgb,120,255,160), calc(.52 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0))),
    0 0 calc(var(--claim-number-glow) * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .42) !important;
}

.map-number.is-claiming .map-number-image{
  filter:
    drop-shadow(0 0 calc(var(--claim-number-glow) * .75 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .84))
    drop-shadow(0 0 calc(var(--claim-number-glow) * 1.45 * max(var(--claim-number-enabled), 0) * max(var(--claim-effects-enabled), 0)) rgba(var(--claim-color-rgb,120,255,160), .30)) !important;
}

/* Terra Abrasada */
:root{
  --scorched-logo-scale:.72;
  --scorched-smoke-level:85;
  --scorched-smoke-size:115px;
  --scorched-region-color:#301D12;
  --scorched-smoke-color:#A0A0A0;
  --scorched-smoke-opacity:.24;
}
#scorchedLayer{
  position:absolute;
  left:0;
  top:0;
  width:1566px;
  height:2048px;
  z-index:3;
  pointer-events:none;
  overflow:visible;
}
.regiao.is-scorched{
  fill: color-mix(in srgb, var(--scorched-region-color) 86%, transparent) !important;
  stroke:#1b120d !important;
  stroke-opacity:1 !important;
  filter: drop-shadow(0 0 12px rgba(255,130,60,.16)) drop-shadow(0 0 28px rgba(0,0,0,.34));
}
.map-logo.is-scorched{
  animation: scorchedRadiationPulse 2.8s ease-in-out infinite;
}
.map-logo.is-scorched .map-logo-mask{
  display:block;
  width:100%;
  height:100%;
  transform:scale(var(--scorched-logo-scale));
  transform-origin:center center;
  background: var(--scorched-logo-color, #000000);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  filter: drop-shadow(0 0 10px rgba(154,255,120,.42)) drop-shadow(0 0 24px rgba(154,255,120,.30));
}
.map-number.is-scorched .map-number-pill{
  border-color: rgba(255,164,92,.34);
  box-shadow: 0 8px 18px rgba(0,0,0,.32), 0 0 0 1px rgba(255,164,92,.18), 0 0 18px rgba(255,120,50,.12);
}
.scorched-smoke{
  position:absolute;
  width:var(--scorched-smoke-size);
  height:calc(var(--scorched-smoke-size) * .74);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 26%, rgba(var(--scorched-smoke-rgb, 160,160,160), .96) 0%, rgba(var(--scorched-smoke-rgb, 160,160,160), .68) 24%, rgba(58,58,58,.42) 54%, rgba(0,0,0,0) 82%),
    radial-gradient(circle at 62% 58%, rgba(var(--scorched-smoke-rgb, 160,160,160), .62) 0%, rgba(24,24,24,.38) 58%, rgba(0,0,0,0) 80%),
    radial-gradient(circle at 52% 48%, rgba(255,160,92,.22) 0%, rgba(0,0,0,0) 42%);
  filter: blur(22px);
  opacity:var(--scorched-smoke-opacity);
  mix-blend-mode:normal;
  pointer-events:none;
  animation: scorchedSmokeRise 5.2s ease-in-out infinite;
}
.scorched-smoke.smoke-1{ animation-duration:6.4s; }
.scorched-smoke.smoke-2{ animation-duration:5.3s; }
.scorched-smoke.smoke-3{ animation-duration:6.0s; }
.scorched-smoke.smoke-4{ animation-duration:4.8s; }
@keyframes scorchedSmokeRise{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.76); }
  14%{ opacity:calc(max(.82, var(--scorched-smoke-level) / 100)); }
  50%{ opacity:calc(max(.72, var(--scorched-smoke-level) / 110)); transform:translate(-50%,-108%) scale(1.20); }
  100%{ opacity:0; transform:translate(-50%,-156%) scale(1.46); }
}
@keyframes scorchedRadiationPulse{
  0%,100%{ transform:translate(-50%, -50%) scale(1); filter:drop-shadow(0 0 4px rgba(154,255,120,.18)); }
  50%{ transform:translate(-50%, -50%) scale(1.04); filter:drop-shadow(0 0 14px rgba(154,255,120,.52)) drop-shadow(0 0 28px rgba(154,255,120,.22)); }
}


/* números sem piscar fora do lugar no primeiro paint */
#numbersLayer.is-pending-layout{
  opacity: 0;
}
#numbersLayer{
  transition: opacity .08s linear;
  contain: layout paint style;
}


/* 2026-03 final overlay ownership + return performance */
body:not(.editor-mode) #numbersLayer,
body:not(.editor-mode) #logosLayer,
body:not(.editor-mode) #symbolsLayer{
  pointer-events:none !important;
}

body:not(.editor-mode) #numbersLayer .map-number,
body:not(.editor-mode) #logosLayer .map-logo,
body:not(.editor-mode) #symbolsLayer .map-symbol,
body:not(.editor-mode) #numbersLayer .map-number *,
body:not(.editor-mode) #logosLayer .map-logo *,
body:not(.editor-mode) #symbolsLayer .map-symbol *{
  pointer-events:none !important;
}

body:not(.editor-mode) .map-number,
body:not(.editor-mode) .map-logo,
body:not(.editor-mode) .map-symbol{
  cursor:default !important;
}

.map-number{
  contain:layout paint style;
  backface-visibility:hidden;
}

.map-number-pill,
.map-number-text{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

body.editor-mode #numbersLayer .map-number,
body.editor-mode #logosLayer .map-logo,
body.editor-mode #symbolsLayer .map-symbol{
  pointer-events:auto !important;
  cursor:grab !important;
}

body.editor-mode #numbersLayer .map-number *,
body.editor-mode #logosLayer .map-logo *,
body.editor-mode #symbolsLayer .map-symbol *{
  pointer-events:none !important;
}


/* garante que numero enviado pelo admin apareca como imagem pura, sem voltar para pílula visual */
.map-number-pill.has-image {
    transform: scale(var(--numero-scale, 1));
    transform-origin: center center;
}
.map-number-pill.has-image .map-number-image {
    width: auto !important;
    height: auto !important;
    max-width: 96px !important;
    max-height: 64px !important;
    object-fit: contain;
}


/* 2026-03 performance overrides */
.map-logo,.map-number{pointer-events:none !important;}
.map-logo img,.map-number-pill,.map-number-text,.map-symbol img{will-change:auto !important;}
.regiao.is-claiming{animation:claimRegionContourPulseLite var(--claim-border-speed,1.55s) ease-in-out infinite !important;}
.map-logo.is-claiming,.map-number.is-claiming{animation:claimOverlayPulseLite var(--claim-border-speed,1.55s) ease-in-out infinite !important;}
@keyframes claimRegionContourPulseLite{
  0%,100%{stroke-opacity:calc(.78 * max(var(--claim-border-enabled),0) * max(var(--claim-effects-enabled),0));fill-opacity:calc(var(--claim-fill-opacity-start,.22) * max(var(--claim-fill-enabled),0) * max(var(--claim-effects-enabled),0));filter:drop-shadow(0 0 calc(var(--claim-glow-near,36px) * .26) rgba(var(--claim-color-rgb,120,255,160),.42));}
  50%{stroke-opacity:calc(.96 * max(var(--claim-border-enabled),0) * max(var(--claim-effects-enabled),0));fill-opacity:calc(var(--claim-fill-opacity-end,.56) * max(var(--claim-fill-enabled),0) * max(var(--claim-effects-enabled),0));filter:drop-shadow(0 0 calc(var(--claim-glow-far,88px) * .22) rgba(var(--claim-color-rgb,120,255,160),.56));}
}
@keyframes claimOverlayPulseLite{
  0%,100%{transform:translate(-50%, -50%) scale(1);opacity:.96;}
  50%{transform:translate(-50%, -50%) scale(1.025);opacity:1;}
}
.map-logo.is-claiming img{filter:drop-shadow(0 0 calc(var(--claim-logo-glow,22px) * .45) rgba(var(--claim-color-rgb,120,255,160),.55)) !important;}
.map-number.is-claiming .map-number-pill:not(.has-image){box-shadow:0 6px 14px rgba(0,0,0,.24),0 0 0 1px rgba(var(--claim-color-rgb,120,255,160),.34),0 0 calc(var(--claim-number-glow,18px) * .42) rgba(var(--claim-color-rgb,120,255,160),.24) !important;}
.map-number-pill{box-shadow:0 2px 8px rgba(0,0,0,.18) !important;background:rgba(255,255,255,.94);}
.map-symbol img,.map-logo img{filter:drop-shadow(0 0 3px rgba(0,0,0,.42));}
@media (prefers-reduced-motion: reduce){.regiao.is-claiming,.map-logo.is-claiming,.map-number.is-claiming{animation:none !important;filter:none !important;}}


.map-number.is-base{z-index:7;}
.map-number-pill.is-base{min-width:56px;gap:8px;padding:5px 12px 5px 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;}
.map-base-icon{width:16px;height:16px;display:block;object-fit:contain;flex:0 0 16px;filter:brightness(0) saturate(100%);}
.map-number.is-base .map-number-text{font-weight:900;letter-spacing:.02em;}
.map-number.is-base.is-claiming .map-number-pill{box-shadow:0 6px 14px rgba(0,0,0,.24),0 0 0 1px rgba(var(--claim-color-rgb,120,255,160),.34),0 0 calc(var(--claim-number-glow,18px) * .42) rgba(var(--claim-color-rgb,120,255,160),.24) !important;}
.map-number.is-base.is-scorched .map-number-pill{border-color:rgba(255,164,92,.34);box-shadow:0 8px 18px rgba(0,0,0,.32),0 0 0 1px rgba(255,164,92,.18),0 0 18px rgba(255,120,50,.12);}


/* 2026-03-24 ranking overlay visual fix */
.topbar-panels{
  display:flex;
  align-items:flex-start;
}
.topbar-panel[hidden],
.topbar-panel-ranking[hidden]{
  display:none !important;
}
.topbar-panel-ranking{
  width:min(100%, 620px) !important;
  max-width:min(100%, 620px) !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:28px !important;
}
.topbar-panel-ranking::before,
.topbar-panel-ranking::after{
  display:none !important;
}
.topbar-panel-ranking .ranking-card{
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(120,255,160,0.14) 0%, rgba(120,255,160,0) 36%),
    radial-gradient(circle at 100% 0%, rgba(206,255,120,0.10) 0%, rgba(206,255,120,0) 40%),
    linear-gradient(180deg, rgba(7,18,10,0.78) 0%, rgba(8,18,11,0.72) 100%) !important;
  border:1px solid rgba(148,255,168,0.16) !important;
  box-shadow:0 22px 54px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04), 0 0 24px rgba(92,255,138,0.08) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.topbar-panel-ranking .ranking-card::before{
  inset:1px;
  border-radius:27px;
}
.topbar-panel-ranking .ranking-shell{
  gap:14px;
}
.topbar-panel-ranking .ranking-board{
  max-height:min(62vh, 560px) !important;
  padding-right:4px;
}
.topbar-panel-ranking .ranking-list{
  gap:12px;
}
.topbar-panel-ranking .ranking-row{
  border-radius:20px;
}
@media (max-width: 980px){
  .topbar-panel-ranking{
    width:100% !important;
    max-width:none !important;
    border-radius:24px !important;
  }
  .topbar-panel-ranking .ranking-card{
    border-radius:24px;
  }
  .topbar-panel-ranking .ranking-card::before{
    border-radius:23px;
  }
}