/* Palette, type, textures, and the desk-lamp light. No orange, yellow, or green anywhere. */
:root {
  --night: #13111c;
  --night-deep: #0a0910;
  --night-glow: #2a2236;

  --paper: #efe9dd;
  --paper-shade: #ddd6ca;
  --ink: #1f1b26;
  --ink-soft: #4a4452;
  --pencil: rgba(58, 54, 68, 0.62);

  --cork: #5a4651;
  --cork-dark: #3d2f39;
  --frame: #221a25;
  --frame-light: #3a2e3f;

  --red: #b3263a;
  --red-dark: #7d1828;
  --blue: #2f5aa8;
  --purple: #6b3fa0;
  --lamp: rgba(246, 236, 246, 0.2);

  --font-type: "Special Elite", "Courier New", Courier, monospace;
  --font-news: "Playfair Display", Georgia, serif;
  --font-story: "Libre Baskerville", Georgia, serif;
  --font-hand: "Reenie Beanie", "Bradley Hand", "Segoe Print", cursive;

  /* Grain for paper and cork: SVG noise, no image files. */
  --noise: 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='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.12  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Newsprint: fine, heavy grain plus a slow mottle, so the clipping reads as cheap grey paper. */
  --news-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.11  0 0 0 0 0.13  0 0 0 0.75 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --news-mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.19  0 0 0 0 0.21  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");

  --scale: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: radial-gradient(ellipse at 50% 35%, var(--night-glow) 0%, var(--night) 55%, var(--night-deep) 100%);
  background-color: var(--night);
  color: var(--paper);
  font-family: var(--font-story);
}

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--purple); color: var(--paper); }

#app { position: fixed; inset: 0; }

/* Fixed-size stage, scaled to fit the window. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 1000px;
  transform: translate(-50%, -50%) scale(var(--scale));
}

.paper {
  background-image: var(--noise), linear-gradient(168deg, var(--paper), var(--paper-shade));
  background-color: var(--paper);
  color: var(--ink);
}

/* Only appears if the modules fail to load (opened from a file instead of a server). */
.needs-server {
  position: fixed;
  inset: 40% 10% auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-type);
  font-size: 18px;
  line-height: 1.6;
  opacity: 0;
  animation: appear 0.3s 1.5s forwards;
}
.needs-server code { color: var(--paper); background: var(--purple); padding: 2px 6px; }

@keyframes appear { to { opacity: 1; } }

/* Rotate prompt: only on narrow screens held upright, until dismissed. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  .rotate-hint:not(.dismissed) {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: rgba(10, 9, 16, 0.94);
  }
}
.rotate-card {
  max-width: 320px;
  padding: 28px 24px 24px;
  border-radius: 6px;
  background-image: var(--noise), linear-gradient(168deg, var(--paper), var(--paper-shade));
  color: var(--ink);
  text-align: center;
}
.rotate-icon {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rotate-icon rect:first-child { stroke-dasharray: 4 3; opacity: 0.6; }
.rotate-title {
  margin: 10px 0 8px;
  font-family: var(--font-news);
  font-weight: 900;
  font-size: 24px;
}
.rotate-text { margin: 0 0 18px; font-family: var(--font-type); font-size: 15px; line-height: 1.45; }
.rotate-dismiss {
  padding: 10px 22px;
  border: 2px solid var(--ink-soft);
  border-radius: 3px;
  background: transparent;
  font-family: var(--font-type);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink);
  cursor: pointer;
}