/* BULLSEYE browser demo (dirtnapgame.com/bullseye). The demo page owns the
   whole viewport, so this file does not pull in styles.css - only the same
   Silkscreen face the rest of the site uses. The site CSP is style-src
   'self': every rule lives here, never inline. */

@font-face {
  font-family: "Silkscreen";
  src: url("/assets/fonts/silkscreen-regular.woff2") format("woff2");
  font-display: swap;
}

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

canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: none;
  background: #070503;
}

/* logo + counter + wishlist ride ABOVE the chunky canvas as crisp DOM */
#topui {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
#logo {
  width: min(38vw, 400px);
  image-rendering: auto;
}
#counter {
  font-family: Silkscreen, monospace; font-size: 16px; letter-spacing: 1px;
  color: #ffd25a;
  text-shadow: 2px 2px #141008, -2px 2px #141008,
    2px -2px #141008, -2px -2px #141008;
}
#wishlist {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: Silkscreen, monospace; font-size: 16px; letter-spacing: 1px;
  color: #e8dcc8; text-decoration: none;
  background: rgba(38, 26, 15, 0.85);
  border: 2px solid #c9a04a;
  padding: 8px 18px;
  cursor: pointer;
}
#wishlist:hover {
  background: rgba(74, 50, 27, 0.95);
  border-color: #ffd25a;
  color: #ffe9b0;
}
/* BULLSEYE as DOM too: canvas text goes to mush through the 3x upscale */
#bullseye {
  position: fixed; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: Silkscreen, monospace;
  font-size: min(11vw, 110px);
  color: #ffd25a; letter-spacing: 4px; white-space: nowrap;
  text-shadow: -4px 0 #141008, 4px 0 #141008, 0 -4px #141008, 0 4px #141008,
    3px 3px #141008, -3px 3px #141008, 3px -3px #141008, -3px -3px #141008;
  pointer-events: none;
  display: none;
}
#bullseye.show { display: block; animation: bepop 0.25s ease-out; }
@keyframes bepop {
  from { transform: translate(-50%, -50%) scale(1.9); }
  to { transform: translate(-50%, -50%) scale(1); }
}
/* trailer box: game.js injects the YouTube iframe on the third shot */
#trailer {
  position: fixed; right: 16px; bottom: 16px;
  border: 2px solid #c9a04a; background: #000;
  display: none;
}
#trailer.show { display: block; }
#trailer-label {
  display: block;
  font-family: Silkscreen, monospace; font-size: 12px; letter-spacing: 1px;
  color: #ffd25a; background: #261a0f;
  padding: 6px 10px; text-align: center;
  text-decoration: none; cursor: pointer;
}
#trailer-label:hover { color: #ffe9b0; background: #3a2817; }
#trailer iframe {
  display: block; border: 0;
  width: min(32vw, 400px); aspect-ratio: 16 / 9;
}
#trailer-close {
  position: absolute; top: -12px; right: -12px; width: 24px; height: 24px;
  font-family: Silkscreen, monospace; font-size: 12px; line-height: 1;
  color: #e8dcc8; background: #261a0f; border: 2px solid #c9a04a;
  padding: 0; cursor: pointer;
}
#trailer-close:hover { color: #ffe9b0; border-color: #ffd25a; }
/* touch-only devices get a full-screen note: the demo needs a mouse */
#mobile-note {
  position: fixed; inset: 0; z-index: 10;
  background: #070503;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center;
}
#mobile-note img { width: min(80vw, 400px); }
#mobile-note .big {
  font-family: Silkscreen, monospace; font-size: 26px; letter-spacing: 2px;
  color: #ffd25a;
  text-shadow: 2px 2px #141008, -2px 2px #141008,
    2px -2px #141008, -2px -2px #141008;
}
#mobile-note a {
  font-family: Silkscreen, monospace; font-size: 16px; letter-spacing: 1px;
  color: #e8dcc8; text-decoration: none;
  background: rgba(38, 26, 15, 0.85);
  border: 2px solid #c9a04a;
  padding: 10px 20px;
}
@media (hover: none) and (pointer: coarse) {
  #mobile-note { display: flex; }
}

/* the DESKTOP ONLY note carries the trailer under everything (game.js
   injects the iframe on touch devices only) */
#mobile-trailer iframe {
  display: block;
  width: min(86vw, 420px); aspect-ratio: 16 / 9;
}