/* Layout: app de celular em tela cheia; cenário sombrio atrás de tudo, painéis e navegação em vidro escuro por cima. Visual único, escuro e sangrento, por escolha. */
:root {
  --ink: #f2e9ee;
  --ink2: #a596b4;
  --white: #ffffff;
  --soft: #120d18;
  --line: #3b2c48;
  --surf: #1d1526;
  --surf2: #2b2036;
  --accent: #e0243a;
  --accent-d: #8e0f20;
  --pink: #ff2e6d;
  --blue: #9b5cff;
  --green: #2fbf71;
  --gold: #f5b400;
  --red: #ff2a44;
  --sky1: #1a0b1f;
  --sky2: #4a0e1e;
  --grass: #3a2e45;
  --grass2: #241b2d;
  --paper: #d8cdb0;
  --paper-ink: #3a3344;
  --paper-rule: #8c8468;
  --paper-stamp: #b3202f;
  --ui-radius-tag: 8px;
  --ui-radius-control: 14px;
  --ui-radius-card: 18px;
  --ui-radius-panel: 26px;
  --ui-border: 2px;
  --ui-drop: 4px;
  --ui-edge: #0b0910;
  --place-surface: var(--soft);
  --place-panel: var(--surf);
  --place-panel-ink: var(--ink);
  --place-panel-ink2: var(--ink2);
  --place-line: var(--line);
  --place-line-shade: var(--ui-edge);
  --place-mark: #f2e9ee;
  --place-mark-shade: #a596b4;
  --place-mark-ink: #231b33;
  --f-typewriter: "Courier New", Courier, ui-monospace, Menlo, Consolas, monospace;
  --f-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-horror: "Creepster", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --hud-top: calc(66px + env(safe-area-inset-top, 0px));
  --layer-scenery: 2;
  --layer-screen: 4;
  --layer-stage: 10;
  --layer-effects: 14;
  --layer-hint: 18;
  --layer-hud: 22;
  --layer-menu: 26;
  --layer-nav: 30;
  --layer-sacrifice: 40;
  --layer-game: 50;
  --layer-sheet: 55;
  --layer-scene: 60;
  --layer-flash: 70;
  --layer-cutscene: 80;
  --layer-particles: 90;
  --layer-toast: 100;
  --layer-no-script-notice: 110;
  --layer-rotate-notice: 120;
  color-scheme: dark;
}
[hidden] {
  display: none !important;
}
/* comportamento de app no celular: a página nunca rola nem dá zoom (só os painéis internos rolam), sem seleção de texto nem menu de toque longo */
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  margin: 0;
  background: #050308;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
* {
  touch-action: manipulation;
}
svg,
img {
  -webkit-user-drag: none;
}
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
html.fitw input,
html.fitw textarea {
  font-size: var(--fs-in, 16px) !important;
}
* {
  box-sizing: border-box;
}
button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
/* --vvh: altura visível com o teclado aberto (definida no script); fora isso, a tela toda */
.shell {
  height: var(--vvh, 100%);
  display: flex;
  justify-content: center;
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}
.rot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--layer-rotate-notice);
  background: #050308;
  color: var(--ink);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  font-weight: 800;
}
.rot svg {
  width: 56px;
  height: 56px;
  color: var(--accent);
}
.rot b {
  font-family: var(--f-display);
  font-size: 22px;
}
.rot span {
  color: var(--ink2);
  font-size: 14px;
}
@media (orientation: landscape) and (max-height: 480px) and (min-width: 560px) {
  .rot {
    display: flex;
  }
}
.app {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100%;
  overflow: hidden;
  background: var(--sky1);
}
@media (min-width: 480px) {
  .shell {
    padding-block: 14px;
  }
  .app {
    border-radius: 34px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  }
}
.glass {
  background: var(--surf);
  border: var(--ui-border) solid var(--line);
  box-shadow: 0 var(--ui-drop) 0 var(--ui-edge);
}
.card.glass {
  box-shadow: none;
}