/* THE GOTCHA, dressed.
   Built by gotcha.js, painted here.

   It is its own file rather than part of retro.css because it must look the
   same whether or not the 2002 theme is switched on: the joke IS a 2002 web
   page, and ?retro=off must not turn the punishment into something tasteful.
   Everything is spelled out in hex for the same reason, since the theme's
   colour variables are not guaranteed to be in play. */

/* ---- Beat 1: the dashboard that is too good to be true ------------------
   This has to be indistinguishable from the REAL dashboard, or the joke never
   lands: a player has to believe for three seconds that they have just broken
   the game wide open. So it is the same silver bevelled board, the same
   wallpaper, the same heading face. The only difference is that every stage
   says UNLOCKED.

   Copied here rather than borrowed from retro.css because that file styles the
   dashboard's own markup, which does not exist on the scan page. If the real
   board is ever restyled, this is the second place to change. */
.gotcha-fake {
  background: #E8E8F0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect width='32' height='32' fill='%23E8E8F0'/><path d='M0 0h32v1H0zM0 0v32h1V0z' fill='%23FFFFFF'/><path d='M0 31h32v1H0zM31 0v32h1V0z' fill='%23D2D2DC'/><circle cx='16' cy='16' r='1.5' fill='%23C8C8D4'/></svg>") repeat;
  color: #000;
  font-family: var(--font-window, Verdana, Geneva, Arial, sans-serif);
}

.gf-badge {
  display: inline-block;
  font-family: var(--font-display, 'BlockBlueprint', "Comic Sans MS", cursive);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #0A5417;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 4px 12px;
  font-weight: bold;
}

.gf-title {
  font-family: var(--font-display, 'BlockBlueprint', "Comic Sans MS", cursive);
  font-size: clamp(1.4rem, 6vw, 2.6rem);
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
  color: #000080;
  /* The same chunky 2002 drop shadow the real headings use. */
  text-shadow: 2px 2px 0 #FFFFFF, 4px 4px 0 #808080;
}

/* The level badge, matching the real one on the dashboard. */
.gf-level {
  display: inline-block;
  font-family: var(--font-display, 'BlockBlueprint', "Comic Sans MS", cursive);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: #000080;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 4px 12px;
}

.gf-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  box-shadow: 1px 1px 0 #808080 inset, -1px -1px 0 #FFFFFF inset,
              3px 3px 0 rgba(0, 0, 0, 0.25);
}

.gf-tick {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  color: #0A5417;
  font-weight: bold;
}

.gf-num {
  font-family: var(--font-mono, 'JetBrains Mono', "Courier New", monospace);
  font-size: 0.72rem;
  color: #3A3A3A;
  letter-spacing: 1px;
}

.gf-name {
  font-family: var(--font-display, 'BlockBlueprint', "Comic Sans MS", cursive);
  font-size: 1.05rem;
  color: #0A5417;
  letter-spacing: 0.06em;
}

.gf-play {
  background: #C0C0C0;
  color: #000;
  font-weight: bold;
  font-size: 0.85rem;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  border-left: 6px solid #0A5417;
  box-shadow: 1px 1px 0 #808080 inset, -1px -1px 0 #FFFFFF inset;
  padding: 8px 16px;
}

/* ---- Beat 2: the adverts ------------------------------------------------ */
.gotcha-ad {
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--font-window, Verdana, Geneva, sans-serif);
  color: #000;
  animation: ga-in 0.18s ease-out both;
}

@keyframes ga-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; }
}

.ga-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: 0.68rem;
  font-weight: bold;
  padding: 3px 5px;
}

.ga-x {
  background: #C0C0C0;
  color: #000;
  border: 1px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  padding: 0 4px;
  font-size: 0.6rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.ga-body { padding: 8px 9px; font-size: 0.72rem; line-height: 1.45; }

.ga-cta {
  margin: 0 9px 9px;
  text-align: center;
  background: #FFB200;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  padding: 5px;
  font-size: 0.72rem;
  font-weight: bold;
  cursor: pointer;
  animation: ga-throb 0.6s steps(2) infinite;
}

@keyframes ga-throb { 50% { background: #FFE082; } }

/* ---- Beat 3: the blue screen -------------------------------------------- */
.gotcha-bsod {
  background: #0000AA;
  color: #FFFFFF;
  font-family: var(--font-code, 'Courier New', Courier, monospace);
}

.bsod-head {
  background: #AAAAAA;
  color: #0000AA;
  display: inline-block;
  padding: 1px 10px;
  margin: 0 auto 1.2rem;
  font-weight: bold;
  letter-spacing: 2px;
}

.bsod-body {
  white-space: pre-wrap;
  font-size: clamp(0.7rem, 2.4vw, 0.86rem);
  line-height: 1.6;
}

.gotcha-bsod > div { text-align: center; }
.gotcha-bsod .bsod-body { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .gotcha-ad, .ga-cta { animation: none !important; }
}