/* tokens
   void: #19130e (sampled off the sprite's own background, page and coin fuse into one flat field)
   copper: #d95c1d / #c65016   cat: near-black grey, drawn into the sprite already
   accent: #ccff00 (chain neon, the sprite's own single accent pixel cluster, reused for the CA only)
   type: Press Start 2P only - an 8-bit sprite gets an 8-bit font, nothing else on this screen needs one
   corner radius: none, hard pixel edges throughout
   motion: one slow idle breathe on the coin, nothing else moves
*/

@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #19130e;
  overflow: hidden;
}

body {
  display: flex;
  min-height: 100vh;
}

.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
}

.pen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2vmin;
  width: min(84vw, 84vh, 760px);
}

.sprite {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: breathe 4.2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.007); }
}

.ticker {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: clamp(11px, 2.4vmin, 16px);
  letter-spacing: 0.05em;
  color: #d95c1d;
  text-shadow: 0 0 6px rgba(217, 92, 29, 0.35);
}

.ca {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: clamp(9px, 1.9vmin, 13px);
  letter-spacing: 0.02em;
  color: #f0e6d8;
  background: transparent;
  border: 2px solid #6b3414;
  padding: 1.2em 1.4em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ca:hover,
.ca:focus-visible {
  border-color: #ccff00;
  color: #ccff00;
  outline: none;
}

.ca.copied {
  border-color: #ccff00;
  color: #ccff00;
}

@media (prefers-reduced-motion: reduce) {
  .sprite { animation: none; }
}

@media (max-width: 480px) {
  .pen { gap: 1.6vmin; }
  .ca { padding: 1em 1.1em; }
}