/* Base: paleta, reset, granulado e transição entre telas. */

:root {
  --bg: #1b130d;
  --brown: #5c3a21;
  --brown2: #7a4e2d;
  --tan: #c9a66b;
  --cream: #efe2c4;
  --mustard: #c8961e;
  --amber: #e0b040;
  --green: #2f4a2c;
  --green2: #4f6b3a;
  --blue: #2e5a7a;
  --blue2: #4a7391;
  --rust: #a8522a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--amber); font-family: 'VT323', monospace; overflow: hidden; }
.hidden { display: none !important; }

/* granulado de filme por cima de tudo */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .13;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* cada tela ocupa a viewport inteira e entra com fade (classe .in) */
.screen { position: fixed; inset: 0; display: flex; overflow-y: auto; padding: 16px; opacity: 0; transition: opacity .9s; }
.screen.in { opacity: 1; }