/* ============================================================
   skin3d.css — visual novo (estilo do mapa 3D) aplicado a TODOS os dialogos, ao painel do
   jogador e a barra de icones. Carregado por ULTIMO no index.html: so troca aparencia (fundo,
   borda, titulo, botao de fechar, cantos), nunca posicao/tamanho/logica dos dialogos.
   Os paineis de territorio, navio e avatar tem regras proprias no fim de css/map-ui.css.
   ============================================================ */

/* ---------- Cartao de dialogo ---------- */
.dialog-box,
[id$="-dialog"]:not(#territory-dialog),
#reino-modal-content {
    /* faixa dourada suave no topo (mesma ideia da faixa dos paineis) + azul-marinho em degrade */
    background:
        linear-gradient(115deg, rgba(240, 192, 64, 0.17), rgba(240, 192, 64, 0) 46%) top left / 100% 96px no-repeat,
        linear-gradient(180deg, rgba(17, 32, 56, 0.97), rgba(8, 15, 30, 0.98));
    border: 1px solid rgba(240, 192, 64, 0.55);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #e8e4d4;
}

/* ---------- Titulo e cabecalho ---------- */
.dialog-header { border-bottom: 1px solid rgba(240, 192, 64, 0.22); }
.dialog-header h3,
[id$="-dialog"]:not(#territory-dialog) > h3,
#reino-modal-content h3:first-child {
    font-family: 'IM Fell English', serif;
    font-size: 21px;
    font-weight: normal;
    line-height: 1.15;
    color: #fff7e0;
}

/* ---------- Botao de fechar: circulo de vidro ---------- */
.dialog-close-btn,
[id$="-dialog-close"]:not(#territory-dialog-close) {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.dialog-close-btn:hover,
[id$="-dialog-close"]:hover { background: rgba(255, 255, 255, 0.16); opacity: 1; }
.dialog-close-btn img,
[id$="-dialog-close"]:not(#territory-dialog-close) img { width: 14px !important; height: 14px !important; }

/* ---------- Botoes, campos e menu de acoes ---------- */
.action-btn { border-radius: 10px; }
.auth-input { border-radius: 10px; }
.action-menu-trigger { border-radius: 10px; background: rgba(240, 192, 64, 0.07); border-color: rgba(240, 192, 64, 0.28); }
.action-menu-list { border-radius: 10px; background: linear-gradient(180deg, rgba(17, 32, 56, 0.98), rgba(8, 15, 30, 0.99)); border: 1px solid rgba(240, 192, 64, 0.45); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.info-row { border-bottom: 1px dashed rgba(255, 255, 255, 0.07); padding-bottom: 5px; }

/* ---------- Dialogo de regiao: mesmo painel do territorio ---------- */
#region-dialog {
    background: linear-gradient(180deg, rgba(17, 32, 56, 0.95), rgba(8, 15, 30, 0.97));
    border: 1px solid rgba(240, 192, 64, 0.6);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    animation: p3PanelIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.08);
}

/* ---------- Notificacoes (sininho): lista e detalhe no mesmo visual dos dialogos ----------
   A lista (#notification-dropdown) e o cartao do detalhe (#notif-detail-overlay > div) nao terminam em
   "-dialog" e tem estilo inline, por isso entram aqui explicitamente (com !important onde o inline manda). */
#notification-dropdown,
#notif-detail-overlay > div {
    background:
        linear-gradient(115deg, rgba(240, 192, 64, 0.17), rgba(240, 192, 64, 0) 46%) top left / 100% 96px no-repeat,
        linear-gradient(180deg, rgba(17, 32, 56, 0.97), rgba(8, 15, 30, 0.98)) !important;
    border: 1px solid rgba(240, 192, 64, 0.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #e8e4d4;
}
#notification-dropdown > div:first-child { padding-bottom: 8px; border-bottom: 1px solid rgba(240, 192, 64, 0.22); }
#notification-dropdown > div:first-child > span,
#notif-detail-title {
    font-family: 'IM Fell English', serif !important;
    font-size: 21px !important;
    font-weight: normal !important;
    line-height: 1.15;
    color: #fff7e0 !important;
}
#notification-dropdown > div:first-child > button {
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08) !important; flex-shrink: 0;
}
#notification-dropdown > div:first-child > button:hover { background: rgba(255, 255, 255, 0.16) !important; }
#notification-dropdown > div:first-child > button img { width: 14px !important; height: 14px !important; opacity: 1 !important; }
#notif-detail-title { padding-right: 34px !important; }
#notif-detail-date { color: #9aa6b8 !important; padding-bottom: 10px; border-bottom: 1px solid rgba(240, 192, 64, 0.22); }
.notif-item { border-radius: 10px; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.09); }
.notif-item:hover { background: rgba(240, 192, 64, 0.1); }
.notif-item.notif-unread { background: rgba(240, 192, 64, 0.1); border-color: rgba(240, 192, 64, 0.5); }
.notif-item-title { color: #fff7e0; }
.notif-item-date { color: #9aa6b8; }

/* ---------- Cartoes antigos com estilo embutido (sem id "-dialog" nem .dialog-box) ----------
   Espionar, sabotar, navio (soldados, afundar, escolher navio, desembarque, saque), completar perfil, verificar
   telefone, e os criados em JS (avatar.js, market.js, cor do territorio). Sao reconhecidos pelo fundo antigo
   escrito no proprio style (#0d1b2e, rgba(10,10,30,0.98) ou #1a1a2e) — cartao novo deve usar .dialog-box. */
div[style*="background:#0d1b2e"],
div[style*="background:rgba(10,10,30,0.98)"],
div[style*="background:#1a1a2e"][style*="border-radius:16px"] {
    background:
        linear-gradient(115deg, rgba(240, 192, 64, 0.17), rgba(240, 192, 64, 0) 46%) top left / 100% 96px no-repeat,
        linear-gradient(180deg, rgba(17, 32, 56, 0.97), rgba(8, 15, 30, 0.98)) !important;
    border: 1px solid rgba(240, 192, 64, 0.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    color: #e8e4d4;
}
div[style*="background:#0d1b2e"] .dialog-header h3,
div[style*="background:rgba(10,10,30,0.98)"] .dialog-header h3,
div[style*="background:#0d1b2e"] > h3,
div[style*="background:rgba(10,10,30,0.98)"] > h3,
div[style*="background:#1a1a2e"][style*="border-radius:16px"] > h3 {
    font-family: 'IM Fell English', serif !important;
    font-size: 21px !important;
    font-weight: normal !important;
    line-height: 1.15;
    color: #fff7e0 !important;
}
div[style*="background:#0d1b2e"] .dialog-header > button,
div[style*="background:rgba(10,10,30,0.98)"] .dialog-header > button {
    width: 28px; height: 28px; min-width: 28px !important; min-height: 28px !important; padding: 0 !important;
    display: grid !important; place-items: center; border-radius: 50%; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08) !important;
}
div[style*="background:#0d1b2e"] .dialog-header > button:hover,
div[style*="background:rgba(10,10,30,0.98)"] .dialog-header > button:hover { background: rgba(255, 255, 255, 0.16) !important; }
div[style*="background:#0d1b2e"] .dialog-header > button img,
div[style*="background:rgba(10,10,30,0.98)"] .dialog-header > button img { width: 14px !important; height: 14px !important; }

/* Celular: painel de regiao compacto, mesmas medidas do painel de territorio (fim de map-ui.css) */
@media (max-width: 768px) {
    #region-dialog {
        top: 49px; left: 5px !important; right: auto !important; margin: 0 !important; padding: 8px;
        width: min(222px, calc(100vw - var(--menu-bar-reserve) - 10px)) !important; max-width: none !important;
        max-height: 44vh; border-radius: 10px; font-size: 11px;
    }
    #region-dialog h3 { font-size: 14.5px; }
    #region-dialog .dialog-header { margin-bottom: 4px; padding-bottom: 4px; }
    #region-dialog .dialog-close-btn img { width: 14px !important; height: 14px !important; }
    #region-dialog .dialog-body { padding: 0; }
    #region-dialog .info-row { padding: 2px 0; font-size: 11px; }
}

/* ---------- Painel do jogador (topo) ---------- */
#player-panel-left,
#player-panel-right {
    background: linear-gradient(180deg, rgba(17, 32, 56, 0.96), rgba(8, 15, 30, 0.97));
    border: 1px solid rgba(240, 192, 64, 0.45);
    border-top: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
#player-panel-left { border-left: none; border-radius: 0 0 14px 0; }
#player-panel-right { border-right: none; border-radius: 0 0 0 14px; }

/* ---------- Barra de icones do menu: ladrilhos escuros com icone dourado ---------- */
.menu-icon-btn {
    background: linear-gradient(180deg, rgba(17, 32, 56, 0.94), rgba(8, 15, 30, 0.96));
    border: 1px solid rgba(240, 192, 64, 0.45);
    border-radius: 9px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.menu-icon-btn:hover { background: linear-gradient(180deg, rgba(60, 52, 30, 0.96), rgba(30, 26, 14, 0.97)); border-color: rgba(240, 192, 64, 0.85); }
/* os icones sao PNG escuros: o filtro pinta de dourado (#f0c040) */
.menu-icon-btn img { filter: brightness(0) saturate(100%) invert(79%) sepia(61%) saturate(563%) hue-rotate(359deg) brightness(98%) contrast(92%); }

/* ---------- Barra de progresso (batalha em andamento no painel do territorio) ---------- */
.p3-bar { height: 8px; margin: 10px 0 4px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
/* o timer atualiza a cada 0,5s; a transicao linear do mesmo tempo deixa o avanco continuo */
.p3-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--bar, #f59e0b); transition: width 0.5s linear; }
.p3-bar-label { margin: 0; min-height: 0; font-size: 13px; font-weight: 700; }
.p3-bar-label:empty { display: none; }