/* Rolagem (ROLAGEM.md): regras de menus. Carregado por último no index.html, ganha na cascata sem mexer nos CSS antigos. */

/* §7 Menu da partida e Camadas: cabeçalho de 44 px, padding 16, × de 44 px. */
.map-first :is(#game-menu,#map-options){padding:16px}
.map-first :is(#game-menu,#map-options) .dialog-top{min-height:44px;margin:0}
.map-first :is(#game-menu,#map-options) .dialog-top h2{margin:0;font:600 22px/1.1 var(--display)}
.map-first :is(#game-menu,#map-options) .dialog-top .close{width:44px;height:44px;min-height:44px}
/* Menu: a marca saiu (o h2 já diz "Patch 0"); Como jogar e Nova simulação lado a lado. */
.map-first #game-menu .brand{display:none}
.map-first #game-menu[open]{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.map-first #game-menu>*{grid-column:1/-1}
.map-first #game-menu>:is(#help,#restart){grid-column:auto;margin:0}
.map-first #game-menu .top-status{margin:0}
.map-first #game-menu #feel-toggles{margin:0}
.map-first #game-menu #save-status{margin:0}
/* Camadas: as 5 camadas em 2 linhas de 3. */
.map-first #map-options .layer-controls{grid-template-columns:repeat(3,1fr);margin-top:8px}
.map-first #map-options #signal-tray{margin-top:8px}

/* §8 Como jogar: meta, 6 termos e as regras em título + 1–2 frases; o texto inteiro de cada regra abre num toque
   (o <details> aberto ocupa as 2 colunas). Fechado, o manual cabe em ~1,5 tela. */
#help-dialog{width:min(800px,calc(100vw - 32px));padding:14px 20px 16px}
#help-dialog h2{margin:4px 0 8px;font-size:26px}
#help-dialog h2 br{display:none}
#help-dialog>.muted{margin:0;font-size:11px}
#help-dialog .manual-goal{margin:0 0 8px;padding:8px 12px;border:1px solid #ff8a5c40;border-radius:8px;background:#ff8a5c12;font:13px/1.45 var(--body);color:#e6efe6}
#help-dialog .manual-goal strong{color:#ff9f78}
#help-dialog .glossary{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 16px;margin:0 0 8px}
#help-dialog .glossary div{align-content:start}
#help-dialog .glossary-chain{margin:0 0 10px}
#help-dialog .instructions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0 0 10px;padding:0;list-style:none}
#help-dialog .instructions li{margin:0}
#help-dialog .instructions li:has(details[open]){grid-column:1/-1}
#help-dialog .instructions summary{position:relative;display:block;min-height:44px;padding:7px 30px 7px 10px;border:1px solid #9fc3c126;border-radius:8px;background:#0a1d24;font:12px/1.4 var(--body);color:#c9dccf;cursor:pointer;list-style:none}
#help-dialog .instructions summary::-webkit-details-marker{display:none}
#help-dialog .instructions summary::after{content:'+';position:absolute;top:6px;right:10px;font:600 16px/1 var(--body);color:#9fbab7}
#help-dialog .instructions details[open] summary::after{content:'−'}
#help-dialog .instructions summary strong{font-size:13px;color:#e6efe6}
#help-dialog .instructions summary:focus-visible{outline:2px solid #fff1c8;outline-offset:2px}
#help-dialog .instructions details p{margin:6px 10px 4px;font:12px/1.5 var(--body);color:#a9c4c2}
@media(max-width:600px){#help-dialog :is(.glossary,.instructions){grid-template-columns:1fr}}

/* §9 Tela final: momentos-chave à direita; "Ver tudo" troca pela linha do tempo inteira, que rola por dentro. */
.end-screen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.end-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.end-story{contain:size;display:flex;flex-direction:column;gap:6px;min-height:0;padding:16px 18px 14px 22px;border-left:1px solid var(--line);background:#08141acc}
.end-story-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.end-story h3{margin:0;font:600 12px var(--body);letter-spacing:.05em;text-transform:uppercase;color:#ff9f78}
#end-all{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:5px;background:transparent;color:#d6e2df;font:600 12px var(--body);cursor:pointer}
.end-story :is(.end-moments,.end-timeline){flex:1 1 auto;min-height:0;margin:0;padding:4px 0 0;overflow:auto;list-style:none;contain:none;border:0;background:none}
.end-story [hidden]{display:none}
.end-story li{position:relative;padding:0 0 10px 17px;font:13px/1.35 var(--body);color:#d6e2df}
.end-story li:before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:#ff8a6a;box-shadow:0 0 0 3px #ff8a6a22}
.end-story li:after{content:'';position:absolute;left:3px;top:16px;bottom:-1px;width:1px;background:#ff8a6a40}
.end-story li:last-child:after{display:none}
.end-story li b{display:inline;font:600 12px var(--mono);letter-spacing:0;color:var(--muted)}
@media(max-width:600px){.end-screen{grid-template-columns:1fr}.end-story{contain:none;border-left:0;border-top:1px solid var(--line)}.end-story :is(.end-moments,.end-timeline){overflow:visible}}
@media(max-height:450px){.end-story{padding:10px 14px 8px 18px}.end-story li{padding-bottom:8px;font-size:12px}}
/* Critério das estrelas (rodada 6): no topo da coluna da direita; a conta em cinza, a faixa seguinte e o que faltou em claro. */
.end-why{flex:none;display:flex;flex-direction:column;gap:2px;margin:0;padding-bottom:8px;border-bottom:1px solid var(--line);font:12px/1.35 var(--body);color:#d6e2df}
.end-why span:first-child{color:var(--muted)}

/* Outros achados. Menu inicial em 740×360: a linha "Dia · países · ruína" passava por baixo do menu; agora quebra. */
.title-live{white-space:normal;text-wrap:balance}
/* Alvos de 44 px: botões do aviso, zoom do mapa e os botões de borda que abrem o menu e as Camadas
   (as Camadas descem para caber embaixo do zoom). */
.warning-actions button,.map-first .map-tools button{min-height:44px}
.map-first .map-tools button{width:44px;height:44px}
.map-first .edge-button{height:44px}
body.map-first #open-layers{top:206px}
/* impeccable wide-tracking: o rótulo acima dos títulos (.eyebrow) tinha 1,4 px em 11 px (0,13em). */
.eyebrow{letter-spacing:.05em}
/* Tela final: mortes por causa (rodada 6) no topo da coluna da direita, até 2 linhas; o texto inteiro fica no title. */
.end-causes{margin:0 0 4px;font:11px/1.35 var(--body);color:#e9a596;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-height:370px){.end-causes{display:block;white-space:nowrap;text-overflow:ellipsis}}
/* Tela final do colapso (NARRATIVA.md): governos e população restante logo abaixo do motivo, sem rolar em 740×360. */
.end-aftermath{display:block;margin-top:2px;font:12px/1.35 var(--body);color:#d6e2df}
/* Momentos-chave: com a linha das mortes e o critério das estrelas, 5 marcos passavam 9 a 12 px em 844×390 e 740×360. */
@media(max-height:450px){.end-story li{padding-bottom:5px}}