/* css/painel.css — coluna esquerda (telas largas): rodada, fase, território e Casas ficam na parte preta, fora do mapa.
   Em telas estreitas (<900px) a coluna vira "display:contents": o cartão da fase e o painel do território mantêm o visual antigo do style.css,
   e as seções novas (selos e Casas) ficam escondidas até existir a gaveta do celular. */
#lateral{display:contents}
#lateral .sec{display:none}

@media (min-width:900px){
 :root{--pw:360px;--mg:14px}                       /* mesmos valores de PW e MG no js/mapa.js */
 #lateral{position:fixed;z-index:3;left:var(--mg);top:calc(76px + env(safe-area-inset-top,0px));bottom:var(--mg);width:var(--pw);
  display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;padding:2px 4px 2px 2px;
  scrollbar-width:thin;scrollbar-color:rgba(232,185,74,.4) transparent}
 #lateral>*{flex:none}
 #lateral .sec{display:block;position:relative;padding:10px 12px 12px;background:var(--panel);backdrop-filter:blur(6px);
  border:1px solid rgba(232,185,74,.35);border-radius:8px;box-shadow:inset 0 0 0 3px rgba(18,16,12,.9),inset 0 0 0 4px rgba(232,185,74,.14)}
 #lateral .sec h3{margin:0;font:500 12px var(--serif-t);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

 /* o cartão da fase e o painel do território deixam de flutuar */
 #lateral>#plan{position:static;transform:none;width:auto;top:auto;left:auto;max-height:none;overflow:visible}
 #lateral>#panel{position:static;width:auto;max-height:none;overflow:visible}
 #plan .passo:not(.atual) .nm{display:none}
 #plan .passo.atual{flex:2.2}
 #plan .ouro{width:100%;text-align:center}
 #plan .dica{width:100%;text-align:center}

 /* avisos aparecem no centro do mapa, não no meio da tela */
 #toast{top:76px !important;left:calc(var(--pw) + 2*var(--mg) + (100vw - var(--pw) - 2*var(--mg))/2)}
}

/* ===== selos da rodada ===== */
#rodada{--sz:30px}
#rodada .arco{position:relative;height:76px;margin-top:8px}
.selo{position:absolute;width:var(--sz);text-align:center;transition:transform .3s,filter .3s}
.selo img,.selo .ph{display:block;width:var(--sz);height:var(--sz);object-fit:contain;user-select:none}
.selo .ph{border-radius:50%;background:#2a2114;border:2px solid rgba(232,185,74,.5)}
.selo b{display:block;margin-top:2px;font:600 11px var(--serif-t);color:var(--ink2)}
.selo.passada img{filter:brightness(.45) saturate(.6)}
.selo.passada b{opacity:.55}
.selo.futura img{filter:grayscale(.5) brightness(.75);opacity:.75}
.selo.atual{transform:scale(1.35);transform-origin:50% 40%;z-index:2}
.selo.atual img,.selo.atual .ph{filter:drop-shadow(0 0 7px rgba(232,185,74,.9));animation:brilho 2.6s ease-in-out infinite}
.selo.atual b{color:var(--gold)}
@keyframes brilho{50%{filter:drop-shadow(0 0 13px rgba(255,214,110,1))}}

/* ===== cartões das Casas ===== */
#casas .grade{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.casa{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
 background:linear-gradient(180deg,rgba(40,33,22,.92),rgba(22,18,12,.92));border:1px solid rgba(232,185,74,.28);border-left:4px solid var(--cor,#888);border-radius:6px;
 transition:border-color .15s,box-shadow .15s,background .15s}
.casa:hover{border-color:rgba(232,185,74,.7)}
.casa:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.casa.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(70,55,28,.95),rgba(34,27,15,.95));box-shadow:0 0 12px rgba(232,185,74,.3)}
.casa .esc{flex:none;width:38px;height:38px;display:grid;place-items:center}
.casa .esc img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.casa .ph{display:block;width:30px;height:30px;border-radius:50%;background:var(--cor,#555);border:2px solid #14110b}
.casa .info{min-width:0;flex:1}
.casa .nm{display:block;font:600 12.5px var(--serif-t);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.casa .sts{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:2px;font-size:13px;color:var(--ink2)}
.casa .st img,.casa .st .ph{width:15px;height:15px;vertical-align:-3px;margin-right:2px;display:inline-block;border-width:1px}
.casa .st b{font-weight:400;color:var(--ink)}
.casa .vc{position:absolute;top:3px;right:6px;font:600 9px var(--serif-t);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

@media (prefers-reduced-motion:reduce){.selo.atual img,.selo.atual .ph{animation:none}.selo{transition:none}}

/* ===== Mapa mais claro: sem vinheta e sem cantos escurecidos (jogamos o mapa inteiro, não só o centro) ===== */
#vig{display:none}
#world #luz{opacity:.35;background:radial-gradient(ellipse at center,rgba(255,244,214,.35) 0%,rgba(20,15,10,.2) 100%)}
#world img:first-child{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30px),linear-gradient(to bottom,transparent 0,#000 30px);
  mask-image:linear-gradient(to right,transparent 0,#000 30px),linear-gradient(to bottom,transparent 0,#000 30px);
}

/* ===== Fichas de Ordem com imagem (painel do território) ===== */
.fc.tk{padding:0;border:0;background:none;border-radius:50%;line-height:0;transition:transform .12s}
.fc.tk img{display:block;width:44px;height:44px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.fc.tk.esp{background:none;border:0}
.fc.tk:hover{background:none;transform:scale(1.1)}
.fc.tk.nao{opacity:.45}
.fc.tk.nao img{filter:grayscale(1) brightness(.6)}