:root { --fundo: #14263a; --painel: rgba(17, 32, 50, 0.93); --borda: #2d4a6b; --texto: #eaf2fb; --suave: #9fb4c8;
  --verde: #3fbf6a; --ambar: #f0b03a; --verm: #e0553a; --azul: #3a8fd6; --topo: 64px; --base: 100px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #244f66; color: var(--texto); overscroll-behavior: none;
  font-family: "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #ffe45e; }
.oculto { display: none !important; }
#mapa { position: fixed; left: 0; top: 0; display: block; touch-action: none; }
.voltar { position: fixed; left: 8px; top: 8px; z-index: 60; display: none; padding: 8px 14px; border-radius: 999px; background: #fff; color: #1d5fa8;
  font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid #1d5fa8; }
body[data-modo="menu"] .voltar, body[data-modal="pausa"] .voltar { display: block; }
.semjs { position: fixed; top: 40%; width: 100%; text-align: center; font-size: 20px; }

/* ---------- interface do jogo ---------- */
body[data-modo="menu"] #ui { display: none; }
#ui > * { position: fixed; z-index: 10; }
#topo { left: 0; right: 0; top: 0; background: var(--painel); border-bottom: 2px solid var(--borda); padding: 3px 6px; }
#topo .linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#topo .l1 { min-height: 34px; }
#topo .l2 { gap: 4px; margin-top: 2px; }
#topo .data { font-weight: 700; font-size: 14px; white-space: nowrap; padding: 0 4px; }
#topo .grupo { display: inline-flex; gap: 3px; }
#topo .grupo.dir { margin-left: auto; }
.bt { min-width: 34px; height: 32px; padding: 0 8px; border-radius: 9px; border: 2px solid var(--borda); background: #21405f; font-size: 15px; font-weight: 700; line-height: 1; }
.bt:hover { background: #2b5380; }
.bt.ativo { background: var(--azul); border-color: #9ed0ff; }
.bt.peq { min-width: 26px; height: 26px; padding: 0 6px; }
.bt.txt { height: auto; padding: 8px 14px; font-size: 15px; }
.bt.prim { background: var(--verde); border-color: #a6f0c0; color: #06310f; }
.bt:disabled { opacity: 0.45; cursor: not-allowed; }
.taxa { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.taxa .rot { color: var(--suave); }
.taxa-v { min-width: 38px; text-align: center; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: #1a3149; border: 2px solid var(--borda); font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip.ok { border-color: #2f9a58; } .chip.aviso { border-color: var(--ambar); } .chip.ruim { border-color: var(--verm); background: #4a2420; }
.dem-i { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; margin-left: 2px; }
.barra { width: 38px; height: 8px; background: #0e1b2b; border-radius: 4px; overflow: hidden; border: 1px solid #3a5a7e; }
.barra .fill { height: 100%; width: 0; background: var(--verde); }
.barra.dem { width: 28px; }

#conselheira { left: 8px; top: calc(var(--topo) + 8px); display: flex; gap: 6px; align-items: flex-start; max-width: min(330px, 52vw); padding: 6px 8px; background: var(--painel);
  border: 2px solid #f0b03a; border-radius: 14px; font-size: 13px; line-height: 1.3; }
#conselheira.escondida { display: none; }
#conselheira.nova { animation: pulo 0.6s; }
@keyframes pulo { 0% { transform: scale(0.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
#conselheira .avatar { font-size: 28px; line-height: 1; }
#conselheira .corpo { cursor: pointer; flex: 1; min-width: 0; }
#conselheira .nome { font-weight: 700; color: var(--ambar); font-size: 12px; }
#conselheira .texto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fechar { border: 0; background: transparent; font-size: 15px; padding: 2px 6px; color: var(--suave); }

#info { right: 8px; top: calc(var(--topo) + 8px); width: 245px; max-height: calc(100vh - var(--topo) - var(--base) - 20px); overflow-y: auto; background: var(--painel); border: 2px solid #ffe45e; border-radius: 12px; padding: 8px 10px; font-size: 13px; }
#info .tt, #dicaCons .tt { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
#info .st { margin: 4px 0; font-weight: 700; }
.ct { color: var(--suave); font-size: 12px; margin: 2px 0 4px; }
ul.ef { margin: 4px 0; padding-left: 16px; font-size: 12.5px; }
button.dem { width: 100%; margin-top: 6px; padding: 7px; border-radius: 9px; border: 2px solid #ff9a8a; background: #7a2a22; font-weight: 700; }

#gaveta { right: 0; top: var(--topo); bottom: var(--base); width: min(370px, 94vw); background: var(--painel); border-left: 2px solid var(--borda); z-index: 15; display: flex; flex-direction: column; }
.g-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; border-bottom: 2px solid var(--borda); }
.g-abas { display: flex; gap: 4px; flex-wrap: wrap; }
.g-aba { padding: 5px 9px; border-radius: 9px; border: 2px solid var(--borda); background: #21405f; font-weight: 700; font-size: 13px; }
.g-aba.ativo { background: var(--azul); }
.g-corpo { overflow-y: auto; padding: 8px 10px 16px; font-size: 13.5px; line-height: 1.4; -webkit-user-select: text; user-select: text; flex: 1; touch-action: pan-y; }
.g-corpo h3 { margin: 4px 0 6px; font-size: 17px; } .g-corpo h4 { margin: 12px 0 5px; color: var(--ambar); font-size: 13px; }
.kv { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dotted #2d4a6b; font-size: 13px; }
.kv .k { color: var(--suave); } .kv .v { font-weight: 700; text-align: right; }
canvas.graf { width: 100%; height: 80px; display: block; margin: 5px 0; border-radius: 8px; }
.pq { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 6px; font-size: 12.5px; margin: 3px 0; }
.pq .barra { width: 100%; } .pq .v { text-align: right; font-weight: 700; }
.meta { margin: 7px 0; padding: 6px 8px; border-radius: 9px; background: #1a3149; border: 1px solid var(--borda); }
.meta.ok { border-color: #2f9a58; background: #17392a; } .meta .barra { width: 100%; margin: 4px 0 2px; }
.meta small { color: var(--suave); }
.prazo { font-weight: 700; margin: 6px 0; } .prazo.ruim { color: #ff9a8a; }
.balao-g, .fato { background: #1a3149; border: 2px solid var(--ambar); border-radius: 12px; padding: 9px 11px; margin: 6px 0; }
.fato { border-color: #5cc25c; } .hist { font-size: 12.5px; color: var(--suave); padding: 5px 0; border-bottom: 1px dotted #2d4a6b; }
.intro { font-style: italic; color: #cfe2f5; }

#zoom { right: 8px; bottom: calc(var(--base) + 8px); display: flex; flex-direction: column; gap: 5px; z-index: 11; }
#zoom .bt { width: 40px; height: 40px; font-size: 20px; background: rgba(17, 32, 50, 0.85); }
body.tem-gaveta #zoom { right: 380px; }

#avisos { left: 50%; transform: translateX(-50%); top: calc(var(--topo) + 8px); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; z-index: 20; width: min(560px, 92vw); }
.aviso { padding: 8px 14px; border-radius: 12px; background: rgba(17, 32, 50, 0.95); border: 2px solid var(--azul); font-size: 14px; font-weight: 700; text-align: center; animation: entra 0.25s; }
.aviso.erro { border-color: var(--verm); } .aviso.ok { border-color: var(--verde); } .aviso.missao { border-color: var(--ambar); background: #3a2f12; }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- barra de construção ---------- */
#barra { left: 0; right: 0; bottom: 0; background: var(--painel); border-top: 2px solid var(--borda); padding: 3px 4px 4px; }
.abas { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 3px; }
.aba { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 9px; border-radius: 10px; border: 2px solid var(--borda); background: #21405f; font-size: 13px; font-weight: 700; }
.aba .n { font-size: 10px; color: var(--suave); } .aba .ic { font-size: 17px; }
.aba.ativo { background: var(--azul); border-color: #9ed0ff; }
.aba.extra { margin-left: 2px; }
.itens { display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 2px; min-height: 66px; }
.itens.fechado { display: none; }
.item { flex: 0 0 auto; width: 88px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px; border-radius: 10px; border: 2px solid var(--borda); background: #1d3752; }
.item .em { font-size: 22px; line-height: 1.1; } .item .nm { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.1; } .item .pr { font-size: 11px; color: #ffe08a; }
.item.ativo { border-color: #ffe45e; background: #2c5a85; } .item.caro { opacity: 0.55; } .item.caro .pr { color: #ff9a8a; }
#dicaCons { position: absolute; left: 6px; bottom: calc(100% + 6px); width: min(400px, 70vw); max-height: calc(100vh - var(--topo) - 130px); overflow-y: auto; background: var(--painel); border: 2px solid var(--azul); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; line-height: 1.35; z-index: 12; }
#dicaCons .tx { margin: 4px 0; } #dicaCons .pc { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--suave); }
#dicaCons .val { margin-top: 6px; padding: 5px 7px; border-radius: 8px; font-weight: 700; background: #1a3149; }
#dicaCons .val.ok { background: #17392a; } #dicaCons .val.aviso { background: #3a2f12; } #dicaCons .val.ruim { background: #4a2420; }

/* ---------- janelas e menu ---------- */
#modal { position: fixed; inset: 0; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; background: rgba(5, 12, 22, 0.62); display: flex; align-items: center; justify-content: center; padding: 10px; }
.caixa { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #172c44; border: 3px solid var(--azul); border-radius: 16px; padding: 14px 18px; -webkit-user-select: text; user-select: text; touch-action: pan-y; }
.caixa h2 { margin: 0 0 8px; font-size: 21px; } .caixa h4 { margin: 12px 0 4px; color: var(--ambar); }
.caixa p, .caixa li { line-height: 1.4; font-size: 15px; } .caixa .peq, .peq { font-size: 12.5px; color: var(--suave); }
.m-botoes { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.m-bt { padding: 10px 12px; border-radius: 11px; border: 2px solid var(--borda); background: #21405f; font-size: 15px; font-weight: 700; text-align: left; }
.m-bt small { display: block; font-weight: 400; font-size: 12.5px; color: #cfe2f5; margin-top: 2px; }
.m-bt.prim { background: var(--verde); color: #06310f; border-color: #a6f0c0; text-align: center; } .m-bt.prim small { color: #06310f; }
.m-bt.pago { border-color: var(--ambar); } .m-bt:disabled { opacity: 0.45; }
.caixa.evento { border-color: var(--ambar); } .ev-tx { font-size: 16px; } .ev-aj { color: #ffe08a; font-size: 13.5px; }
.estrelas { font-size: 40px; text-align: center; letter-spacing: 6px; } .estrela { opacity: 0.45; } .estrela.on { opacity: 1; }
.caixa.fim { text-align: center; } .caixa.fim .m-bt { text-align: center; }

#menu { position: fixed; inset: 0; left: 0; top: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 56px 10px 10px; background: radial-gradient(ellipse at center, rgba(8, 20, 34, 0.55), rgba(8, 20, 34, 0.82)); overflow-y: auto; touch-action: pan-y; }
.menu-caixa { width: min(640px, 100%); max-height: 100%; overflow-y: auto; text-align: center; background: rgba(18, 36, 56, 0.94); border: 3px solid var(--azul); border-radius: 20px; padding: 14px 18px 16px; }
.menu-caixa h1 { margin: 0; font-size: clamp(26px, 5vw, 38px); } .menu-caixa h2 { margin: 2px 0; } .menu-caixa h3 { margin: 10px 0 6px; color: var(--ambar); font-size: 15px; }
.logo { font-size: 44px; } .sub { color: #cfe2f5; margin: 4px 0 8px; font-size: 15px; }
.difs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dif { flex: 1 1 120px; display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: 12px; border: 3px solid var(--borda); background: #1d3752; font-size: 15px; }
.dif .e { font-size: 22px; } .dif small { color: var(--suave); } .dif.ativo { border-color: #ffe45e; background: #2c5a85; }
.bts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.bts.peq { margin-top: 6px; }
.grande { flex: 1 1 190px; padding: 13px 14px; border-radius: 14px; border: 3px solid rgba(255, 255, 255, 0.6); font-size: 19px; font-weight: 700; color: #fff; }
.grande.verde { background: #2f9a58; } .grande.azul { background: #2f78c4; } .grande.amarelo { background: #b88a14; }
.missoes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.missao { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #1d3752; border: 2px solid var(--borda); }
.missao.trancada { opacity: 0.55; } .mi { font-size: 30px; } .md { flex: 1; display: flex; flex-direction: column; gap: 2px; } .md small { color: #cfe2f5; } .md .est { font-size: 15px; }
.linha-sem { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.sem { width: 110px; padding: 7px; border-radius: 8px; border: 2px solid var(--borda); background: #0e1b2b; color: #fff; font-size: 16px; text-align: center; -webkit-user-select: text; user-select: text; }

@media (max-height: 520px), (max-width: 700px) {
  :root { font-size: 14px; }
  .aba .nm { display: none; } .aba { padding: 0 8px; height: 32px; }
  .item { width: 76px; min-height: 54px; } .item .em { font-size: 19px; } .itens { min-height: 56px; }
  #topo .data { font-size: 12px; } .chip { font-size: 11.5px; padding: 0 5px; } .bt { height: 28px; min-width: 30px; padding: 0 6px; font-size: 13px; }
  #conselheira { font-size: 11.5px; max-width: 44vw; } #conselheira .avatar { font-size: 22px; }
  #conselheira .texto { -webkit-line-clamp: 3; } .taxa .rot { display: none; }
  .caixa { padding: 10px 12px; } .caixa p, .caixa li { font-size: 13.5px; } .caixa h2 { font-size: 18px; }
  #dicaCons { width: min(340px, 62vw); font-size: 11.5px; } body.tem-gaveta #zoom { right: 8px; }
  #dicaCons .ef, #dicaCons .tx, #dicaCons .pc { display: none; } #dicaCons.aberto .ef, #dicaCons.aberto .tx, #dicaCons.aberto .pc { display: block; }
  #dicaCons .tt::after { content: " ▾"; color: var(--suave); } .chip .ic { font-size: 11px; } .dem-i { font-size: 11px; } .barra.dem { width: 20px; } #topo { padding: 2px 4px; } #topo .linha { gap: 3px; } .chip { gap: 1px; }
}