/* BRUMAS — Reinos Além da Névoa.
   Celular é a plataforma principal: tudo aqui começa estreito e cresce para o computador.
   As cores da região entram por variáveis (--luz, --bruma, --ceu…) trocadas pelo controlador. */

:root{
 --ceu:#2b2350; --agua:#2f6f86; --terra:#4d7a5c; --luz:#ffc06a; --bruma:#cfe0ea;
 --fundo:#171233; --fundo2:#1f1942; --carta:#2a2250; --carta2:#332a5f;
 --linha:#463a78; --texto:#f4efff; --fraco:#bcb2dd; --bom:#7fe0b0; --alerta:#ffb0a8;
 --raio:18px; --raio-p:12px; --sombra:0 10px 30px rgba(8,5,24,.45);
 --barra-baixo:env(safe-area-inset-bottom,0px);
 color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
 background:
  radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ceu) 70%, #ffffff 8%) 0%, transparent 60%),
  linear-gradient(180deg,var(--fundo) 0%,var(--fundo2) 100%);
 background-attachment:fixed;
 color:var(--texto);
 font:16px/1.5 "Segoe UI",system-ui,-apple-system,"Noto Sans",sans-serif;
 -webkit-text-size-adjust:100%; overflow-x:hidden;
 padding-bottom:calc(72px + var(--barra-baixo));
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--luz);outline-offset:2px;border-radius:6px}
.oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ cabeçalho */
.topo{display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px) 12px;
 padding-top:calc(10px + env(safe-area-inset-top,0px));position:sticky;top:0;z-index:30;
 background:linear-gradient(180deg,rgba(23,18,51,.96),rgba(23,18,51,.72) 70%,transparent);backdrop-filter:blur(6px)}
.topo .voltar{padding:8px 12px;border-radius:999px;background:var(--carta);font-size:13px;letter-spacing:.06em;
 text-decoration:none;color:var(--texto);border:1px solid var(--linha);white-space:nowrap}
.marca{flex:1;min-width:0;text-align:center;line-height:1.15}
.marca b{display:block;font-size:17px;letter-spacing:.14em;text-transform:uppercase;
 background:linear-gradient(180deg,#fff,var(--luz));-webkit-background-clip:text;background-clip:text;color:transparent}
.marca small{display:block;font-size:9.5px;letter-spacing:.22em;color:var(--fraco);text-transform:uppercase}
.acoes{display:flex;gap:6px}
.icone{width:40px;height:40px;border-radius:999px;background:var(--carta);border:1px solid var(--linha);
 display:grid;place-items:center;font-size:17px;transition:transform .15s,background .15s}
.icone:hover{background:var(--carta2)}
.icone:active{transform:scale(.93)}

/* ---------------------------------------------------------------------- HUD */
.recursos{display:flex;gap:8px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none}
.recursos::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
 background:var(--carta);border:1px solid var(--linha);white-space:nowrap;flex:0 0 auto}
.chip i{font-style:normal;font-size:17px;line-height:1}
.chip b{font-size:16px;font-variant-numeric:tabular-nums}
.chip small{display:block;font-size:9.5px;letter-spacing:.11em;color:var(--fraco);text-transform:uppercase}
.chip-sopro{border-color:var(--luz);background:linear-gradient(180deg,color-mix(in srgb,var(--luz) 22%,var(--carta)),var(--carta))}
.chip-sopro.pulsando{animation:respira 2.4s ease-in-out infinite}
@keyframes respira{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--luz) 55%,transparent)}50%{box-shadow:0 0 0 9px transparent}}

/* ----------------------------------------------------------------- objetivo */
.objetivo{margin:0 12px 12px;display:flex;align-items:center;gap:12px;width:calc(100% - 24px);
 padding:13px 15px;border-radius:var(--raio);text-align:left;
 background:linear-gradient(135deg,var(--carta2),var(--carta));border:1px solid var(--linha);box-shadow:var(--sombra)}
.objetivo:active{transform:scale(.99)}
.objetivo .selo{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:19px;
 background:color-mix(in srgb,var(--luz) 26%,transparent)}
.objetivo span{flex:1;min-width:0}
.objetivo small{display:block;font-size:9.5px;letter-spacing:.16em;color:var(--luz);text-transform:uppercase}
.objetivo b{display:block;font-size:15.5px}
.objetivo p{margin:2px 0 0;font-size:12.5px;color:var(--fraco)}
.objetivo strong{font-size:20px;color:var(--luz)}

/* -------------------------------------------------------------------- palco */
.palco{display:grid;gap:12px;padding:0 12px}
.cena{position:relative;border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);
 background:var(--fundo2);box-shadow:var(--sombra)}
.cena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bm-mapa{display:block;width:100%;height:auto;position:relative;touch-action:manipulation}
.cena-topo{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;
 gap:10px;padding:12px;pointer-events:none}
.regiao-nome{background:rgba(15,11,36,.62);backdrop-filter:blur(4px);border-radius:14px;padding:8px 12px;max-width:66%}
.regiao-nome small{display:block;font-size:9px;letter-spacing:.2em;color:var(--luz);text-transform:uppercase}
.regiao-nome b{display:block;font-size:16px;line-height:1.2}
.regiao-nome i{display:block;font-style:normal;font-size:11px;color:var(--fraco);margin-top:2px}
.medidor{background:rgba(15,11,36,.62);backdrop-filter:blur(4px);border-radius:14px;padding:8px 12px;text-align:right}
.medidor b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.medidor small{display:block;font-size:9px;letter-spacing:.14em;color:var(--fraco);text-transform:uppercase}
.dica-mapa{position:absolute;left:12px;right:12px;bottom:12px;padding:9px 13px;border-radius:12px;
 background:rgba(15,11,36,.78);backdrop-filter:blur(4px);font-size:12.5px;color:var(--fraco);text-align:center}
.dica-mapa b{color:var(--texto)}

/* alvos do mapa */
.bm-alvo{cursor:default}
.bm-alvo.bm-pode,.bm-alvo.bm-borda{cursor:pointer}
.bm-alvo.bm-pode:hover .bm-pulsa,.bm-alvo.bm-borda:hover{opacity:1}
.bm-pulsa{animation:brilha 2.6s ease-in-out infinite}
@keyframes brilha{0%,100%{opacity:.42}50%{opacity:1}}
.bm-flutua{animation:flutua 12s ease-in-out infinite alternate}
@keyframes flutua{from{transform:translate(0,0)}to{transform:translate(7px,-5px)}}
.bm-obra{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.bm-obra-cresce{animation:cresce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes cresce{0%{transform:translateY(14px) scale(.6);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.bm-obra-coberta{opacity:.45;filter:grayscale(.5)}
.bm-marca,.bm-sitio{animation:surge .5s ease-out}
@keyframes surge{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1}}

/* --------------------------------------------------------------- lateral */
.lateral{display:grid;gap:12px;align-content:start}
.cartao{border-radius:var(--raio);border:1px solid var(--linha);background:var(--carta);padding:14px;box-shadow:var(--sombra)}
.cartao>h2{margin:0 0 3px;font-size:15px;letter-spacing:.02em}
.cartao>p.sub{margin:0 0 12px;font-size:12.5px;color:var(--fraco)}
.etiqueta{font-size:9.5px;letter-spacing:.19em;color:var(--luz);text-transform:uppercase;display:block;margin-bottom:6px}

/* rotas da Bússola */
.rotas{display:grid;gap:10px}
.rota{display:grid;gap:8px;padding:13px;border-radius:var(--raio-p);text-align:left;width:100%;
 border:1px solid var(--linha);background:linear-gradient(150deg,var(--carta2),var(--carta));transition:transform .15s,border-color .15s}
.rota:hover{border-color:var(--luz)}
.rota:active{transform:scale(.99)}
.rota-topo{display:flex;align-items:center;gap:10px}
.rota-topo i{font-style:normal;width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:18px;
 background:color-mix(in srgb,var(--luz) 20%,transparent)}
.rota-topo b{display:block;font-size:14.5px}
.rota-topo small{display:block;font-size:11px;color:var(--fraco)}
.rota-meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--fundo2);border:1px solid var(--linha);color:var(--fraco)}
.tag.forte{color:var(--texto);border-color:var(--luz)}
.premio{display:flex;flex-wrap:wrap;gap:8px;padding:9px 11px;border-radius:10px;background:rgba(0,0,0,.22);font-size:12.5px}
.premio span{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.premio .bonus{width:100%;color:var(--bom);font-size:11.5px}

/* botões */
.primario{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 18px;border-radius:14px;
 font-size:15px;font-weight:700;letter-spacing:.03em;color:#2a1d10;
 background:linear-gradient(180deg,color-mix(in srgb,var(--luz) 88%,#fff),var(--luz));
 box-shadow:0 5px 0 color-mix(in srgb,var(--luz) 55%,#000),0 10px 22px rgba(0,0,0,.32);transition:transform .12s,box-shadow .12s}
.primario:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--luz) 55%,#000)}
.primario[disabled]{filter:grayscale(.6) brightness(.75);box-shadow:none;cursor:not-allowed}
.secundario{width:100%;padding:12px 16px;border-radius:13px;border:1px solid var(--linha);background:var(--carta2);font-size:14px;font-weight:600}
.secundario:active{transform:scale(.98)}
.texto-botao{color:var(--luz);text-decoration:underline;font-size:12.5px;padding:6px 2px}

/* obra selecionada */
.obra-painel{display:grid;gap:11px}
.obra-cabeca{display:flex;align-items:center;gap:12px}
.obra-cabeca .mini{width:56px;height:56px;flex:0 0 auto;border-radius:14px;background:var(--fundo2);border:1px solid var(--linha);overflow:hidden}
.obra-cabeca .mini svg{width:100%;height:100%;display:block}
.degraus{display:flex;gap:5px}
.degrau{flex:1;height:6px;border-radius:99px;background:var(--fundo2);border:1px solid var(--linha)}
.degrau.feito{background:var(--luz);border-color:var(--luz)}
.especializacoes{display:grid;gap:9px}
.esp{display:grid;gap:4px;padding:12px;border-radius:12px;text-align:left;border:1px solid var(--linha);background:var(--carta2)}
.esp:hover{border-color:var(--luz)}
.esp b{font-size:13.5px}
.esp small{font-size:11.5px;color:var(--fraco)}
.esp.escolhida{border-color:var(--bom);background:color-mix(in srgb,var(--bom) 12%,var(--carta2))}

/* --------------------------------------------------------------- expedição */
.expedicao{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto 1fr auto;
 background:linear-gradient(180deg,var(--fundo) 0%,var(--fundo2) 100%);padding:0;overscroll-behavior:contain}
.expedicao[hidden]{display:none}
.exp-topo{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px}
.exp-topo span{flex:1;min-width:0}
.exp-topo small{display:block;font-size:9.5px;letter-spacing:.18em;color:var(--luz);text-transform:uppercase}
.exp-topo b{display:block;font-size:16px}
.exp-corpo{display:grid;place-items:center;padding:6px 14px;overflow:auto}
.exp-rodape{padding:12px 14px calc(14px + var(--barra-baixo));display:grid;gap:10px}
.exp-instrucao{margin:0;text-align:center;font-size:13.5px;color:var(--fraco);min-height:2.6em}
.exp-instrucao b{color:var(--texto)}
.grade-exp{display:grid;gap:7px;width:min(94vw,420px)}
.casa{aspect-ratio:1;border-radius:13px;border:1px solid var(--linha);background:var(--carta);
 display:grid;place-items:center;font-size:22px;transition:transform .14s,background .2s,border-color .2s}
.casa:active{transform:scale(.94)}
.casa.bloqueada{background:#241d3f;border-style:dashed;color:#5a4f86;cursor:not-allowed}
.casa.visitada{background:color-mix(in srgb,var(--luz) 14%,var(--carta))}
.casa.aqui{border-color:var(--luz);box-shadow:0 0 0 3px color-mix(in srgb,var(--luz) 35%,transparent)}
.casa.alvo{border-color:var(--bom)}
.casa.luz{color:var(--luz)}
.casa.aceso{background:color-mix(in srgb,var(--luz) 55%,var(--carta));color:#2a1d10}
.casa.erro{animation:treme .35s}
@keyframes treme{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.nichos{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.nicho{padding:13px 17px;border-radius:14px;border:1px solid var(--linha);background:var(--carta);font-size:20px;min-width:74px}
.nicho b{display:block;font-size:10px;letter-spacing:.1em;color:var(--fraco);text-transform:uppercase;margin-top:3px}
.fiapos{position:relative;width:min(94vw,420px);height:min(58vh,340px);border-radius:var(--raio);
 border:1px solid var(--linha);background:radial-gradient(60% 60% at 50% 85%,color-mix(in srgb,var(--luz) 18%,transparent),transparent),var(--carta);overflow:hidden}
.fiapo{position:absolute;width:52px;height:52px;border-radius:999px;display:grid;place-items:center;font-size:23px;
 background:color-mix(in srgb,var(--bruma) 40%,transparent);border:1px solid color-mix(in srgb,var(--bruma) 60%,transparent);
 transition:top .45s ease,left .45s ease,opacity .3s}
.fiapo:active{transform:scale(.9)}
.abrigo{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:34px}
.contador{display:flex;gap:5px;justify-content:center}
.ponto{width:9px;height:9px;border-radius:99px;background:var(--linha)}
.ponto.on{background:var(--luz)}
.ponto.perdido{background:var(--alerta)}

/* ---------------------------------------------------------------- diálogos */
dialog{border:0;padding:0;background:transparent;max-width:min(560px,94vw);width:100%;color:var(--texto)}
dialog::backdrop{background:rgba(10,7,26,.72);backdrop-filter:blur(3px)}
.folha{background:var(--carta);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);
 max-height:86vh;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.folha-topo{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--linha)}
.folha-topo span{flex:1;min-width:0}
.folha-topo small{display:block;font-size:9.5px;letter-spacing:.18em;color:var(--luz);text-transform:uppercase}
.folha-topo h2{margin:2px 0 0;font-size:18px}
.folha-corpo{padding:16px;overflow:auto;display:grid;gap:13px;align-content:start}
.folha-corpo p{margin:0;font-size:13.5px;color:var(--fraco)}
.folha-corpo p.forte{color:var(--texto)}

/* listas genéricas */
.lista{display:grid;gap:9px}
.linha{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
 border:1px solid var(--linha);background:var(--carta2);text-align:left;width:100%}
.linha i{font-style:normal;font-size:20px;width:34px;text-align:center;flex:0 0 auto}
.linha span{flex:1;min-width:0}
.linha b{display:block;font-size:13.5px}
.linha small{display:block;font-size:11.5px;color:var(--fraco)}
.linha.feito{border-color:var(--bom)}
.barra{height:7px;border-radius:99px;background:var(--fundo2);overflow:hidden;border:1px solid var(--linha)}
.barra i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--luz) 70%,#fff),var(--luz));transition:width .5s}

/* fragmentos */
.fragmentos{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
.frag{aspect-ratio:.82;border-radius:12px;border:1px solid var(--linha);background:var(--carta2);
 display:grid;place-items:center;gap:4px;padding:8px;text-align:center;font-size:10.5px;color:var(--fraco)}
.frag.tem{border-color:var(--luz);background:linear-gradient(180deg,color-mix(in srgb,var(--luz) 16%,var(--carta2)),var(--carta2));color:var(--texto)}
.frag em{font-style:normal;font-size:24px;filter:grayscale(1) opacity(.4)}
.frag.tem em{filter:none}

/* ------------------------------------------------------------------- rodapé */
.rodape{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);
 gap:2px;padding:6px 6px calc(6px + var(--barra-baixo));
 background:linear-gradient(0deg,rgba(23,18,51,.98),rgba(23,18,51,.9));border-top:1px solid var(--linha)}
.rodape button{display:grid;gap:2px;justify-items:center;padding:7px 2px;border-radius:12px;font-size:10px;color:var(--fraco);letter-spacing:.03em}
.rodape button i{font-style:normal;font-size:19px;line-height:1}
.rodape button[aria-current="true"]{color:var(--luz);background:color-mix(in srgb,var(--luz) 13%,transparent)}
.rodape button .aviso{position:absolute;transform:translate(15px,-4px);width:8px;height:8px;border-radius:99px;background:var(--alerta)}

/* -------------------------------------------------------------------- avisos */
.aviso-flutua{position:fixed;left:50%;bottom:calc(84px + var(--barra-baixo));transform:translateX(-50%);
 z-index:70;padding:12px 18px;border-radius:14px;background:var(--carta2);border:1px solid var(--luz);
 box-shadow:var(--sombra);font-size:13.5px;max-width:min(92vw,460px);text-align:center;animation:sobe .3s ease-out}
.aviso-flutua[hidden]{display:none}
@keyframes sobe{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.ganhos{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px;font-size:15px;font-weight:700;color:var(--luz)}

/* tutorial */
.holofote{position:fixed;inset:0;z-index:50;pointer-events:none}
.holofote[hidden]{display:none}
.holofote .balao{position:absolute;max-width:min(300px,86vw);padding:13px 15px;border-radius:14px;
 background:var(--carta2);border:1px solid var(--luz);box-shadow:var(--sombra);font-size:13.5px;pointer-events:auto}
.holofote .balao b{display:block;margin-bottom:3px}
.holofote .balao button{margin-top:9px;font-size:12px;color:var(--fraco);text-decoration:underline}
.piscando{animation:piscaFoco 1.6s ease-in-out infinite;border-radius:16px}
@keyframes piscaFoco{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--luz) 60%,transparent)}50%{box-shadow:0 0 0 10px transparent}}

/* -------------------------------------------------------------------- telas */
@media (min-width:900px){
 body{padding-bottom:0}
 .topo{padding-left:20px;padding-right:20px}
 .marca b{font-size:19px}
 .recursos{padding-left:20px;padding-right:20px}
 .objetivo{margin-left:20px;margin-right:20px;width:calc(100% - 40px)}
 .palco{grid-template-columns:minmax(0,1.55fr) minmax(330px,.9fr);padding:0 20px 24px;align-items:start}
 .rodape{position:static;grid-template-columns:repeat(5,auto);justify-content:center;gap:8px;
  background:none;border:0;padding:14px 20px 26px}
 .rodape button{padding:9px 20px;font-size:12px;grid-auto-flow:column;align-items:center;gap:8px}
 .rodape button i{font-size:17px}
 .aviso-flutua{bottom:26px}
 .exp-corpo{padding:16px}
 .grade-exp{width:min(60vh,460px)}
}
@media (max-width:899px){
 .lateral{order:2}
 .cena{order:1}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body.movimento-reduzido .bm-flutua,body.movimento-reduzido .bm-pulsa,body.movimento-reduzido .chip-sopro.pulsando{animation:none}

/* recuo da bruma numa célula, sem redesenhar o mapa inteiro */
.bm-sumindo{animation:brumaSai .42s ease-in forwards;transform-origin:center;transform-box:fill-box}
@keyframes brumaSai{to{opacity:0;transform:scale(1.4) translateY(-12px)}}

/* ---- cena 3D no lugar do mapa SVG ----
   Sem WebGL o SVG continua sendo o jogo inteiro. Com WebGL, o canvas assume o visual e o
   SVG dá lugar a uma lista de botões invisível — o teclado e o leitor de tela continuam
   percorrendo as 25 células, e o realce de foco aparece na própria cena 3D. */
.cena.com-3d{aspect-ratio:16/11;max-height:min(62vh,520px)}
.cena.com-3d #mapa{position:absolute;inset:0;pointer-events:none}
.mapa-a11y{list-style:none;margin:0;padding:0}
.mapa-a11y button{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
 white-space:nowrap;border:0;padding:0;pointer-events:auto}
.mapa-a11y button:focus-visible{position:absolute;left:10px;bottom:56px;width:auto;height:auto;
 clip:auto;white-space:normal;max-width:min(340px,80%);padding:9px 13px;border-radius:12px;
 background:var(--carta2);border:1px solid var(--luz);font-size:12.5px;text-align:left;z-index:5}
@media (max-width:899px){.cena.com-3d{aspect-ratio:4/3;max-height:56vh}}

/* Marcadores sobre a cena 3D: contorno de "dá para abrir aqui" e número de pistas.
   Ficam em HTML (e não dentro do 3D) para continuarem nítidos em qualquer tela. */
.marcadores{position:absolute;inset:0;pointer-events:none}
.cena:not(.com-3d) .marcadores{display:none}
.marca-celula{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
 width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
 border:2px solid var(--luz);background:rgba(15,11,36,.42);backdrop-filter:blur(2px);
 font-size:14px;font-weight:700;color:var(--texto);transition:transform .15s,background .15s}
.marca-celula.fraca{border-color:color-mix(in srgb,var(--luz) 45%,transparent);opacity:.62}
.marca-celula:hover{transform:translate(-50%,-50%) scale(1.12);background:rgba(15,11,36,.6)}
.marca-celula:active{transform:translate(-50%,-50%) scale(.94)}
.marca-celula.pulsa{animation:brilha 2.6s ease-in-out infinite}
body.movimento-reduzido .marca-celula.pulsa{animation:none}

/* ---- celular ----
   No estreito o balão do passo a passo vira uma faixa embaixo: apontar para o mapa e
   ao mesmo tempo cobrir o mapa é o pior dos dois mundos. */
@media (max-width:899px){
 .holofote .balao{position:fixed!important;left:10px!important;right:10px!important;
  top:auto!important;bottom:calc(80px + var(--barra-baixo));max-width:none}
}
@media (max-width:420px){
 .chip{padding:7px 10px;gap:6px}
 .chip b{font-size:15px}
 .chip small{font-size:8.5px;letter-spacing:.06em}
 .chip i{font-size:15px}
 .recursos{gap:6px}
}
/* Alvo de toque confortável em qualquer tela: 44px é o mínimo que o dedo acerta. */
.rodape button{min-height:48px}
.marca-celula{min-width:44px;min-height:44px}
.linha{min-height:52px}

@media (max-width:899px){
 /* Numa ilha pequena, 25 argolas de 44px se atropelam. Aqui o marcador vira só informação:
    quem capta o toque é a própria cena 3D, e o alvo passa a ser a célula inteira — maior
    que qualquer botão que coubesse aqui. */
 .marca-celula{width:30px;height:30px;min-width:30px;min-height:30px;font-size:12px;
  pointer-events:none;border-width:1.5px}
 /* A dica sai de cima da ilha e vira uma faixa abaixo dela. */
 .cena{padding-bottom:42px}
 .dica-mapa{bottom:0;left:0;right:0;border-radius:0;background:rgba(15,11,36,.92);
  padding:11px 14px;line-height:1.35}
 .cena-topo{padding:9px}
 .regiao-nome b{font-size:14px}
 .regiao-nome i{display:none}
}

/* Evento: um cartão só, discreto, e nunca uma janela que abre sozinha.
   Nada de contagem regressiva agressiva — a data de encerramento basta. */
.cartao-evento{display:grid;gap:8px;text-align:left;width:100%;
 background:linear-gradient(145deg,color-mix(in srgb,var(--luz) 14%,var(--carta)),var(--carta))}
.cartao-evento[hidden]{display:none}
.cartao-evento .titulo{display:flex;align-items:center;gap:10px}
.cartao-evento .titulo i{font-style:normal;font-size:22px;width:38px;height:38px;flex:0 0 auto;
 border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--luz) 22%,transparent)}
.cartao-evento b{display:block;font-size:14.5px}
.cartao-evento small{display:block;font-size:11.5px;color:var(--fraco)}
.cartao-evento .marcos{display:flex;gap:5px}
.cartao-evento .marcos span{flex:1;height:6px;border-radius:99px;background:var(--fundo2);border:1px solid var(--linha)}
.cartao-evento .marcos span.on{background:var(--luz);border-color:var(--luz)}