/* SNITCHTEST — bait-and-switch privacy mirror
   Two aesthetic universes managed by a body class flip:
     body.stage-clown  →  naive 1998 clickbait
     body.stage-horror →  black page · your data streamed back at you · two skulls watching
   JS flips .stage-clown → .stage-horror on button click. */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Major+Mono+Display&display=swap');

:root {
  /* HORROR palette */
  --bg:         #000;
  --paper:      #e4e0d6;          /* photocopy off-white — VALUE brightness */
  --paper-mid:  #b8b4a8;          /* label brightness — bright but not value-bright */
  --paper-dim:  #7a7a70;          /* footer-tier dim */
  --blood:      #c1121f;          /* desaturated blood */
  --blood-dim:  #721219;
  --scrubs:     #4a7a4a;          /* medical-scrubs green */
  --burgundy:   #7a0044;
  --amber:      #b8860b;          /* old CRT amber */

  /* CLOWN palette — 1998 geocities */
  --clown-bg:     #f7f3ea;
  --clown-red:    #ee1c25;
  --clown-yellow: #ffe900;
  --clown-blue:   #2e5cff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═════════════════════════════════════════════════════════════
   STAGE 1 · CLOWN BAIT
   ═════════════════════════════════════════════════════════════ */

body.stage-clown {
  background: var(--clown-bg);
  color: #333;
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  animation: clownPulse 4s infinite;
}
@keyframes clownPulse {
  0%, 100% { background: var(--clown-bg); }
  50%      { background: #fff9eb; }
}
body.stage-clown .clown-title {
  font-size: clamp(28px, 5vw, 56px);
  color: var(--clown-red);
  text-shadow: 3px 3px 0 var(--clown-yellow), 6px 6px 0 var(--clown-blue);
  margin-bottom: 157px;  /* 32px baseline + 125px (1.3in @ 96dpi) lift */
  max-width: 820px;
  line-height: 1.15;
  font-weight: bold;
}
body.stage-clown .clown-sub {
  font-size: 20px;
  color: #444;
  margin-bottom: 48px;
  max-width: 620px;
  font-family: 'Comic Sans MS', cursive;
}

body.stage-clown .big-clown-btn {
  background: radial-gradient(circle at 30% 30%, #ff6676 10%, var(--clown-red) 70%);
  color: var(--clown-yellow);
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(42px, 8vw, 88px);
  font-weight: 900;
  padding: 60px 120px;
  border: 10px solid var(--clown-yellow);
  border-radius: 40px;
  box-shadow:
    0 0 0 16px var(--clown-red),
    0 0 0 20px var(--clown-yellow),
    0 16px 0 20px #8b0000,
    0 0 80px rgba(255, 50, 50, 0.6);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: clownBtnBounce 1.2s infinite;
  text-shadow:
    2px 2px 0 #000,
    -2px -2px 0 var(--clown-blue),
    4px 4px 0 rgba(0,0,0,0.3);
  position: relative;
  z-index: 2;
}
@keyframes clownBtnBounce {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}
body.stage-clown .big-clown-btn:hover {
  animation-duration: 0.3s;
  filter: hue-rotate(20deg) brightness(1.15);
}

body.stage-clown .corner-face {
  position: fixed;
  font-size: clamp(72px, 13vw, 192px);  /* 200% bigger (3x of 64px on desktop) */
  line-height: 1;
  animation: corner-spin 3s linear infinite;
  z-index: 1;
  pointer-events: none;
}
body.stage-clown .corner-face.tl { top: 16px;    left: 16px;  animation-direction: normal;  }
body.stage-clown .corner-face.tr { top: 16px;    right: 16px; animation-direction: reverse; }
body.stage-clown .corner-face.bl { bottom: 16px; left: 16px;  animation-direction: reverse; }
body.stage-clown .corner-face.br { bottom: 16px; right: 16px; animation-direction: normal;  }
@keyframes corner-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.stage-clown .horror-only { display: none !important; }

/* ═════════════════════════════════════════════════════════════
   STAGE 2 · HORROR
   The darkest black possible. Data rips onto the screen.
   Two giant skulls pinned to the top corners. Nothing else.
   ═════════════════════════════════════════════════════════════ */

html, body { background: #000; }

body.stage-horror {
  background: #000;
  color: var(--paper);
  font-family: 'VT323', monospace;
  font-size: 24px;
  line-height: 1.1;
}
body.stage-horror .clown-only { display: none !important; }

/* NO scanline / vignette overlays — any overlay lifts pure black. */

body.stage-horror main { position: relative; z-index: 3; }

/* ─── Centerpiece skull: appears on stage flip, glitches while tests run,
   shatters as data starts pouring in through it.  Removed from DOM after break. ─── */
body.stage-horror .big-skull {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: clamp(280px, 55vh, 560px);
  line-height: 0.9;
  color: var(--blood);
  text-shadow:
    3px 0 0 rgba(255, 0, 80, 0.85),
    -3px 0 0 rgba(0, 255, 255, 0.6),
    0 0 40px var(--blood),
    0 0 90px var(--blood-dim),
    0 0 160px rgba(193,18,31,0.35);
  z-index: 100;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
  animation: bigSkullGlitch 1.4s infinite steps(1);
  will-change: transform, opacity, filter;
}
@keyframes bigSkullGlitch {
  0%, 12%, 26%, 59%, 83%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  13% { transform: translate(-50%, -50%) translate(-5px, 2px);
        text-shadow: 7px 0 0 rgba(255, 0, 80, 0.95), -7px 0 0 rgba(0, 255, 255, 0.75), 0 0 46px var(--blood), 0 0 110px var(--blood-dim); }
  27% { transform: translate(-50%, -50%) translate(4px, -1px); }
  60% { transform: translate(-50%, -50%) translate(-3px, 1px);
        text-shadow: 5px 0 0 rgba(255, 0, 80, 0.9), -5px 0 0 rgba(0, 255, 255, 0.7), 0 0 40px var(--blood), 0 0 90px var(--blood-dim); }
  84% { transform: translate(-50%, -50%) translate(2px, 3px); }
}

/* Shatter — escalating glitch, scale up, fade, blur */
body.stage-horror .big-skull.breaking {
  animation: bigSkullBreak 1.2s cubic-bezier(0.3, 0, 0.6, 1) forwards;
}
@keyframes bigSkullBreak {
  0%   { transform: translate(-50%, -50%) scale(1);                   opacity: 1;    filter: blur(0)   contrast(1); }
  15%  { transform: translate(-50%, -50%) translate(-8px, 0) scale(1.04); opacity: 1; filter: blur(1px) contrast(1.3); }
  32%  { transform: translate(-50%, -50%) translate(9px, -3px) scale(1.07); opacity: 0.85; filter: blur(2px) contrast(1.5); }
  50%  { transform: translate(-50%, -50%) translate(-6px, 4px) scale(1.1);  opacity: 0.55; filter: blur(3px) contrast(1.7); }
  70%  { transform: translate(-50%, -50%) scale(1.18); opacity: 0.28; filter: blur(6px) contrast(1.9); }
  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0;    filter: blur(14px) contrast(2.2); }
}

@media (prefers-reduced-motion: reduce) {
  body.stage-horror .big-skull { animation: none; text-shadow: 0 0 40px var(--blood); }
  body.stage-horror .big-skull.breaking { animation: bigSkullFadeSimple 0.5s forwards; }
  @keyframes bigSkullFadeSimple {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* ─── The watchers: two big spinning skulls, fixed to the viewport corners ─── */
body.stage-horror .corner-skull {
  position: fixed;
  top: 16px;
  font-size: clamp(72px, 11vw, 144px);
  color: var(--blood);
  text-shadow:
    0 0 10px var(--blood),
    0 0 22px var(--blood-dim),
    0 0 40px rgba(193,18,31,0.35);
  z-index: 50;
  pointer-events: none;
  line-height: 1;
  animation: skullSpin 2.4s linear infinite;
  will-change: transform;
}
body.stage-horror .corner-skull.left  { left: 20px; }
body.stage-horror .corner-skull.right { right: 20px; animation-direction: reverse; }
@keyframes skullSpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Atmospheric horizontal tear lines — subtle, rare */
body.stage-horror .tear {
  position: fixed;
  left: 0; right: 0;
  height: 1px;
  background: var(--blood);
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  box-shadow: 0 0 6px var(--blood);
}
body.stage-horror .tear.t1 { top: 22%; animation: tearFlash 9s infinite; }
body.stage-horror .tear.t2 { top: 58%; animation: tearFlash 13s infinite 4s; background: var(--burgundy); }
body.stage-horror .tear.t3 { top: 84%; animation: tearFlash 17s infinite 8s; background: var(--amber); }
@keyframes tearFlash {
  0%, 97%, 100% { opacity: 0; transform: scaleX(0); }
  98%           { opacity: 0.8; transform: scaleX(1); }
  99%           { opacity: 0.2; }
}

/* UNSTABLE banner — moved to bottom-center so it doesn't fight the skulls */
body.stage-horror .unstable-banner {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--blood);
  letter-spacing: 2px;
  opacity: 0;
  animation: unstableFlash 19s infinite 4s;
  text-shadow: 0 0 6px var(--blood);
  white-space: nowrap;
}
@keyframes unstableFlash {
  0%, 94%, 100% { opacity: 0; }
  95%           { opacity: 0.85; }
  96%           { opacity: 0.2; }
  97%           { opacity: 0.7; }
}

/* ─── Stream layout ─── */
body.stage-horror main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 32px 40px;  /* first data line aligns with corner-skull top (top:16px) */
}

body.stage-horror .stream {
  display: flex;
  flex-direction: column;
}

/* Base line — NO padding, line-height does the spacing */
body.stage-horror .s-line {
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.1;
}
body.stage-horror .s-blank { padding: 10px 0; }

/* Data line: `<key>   <value>   — <gloss>`
   dim key · BIG colored value · smaller italic plain-english gloss.
   Uses flex so the gloss wraps cleanly under the value when wide. */
body.stage-horror .s-data {
  font-size: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 2px;
  column-gap: 10px;
}
body.stage-horror .s-data .k {
  display: inline-block;
  min-width: 24ch;
  flex-shrink: 0;
  color: var(--paper-mid);
  font-family: 'VT323', monospace;
  letter-spacing: 0.3px;
  font-size: 26px;
}
body.stage-horror .s-data .v {
  font-weight: bold;
  font-size: 34px;
  letter-spacing: 0.3px;
  font-family: 'VT323', monospace;
  flex-shrink: 0;
}
body.stage-horror .s-data .gloss {
  color: var(--paper-mid);
  font-family: 'VT323', monospace;
  font-size: 24px;
  font-style: italic;
  opacity: 0.72;
  letter-spacing: 0.2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
body.stage-horror .s-data .v { overflow-wrap: break-word; }

/* Status-coloured values */
body.stage-horror .s-data .v-exposed {
  color: var(--blood);
  text-shadow: 0 0 8px var(--blood-dim);
}
body.stage-horror .s-data .v-protected {
  color: var(--scrubs);
}
body.stage-horror .s-data .v-info {
  color: var(--amber);
}

/* The escape CTA — giant red pulsing link.  One clear exit after the audit. */
body.stage-horror .s-escape {
  display: block;
  margin: 34px auto 16px;
  padding: 28px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(30px, 5.5vw, 60px);
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--blood);
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
  text-shadow:
    3px 3px 0 #000,
    0 0 22px var(--blood-dim),
    0 0 44px var(--blood);
  cursor: pointer;
  animation: escapePulse 2.2s ease-in-out infinite;
  white-space: nowrap;
  overflow-wrap: normal;
  text-transform: uppercase;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}
@keyframes escapePulse {
  0%, 100% {
    text-shadow:
      3px 3px 0 #000,
      0 0 22px var(--blood-dim),
      0 0 44px var(--blood);
  }
  50% {
    text-shadow:
      3px 3px 0 #000,
      0 0 32px var(--blood),
      0 0 80px var(--blood);
  }
}
body.stage-horror .s-escape:hover {
  color: #fff;
  text-shadow:
    3px 3px 0 #000,
    0 0 28px var(--blood),
    0 0 70px var(--blood),
    0 0 120px var(--burgundy);
  animation-duration: 0.9s;
}
body.stage-horror .s-escape:active {
  transform: translateY(2px);
  color: var(--amber);
}

/* ─── Footer ─── */
/* Hidden during skull intro + stream. Fades in only after all data has landed. */
body.stage-horror footer {
  display: none;
}
body.stage-horror.stream-done footer {
  display: block;
  margin-top: 60px;
  padding: 22px 0 10px;
  border-top: 1px dashed var(--blood-dim);
  color: var(--paper-dim);
  font-family: 'VT323', monospace;
  font-size: 15px;
  text-align: center;
  letter-spacing: 1px;
  animation: footerFadeIn 0.8s ease-out;
}
@keyframes footerFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.stage-horror footer .brand {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--blood);
  letter-spacing: 3px;
  margin-bottom: 8px;
}
body.stage-horror footer a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px dotted var(--amber);
}
body.stage-horror footer a:hover { color: var(--blood); border-bottom-color: var(--blood); }

/* ─── Responsive ─── */

/* Tablet / narrow desktop */
@media (max-width: 960px) {
  body.stage-horror main { padding: 16px 24px 40px; }
  body.stage-horror .s-data { font-size: 24px; }
  body.stage-horror .s-data .k { font-size: 22px; min-width: 20ch; }
  body.stage-horror .s-data .v { font-size: 28px; }
  body.stage-horror .s-data .gloss { font-size: 20px; }
}

/* Mobile portrait — iPhone 12 / typical Android */
@media (max-width: 720px) {
  /* Clown stage — shrink button + title so they fit a phone */
  body.stage-clown { padding: 14px 10px; }
  body.stage-clown::before { font-size: 11px; letter-spacing: 1px; padding: 6px 0; }
  body.stage-clown .clown-title {
    font-size: clamp(22px, 7vw, 36px);
    margin-bottom: 90px;  /* scaled-down lift for mobile */
    text-shadow: 2px 2px 0 var(--clown-yellow), 4px 4px 0 var(--clown-blue);
  }
  body.stage-clown .clown-sub { font-size: 15px; margin-bottom: 28px; line-height: 1.4; }
  body.stage-clown .big-clown-btn {
    font-size: clamp(26px, 9vw, 40px);
    padding: 20px 28px;
    border-width: 5px;
    border-radius: 24px;
    letter-spacing: 2px;
    box-shadow:
      0 0 0 8px var(--clown-red),
      0 0 0 11px var(--clown-yellow),
      0 8px 0 11px #8b0000,
      0 0 28px rgba(255, 50, 50, 0.5);
    max-width: 95vw;
  }
  /* corner-face size & offsets handled by the clamp() on the base rule */

  /* Horror stage */
  body.stage-horror {
    font-size: 20px;
    line-height: 1.15;
  }
  /* Corner skulls — smaller + closer to edges */
  body.stage-horror .corner-skull {
    font-size: clamp(44px, 14vw, 64px);
    top: 8px;
  }
  body.stage-horror .corner-skull.left  { left: 8px; }
  body.stage-horror .corner-skull.right { right: 8px; }

  /* Big intro skull — lighter on mobile to avoid GPU strain + overscaling */
  body.stage-horror .big-skull {
    font-size: clamp(180px, 42vh, 300px);
    text-shadow:
      2px 0 0 rgba(255, 0, 80, 0.85),
      -2px 0 0 rgba(0, 255, 255, 0.6),
      0 0 28px var(--blood),
      0 0 60px var(--blood-dim);
  }

  body.stage-horror main {
    padding: 78px 12px 32px;  /* top padding clears corner skulls (top:8 + ~64px font) */
    max-width: 100%;
  }

  /* Data rows → forced single line.  Key + value + gloss on ONE line,
     gloss ellipsizes when the row is too long. */
  body.stage-horror .s-data {
    font-size: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 6px;
    row-gap: 0;
    padding: 1px 0;
    align-items: baseline;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
  }
  body.stage-horror .s-data .k {
    min-width: 0;
    font-size: 11px;
    opacity: 0.7;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  body.stage-horror .s-data .v {
    font-size: 13px;
    text-shadow: 0 0 6px var(--blood-dim);
    line-height: 1.15;
    flex-shrink: 0;
    white-space: nowrap;
  }
  body.stage-horror .s-data .gloss {
    font-size: 11px;
    padding-left: 0;
    opacity: 0.75;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.stage-horror .s-blank { padding: 2px 0; }
  body.stage-horror .s-escape {
    font-size: clamp(24px, 8vw, 40px);
    padding: 22px 10px;
    margin: 28px auto 12px;
    letter-spacing: 1px;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    white-space: normal;  /* allow wrap on narrow phones */
  }

  /* Footer tighter on mobile */
  body.stage-horror.stream-done footer {
    margin-top: 40px;
    padding: 18px 0 8px;
    font-size: 13px;
  }
  body.stage-horror.stream-done footer .brand { font-size: 10px; letter-spacing: 2px; }
  body.stage-horror.stream-done footer a {
    display: inline-block;
    padding: 4px 2px;  /* bigger touch target */
  }

  /* Unstable banner smaller on mobile */
  body.stage-horror .unstable-banner { font-size: 9px; bottom: 10px; }
}

/* Extra-small — iPhone SE (375), narrow Android (360), very small (320) */
@media (max-width: 400px) {
  body.stage-clown .clown-title { font-size: 22px; }
  body.stage-clown .big-clown-btn {
    font-size: 26px;
    padding: 16px 22px;
    border-width: 4px;
    box-shadow:
      0 0 0 6px var(--clown-red),
      0 0 0 9px var(--clown-yellow),
      0 6px 0 9px #8b0000,
      0 0 24px rgba(255, 50, 50, 0.5);
  }

  body.stage-horror .corner-skull { font-size: clamp(36px, 13vw, 52px); top: 6px; }
  body.stage-horror .corner-skull.left  { left: 6px; }
  body.stage-horror .corner-skull.right { right: 6px; }
  body.stage-horror main { padding: 64px 8px 28px; }
  body.stage-horror .s-data { font-size: 11px; padding: 1px 0; column-gap: 5px; }
  body.stage-horror .s-data .k { font-size: 10px; }
  body.stage-horror .s-data .v { font-size: 12px; }
  body.stage-horror .s-data .gloss { font-size: 10px; }
  body.stage-horror .big-skull { font-size: clamp(150px, 38vh, 240px); }
  body.stage-horror .s-escape {
    font-size: clamp(22px, 9vw, 32px);
    padding: 18px 8px;
  }
}