/* =========================================================
   TWL — QUARTERMAESTER REWORK
========================================================= */

.twl-qm-page {
    width: 100%;
    height:
        calc(
            100vh
            -
            var(--header-height, 72px)
        );
    min-height: 620px;
    overflow: hidden;
    background: #101321;
    color: #CBC6BD;
}

.twl-qm-toolbar {
    height: 72px;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom:
        1px solid
        rgba(178,151,88,.15);
    background:
        linear-gradient(
            180deg,
            #101321,
            #0E1120
        );
}

.twl-qm-title > span {
    display: block;
    margin-bottom: 2px;
    color:
        rgba(178,151,88,.72);
    font-family: 'Cinzel', serif;
    font-size: 7px;
    letter-spacing: 1px;
}

.twl-qm-title > strong {
    display: block;
    color: #E8E2D5;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
}

.twl-qm-title > small {
    display: block;
    margin-top: 3px;
    color:
        rgba(203,198,189,.40);
    font-size: 7px;
}

.twl-qm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.twl-qm-tool,
.twl-qm-reset {
    border:
        1px solid
        rgba(178,151,88,.30);
    background:
        rgba(178,151,88,.055);
    color: #B29758;
    cursor: pointer;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.twl-qm-tool:hover,
.twl-qm-reset:hover {
    color: #E8E2D5;
    border-color:
        rgba(178,151,88,.58);
    background:
        rgba(178,151,88,.12);
}

.twl-qm-tool {
    width: 36px;
    height: 36px;
    font-family: Georgia, serif;
    font-size: 19px;
}

.twl-qm-reset {
    height: 36px;
    padding: 0 12px;
    font-family: 'Cinzel', serif;
    font-size: 7px;
    letter-spacing: .55px;
}

.twl-qm-switch {
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border:
        1px solid
        rgba(178,151,88,.20);
    background:
        rgba(8,11,21,.30);
    cursor: pointer;
}

.twl-qm-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.twl-qm-switch > strong {
    color:
        rgba(232,226,213,.72);
    font-family: 'Cinzel', serif;
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.twl-qm-switch-track {
    position: relative;
    width: 29px;
    height: 14px;
    border:
        1px solid
        rgba(178,151,88,.37);
    background:
        rgba(255,255,255,.025);
}

.twl-qm-switch-track > span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background:
        rgba(203,198,189,.38);
    transition:
        transform .20s ease,
        background .20s ease;
}

.twl-qm-switch input:checked
+
.twl-qm-switch-track > span {
    transform:
        translateX(15px);
    background: #B29758;
}

.twl-qm-layout {
    height:
        calc(
            100%
            -
            72px
        );
    display: grid;
    grid-template-columns:
        228px
        minmax(0,1fr);
}

.twl-qm-panel {
    min-width: 0;
    overflow-y: auto;
    padding: 14px 12px 18px;
    border-right:
        1px solid
        rgba(178,151,88,.15);
    background:
        linear-gradient(
            180deg,
            #101321,
            #0B0E1A
        );
}

.twl-qm-panel-block {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom:
        1px solid
        rgba(178,151,88,.11);
}

.twl-qm-panel-heading {
    margin-bottom: 5px;
    color: #B29758;
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: .7px;
}

.twl-qm-panel p {
    margin: 0;
    color:
        rgba(203,198,189,.44);
    font-size: 7px;
    line-height: 1.65;
}

.twl-qm-search {
    width: 100%;
    height: 34px;
    margin-top: 10px;
    padding: 0 9px;
    border:
        1px solid
        rgba(178,151,88,.19);
    outline: 0;
    background:
        rgba(8,11,21,.55);
    color: #E8E2D5;
    font-size: 8px;
}

.twl-qm-location-list {
    max-height: 290px;
    margin-top: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.twl-qm-location {
    width: 100%;
    padding: 7px 8px;
    border: 0;
    background:
        rgba(255,255,255,.012);
    color:
        rgba(232,226,213,.70);
    cursor: pointer;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 7.5px;
    line-height: 1.35;
}

.twl-qm-location:hover {
    background:
        rgba(178,151,88,.065);
    color: #E8E2D5;
}

.twl-qm-region-row {
    width: 100%;
    margin-top: 5px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background:
        rgba(255,255,255,.012);
    color:
        rgba(232,226,213,.66);
    cursor: pointer;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 7px;
}

.twl-qm-region-row.is-off {
    opacity: .34;
}

.twl-qm-region-swatch {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border:
        1px solid
        rgba(255,255,255,.30);
}

.twl-qm-map-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #0B0E1A;
}

.twl-qm-map {
    position: absolute;
    inset: 0;
    background: #0B0E1A;
}

.leaflet-container {
    font-family: 'Poppins', sans-serif;
    background: #0B0E1A;
}

.leaflet-control-attribution,
.leaflet-control-zoom {
    display: none !important;
}

/* =========================================================
   LOSANGO — substitui cada marcador transparente original
========================================================= */

.twl-qm-diamond-wrap {
    background: transparent !important;
    border: 0 !important;
}

.twl-qm-diamond {
    width: 10px;
    height: 10px;
    border:
        1px solid
        rgba(14,11,7,.85);
    background: #B29758;
    transform: rotate(45deg);
    box-shadow:
        0 0 0 2px
        rgba(232,226,213,.74),
        0 2px 8px
        rgba(0,0,0,.52);
    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.twl-qm-diamond-wrap:hover
.twl-qm-diamond,
.twl-qm-diamond-wrap.is-active
.twl-qm-diamond {
    transform:
        rotate(45deg)
        scale(1.38);
    background: #E8E2D5;
    box-shadow:
        0 0 0 2px #B29758,
        0 3px 12px
        rgba(0,0,0,.60);
}

/* =========================================================
   HOVERCARD COM FADE-OUT
========================================================= */

.twl-qm-hovercard {
    position: absolute;
    z-index: 900;
    min-width: 170px;
    max-width: 260px;
    padding: 10px 12px;
    border:
        1px solid
        rgba(178,151,88,.36);
    background:
        rgba(11,14,26,.95);
    box-shadow:
        0 12px 28px
        rgba(0,0,0,.34);
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition:
        opacity .24s ease,
        transform .24s ease;
}

.twl-qm-hovercard.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.twl-qm-hovercard > span {
    display: block;
    margin-bottom: 3px;
    color:
        rgba(178,151,88,.67);
    font-family: 'Cinzel', serif;
    font-size: 6px;
    letter-spacing: .65px;
}

.twl-qm-hovercard > strong {
    display: block;
    color: #E8E2D5;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
}

.twl-qm-hovercard > small {
    display: block;
    margin-top: 4px;
    color:
        rgba(203,198,189,.42);
    font-size: 6.5px;
}

/* =========================================================
   CRÉDITOS — preservados
========================================================= */

.twl-qm-credit {
    position: absolute;
    z-index: 850;
    right: 9px;
    bottom: 8px;
    max-width:
        calc(100% - 18px);
    padding: 6px 8px;
    border:
        1px solid
        rgba(178,151,88,.13);
    background:
        rgba(11,14,26,.84);
    color:
        rgba(203,198,189,.50);
    font-size: 6px;
    line-height: 1.5;
}

.twl-qm-credit a {
    color:
        rgba(178,151,88,.83);
}

.twl-qm-credit a:hover {
    color: #E8E2D5;
}

/* Scrollbars discretas */
.twl-qm-panel,
.twl-qm-location-list {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(178,151,88,.28)
        rgba(255,255,255,.02);
}

@media (max-width: 1050px) {

    .twl-qm-layout {
        grid-template-columns:
            185px
            minmax(0,1fr);
    }

}

@media (max-width: 760px) {

    .twl-qm-page {
        height: auto;
        min-height:
            calc(
                100vh
                -
                var(--header-height, 72px)
            );
    }

    .twl-qm-toolbar {
        height: auto;
        min-height: 76px;
        align-items: flex-start;
        flex-direction: column;
    }

    .twl-qm-layout {
        height: 72vh;
        min-height: 560px;
        display: block;
        position: relative;
    }

    .twl-qm-panel {
        position: absolute;
        z-index: 1000;
        top: 8px;
        left: 8px;
        width: 190px;
        max-height:
            calc(100% - 16px);
        border:
            1px solid
            rgba(178,151,88,.18);
    }

    .twl-qm-map-wrap {
        width: 100%;
        height: 100%;
    }

}


/* Toggle geral de reinos agora fica dentro da barra lateral,
   imediatamente acima da lista de overlays. */
.twl-qm-switch-sidebar {
    width: 100%;
    min-height: 36px;
    height: auto;
    margin-top: 10px;
    margin-bottom: 8px;
    justify-content: flex-start;
    box-sizing: border-box;
}

.twl-qm-switch-sidebar > strong {
    line-height: 1.35;
}