/* E63 · tijolos, moedas e árvore de evolução no site antigo. Celular primeiro (390 e 360 px). Minúsculas, sem emoji, nada sublinhado, alvos >= 44 px. Prefixo evo-. */
body.evo-aberto { overflow: hidden; }
.evo-hud, .evo-hud *, .evo-folha, .evo-folha *, .evo-arv, .evo-arv *, .evo-faixa, .evo-faixa *, .evo-cp, .evo-cp * { box-sizing: border-box; text-decoration: none; }
.evo-hud[hidden], .evo-chip[hidden], .evo-fundo[hidden], .evo-folha[hidden], .evo-arv[hidden] { display: none; }
/* ---------- HUD no rodapé ---------- */
#rodape .evo-hud, .evo-hud { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: calc(100% - 60px); margin: 0 0 2px; }
.evo-chips { display: flex; gap: 6px; }
.evo-chip { position: relative; flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px 2px 9px; border: 3px solid var(--ink, #1e2430); border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--ink, #1e2430); font: inherit; font-weight: 900; font-size: 16px; line-height: 1; box-shadow: 0 3px 0 rgba(30, 36, 48, .3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.evo-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(30, 36, 48, .3); }
.evo-chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink, #1e2430); }
.evo-chip-t { background: #ffe27a; }
.evo-chip-m { background: #fff; }
.evo-ic { flex: none; width: 21px; height: 21px; fill: none; stroke: var(--ink, #1e2430); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.evo-ic-g { width: 30px; height: 30px; }
.evo-n { font-size: 18px; min-width: 1ch; font-variant-numeric: tabular-nums; }
.evo-rot { font-size: 11.5px; font-weight: 800; color: var(--mudo, #4d5a6c); white-space: nowrap; }
.evo-previa .evo-chip { border-style: dashed; background: rgba(255, 255, 255, .9); }
.evo-previa .evo-chip-t .evo-rot { color: #8a4b00; }
.evo-sem .evo-rot { color: var(--ink, #1e2430); }
.evo-pop { animation: evo-pop .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes evo-pop { 0% { transform: scale(1); } 30% { transform: scale(1.22); box-shadow: 0 0 0 7px rgba(255, 210, 63, .8), 0 3px 0 rgba(30, 36, 48, .3); } 100% { transform: scale(1); } }
.evo-hud .evo-obj { width: 0; min-width: 100%; }
.evo-obj { margin: 0; font-size: 11.5px; line-height: 1.25; color: var(--mudo, #4d5a6c); text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .9); max-width: 100%; }
.evo-hud .evo-obj { width: auto; min-width: 0; align-self: flex-start; background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 3px 8px; text-shadow: none; }
/* ---------- camada das peças voando ---------- */
.evo-cv { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 130; }
.evo-faixa { position: fixed; z-index: 131; left: 50%; top: calc(86px + env(safe-area-inset-top)); width: min(92vw, 420px); display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px 12px; border: 3.5px solid var(--ink, #1e2430); border-radius: 22px; background: #ffd23f; color: var(--ink, #1e2430); box-shadow: 0 5px 0 rgba(30, 36, 48, .35); transform: translate(-50%, -140%) scale(.9); opacity: 0; pointer-events: none; transition: transform .38s cubic-bezier(.2, 1.4, .4, 1), opacity .22s; }
.evo-faixa.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.evo-f-moeda { background: #fff4b8; } .evo-f-obra { background: #72dca0; }
.evo-f-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 3px solid var(--ink, #1e2430); border-radius: 50%; background: #fff; }
.evo-f-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--ink, #1e2430); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.evo-f-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.evo-f-tx b { font-size: 21px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-f-tx em { font-style: normal; font-size: 13.5px; font-weight: 800; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-faixa.on .evo-f-ic { animation: evo-giro .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes evo-giro { 0% { transform: scale(.3) rotate(-90deg); } 100% { transform: none; } }
/* ---------- folha das moedas ---------- */
.evo-fundo { position: fixed; inset: 0; z-index: 62; background: rgba(30, 36, 48, .42); }
.evo-folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 63; margin: 0 auto; width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; align-content: start; background: #fff9e8; border: 3.5px solid var(--ink, #1e2430); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -5px 0 rgba(30, 36, 48, .25); color: var(--ink, #1e2430); }
.evo-fhd, .evo-ahd { display: flex; align-items: center; gap: 10px; }
.evo-fhd h2 { flex: 1; margin: 0; font-size: 24px; line-height: 1.1; }
.evo-ib { flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 3px solid var(--ink, #1e2430); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(30, 36, 48, .3); cursor: pointer; }
.evo-ib svg { width: 22px; height: 22px; fill: none; stroke: var(--ink, #1e2430); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.evo-ib:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(30, 36, 48, .3); }
.evo-mtot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #ffe27a; border: 3px solid var(--ink, #1e2430); border-radius: 16px; }
.evo-mtot b { font-size: 36px; line-height: 1; } .evo-mtot span { font-size: 15px; font-weight: 800; }
.evo-mhoje { margin: 0; font-size: 14px; font-weight: 800; color: var(--mudo, #4d5a6c); }
.evo-mlista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.evo-mlista li { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; background: #fff; border: 3px solid var(--ink, #1e2430); border-radius: 14px; font-size: 15px; font-weight: 800; }
.evo-mlista b { font-size: 16px; }
.evo-nota { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--mudo, #4d5a6c); font-weight: 700; }
.evo-obj-f { margin-top: 2px; }
.evo-ver { display: grid; gap: 8px; padding: 12px 14px; background: #fff; border: 3px dashed var(--ink, #1e2430); border-radius: 16px; font-size: 14px; line-height: 1.35; }
.evo-ver b { font-size: 16px; } .evo-ver:has(b:empty) b { display: none; }
.evo-cod { display: block; font: 900 22px/1.2 inherit; letter-spacing: .08em; padding: 8px 12px; background: #fff3c4; border: 3px solid var(--ink, #1e2430); border-radius: 12px; text-align: center; user-select: all; }
.evo-btn, .evo-go, .evo-bt { min-height: 46px; padding: 0 18px 2px; border: 3px solid var(--ink, #1e2430); border-radius: 999px; background: #ffd23f; color: var(--ink, #1e2430); font: inherit; font-weight: 900; font-size: 16px; box-shadow: 0 4px 0 rgba(30, 36, 48, .35); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.evo-btn:active, .evo-go:active, .evo-bt:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(30, 36, 48, .35); }
.evo-btn:focus-visible, .evo-go:focus-visible, .evo-bt:focus-visible, .evo-q:focus-visible, .evo-ib:focus-visible, .evo-cp-bt:focus-visible, .evo-chip-r:focus-visible, .evo-l-no:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink, #1e2430); }
/* ---------- árvore ---------- */
.evo-arv { position: fixed; inset: 0; z-index: 64; display: flex; flex-direction: column; background: #0b1117; color: #e9eef5; padding-top: env(safe-area-inset-top); }
.evo-ahd { flex: none; padding: 8px 12px 6px; }
.evo-arv .evo-ib { background: #fff; }
.evo-att { flex: 1; min-width: 0; } .evo-att h2 { margin: 0; font-size: 21px; line-height: 1.1; } .evo-att p { margin: 1px 0 0; font-size: 13px; font-weight: 800; color: #9fb0c3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-bt { min-height: 44px; font-size: 15px; padding: 0 16px 2px; background: #1b2735; color: #e9eef5; border-color: #3b4f66; box-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.evo-bt[aria-pressed="true"] { background: #ffd23f; color: var(--ink, #1e2430); border-color: #fff; }
.evo-chips-r { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.evo-chips-r::-webkit-scrollbar { display: none; }
.evo-chip-r { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px 2px 10px; border: 2.5px solid #2c3d51; border-radius: 999px; background: #121c27; color: #cfd8e2; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.evo-chip-r i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); } .evo-chip-r.on { border-color: var(--c); color: #fff; background: #1b2735; }
.evo-palco { position: relative; flex: 1 1 auto; min-height: 0; touch-action: none; }
.evo-palco[hidden] { display: none; }
.evo-cv-a { display: block; touch-action: none; cursor: grab; }
.evo-carrega::after { content: "carregando o plano da cidade"; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-weight: 800; color: #9fb0c3; }
.evo-asaldo { position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 2px 10px; border-radius: 999px; background: #ffe27a; border: 3px solid #fff; color: var(--ink, #1e2430); font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.evo-asaldo[hidden] { display: none; } .evo-asaldo b { font-size: 19px; font-variant-numeric: tabular-nums; } .evo-asaldo.evo-previa { border-style: dashed; }
.evo-centro { position: absolute; right: 12px; top: 8px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #1b2735; cursor: pointer; }
.evo-centro svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.evo-obj-a { flex: none; padding: 4px 14px calc(8px + env(safe-area-inset-bottom)); text-align: center; color: #9fb0c3; text-shadow: none; font-weight: 800; }
.evo-msg { position: absolute; left: 50%; bottom: 12px; z-index: 3; transform: translate(-50%, 10px); max-width: 92vw; margin: 0; padding: 9px 18px 11px; border-radius: 999px; background: #fff; color: var(--ink, #1e2430); border: 3px solid var(--ink, #1e2430); font-weight: 900; font-size: 15px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.evo-msg.on { opacity: 1; transform: translate(-50%, 0); } .evo-msg.ok { background: #72dca0; }
.evo-cartao { flex: none; max-height: 52dvh; overflow-y: auto; margin: 0; padding: 12px 14px 12px; display: grid; gap: 8px; background: #121c27; border-top: 3px solid var(--c, #3b4f66); border-radius: 22px 22px 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .45); }
.evo-cartao[hidden] { display: none; }
.evo-c-hd { display: flex; align-items: center; gap: 10px; }
.evo-c-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--c); background: #0e151d; }
.evo-c-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.evo-c-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .evo-c-tt b { font-size: 19px; line-height: 1.1; } .evo-c-tt span { font-size: 12.5px; font-weight: 800; color: var(--c); }
.evo-c-desc { margin: 0; font-size: 14px; line-height: 1.35; color: #cfd8e2; font-weight: 700; }
.evo-c-st { margin: 0; font-size: 15px; font-weight: 900; }
.evo-c-bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; } .evo-c-bar i { display: block; height: 100%; background: var(--c); border-radius: 99px; transition: width .5s cubic-bezier(.2, 1, .3, 1); }
.evo-c-falta { margin: 0; font-size: 13px; font-weight: 800; color: #ffb27a; }
.evo-c-top { margin: 0; font-size: 12.5px; font-weight: 700; color: #9fb0c3; }
.evo-c-ac { display: grid; gap: 8px; }
.evo-qs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.evo-q { min-height: 44px; border: 2.5px solid #3b4f66; border-radius: 14px; background: #1b2735; color: #e9eef5; font: inherit; font-weight: 900; font-size: 16px; cursor: pointer; } .evo-q.on { background: #fff; color: var(--ink, #1e2430); border-color: #fff; } .evo-q:disabled { opacity: .35; }
.evo-go:disabled { opacity: .45; box-shadow: none; }
.evo-cartao .evo-ver { background: #0e151d; border-color: #3b4f66; color: #e9eef5; } .evo-cartao .evo-cod { background: #1b2735; border-color: #3b4f66; color: #fff; } .evo-cartao .evo-nota { color: #9fb0c3; }
.evo-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; display: grid; gap: 14px; align-content: start; } .evo-lista[hidden] { display: none; }
.evo-l-sec { display: grid; gap: 6px; } .evo-l-sec h3 { margin: 0; font-size: 15px; color: var(--c); }
.evo-l-no { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; border: 2.5px solid #2c3d51; border-radius: 14px; background: #121c27; color: #cfd8e2; font: inherit; text-align: left; cursor: pointer; }
.evo-l-no b { font-size: 15px; } .evo-l-no span { font-size: 12.5px; font-weight: 800; color: #9fb0c3; } .evo-l-no.pode { border-color: var(--c); } .evo-l-no.pronta { background: #1b2735; color: #fff; }
/* ---------- resumo no cartão da cidade ---------- */
.evo-cp { margin: 10px 0 2px; display: grid; gap: 6px; }
.evo-cp-bt { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px 2px 12px; border: 3px solid var(--ink, #1e2430); border-radius: 18px; background: #72dca0; color: var(--ink, #1e2430); font: inherit; font-size: 16px; text-align: left; cursor: pointer; box-shadow: 0 4px 0 rgba(30, 36, 48, .35); }
.evo-cp-bt:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(30, 36, 48, .35); }
.evo-cp-bt b { flex: 1; } .evo-cp-n { font-size: 13px; font-weight: 800; }
.evo-cp-bar { display: flex; gap: 3px; height: 8px; } .evo-cp-bar i { flex: 1; border-radius: 99px; background: rgba(30, 36, 48, .15); position: relative; overflow: hidden; } .evo-cp-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); background: #1e2430; border-radius: 99px; }
@media (max-width: 380px) { .evo-chip { padding: 0 11px 2px 9px; gap: 5px; } .evo-n { font-size: 17px; } .evo-rot { font-size: 11px; } .evo-faixa { top: calc(76px + env(safe-area-inset-top)); } .evo-f-tx b { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .evo-pop, .evo-faixa.on .evo-f-ic { animation: none; } .evo-faixa { transition: opacity .2s; transform: translate(-50%, 0); } .evo-c-bar i { transition: none; } }
body.evo-aberto .evo-faixa { top: calc(128px + env(safe-area-inset-top)); }