/* Wolfenstein 3D (web) · casca · Adaptação web: Alequizao <alequizao.dev@gmail.com> */
:root {
  --preto: #000;
  --fundo: #0c0000;
  --vinho: #3a0000;
  --vermelho: #8c0000;
  --vermelho-vivo: #d41c1c;
  --ouro: #fcd400;
  --cinza: #9a9a9a;
  --texto: #e8e0d0;
  --aco: #3d5a80;
  --pixel: 'Press Start 2P', 'Courier New', monospace;
  --topo: 0px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--preto); color: var(--texto); overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--pixel); -webkit-font-smoothing: none; }
button { font-family: var(--pixel); }
a { color: var(--ouro); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- tela inicial ---------- */
#inicio {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; z-index: 30;
  display: flex; flex-direction: column; align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 38%, rgba(140, 0, 0, .55), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #1a0000, var(--fundo) 55%, #000);
}
.inicio-miolo { margin: auto 0; width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 8px 0; }
.titulo {
  margin: 0; font-weight: 400; line-height: 1.15; letter-spacing: 2px;
  font-size: clamp(22px, 6.4vw, 52px); color: var(--vermelho-vivo);
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #5a0000, 0 0 18px rgba(212, 28, 28, .45);
}
.titulo span { display: block; font-size: .5em; color: var(--texto); letter-spacing: 6px; margin-top: 10px; text-shadow: 2px 2px 0 #000; }
.episodio { margin: 0; font-size: clamp(10px, 2.6vw, 15px); line-height: 1.8; color: var(--ouro); text-shadow: 2px 2px 0 #000; }
.episodio small { display: block; color: var(--cinza); font-size: .8em; }
.porta { width: 76px; height: 76px; image-rendering: pixelated; filter: drop-shadow(0 0 14px rgba(212,28,28,.5)); }
#bt-jogar {
  font-size: clamp(22px, 5.5vw, 34px); color: #fff; letter-spacing: 3px; cursor: pointer;
  padding: 22px 46px; min-width: 260px; min-height: 76px;
  background: linear-gradient(180deg, #b40000, #6a0000); border: 4px solid #000;
  box-shadow: 0 0 0 3px var(--vermelho-vivo), 6px 6px 0 3px #000, 0 0 36px rgba(212, 28, 28, .55);
  text-shadow: 3px 3px 0 #000; transition: transform .08s;
}
#bt-jogar:hover, #bt-jogar:focus-visible { background: linear-gradient(180deg, #d41c1c, #800000); outline: none; }
#bt-jogar:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--vermelho-vivo), 2px 2px 0 3px #000; }
.opcao-tela { font-size: 10px; color: var(--cinza); display: flex; align-items: center; gap: 10px; cursor: pointer; }
.opcao-tela input { width: 20px; height: 20px; accent-color: var(--vermelho-vivo); }
.dicas { width: 100%; border: 2px solid var(--vinho); background: rgba(0,0,0,.55); padding: 14px 16px; font-size: 10px; line-height: 2; color: var(--texto); text-align: left; }
.dicas h2 { margin: 0 0 6px; font-size: 11px; color: var(--ouro); font-weight: 400; }
.dicas ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
kbd { font-family: var(--pixel); font-size: 9px; background: #222; border: 1px solid #555; border-bottom-width: 3px; padding: 2px 5px; color: #fff; white-space: nowrap; }
.so-toque { display: none; }
body.toque .so-toque { display: block; }
body.toque .so-pc { display: none; }
.rodape { margin-top: 10px; font-family: system-ui, sans-serif; font-size: 12px; line-height: 1.55; color: #8a7f76; max-width: 760px; text-align: center; }
.rodape a { color: #d9b64a; }

/* ---------- carregando ---------- */
#carga { position: fixed; inset: 0; z-index: 25; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 16px; text-align: center; }
#carga .rotulo { font-size: 14px; color: var(--vermelho-vivo); letter-spacing: 2px; text-shadow: 2px 2px 0 #300; }
.barra { width: min(420px, 86vw); height: 22px; border: 3px solid var(--vermelho); background: #110000; padding: 3px; }
.barra > div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--vermelho-vivo) 0 12px, #a00 12px 16px); transition: width .2s; }
.barra.indeterminada > div { width: 30% !important; animation: vai 1.1s linear infinite; }
@keyframes vai { from { margin-left: -30%; } to { margin-left: 100%; } }
#carga-status { font-size: 9px; color: var(--cinza); min-height: 1em; line-height: 1.6; }
#erro { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; text-align: center; font-size: 11px; line-height: 1.8; }
#erro button { font-size: 12px; padding: 14px 22px; background: var(--vermelho); color: #fff; border: 3px solid #000; box-shadow: 0 0 0 2px var(--vermelho-vivo); cursor: pointer; }

/* ---------- palco (jogo) ---------- */
#palco { position: fixed; inset: 0; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#tela {
  position: absolute; left: var(--tx, 0); top: var(--ty, 0); width: var(--tw, 100vw); height: var(--th, 75vw);
  background: #000;
}
#tela canvas, #canvas {
  display: block; width: 100% !important; height: 100% !important; outline: none;
  image-rendering: pixelated; image-rendering: crisp-edges; background: #000;
}
#bt-tela-cheia {
  position: absolute; right: 10px; top: 10px; z-index: 6; width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45); color: #fff; cursor: pointer; opacity: .35; transition: opacity .2s; display: grid; place-items: center; padding: 0;
}
#bt-tela-cheia:hover { opacity: 1; }
#bt-tela-cheia svg { width: 22px; height: 22px; }
body.toque #bt-tela-cheia { display: none; }

/* ---------- controles de toque ---------- */
#toque { display: none; }
body.toque #toque { display: block; }
.ctl {
  position: absolute; z-index: 5; display: grid; place-items: center; text-align: center;
  min-width: 56px; min-height: 56px; color: #fff; font-family: var(--pixel); font-size: 9px; line-height: 1.3;
  background: rgba(40, 0, 0, .42); border: 2px solid rgba(255, 90, 90, .45); border-radius: 12px;
  text-shadow: 1px 1px 0 #000; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.ctl.ativo { background: rgba(212, 28, 28, .7); border-color: #ffb0b0; }
.ctl.ligado { background: rgba(252, 212, 0, .35); border-color: var(--ouro); color: var(--ouro); }
.ctl b { display: block; font-size: 16px; font-weight: 400; margin-bottom: 3px; }
#barra-topo { position: absolute; z-index: 6; top: max(6px, env(safe-area-inset-top)); left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right)); display: flex; gap: 6px; justify-content: space-between; pointer-events: none; }
#barra-topo .grupo { display: flex; gap: 6px; pointer-events: auto; }
#barra-topo .ctl { position: static; min-width: 56px; height: 44px; min-height: 44px; font-size: 9px; border-radius: 8px; padding: 0 8px; }
#dpad { width: var(--dp, 164px); height: var(--dp, 164px); border-radius: 50%; left: var(--dpx); top: var(--dpy); background: rgba(40,0,0,.28); }
#dpad svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#dpad .seta { fill: rgba(255,255,255,.55); }
#dpad .seta.ativo { fill: #ff4040; }
#dpad .pino { position: absolute; width: 36%; height: 36%; left: 32%; top: 32%; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4); pointer-events: none; transition: transform .05s; }
#botoes { position: absolute; z-index: 5; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); }
#botoes .ctl { position: absolute; }
#b-atirar { width: 48%; aspect-ratio: 1; height: auto; right: 0; bottom: 0; border-radius: 50%; font-size: 10px; }
#b-abrir { width: 40%; aspect-ratio: 1; height: auto; left: 0; bottom: 4%; border-radius: 50%; }
#b-correr, #b-strafe, #b-arma { width: 31%; height: 56px; top: 0; }
#b-correr { left: 0; }
#b-strafe { left: 34.5%; }
#b-arma { right: 0; }
body.deitado .ctl { background-color: rgba(40, 0, 0, .3); }
#gire {
  position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom));
  font-size: 9px; line-height: 1.6; color: var(--ouro); background: rgba(0,0,0,.75); border: 2px solid var(--vinho);
  padding: 8px 12px; white-space: nowrap; pointer-events: none;
}
body:not(.toque) #gire, body.deitado #gire { display: none; }

/* setas não existem na Press Start 2P: tecla com fonte do sistema */
kbd { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 700; }
/* celular deitado / telas baixas: tela inicial compacta, JOGAR visível sem rolar */
@media (max-height: 520px) {
  .inicio-miolo { gap: 10px; }
  .porta { display: none; }
  .titulo { font-size: clamp(20px, 4.2vw, 34px); }
  .titulo span { margin-top: 6px; letter-spacing: 3px; }
  .episodio { font-size: 10px; }
  #bt-jogar { padding: 14px 36px; min-height: 60px; font-size: 24px; }
  .dicas { padding: 10px 12px; }
}

/* celular deitado: coluna lateral (CORRER|LADO, ARMA|ABRIR, ATIRAR grande embaixo) */
#botoes.estreito #b-correr { left: 0; top: 0; width: 48%; height: 56px; }
#botoes.estreito #b-strafe { left: auto; right: 0; top: 0; width: 48%; height: 56px; }
#botoes.estreito #b-arma { left: 0; right: auto; top: 64px; width: 48%; height: 64px; }
#botoes.estreito #b-abrir { left: auto; right: 0; top: 64px; bottom: auto; width: 48%; height: 64px; aspect-ratio: auto; border-radius: 12px; }
#botoes.estreito #b-atirar { right: 0; left: 0; margin: 0 auto; bottom: 0; width: min(100%, calc(var(--bh) - 136px)); }

/* toque: dedo direto no canvas viraria mouse no SDL (atira/gira) — só os controles recebem toques */
body.toque #canvas { pointer-events: none; }
.aviso-saiu { margin: 0; font-size: 13px; color: var(--ouro); border: 2px solid var(--ouro); padding: 10px 14px; background: rgba(0,0,0,.5); }
/* coluna estreita (celular deitado 667–740 px): letras um pouco menores para CORRER/LADO/ARMA/ABRIR caberem */
#botoes.estreito .ctl { font-size: 8px; }
#botoes.estreito #b-atirar { font-size: 9px; }

/* celular em pé (v1.0.3): barra de cima fina, aviso de girar logo abaixo do jogo, botões maiores perto dos polegares */
body.toque:not(.deitado) #barra-topo .ctl { height: 36px; min-height: 36px; min-width: 52px; }
body.toque:not(.deitado) #gire { top: calc(var(--ty) + var(--th) + 5px); bottom: auto; font-size: 8px; padding: 4px 10px; border-width: 1px; background: transparent; border-color: transparent; color: rgba(255, 210, 63, .8); }
body.toque:not(.deitado) #b-correr, body.toque:not(.deitado) #b-strafe, body.toque:not(.deitado) #b-arma { height: 48px; }
body.toque:not(.deitado) #b-atirar { width: 60%; font-size: 11px; }
body.toque:not(.deitado) #b-abrir { width: 36%; bottom: 2%; }

/* campo escondido que abre o teclado do celular (fonte 16px: o iPhone não dá zoom) */
#digitar { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; border: 0; padding: 0; z-index: -1; }
#b-teclado { min-width: 52px; }
#b-teclado.ligado { background: #7a0000; color: #ffd23f; }

/* celular deitado (altura ≤ 500): a barra de cima não pode invadir o jogo — o grupo ESC/ENTER/ABC fica na faixa lateral
   (quebra em 2 linhas quando não cabe) e os botões ficam um pouco mais estreitos */
@media (orientation: landscape) and (max-height: 500px) {
  body.toque #barra-topo .ctl { min-width: 48px; padding: 0 6px; height: 40px; min-height: 40px; }
  body.toque #barra-topo .grupo { flex-wrap: wrap; align-content: flex-start; }
  body.toque #barra-topo .grupo:first-child { max-width: calc(var(--tx) - 12px); }
  body.toque #barra-topo .grupo:last-child { max-width: calc(100vw - var(--tx) - var(--tw) - 12px); justify-content: flex-end; }
}