:root {
  --pergaminho: #efe0bc;
  --pergaminho-escuro: #d9c497;
  --tinta: #2b1d14;
  --tinta-suave: #5a4630;
  --ouro: #e8b84a;
  --ouro-claro: #ffe08a;
  --ambar: #f0a030;
  --noite: #151638;
  --roxo: #3b2a6e;
  --painel: rgba(24, 16, 30, 0.92);
  --borda: #8a6a3a;
  --hp: #e0303a;
  --mp: #2f6fe0;
  --sp: #3cbf4a;
  --fonte-titulo: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --fonte: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --seguro-esq: env(safe-area-inset-left, 0px);
  --seguro-dir: env(safe-area-inset-right, 0px);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-topo: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0b0814; color: var(--pergaminho);
  font-family: var(--fonte); user-select: none; -webkit-user-select: none; touch-action: none;
  overscroll-behavior: none;
}
#tela { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* Luz e textos em camadas próprias: a placa de vídeo junta tudo, o jogo não repinta a tela inteira */
.camada { position: fixed; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
#luz-brilho { mix-blend-mode: plus-lighter; }
@supports not (mix-blend-mode: plus-lighter) { #luz-brilho { mix-blend-mode: screen; } }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui .passa { pointer-events: none; }
#ui .passa > * { pointer-events: auto; }
button { font-family: inherit; }

/* ───────── Botões ───────── */
.botao {
  appearance: none; border: 2px solid var(--borda); border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #4a3423, #2e2016); color: var(--ouro-claro);
  font: 700 16px var(--fonte); padding: 10px 18px; min-height: 44px; letter-spacing: 0.02em;
  box-shadow: 0 2px 0 #1a1008, inset 0 1px 0 rgba(255, 230, 170, 0.25);
  transition: transform 0.08s, filter 0.15s;
}
.botao:hover { filter: brightness(1.15); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.botao.dourado { background: linear-gradient(180deg, #f6d27a, #c88a2a); color: #2b1d14; border-color: #fff0c0; }
.botao.pequeno { font-size: 13px; padding: 6px 10px; min-height: 34px; border-radius: 8px; }
.botao.perigo { background: linear-gradient(180deg, #7a2a22, #4a1612); }
.botao:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 2px; }

/* ───────── Título ───────── */
.titulo-tela {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: max(6vh, 20px) 16px 16px; gap: 10px; pointer-events: none;
}
.titulo-tela > * { pointer-events: auto; }
.titulo-nome {
  font-family: var(--fonte-titulo); font-weight: 700; text-align: center; line-height: 1.02; margin: 0;
  font-size: clamp(30px, 6.4vw, 74px);
  background: linear-gradient(180deg, #fff6d6 0%, #ffd97a 45%, #e8902a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(43, 29, 20, 0.85)) drop-shadow(0 0 22px rgba(255, 190, 90, 0.45));
}
.titulo-sub { font-family: var(--fonte-titulo); font-style: italic; color: #f4e3c0; text-shadow: 0 2px 6px #000; font-size: clamp(13px, 2vw, 19px); margin: 0 0 4px; text-align: center; }
.titulo-menu { display: flex; flex-direction: column; gap: 10px; width: min(300px, 82vw); margin-top: auto; margin-bottom: max(5vh, 12px); }
.titulo-rodape { position: absolute; bottom: calc(6px + var(--seguro-baixo)); right: calc(10px + var(--seguro-dir)); font-size: 11px; opacity: 0.6; pointer-events: none; }

/* ───────── Cartão de pergaminho (criação, painéis) ───────── */
.pergaminho {
  background: radial-gradient(ellipse at 50% 0%, #fbf0d6, var(--pergaminho) 60%, var(--pergaminho-escuro));
  color: var(--tinta); border: 3px solid #7a5a32; border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 245, 220, 0.6), inset 0 0 40px rgba(140, 100, 50, 0.25);
}
.pergaminho h2, .pergaminho h3 { font-family: var(--fonte-titulo); margin: 0; color: #4a2e16; }
.centro-tela { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }

.criacao { width: min(560px, 100%); max-height: calc(100% - 8px); overflow: auto; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.criacao .linha { display: flex; gap: 14px; align-items: stretch; }
.criacao .previa { flex: 0 0 150px; height: 170px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff6dd, #e2c99a); border: 2px solid #b08a52; }
.criacao .lado { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rotulo { font: 700 13px var(--fonte); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.escolha-sexo { display: flex; gap: 8px; }
.escolha-sexo button {
  flex: 1; min-height: 46px; border-radius: 10px; border: 2px solid #b08a52; background: #f8ecd0; color: var(--tinta);
  font: 700 15px var(--fonte); cursor: pointer;
}
.escolha-sexo button[aria-pressed="true"] { background: linear-gradient(180deg, #f6d27a, #d9a040); border-color: #6a4a22; box-shadow: inset 0 2px 6px rgba(90, 60, 20, 0.35); }
.campo-texto {
  width: 100%; min-height: 46px; border-radius: 10px; border: 2px solid #b08a52; background: #fffaf0; color: var(--tinta);
  font: 700 18px var(--fonte); padding: 8px 12px; user-select: text; -webkit-user-select: text;
}
.campo-texto:focus { outline: 3px solid #e8b84a; }
.erro-campo { color: #a8322a; font-size: 13px; min-height: 16px; }
.dica { font-size: 13px; color: var(--tinta-suave); line-height: 1.35; }

/* ───────── Abertura (legendas) ───────── */
.legenda {
  position: absolute; left: 50%; bottom: calc(12% + var(--seguro-baixo)); transform: translateX(-50%);
  width: min(900px, 92vw); text-align: center; pointer-events: none;
  font-family: var(--fonte-titulo); font-size: clamp(16px, 2.6vw, 26px); color: #fff4dc;
  text-shadow: 0 2px 4px #000, 0 0 14px rgba(0, 0, 0, 0.9); transition: opacity 0.5s;
}
.legenda .quem { display: block; font-family: var(--fonte); font-weight: 700; font-size: 0.6em; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd38a; margin-bottom: 4px; }
.botao-pular { position: absolute; top: calc(12px + var(--seguro-topo)); right: calc(12px + var(--seguro-dir)); opacity: 0.85; }

/* ───────── HUD ───────── */
/* #ui > .hud: a camada da HUD cobre a tela toda e não pode "engolir" o mouse (senão a mira não funciona) */
#ui > .hud, .hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.status {
  position: absolute; top: calc(8px + var(--seguro-topo)); left: calc(8px + var(--seguro-esq));
  display: flex; gap: 8px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 20, 26, 0.88), rgba(20, 12, 18, 0.88)); border: 2px solid #6a4a2a;
  min-width: 230px; pointer-events: auto;
}
.retrato { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ouro); background: radial-gradient(circle at 50% 35%, #fff2d0, #c8a060); flex: 0 0 auto; }
.barras { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 150px; }
.nome-nivel { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; color: var(--ouro-claro); gap: 8px; }
.nome-nivel .classe { color: #d8c8a8; font-weight: 400; }
.barra { position: relative; height: 13px; border-radius: 7px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 230, 180, 0.25); overflow: hidden; }
.barra .cheio { position: absolute; inset: 0 auto 0 0; border-radius: 7px; transition: width 0.12s; }
.barra .texto { position: absolute; inset: 0; font: 700 9.5px/13px var(--fonte); text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.barra.hp .cheio { background: linear-gradient(180deg, #ff6a6a, var(--hp) 60%, #8a1a1a); }
.barra.mp .cheio { background: linear-gradient(180deg, #7ab0ff, var(--mp) 60%, #1a3a8a); }
.barra.sp .cheio { background: linear-gradient(180deg, #8af08a, var(--sp) 60%, #1a6a2a); }
.barra.xp { height: 5px; border-radius: 3px; }
.barra.xp .cheio { background: linear-gradient(90deg, #b090ff, #ffd0ff); }
.ouro { font-size: 12px; color: var(--ouro-claro); font-weight: 700; }
.pontos-alerta { color: #7cff7a; font-size: 11px; font-weight: 700; animation: pisca 1.2s infinite; }
@keyframes pisca { 50% { opacity: 0.4; } }

.menu-topo { position: absolute; top: calc(8px + var(--seguro-topo)); right: calc(8px + var(--seguro-dir)); display: flex; gap: 6px; }
.icone-botao {
  width: 46px; height: 46px; border-radius: 12px; border: 2px solid #6a4a2a; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(60, 40, 30, 0.92), rgba(30, 20, 16, 0.92)); color: var(--ouro-claro); padding: 0; position: relative;
}
.icone-botao svg { width: 28px; height: 28px; }
.icone-botao .tecla { position: absolute; bottom: 1px; right: 3px; font-size: 9px; color: #d8c8a8; opacity: 0.8; }
.icone-botao .bolinha { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #7cff7a; border: 2px solid #1a1010; }
.nome-mapa {
  position: absolute; top: calc(12px + var(--seguro-topo)); left: 50%; transform: translateX(-50%); pointer-events: none;
  font-family: var(--fonte-titulo); font-size: clamp(16px, 2.4vw, 24px); color: #fff0d0; text-shadow: 0 2px 6px #000; transition: opacity 1s; white-space: nowrap;
}
.barra-chefe {
  position: absolute; top: calc(64px + var(--seguro-topo)); left: 50%; transform: translateX(-50%); width: min(520px, 70vw); pointer-events: none; text-align: center;
  font-family: var(--fonte-titulo); color: #ffd8b0; text-shadow: 0 2px 4px #000; font-size: 15px;
}
.barra-chefe .barra { height: 14px; margin-top: 3px; }
.barra-chefe .cheio { background: linear-gradient(180deg, #ffb070, #d0402a 60%, #6a1a10); }

/* Barra de poderes (PC) e botões de toque */
.acoes {
  position: absolute; bottom: calc(10px + var(--seguro-baixo)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: flex-end;
}
.slot {
  position: relative; width: 54px; height: 54px; border-radius: 12px; border: 2px solid #6a4a2a; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 50% 35%, rgba(90, 64, 44, 0.95), rgba(26, 16, 14, 0.95)); color: var(--ouro-claro);
  display: grid; place-items: center; overflow: hidden; touch-action: none;
}
.slot svg { width: 34px; height: 34px; }
.slot .tecla { position: absolute; top: 2px; left: 4px; font: 700 10px var(--fonte); color: #e8d8b8; text-shadow: 0 1px 2px #000; }
.slot .qtd { position: absolute; bottom: 1px; right: 4px; font: 700 11px var(--fonte); color: #fff; text-shadow: 0 1px 2px #000; }
.slot .recarga { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.65) var(--p, 0%), transparent 0); pointer-events: none; }
.slot .custo { position: absolute; bottom: 1px; left: 4px; font: 700 9px var(--fonte); text-shadow: 0 1px 2px #000; }
.slot.sem-recurso { filter: grayscale(0.8) brightness(0.7); }
.slot.ativo { border-color: var(--ouro-claro); box-shadow: 0 0 12px rgba(255, 220, 120, 0.7); }
.slot.trancado { opacity: 0.45; }
.separador { width: 8px; }

.interagir {
  position: absolute; left: 50%; bottom: calc(84px + var(--seguro-baixo)); transform: translateX(-50%);
  padding: 8px 16px; border-radius: 22px; background: rgba(30, 20, 16, 0.9); border: 2px solid var(--ouro);
  color: var(--ouro-claro); font: 700 15px var(--fonte); cursor: pointer; white-space: nowrap; display: flex; gap: 8px; align-items: center;
}
.interagir .tecla { background: var(--ouro); color: var(--tinta); border-radius: 6px; padding: 0 6px; font-size: 13px; }

/* Toque */
.toque { position: absolute; inset: 0; pointer-events: none; }
.toque > * { pointer-events: auto; }
.zona-joystick { position: absolute; left: 0; bottom: 0; width: 45%; height: 70%; }
.joystick-base { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255, 240, 210, 0.12); border: 2px solid rgba(255, 230, 170, 0.45); pointer-events: none; }
.joystick-pino { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255, 245, 220, 0.85), rgba(220, 180, 110, 0.75)); border: 2px solid rgba(90, 60, 30, 0.8); pointer-events: none; }
.botoes-toque { position: absolute; right: calc(10px + var(--seguro-dir)); bottom: calc(10px + var(--seguro-baixo)); width: 230px; height: 200px; }
.botoes-toque .slot { position: absolute; width: 56px; height: 56px; border-radius: 50%; }
.botoes-toque .slot.grande { width: 84px; height: 84px; right: 0; bottom: 0; }
.botoes-toque .slot.grande svg { width: 46px; height: 46px; }
.pocoes-toque { position: absolute; left: calc(10px + var(--seguro-esq)); bottom: calc(10px + var(--seguro-baixo)); display: flex; gap: 6px; }
.pocoes-toque .slot { width: 46px; height: 46px; border-radius: 50%; }
.pocoes-toque .slot svg { width: 30px; height: 30px; }

/* Mensagens rápidas */
.avisos { position: absolute; left: 50%; top: calc(70px + var(--seguro-topo)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(560px, 92vw); }
.aviso {
  padding: 7px 14px; border-radius: 10px; background: rgba(24, 16, 22, 0.92); border: 1px solid #8a6a3a; color: #f4e6c8; font-size: 14px; text-align: center;
  animation: entra 0.25s ease-out; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.aviso.bom { border-color: #7cc86a; color: #e0ffd8; }
.aviso.erro { border-color: #d0503a; color: #ffd8d0; }
.aviso.aviso-amarelo { border-color: #d8b040; }
.aviso.item { display: flex; align-items: center; gap: 8px; }
.aviso.item svg { width: 26px; height: 26px; }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } }

/* Diálogo */
.dialogo {
  position: absolute; left: 50%; bottom: calc(14px + var(--seguro-baixo)); transform: translateX(-50%);
  width: min(760px, calc(100% - 24px)); padding: 14px 18px 12px; cursor: pointer; display: flex; gap: 14px; align-items: flex-start;
}
.dialogo .rosto { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #fff6dd, #e2c99a); border: 2px solid #b08a52; }
.dialogo .conteudo { flex: 1; min-width: 0; }
.dialogo .quem { font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; color: #6a3a16; margin-bottom: 4px; }
.dialogo .fala { font-size: 16px; line-height: 1.45; min-height: 46px; }
.dialogo .continuar { text-align: right; font-size: 12px; color: var(--tinta-suave); margin-top: 4px; animation: pisca 1.4s infinite; }
.dialogo .simbolos { display: flex; gap: 8px; margin-top: 6px; }
.dialogo .simbolos span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #3a2a1e; }

/* Painéis grandes (inventário, ferreiro, loja…) */
.fundo-painel { position: absolute; inset: 0; background: rgba(5, 2, 8, 0.55); display: flex; align-items: center; justify-content: center; padding: calc(8px + var(--seguro-topo)) calc(8px + var(--seguro-dir)) calc(8px + var(--seguro-baixo)) calc(8px + var(--seguro-esq)); }
.painel { width: min(920px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; border-bottom: 2px solid rgba(122, 90, 50, 0.4); }
.painel-topo h2 { font-size: 22px; }
.painel-corpo { padding: 12px 14px 14px; overflow: auto; flex: 1; min-height: 0; }
.fechar { width: 40px; height: 40px; border-radius: 10px; border: 2px solid #7a5a32; background: #f8ecd0; color: #4a2e16; font: 900 20px var(--fonte); cursor: pointer; }
.abas { display: flex; gap: 6px; flex-wrap: wrap; }
.aba { border: 2px solid #b08a52; background: #f8ecd0; color: var(--tinta); border-radius: 8px; padding: 6px 12px; font: 700 14px var(--fonte); cursor: pointer; min-height: 38px; }
.aba[aria-selected="true"] { background: linear-gradient(180deg, #f6d27a, #d9a040); border-color: #6a4a22; }

.inventario-layout { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 14px; }
.equipados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.equipados .titulo-secao { grid-column: 1 / -1; }
.titulo-secao { font: 700 13px var(--fonte); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin: 4px 0 2px; }
.grade-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 7px; }
.celula {
  position: relative; aspect-ratio: 1; border-radius: 10px; border: 2px solid #b08a52; background: radial-gradient(circle at 50% 40%, #fff8e8, #e8d4a8);
  display: grid; place-items: center; cursor: pointer; padding: 0; min-width: 0;
}
.celula svg { width: 70%; height: 70%; }
.celula .qtd { position: absolute; bottom: 2px; right: 5px; font: 800 12px var(--fonte); color: #2b1d14; }
.celula .rotulo-slot { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font: 700 9px var(--fonte); color: #8a6a3a; text-transform: uppercase; }
.celula.vazia { opacity: 0.6; }
.celula.selecionada { outline: 3px solid #e8902a; outline-offset: 1px; }
.celula .dur { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.25); overflow: hidden; }
.celula .dur i { display: block; height: 100%; background: #5fbf5a; }
.celula.quebrada { filter: grayscale(0.7); }
.celula.quebrada::after { content: "QUEBRADO"; position: absolute; inset: auto 0 10px; text-align: center; font: 800 9px var(--fonte); color: #a8322a; }
.detalhe { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 250, 235, 0.7); border: 2px solid #c8a870; display: flex; flex-direction: column; gap: 6px; }
.detalhe .nome-item { font: 700 17px var(--fonte-titulo); }
.detalhe .linha-info { font-size: 13px; color: #4a3a28; }
.detalhe .botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.resumo-status { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 13px; margin-top: 8px; }
.resumo-status b { color: #4a2e16; }

.lista-linhas { display: flex; flex-direction: column; gap: 6px; }
.linha-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 250, 235, 0.6); border: 2px solid #d4b882; }
.linha-item .icone { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; }
.linha-item .icone svg { width: 38px; height: 38px; }
.linha-item .info { flex: 1; min-width: 0; }
.linha-item .info .n { font-weight: 700; font-size: 14px; }
.linha-item .info .s { font-size: 12px; color: #5a4630; }
.linha-item .preco { font-weight: 800; color: #8a5a12; white-space: nowrap; }

.atributos { display: grid; grid-template-columns: 1fr; gap: 6px; }
.atributo { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 250, 235, 0.6); border: 2px solid #d4b882; }
.atributo .n { font-weight: 700; }
.atributo .d { font-size: 11px; color: #5a4630; }
.atributo .v { font: 800 18px var(--fonte); min-width: 48px; text-align: right; }
.atributo .v small { color: #2e8a2e; font-size: 13px; }
.atributo button { width: 36px; height: 36px; border-radius: 8px; border: 2px solid #8a6a3a; background: #f6d27a; font: 900 18px var(--fonte); cursor: pointer; color: #2b1d14; }
.atributo button:disabled { opacity: 0.35; }

.classes-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cartao-classe { border: 2px solid #b08a52; border-radius: 12px; padding: 10px; background: rgba(255, 250, 235, 0.7); display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.cartao-classe[aria-pressed="true"] { border-color: #c86a1a; box-shadow: 0 0 0 3px rgba(232, 144, 42, 0.45); }
.cartao-classe:disabled { opacity: 0.5; cursor: not-allowed; }
.cartao-classe .n { font: 700 17px var(--fonte-titulo); }
.cartao-classe .s { font-size: 12px; color: #4a3a28; }
.cartao-classe .stats { font-size: 11px; color: #5a4630; }

.overlay-morte { position: absolute; inset: 0; background: radial-gradient(circle, rgba(60, 0, 0, 0.35), rgba(10, 0, 0, 0.85)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 16px; }
.overlay-morte h2 { font-family: var(--fonte-titulo); font-size: clamp(28px, 6vw, 56px); color: #ffb0a0; margin: 0; text-shadow: 0 3px 10px #000; }
.overlay-morte p { margin: 0; max-width: 520px; color: #f0d8d0; }

.passagem { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.passagem .l1 { font-family: var(--fonte-titulo); font-size: clamp(26px, 5vw, 52px); color: #ffe9c0; text-shadow: 0 0 20px rgba(255, 190, 90, 0.4); }
.passagem .l2 { font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(15px, 2.4vw, 22px); color: #d8c8a8; }

.ajuda-controles { font-size: 13px; line-height: 1.6; }
.ajuda-controles kbd { background: #3a2a1e; color: #ffe08a; border-radius: 5px; padding: 1px 6px; font: 700 12px var(--fonte); }

@media (max-width: 720px), (max-height: 520px) {
  .status { min-width: 0; padding: 4px 8px 4px 4px; gap: 6px; }
  .retrato { width: 40px; height: 40px; }
  .barras { min-width: 120px; }
  .barra { height: 11px; }
  .barra .texto { font-size: 8.5px; line-height: 11px; }
  .icone-botao { width: 40px; height: 40px; }
  .icone-botao svg { width: 24px; height: 24px; }
  .inventario-layout { grid-template-columns: 1fr; }
  .painel-topo h2 { font-size: 18px; }
  .dialogo { padding: 10px 12px; gap: 10px; }
  .dialogo .rosto { width: 54px; height: 54px; }
  .dialogo .fala { font-size: 14px; }
  .criacao .previa { flex-basis: 110px; height: 140px; }
  .nome-mapa { top: calc(58px + var(--seguro-topo)); }
}
@media (max-height: 460px) {
  .criacao { gap: 8px; padding: 12px 14px; }
  .titulo-menu { gap: 6px; }
  .titulo-menu .botao { min-height: 40px; padding: 6px 14px; }
}

/* Celular em pé: aviso discreto para deitar */
#girar { display: none; position: fixed; left: 50%; top: calc(112px + var(--seguro-topo)); transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: rgba(20, 12, 18, 0.8); color: #f4e6c8; font-size: 11px; pointer-events: none; z-index: 5; }
@media (orientation: portrait) and (pointer: coarse) { #girar { display: block; } }
@media (orientation: portrait) and (max-width: 520px) {
  .botoes-toque { transform: scale(0.85); transform-origin: right bottom; }
  .status { max-width: calc(100vw - 150px); }
  .barras { min-width: 0; }
}

/* Descanso: véu escuro (acampamento e cama) e barra do acampamento */
.veu-descanso { position: absolute; inset: 0; background: #050302; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }
.descanso {
  position: absolute; left: 50%; bottom: calc(150px + var(--seguro-baixo)); transform: translateX(-50%); width: 260px; pointer-events: none;
  text-align: center; font: 700 15px var(--fonte); color: #ffe2b8; text-shadow: 0 1px 3px #000;
}
.descanso .barra { height: 9px; margin-top: 5px; border-radius: 5px; background: rgba(20, 10, 6, 0.85); border: 1px solid #6a4a2a; overflow: hidden; }
.descanso .cheio { height: 100%; width: 0; background: linear-gradient(90deg, #ff9e48, #ffd27a); }

/* painel da direita e barra de teclas, como no jogo anterior (texto claro com contorno escuro) */
.hud-direita { position: absolute; top: 64px; right: 14px; text-align: right; pointer-events: none;
  font: 600 15px/1.35 system-ui, "Segoe UI", sans-serif; color: #fff6e2;
  text-shadow: 0 0 3px #1c0f08, 0 1px 2px #1c0f08, 1px 0 2px #1c0f08, -1px 0 2px #1c0f08; }
.hud-hora { font-size: 14px; opacity: 0.95; }
.hud-objetivo { font-size: 16px; margin-top: 2px; max-width: 34vw; }
.faixa-controles { position: absolute; left: 12px; bottom: 6px; pointer-events: none; display: flex; flex-wrap: wrap;
  justify-content: flex-start; gap: 2px 12px; max-width: 30vw; font: 600 13px/1.4 system-ui, "Segoe UI", sans-serif;
  color: #fff3dc; text-shadow: 0 0 3px #1c0f08, 0 1px 2px #1c0f08, 1px 0 2px #1c0f08, -1px 0 2px #1c0f08; }
.faixa-controles b { color: #ffd77a; font-weight: 800; }
@media (max-width: 900px) { .hud-objetivo { font-size: 13px; max-width: 50vw; } }
@media (max-width: 1400px) { .faixa-controles { bottom: 68px; } }

/* minimapa redondo (estilo GTA) no canto de cima à direita, logo abaixo dos botões do menu */
.minimapa { position: absolute; right: 14px; top: 64px; width: 176px; height: 176px; border-radius: 50%;
  border: 4px solid #c9a24a; outline: 2px solid #4a3216; outline-offset: -1px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.6), 0 0 0 2px #e8cf86 inset; cursor: pointer; background: #140e0a; pointer-events: auto; }
.minimapa canvas { width: 176px; height: 176px; display: block; border-radius: 50%; }
.minimapa:hover { border-color: #ffd76e; }
.minimapa-nome { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap;
  font: 700 11px/1 system-ui, sans-serif; color: #fff3dc; background: #3a2412; border: 1px solid #c9a24a;
  border-radius: 8px; padding: 3px 8px; pointer-events: none; }
.hud-direita { top: 262px !important; }
@media (pointer: coarse) { .minimapa { top: 58px; width: 118px; height: 118px; } .minimapa canvas { width: 118px; height: 118px; }
  .hud-direita { top: 196px !important; } }
.mapa-grande { position: fixed; inset: 0; z-index: 50; background: rgba(8,5,3,0.72); display: flex; align-items: center; justify-content: center; }
.mapa-grande-quadro { width: min(92vw, 1200px); height: min(88vh, 860px); display: flex; flex-direction: column;
  background: #2a1c10; border: 4px solid #c9a24a; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); overflow: hidden; }
.mapa-grande-titulo { font: 700 18px/1.2 Georgia, serif; color: #ffe9b0; padding: 10px 16px; background: #3a2412; border-bottom: 2px solid #c9a24a; }
.mapa-grande-quadro canvas { flex: 1; width: 100%; min-height: 0; cursor: crosshair; display: block; }
.mapa-grande-rodape { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: #3a2412; border-top: 2px solid #c9a24a;
  font: 13px system-ui, sans-serif; color: #f3e6c8; }
.mapa-grande-rodape span { flex: 1; }
.mapa-grande-rodape button { font: 600 13px system-ui, sans-serif; color: #2a1a0a; background: #e8c46a; border: 1px solid #7a5a1a; border-radius: 8px; padding: 6px 12px; cursor: pointer; }