@font-face { font-family:"Inter"; src:local("Inter"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Fira Code"; src:local("Fira Code"); font-weight:300 700; font-display:swap; }

:root {
  --evergreen: #012622;
  --paper: #ECE5F0;
  --ink: #012622;
  --muted: rgba(1, 38, 34, .62);
  --gold: #E98A15;
  --line: rgba(1, 38, 34, .14);
  --raio: 4px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; min-width: 320px; background: var(--paper); color: var(--ink);
  font-family: Inter, system-ui, sans-serif; font-weight: 430; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.shell {
  min-height: 100dvh;
  padding: calc(16px + var(--safe-t)) 18px calc(28px + var(--safe-b));
  display: flex;
  flex-direction: column;
}

.marca { margin: 0 0 8px; font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.titulo { margin: 0 0 8px; font-size: clamp(32px, 10vw, 52px); font-weight: 650; letter-spacing: -.05em; line-height: .95; }
.texto { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--muted); }

.estado { margin: 0 0 16px; font-size: 14px; line-height: 1.45; }
.estado strong { font-weight: 650; }

.personagem {
  width: min(220px, 56vw);
  aspect-ratio: 3/4;
  margin: 8px auto 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(233, 138, 21, .35), transparent 55%),
    linear-gradient(180deg, #003836, #012622);
}
.personagem::after {
  content: "";
  display: block;
  width: 28%;
  height: 18%;
  margin: 28% auto 0;
  border-radius: 50%;
  background: #ECE5F0;
  box-shadow: 0 42px 0 -4px #ECE5F0, 0 88px 0 18px rgba(236, 229, 240, .2);
}

.acoes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.botao {
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: var(--evergreen);
  color: var(--paper);
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.botao--vazado { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.campo span { font-family: "Fira Code", ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.campo input {
  min-height: 48px; padding: 0 12px; border: 1px solid var(--line); background: #F7F4F9; font-size: 16px;
}

.erro { margin: 0 0 12px; color: #8a1f3a; font-size: 13.5px; }
.nota { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

#cena {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #12080e;
}
#hud {
  position: fixed; left: 16px; right: 16px; top: calc(12px + var(--safe-t));
  color: #ECE5F0; pointer-events: none;
  font-family: "Fira Code", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
#hud strong { display: block; font-size: 18px; letter-spacing: -.03em; text-transform: none; font-family: Inter, sans-serif; margin-top: 4px; }
#hudQuota, #hudTempo, #hudEmocao, #hudObjeto { margin: 4px 0 0; }
#hudMomento { margin-top: 10px; text-transform: none; letter-spacing: 0; font-family: Inter, sans-serif; font-size: 14px; max-width: 18em; opacity: .85; }
#sairMundo {
  position: fixed; left: 16px; width: auto; right: auto; bottom: calc(16px + var(--safe-b));
  pointer-events: auto; min-width: 96px;
}
#dicaPc {
  position: fixed; right: 16px; bottom: calc(16px + var(--safe-b));
  margin: 0; color: rgba(236,229,240,.45); font-size: 11px; pointer-events: none;
  font-family: "Fira Code", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase;
}
#toque { position: fixed; inset: 0; pointer-events: none; }
#lookPad {
  position: absolute; right: 0; top: 0; width: 58%; height: 70%;
  pointer-events: auto;
}
#joyBase {
  position: absolute; left: 18px; bottom: calc(28px + var(--safe-b));
  width: 128px; height: 128px; border-radius: 50%;
  border: 1px solid rgba(236,229,240,.35); background: rgba(1,38,34,.28);
  pointer-events: auto;
}
#joyKnob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(236,229,240,.85);
}
#btnInteragir {
  position: absolute; right: 18px; bottom: calc(36px + var(--safe-b));
  width: 92px; height: 92px; border-radius: 50%; border: 0;
  background: #E98A15; color: #012622; pointer-events: auto;
  font-family: "Fira Code", ui-monospace, monospace; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.lista { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; min-height: 8px; }
.momentos { margin: 0 0 18px; padding-left: 18px; color: var(--muted); }
.momentos li { margin: 0 0 6px; }

#caixaPartida.overlay {
  position: fixed; inset: auto 12px 12px 12px; max-height: 70dvh; overflow: auto;
  z-index: 8; background: rgba(236,229,240,.96); padding: 16px;
  min-height: 0;
}
#hudTerminal {
  position: fixed; left: 16px; right: 16px; top: calc(12px + var(--safe-t));
  color: #ECE5F0; pointer-events: none;
  font-family: "Fira Code", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
#hudInteracao { margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-family: Inter, sans-serif; font-size: 14px; }
#navTerm, #vozBar {
  position: fixed; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap;
}
#navTerm {
  top: calc(88px + var(--safe-t)); left: 16px; right: 16px;
}
#vozBar { top: calc(128px + var(--safe-t)); left: 16px; }
#qualidadeBar { position: fixed; z-index: 4; top: calc(168px + var(--safe-t)); left: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
#qualidadeBar button, #navTerm button, #vozBar button, .tags button, .post__acoes button, .ponte, #cardJogador button, aside button {
  min-height: 44px; padding: 0 10px; border: 1px solid rgba(236,229,240,.35);
  background: rgba(1,38,34,.55); color: #ECE5F0;
  font-family: "Fira Code", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
#chatForm {
  position: fixed; left: 16px; right: 16px; bottom: calc(72px + var(--safe-b));
  z-index: 4; max-width: 420px;
}
#chatLog {
  max-height: 88px; overflow: auto; margin: 0 0 6px;
  font-size: 13px; color: #ECE5F0; text-shadow: 0 1px 4px #000;
}
#chatInput {
  width: 100%; min-height: 44px; border: 1px solid rgba(236,229,240,.3);
  background: rgba(1,38,34,.7); color: #ECE5F0; padding: 0 12px; font-size: 16px;
}
aside {
  position: fixed; z-index: 6; top: calc(12px + var(--safe-t)); right: 12px;
  width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  overflow: auto; padding: 16px; background: #ECE5F0; color: #012622;
}
aside h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.04em; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tags button { background: #012622; }
#comCorpo { width: 100%; min-height: 72px; margin: 0 0 8px; font: inherit; padding: 8px; }
.post { border-top: 1px solid var(--line); padding: 12px 0; }
.post__meta, .post__status, .post__origem { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-family: "Fira Code", ui-monospace, monospace; color: var(--gold); }
.post__acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.post__comentario { margin-top: 8px; }
.post__clip { width: 100%; height: auto; margin-top: 8px; }
.sr { display: block; }
.sr span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#caixaCena.is-hotel #hudTerminal, #caixaCena.is-hotel #navTerm, #caixaCena.is-hotel #vozBar, #caixaCena.is-hotel #chatForm, #caixaCena.is-hotel #qualidadeBar { display: none; }
#caixaCena:not(.is-hotel) #hud { display: none; }

@media (pointer: coarse) {
  #chatForm { bottom: calc(168px + var(--safe-b)); }
  #navTerm { top: auto; bottom: calc(292px + var(--safe-b)); }
}

@media (pointer: fine) {
  #toque { display: none !important; }
}
@media (pointer: coarse) {
  #dicaPc { display: none; }
  #sairMundo { bottom: calc(170px + var(--safe-b)); }
  #formEntrar, #botaoGoogle { display: none !important; }
  #caixaEntrar .nota { display: none; }
}

[hidden] { display: none !important; }