@font-face {
  font-family: CrackedBold;
  src: url('./assets/fonts/crackedbold-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Let the cell's warm light and rusty walls show through the charcoal UI. */
:root { --yellow: #ffd044; }
body {
  background:
    radial-gradient(ellipse 56% 46% at 52% 8%, #ffb44840, transparent 76%),
    radial-gradient(ellipse 40% 50% at 96% 74%, #d4562d40, transparent 75%),
    linear-gradient(105deg, #091713c7 0%, #0e211ba8 49%, #1b1e167a 100%),
    url('./assets/prison-wall.jpg') center/cover fixed;
}
.online-strip {
  background: linear-gradient(105deg, #26382fe8, #20271fea);
  border-color: #82794e;
}
.board-frame {
  background: linear-gradient(135deg, #485447a8, #1b241ff0 44%);
  border-color: #7c8061;
}
.dossier {
  background: linear-gradient(150deg, #26372eea, #18211cee 70%);
  border-color: #82794e;
}
.focus-mode {
  background:
    radial-gradient(ellipse at 50% 0%, #7e551c38, transparent 60%),
    #111a16;
}

/* Two quiet, fixed layers keep the movement behind the playable surface. */
body { isolation: isolate; }
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
body::before {
  inset: -8vh -8vw;
  opacity: .34;
  background-image:
    radial-gradient(circle at 7% 13%, #f4d58e 0 1px, transparent 2px),
    radial-gradient(circle at 19% 73%, #d5cdb0 0 1px, transparent 2px),
    radial-gradient(circle at 27% 39%, #e8d7a3 0 .7px, transparent 1.8px),
    radial-gradient(circle at 38% 9%, #e4c977 0 1px, transparent 2px),
    radial-gradient(circle at 46% 85%, #ddd7bd 0 .8px, transparent 1.8px),
    radial-gradient(circle at 55% 52%, #efda9d 0 1px, transparent 2px),
    radial-gradient(circle at 64% 18%, #e0d6ae 0 .7px, transparent 1.8px),
    radial-gradient(circle at 72% 78%, #eecb7c 0 1px, transparent 2px),
    radial-gradient(circle at 83% 32%, #dfd4ac 0 .7px, transparent 1.8px),
    radial-gradient(circle at 94% 62%, #e8d499 0 1px, transparent 2px);
  animation: dust-drift 38s ease-in-out infinite alternate;
}
body::after {
  inset: 0;
  opacity: .54;
  background:
    radial-gradient(ellipse 55% 34% at 14% 8%, #ffc05b55, transparent 72%),
    radial-gradient(ellipse 45% 42% at 95% 75%, #e17c3a38, transparent 72%);
  animation: ambient-light 29s ease-in-out infinite alternate;
}
.page-shell,
.info-shell { position: relative; z-index: 1; }
.focus-mode::before,
.focus-mode::after { opacity: .15; }

@keyframes dust-drift {
  from { transform: translate3d(-1.2%, 1%, 0); }
  to { transform: translate3d(1.2%, -1%, 0); }
}
@keyframes ambient-light {
  from { opacity: .24; transform: translate3d(-1%, 0, 0); }
  to { opacity: .46; transform: translate3d(1%, 0, 0); }
}

/* Reserve the distressed face for display text; controls and body copy stay clear. */
.brand > span:last-child,
.heading-row h1,
.mission h2,
dialog h2,
.info-content h1,
.about-identity strong {
  font-family: CrackedBold, Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: .025em;
}
.brand > span:last-child { letter-spacing: .015em; }
.heading-row h1 { line-height: 1.12; }
.mission h2 { line-height: 1.2; }
.win-dialog h2 { font-family: CrackedBold, Impact, 'Arial Narrow', sans-serif; font-size: clamp(44px, 11vw, 70px); }
.info-content h1 { font-family: CrackedBold, Impact, 'Arial Narrow', sans-serif; }

@media (max-width: 760px) {
  .heading-row h1 { font-size: clamp(23px, 5.8vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; opacity: .18; }
}