/* ===== Componentes de jogo (usados também em modais de empresa) ===== */
.av.xl { width: 78px; height: 78px; font-size: 27px; border-radius: 24px; }
.btn3d { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 360px; padding: 14px 18px; border: 0; border-radius: 16px; background: var(--c, #21a366); color: #fff; font: 900 15px/1.1 Nunito, Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 0 var(--c2, #167d4d); cursor: pointer; text-decoration: none; transition: transform .08s; }
.btn3d:hover { filter: brightness(1.06); }
.btn3d:active { transform: translateY(4px); box-shadow: none; }
.btn3d.ghost { background: #fff; color: var(--c, #1f7ae0); border: 2px solid #e5e9f0; box-shadow: 0 4px 0 #e5e9f0; }
.btn3d.sm { width: auto; padding: 11px 14px; font-size: 13px; }
.modal-box.cheia { width: min(480px, 100%); text-align: center; padding: 30px 20px 26px; }
.celebra { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: Nunito, Inter, sans-serif; }
.celebra .mascote { width: 120px; animation: pula 1s ease-in-out infinite; }
.celebra h2 { font-size: 28px; font-weight: 900; color: #e59400; margin-top: 4px; }
.celebra p { margin: 0; color: #4b5563; font-size: 16px; }
.celebra .btn3d { margin-top: 10px; }
.celebra.match h2 { color: #21a366; font-size: 36px; }
.premios { display: flex; justify-content: center; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.premio { border: 2px solid; border-radius: 16px; overflow: hidden; min-width: 112px; }
.premio small { display: block; color: #fff !important; font-weight: 900; padding: 5px 8px; font-size: 11px; letter-spacing: .06em; }
.premio b { display: block; padding: 10px 12px; font-size: 21px; font-weight: 900; color: #2b3445; }
.premio.xp { border-color: #ffc233; } .premio.xp small { background: #ffc233; color: #6b4600 !important; }
.premio.fogo { border-color: #ff8a00; } .premio.fogo small { background: #ff8a00; }
.premio.nivel { border-color: #8e5cf6; } .premio.nivel small { background: #8e5cf6; }
.conq { font-weight: 700; }
.duo { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.duo .av { animation: junta .6s ease-out both; border: 4px solid #fff; box-shadow: 0 4px 0 #e5e9f0; }
.duo .av:last-child { animation-name: junta2; }
.raio { font-size: 36px; animation: pop .5s .35s both; }
.bau-aberto { font-size: 64px; animation: pop .55s ease-out; }
@keyframes junta { from { transform: translateX(-70px) rotate(-20deg); opacity: 0; } }
@keyframes junta2 { from { transform: translateX(70px) rotate(20deg); opacity: 0; } }
@keyframes pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes treme { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } }
.confete { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confete i { position: absolute; top: -16px; width: 9px; height: 15px; border-radius: 2px; animation: cai linear forwards; }
@keyframes cai { to { transform: translate(var(--x), 110vh) rotate(var(--giro)); } }
.mascote { width: 90px; height: auto; flex-shrink: 0; }
.mascote.pula { animation: pula 2s ease-in-out infinite; }
.mascote.mini { width: 72px; }

/* ===== Tema de jogo do participante ===== */
body[data-tema="jogo"] {
  --j-azul: #1f7ae0; --j-azul2: #1559a8; --j-verde: #21a366; --j-verde2: #167d4d;
  --j-amarelo: #ffc233; --j-vermelho: #ff4b55; --j-roxo: #8e5cf6; --j-linha: #e5e9f0; --j-texto: #2b3445;
  background: #fff; color: var(--j-texto); font-family: Nunito, Inter, system-ui, sans-serif;
}
body[data-tema="jogo"] h1 { font-weight: 900; }
body[data-tema="jogo"] h2 { font-weight: 900; }
body[data-tema="jogo"] .muted, body[data-tema="jogo"] small { color: #7a8597; }
body[data-tema="jogo"] .card { border: 2px solid var(--j-linha); box-shadow: none; border-radius: 18px; }
body[data-tema="jogo"] .btn { border-radius: 13px; font-weight: 800; font-family: Nunito, Inter, sans-serif; background: var(--j-azul); box-shadow: 0 3px 0 var(--j-azul2); }
body[data-tema="jogo"] .btn:active { transform: translateY(3px); box-shadow: none; }
body[data-tema="jogo"] .btn.ghost { background: #fff; color: #4b5563; border: 2px solid var(--j-linha); box-shadow: 0 3px 0 var(--j-linha); }
body[data-tema="jogo"] .bar { height: 14px; background: var(--j-linha); }
body[data-tema="jogo"] .bar span { background: var(--j-amarelo); }
body[data-tema="jogo"] .tabs { background: #eef1f6; border-radius: 14px; }
body[data-tema="jogo"] .tabs button { font-weight: 800; font-family: inherit; }
body[data-tema="jogo"] .content { gap: 18px; }

/* HUD */
.hud { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff; border-bottom: 2px solid #e5e9f0; }
.hud-lvl { display: flex; align-items: center; gap: 8px; color: inherit; }
.hud-lvl .av { width: 38px; height: 38px; font-size: 13px; }
.hud-lvl b { display: block; font-weight: 900; font-size: 14px; }
.hud-lvl small { font-weight: 700; }
.hud-r { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hud-it { position: relative; display: flex; align-items: center; gap: 4px; padding: 7px 8px; border-radius: 12px; border: 0; background: none; font: 900 16px Nunito, sans-serif; color: #2b3445; cursor: pointer; }
.hud-it:hover { background: #f3f6fa; }
.hud-it.fogo b { color: #ff8a00; }
.hud-it.fogo:not(.on) { filter: grayscale(1); opacity: .55; }
.hud-it.xp b { color: #e59400; }
.hud-it .dot { position: absolute; top: 0; right: 0; background: var(--j-vermelho); color: #fff; font-size: 10px; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; }
body[data-tema="jogo"] .bottom { border-top: 2px solid var(--j-linha); }
body[data-tema="jogo"] .bottom a { font-weight: 800; font-size: 10.5px; }
body[data-tema="jogo"] .bottom a .ic { font-size: 23px; filter: grayscale(.6); opacity: .8; }
body[data-tema="jogo"] .bottom a.on { background: #e8f4ff; box-shadow: inset 0 0 0 2px #9fd2ff; color: var(--j-azul); }
body[data-tema="jogo"] .bottom a.on .ic { filter: none; opacity: 1; }
@media (min-width: 900px) {
  body[data-tema="jogo"] .side { background: #fff; color: var(--j-texto); border-right: 2px solid var(--j-linha); }
  body[data-tema="jogo"] .brand { color: var(--j-texto); }
  body[data-tema="jogo"] .brand small { color: #7a8597; }
  body[data-tema="jogo"] .nav a { color: #6b7385; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; border: 2px solid transparent; }
  body[data-tema="jogo"] .nav a .ic { font-size: 24px; }
  body[data-tema="jogo"] .nav a:hover { background: #f3f6fa; color: var(--j-texto); }
  body[data-tema="jogo"] .nav a.on { background: #e8f4ff; border-color: #9fd2ff; color: var(--j-azul); }
  body[data-tema="jogo"] .mode { background: #f3f6fa; color: #4b5563; border-color: var(--j-linha); }
  body[data-tema="jogo"] .side-foot .link { color: #7a8597; }
}

/* Trilha */
.jogo-grid { display: grid; gap: 24px; }
.jogo-main { min-width: 0; max-width: 620px; width: 100%; margin: 0 auto; }
.jogo-aside { display: none; }
@media (min-width: 1150px) {
  .jogo-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .jogo-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
  .dest-pill { display: none !important; }
}
.dest-pill { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px; border: 2px solid #c9e3ff; border-radius: 16px; background: #f2f8ff; color: var(--j-texto); box-shadow: 0 3px 0 #c9e3ff; }
.dp-ic { font-size: 28px; }
.dest-pill b { display: block; font-weight: 900; }
.dp-m { font-weight: 900; color: var(--j-azul); white-space: nowrap; }
.secao { margin-bottom: 24px; }
.sec-banner { position: sticky; top: 62px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--c); color: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: 0 4px 0 var(--c2); }
.sec-banner small { color: rgba(255, 255, 255, .82) !important; font-weight: 900; letter-spacing: .06em; font-size: 12px; }
.sec-banner h2 { color: #fff; font-size: 21px; margin: 2px 0; }
.sec-prog { font-weight: 800; font-size: 13px; opacity: .92; }
.sec-ic { font-size: 36px; }
.caminho { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 30px 0 8px; }
.no-linha { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateX(var(--off)); }
.no-linha.com-balao { margin-top: 34px; }
.no { position: relative; width: 74px; height: 68px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 30px; background: var(--c); box-shadow: 0 7px 0 var(--c2); cursor: pointer; transition: transform .08s; }
.no:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--c2); }
.no.bloqueado { background: #e5e9f0; box-shadow: 0 7px 0 #c9d0db; }
.no.bloqueado span { filter: grayscale(1); opacity: .5; }
.no.feito::after { content: "✓"; position: absolute; right: -5px; bottom: -6px; width: 25px; height: 25px; border-radius: 50%; background: #ffc233; color: #6b4600; font-size: 14px; font-weight: 900; display: grid; place-items: center; border: 3px solid #fff; }
.no.atual { outline: 6px solid color-mix(in srgb, var(--c) 22%, white); outline-offset: 3px; animation: respira 1.6s ease-in-out infinite; }
@keyframes respira { 50% { outline-offset: 8px; } }
.no-bau, .no-trofeu { background: transparent !important; box-shadow: none !important; font-size: 50px; width: 84px; height: 72px; outline: none !important; }
.no-bau.feito::after, .no-trofeu.feito::after { display: none; }
.no-bau.atual { animation: treme 1.3s ease-in-out infinite; }
.no-trofeu.bloqueado span, .no-bau.bloqueado span { filter: grayscale(1); opacity: .45; }
.no-balao { position: absolute; top: -44px; z-index: 2; background: #fff; color: var(--c); border: 2px solid #e5e9f0; font-weight: 900; font-size: 13px; letter-spacing: .07em; padding: 7px 13px; border-radius: 12px; white-space: nowrap; animation: flutua 1.4s ease-in-out infinite; }
.no-balao::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 12px; height: 12px; background: #fff; border-right: 2px solid #e5e9f0; border-bottom: 2px solid #e5e9f0; transform: translateX(-50%) rotate(45deg); }
@keyframes flutua { 50% { transform: translateY(-5px); } }
.mascote-linha { transform: none; }
@media (min-width: 520px) { .mascote-linha { transform: translateX(var(--off)); } }
.mascote-dica { display: flex; align-items: center; gap: 8px; }
.fala { position: relative; max-width: 190px; background: #fff; border: 2px solid #e5e9f0; border-radius: 16px; padding: 10px 12px; font-weight: 800; font-size: 14px; line-height: 1.3; }
.fala::before { content: ""; position: absolute; left: -8px; top: 50%; width: 12px; height: 12px; background: #fff; border-left: 2px solid #e5e9f0; border-bottom: 2px solid #e5e9f0; transform: translateY(-50%) rotate(45deg); }
.fim-trilha { text-align: center; font-weight: 800; color: #8a94a6; margin: 8px 0 0; }
.mini { display: block; color: var(--j-texto, #2b3445); }
.mini-h { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 6px; }
.mini p { margin: 0; }
.mini-m { margin-top: 10px; font-weight: 700; font-size: 14px; }
.mini-m .qbar { margin-top: 5px; }

/* Folha da fase */
.folha { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.folha-ic { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; font-size: 52px; background: color-mix(in srgb, var(--c) 14%, white); }
.folha-ic.treme { animation: treme 1.3s ease-in-out infinite; }
.folha-ic.bloqueado { filter: grayscale(1); opacity: .6; }
.folha-et { color: var(--c) !important; font-weight: 900; letter-spacing: .06em; }
.folha h2 { font-size: 23px; font-weight: 900; }
.folha p { margin: 2px 0; color: #4b5563; font-size: 15px; }
.chip-xp { display: inline-block; background: #fff4d6; color: #a26b00; font-weight: 900; padding: 4px 11px; border-radius: 99px; font-size: 14px; }
.ok-txt { color: #21a366 !important; font-weight: 900; }
.lock-txt { color: #8a94a6 !important; font-weight: 800; }
.folha .btn3d { margin-top: 10px; }

/* Cartas */
.cartas-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.combo { background: #fff1e0; color: #e06a00; font-weight: 900; padding: 6px 12px; border-radius: 99px; white-space: nowrap; animation: pop .4s; }
.seg { display: flex; gap: 4px; background: #eef1f6; border-radius: 14px; padding: 4px; max-width: 420px; }
.seg a { flex: 1; text-align: center; padding: 9px; border-radius: 11px; font-weight: 900; color: #6b7385; }
.seg a.on { background: #fff; color: var(--j-azul, #1f7ae0); box-shadow: 0 2px 0 #d6dce6; }
.deck { position: relative; width: 100%; max-width: 380px; height: 500px; margin: 8px auto 0; }
.carta { position: absolute; inset: 0; background: #fff; border: 2px solid #e5e9f0; border-radius: 24px; overflow: hidden; box-shadow: 0 6px 0 #e1e6ee; transform: translateY(calc(var(--i) * 14px)) scale(calc(1 - var(--i) * .05)); transition: transform .25s; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.carta.topo { cursor: grab; z-index: 3; }
.carta.arrastando { transition: none; cursor: grabbing; }
.carta.voa-dir { transform: translateX(150%) rotate(26deg) !important; transition: transform .23s ease-in; }
.carta.voa-esq { transform: translateX(-150%) rotate(-26deg) !important; transition: transform .23s ease-in; }
.carta-topo { position: relative; height: 118px; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #0b2a5b)); }
.carta-topo .av { transform: translateY(40px); border: 4px solid #fff; }
.fita { position: absolute; top: 12px; left: 12px; background: #fff; color: #e0245e; font-weight: 900; font-size: 12.5px; padding: 5px 10px; border-radius: 99px; }
.carta-corpo { padding: 48px 18px 18px; text-align: center; }
.carta-corpo h2 { font-size: 21px; }
.compat { display: inline-flex; align-items: baseline; gap: 6px; margin: 10px 0 2px; background: #e6f8ee; color: #167d4d; padding: 5px 14px; border-radius: 99px; font-weight: 800; }
.compat b { font-size: 22px; font-weight: 900; }
.carta-pitch { font-size: 14.5px; color: #4b5563; margin: 8px 0; }
.carta .why { text-align: left; }
.carta .tts { justify-content: center; }
.selo { position: absolute; top: 26px; padding: 6px 14px; border: 4px solid; border-radius: 12px; font-weight: 900; font-size: 26px; pointer-events: none; background: #fff; }
.selo.sim { left: 16px; color: #21a366; border-color: #21a366; transform: rotate(-14deg); opacity: var(--sim, 0); }
.selo.nao { right: 16px; color: #ff4b55; border-color: #ff4b55; transform: rotate(14deg); opacity: var(--nao, 0); }
.deck-botoes { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 30px; }
.redondo { width: 68px; height: 68px; border-radius: 50%; border: 2px solid #e5e9f0; background: #fff; display: grid; place-items: center; font: 900 28px Nunito, sans-serif; box-shadow: 0 4px 0 #e5e9f0; cursor: pointer; }
.redondo:active { transform: translateY(4px); box-shadow: none; }
.redondo.nao { color: #ff4b55; }
.redondo.sim { color: #fff; background: #21a366; border-color: #167d4d; box-shadow: 0 4px 0 #167d4d; }
.redondo.info { width: 50px; height: 50px; font: italic 900 21px Georgia, serif; color: #1f7ae0; }
.deck-cont { text-align: center; color: #8a94a6; font-weight: 700; margin: 4px 0 0; }
.deck-vazio { text-align: center; padding: 24px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.deck-vazio .mascote { width: 110px; }

/* Bússola */
.compass { display: grid; gap: 18px; align-items: center; }
@media (min-width: 680px) { .compass { grid-template-columns: 220px 1fr; } }
.dial-wrap { text-align: center; }
.dial { position: relative; width: 190px; height: 190px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, #fff 56%, #eef5ff 57%); border: 3px solid #d6e6fb; box-shadow: inset 0 0 0 12px #f6faff, 0 5px 0 #d6e6fb; }
.seta { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); transition: transform .3s ease-out; filter: drop-shadow(0 4px 0 rgba(21, 89, 168, .35)); }
.seta path { fill: #1f7ae0; }
.norte { position: absolute; inset: 0; transition: transform .3s ease-out; }
.norte span { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-weight: 900; color: #ff4b55; font-size: 14px; }
.dial-ok { position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; animation: pop .5s; }
.compass.chegou .dial { border-color: #9be3bf; background: radial-gradient(circle, #fff 56%, #e9f9f0 57%); box-shadow: inset 0 0 0 12px #f4fcf8, 0 5px 0 #9be3bf; }
.dica-seta { font-size: 12.5px; color: #7a8597; font-weight: 700; margin: 10px 0 0; }
.kicker-dark { color: #1f7ae0 !important; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.compass-info h2 { font-size: 24px; margin-top: 2px; }
.compass-info .sub { margin: 2px 0 0; font-weight: 800; color: #4b5563; }
.dist { margin: 10px 0 0; font-size: 16px; }
.steps { margin: 8px 0 0; padding-left: 20px; font-size: 14.5px; color: #33425c; display: flex; flex-direction: column; gap: 3px; }
.recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid #e5e9f0; border-radius: 14px; }
.recs li.on { border-color: #9fd2ff; background: #f2f8ff; }
.rec-ic { font-size: 24px; }
.rec-d { font-weight: 900; font-size: 13px; color: #7a8597; white-space: nowrap; }
.planta { overflow-x: auto; border-radius: 14px; }
.planta-svg { display: block; width: 100%; min-width: 560px; height: auto; }
.pl-floor { fill: #f7f9fc; stroke: #dbe2ee; stroke-width: 2; }
.pl-area rect { fill: #e9eef7; stroke: #c9d4e6; stroke-width: 1.5; }
.pl-area.pl-palco rect { fill: #efedff; stroke: #cbc5f5; }
.pl-area.pl-rodada rect { fill: #e5f6ee; stroke: #a9dcc3; }
.pl-area.pl-servico rect { fill: #fff6df; stroke: #f0d899; }
.pl-area.pl-entrada rect { fill: #fff; stroke: #0b2a5b; stroke-dasharray: 6 4; }
.pl-area text, .pl-stand text { font: 800 11px Nunito, Inter, sans-serif; fill: #3c4b66; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.pl-area, .pl-stand[data-action] { cursor: pointer; }
.pl-area:hover rect, .pl-stand[data-action]:hover rect { stroke: #1f7ae0; }
.pl-stand rect { fill: color-mix(in srgb, var(--c) 16%, white); stroke: color-mix(in srgb, var(--c) 55%, white); stroke-width: 1.5; }
.pl-stand.visited rect { fill: var(--c); }
.pl-stand.visited text { fill: #fff; }
.pl-stand.free rect { fill: #fbfcfe; stroke: #dbe2ee; stroke-dasharray: 4 3; }
.pl-stand.free text { fill: #b3bdcc; }
.pl-area.is-dest rect, .pl-stand.is-dest rect { stroke: #ff4b55; stroke-width: 3.5; }
.pl-rota-base { fill: none; stroke: rgba(31, 122, 224, .18); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.pl-rota { fill: none; stroke: #1f7ae0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 12; animation: marcha .9s linear infinite; }
@keyframes marcha { to { stroke-dashoffset: -14; } }
.pl-pin circle { fill: #ff4b55; stroke: #fff; stroke-width: 3; animation: pulsoPin 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulsoPin { 50% { transform: scale(1.3); } }
.pl-voce .halo { fill: rgba(31, 122, 224, .2); transform-box: fill-box; transform-origin: center; animation: halo 1.6s ease-out infinite; }
@keyframes halo { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.pl-voce .dot { fill: #1f7ae0; stroke: #fff; stroke-width: 3; }
.pl-voce .cone { fill: rgba(31, 122, 224, .35); }
.pl-voce text { font: 900 11px Nunito, sans-serif; fill: #1f7ae0; text-anchor: middle; }
.sim { background: #fafbff; border-style: dashed !important; }
.sim summary { cursor: pointer; font-weight: 900; }
.sim .row3 { margin-top: 12px; }
.sim label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 800; color: #4b5563; }
.sim select { font: inherit; padding: 9px 10px; border: 2px solid #e5e9f0; border-radius: 12px; background: #fff; }
.range { margin-top: 14px; }
.range input { width: 100%; }

/* Liga */
.liga-h { display: flex; justify-content: center; gap: 14px; margin-top: 4px; }
.escudo { width: 62px; height: 62px; display: grid; place-items: center; font-size: 34px; border-radius: 20px; background: color-mix(in srgb, var(--c) 16%, white); border: 3px solid transparent; transition: transform .2s; }
.escudo.on { border-color: var(--c); transform: scale(1.18); }
.escudo.off { filter: grayscale(1); opacity: .45; }
.liga-t { text-align: center; }
.liga-lista { list-style: none; margin: 0; padding: 0; border: 2px solid #e5e9f0; border-radius: 18px; overflow: hidden; }
.liga-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 2px solid #f0f2f6; }
.liga-lista li:first-child { border-top: 0; }
.liga-lista li.me { background: #eaf5ff; }
.liga-lista .pos { width: 28px; text-align: center; font-weight: 900; color: #8a94a6; font-size: 16px; }
.liga-lista .pos.p1 { color: #e0a100; } .liga-lista .pos.p2 { color: #8d9aad; } .liga-lista .pos.p3 { color: #c97a40; }
.liga-lista li.zona { justify-content: center; color: #21a366; font-weight: 900; font-size: 12px; letter-spacing: .08em; background: #f0fbf5; }
.liga-lista .xp { font-weight: 900; white-space: nowrap; }
.lg-ic { font-size: 20px; }

/* Missões */
.missoes-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.quests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.quests li { display: flex; align-items: center; gap: 12px; }
.q-ic { font-size: 30px; }
.qbar { position: relative; height: 18px; margin-top: 6px; background: #e5e9f0; border-radius: 99px; overflow: hidden; }
.qbar span { display: block; height: 100%; background: #ffc233; border-radius: 99px; transition: width .4s; }
.qbar em { position: absolute; inset: 0; text-align: center; font-style: normal; font-size: 12px; font-weight: 900; color: #5c4400; line-height: 18px; }
.quests li.ok .qbar span { background: #21a366; }
.quests li.ok .qbar em { color: #fff; }
.q-bau { font-size: 26px; }
.bau-dia { margin-top: 18px; text-align: center; display: flex; justify-content: center; }

/* Perfil */
.perfil-h { display: flex; align-items: center; gap: 16px; }
.perfil-h p { margin: 2px 0 8px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 680px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border: 2px solid #e5e9f0; border-radius: 16px; padding: 12px; }
.tile span { grid-row: span 2; font-size: 26px; }
.tile b { font-size: 19px; font-weight: 900; }
.perfil-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.perfil-acoes .btn3d { flex: 1 1 200px; }

/* ===== Tom, o camaleão, dentro do app ===== */
.tom { display: block; height: auto; }
.tom.pula { animation: pula 2s ease-in-out infinite; }
.tom.dica { width: 104px; flex-shrink: 0; }
.tom.vazio { width: 160px; margin: 0 auto; }
.tom.mini { width: 84px; }
.tom.cel { width: 240px; max-width: 66vw; margin: -10px auto -6px; }
.duo.mini { margin: 0 0 4px; }
.duo.mini .av.xl { width: 44px; height: 44px; font-size: 15px; border-radius: 13px; border-width: 3px; }
.duo.mini .raio { font-size: 22px; }
.celebrate .tom.cel { margin: 0 auto; }
.big-ic { font-size: 34px; margin-top: -8px; }
.revela-txt { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: aparece .5s 4.5s both; }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }
.faixa-tom { height: 12px; width: 220px; max-width: 80%; border-radius: 99px; margin: 4px auto; }