/* ============================================================
   Vida em Luanda — TEMAS
   A «Noite de Kizomba» (escuro, por defeito) · B «Samakaka» (claro)
   As cores, bordas, sombras e letras vêm de variáveis; o mundo 2.5D não muda.
   ============================================================ */
:root, :root[data-tema=a] {
  --bg:#121014; --bg2:#19161a; --card:#1e1a1d; --card2:#2a2328; --line:#3a3035;
  --ink:#f6efe6; --muted:#b3a79a; --dim:#8f8378;
  --red:#cc092f; --red2:#8f0620; --gold:#ffcb00; --on-gold:#121014; --green:#4cbf74; --blue:#5aa7e0;
  --glass:rgba(18,16,20,.88);
  --borda:1px; --sombra:none; --sombra-sm:none;
  --f-disp:"Bricolage Grotesque"; --f-corpo:Figtree;
  --b-energia:#ffcb00; --b-fome:#4cbf74; --b-humor:#5aa7e0; --b-saude:#ff5a6e; --b-trilho:rgba(255,255,255,.14);
  --tile-k:#2a2328; --tile-k-ink:#f6efe6;
  --faixa:linear-gradient(var(--red) 0 50%,#000 50% 100%);
  --faixa-h:6px;
}
:root[data-tema=b] {
  --bg:#ffffff; --bg2:#ffffff; --card:#ffffff; --card2:#f2eee8; --line:#141012;
  --ink:#141012; --muted:#5b5048; --dim:#6e6258;
  --red:#cc092f; --red2:#9a0723; --gold:#ffcb00; --on-gold:#141012; --green:#2f8f5b; --blue:#2c6fb0;
  --glass:#ffffff;
  --borda:2px; --sombra:4px 4px 0 #141012; --sombra-sm:3px 3px 0 #141012;
  --f-disp:Unbounded; --f-corpo:"DM Sans";
  --b-energia:#ffcb00; --b-fome:#2f8f5b; --b-humor:#2c6fb0; --b-saude:#cc092f; --b-trilho:#efe7dc;
  --tile-k:#ffffff; --tile-k-ink:#141012;
  --faixa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12'%3E%3Crect width='32' height='12' fill='%23141012'/%3E%3Cpolygon points='0,12 8,0 16,12' fill='%23CC092F'/%3E%3Cpolygon points='16,12 24,0 32,12' fill='%23FFCB00'/%3E%3C/svg%3E") repeat-x left center / 32px 12px;
  --faixa-h:12px;
  color-scheme:light;
}

/* ---------- letras ---------- */
html, body { font-family: var(--f-corpo), system-ui, sans-serif; }
h1, h2, h3, .disp, .logo, .cash b, #deco .hd b, .radioNome, .ouroSaldo, .adMarca, .nascTit, .cartaN .t, .jornal .masthead, #telefone .widget .hora, .sheet h3 {
  font-family: var(--f-disp), var(--f-corpo), sans-serif;
}
[data-tema=b] h1, [data-tema=b] h2, [data-tema=b] h3, [data-tema=b] .sheet h3, [data-tema=b] .logo { letter-spacing: -.02em; }
@media (max-width:959px) { [data-tema=b] .logo { font-size: 36px; } }
@media (min-width:960px) { [data-tema=b] .logo { font-size: 56px; } }
.ico { display: block; flex: none; }

/* ---------- cartões, linhas, botões ---------- */
.row, .rel, .post, .cq, .pacote, .grelha button, .inv button, .compor, .jornal .capa, .msgModo, .criador, .abas, .seg, .inp, .lingua, .chip, .tabs button, .ev, .sms-item .bolha, .com {
  border-width: var(--borda); border-style: solid; border-color: var(--line);
}
.ev { border-left-width: 3px; }
[data-tema=b] .row, [data-tema=b] .rel, [data-tema=b] .post, [data-tema=b] .pacote, [data-tema=b] .cq, [data-tema=b] .grelha button, [data-tema=b] .compor, [data-tema=b] .jornal .capa, [data-tema=b] .criador { box-shadow: var(--sombra-sm); }
[data-tema=b] .ev { border-left-width: 6px; }
[data-tema=b] .ev.bom { border-left-color: var(--green); } [data-tema=b] .ev.mau { border-left-color: var(--red); } [data-tema=b] .ev.renda { border-left-color: var(--gold); }
.row, .grelha button, .btn, .icapp .ic, .baixo button, .lado button { transition: transform .1s ease, box-shadow .1s ease, filter .2s; }
.row:active, .grelha button:active { transform: scale(.985); }
.btn { color: var(--on-gold); }
[data-tema=b] .btn { border: 2px solid var(--ink); box-shadow: var(--sombra-sm); }
[data-tema=b] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
[data-tema=b] .btn.ghost { background: #fff; color: var(--ink); }
[data-tema=b] .btn.red { color: #fff; }
[data-tema=b] .btn.sm { box-shadow: 2px 2px 0 var(--ink); }
.tabs button.on, .seg button.on, .sw .txt.on { background: var(--ink); color: var(--bg); }
[data-tema=b] .tabs button.on, [data-tema=b] .seg button.on { background: var(--red); color: #fff; border-color: var(--ink); }
[data-tema=b] .abas button.on { background: var(--gold); color: var(--ink); }
.price { color: var(--gold); }
[data-tema=b] .price { color: var(--ink) !important; background: var(--gold); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; }
[data-tema=b] .grelha button.perigo { color: var(--red); }
[data-tema=b] .row.mine, [data-tema=b] .cq.tem, [data-tema=b] .pacote.dest { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
[data-tema=b] .inp:focus { border-color: var(--red); }
[data-tema=b] select.inp option, [data-tema=b] .lingua select option { background: #fff; color: var(--ink); }
[data-tema=b] .err { color: var(--red); font-weight: 700; }
[data-tema=b] .nota a, [data-tema=b] .row.musica small a { color: var(--red); }
img.mini { background: var(--card2); }
[data-tema=b] img.mini { background: #f2eee8; border: 2px solid var(--ink); }

/* ---------- HUD na rua ---------- */
.topo { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-bottom: 10px; }
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--faixa-h)); height: var(--faixa-h); background: var(--faixa); pointer-events: none; }
:root[data-tema=a] .topo::after { height: 4px; bottom: -4px; }
#avMini { border-color: var(--gold); }
[data-tema=b] #avMini { border: 2px solid var(--ink); border-radius: 14px; background: var(--gold); }
.cash { background: var(--card); border: var(--borda) solid var(--line); }
[data-tema=b] .cash { background: var(--ink); border-color: var(--ink); }
[data-tema=b] .cash small { color: #e2d8cc; }
.bar small { text-shadow: none; color: var(--ink); align-items: center; }
:root[data-tema=a] .bar small { text-shadow: 0 1px 2px #000; }
.bar .bl { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.bar .bn { color: var(--ink); font-size: 10.5px; }
.bar i { background: var(--b-trilho); height: 7px; }
[data-tema=b] .bar i { border: 1.5px solid var(--ink); height: 9px; }
[data-tema=b] .bar i u { border-radius: 0; }
[data-tema=b] .bar.low small { color: var(--red); }
.lado button { display: grid; place-items: center; color: var(--ink); background: var(--glass); border: var(--borda) solid var(--line); }
[data-tema=b] .lado button { box-shadow: var(--sombra-sm); }
.baixo button { background: var(--glass); border: var(--borda) solid var(--line); color: var(--ink); gap: 3px; padding: 9px 4px 8px; }
.baixo button .e { display: grid; place-items: center; height: 24px; }
.baixo #bTel { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
[data-tema=b] .baixo button { box-shadow: var(--sombra-sm); }
[data-tema=b] .baixo #bTel { border-color: var(--ink); }
.baixo button:active, .lado button:active { transform: scale(.95); }
#chatLog div { background: var(--glass); color: var(--ink); border: var(--borda) solid var(--line); }
:root[data-tema=a] #chatLog div { border: 0; background: rgba(18,16,20,.7); }

/* ---------- entrada e carregar ---------- */
:root[data-tema=a] #entrada { background: radial-gradient(120% 55% at 50% 0%, #4a0816 0%, transparent 60%), radial-gradient(90% 45% at 100% 100%, #3a2a0a 0%, transparent 60%), var(--bg); }
[data-tema=b] #entrada { background: var(--faixa), #fff; background-size: 32px 12px, auto; background-repeat: repeat-x, no-repeat; background-position: left top, 0 0; }
[data-tema=b] .logo span { color: var(--red); }
[data-tema=b] .faixa-ao { height: 12px; border-radius: 0; background: var(--faixa); }
[data-tema=b] .faixa-ao::after { display: none; }
[data-tema=b] .criador canvas, [data-tema=b] #pvGrande { background: #f2eee8; border: 2px solid var(--ink); }
[data-tema=b] .sw button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--red); }
[data-tema=b] #viagem { background: #fff; }

/* ---------- folhas, avisos, toasts ---------- */
.sheet { background: var(--bg2); }
[data-tema=b] .sheet { border-top: 2px solid var(--ink); }
@media (min-width:900px) { [data-tema=b] .sheet { border-left: 2px solid var(--ink); } }
[data-tema=b] .veil { background: rgba(20,16,18,.35); }
.tst { animation: tstEntra .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes tstEntra { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
[data-tema=b] .tst { background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--sombra-sm); }
[data-tema=b] .tst.bom { background: #e3f6ea; } [data-tema=b] .tst.mau { background: #ffe3e6; }
[data-tema=b] .ouroTopo { background: #fff4c7; border: 2px solid var(--ink); box-shadow: var(--sombra-sm); }
[data-tema=b] .ouroSaldo, [data-tema=b] .pacote .pq { color: var(--ink); }
[data-tema=b] .radioTopo { background: #efe6ff; border: 2px solid var(--ink); }
[data-tema=b] .aviso { background: #fff4d6; color: #5a4300; border: 2px solid var(--ink); }
[data-tema=b] .sms-item.nova .bolha { background: #e3f6ea; }
[data-tema=b] .compor .fotos button.on { background: #fff4c7; border-color: var(--ink); }
[data-tema=b] .jornal .masthead { border-bottom: 4px solid var(--ink); }
[data-tema=b] .post .acoes button { color: var(--ink); }
[data-tema=b] .grelha button.romance { border-color: #a8487a; }
[data-tema=b] #radioMini { background: #fff; border: 2px solid var(--ink); box-shadow: var(--sombra-sm); }
[data-tema=b] .pill-dilema { border: 2px solid var(--ink); box-shadow: var(--sombra-sm); }

/* ---------- telemóvel ---------- */
#telefone .tela { background: var(--bg); }
[data-tema=b] #telefone .barra { color: var(--ink); }
[data-tema=b] #telefone .bat { border-color: var(--ink); }
[data-tema=b] #telefone .homebar::after { background: var(--ink); }
#telefone .ecra.home { background: radial-gradient(120% 40% at 50% 0%, rgba(204,9,47,.28), transparent 70%), var(--bg); }
[data-tema=b] #telefone .ecra.home { background: #fff; }
#telefone .ecra.home > * { flex-shrink: 0; }
#telefone .widget { background: var(--card); border: var(--borda) solid var(--line); color: var(--ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#telefone .widget .hora { letter-spacing: -.03em; }
#telefone .widget .data { color: var(--muted); opacity: 1; }
#telefone .widget .wkz { color: var(--gold); font-family: var(--f-disp), sans-serif; }
#telefone .widget:first-child::after { content: ""; display: block; height: 5px; margin: 12px -18px -14px; border-radius: 0 0 22px 22px; background: var(--faixa); }
[data-tema=b] #telefone .widget { box-shadow: var(--sombra); }
[data-tema=b] #telefone .widget:first-child { background: var(--ink); color: #fff; border-color: var(--ink); overflow: hidden; }
[data-tema=b] #telefone .widget:first-child .data { color: #e2d8cc; }
[data-tema=b] #telefone .widget:first-child .wkz { color: var(--gold); }
[data-tema=b] #telefone .widget:first-child::after { height: 12px; border-radius: 0; }
#telefone .icapp { color: var(--ink); }
#telefone .icapp .nm { color: var(--ink); text-shadow: none; font-weight: 700; }
#telefone .icapp .ic { box-shadow: none; }
.tom-k { background: var(--tile-k); color: var(--tile-k-ink); }
.tom-r { background: var(--red); color: #fff; }
.tom-g { background: var(--gold); color: #141012; }
:root[data-tema=a] #telefone .icapp .ic.tom-k { border: 1px solid var(--line); }
[data-tema=b] #telefone .icapp .ic { border: 2px solid var(--ink); box-shadow: var(--sombra-sm); border-radius: 16px; }
#telefone .icapp:active .ic { transform: scale(.9); }
#telefone .ecra.home .grade, #telefone .ecra.home .widget { animation: homeEntra .32s cubic-bezier(.2,.9,.3,1) both; }
#telefone .ecra.home .grade { animation-delay: .04s; }
@keyframes homeEntra { from { transform: translateY(14px); opacity: 0; } }
#telefone .dock { background: var(--card); border: var(--borda) solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema=b] #telefone .dock { box-shadow: var(--sombra); }
#telefone .badge { background: var(--red); border: 2px solid var(--bg); }
/* cabeçalho das apps */
#telefone .ecra.app { animation: appEntra .26s cubic-bezier(.2,.9,.3,1); }
@keyframes appEntra { from { transform: translateX(28px); opacity: 0; } }
#telefone .ecra.app .topo { box-shadow: none; padding-bottom: 14px; }
#telefone .ecra.app .topo .t { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-disp), sans-serif; font-size: 17px; }
#telefone .ecra.app .topo.tom-k { background: var(--bg2); color: var(--ink); }
#telefone .ecra.app .topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--faixa-h)); height: var(--faixa-h); background: var(--faixa); }
:root[data-tema=a] #telefone .ecra.app .topo::after { height: 4px; bottom: -4px; }
#telefone .ecra.app .app-body { padding-top: calc(14px + var(--faixa-h)); }
#telefone .voltar { color: inherit; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; padding: 0; }
[data-tema=b] #telefone .voltar { border: 2px solid currentColor; }
#telefone .tel-modal .painel { background: var(--bg2); }
[data-tema=b] #telefone .tel-modal .painel { border-top: 2px solid var(--ink); }

/* ---------- painel dos edifícios: retrato do prédio no topo ---------- */
.sheet.lugar { padding-top: 0; }
.sheet.lugar .puxa { position: relative; z-index: 2; margin: 8px auto -12px; background: rgba(255,255,255,.5); }
.heroi { position: relative; margin: 0 -16px; height: 168px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #3a2a22 0%, #1d1517 60%, #141012 100%); border-radius: 22px 22px 0 0; }
.heroi::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 90px; border-radius: 50%; background: rgba(255,203,0,.08); }
.heroi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--faixa, linear-gradient(90deg, var(--red) 0 50%, #141012 50% 100%)); }
.heroi img { position: relative; height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.fechaSheet { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff; border: 0; cursor: pointer; backdrop-filter: blur(6px); }
.heroiT { padding: 14px 0 6px; display: flex; flex-direction: column; gap: 2px; }
.heroiT h3 { margin: 0; font-size: 24px; line-height: 1.1; }
.heroiT small { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sheet.lugar .sec { margin-top: 14px; }
.sheet .row img.mini { width: 64px; height: 52px; }
.sheet .row img.mini.postal, .row img.mini.postal { border-radius: 12px; background: none; }
[data-tema=b] .heroi { background: #f7f2e9; border-bottom: 2px solid var(--ink); }
[data-tema=b] .heroi::before { background: rgba(204,9,47,.08); }
[data-tema=b] .fechaSheet { background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
[data-tema=b] .row img.mini.postal { border: 2px solid var(--ink); }
@media (min-width:900px) {
  .sheet.lugar { padding-top: 0; }
  .heroi { margin: 0 -20px; height: 210px; border-radius: 22px 0 0 0; }
  .heroiT h3 { font-size: 28px; }
}
@media (min-width:1280px) { .sheet { width: 500px; max-width: 500px; } }

/* ---------- tablet e computador: o telemóvel encosta à direita, alto, e a cidade fica à vista ---------- */
@media (min-width:760px) {
  #telVeil { justify-content: flex-end; align-items: stretch; padding: 14px; background: rgba(0,0,0,.28); }
  #telefone { width: clamp(420px, 36vw, 540px); height: auto; border-radius: 36px; padding: 8px; animation: telLado .3s cubic-bezier(.2,.9,.3,1); }
  @keyframes telLado { from { transform: translateX(60px); opacity: 0; } }
  #telefone .tela { border-radius: 29px; }
  #telefone .ilha { top: 16px; width: 92px; height: 26px; }
  #telefone .grade { grid-template-columns: repeat(5, 1fr); gap: 20px 8px; }
  #telefone .dock { grid-template-columns: repeat(4, 1fr); max-width: 380px; margin-left: auto; margin-right: auto; width: 100%; }
  #telefone .ecra.home { padding: 60px 24px 0; }
  #telefone .app-body { padding: 18px 20px 48px; }
  #telefone .widget .hora { font-size: 60px; }
  #telefone .ecra.app .topo { padding: 50px 16px 14px; }
  .pacotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* a barra de baixo e o HUD não ficam tapados pelo telemóvel */
  body.com-tel #toast { left: 24px; right: auto; transform: none; bottom: 24px; }
}
@media (min-width:1280px) {
  #telefone { width: clamp(480px, 32vw, 560px); }
  #telefone .grade { grid-template-columns: repeat(5, 1fr); }
  .topo { width: 460px; }
  .bar small { font-size: 11.5px; }
  .baixo button { max-width: 150px; padding: 11px 6px 9px; font-size: 13px; }
  .lado button { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { #telefone { animation: none !important; } }

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  #telefone .ecra.app, #telefone .ecra.home .grade, #telefone .ecra.home .widget, .tst { animation: none; }
  .row, .grelha button, .btn, .icapp .ic, .baixo button, .lado button { transition: none; }
}

/* o salário da vaga a dourado não se lê no fundo branco do tema B */
[data-tema=b] .row b span[style*="--gold"] { color: var(--red) !important; }
/* com o painel do edifício aberto à direita, a barra de baixo afasta-se para não ficar tapada */
@media (min-width:900px) { .baixo { transition: transform .22s ease-out; } body:has(.veil .sheet) .baixo { transform: translateX(-230px); } }
@media (min-width:1280px) { body:has(.veil .sheet) .baixo { transform: translateX(-250px); } }

/* ---------- ícones no lugar dos emojis (postos pelo idioma.js) ---------- */
i.ie { display: inline-flex; align-items: center; justify-content: center; font-style: normal; vertical-align: -0.2em; margin-right: .35em; color: var(--gold); line-height: 1; }
i.ie svg { width: 1.1em; height: 1.1em; }
[data-tema=b] i.ie { color: var(--red); }
.row .e i.ie, .e > i.ie { margin: 0; }
.row .e i.ie svg, .grelha .e i.ie svg { width: 24px; height: 24px; }
.row .e { display: grid; place-items: center; }
.row:has(> .e > i.ie) > .e, .grelha button .e:has(i.ie) { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
[data-tema=b] .row:has(> .e > i.ie) > .e, [data-tema=b] .grelha button .e:has(i.ie) { background: #fff3c2; border: 2px solid var(--ink); }
[data-tema=b] .row .e i.ie, [data-tema=b] .grelha .e i.ie { color: var(--ink); }
.btn i.ie, button.btn i.ie { color: inherit; }
.tst i.ie { color: inherit; }
.chip i.ie { margin-right: .25em; }
.svc { white-space: nowrap; } .svc svg { vertical-align: -2px; margin-right: 2px; color: var(--gold); } [data-tema=b] .svc svg { color: var(--red); }
button.lnk { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
[data-tema=b] button.lnk { color: var(--red); }
#tsCaixa { margin: 6px 0 12px; min-height: 65px; }