/* ---------------------------------------------------
   Jogo: identidade própria, separada do desktop.
   Escuro de casa às escuras, âmbar de lanterna, tipografia condensada do sistema (sem fontes externas).
--------------------------------------------------- */
:root {
  --bg: #06080b;
  --panel: rgba(12, 14, 18, .92);
  --panel-line: rgba(236, 229, 211, .14);
  --bone: #ece5d3;
  --bone-soft: #a9a293;
  --amber: #ffb547;
  --amber-ink: #1a1206;
  --danger: #ff8a3d;
  --hurt: #c8443a; /* só para vida baixa e dano */
  --good: #bfe3a4;
  --vuln: #ffd23f;
  --cyan: #5be3f0;
  --font: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
  --radius: 10px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.game {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.game__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.game__canvas:focus { outline: none; }
.game:not([data-screen="playing"]) .game__canvas { cursor: default; }
.noscript { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---------- Ecrãs (menus) ---------- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: max(1rem, var(--safe-t)) max(1rem, var(--safe-r)) max(1rem, var(--safe-b)) max(1rem, var(--safe-l));
  overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 40%, rgba(6, 8, 11, .35), rgba(6, 8, 11, .88));
}
.screen[hidden] { display: none; }
.screen--menu { background: radial-gradient(80% 70% at 30% 45%, rgba(6, 8, 11, .15), rgba(6, 8, 11, .92) 75%); justify-items: start; }
.panel {
  width: min(26rem, 100%);
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.panel--menu { background: transparent; border: 0; box-shadow: none; padding: 1rem 1rem 1rem clamp(0rem, 6vw, 5rem); width: min(30rem, 100%); }
.panel--wide { width: min(58rem, 100%); }
.eyebrow {
  margin: 0 0 .4rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.title {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 5rem);
  line-height: .92;
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 0 40px rgba(255, 181, 71, .18);
}
.title--end { font-size: clamp(2rem, 6vw, 3.2rem); }
.h2 { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.lead { margin: .8rem 0 1.4rem; color: var(--bone-soft); font-size: 1.05rem; max-width: 30ch; }
.fine { margin: 1.2rem 0 0; font-size: .8rem; color: var(--bone-soft); }
.stack { display: grid; gap: .5rem; }
.row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem; /* alvo tátil confortável (Fitts) */
  padding: .55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--panel-line);
  background: rgba(236, 229, 211, .06);
  color: var(--bone);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: rgba(236, 229, 211, .12); border-color: rgba(236, 229, 211, .3); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--amber); color: var(--amber-ink); border-color: transparent; }
.btn--primary:hover { background: #ffc66e; }
.btn--ghost { background: transparent; }
.only-embedded { display: none; }
.is-embedded .only-embedded { display: inline-flex; }
kbd, .k {
  display: inline-block;
  padding: .05rem .35rem;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: .72em;
  line-height: 1.4;
  opacity: .85;
}

/* Personagens */
.chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .6rem; }
.char {
  --char: #888;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .5rem;
  padding: .8rem;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--panel-line);
  background: rgba(236, 229, 211, .04);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.char:hover { background: rgba(236, 229, 211, .08); }
.char[aria-checked="true"] {
  border-color: var(--char);
  background: color-mix(in srgb, var(--char) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--char);
}
.char__portrait {
  width: 100%;
  height: 6rem;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 55%, rgba(255, 181, 71, .16), transparent 65%), #0c0e12;
}
.char__body { display: grid; gap: .3rem; align-content: start; }
.char__name { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; }
.char__tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--char); filter: brightness(1.25); }
.char__desc { font-size: .85rem; color: var(--bone-soft); line-height: 1.35; }
.char__kit { font-size: .8rem; color: var(--bone); }
.char__kit b { font-weight: 600; }
.char__stats { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .7rem; color: var(--bone-soft); text-transform: uppercase; letter-spacing: .08em; }
.char__stats li { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; }
.char__meter { height: 4px; border-radius: 2px; background: rgba(236, 229, 211, .12); position: relative; overflow: hidden; }
.char__meter::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); background: var(--bone); }

/* Instruções */
.steps { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--bone-soft); line-height: 1.4; }
.steps b { color: var(--bone); }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.controls h3 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.controls dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .88rem; }
.controls dt { color: var(--bone); white-space: nowrap; }
.controls dd { margin: 0; color: var(--bone-soft); }
[data-mode="touch"] .controls__col--desk { opacity: .55; }
[data-mode="mouse"] .controls__col--touch { opacity: .55; }

/* Pausa */
.volume { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; padding: .4rem .2rem; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }
.volume input { accent-color: var(--amber); width: 100%; min-height: 2rem; }

/* Fim */
.summary { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 0 0 1.2rem; font-size: .92rem; }
.summary dt { color: var(--bone-soft); }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.screen--end.is-won .title { color: var(--amber); }

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  padding: max(.75rem, var(--safe-t)) max(.9rem, var(--safe-r)) max(.75rem, var(--safe-b)) max(.9rem, var(--safe-l));
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.hud[hidden] { display: none; }
.game:not([data-screen="playing"]) .hud { opacity: .35; }
.hud button { pointer-events: auto; }
.hud__tl { position: absolute; top: max(.75rem, var(--safe-t)); left: max(.9rem, var(--safe-l)); display: grid; gap: .4rem; }
.hud__tc { position: absolute; top: max(.6rem, var(--safe-t)); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: .25rem; text-align: center; }
.hud__tr { position: absolute; top: max(.75rem, var(--safe-t)); right: max(.9rem, var(--safe-r)); }

.vital { display: grid; grid-template-columns: auto 9rem auto; align-items: center; gap: .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.vital__num { font-size: 1rem; font-weight: 700; min-width: 2ch; }
.bar { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(236, 229, 211, .16); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--bone); transition: width .2s; }
.vital.is-low .bar__fill { background: var(--hurt); }
.vital.is-low .vital__num { color: #ff9d92; }
.chips { display: flex; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; border-radius: 6px;
  background: rgba(6, 8, 11, .6); border: 1px solid var(--panel-line);
  font-size: .85rem;
}
.chip svg { width: 12px; height: 12px; fill: var(--bone-soft); }
.chip b { font-weight: 700; }

.round { margin: 0; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-soft); }
.phase { margin: 0; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.phase.is-warn { color: var(--amber); }
.phase.is-attack { color: var(--danger); }
.btn--start { min-height: 2.4rem; padding: .35rem .9rem; font-size: .8rem; background: rgba(255, 181, 71, .14); border-color: rgba(255, 181, 71, .5); color: var(--amber); }
.btn--start:hover { background: rgba(255, 181, 71, .25); }
.btn--start[hidden] { display: none; }

.iconbtn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 8px;
  border: 1px solid var(--panel-line);
  background: rgba(6, 8, 11, .6);
  cursor: pointer;
}
.iconbtn svg { width: 14px; height: 14px; fill: var(--bone); }

.weapons {
  position: absolute;
  left: max(.9rem, var(--safe-l));
  bottom: max(.75rem, var(--safe-b));
  display: flex;
  gap: .5rem;
}
.weapon {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "key key" "name ammo" "bar bar";
  gap: .1rem .8rem;
  min-width: 10.5rem;
  padding: .45rem .6rem .5rem;
  border-radius: 8px;
  background: rgba(6, 8, 11, .62);
  border: 1px solid var(--panel-line);
}
.weapon__key { grid-area: key; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-soft); }
.weapon__name { grid-area: name; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; align-self: end; }
.weapon__ammo { grid-area: ammo; text-align: right; font-size: .78rem; color: var(--bone-soft); }
.weapon__ammo b { font-size: 1.15rem; color: var(--bone); }
.weapon__bar { grid-area: bar; height: 3px; border-radius: 2px; background: rgba(236, 229, 211, .12); overflow: hidden; margin-top: .2rem; }
.weapon__bar span { display: block; height: 100%; width: 100%; background: var(--bone); }
.weapon.is-reloading .weapon__bar span { background: var(--amber); }
.weapon.is-reloading .weapon__ammo span { color: var(--amber); }
.weapon.is-low .weapon__ammo b { color: var(--amber); }
.weapon.is-empty { border-color: rgba(255, 138, 61, .55); }
.weapon.is-empty .weapon__ammo span { color: var(--danger); font-weight: 700; }

.bossbar { position: absolute; left: 50%; bottom: max(1rem, var(--safe-b)); transform: translateX(-50%); width: min(32rem, 50vw); }
.bossbar__inner[hidden] { display: none; }
.bossbar__name { margin: 0 0 .3rem; text-align: center; font-size: .85rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.bossbar__name span { color: var(--bone-soft); font-weight: 400; margin-left: .4rem; letter-spacing: .1em; }
.bar--boss { height: 10px; }
.bar--boss .bar__fill { background: #c7b98f; }
.bossbar.phase-1 .bar__fill { background: #d9a441; }
.bossbar.phase-2 .bar__fill { background: var(--danger); }
.bossbar.is-vuln .bar__fill { background: var(--vuln); }
.bossbar.is-vuln .bossbar__name span { color: var(--vuln); }

.banner {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -8px);
  text-align: center;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  width: min(36rem, 90vw);
}
.banner.is-on { opacity: 1; transform: translate(-50%, 0); }
.banner__title { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.banner.is-attack .banner__title { color: var(--danger); }
.banner.is-good .banner__title { color: var(--good); }
.banner__sub { margin: .4rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; font-size: .9rem; color: var(--bone-soft); }
.banner__chip { padding: .1rem .5rem; border-radius: 5px; background: rgba(6, 8, 11, .7); border: 1px solid var(--panel-line); color: var(--bone); }
.banner__chip:first-child:not(:only-child) { background: none; border: 0; color: var(--bone-soft); }

.toasts { position: absolute; top: 6.2rem; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: .3rem; }
.toast {
  margin: 0;
  padding: .3rem .7rem;
  border-radius: 6px;
  background: rgba(6, 8, 11, .8);
  border: 1px solid var(--panel-line);
  font-size: .85rem;
  animation: toast-in .2s ease-out;
  transition: opacity .4s;
}
.toast.is-out { opacity: 0; }
.toast.danger { border-color: rgba(255, 138, 61, .7); color: #ffc29a; }
.toast.good { border-color: rgba(191, 227, 164, .5); color: var(--good); }
.toast.warn { border-color: rgba(255, 181, 71, .6); color: var(--amber); }
.toast.vuln { border-color: rgba(255, 210, 63, .7); color: var(--vuln); font-weight: 700; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Controlos táteis ---------- */
.touch { position: absolute; inset: 0; z-index: 12; pointer-events: none; display: none; }
.game[data-mode="touch"][data-screen="playing"] .touch { display: block; }
.stick {
  --ox: 0px; --oy: 0px; --kx: 0px; --ky: 0px;
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  transition: opacity .12s;
}
.stick.is-on { opacity: 1; }
.stick__base, .stick__knob { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.stick__base { left: var(--ox); top: var(--oy); width: 112px; height: 112px; border: 2px solid rgba(236, 229, 211, .3); background: rgba(6, 8, 11, .25); }
.stick__knob { left: calc(var(--ox) + var(--kx)); top: calc(var(--oy) + var(--ky)); width: 48px; height: 48px; background: rgba(236, 229, 211, .45); }
.stick--aim .stick__knob { background: rgba(255, 181, 71, .55); }
.touch__hint {
  position: absolute;
  bottom: calc(max(.75rem, var(--safe-b)) + 5.5rem);
  margin: 0;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(236, 229, 211, .35);
}
.touch__hint--l { left: max(2rem, calc(var(--safe-l) + 1rem)); }
.touch__hint--r { right: calc(max(1rem, var(--safe-r)) + 10rem); }
.touch__btns {
  position: absolute;
  right: max(.75rem, var(--safe-r));
  bottom: max(.75rem, var(--safe-b));
  display: grid;
  grid-template-columns: repeat(2, 4rem);
  gap: .5rem;
  pointer-events: auto;
}
.tbtn {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  border: 2px solid rgba(236, 229, 211, .35);
  background: rgba(6, 8, 11, .55);
  color: var(--bone);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.tbtn.is-down { background: rgba(236, 229, 211, .28); }
.tbtn--alt { border-color: rgba(255, 181, 71, .6); color: var(--amber); }
.tbtn--use.is-ready { border-color: var(--amber); background: rgba(255, 181, 71, .25); color: #fff; }
.tbtn--use.is-blocked { border-color: rgba(236, 229, 211, .2); color: var(--bone-soft); }
.tbtn--heal { border-color: rgba(159, 224, 176, .5); }
/* No modo tátil o painel das armas sobe para não ficar debaixo do polegar */
.game[data-mode="touch"] .weapons { top: calc(max(.75rem, var(--safe-t)) + 4.2rem); bottom: auto; flex-direction: column; gap: .3rem; }
.game[data-mode="touch"] .weapon { min-width: 8.5rem; padding: .3rem .5rem; }
.game[data-mode="touch"] .kbd-desk { display: none; }
.game[data-mode="touch"] .bossbar { bottom: auto; top: calc(max(.6rem, var(--safe-t)) + 5.2rem); }

/* ---------- Orientação ---------- */
.rotate {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background: var(--bg);
}
.rotate svg { width: 4rem; height: 4rem; fill: none; stroke: var(--amber); stroke-width: 2; }
.rotate p { margin: 0; max-width: 18rem; font-size: 1.1rem; }
.is-portrait .rotate { display: grid; }

/* ---------- Ecrãs pequenos (telemóvel na horizontal) ---------- */
@media (max-height: 460px) {
  .panel { padding: 1rem; }
  .title { font-size: 2.6rem; }
  .lead { margin: .4rem 0 .8rem; }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack .btn--primary { grid-column: 1 / -1; }
  .char__portrait { height: 4rem; }
  .char__desc { display: none; }
  .chars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vital { grid-template-columns: auto 6rem auto; }
  .phase { font-size: .95rem; }
  .banner { top: 18%; }
  .toasts { top: 4.8rem; }
  .steps { font-size: .85rem; }
}
@media (max-width: 640px) {
  .chars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vital { grid-template-columns: auto 5.5rem auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}