/* ============================================
   ESTANDARTE DO MAPA (mapa_selo.js) — mock A3 aprovado:
   techterra-online-backend/docs/mock-titulo-mapa-icones.html
   ============================================
   Tudo em `em`: herda o tamanho do rotulo grande (32px, 22px no celular, vezes
   --map-icon-scale). O `.continent-label` inteiro e' `pointer-events: none` e a
   propriedade e' HERDADA; so' o estandarte e o menu reabrem com `auto`
   (mesma mecanica da antiga .map-star-premio). */

/* Nome + estandarte numa linha flex: o estandarte fica centrado na ALTURA DO NOME,
   nem preso no topo nem no pe' das letras (aprovado no mock). */
.continent-label-large .map-linha-nome {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapa-selo {
    --ms-forma: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    position: relative;
    flex: none;
    width: 0.92em;
    height: 1.24em;
    margin-left: 0.34em;
    pointer-events: auto !important;
    cursor: pointer;
    transition: transform 0.15s ease;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.95));
}
.mapa-selo:hover, .mapa-selo.aberto { transform: scale(1.1); }
.mapa-selo:focus-visible { outline: 2px solid var(--gold-light, #e8d38a); outline-offset: 4px; border-radius: 3px; }

/* a haste dourada onde a flamula fica pendurada */
.mapa-selo::before {
    content: '';
    position: absolute;
    left: -0.1em; right: -0.1em; top: -0.07em;
    height: 0.1em;
    border-radius: 0.05em;
    background: linear-gradient(#e8d38a, #8b6914);
    z-index: 1;
}
/* moldura = camada de tras (ouro / arco-iris); miolo = recorte escuro na frente */
.mapa-selo .ms-moldura,
.mapa-selo .ms-miolo {
    position: absolute;
    clip-path: var(--ms-forma);
}
.mapa-selo .ms-moldura { inset: 0; background: linear-gradient(160deg, #e8d38a, #8b6914 55%, #c9a84c); }
.mapa-selo .ms-miolo { inset: 0.08em; background: radial-gradient(circle at 50% 35%, #2d2312, #0d0a05 75%); }

.mapa-selo .ms-face {
    position: absolute;
    left: 50%; top: 40%;
    width: 0.58em; height: 0.58em;
    transform: translate(-50%, -50%);
    object-fit: contain;
    /* silhueta preta com contorno claro — a mesma leitura da .map-bestiario */
    filter: brightness(0) drop-shadow(0 0 1.5px rgba(246, 231, 234, 0.95)) drop-shadow(0 0 6px rgba(224, 72, 95, 0.55));
}
.mapa-selo .ms-face-txt {
    display: grid;
    place-items: center;
    width: auto; height: auto;
    font-family: 'Lora', serif;
    font-size: 0.5em;
    line-height: 1;
    letter-spacing: 0;
    color: #e8d38a;
    filter: none;
}

/* bestiario do mapa COMPLETO: ouro claro com brilho (a antiga ★ de colecao) */
.mapa-selo.completo { filter: drop-shadow(0 0 5px rgba(241, 215, 122, 0.9)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.95)); }
.mapa-selo.completo .ms-moldura { background: linear-gradient(160deg, #fff3b8, #e0b640 50%, #fff0a8); }

/* PREMIO LIBERADO e nao resgatado: moldura em arco-iris correndo + pulso — as
   cores da antiga .map-star-premio. */
.mapa-selo.premio { animation: ms-pulso 1.6s ease-in-out infinite, ms-brilho 3.2s linear infinite; }
.mapa-selo.premio .ms-moldura {
    background: linear-gradient(90deg, #ffe066, #7fe3a0, #7ec8f5, #d79bf0, #ffe066, #7fe3a0, #7ec8f5);
    background-size: 300% 100%;
    animation: ms-arco 2.4s linear infinite;
}
@keyframes ms-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes ms-arco { to { background-position: 150% 0; } }
@keyframes ms-brilho {
    0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 224, 102, 0.95)); }
    25%      { filter: drop-shadow(0 0 7px rgba(127, 227, 160, 0.95)); }
    50%      { filter: drop-shadow(0 0 7px rgba(126, 200, 245, 0.95)); }
    75%      { filter: drop-shadow(0 0 7px rgba(215, 155, 240, 0.95)); }
}

/* pontinhos de estado no canto */
.mapa-selo .ms-pips {
    position: absolute;
    right: -0.22em; top: 0.02em;
    display: flex; flex-direction: column; gap: 2px;
    z-index: 2;
}
.mapa-selo .ms-pip { width: 0.24em; height: 0.24em; border-radius: 50%; box-shadow: 0 0 0 1.5px #000; }
.mapa-selo .ms-pip.mit { background: #e0485f; box-shadow: 0 0 0 1.5px #000, 0 0 6px #e0485f; }
.mapa-selo .ms-pip.inv { background: var(--inv-cor, #e8c56a); }
.mapa-selo .ms-pip.prem { animation: ms-cor-bg 3.2s linear infinite; }
@keyframes ms-cor-bg { 0%, 100% { background: #ffe066; } 25% { background: #7fe3a0; } 50% { background: #7ec8f5; } 75% { background: #d79bf0; } }

/* onda de conclusao: o proprio formato cresce e some */
.mapa-selo .ms-onda {
    position: absolute; inset: 0;
    clip-path: var(--ms-forma);
    background: rgba(255, 224, 102, 0.55);
    pointer-events: none;
    animation: ms-onda 1s ease-out 2;
    opacity: 0;
}
@keyframes ms-onda { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }

/* ---- menu do mapa (pendurado embaixo da barra) ---- */
.continent-label-large .map-nome { position: relative; }
.mapa-selo-menu {
    position: absolute;
    left: 50%; top: calc(100% + 8px);
    transform: translateX(-50%);
    min-width: 300px;
    z-index: 5;
    padding: 6px;
    text-align: left;
    white-space: normal;
    pointer-events: auto !important;
    cursor: default;
    background: linear-gradient(#1c160c, #100c06);
    border: 1px solid var(--gold-dark, #8b6914);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    /* nao herda o titulo (Cinzel 32px, espacado, com sombra) */
    font-family: 'Lora', serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: #e8dcc0;
}
.mapa-selo-menu .ms-ln {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    border-radius: 5px;
}
.mapa-selo-menu .ms-ln[data-mapa-premio],
.mapa-selo-menu .ms-ln[data-bm-cont],
.mapa-selo-menu .ms-ln[data-mitico-cont],
.mapa-selo-menu .ms-ln[data-invasao-cont],
.mapa-selo-menu .ms-ln[data-mapa-cfg] { cursor: pointer; }
.mapa-selo-menu .ms-ln[data-mapa-premio]:hover,
.mapa-selo-menu .ms-ln[data-bm-cont]:hover,
.mapa-selo-menu .ms-ln[data-mitico-cont]:hover,
.mapa-selo-menu .ms-ln[data-invasao-cont]:hover,
.mapa-selo-menu .ms-ln[data-mapa-cfg]:hover { background: rgba(201, 168, 76, 0.12); }
.mapa-selo-menu .ms-ln:focus-visible { outline: 2px solid var(--gold-light, #e8d38a); outline-offset: -2px; }
.mapa-selo-menu .ms-ln.alerta { background: rgba(255, 224, 102, 0.08); outline: 1px solid rgba(255, 224, 102, 0.35); }
.mapa-selo-menu .ms-ic {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    font-size: 18px; line-height: 1;
}
.mapa-selo-menu .ms-ic img {
    width: 20px; height: 20px; object-fit: contain;
    filter: brightness(0) drop-shadow(0 0 1.5px rgba(246, 231, 234, 0.95));
}
.mapa-selo-menu .ms-tx small { display: block; color: #a99c86; font-size: 11px; }
.mapa-selo-menu .ms-st { font-size: 11px; color: #a99c86; white-space: nowrap; }
.mapa-selo-menu .ms-ln.alerta .ms-st { color: #ffe066; font-weight: 700; }
.mapa-selo-menu hr { border: 0; border-top: 1px solid rgba(201, 168, 76, 0.2); margin: 4px 0; }
.mapa-selo-menu .ms-estrela { color: #e8d38a; text-shadow: 0 0 8px rgba(232, 211, 138, 0.85); }
.mapa-selo-menu .ms-estrela.vivo { animation: ms-cor 3.2s linear infinite; }
@keyframes ms-cor { 0%, 100% { color: #ffe066; } 25% { color: #7fe3a0; } 50% { color: #7ec8f5; } 75% { color: #d79bf0; } }
.mapa-selo-menu .ms-mitico, .mapa-selo .ms-mitico { color: rgba(224, 72, 95, 0.75); }
.mapa-selo-menu .ms-mitico.is-on { color: #e0485f; text-shadow: 0 0 8px rgba(224, 72, 95, 0.9); }
.mapa-selo-menu .ms-inv { color: var(--inv-cor, #e8c56a); width: 20px; height: 20px; display: grid; place-items: center; }
.mapa-selo-menu .ms-inv svg { width: 20px; height: 20px; display: block; }
.mapa-selo-menu .ms-gear { color: #b9ac8c; }

/* ---- balao de conclusao ---- */
.mapa-selo-balao {
    position: absolute;
    left: 50%; top: calc(100% + 10px);
    transform: translateX(-50%);
    z-index: 5;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 8px;
    pointer-events: none;
    background: linear-gradient(#ffe89a, #e0b640);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
    font-family: 'Lora', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    text-shadow: none;
    color: #1a1206;
    animation: ms-balao 4.5s ease forwards;
}
.mapa-selo-balao::before {
    content: '';
    position: absolute;
    left: 50%; top: -6px; margin-left: -6px;
    border: 6px solid transparent; border-top: 0; border-bottom-color: #ffe89a;
}
@keyframes ms-balao {
    0%       { opacity: 0; transform: translate(-50%, 6px); }
    10%, 85% { opacity: 1; transform: translate(-50%, 0); }
    100%     { opacity: 0; }
}

@media (max-width: 720px) {
    .mapa-selo-menu { min-width: 260px; font-size: 12px; }
    .mapa-selo-balao { font-size: 12px; white-space: normal; width: 240px; text-align: center; }
}

/* Movimento reduzido: sem pulso nem arco-iris correndo, mas a moldura continua
   colorida (dourada viva) — a animacao e' o enfeite, nao o aviso. */
@media (prefers-reduced-motion: reduce) {
    .mapa-selo.premio { animation: none; filter: drop-shadow(0 0 7px rgba(255, 224, 102, 0.95)); }
    .mapa-selo.premio .ms-moldura { animation: none; }
    .mapa-selo:hover, .mapa-selo.aberto { transform: none; }
    .mapa-selo .ms-onda, .mapa-selo-balao, .mapa-selo-menu .ms-estrela.vivo, .mapa-selo .ms-pip.prem { animation: none; }
    .mapa-selo .ms-pip.prem { background: #ffe066; }
    .mapa-selo-balao { opacity: 1; }
}