:root {
  --black: #000;
  --gold: 197, 178, 112;
  --screen-ratio: 1.5;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--black);
}

body {
  overflow: hidden;
  color: rgb(var(--gold));
  font-family: "Courier New", Courier, monospace;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

button,
a { font: inherit; }

.viewport {
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(49, 42, 22, .12), transparent 42%),
    #000;
}

.game-screen {
  position: relative;
  width: min(100vw, calc(100dvh * var(--screen-ratio)));
  height: min(100dvh, calc(100vw / var(--screen-ratio)));
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  background: #020201;
  opacity: 0;
  transform: scale(1.016);
  filter: brightness(.2) contrast(1.3);
  transition:
    opacity 560ms steps(8, end),
    transform 1100ms cubic-bezier(.15,.7,.18,1),
    filter 900ms steps(8, end);
}

.game-screen.is-ready {
  opacity: 1;
  transform: scale(1);
  filter: none;
}

.artwork,
.artwork img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.artwork {
  z-index: 0;
  transform: translate(var(--parallax-x), var(--parallax-y)) scale(1.012);
  transition: transform 160ms ease-out;
  will-change: transform;
}

.artwork img {
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.dust,
.cursor-light,
.title-sheen,
.mask-aura,
.corruption,
.scanlines,
.noise,
.vignette,
.flash,
.crt-shut {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dust {
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .48;
  mix-blend-mode: screen;
}

.cursor-light {
  z-index: 2;
  opacity: .34;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(211, 192, 126, .13) 0,
    rgba(147, 128, 73, .045) 9%,
    transparent 24%
  );
  transition: opacity 320ms ease;
  mix-blend-mode: screen;
}

.title-sheen {
  z-index: 2;
  inset: 10.5% 34.5% 68.5%;
  opacity: .13;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 242, 183, .65) 48%, transparent 72%);
  mix-blend-mode: screen;
  transform: translateX(-140%);
  animation: title-sheen 8s steps(40, end) infinite 2.5s;
}

.mask-aura {
  z-index: 2;
  inset: 18% 33% 20%;
  opacity: .32;
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(213, 191, 113, .19) 0,
    rgba(126, 104, 48, .075) 27%,
    transparent 62%
  );
  transform: scale(.98);
  animation: aura-breathe 4.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

.ghost-mask {
  position: absolute;
  z-index: 3;
  left: 44.55%;
  top: 27.35%;
  width: 10.9%;
  height: 44.8%;
  object-fit: fill;
  opacity: 0;
  filter: contrast(1.45) brightness(1.25) drop-shadow(0 0 10px rgba(221, 200, 129, .2));
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(var(--parallax-x), var(--parallax-y)) scale(.99);
  will-change: opacity, transform, filter;
}

.game-screen.mask-active .ghost-mask {
  opacity: .095;
  animation: ghost-hover 1.4s steps(4, end) infinite;
}

.game-screen.is-awake .ghost-mask {
  animation: ghost-awake 760ms steps(3, end) both;
}

.game-screen.is-awake .mask-aura {
  animation: aura-awake 760ms steps(4, end) both;
}

.corruption { z-index: 8; }

.corruption-strip {
  position: absolute;
  inset: 0;
  background: url("assets/bill-concept-4k.webp") 0 0 / 100% 100% no-repeat;
  opacity: .65;
  mix-blend-mode: screen;
  will-change: transform, clip-path;
}

.hotspot,
.mask-trigger {
  position: absolute;
  z-index: 10;
  display: block;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot::before,
.mask-trigger::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid transparent;
  background: rgba(var(--gold), 0);
  box-shadow: 0 0 0 rgba(var(--gold), 0);
  transition:
    border-color 100ms steps(2),
    background 100ms steps(2),
    box-shadow 100ms steps(2),
    transform 100ms steps(2);
}

.hotspot:hover::before,
.hotspot:focus-visible::before {
  border-color: rgba(var(--gold), .72);
  background: rgba(var(--gold), .06);
  box-shadow:
    0 0 18px rgba(var(--gold), .31),
    inset 0 0 18px rgba(var(--gold), .1);
  transform: translateY(-1px);
}

.hotspot:active::before {
  transform: translateY(1px);
  background: rgba(var(--gold), .14);
}

.hotspot:focus-visible,
.mask-trigger:focus-visible {
  outline: 2px dashed rgba(var(--gold), .9);
  outline-offset: -5px;
}

.hotspot-enter::after {
  content: "";
  position: absolute;
  inset: 17% 6%;
  border-top: 1px solid rgba(var(--gold), 0);
  border-bottom: 1px solid rgba(var(--gold), 0);
  opacity: 0;
  transform: scaleX(.78);
  transition: opacity 130ms steps(2), transform 130ms steps(2), border-color 130ms steps(2);
}

.hotspot-enter:hover::after,
.hotspot-enter:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  border-color: rgba(var(--gold), .6);
  animation: enter-flicker 1.2s steps(2, end) infinite;
}

/* Pixel-accurate interaction areas based on the 1536×1024 concept. */
.hotspot-x {
  left: 83.53%;
  top: 3.70%;
  width: 5.82%;
  height: 8.12%;
}

.hotspot-telegram {
  left: 90.49%;
  top: 3.70%;
  width: 6.17%;
  height: 8.12%;
}

.hotspot-enter {
  left: 39.77%;
  top: 76.95%;
  width: 20.44%;
  height: 8.79%;
}

.mask-trigger {
  left: 44.2%;
  top: 27.6%;
  width: 11.4%;
  height: 43.7%;
}

.mask-trigger::before { inset: 0; }

.scanlines {
  z-index: 11;
  opacity: .16;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, .30) 3px,
    rgba(0, 0, 0, .30) 4px
  );
  mix-blend-mode: multiply;
  animation: scan-drift 8s linear infinite;
}

.noise {
  z-index: 12;
  opacity: .055;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.52) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 73% 61%, rgba(255,255,255,.32) 0 1px, transparent 1px 5px);
  background-size: 19px 23px, 27px 31px;
  mix-blend-mode: overlay;
  animation: noise-hop 300ms steps(2, end) infinite;
}

.vignette {
  z-index: 13;
  box-shadow:
    inset 0 0 7vmin rgba(0, 0, 0, .48),
    inset 0 0 1.2vmin rgba(0, 0, 0, .42);
}

.flash {
  z-index: 20;
  opacity: 0;
  background: rgba(221, 208, 154, .30);
  mix-blend-mode: screen;
}

.crt-shut {
  z-index: 21;
  opacity: 0;
  background: #000;
}

.game-screen.is-entering {
  animation: screen-glitch 720ms steps(3, end) both;
}

.game-screen.is-entering .flash {
  animation: flash 720ms steps(3, end) both;
}

.game-screen.is-entering .artwork {
  animation: image-glitch 720ms steps(3, end) both;
}

.game-screen.is-entering .crt-shut {
  animation: crt-shut 720ms cubic-bezier(.7,0,.95,.32) both;
}

.game-screen.idle-glitch {
  animation: idle-glitch 190ms steps(2, end);
}

.noscript {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 30;
  transform: translateX(-50%);
  margin: 0;
  padding: .6rem .8rem;
  color: #c5b270;
  background: #050504;
  border: 1px solid #5a5134;
  font-size: 12px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes title-sheen {
  0%, 70%, 100% { transform: translateX(-140%); opacity: 0; }
  76% { opacity: .18; }
  88% { transform: translateX(140%); opacity: .12; }
  92% { opacity: 0; }
}

@keyframes aura-breathe {
  0%, 100% { opacity: .24; transform: scale(.97); }
  50% { opacity: .41; transform: scale(1.035); }
}

@keyframes aura-awake {
  0% { opacity: .2; transform: scale(.96); }
  20% { opacity: .95; transform: scale(1.18); }
  48% { opacity: .06; transform: scale(.92); }
  72% { opacity: .7; transform: scale(1.08); }
  100% { opacity: .3; transform: scale(1); }
}

@keyframes ghost-hover {
  0%, 100% { transform: translate(0, 0) scale(.995); filter: contrast(1.4) brightness(1.18); }
  45% { transform: translate(-1px, 1px) scale(1.006); filter: contrast(1.65) brightness(1.35); }
  60% { transform: translate(1px, 0) scale(1); }
}

@keyframes ghost-awake {
  0% { opacity: 0; transform: scale(.93); filter: contrast(2) brightness(2.2); }
  15% { opacity: .88; transform: translate(-4px, 1px) scale(1.06); }
  32% { opacity: .08; transform: translate(5px, -1px) scale(.98); }
  50% { opacity: .55; transform: translate(-2px, 0) scale(1.03); }
  70% { opacity: .06; }
  100% { opacity: .12; transform: scale(1); filter: contrast(1.45) brightness(1.25); }
}

@keyframes enter-flicker {
  0%, 55%, 100% { opacity: .95; }
  58% { opacity: .25; }
  64% { opacity: .8; }
}

@keyframes scan-drift {
  from { transform: translateY(-4px); }
  to { transform: translateY(4px); }
}

@keyframes noise-hop {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, -1px); }
}

@keyframes flash {
  0%, 100% { opacity: 0; }
  10% { opacity: .74; }
  22% { opacity: .05; }
  38% { opacity: .42; }
  53% { opacity: 0; }
}

@keyframes screen-glitch {
  0% { filter: none; }
  14% { filter: contrast(1.7) brightness(1.32); }
  31% { filter: contrast(.86) brightness(.72); }
  48% { filter: contrast(1.5); }
  66% { filter: invert(.06) contrast(1.2); }
  100% { filter: brightness(.1); }
}

@keyframes image-glitch {
  0% { transform: translate(0) scale(1.012); }
  15% { transform: translate(-.55%, .11%) scale(1.018); }
  29% { transform: translate(.36%, -.12%) scale(1.012); }
  45% { transform: translate(-.22%, 0) scale(1.024); }
  66% { transform: translate(.15%, .05%) scale(1.01); }
  100% { transform: scale(1.02); }
}

@keyframes crt-shut {
  0%, 58% { opacity: 0; transform: scaleY(1); }
  73% { opacity: .25; transform: scaleY(.12); }
  88% { opacity: .92; transform: scaleY(.006); }
  100% { opacity: 1; transform: scaleY(1); }
}

@keyframes idle-glitch {
  0%, 100% { filter: none; transform: translate(0); }
  30% { filter: contrast(1.35); transform: translate(-1px, 0); }
  58% { filter: brightness(.82); transform: translate(1px, 0); }
}

@media (max-aspect-ratio: 4 / 5) {
  .cursor-light { opacity: .18; }
  .dust { opacity: .32; }
}

@media (hover: none) {
  .cursor-light { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .dust,
  .ghost-mask,
  .title-sheen { display: none; }
}