:root {
  color: #efe9d2;
  background: #17150f;
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #17150f;
}

[data-contract-stage] {
  position: relative;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  background: #26221a;
}

[data-contract-id] {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

button[data-contract-id],
a[data-contract-id] { pointer-events: auto; }

[data-contract-id][hidden] { display: none !important; }

img[data-contract-id] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-contract-state="copying"] img[data-contract-id="opening-frame"],
[data-contract-state="recombining"] img[data-contract-id="payoff-frame"],
[data-contract-state="bad-copy"] img[data-contract-id="bad-copy-frame"] {
  animation: frame-jitter 180ms steps(2, end) infinite;
}

@keyframes frame-jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0.15%, -0.2%); }
  100% { transform: translate(-0.1%, 0.15%); }
}

button[data-contract-id="copy-control"] {
  display: grid;
  place-items: center;
  padding: 0.4vmin;
  border: 0.35vmin solid #14120a;
  border-radius: 1.2vmin;
  background: linear-gradient(180deg, #a9a789, #7b795f 55%, #63614c);
  color: #14120a;
  font: 900 1.5vmin/1.15 "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0.3vmin 0 #c9c7a9, 0 0.5vmin 0 #14120a;
}

button[data-contract-id="copy-control"]:active {
  transform: translateY(0.2vmin);
  box-shadow: inset 0 0.3vmin 0 #c9c7a9, 0 0.2vmin 0 #14120a;
}

button[data-contract-id="copy-control"]:disabled {
  cursor: default;
  opacity: .7;
}

button[data-contract-id="copy-control"][data-contract-visibility="highlighted"] {
  box-shadow: inset 0 0.3vmin 0 #c9c7a9, 0 0.5vmin 0 #14120a, 0 0 1.2vmin #ffe98a;
}

[data-contract-id="hold-meter"] {
  border: 0.2vmin solid #14120a;
  border-radius: 0.4vmin;
  background: #0c0b06;
  overflow: hidden;
}

.hold-fill {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #cdd65a 0 12%, #8f9a3a 12% 24%);
  transition-property: width;
  transition-timing-function: linear;
}

[data-contract-id="roller-overlay"] {
  border-radius: 0.5vmin;
  background: repeating-linear-gradient(180deg, rgba(90,85,70,.45) 0 1.2vmin, rgba(150,145,120,.35) 1.2vmin 2.4vmin);
  background-size: 100% 2.4vmin;
  animation: roller-spin 0.32s linear infinite;
  opacity: .6;
  mix-blend-mode: multiply;
}

@keyframes roller-spin {
  from { background-position-y: 0; }
  to { background-position-y: 2.4vmin; }
}

[data-contract-id="scan-flash"] {
  background: #fff;
  opacity: 0;
  mix-blend-mode: screen;
}

[data-contract-id="scan-flash"][data-contract-visibility="dimmed"] { opacity: .07; }

[data-contract-id="scan-flash"][data-contract-visibility="highlighted"] {
  opacity: .85;
  animation: scan-pop 80ms ease-out;
}

@keyframes scan-pop {
  from { opacity: 1; }
  to { opacity: .85; }
}

[data-contract-id="paper-streaks"] {
  background: repeating-linear-gradient(90deg, #e9e3cb 0 2vmin, transparent 2vmin 5vmin);
  background-size: 5vmin 100%;
  opacity: .55;
  mix-blend-mode: screen;
  animation: streak-run 0.55s linear infinite;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

@keyframes streak-run {
  from { background-position-x: 0; }
  to { background-position-x: -5vmin; }
}

[data-contract-id="toner-specks"] {
  background-image:
    radial-gradient(#14120a 0 0.18vmin, transparent 0.26vmin),
    radial-gradient(#14120a 0 0.14vmin, transparent 0.22vmin),
    radial-gradient(#14120a 0 0.2vmin, transparent 0.28vmin);
  background-repeat: repeat;
  background-size: 23vmin 17vmin, 31vmin 27vmin, 41vmin 33vmin;
  background-position: 3vmin 5vmin, 13vmin 15vmin, 23vmin 8vmin;
  opacity: .4;
  mix-blend-mode: multiply;
}

[data-contract-id="toner-specks"][data-contract-visibility="dimmed"] { opacity: .22; }

[data-contract-state="bad-copy"] [data-contract-id="toner-specks"] {
  animation: toner-drift 1.4s steps(3, end) infinite;
}

@keyframes toner-drift {
  from { background-position: 3vmin 5vmin, 13vmin 15vmin, 23vmin 8vmin; }
  to { background-position: 6vmin 8vmin, 10vmin 19vmin, 27vmin 5vmin; }
}

[data-contract-id="payoff-caption"] {
  display: grid;
  place-items: center;
  background: #14120a;
  border: 0.25vmin solid #63614c;
  color: #d8d34e;
  font: 900 1.6vmin/1 "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0.4vmin;
}

a[data-contract-id="x-receipt-link"],
a[data-contract-id="pump-receipt-link"],
button[data-contract-id="copy-ca-receipt"],
[data-contract-id="copy-status"] {
  display: grid;
  place-items: center;
  background: #f1ecd7;
  border: 0.2vmin solid #17150f;
  color: #17150f;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: 1.1vmin;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  padding: 0 0.3vmin;
  box-shadow: 0 0.3vmin 0.6vmin #0006;
}

a[data-contract-id="x-receipt-link"] { transform: rotate(-0.5deg); }
a[data-contract-id="pump-receipt-link"] { transform: rotate(0.4deg); }

a[data-contract-id][aria-disabled="true"] {
  opacity: .6;
  cursor: default;
}

button[data-contract-id="copy-ca-receipt"]:not(:disabled) { cursor: pointer; }
button[data-contract-id="copy-ca-receipt"]:disabled { opacity: .6; cursor: default; }

[data-contract-id="copy-status"] {
  background: #d9d2b8;
  font-size: 1vmin;
}

button[data-contract-id="mute-control"] {
  display: grid;
  place-items: center;
  background: #14120a;
  border: 0.25vmin solid #63614c;
  border-radius: 0.8vmin;
  color: #b6b04a;
  font: 900 1.3vmin/1 system-ui, sans-serif;
  cursor: pointer;
}

button[data-contract-id="mute-control"][aria-pressed="true"] {
  color: #6b6852;
  text-decoration: line-through;
}

button[data-contract-id]:focus-visible,
a[data-contract-id]:focus-visible {
  outline: 0.4vmin dashed #efe9d2;
  outline-offset: 0.2vmin;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}