/* Tela de modos de jogo: quatro colunas verticais, da mais fácil à mais difícil */
.tela-modos {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--tex-papel, none), var(--gravura-breu); background-size: 420px 420px, auto; background-blend-mode: multiply;
}
.modos-voltar { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 2; }
.modos-titulo { margin: 4px 0 0; text-align: center; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.4rem); color: var(--gravura-luz); }
.modos-trilho { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.modo-coluna {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px 18px;
  color: var(--pergaminho); box-shadow: inset 0 0 0 1px rgba(225, 187, 134, .25), 0 10px 26px rgba(0, 0, 0, .45);
}
/* fundo: imagem do modo (quando houver) sobre um tom que sobe com a dificuldade */
.modo-fundo { position: absolute; inset: 0; z-index: -1; background: var(--modo-img, none) center / cover no-repeat, var(--modo-tom); }
.modo-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 13, 7, .55), rgba(20, 13, 7, .15) 35%, rgba(20, 13, 7, .7)); }
.modo-historia { --modo-tom: linear-gradient(180deg, #8C7A4E, #5E5234); }
.modo-mediano  { --modo-tom: linear-gradient(180deg, #8A6436, #5A3F22); }
.modo-dificil  { --modo-tom: linear-gradient(180deg, #7C3A22, #4A2214); }
.modo-realista { --modo-tom: linear-gradient(180deg, #4E1810, #1E0B07); }
.modo-titulo { margin: 0; text-align: center; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.05; color: var(--gravura-luz); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.modo-nivel { margin: 0; letter-spacing: .3em; color: var(--ouro-vivo); font-size: .9rem; }
.modo-lista { list-style: none; margin: 6px 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; text-align: center; font-family: var(--f-corpo); font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.modo-iniciar {
  min-height: 48px; width: 100%; padding: 10px 18px; border: none; border-radius: 10px; cursor: pointer;
  font-family: var(--f-menu); font-size: 1.15rem; color: var(--gravura-tinta);
  background: linear-gradient(180deg, rgba(255, 236, 200, .25), rgba(92, 62, 30, .12)), var(--tex-papel, none), var(--gravura-papel); background-size: auto, 300px 300px, auto;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .4), 0 3px 0 rgba(0, 0, 0, .35);
  transition: transform var(--dur, .18s) ease, box-shadow var(--dur, .18s) ease;
}
.modo-iniciar:focus-visible, .modo-iniciar:hover { outline: none; color: var(--gravura-vermelho); box-shadow: inset 0 0 0 2px var(--gravura-vermelho), 0 3px 0 rgba(0, 0, 0, .35); }
.modo-iniciar:active { transform: translateY(2px); }
.modo-coluna:focus-within { box-shadow: inset 0 0 0 2px var(--ouro-vivo), 0 10px 26px rgba(0, 0, 0, .45); }

/* Celular em pé: carrossel, um modo por vez */
@media (max-width: 760px) {
  .modos-titulo { padding: 0 48px; }
  .modos-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 9vw; margin: 0 -16px; scrollbar-width: none; }
  .modos-trilho::-webkit-scrollbar { display: none; }
  .modo-coluna { flex: 0 0 82vw; scroll-snap-align: center; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .modo-lista { gap: 4px; font-size: .88rem; }
  .modo-coluna { padding: 12px 10px; gap: 6px; }
}

/* Nome do chefe */
.modos-nome { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(20, 13, 7, .78); }
.modos-nome-papel {
  width: min(28rem, 100%); display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border-radius: 14px; color: var(--gravura-tinta);
  background: linear-gradient(180deg, rgba(255, 236, 200, .2), rgba(92, 62, 30, .1)), var(--tex-papel, none), var(--gravura-papel); background-size: auto, 300px 300px, auto;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .4), 0 16px 40px rgba(0, 0, 0, .55);
}
.modos-nome-modo { margin: 0; font-family: var(--f-menu); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gravura-vermelho); }
.modos-nome h2 { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.1; }
.modos-nome-campo { min-height: 48px; padding: 10px 14px; border: none; border-radius: 8px; font: 1.15rem var(--f-corpo); color: var(--gravura-tinta); background: rgba(255, 246, 228, .65); box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .45); }
.modos-nome-campo:focus { outline: 2px solid var(--gravura-vermelho); outline-offset: 1px; }
.modos-nome-erro { margin: 0; min-height: 1.2em; font-size: .9rem; color: var(--gravura-vermelho); }
.modos-nome-acoes { display: flex; flex-direction: column; gap: 8px; }
.modos-nome-voltar { min-height: 44px; border: none; background: none; font: 1rem var(--f-menu); color: var(--gravura-sombra); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Relatório de combate: listas de perdas e ferimentos */
.ev-saque.tom-perigo h3 { color: var(--gravura-vermelho); }
.ev-saque.tom-alerta h3 { color: var(--gravura-sombra); }