@import url('title.css'); /* tela de título */

/* Fontes livres (SIL OFL) guardadas no projeto: funcionam offline. */
@font-face {
  font-family: 'Pirata One';
  src: url('../../assets/fonts/PirataOne-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  src: url('../../assets/fonts/IMFellEnglish-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  src: url('../../assets/fonts/IMFellEnglish-italic-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  src: url('../../assets/fonts/JetBrainsMono-Bold-latin.woff2') format('woff2');
  font-display: swap;
}

:root {
  --title: 'Pirata One', Georgia, serif;
  --text: 'IM Fell English', Georgia, serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
  --paper: #e8dcc2;
  --ink: #0d0a09;
  --blood: #b3121c;
  --blood-dark: #5c070c;
  --gold: #d8a531;
  --magic: #6b8cff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--paper);
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

#fx, #hurt {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#hurt {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(179, 18, 28, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.25s;
}

.dmg {
  position: absolute;
  left: 0;
  top: 0;
  font: 700 18px Georgia, serif;
  color: var(--paper);
  text-shadow: 0 0 3px #000, 2px 2px 0 #000, -1px -1px 0 #000;
  white-space: nowrap;
  will-change: transform, opacity;
}

.dmg.crit {
  color: #ffd25e;
  font-size: 24px;
}

.hidden { display: none !important; }

#erros {
  position: fixed;
  left: 8px;
  bottom: 8px;
  max-width: 70vw;
  max-height: 40vh;
  overflow: auto;
  margin: 0;
  padding: 8px 10px;
  background: rgba(40, 0, 0, 0.92);
  color: #ffb4b4;
  font: 12px Consolas, monospace;
  white-space: pre-wrap;
  z-index: 99;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  text-shadow: 0 2px 0 #000;
}

.bars {
  position: absolute;
  left: 22px;
  top: 20px;
  display: grid;
  gap: 8px;
  width: min(340px, 40vw);
}

.bar {
  position: relative;
  height: 20px;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 #000;
}

.bar .fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: var(--blood);
}

.bar.rage { height: 12px; }
.bar.rage .fill { background: linear-gradient(90deg, var(--blood-dark), #ff3b2f); }
.bar.rage.full { animation: pulse 0.6s infinite alternate; border-color: #ff5a4a; }

.bar span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 13px Georgia, serif;
  letter-spacing: 0.08em;
}

.bar.rage span { font-size: 9px; }

@keyframes pulse { to { box-shadow: 0 0 16px #ff3b2f, 3px 3px 0 #000; } }

.top-center {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

#wave { font: 700 26px Georgia, serif; letter-spacing: 0.25em; }
#clock { font: 16px Georgia, serif; opacity: 0.85; }

.top-right {
  position: absolute;
  top: 18px;
  right: 22px;
  text-align: right;
  font: 15px Georgia, serif;
  display: grid;
  gap: 4px;
}

#fps { font: 12px Consolas, monospace; opacity: 0.6; }

.screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.85));
}

.screen h1 {
  margin: 0;
  font: 900 clamp(42px, 8vw, 104px) Georgia, serif;
  letter-spacing: 0.12em;
  color: var(--paper);
  text-shadow: 4px 4px 0 #000, 0 0 30px rgba(179, 18, 28, 0.6);
}

.screen h1 span { color: var(--blood); }
.screen .sub { margin: 6px 0 28px; font-style: italic; opacity: 0.8; }
.screen .press { font: 700 20px Georgia, serif; letter-spacing: 0.2em; animation: blink 1.2s infinite; }
.screen .controls { margin-top: 26px; font: 14px Georgia, serif; opacity: 0.7; }

@keyframes blink { 50% { opacity: 0.35; } }

/* Barra de XP (almas) no rodapé */
.xp {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 16px;
  height: 10px;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 #000;
}

.xp .fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: var(--paper);
}

.xp span {
  position: absolute;
  right: 0;
  bottom: 14px;
  font: 700 15px Georgia, serif;
  letter-spacing: 0.15em;
}

/* Títulos com a fonte gótica; textos com a serifada antiga; números em mono. */
.screen h1, #levelup h2, #wave, .card .name, #boss-name, #banner .b-title { font-family: var(--title); font-weight: 400; }
.screen .sub, .card .desc, .card .rar, #banner .b-sub, .screen .controls, .top-right, #clock { font-family: var(--text); }
.bar span, .xp span, .dmg, #fps, .skill .key, .card .lvl { font-family: var(--mono); }
.screen h1 { letter-spacing: 0.06em; }

/* Habilidades ativas: dois quadrados no rodapé com recarga e botão. */
.skills {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
}

.skill {
  position: relative;
  width: 58px;
  height: 58px;
  border: 2px solid var(--paper);
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 0 #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.skill.empty { opacity: 0.35; }
.skill .ico { font-size: 30px; line-height: 1; z-index: 1; }

.skill .cd {
  position: absolute;
  inset: 0;
  background: rgba(179, 18, 28, 0.6);
  transform-origin: bottom center;
  transform: scaleY(0);
}

.skill .key {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 12px;
  z-index: 2;
  text-shadow: 1px 1px 0 #000;
}

/* Barra do chefão no topo, abaixo da onda. */
#boss {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 70vw);
  text-align: center;
}

#boss-name { font-size: 26px; letter-spacing: 0.12em; color: var(--paper); text-shadow: 3px 3px 0 #000; }

.boss-bar {
  position: relative;
  height: 14px;
  margin-top: 2px;
  border: 2px solid var(--paper);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 3px 3px 0 #000;
}

.boss-bar .fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, #5c070c, var(--blood));
}

/* Faixa de anúncio (onda nova, chefão, "NÍVEL 1"). Grande só na abertura, no terço
   de cima (o herói arrancando o espadão e se levantando aparece embaixo dela); com o
   jogo rodando fica compacta no alto (.top: abaixo de ONDA/relógio; .low: abaixo da
   barra do chefão) para não cobrir o herói no combate. A grande SOBE deslizando
   quando o controle é liberado (Banner em ui/hud.js). */
#banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 17%;
  z-index: 5;
  text-align: center;
  pointer-events: none;
  color: var(--paper);
  text-shadow: 4px 4px 0 #000, 0 0 24px rgba(179, 18, 28, 0.7);
  transition: top 0.6s cubic-bezier(.2, .8, .2, 1);
}
#banner .b-title { font-size: clamp(40px, 7vw, 92px); letter-spacing: 0.1em; transition: font-size 0.6s cubic-bezier(.2, .8, .2, 1); }
#banner .b-sub { font-size: clamp(17px, 2vw, 24px); font-style: italic; opacity: 0.95; text-shadow: 2px 2px 0 #000, 0 0 10px #000; transition: font-size 0.6s cubic-bezier(.2, .8, .2, 1); }
#banner.show { animation: banner 2.4s ease-out forwards; }
/* Tarja de nanquim atrás do texto: legível em qualquer fundo. */
#banner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  bottom: -12px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(5, 4, 4, 0.82) 22%, rgba(5, 4, 4, 0.82) 78%, transparent);
  border-top: 2px solid rgba(179, 18, 28, 0.55);
  border-bottom: 2px solid rgba(179, 18, 28, 0.55);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  transition: left 0.6s cubic-bezier(.2, .8, .2, 1), right 0.6s cubic-bezier(.2, .8, .2, 1), top 0.6s, bottom 0.6s;
}
#banner.top { top: 74px; text-shadow: 3px 3px 0 #000, 0 0 16px rgba(179, 18, 28, 0.6); }
#banner.top.low { top: 146px; }
#banner.top .b-title { font-size: clamp(26px, 3vw, 40px); }
#banner.top .b-sub { font-size: clamp(13px, 1.2vw, 16px); }
#banner.top::before { left: calc(50% - min(330px, 46vw)); right: calc(50% - min(330px, 46vw)); top: -6px; bottom: -5px; }
#banner.snap, #banner.snap .b-title, #banner.snap .b-sub, #banner.snap::before { transition: none; }
@media (prefers-reduced-motion: reduce) { #banner, #banner .b-title, #banner .b-sub, #banner::before { transition: none; } }

@keyframes banner {
  0% { opacity: 0; transform: scale(1.25); letter-spacing: 0.4em; }
  12% { opacity: 1; transform: scale(1); letter-spacing: 0.1em; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.98); }
}

/* HUD limpo: pausa no canto, abates em cima do nível, avisos rápidos no centro de baixo. */
#hud #pause-btn {
  pointer-events: auto;
  justify-self: end;
  width: 46px;
  height: 40px;
  font: 700 18px var(--mono);
  color: var(--paper);
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
#hud #pause-btn:hover { background: var(--blood-dark); }
.xp #kills { right: 0; bottom: 36px; font: 15px var(--text); letter-spacing: 0.06em; }
/* O aviso rápido fica fora do HUD: aparece até com a pausa ou as cartas abertas. */
#toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  padding: 6px 14px;
  font: 16px var(--text);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--paper);
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
}
#toast.show { opacity: 1; }
.dmg.info { color: #f2ebdd; font-size: 16px; font-style: italic; }

/* Botões de menu (pausa: modo de ataque). */
.menu-btn {
  font: 18px var(--text);
  padding: 8px 18px;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
.menu-btn:hover { background: var(--blood-dark); }
.skill.special { border-color: #ffd25e; }

/* A fonte antiga desenha algarismos "de texto" (0 parece o): número vai em mono. */
.num { font: 700 0.86em var(--mono); letter-spacing: 0; }

/* Telas (nível, pausa, morte, título) ficam por cima das faixas de anúncio. */
.screen { z-index: 10; }
#gpu-caiu { z-index: 98; background: #000; } /* placa de vídeo reiniciou: cobre tudo, menos #erros */
/* Pausa → Opções: som bloqueado pelo navegador (ui/pauseTabs.js; o resto da pausa fica no pauseTabs.css). */
#pause .o-toggle.o-blocked { color: #ffcfc4; border-style: dashed; border-color: rgba(200, 16, 46, 0.85); }
#pause .o-toggle.o-blocked .o-sw { border-style: dashed; opacity: 0.55; }
#pause .o-toggle.o-blocked b { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }