/* style.css - SÍNDICO. Palco fixo 1920x1080. Paleta única de 16 cores nas variáveis abaixo. */
:root {
  --ink: #1a1c2c;
  --plum: #5d275d;
  --red: #b13e53;
  --orange: #ef7d57;
  --yellow: #ffcd75;
  --lime: #a7f070;
  --green: #38b764;
  --teal: #257179;
  --navy: #29366f;
  --blue: #3b5dc9;
  --sky: #41a6f6;
  --cyan: #73eff7;
  --white: #f4f4f4;
  --gray-l: #94b0c2;
  --gray: #566c86;
  --gray-d: #333c57;

  --font: "Courier New", Courier, ui-monospace, monospace;
  --px: 4px; /* "pixel" da interface */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--white);
  font-family: var(--font); font-weight: bold; font-size: 22px; line-height: 1.35; }

.sprite { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* ---------- palco ---------- */
#viewport { position: fixed; inset: 0; background: var(--ink); overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; /* tamanho real definido por fit() em main.js */
  background: var(--navy); }

/* ---------- cena ---------- */
#scene, #sky, #fg, #clouds, #hotspots, #celestial, #wx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#sky canvas, #fg canvas { position: absolute; left: 0; top: 0; }
#scene { z-index: 0; isolation: isolate; }
#sky, #fg { isolation: isolate; }
#celestial, #wx { pointer-events: none; overflow: hidden; }
#clouds { pointer-events: none; overflow: hidden; }
#fg { pointer-events: none; }
#hotspots { pointer-events: none; }
.cloud { position: absolute; left: -300px; opacity: 0; transition: opacity 4s linear; animation: drift linear infinite; will-change: left; }
.cloud.on { opacity: .95; }
.cloud.c1 { top: 150px; animation-duration: 140s; animation-delay: -30s; }
.cloud.c2 { top: 300px; animation-duration: 200s; animation-delay: -120s; transform: scale(.8); }
.cloud.c3 { top: 100px; animation-duration: 260s; animation-delay: -200s; }
.cloud.c4 { top: 220px; animation-duration: 170s; animation-delay: -60s; transform: scale(1.2); }
.cloud.c5 { top: 60px; animation-duration: 230s; animation-delay: -150s; transform: scale(.9); }
.cloud.c6 { top: 360px; animation-duration: 190s; animation-delay: -20s; transform: scale(1.1); }
.cloud.c7 { top: 30px; animation-duration: 210s; animation-delay: -90s; transform: scale(1.3); }
.cloud.c8 { top: 260px; animation-duration: 160s; animation-delay: -110s; }
@keyframes drift { from { left: -300px; } to { left: 100%; } }
body.no-anim .cloud { animation: none; }

/* sol e lua: movem-se pelo céu conforme a hora */
#celestial > div { position: absolute; transition: opacity 2s linear; will-change: left, top; }
#celestial .sun.low canvas { filter: sepia(1) saturate(4) hue-rotate(-18deg); }

/* clima: camadas na frente do prédio (chuva, neblina, calor, relâmpago, escurecimento) */
#wx > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 3s linear; }
#wx .tint { background: #1a2036; }
#wx .fog { background: linear-gradient(to top, rgba(236,240,246,.95) 0%, rgba(236,240,246,.7) 38%, rgba(236,240,246,.25) 70%, rgba(236,240,246,.12) 100%); animation: fogmove 14s ease-in-out infinite alternate; }
#wx .rain { background-repeat: repeat; background-size: 144px 144px; image-rendering: pixelated; }
#wx .rain.r1 { animation: rainfall .55s linear infinite; }
#wx .rain.r2 { background-size: 192px 192px; animation: rainfall .38s linear infinite; }
#wx .flash { background: #eef4ff; }
#wx .heat { background: linear-gradient(to bottom, rgba(255,150,50,.26), rgba(255,200,80,.1) 60%, rgba(255,120,40,.2)); animation: shimmer 3.5s ease-in-out infinite alternate; }
#wx.w-chuva .tint { opacity: var(--tint, .3); } #wx.w-tempestade .tint { opacity: var(--tint, .45); }
#wx.w-nublado .tint { opacity: var(--tint, .2); } #wx.w-neblina .tint { opacity: var(--tint, .12); } #wx.w-parcial .tint { opacity: var(--tint, .05); }
#wx.w-neblina .fog { opacity: .55; }
#wx.w-chuva .r1, #wx.w-tempestade .r1, #wx.w-tempestade .r2 { opacity: .8; }
#wx.w-chuva .r1 { opacity: .55; }
#wx.w-tempestade .flash { opacity: 0; animation: flash 9s linear infinite; }
#wx.w-calor .heat { opacity: .75; }
body.no-anim #wx .rain, body.no-anim #wx .fog, body.no-anim #wx .heat { animation: none; }
body.no-anim #wx .flash { animation: none !important; }
@keyframes rainfall { from { background-position: 0 0; } to { background-position: -48px 144px; } }
@keyframes fogmove { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes shimmer { from { opacity: .45; } to { opacity: .85; } }
@keyframes flash { 0%, 88%, 100% { opacity: 0; } 89% { opacity: .75; } 90% { opacity: .05; } 91% { opacity: .55; } 93% { opacity: 0; } }
.hud-cell .clock { font-size: 16px; opacity: .95; }


.hot { position: absolute; pointer-events: auto; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  box-shadow: none; transform: none; }
.hot:hover { outline: 4px solid var(--yellow); background: rgba(255,205,117,.15); }
.hot::after { content: attr(data-tip); display: none; position: absolute; left: 50%; bottom: 100%; margin-bottom: 14px;
  transform: translateX(-50%); white-space: pre; text-align: center; background: var(--ink); color: var(--white);
  border: 4px solid var(--yellow); padding: 8px 14px; font-size: 20px; z-index: 5; }
.hot:hover::after { display: block; }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 360px; top: 0; right: 0; height: 90px; padding: 6px 24px; display: flex; gap: 16px;
  background: rgba(26,28,44,.82); border-bottom: var(--px) solid var(--ink); align-items: stretch; }
#hud:empty { display: none; }
.hud-cell { line-height: 1.15; flex: 1; background: var(--ink); border: 3px solid var(--gray); padding: 4px 14px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hud-cell .label { font-size: 13px; color: var(--gray-l); text-transform: uppercase; letter-spacing: 1px; }
.hud-cell .value { font-size: 25px; white-space: nowrap; }
.hud-cell.wide { flex: 1.5; }
.neg { color: var(--orange); } .pos { color: var(--lime); }

.bar { height: 14px; background: var(--ink); border: 3px solid var(--gray); position: relative; }
.bar > i { display: block; height: 100%; background: var(--green); }
.bar.mid > i { background: var(--yellow); }
.bar.low > i { background: var(--red); }
.hud-cell .bar { margin-top: 2px; height: 12px; }
.hud-cell .note { font-size: 13px; }

/* ---------- menu lateral ---------- */
#sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 360px; background: var(--gray-d);
  border-right: var(--px) solid var(--ink); box-shadow: inset calc(var(--px) * -1) 0 0 var(--gray);
  padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; }
#sidebar:empty { display: none; }
.brand { text-align: center; font-size: 38px; letter-spacing: 4px; color: var(--yellow); margin: 0 0 8px;
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 var(--ink); }
.brand small { display: block; font-size: 14px; letter-spacing: 1px; color: var(--gray-l); text-shadow: none; margin-top: 8px; }
.nav { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 10px 14px; font-size: 24px; position: relative; }
.nav .badge { margin-left: auto; min-width: 34px; text-align: center; background: var(--red); color: var(--white); border: 3px solid var(--ink);
  font-size: 18px; padding: 0 6px; }
.nav .badge.warn { background: var(--orange); color: var(--ink); }
.nav.active { background: var(--green);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--teal), inset var(--px) var(--px) 0 var(--lime), 0 var(--px) 0 var(--ink); }
.nav.spacer { margin-top: auto; }
.side-note { font-size: 14px; color: var(--gray-l); text-align: center; }

/* ---------- botões ---------- */
button { font-family: var(--font); font-weight: bold; font-size: 22px; color: var(--white); background: var(--blue); cursor: pointer; text-align: left;
  border: var(--px) solid var(--ink); padding: 12px 18px; margin: 0;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--navy), inset var(--px) var(--px) 0 var(--sky), 0 var(--px) 0 var(--ink); }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:active:not(:disabled), button.pressed { transform: translateY(var(--px)); box-shadow: inset var(--px) var(--px) 0 var(--navy), 0 0 0 var(--ink); }
button:disabled { background: var(--gray); color: var(--gray-l); cursor: not-allowed;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gray-d), 0 var(--px) 0 var(--ink); }
button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
button.green { background: var(--green);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--teal), inset var(--px) var(--px) 0 var(--lime), 0 var(--px) 0 var(--ink); }
button.red { background: var(--red);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--plum), inset var(--px) var(--px) 0 var(--orange), 0 var(--px) 0 var(--ink); }
button.dark { background: var(--gray-d);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ink), inset var(--px) var(--px) 0 var(--gray), 0 var(--px) 0 var(--ink); }
button.center { text-align: center; }
button.full { width: 100%; }
button.small { font-size: 18px; padding: 8px 14px; }

/* ---------- chamada principal (sobre o prédio) ---------- */
#cta { position: absolute; left: 360px; right: 0; bottom: 36px; display: flex; justify-content: center; pointer-events: none; }
#cta:empty { display: none; }
#cta button { pointer-events: auto; font-size: 30px; padding: 20px 46px; }

/* ---------- janelas (painéis) ---------- */
#panel { position: absolute; left: 400px; top: 118px; right: 40px; bottom: 36px; display: none; }
#panel.open { display: block; }
.win { height: 100%; display: flex; flex-direction: column; background: var(--gray-d);
  border: var(--px) solid var(--ink);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ink), inset var(--px) var(--px) 0 var(--gray), 12px 12px 0 rgba(26,28,44,.6); }
.win-head { display: flex; align-items: center; gap: 18px; padding: 16px 28px; background: var(--ink); border-bottom: var(--px) solid var(--gray); }
.win-head h2 { margin: 0; font-size: 34px; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); }
.win-head .sub { color: var(--gray-l); font-size: 20px; }
.win-head .close { margin-left: auto; }
.win-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px; }
.win-body::-webkit-scrollbar { width: 14px; } .win-body::-webkit-scrollbar-track { background: var(--ink); }
.win-body::-webkit-scrollbar-thumb { background: var(--gray); border: 3px solid var(--ink); }

.box { background: var(--ink); border: 3px solid var(--gray); padding: 16px 20px; }
.box h3 { margin: 0 0 10px; font-size: 24px; color: var(--cyan); text-transform: uppercase; letter-spacing: 1px; }
.note { color: var(--gray-l); font-size: 18px; }
.up { color: var(--lime); } .down { color: var(--orange); }
.row { display: flex; gap: 24px; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tag { display: inline-block; background: var(--plum); font-size: 15px; padding: 1px 10px; border: 3px solid var(--ink); color: var(--white); }
.tag.red { background: var(--red); } .tag.green { background: var(--green); } .tag.blue { background: var(--blue); }
.tag.yellow { background: var(--yellow); color: var(--ink); } .tag.gray { background: var(--gray); } .tag.orange { background: var(--orange); color: var(--ink); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- caixa de entrada ---------- */
.inbox { display: flex; gap: 28px; height: 100%; }
.inbox .list { width: 420px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.ticket { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ink); border: 3px solid var(--gray); font-size: 20px; }
.ticket.current { border-color: var(--yellow); color: var(--yellow); }
.ticket.done { color: var(--gray-l); }
.ticket.done .t { text-decoration: line-through; }
.ticket .mark { flex: none; width: 22px; text-align: center; }
.ticket .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox .detail { flex: 1; min-width: 0; }

.paper { background: var(--yellow); color: var(--ink); position: relative; padding: 30px 36px; margin-top: 12px;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--orange), inset var(--px) var(--px) 0 var(--white); border: var(--px) solid var(--ink); }
.paper::before { content: ""; position: absolute; top: -16px; left: 50%; width: 90px; height: 22px; margin-left: -45px; background: var(--cyan); border: 3px solid var(--ink); }
.paper h2 { margin: 6px 0 12px; font-size: 38px; text-transform: uppercase; letter-spacing: 1px; }
.paper p { margin: 0 0 16px; font-size: 25px; }
.paper .note { color: var(--gray-d); }
.paper .tag { margin-bottom: 4px; }
.involved { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 16px; }
.who { display: flex; gap: 14px; align-items: center; background: var(--ink); color: var(--white); padding: 10px 16px 10px 10px; border: 3px solid var(--gray); min-width: 320px; }
.who .info { font-size: 18px; flex: 1; }
.who .info .name { font-size: 22px; }
.who .info .frase { color: var(--gray-l); font-size: 16px; font-style: italic; }
.opt { display: block; width: 100%; margin-bottom: 14px; font-size: 24px; padding: 16px 22px; background: var(--gray-d);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ink), inset var(--px) var(--px) 0 var(--gray), 0 var(--px) 0 var(--ink); }
.opt .cost { display: block; margin-top: 6px; color: var(--yellow); font-size: 18px; }
.opt .cost.gain { color: var(--lime); }
.result-text { font-size: 28px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.chip { display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--white); padding: 6px 14px 6px 6px; font-size: 20px; border: 3px solid var(--gray); }
.chip.up { border-color: var(--green); } .chip.down { border-color: var(--red); }
.line { margin-bottom: 8px; font-size: 22px; }

/* ---------- moradores ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: var(--ink); border: 4px solid var(--gray); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 270px; }
.card.warn { border-color: var(--orange); } .card.danger { border-color: var(--red); background: #2c1830; }
.card.vacant { border-style: dashed; color: var(--gray-l); align-items: center; justify-content: center; text-align: center; }
.card.focus { box-shadow: 0 0 0 6px var(--yellow); }
.card .top { display: flex; gap: 12px; align-items: center; }
.card .name { font-size: 22px; line-height: 1.15; }
.card .apt { color: var(--yellow); font-size: 18px; }
.card .frase { color: var(--gray-l); font-size: 16px; font-style: italic; min-height: 42px; }
.status { font-size: 18px; }

/* ---------- melhorias ---------- */
.ups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.up-card { background: var(--ink); border: 4px solid var(--gray); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.up-card.owned { border-color: var(--green); }
.up-card h3 { margin: 0; font-size: 26px; color: var(--yellow); }
.up-card .desc { font-size: 18px; color: var(--gray-l); min-height: 70px; }
.up-card .eff { font-size: 18px; }
.up-card .price { font-size: 26px; margin-top: auto; }

/* ---------- finanças ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
.stat .label { font-size: 16px; color: var(--gray-l); text-transform: uppercase; }
.stat .value { font-size: 30px; }
table.report { width: 100%; border-collapse: collapse; font-size: 22px; }
table.report td, table.report th { padding: 8px 6px; border-bottom: 2px dashed var(--gray); text-align: right; }
table.report td:first-child, table.report th:first-child { text-align: left; }
table.report th { color: var(--cyan); font-size: 18px; text-transform: uppercase; }
table.report tr.total td { border-bottom: 0; border-top: 4px solid var(--gray); font-size: 26px; padding-top: 12px; }
.chart { position: relative; height: 260px; margin: 10px 0 30px; border-bottom: 3px solid var(--gray); }
.chart .zero { position: absolute; left: 0; right: 0; height: 2px; background: var(--gray); }
.chart .bar-c { position: absolute; width: 5.4%; background: var(--green); border: 3px solid var(--ink); }
.chart .bar-c.neg { background: var(--red); }
.chart .lbl { position: absolute; bottom: -34px; font-size: 16px; color: var(--gray-l); width: 6%; text-align: center; }

/* ---------- histórico e regras ---------- */
.log { display: flex; flex-direction: column; gap: 8px; }
.log .it { display: flex; gap: 16px; align-items: baseline; background: var(--ink); border: 3px solid var(--gray); padding: 8px 14px; font-size: 20px; }
.log .when { color: var(--gray-l); width: 170px; flex: none; font-size: 17px; }
.log .tag { width: 130px; flex: none; text-align: center; }
ul.how { padding-left: 26px; margin: 0; font-size: 22px; }
ul.how li { margin-bottom: 12px; }
.goal { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; font-size: 22px; }
.goal .bar { flex: 1; height: 22px; }
.goal .gl { width: 330px; flex: none; }

/* ---------- configurações ---------- */
.set { display: flex; align-items: center; gap: 24px; padding: 18px 0; border-bottom: 2px dashed var(--gray); }
.set .what { flex: 1; } .set .what small { display: block; color: var(--gray-l); font-size: 17px; font-weight: normal; }
.switch { width: 150px; text-align: center; }
.switch.on { background: var(--green); }

/* ---------- menu principal ---------- */
.menu-win { display: flex; flex-direction: column; gap: 20px; }
.menu-win .title { font-size: 110px; letter-spacing: 8px; color: var(--yellow); line-height: 1; margin: 0;
  text-shadow: 8px 8px 0 var(--red), 16px 16px 0 var(--ink); }
.menu-win .tag-line { font-size: 26px; color: var(--white); text-shadow: 3px 3px 0 var(--ink); margin: 0 0 24px; }
.menu-win button { font-size: 30px; padding: 22px 30px; }
.menu-foot { font-size: 16px; color: var(--white); text-shadow: 2px 2px 0 var(--ink); }

/* ---------- aviso, sobreposição, fim ---------- */
#toast { position: absolute; left: 360px; width: 1560px; top: 104px; display: flex; justify-content: center; pointer-events: none; z-index: 20; }
#toast .t { background: var(--ink); border: 4px solid var(--yellow); padding: 14px 28px; font-size: 24px; max-width: 1100px; text-align: center; }
#toast .t.bad { border-color: var(--orange); }
#overlay { position: absolute; inset: 0; display: none; background: rgba(26,28,44,.82); z-index: 30; align-items: center; justify-content: center; }
#overlay.open { display: flex; }
#overlay .win { width: 760px; height: auto; }
.big { font-size: 68px; text-align: center; margin: 10px 0 18px; letter-spacing: 3px; }
.big.win { color: var(--lime); } .big.lose { color: var(--orange); }
.center-text { text-align: center; }

/* ---------- fase 3: despejo, reajuste, regimento, "não fazer nada" ---------- */
.opt.ignore { background: var(--ink); color: var(--gray-l); border-style: dashed; }
.opt.ignore .cost { color: var(--gray-l); }
.ev-row { display: flex; gap: 10px; margin-top: 10px; }
.card .evict { margin-top: 10px; width: 100%; text-align: center; }
.fee-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.fee-box button { min-width: 120px; text-align: center; }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; margin-bottom: 22px; }
.rule-card { background: var(--ink); border: 3px solid var(--gray); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.rule-card.active { border-color: var(--green); }
.rule-card h3 { margin: 0; font-size: 24px; color: var(--yellow); }
.rule-card .desc { font-size: 18px; color: var(--gray-l); }
.rule-card .eff { font-size: 17px; }
.rule-card .eff.up { color: var(--lime); } .rule-card .eff.down { color: var(--orange); }
.rule-card button { margin-top: auto; text-align: center; }

/* ---------- fase 4: conversas, portaria ---------- */
.talk { display: flex; gap: 28px; align-items: flex-start; }
.talk-left { width: 400px; flex: none; background: var(--ink); border: 4px solid var(--gray); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.talk-left .portrait { align-self: center; background: var(--gray-d); border: 4px solid var(--gray); padding: 10px; }
.talk-left .name { font-size: 28px; color: var(--yellow); text-align: center; }
.talk-left .apt { text-align: center; color: var(--gray-l); }
.talk-left .frase { color: var(--gray-l); font-style: italic; font-size: 18px; text-align: center; }
.talk-left .tags { justify-content: center; }
.talk-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.talk-right h3 { margin: 0; color: var(--cyan); font-size: 28px; }
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.topic { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: var(--gray-d); }
.topic .ic { font-size: 30px; }
.topic .tn { font-size: 24px; color: var(--yellow); }
.topic .td { font-size: 16px; color: var(--gray-l); font-weight: normal; }
.bubble { background: var(--white); color: var(--ink); border: 4px solid var(--ink); padding: 14px 22px; position: relative; box-shadow: 6px 6px 0 rgba(26,28,44,.6); }
.bubble p { margin: 4px 0 0; font-size: 26px; line-height: 1.35; }
.bubble .speaker { font-size: 16px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.hint { background: var(--ink); border: 3px solid var(--yellow); padding: 10px 16px; font-size: 20px; }
.hint b { color: var(--yellow); }
.warnline { color: var(--orange); }
.note.warnline { color: var(--orange); }
.small-opt { font-size: 19px; padding: 10px 16px; margin-bottom: 8px; }
.porter-top { display: flex; gap: 18px; align-items: flex-start; }
.porter-top .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.porter .name { font-size: 26px; color: var(--yellow); }
.porter h4 { margin: 14px 0 6px; color: var(--cyan); text-transform: uppercase; letter-spacing: 1px; font-size: 18px; }
.order-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cand { display: flex; gap: 14px; align-items: center; background: var(--gray-d); border: 3px solid var(--gray); padding: 10px 14px; margin-bottom: 10px; }
.cand .info { flex: 1; min-width: 0; font-size: 18px; }
.cand .name { font-size: 22px; color: var(--yellow); }
.gate-act { border-top: 3px solid var(--gray); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.gate-act .ga-t { font-size: 22px; } .gate-act .ic { margin-right: 8px; }
.gate-act .eff { font-size: 17px; color: var(--lime); }
.gate-act button { align-self: flex-start; }
.gate-msg { margin-bottom: 16px; }
.gate-msg .intel { margin-top: 10px; }
.gate-msg .intel .line { display: flex; align-items: center; gap: 8px; }
.row > .box { flex: 1; min-width: 0; }

/* reunião mensal */
.opt.promise { border-color: var(--yellow); }
.opt .pledge-hint { color: var(--orange); }
.opt:disabled .cost { color: var(--red); }
.pledge { background: var(--ink); border: 3px solid var(--gray); padding: 10px 14px; margin-bottom: 10px; font-size: 19px; }
.pledge.broken { border-color: var(--red); }
.pledge .pt { font-size: 21px; margin-bottom: 2px; }
.pledge-new { background: var(--ink); color: var(--yellow); border: 3px dashed var(--orange); padding: 10px 14px; margin: 10px 0; font-size: 20px; }
table.minutes { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 19px; }
table.minutes td { padding: 4px 8px; border-bottom: 2px dashed var(--gray-l); vertical-align: top; }
.paper .up { color: #1d6e2c; } .paper .down { color: #a3211a; }
.nav.soon { opacity: .6; } .badge.soon { background: var(--gray); font-size: 12px; padding: 0 6px; }
.tag.urgent { animation: blink 1s steps(2) infinite; }
.hot.siren { outline: 6px solid var(--red); outline-offset: -3px; animation: siren 0.8s steps(2) infinite; }
@keyframes blink { 50% { background: var(--orange); } }
@keyframes siren { 50% { outline-color: var(--yellow); background: rgba(177,62,83,.28); } }
body.no-anim .tag.urgent, body.no-anim .hot.siren { animation: none; }

/* Fase 7: porteiros em dupla, funcionários, datas comemorativas */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.scale-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; font-size: 18px; }
.scale-row b { min-width: 190px; color: var(--yellow); }
.porter-tag { display: inline-block; background: var(--gray-d); border: 3px solid var(--yellow); color: var(--yellow); padding: 4px 10px; margin: 6px 0 10px; font-size: 18px; }
.cand.hired { border-color: var(--green); }
.col { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.box.season { border-color: var(--orange); }
.box.season.on { border-color: var(--yellow); }
.box.season .row { display: flex; gap: 14px; margin-top: 10px; }
.box.season .row .box { flex: 1; }

/* Fase 10: eleição */
.hud-banner { position: absolute; right: 24px; top: 96px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); padding: 2px 14px; font-size: 17px; z-index: 5; letter-spacing: 1px; }
.hud-banner.soon { background: var(--orange); }
.reveal { opacity: 0; animation: reveal .5s steps(5) forwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.no-anim .reveal { animation: none; opacity: 1; }
.predio-tabs { border-bottom: 3px solid var(--gray); padding-bottom: 10px; margin-bottom: 14px; }
.predio-tabs button.locked { opacity: .5; }

/* ---- Vida Pessoal ---- */
.bar { height: 14px; background: var(--gray-d); border: 2px solid var(--ink); margin: 6px 0; }
.bar i { display: block; height: 100%; background: var(--green); } .bar i.mid { background: var(--yellow); } .bar i.bad { background: var(--red); }
.life-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.life-act { display: flex; flex-direction: column; gap: 6px; } .life-act.off { opacity: .72; }
.life-act .ico { font-size: 34px; } .life-act .ti { font-size: 20px; color: var(--cyan); }
.life-opp { display: flex; flex-wrap: wrap; gap: 4px; } .who-pick { padding: 2px; background: var(--gray-d); border: 2px solid var(--gray); } .who-pick:hover:not(:disabled) { border-color: var(--yellow); }
.life-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .life-opts.col { flex-direction: column; align-items: stretch; }
.life-skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .skill .ti { font-size: 20px; color: var(--yellow); }
.note.dim { opacity: .7; }
.life-trophies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .trophy { border: 2px solid var(--gray); padding: 8px; opacity: .6; } .trophy.got { opacity: 1; border-color: var(--yellow); }
.trophy .ti { font-size: 18px; }
.jk-head { display: flex; gap: 16px; align-items: center; } .jk .score { font-size: 26px; color: var(--yellow); }
.jk-log { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; } .jk-round { display: flex; gap: 8px; align-items: center; border: 2px solid var(--gray); padding: 4px 10px; font-size: 26px; }
.jk-round .vs { font-size: 14px; color: var(--gray-l); } .jk-round.vitoria { border-color: var(--green); } .jk-round.derrota { border-color: var(--red); }
.jk-moves { display: flex; gap: 12px; } .move { font-size: 24px; padding: 12px 20px; }
.mem-grid { display: grid; gap: 8px; max-width: 520px; margin: 10px 0; }
.mem-card { aspect-ratio: 1; background: var(--navy); border: 3px solid var(--gray); display: flex; align-items: center; justify-content: center; padding: 2px; }
.mem-card .back { font-size: 36px; color: var(--cyan); } .mem-card.up { background: var(--gray-d); } .mem-card.ok { border-color: var(--green); }
.life-result { border-color: var(--yellow); }

/* menu Prédio: janela maior e guias mais visíveis */
#panel.tall { left: 380px; top: 96px; right: 24px; bottom: 12px; }
#panel.tall .win-head h2 { font-size: 40px; }
#panel.tall .win-body { padding: 28px 34px; }
.predio-tabs { gap: 12px; }
.predio-tabs button { font-size: 24px; padding: 14px 26px; min-width: 210px; }
.predio-tabs button.green { box-shadow: 0 5px 0 var(--yellow); }

/* campanha de terror: céu e prédio mais frios e sombrios */
body.tema-terror #sky { filter: saturate(.55) brightness(.78) hue-rotate(18deg); }
body.tema-terror #fg { filter: saturate(.85) contrast(1.05); }

.camp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 18px 0; }
.camp-card { display: flex; flex-direction: column; gap: 10px; text-align: center; } .camp-card .ico { font-size: 64px; }
.camp-card .thumb { height: 300px; display: flex; align-items: center; justify-content: center; background: var(--ink); border: 3px solid var(--gray); overflow: hidden; }
.camp-card .thumb img { height: 100%; width: auto; image-rendering: pixelated; }
.camp-card h3 { font-size: 22px; margin: 0; } .camp-card p { margin: 0; font-size: 17px; } .camp-card .note { font-size: 15px; }
.camp-card .desc { flex: 1; } .camp-card .play { margin-top: auto; align-self: center; min-width: 220px; }
.camp-pick { text-align: center; } .camp-grid { align-items: stretch; } .camp-card .stars { color: var(--yellow); font-size: 22px; }
.camp-card.tema-terror { border-color: var(--plum); background: #20182c; } .camp-card.tema-torre { border-color: var(--sky); }
.camp-pick .title { font-size: 72px; margin: 0 0 4px; } .camp-pick .tag-line { margin: 0 0 6px; } .camp-pick .camp-grid { margin: 10px 0; }

/* Fase 14: pintura da fachada */
.paint-box .paint-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.paint-box .swatch { width: 190px; height: 70px; border: 4px solid #1b1b1b; padding: 0; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; box-shadow: inset 0 -26px 0 rgba(0,0,0,.45); }
.paint-box .swatch span { font-size: 18px; color: #fff; line-height: 26px; text-shadow: 1px 1px 0 #000; }
.paint-box .swatch.on { outline: 4px solid #ffd54a; }
.paint-box .swatch:disabled { opacity: .55; cursor: default; }

/* Fase 14: Vida Pessoal em guias, conquistas, avisos */
.life-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.life-tabs .tab { display: flex; align-items: center; gap: 8px; font-size: 22px; padding: 8px 16px; background: var(--gray-d, #333c57); color: #fff; border: 3px solid #1b1b1b; cursor: pointer; }
.life-tabs .tab.on { background: var(--yellow, #ffcd75); color: #1a1c2c; }
.life-h { font-size: 24px; color: var(--yellow); margin: 14px 0 8px; }
.life-act .ico canvas, .shop-pic canvas, .pet-pic canvas, .pet-opt canvas, .ach-ic canvas, .skill-head canvas { image-rendering: pixelated; }
.skill-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.pips { display: flex; gap: 4px; margin: 4px 0; } .pip { width: 18px; height: 18px; border: 3px solid #1b1b1b; background: #333c57; } .pip.on { background: var(--yellow, #ffcd75); }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shop-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .shop-card.owned { opacity: .75; border-color: var(--green, #38b764); }
.shop-pic { background: #1b1f33; border: 3px solid #1b1b1b; padding: 8px; align-self: center; } .shop-card .ti { font-size: 20px; color: var(--cyan); } .shop-card .price { font-size: 22px; color: var(--yellow); margin-top: auto; }
.pet-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 12px 0; }
.pet-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #262c47; border: 4px solid #1b1b1b; padding: 10px; cursor: pointer; color: #fff; } .pet-opt.on { border-color: var(--yellow, #ffcd75); background: #343b5c; }
.pet-name { font: inherit; font-size: 22px; padding: 8px 12px; background: #f4f4f4; color: #1a1c2c; border: 4px solid #1b1b1b; width: 320px; max-width: 100%; } .pet-name.small { width: 220px; font-size: 20px; }
.pet-card { display: flex; gap: 20px; align-items: flex-start; } .pet-pic { background: #1b1f33; border: 4px solid #1b1b1b; padding: 14px; } .pet-info { flex: 1; } .pet-stat { margin: 6px 0; }
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.ach { display: flex; gap: 12px; align-items: flex-start; opacity: .65; } .ach.got { opacity: 1; border-color: var(--yellow, #ffcd75); }
.ach-ic { background: #1b1f33; border: 3px solid #1b1b1b; padding: 6px; } .ach .ti { font-size: 21px; color: var(--yellow); } .ach-body { flex: 1; } .ach-prog { margin: 6px 0; }
.bar.big { height: 16px; }
#ach-toasts { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ach-toast { display: flex; gap: 12px; align-items: center; background: #1b1f33; border: 4px solid var(--yellow, #ffcd75); padding: 10px 16px; max-width: 520px; color: #fff; box-shadow: 6px 6px 0 rgba(0,0,0,.5); animation: achIn .35s ease-out; transition: opacity .5s, transform .5s; }
.ach-toast.out { opacity: 0; transform: translateX(40px); } .ach-toast canvas { image-rendering: pixelated; }
.ach-toast .kick { font-size: 14px; color: var(--yellow, #ffcd75); letter-spacing: 1px; } .ach-toast .ti { font-size: 24px; } .ach-toast .note { font-size: 16px; }
@keyframes achIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
.dice-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .die { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #f4f4f4; color: #1a1c2c; border: 4px solid #1b1b1b; font-size: 26px; } .die.bad { background: #b13e53; color: #fff; }
.forca-word { font-size: 44px; letter-spacing: 6px; margin: 12px 0; } .abc { display: flex; flex-wrap: wrap; gap: 6px; } .letter { width: 52px; height: 48px; font-size: 22px; padding: 0; } .letter.hit { background: #38b764; } .letter.miss { background: #b13e53; }
.life-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .life-stats .box.stat { padding: 8px 12px; } .life-stats .note { display: none; } .life-stats .value { font-size: 26px; }
.life-stats .box.stat .life-stress + .note { display: block; }
.life-tabs { margin-top: 0; }
.shop-pic, .pet-pic, .ach-ic, .life-act .ico { background: #9fb2d3; } .life-act .ico { display: inline-block; padding: 6px; border: 3px solid #1b1b1b; align-self: flex-start; }
.life-meta { padding: 8px 14px; } .life-meta .bar { margin: 6px 0 2px; }
.life-event { padding: 8px 14px; } .life-event h3 { font-size: 22px; margin: 0 0 4px; } .life-event p { margin: 4px 0; }
.ach-toast canvas { background: #9fb2d3; padding: 4px; border: 3px solid #1b1b1b; }
.life-stats .box.stat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; } .life-stats .box.stat .label { margin: 0; } .life-stats .bar { width: 120px; margin: 0; } .life-stats .box.stat .life-stress + .note { font-size: 14px; }

/* Fase 15 */
.inbox-fab { position: fixed; left: 384px; top: 104px; z-index: 6; pointer-events: auto; background: var(--yellow); border: 4px solid var(--ink); padding: 8px 10px 4px; line-height: 0; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); }
.inbox-fab canvas { image-rendering: pixelated; }
.inbox-fab:hover { background: #fff; }
.inbox-fab .fab-n { position: absolute; right: -14px; top: -14px; background: var(--red); color: #fff; border: 3px solid var(--ink); min-width: 30px; height: 30px; line-height: 24px; font-size: 20px; text-align: center; padding: 0 4px; }
.adv-btn { position: absolute; top: 14px; right: 16px; z-index: 3; background: var(--green); border: 3px solid var(--ink); padding: 6px 8px 2px; line-height: 0; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.adv-btn:hover { filter: brightness(1.12); }
.adv-btn canvas { image-rendering: pixelated; }
.paper h2 { padding-right: 76px; }

/* Fase 16: ocorrência especial piscando no meio da tela */
.hot.especial { background: var(--red); border: 5px solid var(--yellow); color: #fff; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 30px; letter-spacing: 2px; box-shadow: 6px 6px 0 var(--ink); animation: espblink .7s steps(2) infinite; z-index: 8; }
.hot.especial .esp-ico { font-size: 52px; }
.hot.especial:hover { outline: 0; background: var(--red); filter: brightness(1.2); }
@keyframes espblink { 0% { background: var(--red); transform: scale(1); } 50% { background: #7a1f2b; transform: scale(1.05); } }
body.no-anim .hot.especial { animation: none; }

/* Fase 16: apartamento */
.apto-wrap{position:relative;width:100%;max-width:1400px;margin:8px auto 0;border:4px solid #1a1c2c;background:#0f1020}
.apto-wrap canvas{display:block;image-rendering:pixelated}
.apto-spot{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;box-shadow:none;min-height:0}
.apto-spot:hover,.apto-spot:focus-visible{outline:3px solid #ffd34a;background:rgba(255,211,74,.16)}
.apto-tip{display:none;position:absolute;left:50%;top:-38px;transform:translateX(-50%);white-space:nowrap;background:#10132a;color:#fff6d6;font-size:22px;padding:3px 10px;border:3px solid #ffd34a;z-index:5;pointer-events:none;text-shadow:none}
.apto-spot:hover .apto-tip,.apto-spot:focus-visible .apto-tip{display:block}
.apto-menu-btn{position:absolute;right:12px;top:12px;z-index:6;display:flex;align-items:center;gap:10px;background:#10132a;color:#ffd34a;border:3px solid #ffd34a;padding:8px 14px;cursor:pointer;font-size:24px;letter-spacing:1px;box-shadow:0 4px 0 #000}
.apto-menu-btn:hover{background:#ffd34a;color:#10132a}
.apto-chips{position:absolute;left:12px;top:12px;display:flex;gap:8px;z-index:6;flex-wrap:wrap}
.apto-chips .chip{background:#10132a;color:#fff6d6;border:3px solid #3a4272;padding:3px 10px;font-size:24px;display:flex;align-items:center;gap:6px}
.apto-bubble{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:72%;background:#fffbe8;color:#1a1c2c;border:4px solid #1a1c2c;padding:12px 16px;font-size:26px;line-height:1.25;display:flex;gap:14px;align-items:center;justify-content:space-between;z-index:7;box-shadow:0 5px 0 rgba(0,0,0,.5)}
.apto-bubble span{color:#1a1c2c}
.apto-petmenu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffbe8;color:#1a1c2c;border:4px solid #1a1c2c;padding:14px;display:flex;flex-direction:column;gap:8px;z-index:8;min-width:280px;box-shadow:0 6px 0 rgba(0,0,0,.5)}
.apto-petmenu h3,.apto-petmenu .note{color:#1a1c2c}
.reform-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}.reform-opt.on{outline:3px solid #4fa36a}
.apto-burger{font-size:30px;line-height:1}

/* Fase 17: escolha de personagem */
.char-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:12px 0}
.char-card{display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;padding:10px;border:4px solid #3a4272;color:inherit;font:inherit;background:#161a35}
.char-card.on{border-color:#ffd34a;background:#242a55}
.char-card .pic{image-rendering:pixelated;margin-bottom:6px}
.char-card h3{font-size:24px;margin:4px 0}.char-card .role{color:#ffd34a;font-size:20px}
.char-detail{display:flex;gap:24px;align-items:flex-start;margin-bottom:12px}
.perks{list-style:none;padding:0;margin:8px 0 12px}.perk{font-size:22px;margin:3px 0}.perk.up{color:#8fe3a0}.perk.down{color:#ff9a9a}
.char-pick{max-height:96vh;overflow:auto;padding-top:8px}
.char-pick .title{font-size:44px;margin:4px 0}.char-pick .tag-line{font-size:22px;margin:2px 0 6px}
.char-card h3{font-size:20px;margin:2px 0}.char-card .role{font-size:17px}.char-card .note{font-size:17px;margin:4px 0}
.char-grid{margin:6px 0}.perk{font-size:20px}.char-detail h2{font-size:26px;margin:0}
.char-detail{margin-bottom:8px}.char-pick .play{margin:4px 0}

/* Fase 17: acessibilidade */
button:focus-visible,input:focus-visible,.apto-spot:focus-visible,.char-card:focus-visible{outline:4px solid #ffd34a;outline-offset:2px}
body.fs-115 #panel .win-body,body.fs-115 #overlay .win-body,body.fs-115 #toast{zoom:1.15}
body.fs-130 #panel .win-body,body.fs-130 #overlay .win-body,body.fs-130 #toast{zoom:1.3}
body.font-simple,body.font-simple *{font-family:Arial,Helvetica,sans-serif !important;letter-spacing:0 !important}
body.hc #panel,body.hc .win,body.hc .box{background:#000 !important;color:#fff !important;border-color:#fff !important}
body.hc .box *,body.hc .win-body *{color:#fff}
body.hc .note,body.hc small{color:#e8e8e8 !important}
body.hc button{border:3px solid #fff !important}
body.hc button.green{background:#0b6b2a !important;color:#fff !important}
body.hc button.red{background:#9b1111 !important;color:#fff !important}
body.hc button.dark{background:#1a1a1a !important;color:#fff !important}
body.hc .opt{background:#111 !important}
body.hc .perk.up{color:#7dff9b !important}body.hc .perk.down{color:#ffa0a0 !important}
.dif-box{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}

/* Fase 17: mapa de relações */
.rel-graph{position:relative;width:100%;height:430px;background:radial-gradient(circle at 50% 50%,#1b2250,#0f1226);border:4px solid #3a4272;margin:8px 0}
.rel-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rel-node{z-index:2}
.rel-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;background:#10132a;border:3px solid #3a4272;padding:3px 5px;cursor:pointer;color:#fff;font:inherit;min-height:0}
.rel-node.ok{border-color:#4fd16a}.rel-node.mid{border-color:#ffd34a}.rel-node.bad{border-color:#e24a4a}
.rel-node.sel{outline:4px solid #fff;z-index:3}.rel-node .rn{font-size:15px;line-height:1}
.rel-legend{display:flex;gap:10px;margin:6px 0}.rel-legend .swatch{display:inline-block;width:18px;height:6px}
.rel-row{display:flex;align-items:center;gap:12px;margin:6px 0}.rel-row .grow{flex:1}
.ev-row.wrap{flex-wrap:wrap;gap:6px}
body.hc .rel-graph{background:#000}

.apto-visitor{position:absolute;left:36%;bottom:30%;background:rgba(16,19,42,.6);border:3px solid #ffd34a;padding:4px 8px;cursor:pointer;z-index:5;display:flex;flex-direction:column;align-items:center;color:#fff6d6}
.apto-visitor .apto-vname{font-size:20px}

/* Fase 17: quatro campanhas */
.camp-grid.c4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1800px) { .camp-grid.c4 { grid-template-columns: repeat(4, 1fr); gap: 14px; } .camp-grid.c4 .camp-card h3 { font-size: 19px; } .camp-grid.c4 .camp-card p { font-size: 15px; } .camp-grid.c4 .thumb { height: 240px; } }
.camp-card.tema-condominio { border-color: var(--yellow); background: #2a2616; }

/* Fase 18: escolha do síndico dentro de um modal próprio (tudo até a dificuldade, sem "sobras" sobre o cenário) */
.char-pick { background: #12162f; border: 4px solid #4a5390; box-shadow: 0 0 0 4px #0b0e22, 0 24px 70px rgba(0,0,0,.65); padding: 14px 26px 18px; max-width: min(1560px, 96vw); margin: 0 auto; gap: 8px; }
.char-pick .title { text-shadow: 3px 3px 0 #0b0e22; }
.char-pick .tag-line { text-shadow: none; margin-bottom: 4px; }
.char-pick .char-detail, .char-pick .dif-box { background: #1b2146; }
.char-pick .play, .char-pick > button.dark { align-self: center; }
/* Fase 18: o nó do mapa de relações usa translate(-50%,-50%); o ":active" genérico dos botões o tirava do lugar e o clique se perdia */
.rel-node:active:not(:disabled) { transform: translate(-50%, -50%); box-shadow: none; filter: brightness(1.25); }
.char-pick .char-card .note { font-size: 15px; } .char-pick .char-card .pic canvas { width: 72px !important; height: auto !important; }
.char-pick .perk { font-size: 17px; margin: 2px 0; } .char-pick .char-detail { padding: 10px 16px; } .char-pick .dif-box { padding: 8px 16px; }
.char-pick button.play, .char-pick > button.dark { font-size: 22px; padding: 10px 24px; margin: 2px auto; }
.char-pick .title { font-size: 38px; }

/* Fase 18: luzes de festa que piscam de verdade */
.fgwrap{position:absolute;left:0;top:0;width:100%;height:100%}
.fgwrap canvas{position:absolute;left:0;top:0}
.fgwrap .blink-a{animation:blinkA 1.1s steps(1,end) infinite}
.fgwrap .blink-b{animation:blinkB 1.1s steps(1,end) infinite}
@keyframes blinkA{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes blinkB{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
body.no-anim .fgwrap .blink-b{display:none}

/* Fase 18: apartamento em tela cheia */
#panel.apto-full{left:360px;top:90px;right:0;bottom:0;background:#0f1020}
#panel.apto-full .win{display:none}
.apto-full-wrap{position:absolute;inset:0;display:flex;flex-direction:column;background:#10132a}
.apto-bar{flex:0 0 60px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#10132a;border-bottom:4px solid #3a4272;z-index:7}
.apto-bar .chip{background:#1b2040;color:#fff6d6;border:3px solid #3a4272;padding:2px 10px;font-size:22px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.apto-bar .apto-hint{flex:1;color:#aab2d8;font-size:17px;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.apto-bar .apto-menu-btn{position:static;padding:6px 14px;font-size:22px}
.apto-bar button.dark{padding:6px 12px;font-size:18px}
.apto-full-wrap .apto-wrap{position:relative;flex:1;min-height:0;width:100%;max-width:none;margin:0;border:0}
.apto-full-wrap .apto-wrap canvas{width:100%;height:100%}
.apto-wx{position:absolute;overflow:hidden;pointer-events:none;z-index:2}
.apto-wx i{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 3s linear}
.apto-wx .tint{background:#1a2036}
.apto-wx .fog{background:rgba(236,240,246,.8)}
.apto-wx .rain{background-image:repeating-linear-gradient(105deg,transparent 0 9px,rgba(205,226,255,.85) 9px 11px,transparent 11px 20px);background-size:40px 40px}
.apto-wx .rain.r1{animation:aptorain .5s linear infinite}
.apto-wx .rain.r2{background-size:28px 28px;animation:aptorain .33s linear infinite}
.apto-wx .flash{background:#eef4ff}
.apto-wx.w-chuva .tint{opacity:.35}.apto-wx.w-tempestade .tint{opacity:.55}.apto-wx.w-nublado .tint{opacity:.22}.apto-wx.w-neblina .fog{opacity:.5}
.apto-wx.w-chuva .r1,.apto-wx.w-tempestade .r1,.apto-wx.w-tempestade .r2{opacity:.85}
.apto-wx.w-tempestade .flash{animation:flash 7s linear infinite}
@keyframes aptorain{from{background-position:0 0}to{background-position:-14px 40px}}
body.no-anim .apto-wx .rain{animation:none}

.reform-sw{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;min-width:96px;text-align:center}
.reform-sw .sw-color{display:block;width:72px;height:44px;border:3px solid #1a1c2c}
.reform-sw .sw-price{font-size:16px}
.reform-sw.on{outline:3px solid #ffd34a}

/* Fase 19: contas, admin, editor, Apoie-nos */
.conta-win{width:640px;max-width:96%}
.conta-win.wide,.conta-win.admin{width:1280px;max-width:96%;max-height:92vh;overflow:auto}
.conta-win .tabs{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap}
.conta-win .title.small,.menu-win .title.small{font-size:44px;margin:6px 0}
.userbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.userbar .who{color:#ffd34a;font-size:20px}
.cfield,.conta-win label.cfield{display:flex;flex-direction:column;gap:4px;margin:10px 0;text-align:left}
.clabel{font-size:18px;color:#cfd6ff}
.cfield small,.conta-win .note{font-size:15px;color:#aab2d8}
.conta-win input,.conta-win select,.conta-win textarea{font-family:inherit;font-size:20px;padding:8px 10px;background:#0f1226;color:#fff6d6;border:3px solid #3a4272;width:100%;box-sizing:border-box}
.conta-win input[type=number]{width:140px}
.conta-win textarea{resize:vertical}
.cmsg{padding:8px 12px;border:3px solid #3a8a5a;background:#12301f;color:#d6ffe6;margin:8px 0;font-size:18px}
.cmsg.bad{border-color:#b5413a;background:#3a1416;color:#ffd6d0}
.conta-win .box{margin:12px 0;text-align:left}
.tbl-wrap{overflow:auto;max-height:60vh}
.tbl{width:100%;border-collapse:collapse;font-size:17px}
.tbl th,.tbl td{border-bottom:2px solid #2a2f58;padding:6px 8px;text-align:left;vertical-align:top}
.tbl tr.banned td{color:#ff9a90}
.tbl td button{margin:2px}
.inline-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.inline-form .cfield{min-width:200px;flex:1}
.inc-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.inc-row{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:8px 12px;background:#1b2040;border:3px solid #3a4272}
.inc-row.off{opacity:.55}
.inc-row .meta{font-size:15px;color:#aab2d8;font-weight:normal}
.editor .opt{background:#151a38}
.editor .order-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:6px 0}
.order-row .cfield{margin:0}
/* botão Apoie-nos: quadrado em pixel art (o QR Code é real) */
.apoie-btn{display:flex;flex-direction:column;align-items:center;gap:6px;margin:16px auto 0;padding:10px 12px 8px;background:#f4e9c8;color:#2a1f3d;border:0;cursor:pointer;
  box-shadow:0 -4px 0 0 #2a1f3d,0 4px 0 0 #2a1f3d,-4px 0 0 0 #2a1f3d,4px 0 0 0 #2a1f3d,inset 0 -4px 0 0 #cdbb8c;position:relative}
.apoie-btn:hover{background:#fff6d6;transform:translateY(-2px)}
.apoie-btn:active:not(:disabled){transform:none}
.apoie-qr{display:block;line-height:0;background:#fff;padding:2px;box-shadow:0 0 0 4px #2a1f3d}
.qr-mini{width:96px;height:96px;image-rendering:pixelated;display:block}
.apoie-txt{font-size:18px;letter-spacing:1px;text-transform:uppercase;color:#2a1f3d}
.support-win{width:560px;max-width:96%}
.qr-wrap{display:flex;justify-content:center;margin:12px 0;background:#fff;padding:8px;border:4px solid #2a1f3d}
.qr-big{width:min(380px,70vw);height:auto;image-rendering:pixelated;display:block}
.pixkey{display:flex;flex-direction:column;gap:2px;word-break:break-all;margin:8px 0;padding:8px 10px;background:#0f1226;border:3px solid #3a4272}
.pixkey strong{color:#ffd34a;font-size:20px}
.menu-win .title{white-space:nowrap}
.menu-win:not(.camp-pick):not(.conta-win.wide):not(.admin) .title{font-size:84px}
.menu-win:not(.camp-pick) > button.center{padding-top:10px;padding-bottom:10px}
.apoie-btn:not(.inline){position:fixed;right:28px;top:28px;margin:0;z-index:30}
.userbar{max-width:620px}
.conta-win.wide,.conta-win.admin{background:#12152b;border:4px solid #3a4272;padding:16px 22px;box-shadow:0 0 0 4px #0a0c1c}
.conta-win.wide button,.conta-win.admin button{font-size:18px;padding:6px 14px;min-height:0;line-height:1.2}
.conta-win.wide .tbl td button,.conta-win.admin .tbl td button{padding:4px 10px}
.userbar button{font-size:18px;padding:4px 14px;min-height:0}
.conta-win.wide h3,.conta-win.admin h3{margin:4px 0 8px}

/* Fase 20: modal de login, barra superior, configurações, admin */
#topbar{display:none;position:absolute;left:0;right:0;top:0;height:60px;z-index:40;background:#12162f;border-bottom:4px solid #4a5390;box-shadow:0 4px 0 #0b0e22,0 8px 24px rgba(0,0,0,.5);align-items:center;justify-content:space-between;padding:0 24px;box-sizing:border-box}
#topbar.open{display:flex}
#topbar .tb-left,#topbar .tb-right{display:flex;align-items:center;gap:12px}
.tb-avatar{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#ffd34a;color:#2a1f3d;font-size:24px;font-weight:bold;box-shadow:0 0 0 3px #0b0e22,inset -4px -4px 0 #d9a92a}
.tb-name{color:#fff6d6;font-size:24px}
.tb-badge{font-size:14px;letter-spacing:1px;padding:3px 8px;background:#2c3566;color:#cfd6ff;border:2px solid #4a5390}
.tb-badge.adm{background:#7a2230;border-color:#c24b5d;color:#ffe3e3}
#topbar .tb-btn{font-family:inherit;font-size:18px;padding:6px 16px;min-height:0;line-height:1.2;background:#2c3566;color:#fff6d6;border:0;cursor:pointer;box-shadow:0 0 0 3px #0b0e22,inset 0 -4px 0 #1a2147}
#topbar .tb-btn:hover{background:#3a4682}
#topbar .tb-btn.out{background:#7a2230;box-shadow:0 0 0 3px #0b0e22,inset 0 -4px 0 #4d1520}
#topbar .tb-btn.out:hover{background:#9a2c3d}
.apoie-btn:not(.inline){top:92px !important}
.auth-modal,.conta-win.wide,.conta-win.admin{background:#12162f;border:4px solid #4a5390;box-shadow:0 0 0 4px #0b0e22,0 24px 70px rgba(0,0,0,.65);padding:16px 26px 20px;box-sizing:border-box}
.auth-modal{text-align:center}
.auth-modal .title{font-size:56px !important;text-shadow:3px 3px 0 #0b0e22;margin:4px 0}
.auth-modal .tag-line{font-size:20px;margin:0 0 6px}
.auth-modal .tabs{justify-content:center}
.auth-modal .cfield{margin:6px 0}
.auth-modal button.full{margin-top:8px}
.sub-head{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.sub-head .title.small{margin:0;font-size:40px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cols2 .col{display:flex;flex-direction:column;gap:12px}
.cols2 .box{margin:0}
@media (max-width:1100px){.cols2{grid-template-columns:1fr}}
.box.danger{border-color:#b5413a;background:#2a1118}
.box.danger h3{color:#ff9a90}
.chk{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:17px}
.chk input{width:22px;height:22px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.stat{display:flex;flex-direction:column;align-items:center;min-width:130px;padding:8px 14px;background:#1b2146;border:3px solid #3a4272}
.stat b{font-size:34px;color:#ffd34a}.stat span{font-size:15px;color:#aab2d8;text-align:center}
.stat.bad b{color:#ff9a90}
.inline-sel{min-width:190px}
.inc-card{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:10px 14px;background:#1b2040;border:3px solid #3a4272}
.inc-card.off{opacity:.6}
.inc-main{flex:1;min-width:0;text-align:left}
.inc-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inc-top b{font-size:20px}
.inc-snip{font-size:16px;color:#cfd6ff;margin:3px 0}
.inc-card .meta{font-size:14px;color:#8d96c4}
.inc-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.inc-acts .mini{display:flex;flex-direction:column;font-size:12px;color:#aab2d8}
.inc-acts select{font-size:16px;padding:3px;width:auto}
.tagc{font-size:12px;padding:2px 7px;letter-spacing:1px;border:2px solid #4a5390;background:#2c3566;color:#cfd6ff}
.tagc.minha{background:#1d5a38;border-color:#3a8a5a}.tagc.editada{background:#5a4a1d;border-color:#c9a23a}.tagc.off{background:#5a1d28;border-color:#b5413a}
.ed-title{display:flex;align-items:baseline;gap:12px}.ed-title h3{margin:4px 0}
.ed-bar{position:sticky;top:0;z-index:5;background:#12152b;padding:8px 0;margin:4px 0;border-bottom:3px solid #2a2f58}
.ed-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:16px;align-items:start}
.ed-side{position:sticky;top:64px}
@media (max-width:1100px){.ed-grid{grid-template-columns:1fr}.ed-side{position:static}}
.step{border-color:#3a4272}
.step-head{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.step-head b{font-size:21px;color:#ffd34a;display:block}.step-head small{font-size:15px;color:#aab2d8}
.step-n{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#ffd34a;color:#2a1f3d;font-size:22px;font-weight:bold;box-shadow:0 0 0 3px #0b0e22;flex:none}
.pv-card{background:#f4e9c8;color:#2a1f3d;padding:14px 16px;box-shadow:0 0 0 4px #0b0e22,inset 0 -5px 0 #cdbb8c;text-align:left}
.pv-kicker{font-size:12px;letter-spacing:1px;color:#7a6a3d}
.pv-card h4{font-size:22px;margin:4px 0}.pv-card p{font-size:17px;margin:4px 0 10px}
.pv-opt{background:#fff6d6;border:3px solid #2a1f3d;padding:6px 10px;margin:6px 0;display:flex;flex-direction:column}
.pv-opt b{font-size:16px}.pv-opt small{font-size:13px;color:#6a5a2d}
.pv-meta{font-size:13px;color:#7a6a3d;margin-top:8px}
.pv-check{list-style:none;margin:10px 0 0;padding:8px 12px;background:#0f1226;border:3px solid #3a4272;font-size:16px}
.pv-check li.ok{color:#8be6a5}.pv-check li.no{color:#ff9a90}
.conta-win .order-row{align-items:center}
.conta-win .order-row button,.conta-win .tabs button{min-height:0;height:auto;padding:6px 14px;font-size:18px;line-height:1.2;flex:none}
.conta-win .order-row .cfield{margin:0}
.apto-guest{position:absolute;transform:translate(-50%,-100%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.apto-guest>*{pointer-events:auto}
.apto-guest .apto-vname{background:#10132a;color:#fff6d6;border:3px solid #ffd34a;font-size:18px;padding:1px 8px;white-space:nowrap}
.apto-guest .apto-send{font-size:16px;padding:3px 10px;min-height:0;white-space:nowrap}
/* Fase 21 */
.tb-name{font-size:19px !important}
.auth-modal{padding:26px 48px 30px !important}
.auth-modal .title{font-size:76px !important}
.auth-modal .tag-line{font-size:24px}
.auth-modal .cfield .clabel{font-size:21px}
.auth-modal input{font-size:24px;padding:12px 14px}
.auth-modal button{font-size:24px;padding:12px 18px}
.auth-modal .tabs button{font-size:22px}
.conta-win.wide,.conta-win.admin{padding:22px 36px 28px !important}
.conta-win.wide .box,.conta-win.admin .box{font-size:20px}
.conta-win.wide input,.conta-win.admin input,.conta-win.wide select,.conta-win.admin select,.conta-win.admin textarea{font-size:20px}
.conta-win.wide h3,.conta-win.admin h3{font-size:26px}
.sub-head .title.small{font-size:48px}
.conta-win{width:100% !important;max-width:none !important}
.conta-win.wide,.conta-win.admin{max-height:none !important;overflow:visible}
.conta-win.wide button,.conta-win.admin button{font-size:20px}
/* Fase 22 */
#topbar{z-index:25}
.support-win{margin-top:84px}
.auth-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.auth-wrap .auth-title{font-size:96px;letter-spacing:8px;color:var(--yellow);line-height:1;margin:0 0 22px;white-space:nowrap;text-shadow:6px 6px 0 var(--red),12px 12px 0 var(--ink)}
.auth-modal{width:100% !important;padding:14px 34px 18px !important;gap:0 !important;text-align:center}
.auth-modal .tag-line{font-size:20px !important;margin:0 0 4px !important}
.auth-modal .tabs{margin:4px 0 !important}
.auth-modal .tabs button{font-size:20px !important;padding:6px 16px !important}
.auth-modal .cfield{margin:5px 0 !important}
.auth-modal .cfield .clabel{font-size:18px !important}
.auth-modal input{font-size:20px !important;padding:7px 12px !important}
.auth-modal .cfield small{font-size:13px}
.auth-modal button.full{font-size:22px !important;padding:10px 18px !important;margin-top:8px}
.auth-modal .note{font-size:14px;margin:8px 0 0}
.auth-modal .cmsg{margin:6px 0 0}
.conta-win.admin,.conta-win.wide{gap:8px !important;padding-top:12px !important}
.conta-win.admin .sub-head .title.small,.conta-win.wide .sub-head .title.small{font-size:38px}
.conta-win.admin .tabs{margin:0 !important}
.conta-win.admin .box,.conta-win.wide .box{margin:6px 0 !important;padding:10px 16px}
.conta-win.admin .cmsg{margin:0}
.conta-win.admin .inc-list{gap:6px}
.conta-win.admin .inc-card{padding:6px 12px}
.conta-win.wide,.conta-win.admin{min-height:100%}

/* Fase 23: identidade do prédio */
.ident-line { display: block; margin-top: 4px; color: #ffd54a; font-size: 17px; line-height: 1.1; word-break: break-word; }
.ident-box .ident-row { display: flex; gap: 10px; margin: 8px 0; }
.ident-box .ident-input { flex: 1; font: inherit; font-size: 20px; padding: 6px 10px; border: 4px solid #1b1b1b; background: #fff; color: #1b1b1b; }
.crest-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.crest { width: 64px; height: 72px; display: flex; align-items: center; justify-content: center; border: 4px solid #1b1b1b; background: #e8dcc0; cursor: pointer; padding: 0; line-height: 1; }
.crest.on { outline: 4px solid #ffd54a; background: #ffe9a0; }
.ident-box .swatch.free { width: 120px; height: 56px; }
.ident-box .swatch { border: 4px solid #1b1b1b; padding: 0; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; box-shadow: inset 0 -20px 0 rgba(0,0,0,.45); }
.ident-box .swatch span { font-size: 15px; color: #fff; line-height: 20px; text-shadow: 1px 1px 0 #000; }
.ident-box .swatch.on { outline: 4px solid #ffd54a; }

/* ---------- Fase 23: celular / toque ---------- */
html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; }
body.mobile { user-select: none; -webkit-user-select: none; }
body.mobile input, body.mobile textarea { user-select: text; -webkit-user-select: text; }
#rotate { display: none; position: fixed; inset: 0; z-index: 99999; background: #1a1c2c; color: #fff; align-items: center; justify-content: center; text-align: center; font-family: var(--font); }
#rotate .rot-box { display: flex; flex-direction: column; gap: 14px; padding: 24px; font-size: 18px; }
#rotate .rot-ico { font-size: 64px; }
#rotate b { font-size: 26px; color: #ffd54a; }
/* alvos de toque: ~44px reais com o palco em escala ~0.5 */
body.mobile button { min-height: 80px; }
body.mobile #sidebar { gap: 6px; padding: 10px 16px; }
body.mobile .nav { min-height: 80px; font-size: 26px; }
body.mobile .brand { font-size: 30px; margin: 0; }
body.mobile .brand small { font-size: 12px; margin-top: 2px; }
body.mobile .side-note { display: none; }
body.mobile .crest { width: 72px; height: 72px; }
body.mobile .hot { min-width: 64px; min-height: 64px; }
.ident-box .paint-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ident-line { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.ident-line .crest-img { flex: none; }
/* tela Continuar: cabe sem encostar no rodapé */
.camp-pick { gap: 10px; }
.camp-pick .title { font-size: 80px; }
.camp-pick .tag-line { margin: 0 0 6px; font-size: 22px; }
.camp-pick .camp-card { gap: 6px; padding: 12px 14px; }
.camp-pick .camp-card .thumb { height: 200px; }
.camp-pick .camp-card .play, .camp-pick .camp-card .small { padding: 10px 20px; font-size: 24px; min-width: 0; }
.camp-pick .camp-card .small { font-size: 20px; margin-top: 4px !important; }
.camp-pick > button { padding: 12px 30px; font-size: 24px; margin-bottom: 24px; }
.tb-badge.sup{background:#1c4f9c;border-color:#5aa9ff;color:#e3f1ff}

.tb-sync{font-size:12px;color:#9fd8a8;align-self:center;margin-right:6px;white-space:nowrap}.tb-sync.bad{color:#ffb36b}.tb-btn.upd{background:#1c4f9c;border-color:#5aa9ff;color:#fff}

/* Fase 24: emojis viram pixel art do tamanho da fonte */
canvas.emo{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.16em;margin:0 .12em;image-rendering:pixelated;image-rendering:crisp-edges}

.rot-phone{display:inline-block;width:.55em;height:.95em;border:.1em solid #fff;border-radius:2px;background:#3b5dc9;box-shadow:inset 0 -.14em 0 #1a1c2c;transform:rotate(90deg);animation:rotphone 1.6s steps(4) infinite}
@keyframes rotphone{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}

/* Fase 25: 5 homens em cima, 5 mulheres embaixo; Voltar e Começar lado a lado */
.char-grid{grid-template-columns:repeat(5,1fr)}
.char-actions{display:flex;gap:14px;justify-content:center;align-items:stretch;margin:6px 0}
.char-actions button{margin:0;min-width:200px}.char-actions .play{flex:1;max-width:520px}
body.retrato .char-grid{grid-template-columns:repeat(2,1fr)}
.char-card{padding:6px}.char-card h3{font-size:18px}.char-card .role{font-size:16px}.char-grid{margin:4px 0;gap:8px}
.char-pick .char-actions{position:sticky;bottom:0;background:#0f1330;padding:8px 0 4px;z-index:2}
.char-actions button{height:52px;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:center}
/* Fase 25: política de privacidade */
.legal-win{width:760px;max-width:96%;max-height:90vh}
.legal-win .win-body h3{margin:18px 0 6px;font-size:1.05em}
.legal-p{margin:4px 0;line-height:1.5}
.lnk{color:var(--yellow,#ffd84a);text-decoration:underline;cursor:pointer}
.chk.aceite{display:flex;gap:8px;align-items:flex-start;margin:8px 0;font-size:.9em}
.legal-links{text-align:center}
/* Fase 25: ranking */
#topbar .tb-btn.rank{background:#2f8a43;box-shadow:0 0 0 3px #0b0e22,inset 0 -4px 0 #1c5a2a}
#topbar .tb-btn.rank:hover{background:#3aa855}
.rk-win{padding:16px 20px;max-width:1100px;margin:0 auto;background:#1b2347;border:4px solid #0b0e22;box-shadow:0 0 0 4px #2c3566}
.rk-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.rk-tabs .on{background:#2f8a43}
.rk-scroll{max-height:56vh;overflow:auto;margin:8px 0}
.rk-table{width:100%;border-collapse:collapse;font-size:17px}
.rk-table th{position:sticky;top:0;background:#1a2147;color:#ffd84a;text-align:left;padding:8px 10px}
.rk-table td{padding:7px 10px;border-bottom:2px solid #0b0e22;background:#2c3566}
.rk-table td.pts{font-weight:bold;color:#9fe3a8}
.rk-row.top1 td{background:#8a6a12;color:#fff3b0;font-weight:bold}
.rk-row.top2 td{background:#5d6b7a;color:#f2f6fb;font-weight:bold}
.rk-row.top3 td{background:#7a4a24;color:#ffe2c4;font-weight:bold}
.rk-row.eu td{outline:2px solid #5aa9ff;outline-offset:-2px}
/* Fase 25: conselho fiscal */
.cv-win{width:900px;max-width:96%;padding:16px 20px}
.cv-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.cv-card{flex:1 1 28%;min-width:200px;border:3px solid #0b0e22;padding:10px 12px;opacity:0;animation:cvin .5s forwards;background:#2c3566}
.cv-card.sim{background:#1f5a32}.cv-card.nao{background:#6a2430}.cv-card.abst{background:#4a4f66}
.cv-nome{font-weight:bold;color:#ffd84a}.cv-voto{font-size:1.3em;margin:4px 0}.cv-fala{font-style:italic;line-height:1.35}
.cv-final{opacity:0;animation:cvin .6s forwards;padding:10px 12px;border:3px solid #0b0e22}
.cv-final.ok{background:#17482a}.cv-final.no{background:#5a1f29}
@keyframes cvin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cv-card,.cv-final{animation:none;opacity:1}}
.crise-box{border:3px solid #b8741a;background:#3a2a14;padding:8px 10px;margin:8px 0}.crise-t{font-weight:bold;color:#ffc66b}

/* ============ Fase 27: modo retrato (celular em pé) ============
   Tudo abaixo vale só com body.retrato; desktop e celular deitado não mudam um pixel.
   Palco ~800 de largura: faixa do título + HUD em cima, menu em 3 colunas embaixo, painéis no meio. */
.navgrid { display: contents; }
body.retrato { --r-top: 350px; --r-nav: 372px; }
body.retrato #sidebar { left: 0; right: 0; top: 0; bottom: 0; width: auto; padding: 0; gap: 0; display: block; background: transparent; border: 0; box-shadow: none; pointer-events: none; }
body.retrato .brand { position: absolute; left: 0; right: 0; top: 0; height: 62px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 18px;
  background: var(--gray-d); border-bottom: var(--px) solid var(--ink); font-size: 30px; letter-spacing: 3px; pointer-events: auto; text-shadow: 2px 2px 0 var(--red), 4px 4px 0 var(--ink); }
body.retrato .brand small { display: block; margin: 0; font-size: 13px; letter-spacing: 0; line-height: 1.2; text-align: left; }
body.retrato .brand .ident-line { display: none; }
body.retrato .navgrid { display: grid; position: absolute; left: 0; right: 0; bottom: 0; height: var(--r-nav); grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; padding: 10px 10px 12px;
  background: var(--gray-d); border-top: var(--px) solid var(--ink); box-shadow: inset 0 var(--px) 0 var(--gray); pointer-events: auto; }
body.retrato .nav { flex-direction: column; justify-content: center; text-align: center; gap: 4px; min-height: 0; padding: 6px 6px; font-size: 21px; line-height: 1.05; margin: 0; }
body.retrato .nav > canvas.icon { width: 44px; height: 44px; image-rendering: pixelated; flex: none; }
body.retrato .nav .badge { position: absolute; top: 4px; right: 4px; margin: 0; min-width: 28px; font-size: 16px; }
body.retrato .nav.spacer { margin-top: 0; }
body.retrato .navgrid .nav:last-child { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 16px; }
body.retrato .side-note { display: none; }
body.retrato #hud { left: 0; right: 0; top: 62px; height: auto; padding: 8px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }
body.retrato .hud-cell, body.retrato .hud-cell.wide { flex: none; padding: 4px 10px; min-height: 78px; }
body.retrato .hud-cell .label { font-size: 12px; letter-spacing: 0; }
body.retrato .hud-cell .value { font-size: 22px; }
body.retrato .hud-banner { position: static; grid-column: 1 / -1; font-size: 15px; text-align: center; padding: 4px 8px; }
body.retrato #cta { left: 0; right: 0; bottom: calc(var(--r-nav) + 18px); }
body.retrato #cta button { font-size: 28px; padding: 18px 40px; }
body.retrato #panel.open:not(.menu), body.retrato #panel.tall { left: 10px !important; right: 10px; top: 72px; bottom: 12px; }
body.retrato.em-jogo #panel.open:not(.menu), body.retrato.em-jogo #panel.tall { top: calc(var(--r-top) + 6px); bottom: calc(var(--r-nav) + 10px); }
body.retrato.em-jogo #panel.apto-full { left: 0 !important; right: 0; top: var(--r-top); bottom: var(--r-nav); }
/* vw/vh do CSS medem a tela física, não o palco escalado: em pé usamos medidas do palco */
body.retrato .char-pick { max-width: 780px; max-height: calc(var(--sh) - 160px); }
body.retrato .conta-win.wide, body.retrato .conta-win.admin { width: 780px; max-width: 100%; max-height: calc(var(--sh) - 160px); }
body.retrato .legal-win { width: 780px; max-width: 100%; max-height: calc(var(--sh) - 160px); }
body.retrato .tbl-wrap { max-height: 1000px; }
body.retrato .rk-scroll { max-height: 900px; }
body.retrato .qr-big { width: 380px; }
body.retrato #ach-toasts { top: 72px; left: 10px; right: 10px; }
body.retrato .ach-toast { max-width: none; }
body.retrato .inbox-fab { left: 16px; top: calc(var(--r-top) + 16px); }
body.retrato #toast { left: 0; width: auto; right: 0; top: calc(var(--r-top) + 10px); }
body.retrato #toast .t { max-width: 720px; font-size: 22px; padding: 12px 20px; }
body.retrato #overlay .win { width: min(760px, 96%); max-width: 96%; }
body.retrato #panel.menu[style*="left:110px"] { left: 90px !important; top: 330px !important; }
body.retrato #panel.menu[style*="width:1500px"] { top: 72px !important; transform: translateX(-50%) !important; }
body.retrato .camp-pick .camp-card .thumb { height: 150px; }
body.retrato .camp-pick .title { font-size: 60px; }
body.retrato .camp-pick > button { margin-bottom: 8px; }
/* painéis: colunas largas viram empilhadas/mais estreitas no palco de ~800 */
body.retrato .inbox { flex-direction: column; gap: 14px; height: auto; }
body.retrato .inbox .list { width: auto; }
body.retrato .cards, body.retrato .ups, body.retrato .ach-grid, body.retrato .life-acts, body.retrato .life-skills, body.retrato .life-trophies, body.retrato .shop-grid { grid-template-columns: repeat(2, 1fr); }
body.retrato .stats, body.retrato .life-stats { grid-template-columns: repeat(3, 1fr); }
body.retrato .pet-pick { grid-template-columns: repeat(4, 1fr); }
body.retrato .topics { grid-template-columns: 1fr; }
body.retrato .rule-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
body.retrato .goal .gl { width: 200px; }
body.retrato .ach-toast { padding: 6px 12px; gap: 10px; }
body.retrato .ach-toast .kick { font-size: 11px; } body.retrato .ach-toast .ti { font-size: 19px; } body.retrato .ach-toast .note { font-size: 13px; }
body.retrato .ach-toast canvas { width: 40px; height: 40px; }

/* ============ Fase 28: Multiplayer > Eleição sindical ============ */
.mp-btn { background: var(--plum); color: var(--white); }
.mp-win { max-width: 1700px; background: #14162a; border: var(--px) solid var(--ink); padding: 14px 18px; box-shadow: inset 0 0 0 var(--px) var(--gray-d); }
.mp-card h2 { margin: 0 0 8px; }
.mp-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.mp-btns button:disabled { opacity: .55; cursor: not-allowed; }
.mp-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin: 12px 0; }
.mp-opt { margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.mp-slot { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.mp-slot.vazio { opacity: .75; border-style: dashed; }
.mp-ordem { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mp-ord { border: 3px solid var(--ink); padding: 3px 10px; background: var(--gray-d); color: var(--white); }
.mp-ord.vez { background: var(--green); color: var(--ink); } .mp-ord.feito { opacity: .6; }
.mp-tomado { opacity: .4; }
.mp-aff-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.mp-aff.pos { background: var(--green); color: var(--ink); } .mp-aff.neg { background: var(--red); }
.mp-pass { margin: 6px 0 6px 20px; padding: 0; }
.mp-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.mp-h1 { font-size: 44px; margin: 0; }
.mp-topo { display: flex; gap: 14px; align-items: center; }
.mp-relogio { font-size: 56px; line-height: 1; border: 4px solid var(--ink); padding: 6px 16px; background: var(--ink); color: var(--yellow); }
.mp-res-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mp-win .box { margin-bottom: 12px; }
.mp-sec { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; } .mp-sec h3 { margin: 0; }
.mp-opcao { display: block; width: 100%; text-align: left; margin: 6px 0; font-size: 22px; }
.mp-jlist, .mp-agenda { list-style: none; padding: 0; margin: 6px 0; }
.mp-j { padding: 6px 10px; margin: 4px 0; border-left: 6px solid var(--gray); background: rgba(0,0,0,.18); font-size: 20px; }
.mp-j-fake, .mp-j-insulto, .mp-j-sabotagem, .mp-j-ataque { border-color: var(--red); } .mp-j-exposto { border-color: var(--yellow); background: rgba(255,200,0,.18); }
.mp-j-promessa, .mp-j-campanha, .mp-j-festa, .mp-j-trunfo { border-color: var(--green); } .mp-j-pergunta, .mp-j-debate { border-color: var(--blue); } .mp-j-pacto { border-color: var(--plum); }
.mp-priv { border: 3px dashed var(--yellow); padding: 6px 10px; margin: 8px 0; }
.mp-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.mp-grupo h4 { margin: 0 0 6px; } .mp-acao { margin-bottom: 8px; } .mp-acao .note { display: block; }
.mp-msg { color: var(--yellow); font-size: 22px; }
.mp-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 8px; margin: 8px 0; } .mp-prop { border: 3px solid var(--ink); padding: 8px; background: rgba(0,0,0,.15); }
.mp-agenda li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 2px solid rgba(0,0,0,.2); }
.mp-eleit { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mp-res { border: 3px solid var(--ink); padding: 8px; text-align: center; background: rgba(0,0,0,.12); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mp-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .mp-t-orcamento { background: var(--orange); } .mp-t-sossego { background: var(--teal); } .mp-t-vaidade { background: var(--plum); } .mp-t-fofoqueiro { background: var(--red); }
.mp-simp { font-size: 20px; padding: 2px 10px; border: 3px solid var(--ink); } .mp-s-Fã { background: var(--green); color: var(--ink); } .mp-s-Simpático { background: var(--lime, #8c4); color: var(--ink); } .mp-s-Receptivo { background: var(--yellow); color: var(--ink); } .mp-s-Frio { background: var(--sky, #6ad); color: var(--ink); } .mp-s-Hostil { background: var(--red); }
.mp-riv { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; } .mp-rival { display: flex; gap: 10px; align-items: center; border: 3px solid var(--ink); padding: 8px; text-align: left; background: rgba(0,0,0,.12); } .mp-rival.eu { border-color: var(--green); } .mp-voto.on { border-color: var(--green); background: rgba(80,200,80,.25); }
.mp-bar { height: 14px; border: 3px solid var(--ink); background: var(--ink); } .mp-bar i { display: block; height: 100%; background: var(--yellow); } .mp-bar.eu i { background: var(--green); }
.mp-pesq-lin { margin: 6px 0; }
.mp-podios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 12px 0; } .mp-podio { text-align: center; } .mp-podio.pos1 { border-color: var(--yellow); background: rgba(255,200,0,.22); } .mp-podio.eu { outline: 4px solid var(--green); } .mp-pos { font-size: 48px; } .mp-votos { font-size: 34px; }
.mp-vlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; } .mp-vres { display: flex; gap: 10px; align-items: center; }
.mp-hist summary { cursor: pointer; font-size: 22px; padding: 4px 0; }
.mp-abandonar { margin: 10px 0 30px; }
body.retrato .mp-cols { grid-template-columns: 1fr; }
body.retrato .mp-grupos, body.retrato .mp-props, body.retrato .mp-riv { grid-template-columns: 1fr; }
body.retrato .mp-h1 { font-size: 34px; } body.retrato .mp-relogio { font-size: 44px; }
body.retrato .mp-opcao { font-size: 20px; }
body.retrato .mp-win h1.title, body.retrato .char-pick h1.title { font-size: 40px; white-space: normal; line-height: 1.1; }
body.retrato .mp-h1 { white-space: normal; }

/* Fase 28b: Multiplayer no layout da campanha (cena ao fundo, HUD, menu lateral, janelas) */
body.mp-jogando #panel.open { bottom: 130px; }
body.mp-jogando #cta { bottom: 28px; z-index: 30; }
body.mp-jogando #cta button { font-size: 26px; padding: 16px 40px; }
body.mp-jogando #hud .mp-bar { height: 10px; }
body.mp-jogando .win .box { margin-bottom: 12px; }
body.retrato.mp-jogando #panel.open:not(.menu) { bottom: calc(var(--r-nav) + 96px); }
body.retrato.mp-jogando #cta { bottom: calc(var(--r-nav) + 14px); }

/* Fase 28c: telas do Multiplayer redesenhadas */
.mp-win { max-height: calc(var(--sh, 1080px) - 130px); overflow-y: auto; overflow-x: hidden; }
.mp-win.menu-win { gap: 12px; }
.mp-win h1.title { font-size: 84px; text-align: center; }
.mp-win .tag-line { text-align: center; margin: 0 0 8px; }
.mp-desc { font-size: 24px; line-height: 1.35; margin: 0; text-align: center; }
.mp-fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mp-fato { display: flex; gap: 12px; align-items: flex-start; border: 3px solid var(--navy); padding: 10px 12px; background: #1b1e3a; }
.mp-fato .ic { font-size: 40px; line-height: 1; } .mp-fato b { display: block; color: var(--yellow); } .mp-fato span:not(.ic) { font-size: 20px; color: var(--white); }
.mp-btns3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mp-btns3 button { width: 100%; }
body.mp-jogando .mp-btns3 { display: none; }
.mp-grid { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 10px; }
.mp-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 8px; background: #242a55; color: var(--white); border: 4px solid #3a4272; font: inherit; font-size: 24px; cursor: pointer; text-align: center; }
.mp-chip small { font-size: 18px; color: var(--yellow); }
.mp-chip.on { border-color: var(--lime); background: #1f5a37; }
.mp-chip-img { width: 100%; height: 92px; object-fit: cover; image-rendering: pixelated; display: block; border: 3px solid var(--ink); }
.mp-chip-img + .mp-chip-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mp-chip:has(.mp-chip-img) { padding: 4px; min-height: 0; }
.mp-opt > b { color: var(--yellow); font-size: 24px; }
.mp-cols { grid-template-columns: 1.5fr 1fr; align-items: start; }
.mp-who .mp-slot { justify-content: space-between; border: 3px solid var(--navy); padding: 8px 12px; background: #1b1e3a; }
.mp-slot .note { display: block; }
.mp-pausa { margin-left: 10px; }
.mp-pausado { background: var(--red); color: var(--white); text-align: center; padding: 6px; border: 3px solid var(--ink); margin: 6px 0; font-size: 22px; }
/* escolha de síndico */
.mp-draft-cols { display: grid; grid-template-columns: 560px 1fr; gap: 16px; align-items: start; }
.mp-pcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-pc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: #242a55; border: 4px solid #3a4272; color: var(--white); font: inherit; cursor: pointer; }
.mp-pc b { font-size: 24px; } .mp-pc small { font-size: 16px; color: var(--yellow); text-align: center; }
.mp-pc.on { border-color: var(--lime); background: #1f5a37; } .mp-pc .pic { image-rendering: pixelated; }
.mp-detalhe { display: flex; flex-direction: column; gap: 10px; }
.mp-det-head { display: flex; gap: 18px; align-items: center; } .mp-det-head .pic { image-rendering: pixelated; }
.mp-det-head h2 { margin: 0; font-size: 40px; color: var(--yellow); } .mp-papel { font-size: 24px; color: var(--lime); }
.mp-det-cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; }
.mp-det-col { border: 3px solid var(--navy); padding: 8px 10px; background: #1b1e3a; } .mp-det-col h4 { margin: 0 0 6px; font-size: 24px; }
.mp-det-col ul { margin: 0; padding-left: 20px; font-size: 21px; } .mp-det-col li { margin-bottom: 4px; }
.mp-det-col.pro { border-color: var(--green); } .mp-det-col.pro h4 { color: var(--lime); }
.mp-det-col.con { border-color: var(--red); } .mp-det-col.con h4 { color: #ff8da0; }
.mp-trl { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; margin: 4px 0; font-size: 20px; }
.mp-bar.pos i { background: var(--green); } .mp-bar.neg i { background: var(--red); }
.mp-trunfo { display: flex; gap: 12px; align-items: center; border: 3px solid var(--yellow); padding: 8px 12px; background: #2a2540; } .mp-trunfo .ic { font-size: 38px; } .mp-trunfo b { display: block; color: var(--yellow); }
/* estilo e propostas */
.mp-estilos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mp-estilo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; background: #242a55; border: 4px solid #3a4272; color: var(--white); font: inherit; cursor: pointer; text-align: center; }
.mp-estilo .ic { font-size: 56px; line-height: 1; } .mp-estilo h3 { margin: 0; color: var(--yellow); font-size: 30px; } .mp-estilo p { margin: 0; font-size: 21px; }
.mp-estilo.on { border-color: var(--lime); background: #1f5a37; } .mp-sug { background: var(--yellow); color: var(--ink); }
.mp-tr-l { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .mp-tr-l .tag.pos { background: var(--green); color: var(--ink); } .mp-tr-l .tag.neg { background: var(--red); color: var(--white); }
.mp-props2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.mp-prop2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; background: #242a55; border: 4px solid #3a4272; color: var(--white); font: inherit; cursor: pointer; text-align: center; font-size: 21px; }
.mp-prop2 .ic { font-size: 40px; line-height: 1; } .mp-prop2.on { border-color: var(--lime); background: #1f5a37; } .mp-prop2:disabled { opacity: .45; cursor: not-allowed; }
.mp-num { position: absolute; top: 4px; right: 6px; background: var(--yellow); color: var(--ink); padding: 0 8px; font-size: 20px; }
.mp-extra { color: var(--yellow); font-size: 18px; }
.mp-rodape { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; background: #14162a; padding: 10px 0; border-top: 4px solid var(--navy); margin-top: 10px; }
.mp-rodape > span { margin-right: auto; font-size: 24px; color: var(--yellow); }
.mp-esperando { display: grid; gap: 8px; } .mp-ok { font-size: 36px; color: var(--lime); }
/* jogo: ações, eleitorado, candidatos */
.mp-agenda-strip { border: 3px solid var(--navy); background: #1b1e3a; padding: 8px 12px; margin-bottom: 10px; }
.mp-rec { display: flex; gap: 26px; font-size: 26px; color: var(--yellow); margin-bottom: 6px; }
.mp-pips { display: inline-flex; gap: 4px; } .mp-pip { width: 18px; height: 18px; border: 3px solid var(--ink); background: var(--gray-d); } .mp-pip.on { background: var(--lime); }
.mp-ag-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mp-ag-chip { background: #2d3469; border: 3px solid var(--blue); padding: 2px 4px 2px 10px; font-size: 20px; } .mp-ag-chip .x { margin-left: 8px; background: var(--red); color: var(--white); border: 0; padding: 0 8px; cursor: pointer; font: inherit; }
.mp-cat h3 { color: var(--yellow); margin: 12px 0 6px; font-size: 28px; }
.mp-acoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mp-ac { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; text-align: left; background: #242a55; border: 4px solid #3a4272; color: var(--white); font: inherit; cursor: pointer; font-size: 22px; }
.mp-ac:hover:not(:disabled) { border-color: var(--yellow); } .mp-ac .ic { font-size: 38px; line-height: 1; } .mp-ac b { color: var(--yellow); }
.mp-ac small { font-size: 19px; color: #cfd3f0; } .mp-ac em { font-size: 18px; color: #ff8da0; font-style: normal; } .mp-ac.off { opacity: .55; cursor: not-allowed; }
.mp-custo { display: flex; gap: 8px; } .mp-custo span { background: var(--ink); padding: 0 8px; font-size: 20px; } .mp-custo .gain { background: var(--green); color: var(--ink); }
.mp-res { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.mp-res-top { display: flex; gap: 10px; align-items: center; } .mp-res-top .pic { image-rendering: pixelated; } .mp-res-top .grow { flex: 1; }
.mp-res-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mp-res-btns button { width: 100%; }
.mp-res-log { border-top: 3px solid var(--navy); padding-top: 6px; font-size: 19px; }
.mp-log-h { display: flex; justify-content: space-between; } .mp-log-i { display: flex; justify-content: space-between; color: #cfd3f0; }
.mp-d.pos { color: var(--lime); } .mp-d.neg { color: #ff8da0; }
.mp-eleit { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.mp-pickb { width: 100%; text-align: left; background: #242a55; color: var(--white); font: inherit; cursor: pointer; border: 4px solid #3a4272; }
.mp-pickb:hover:not(:disabled) { border-color: var(--yellow); } .mp-pickb:disabled { opacity: .45; cursor: not-allowed; }
.mp-cand { margin-bottom: 12px; } .mp-cand .mp-rival { display: flex; gap: 12px; align-items: center; } .mp-props-mini { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; font-size: 17px; }
.mp-cand-acs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.mp-cb { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; background: #242a55; border: 4px solid #3a4272; color: var(--white); font: inherit; cursor: pointer; text-align: left; }
.mp-cb .ic { font-size: 28px; line-height: 1; } .mp-cb .n { font-size: 22px; color: var(--yellow); } .mp-cb small { font-size: 16px; color: #cfd3f0; }
.mp-cb.atk { border-color: var(--red); } .mp-cb.off { opacity: .45; cursor: not-allowed; } .mp-cb:hover:not(:disabled) { border-color: var(--lime); }
.mp-perg { margin-bottom: 10px; }
/* tempo e prontos junto do botão */
.mp-clock.urgente { color: #ff4d4d !important; animation: mpPulsa 1s steps(2) infinite; }
@keyframes mpPulsa { 50% { opacity: .45; } }
.mp-cta { display: flex; gap: 18px; align-items: center; pointer-events: auto; background: rgba(20,22,42,.92); border: 4px solid var(--ink); padding: 8px 16px; }
.mp-cta-clock { display: flex; flex-direction: column; align-items: center; } .mp-cta-clock small { font-size: 16px; color: var(--yellow); }
.mp-cta-clock .mp-clock { font-size: 48px; line-height: 1; color: var(--white); border: 0; padding: 0; }
.mp-prontos { display: flex; flex-direction: column; gap: 2px; font-size: 18px; } .mp-pr { color: #cfd3f0; } .mp-pr.ok { color: var(--lime); }
body.mp-jogando #cta { left: 360px; right: 0; }
body.mp-jogando #panel.open { bottom: 150px; }
.mp-modal { max-height: 94%; } .mp-modal .win-body { max-height: calc(var(--sh, 1080px) - 260px); overflow-y: auto; }
body.retrato .mp-win { max-height: calc(var(--sh, 1400px) - 120px); }
body.retrato .mp-draft-cols, body.retrato .mp-det-cols, body.retrato .mp-fatos, body.retrato .mp-btns3 { grid-template-columns: 1fr; }
body.retrato .mp-pcs { grid-template-columns: repeat(5, 1fr); }
body.retrato .mp-cta { flex-wrap: wrap; justify-content: center; padding: 6px 10px; gap: 8px; }
body.retrato .mp-prontos { flex-direction: row; gap: 8px; }
body.retrato.mp-jogando #cta { left: 0; right: 0; }
body.retrato .mp-win h1.title { font-size: 52px; }

/* Fase 28d: acabamento visual MP */
.mp-win, .mp-modal .win-body { scrollbar-width: auto; scrollbar-color: var(--yellow) #1b1e3a; }
.mp-win::-webkit-scrollbar, .mp-modal .win-body::-webkit-scrollbar { width: 16px; }
.mp-win::-webkit-scrollbar-track, .mp-modal .win-body::-webkit-scrollbar-track { background: #1b1e3a; }
.mp-win::-webkit-scrollbar-thumb, .mp-modal .win-body::-webkit-scrollbar-thumb { background: var(--yellow); border: 3px solid #1b1e3a; }
.mp-rodape { flex-wrap: nowrap; z-index: 2; }
.mp-rodape button { font-size: 24px; padding: 10px 18px; white-space: nowrap; }
.mp-rodape > span { font-size: 22px; }
body.retrato .mp-rodape { flex-wrap: wrap; }
.mp-pcs { grid-template-columns: repeat(3, 1fr); }
.mp-draft .mp-pc { padding: 6px 4px; }
.mp-codigo { font: inherit; font-size: 48px; letter-spacing: 12px; text-align: center; text-transform: uppercase; background: #1b1e3a; color: var(--yellow); border: 4px solid var(--navy); padding: 12px; width: 100%; box-sizing: border-box; }
.mp-cfg.so-leitura .mp-chip { pointer-events: none; opacity: .75; }
.menu-win.mp-home .title { font-size: 66px !important; }

/* ---- Fase 30: eleição sindical (resumo, debate final, apuração, custos com ícone) ---- */
.mp-en { color: #ff6b6b; font-weight: bold; display: inline-flex; align-items: center; gap: 4px; }
.mp-din { color: #6bb8ff; font-weight: bold; display: inline-flex; align-items: center; gap: 4px; }
.mp-custo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mp-custo .mp-en, .mp-custo .mp-din { background: var(--ink); padding: 0 8px; }
.mp-risco { color: #ffd166; }
.mp-opcao .mp-din { margin-left: 8px; background: var(--ink); padding: 0 8px; }
.mp-pl { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.mp-pl-b { color: #7dffa0; font-size: 18px; } .mp-pl-m { color: #ff8da0; font-size: 18px; }
.hud-cell .value.warn { color: var(--yellow); }
.mp-dl { font-weight: bold; margin-left: 6px; } .mp-dl.pos { color: #7dffa0; } .mp-dl.neg { color: #ff8da0; }
.mp-rs-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mp-rs-num .box { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mp-rs-num small { color: #cfd3f0; font-size: 18px; } .mp-rs-num b { font-size: 24px; }
.mp-rs-lugar { text-align: center; font-size: 24px; color: var(--yellow); }
.mp-rs.bom { border-color: var(--green); } .mp-rs.ruim { border-color: var(--red); }
body.retrato .mp-rs-num { grid-template-columns: repeat(2, 1fr); }
.mp-df-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 22px; }
.mp-df { display: flex; flex-direction: column; gap: 8px; }
.mp-df-quem, .mp-df-alvo-t, .mp-df-alvo-h { display: flex; align-items: center; gap: 12px; }
.mp-df-seta { text-align: center; color: var(--yellow); }
.mp-df-pergunta { background: var(--ink); padding: 12px; border-left: 6px solid var(--yellow); font-size: 26px; }
.mp-df-dica, .mp-df-espera { color: #cfd3f0; font-size: 20px; }
.mp-df-espera { text-align: center; padding: 20px; }
.mp-df-pista { background: var(--ink); color: var(--yellow); padding: 0 6px; font-size: 16px; text-transform: uppercase; }
.mp-df-res.forte { border-color: var(--green); } .mp-df-res.fraco, .mp-df-res.fuga { border-color: var(--red); }
.mp-df-alvo { margin: 8px 0; }
.mp-ap-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.mp-ap-c { text-align: center; } .mp-ap-pct { font-size: 40px; color: var(--yellow); }
.mp-ap-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.mp-ap-r { display: flex; gap: 8px; align-items: center; background: #242a55; padding: 4px 8px; transition: opacity .2s; }
.mp-ap-r.oculto { opacity: 0; }
.mp-ap-c .mp-bar i { transition: width .3s; }
.mp-df-quem > div:last-child, .mp-df-alvo-t > div:last-child { display: flex; flex-direction: column; }
.mp-ap-c .mp-bar { width: 100%; }

/* ---- Fase 30b: celular em pé, estilo app ---- */
.bt-r { display: none; }
body.retrato .bt-d { display: none; } body.retrato .bt-r { display: inline; }
body.retrato #topbar { gap: 6px; padding-left: 8px; padding-right: 8px; }
body.retrato #topbar .tb-left, body.retrato #topbar .tb-right { gap: 6px; flex-wrap: nowrap; }
body.retrato #topbar .tb-name { font-size: 17px !important; white-space: nowrap; }
body.retrato #topbar .tb-badge { font-size: 11px; padding: 2px 5px; white-space: nowrap; }
body.retrato #topbar .tb-btn { font-size: 15px; padding: 6px 9px; white-space: nowrap; }
body.retrato #topbar .tb-sync { display: none; }
/* painel aberto: ocupa a tela toda (abaixo do HUD) e o menu de baixo some */
body.retrato.em-jogo.painel-aberto .navgrid { display: none; }
body.retrato.em-jogo.painel-aberto #panel.open:not(.menu), body.retrato.em-jogo.painel-aberto #panel.tall { top: 248px; bottom: 8px; }
body.retrato.em-jogo.painel-aberto #panel.apto-full { bottom: 0; }
body.retrato.em-jogo.painel-aberto #cta { bottom: 10px; }
body.retrato.mp-jogando.painel-aberto #panel.open:not(.menu) { bottom: 96px; }
body.retrato.em-jogo.painel-aberto .win-head .close { font-size: 22px; padding: 10px 18px; }
body.retrato .char-pick { padding-bottom: 0; }
body.retrato .char-pick .char-actions { position: sticky; bottom: 0; margin: 8px -26px 0; padding: 10px 26px 12px; background: #12162f; border-top: 4px solid #4a5390; z-index: 5; }
.win-head .close span { white-space: nowrap; }

/* ===== Fase 31: Quem é o assassino? ===== */
.ass-win { width: min(980px, 98%); }
.ass-mapa { position: relative; width: 100%; max-width: 880px; margin: 0 auto 8px; border: 4px solid var(--ink); background: #000; line-height: 0; }
.ass-cv { width: 100%; height: auto; image-rendering: pixelated; display: block; }
.ass-hot { position: absolute; background: transparent; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: none; min-height: 0; }
.ass-hot:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); }
.ass-hot.sel { border-color: var(--lime); background: rgba(120,255,160,.18); }
.ass-hot.plano { border-color: var(--yellow); background: rgba(255,220,80,.16); }
.ass-hot.meu { border-color: #6fd0ff; }
.ass-hot-n { position: absolute; left: 0; bottom: 0; font-size: 14px; color: #6fd0ff; line-height: 1; }
.ass-badge { position: absolute; right: 2px; top: 2px; background: #000; color: var(--yellow); font-size: 18px; line-height: 1; padding: 2px 5px; border: 2px solid var(--yellow); }
.ass-pin { position: absolute; left: 2px; top: 2px; background: #c0392b; color: #fff; font-size: 18px; line-height: 1; padding: 2px 6px; border: 2px solid #fff; }
.ass-head { position: absolute; overflow: hidden; transform: translate(-50%, -100%); pointer-events: none; image-rendering: pixelated; z-index: 3; }
.ass-head canvas { display: block; }
.ass-head.sombra canvas { filter: brightness(0) opacity(.75); }
.ass-head.clicavel { pointer-events: auto; cursor: pointer; outline: 2px dashed var(--yellow); }
.ass-head.alvo { outline: 3px solid #ff4d4d; background: rgba(255,60,60,.35); }
.ass-dica { margin: 4px 0 8px; text-align: center; }
.ass-caixa { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ass-lcab { display: flex; flex-direction: column; }
.ass-oc { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; background: #242a55; border-left: 6px solid var(--yellow); }
.ass-oc.sabotagem { border-left-color: #ff4d4d; }
.ass-mel { display: flex; flex-direction: column; gap: 2px; }
.ass-modos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ass-pessoas { display: flex; flex-wrap: wrap; gap: 6px; }
.ass-pchip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #242a55; border: 3px solid #3a4272; color: var(--white); font: inherit; font-size: 20px; cursor: pointer; }
.ass-pchip.on { border-color: var(--lime); background: #1f5a37; }
.ass-pchip:disabled { opacity: .4; }
.ass-mors { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ass-mor { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: #242a55; border: 4px solid #3a4272; color: var(--white); font: inherit; text-align: center; }
.ass-mor b { font-size: 22px; } .ass-mor small { font-size: 16px; color: var(--yellow); }
.ass-mor.eu { border-color: #6fd0ff; } .ass-mor.morto { opacity: .55; filter: grayscale(1); }
.ass-mor.votar { cursor: pointer; } .ass-mor.votar.on { border-color: #ff4d4d; background: #5a1f2a; }
.ass-h { display: flex; gap: 8px; align-items: center; padding: 4px 8px; margin-bottom: 4px; background: #1a1e3f; border-left: 6px solid #3a4272; }
.ass-h.prova { border-left-color: var(--yellow); } .ass-h.noite { border-left-color: #6a5acd; }
.ass-estrela { color: var(--yellow); } .ass-dh { margin: 10px 0 4px; color: var(--yellow); }
.ass-escolha { display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
.ass-pcs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 56vh; overflow-y: auto; }
.ass-esc-lado { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ass-fim { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ass-fim-l { display: flex; gap: 10px; align-items: center; padding: 6px; background: #242a55; border-left: 6px solid #3a4272; }
.ass-fim-l.ass { border-left-color: #ff4d4d; background: #5a1f2a; } .ass-fim-l.morto { opacity: .7; }
body.retrato.ass-modo .ass-escolha { grid-template-columns: 1fr; }
body.retrato.ass-modo.painel-aberto .navgrid { display: grid; }
body.retrato.ass-modo.painel-aberto #panel.open:not(.menu) { bottom: calc(var(--r-nav) + 96px); top: 248px; }
body.retrato.ass-modo.painel-aberto #cta { bottom: calc(var(--r-nav) + 14px); }
body.retrato.ass-modo .ass-mors { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
body.ass-modo #panel.open:not(.menu) { bottom: 190px; top: 96px; }
body.ass-modo #panel .win.ass-win { display: flex; flex-direction: column; max-height: 100%; width: auto; }
body.ass-modo #panel .win.ass-win .win-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 14px 18px; }
body.ass-modo .ass-mapa { max-width: 760px; }
body.retrato.ass-modo #panel .win.ass-win .win-body { padding: 8px; }
body.retrato.ass-modo .navgrid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
body.retrato.ass-modo .navgrid .nav { min-height: 0; padding: 6px 2px; font-size: 14px; }
body.retrato.ass-modo .navgrid .nav.spacer { grid-column: auto; }
body.retrato.ass-modo { --r-nav: 176px; }
.ass-fim-l > div:last-child { display: flex; flex-direction: column; min-width: 0; }
body.retrato .ass-escolha { grid-template-columns: 1fr; }
body.retrato .ass-pcs { grid-template-columns: repeat(3, 1fr); max-height: 38vh; gap: 6px; }
body.retrato .ass-pcs .mp-pc { padding: 4px 2px; min-width: 0; } body.retrato .ass-pcs .mp-pc b { font-size: 18px; } body.retrato .ass-pcs .mp-pc small { font-size: 13px; }
body.retrato .ass-esc-lado { flex-direction: row; flex-wrap: wrap; justify-content: center; }
body.retrato .ass-fim { grid-template-columns: 1fr; }
.ass-pcs { align-content: start; grid-auto-rows: max-content; overflow-y: auto; }
body.retrato .ass-pcs .mp-pc { height: auto; flex-shrink: 0; }

/* ===== Fase 31b: cenário aberto, gaveta, animações ===== */
body.ass-modo #sky, body.ass-modo #fg, body.ass-modo #celestial, body.ass-modo #clouds, body.ass-modo #wx, body.ass-modo #hotspots { display: none; }
#asscena { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; background: #05071a; }
#asscena .ass-est { position: absolute; inset: 0; }
#asscena .ass-fadein { animation: ass-fi 1.5s ease both; z-index: 1; }
@keyframes ass-fi { from { opacity: 0; } to { opacity: 1; } }
#asscena canvas { image-rendering: pixelated; position: absolute; }
#asscena .ass-fundo { left: 0; top: 0; }
#asscena .ass-nuvem { left: 0; animation: ass-nuv linear infinite; opacity: .9; }
@keyframes ass-nuv { from { transform: translateX(-160px); } to { transform: translateX(var(--w, 1900px)); } }
#asscena .ass-ave { position: absolute; left: 0; animation: ass-voa 46s linear infinite; }
#asscena .ass-ave canvas { position: absolute; left: 0; top: 0; }
#asscena .ass-ave .f1 { animation: ass-flap .7s steps(1) infinite; } #asscena .ass-ave .f2 { animation: ass-flap .7s steps(1) infinite reverse; }
@keyframes ass-flap { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ass-voa { from { transform: translate(-60px, 0); } 50% { transform: translate(calc(var(--w, 1900px) * .5), -40px); } to { transform: translate(var(--w, 1900px), 10px); } }
#asscena .ass-star { position: absolute; width: 4px; height: 4px; background: #fff; animation: ass-tw 2.4s ease-in-out infinite; }
@keyframes ass-tw { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.3); } }
#asscena .ass-cabine { animation: ass-elev 16s ease-in-out infinite; }
#asscena .ass-luz-verm { position: absolute; background: #ff3b3b; animation: ass-blink 1.4s steps(1) infinite; box-shadow: 0 0 14px #f33; }
@keyframes ass-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .1; } }
#asscena.noite .ass-letreiro { position: absolute; box-shadow: 0 0 26px 4px rgba(120,240,255,.45); animation: ass-neon 3.2s steps(1) infinite; pointer-events: none; }
@keyframes ass-neon { 0%, 90%, 94%, 100% { opacity: 1; } 92%, 96% { opacity: .35; } }
#asscena .ass-letreiro { position: absolute; pointer-events: none; }
#asscena .ass-din { position: absolute; z-index: 3; }
#asscena .ass-hot { position: absolute; background: transparent; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: none; min-height: 0; z-index: 2; }
#asscena .ass-hot:hover { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.12); }
#asscena .ass-hot.sel { border-color: var(--lime); background: rgba(120,255,160,.16); box-shadow: 0 0 0 3px rgba(120,255,160,.25); }
#asscena .ass-hot.plano { border-color: var(--yellow); background: rgba(255,220,80,.14); }
#asscena .ass-hot.meu { border-color: #6fd0ff; }
#asscena .ass-hot.vazio { opacity: .8; }
#asscena .ass-rot { position: absolute; left: 3px; top: 2px; font-size: calc(var(--s, 3) * 5px); line-height: 1.15; background: rgba(8,10,28,.72); color: #fff; padding: 0 6px; pointer-events: none; white-space: nowrap; letter-spacing: 1px; }
#asscena .ass-voce { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); font-size: calc(var(--s, 3) * 3.4px); background: #6fd0ff; color: #061a2a; padding: 0 4px; pointer-events: none; }
#asscena .ass-badge { position: absolute; right: 2px; top: 2px; background: #000; color: var(--yellow); font-size: calc(var(--s, 3) * 6px); line-height: 1; padding: 2px 5px; border: 2px solid var(--yellow); pointer-events: none; }
#asscena .ass-pin { position: absolute; left: 2px; bottom: 2px; background: #c0392b; color: #fff; font-size: calc(var(--s, 3) * 6px); line-height: 1; padding: 2px 6px; border: 2px solid #fff; animation: ass-pulse 1s ease-in-out infinite; pointer-events: none; }
@keyframes ass-pulse { 50% { transform: scale(1.25); } }
#asscena .ass-head, #asscena .ass-corpo { position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 4; overflow: visible; }
#asscena .ass-head { overflow: hidden; }
#asscena .ass-corpo { animation: ass-bob 1.7s ease-in-out infinite; }
#asscena .ass-corpo canvas { display: block; position: static; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
@keyframes ass-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -3px; } }
#asscena .ass-corpo.eu canvas { filter: drop-shadow(0 0 4px #6fd0ff) drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
#asscena .ass-corpo.sombra canvas { filter: brightness(0) opacity(.8); }
#asscena .ass-corpo.clicavel { pointer-events: auto; cursor: pointer; outline: 3px dashed var(--yellow); }
#asscena .ass-corpo.alvo { outline: 4px solid #ff4d4d; background: rgba(255,60,60,.35); }
#asscena .ass-dono canvas { position: static; display: block; } #asscena .ass-dono.morto canvas { filter: grayscale(1) brightness(.5); }
/* gaveta (painel do prédio) */
body.ass-modo #panel.open.ass-gaveta { left: auto; right: 24px; top: 100px; bottom: 118px; width: 340px; }
body.ass-modo #panel .win.ass-gav { width: 100%; height: 100%; }
.ass-evento { display: flex; flex-direction: column; gap: 2px; border-left: 6px solid var(--yellow); }
body.ass-modo #cta { left: 380px; right: 372px; bottom: 20px; }
.ass-cta { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; padding: 8px 16px; background: rgba(13,16,48,.9); border: 4px solid var(--ink); }
.ass-cta button { font-size: 26px; padding: 10px 26px; }
.ass-cta .mp-cta-clock { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.ass-prs { display: flex; gap: 6px; flex-wrap: nowrap; }
.ass-pr { position: relative; display: inline-block; line-height: 0; } .ass-pr .ass-head { position: static; transform: none; opacity: .4; } .ass-pr.ok .ass-head { opacity: 1; }
.ass-pr-ok { position: absolute; right: -4px; bottom: -4px; background: #1f8a4c; color: #fff; font-size: 14px; line-height: 1; padding: 1px 3px; font-style: normal; }
body.retrato.ass-modo #cta { left: 0; right: 0; } body.retrato .ass-cta { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 8px; } body.retrato .ass-cta button { font-size: 20px; padding: 8px 14px; } body.retrato .ass-prs { flex-wrap: wrap; justify-content: center; }
body.retrato.ass-modo #panel.open.ass-gaveta { left: 8px; right: 8px; width: auto; top: 740px; }
.ass-reacs { display: flex; gap: 4px; align-items: center; justify-content: center; }
.ass-reac { font-size: 18px; padding: 0 6px; min-height: 0; background: #1a1e3f; border: 2px solid #3a4272; color: #fff; cursor: pointer; } .ass-reac.on { border-color: var(--lime); background: #1f5a37; } .ass-reacs .n { min-width: 14px; font-size: 16px; color: var(--yellow); }
.ass-ardil { border-left: 6px solid #ff4d4d; } .ass-h.anon { border-left-color: #c8a24a; background: #2b2540; }
/* minigames */
.ass-mini { position: absolute; inset: 0; z-index: 45; background: rgba(5,7,24,.78); display: flex; align-items: center; justify-content: center; }
.ass-mini-card { width: min(560px, 92%); background: #151a3a; border: 6px solid var(--ink); padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.ass-mini-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 300px; }
.ass-pad { height: 110px; background: var(--c); opacity: .45; border: 5px solid #000; cursor: pointer; transition: transform .08s; } .ass-pad.on { opacity: 1; transform: scale(1.06); box-shadow: 0 0 24px var(--c); }
.ass-mini-barra { position: relative; width: 460px; max-width: 100%; height: 54px; background: #0a0d20; border: 5px solid #000; }
.ass-mini-zona { position: absolute; top: 0; bottom: 0; background: #2fbf5f; opacity: .9; } .ass-mini-cursor { position: absolute; top: -6px; bottom: -6px; width: 8px; margin-left: -4px; background: #fff; box-shadow: 0 0 8px #fff; }
.ass-mini-fios { display: flex; justify-content: space-between; width: 340px; gap: 120px; } .ass-mini-fios .col { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ass-fio { height: 40px; background: var(--c); border: 4px solid #000; cursor: pointer; } .ass-fio.sel { outline: 4px solid #fff; } .ass-fio.ok { opacity: .35; }
.ass-mini-msg { min-height: 30px; color: var(--yellow); }
/* cenas */
.ass-cine { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; color: #fff; overflow: hidden; animation: ass-cin .35s ease both; }
.ass-cine.saindo { animation: ass-cout .35s ease both; }
@keyframes ass-cin { from { opacity: 0; } to { opacity: 1; } } @keyframes ass-cout { to { opacity: 0; } }
.ass-c-estrelas { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 90px 80px, #bcd, transparent), radial-gradient(3px 3px at 150px 20px, #fff, transparent), radial-gradient(2px 2px at 210px 120px, #cde, transparent), radial-gradient(2px 2px at 60px 150px, #fff, transparent); background-size: 240px 180px; animation: ass-warp 8s linear infinite; opacity: .8; }
.ass-c-estrelas.rapido { animation-duration: 1.4s; } @keyframes ass-warp { to { background-position: -480px 180px; } }
.ass-cine > * { position: relative; }
.ass-cine > .ass-c-estrelas, .ass-cine > .ass-c-sol, .ass-cine > .ass-c-lua, .ass-cine > .ass-c-flash, .ass-cine > .ass-c-conf, .ass-cine > .ass-c-gota { position: absolute; }
.ass-c-grande { font-size: 96px; line-height: 1.05; text-shadow: 0 6px 0 rgba(0,0,0,.55), 0 0 30px rgba(255,255,255,.25); animation: ass-pop .7s .2s cubic-bezier(.2,1.6,.4,1) both; max-width: 90%; }
.ass-c-grande.vermelho, .ass-c-sub.vermelho { color: #ff4b5c; } .ass-c-sub.grande2 { font-size: 54px; text-shadow: 0 4px 0 #000; animation: ass-pop .6s both; }
.ass-c-sub { font-size: 34px; max-width: 70%; animation: ass-fi 1s .9s both; text-shadow: 0 3px 0 rgba(0,0,0,.6); } .ass-c-peq { font-size: 28px; letter-spacing: 6px; animation: ass-fi 1s both; color: #d6dcff; }
@keyframes ass-pop { from { transform: scale(.2) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.c-cargo { background: radial-gradient(circle at 50% 45%, #2a4fa8, #0b1230 70%); } .c-cargo.eq-ass { background: radial-gradient(circle at 50% 45%, #a8202e, #1a0508 72%); } .c-cargo.eq-sin { background: radial-gradient(circle at 50% 45%, #b8861f, #20150a 72%); }
.c-cargo .ass-c-grande { animation-delay: .9s; } .c-cargo .ass-c-peq { animation-delay: .1s; }
.ass-c-fila { display: flex; gap: 18px; align-items: flex-end; justify-content: center; flex-wrap: wrap; max-width: 92%; }
.ass-c-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 22px; } .ass-c-slot.centro { margin-top: 10px; font-size: 30px; }
.ass-c-head { animation: ass-up .6s cubic-bezier(.2,1.5,.4,1) both; } .ass-c-head canvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0,0,0,.45)); } .ass-c-head.sombra canvas { filter: brightness(.25) drop-shadow(0 6px 0 rgba(0,0,0,.4)); } .ass-c-head.eu canvas { filter: drop-shadow(0 0 14px #fff); }
@keyframes ass-up { from { transform: translateY(60px) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.c-noite { background: linear-gradient(180deg, #ff9a4a 0%, #7a2f6b 40%, #0a0d2a 100%); background-size: 100% 300%; animation: ass-cin .35s both, ass-pordosol 3.4s ease forwards; }
@keyframes ass-pordosol { from { background-position: 0 0; } to { background-position: 0 100%; } }
.ass-c-sol { left: 50%; top: 20%; width: 170px; height: 170px; margin-left: -85px; border-radius: 50%; background: #ffd95e; box-shadow: 0 0 60px 20px rgba(255,200,80,.55); animation: ass-sol-desce 3.2s ease-in forwards; }
.ass-c-sol.nasce { top: 60%; animation: ass-sol-sobe 2.4s ease-out forwards; background: #fff0a0; }
@keyframes ass-sol-desce { to { top: 85%; opacity: 0; } } @keyframes ass-sol-sobe { from { top: 90%; } to { top: 14%; } }
.ass-c-lua { right: 14%; top: 90%; width: 120px; height: 120px; border-radius: 50%; background: #f2efd2; box-shadow: -30px 0 0 0 #0a0d2a inset, 0 0 40px rgba(220,230,255,.5); animation: ass-lua-sobe 3.2s ease-out forwards; } @keyframes ass-lua-sobe { to { top: 12%; } }
.c-dia { background: linear-gradient(180deg, #101a46 0%, #e07a4a 45%, #ffe9a0 100%); background-size: 100% 300%; animation: ass-cin .35s both, ass-amanhece 2.6s ease forwards; } @keyframes ass-amanhece { from { background-position: 0 0; } to { background-position: 0 100%; } }
.c-calma { background: linear-gradient(180deg, #6fb7f5, #fff1b8); color: #123; } .c-calma .ass-c-grande { color: #fff; }
.c-morte { background: #14050a; } .ass-c-flash { inset: 0; background: #fff; animation: ass-flash .8s ease-out forwards; } @keyframes ass-flash { 0% { background: #fff; opacity: 1; } 30% { background: #e0102a; opacity: .8; } 100% { opacity: 0; } }
.ass-c-vitima { margin-bottom: 14px; } .ass-c-head.cai { animation: ass-cai 1.6s .3s ease-in forwards; } .ass-c-head.cai canvas { filter: grayscale(1) contrast(1.1) drop-shadow(0 6px 0 #000); }
@keyframes ass-cai { 0% { transform: none; } 40% { transform: rotate(-14deg) translateY(-12px); } 100% { transform: rotate(78deg) translate(60px, 70px); } }
.ass-c-giz { position: absolute; left: 50%; top: 58%; width: 420px; height: 90px; margin-left: -210px; border: 4px dashed rgba(255,255,255,.55); border-radius: 50%; transform: rotate(-4deg); opacity: 0; animation: ass-fi 1s 1.6s forwards; }
.c-dano { background: #2a0d0d; } .c-dano .ass-c-grande { color: #ffb347; animation: ass-pop .5s both, ass-shake .5s .5s 4; } @keyframes ass-shake { 25% { transform: translateX(-12px); } 75% { transform: translateX(12px); } }
.c-voto { background: radial-gradient(circle, #20266a, #080a24 75%); } .ass-c-barras { width: min(720px, 86%); display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.ass-c-barra { display: grid; grid-template-columns: 220px 1fr 50px; align-items: center; gap: 14px; font-size: 30px; text-align: left; } .ass-c-barra i { display: block; height: 34px; background: linear-gradient(90deg, #e0455a, #ff9a4a); width: 0; animation: ass-bar 1.2s ease-out forwards; } .ass-c-barra b { color: var(--yellow); }
@keyframes ass-bar { to { width: var(--w); } }
.c-expulso { background: #03030c; } .ass-c-voa { position: absolute !important; top: 28%; left: 0; animation: ass-voa-h 4.4s linear forwards; } .ass-c-voa .ass-c-head { animation: none; } .ass-c-voa .ass-c-head canvas { animation: ass-gira 1s linear infinite; }
@keyframes ass-voa-h { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } } @keyframes ass-gira { to { transform: rotate(360deg); } }
.c-expulso .ass-c-grande { font-size: 70px; margin-top: 46vh; } .c-expulso .ass-c-sub { font-size: 40px; }
.c-vitoria { background: radial-gradient(circle at 50% 40%, #f0b82a, #3a2a08 75%); } .c-derrota { background: radial-gradient(circle at 50% 40%, #7a0d1a, #0a0204 78%); }
.ass-c-conf { top: -20px; width: 14px; height: 22px; animation: ass-conf 3s linear infinite; } @keyframes ass-conf { to { transform: translateY(115vh) rotate(720deg); } }
.ass-c-gota { top: -40px; width: 12px; height: 40px; background: #c0102a; border-radius: 0 0 8px 8px; animation: ass-gota 3.2s ease-in infinite; } @keyframes ass-gota { to { transform: translateY(115vh); } }
.ass-c-pular { position: absolute !important; right: 24px; bottom: 24px; font-size: 24px; padding: 10px 22px; opacity: .85; z-index: 3; }
body.retrato .ass-c-grande { font-size: 54px; } body.retrato .ass-c-sub { font-size: 24px; max-width: 88%; } body.retrato .ass-c-barra { grid-template-columns: 120px 1fr 36px; font-size: 20px; } body.retrato .c-expulso .ass-c-grande { font-size: 40px; }
/* Fase 31b: gaveta no retrato fica ABAIXO do prédio (nunca cobre a arte) */
body.retrato.em-jogo.ass-modo.painel-aberto #panel.open.ass-gaveta { left: 8px !important; right: 8px !important; width: auto !important; top: 786px !important; bottom: calc(var(--r-nav) + 96px) !important; }

/* ===== Fase 33: tutorial guiado ===== */
#tutorial { position: absolute; inset: 0; z-index: 70; display: none; pointer-events: auto; }
#tutorial.open { display: block; }
#tutorial.sem-foco { background: rgba(10,12,24,.78); }
.tut-foco { position: absolute; border: 4px solid var(--yellow); box-shadow: 0 0 0 9999px rgba(10,12,24,.74), 0 0 0 4px var(--ink), inset 0 0 0 3px rgba(255,205,117,.35); animation: tut-pulso 1.2s steps(2) infinite; pointer-events: none; }
@keyframes tut-pulso { 50% { border-color: var(--cyan); } }
.tut-bal { position: absolute; width: 580px; max-width: calc(100% - 20px); padding: 18px 22px 16px; background: var(--gray-d); border: 4px solid var(--ink); box-shadow: inset -4px -4px 0 var(--ink), inset 4px 4px 0 var(--gray), 10px 10px 0 rgba(26,28,44,.65); animation: tut-entra .22s ease-out; }
@keyframes tut-entra { from { transform: translateY(10px); opacity: 0; } }
.tut-cab { display: flex; align-items: center; gap: 12px; }
.tut-cab h3 { margin: 0; font-size: 28px; color: var(--yellow); flex: 1; }
.tut-ic { display: inline-flex; background: var(--ink); padding: 6px; border: 3px solid var(--gray); }
.tut-n { font-size: 18px; color: var(--gray-l); }
.tut-bal p { margin: 12px 0 14px; font-size: 22px; line-height: 1.4; }
.tut-pontos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tut-pontos i { width: 12px; height: 12px; background: var(--gray); }
.tut-pontos i.ok { background: var(--green); } .tut-pontos i.on { background: var(--yellow); outline: 3px solid var(--ink); }
.tut-bt { display: flex; align-items: center; gap: 10px; }
.tut-bt .grow { flex: 1; } .tut-bt button { white-space: nowrap; font-size: 20px; padding-left: 14px; padding-right: 14px; }
.tut-seta { position: absolute; width: 26px; height: 26px; background: var(--gray-d); border: 4px solid var(--ink); transform: rotate(45deg); display: none; }
.tut-seta.lado-dir { left: -17px; border-right: 0; border-top: 0; margin-top: -13px; }
.tut-seta.lado-esq { right: -17px; border-left: 0; border-bottom: 0; margin-top: -13px; }
.tut-seta.lado-baixo { top: -17px; border-bottom: 0; border-right: 0; margin-left: -13px; background: var(--gray-d); }
.tut-seta.lado-cima { bottom: -17px; border-top: 0; border-left: 0; margin-left: -13px; }
body.retrato .tut-bal { width: 700px; padding: 16px 18px; } body.retrato .tut-bal p { font-size: 24px; } body.retrato .tut-cab h3 { font-size: 30px; }
@media (prefers-reduced-motion: reduce) { .tut-foco, .tut-bal { animation: none; } }

/* ===== Fase 33: Como jogar ilustrado ===== */
.cj-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cj-corpo { display: flex; flex-direction: column; gap: 18px; }
.cj-hero { background: linear-gradient(135deg, var(--navy), var(--plum)); border: 4px solid var(--ink); padding: 22px 26px; }
.cj-hero h2 { margin: 0 0 8px; font-size: 34px; color: var(--yellow); } .cj-hero p { margin: 0; font-size: 22px; }
.cj-fig { margin: 0; background: var(--ink); border: 4px solid var(--ink); box-shadow: 6px 6px 0 rgba(26,28,44,.6); }
.cj-fig img { display: block; width: 100%; height: auto; image-rendering: auto; }
.cj-fig figcaption { padding: 10px 14px; font-size: 20px; background: var(--gray-d); color: var(--cyan); }
.cj-sec h3 { margin: 6px 0 4px; font-size: 28px; color: var(--yellow); } .cj-sec p.note { margin: 0; }
.cj-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cj-passo { display: flex; gap: 14px; background: var(--gray-d); border: 4px solid var(--ink); padding: 14px; align-items: flex-start; }
.cj-passo p, .cj-card p { margin: 4px 0 0; font-size: 20px; font-weight: normal; }
.cj-num { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); }
.cj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .cj-cards.um { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.cj-card { display: flex; gap: 14px; background: var(--gray-d); border: 4px solid var(--ink); padding: 14px; align-items: flex-start; }
.cj-ico { flex: none; background: var(--ink); padding: 8px; border: 3px solid var(--gray); min-width: 52px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.cj-dica { display: flex; gap: 12px; align-items: baseline; padding: 12px 16px; background: rgba(255,205,117,.12); border-left: 8px solid var(--yellow); font-size: 21px; }
.cj-dica b { color: var(--yellow); text-transform: uppercase; }
.cj-dicas { font-size: 22px; line-height: 1.5; } .cj-dicas li { margin-bottom: 6px; }
.cj-faq { background: var(--gray-d); border: 4px solid var(--ink); padding: 10px 16px; margin-bottom: 8px; } .cj-faq summary { cursor: pointer; font-size: 22px; } .cj-faq p { margin: 8px 0 2px; font-weight: normal; }
.cj-rodape { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
body.retrato .cj-cards, body.retrato .cj-cards.um, body.retrato .cj-passos { grid-template-columns: 1fr; }

/* Fase 33: cenas da Eleição sindical */
.mpc.c-mp { background: radial-gradient(circle at 50% 30%, #2a3b7a, #0b1030 80%); } .mpc.c-mp-sem { background: linear-gradient(160deg, #35507a, #14203f); }
.mpc.c-mp-deb { background: radial-gradient(circle at 50% 20%, #5a2a6a, #140a24 80%); } .mpc.c-vitoria { background: radial-gradient(circle, #7a5a12, #1a1204 80%); }
.mpc-jornal { background: #efe6c8; color: #2a2418; padding: 18px 26px; max-width: 78%; font-size: 26px; border: 4px solid #2a2418; transform: rotate(-2deg); animation: mpc-jor .9s .8s cubic-bezier(.2,1.4,.4,1) both; display: flex; flex-direction: column; gap: 8px; box-shadow: 8px 8px 0 rgba(0,0,0,.45); }
.mpc-jornal b { font-size: 22px; letter-spacing: 3px; border-bottom: 3px double #2a2418; padding-bottom: 4px; }
@keyframes mpc-jor { from { transform: rotate(-14deg) scale(.2); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.mpc-foco { position: absolute !important; top: -40px; left: 50%; width: 520px; height: 120%; margin-left: -260px; background: linear-gradient(180deg, rgba(255,240,170,.35), rgba(255,240,170,0)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: mpc-foco 3s ease-in-out infinite alternate; }
@keyframes mpc-foco { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.mpc-urna { width: 260px; height: 200px; background: #3b5fa8; border: 6px solid #0b1030; position: relative; overflow: hidden; margin: 10px 0; }
.mpc-fenda { position: absolute !important; top: 38px; left: 20%; width: 60%; height: 10px; background: #000; } 
.mpc-voto { position: absolute !important; top: -50px; width: 36px; height: 46px; background: #fff; border: 3px solid #999; animation: mpc-voto 1.1s ease-in both; } @keyframes mpc-voto { 0% { transform: translateY(0) rotate(-20deg); } 60% { transform: translateY(80px) rotate(10deg); opacity: 1; } 100% { transform: translateY(110px); opacity: 0; } }
.mpc-podio { display: flex; align-items: flex-end; gap: 14px; margin: 8px 0; } .mpc-col { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 24px; position: relative; }
.mpc-bloco { width: 150px; background: #3b5fa8; border: 4px solid #0b1030; display: flex; flex-direction: column; align-items: center; padding: 8px 0; font-size: 24px; transform-origin: bottom; animation: mpc-sobe .7s both; } .mpc-col.pos1 .mpc-bloco { height: 150px; background: #d9a81c; } .mpc-col.pos2 .mpc-bloco { height: 115px; background: #9aa6b6; } .mpc-col.pos3 .mpc-bloco { height: 88px; background: #b0743c; }
.mpc-coroa { width: 40px; height: 22px; background: #ffd23b; clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); animation: mpc-coroa 1s 2s both; }
@keyframes mpc-sobe { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes mpc-coroa { from { transform: translateY(-80px); opacity: 0; } to { transform: none; opacity: 1; } }
body.retrato .mpc-bloco { width: 110px; } body.retrato .mpc-jornal { font-size: 22px; max-width: 88%; }