/* =============================================================================
   Spy kit — the shared spy skin of the Fun section's party games.

   Loaded by Code Words and Intercept on top of their own sheets. Everything
   here is a thematic layer, not layout: dossier stamps, redaction bars that
   peel away, a radar sweep, scanlines, a REC light, typed titles, and the
   silhouettes that show on a revealed Code Words card. The silhouettes are
   CSS masks, so they take whatever colour the card gives them.

   Prefix `spy-`. Every looping animation stops under reduced motion.
   ========================================================================== */

:root {
  --spy-red: #f43f5e;
  --spy-stamp: #ff5c74;
  --spy-agent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M14 100 Q16 68 50 63 Q84 68 86 100 Z M41 65 L50 84 L59 65 Q50 70 41 65 Z'/%3E%3Cellipse cx='50' cy='47' rx='11.5' ry='13'/%3E%3Cpath d='M33 35 Q34 13 50 13 Q66 13 67 35 Z'/%3E%3Cellipse cx='50' cy='35.5' rx='30' ry='5.5'/%3E%3C/svg%3E");
  --spy-civilian: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='16'/%3E%3Cpath d='M18 100 Q20 62 50 59 Q80 62 82 100 Z'/%3E%3C/svg%3E");
  --spy-hooded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M24 60 Q22 16 50 11 Q78 16 76 60 Q72 70 50 71 Q28 70 24 60 Z M50 31 Q38 32 38 48 Q39 60 50 62 Q61 60 62 48 Q62 32 50 31 Z'/%3E%3Cpath d='M12 100 Q18 70 50 67 Q82 70 88 100 Z'/%3E%3C/svg%3E");
  --spy-crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='4' fill='black'/%3E%3Cpath d='M50 4v22M50 74v22M4 50h22M74 50h22'/%3E%3C/svg%3E");
  --spy-fingerprint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M30 78 Q22 62 24 48 Q28 24 50 22 Q72 24 76 46 Q78 58 74 70'/%3E%3Cpath d='M36 82 Q30 66 31 52 Q34 31 50 30 Q66 31 68 50 Q69 62 64 74'/%3E%3Cpath d='M43 86 Q37 70 38 56 Q40 39 50 38 Q60 39 61 54 Q61 66 56 78'/%3E%3Cpath d='M50 88 Q45 72 45 60 Q46 46 50 46 Q54 46 54 58 Q54 68 50 80'/%3E%3Cpath d='M22 36 Q32 14 54 14 Q74 15 82 32'/%3E%3Cpath d='M18 58 Q16 44 20 38'/%3E%3Cpath d='M82 40 Q86 52 82 64'/%3E%3C/svg%3E");
}

/* --- Rubber stamp ---------------------------------------------------------- */
.spy-stamp {
  --c: var(--spy-stamp);
  display: inline-grid;
  place-items: center;
  padding: 0.25em 0.8em;
  border: 3px solid var(--c);
  border-radius: 0.4rem;
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0%), 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  color: var(--c);
  font-weight: 900;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  line-height: 1.3;
  white-space: nowrap;
  transform: rotate(var(--spy-tilt, -7deg));
  opacity: 0.88;
  text-shadow: 0 0 1px var(--c);
  background: color-mix(in srgb, var(--c) 6%, transparent);
  pointer-events: none;
  user-select: none;
}
.spy-stamp--green { --c: var(--ok-400); }
.spy-stamp--cyan { --c: var(--accent-400); }
.spy-stamp--big { font-size: clamp(1.1rem, 0.8rem + 1.6vw, 2rem); border-width: 4px; padding: 0.2em 0.7em; }
.spy-stamp.is-slam { animation: spy-slam 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes spy-slam {
  0% { opacity: 0; transform: rotate(var(--spy-tilt, -7deg)) scale(2.6); }
  60% { opacity: 0.95; transform: rotate(var(--spy-tilt, -7deg)) scale(0.94); }
  100% { opacity: 0.88; transform: rotate(var(--spy-tilt, -7deg)) scale(1); }
}

/* --- Case-file tab: sits on the top edge of a frame ----------------------------- */
.spy-file {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 1px dashed rgb(124 196 255 / 22%);
}
.spy-file__tab { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-dim); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; }
.spy-file__tab b { color: var(--accent-300); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; unicode-bidi: isolate; }
:lang(fa) .spy-file__tab b { font-family: var(--font-sans); }
.spy-print { position: absolute; inline-size: 9rem; aspect-ratio: 1; background: rgb(124 196 255 / 7%); -webkit-mask: var(--spy-fingerprint) center / contain no-repeat; mask: var(--spy-fingerprint) center / contain no-repeat; pointer-events: none; }

/* --- Redaction: a black bar that peels off the text underneath ---------------------- */
.spy-redact { position: relative; display: inline-block; }
.spy-redact::after {
  content: '';
  position: absolute;
  inset: 0.08em -0.15em;
  background: #000;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 6%);
  transform-origin: var(--spy-from, left) center;
  animation: spy-peel 900ms cubic-bezier(0.7, 0, 0.2, 1) var(--spy-delay, 300ms) forwards;
}
:dir(rtl) .spy-redact::after { --spy-from: right; }
@keyframes spy-peel { to { transform: scaleX(0); } }
.spy-bar { display: inline-block; inline-size: var(--w, 4em); block-size: 0.85em; vertical-align: -0.08em; border-radius: 2px; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); }

/* --- Operation name ------------------------------------------------------------- */
.spy-op { display: grid; justify-items: center; gap: 0.1rem; }
.spy-op__label { color: var(--text-dim); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; }
.spy-op__name { color: var(--text); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); font-weight: 900; letter-spacing: 0.02em; }
.spy-op__name:lang(en) { text-transform: uppercase; letter-spacing: 0.08em; }

/* --- Radar sweep: drop inside any round element ---------------------------------- */
.spy-radar {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 32%, rgb(34 211 238 / 10%) 32.5% 33.5%, transparent 34% 64%, rgb(34 211 238 / 10%) 64.5% 65.5%, transparent 66%),
    linear-gradient(90deg, transparent 49.6%, rgb(34 211 238 / 12%) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(0deg, transparent 49.6%, rgb(34 211 238 / 12%) 49.6% 50.4%, transparent 50.4%);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.spy-radar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(34 211 238 / 0%) 0deg, rgb(34 211 238 / 0%) 290deg, rgb(34 211 238 / 32%) 358deg, rgb(103 232 249 / 70%) 360deg);
  animation: spy-sweep 2.4s linear infinite;
}
.spy-radar.is-on { opacity: 1; }
@keyframes spy-sweep { to { transform: rotate(360deg); } }

/* --- Scanlines and the REC light ------------------------------------------------ */
.spy-scan { position: relative; isolation: isolate; }
.spy-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / 1.6%) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.spy-scan > * { position: relative; z-index: 1; }
.spy-rec { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--spy-red); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; }
.spy-rec::before { content: ''; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--spy-red); box-shadow: 0 0 8px var(--spy-red); animation: spy-blink 1.1s steps(2, start) infinite; }
@keyframes spy-blink { to { visibility: hidden; } }

/* --- Typed text: the caret that follows game-kit's typeText() --------------------- */
.spy-typing::after { content: '▌'; margin-inline-start: 0.05em; color: var(--accent-300); animation: spy-blink 0.8s steps(2, start) infinite; }

/* --- Signal noise for "signal lost" ---------------------------------------------- */
.spy-static { position: absolute; inset: 0; pointer-events: none; opacity: 0.35; background: repeating-radial-gradient(circle at 17% 32%, rgb(255 255 255 / 25%) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 73% 61%, rgb(255 255 255 / 18%) 0 1px, transparent 1px 4px); animation: spy-noise 160ms steps(3) infinite; }
@keyframes spy-noise { 33% { transform: translate(-2%, 1%); } 66% { transform: translate(1%, -2%); } }

/* --- Silhouettes for revealed cards ------------------------------------------------ */
.spy-figure { position: absolute; inset: 8% 18% 0; background: currentcolor; -webkit-mask: var(--spy-agent) center bottom / contain no-repeat; mask: var(--spy-agent) center bottom / contain no-repeat; pointer-events: none; }
.spy-figure[data-kind='n'] { -webkit-mask-image: var(--spy-civilian); mask-image: var(--spy-civilian); }
.spy-figure[data-kind='x'] { -webkit-mask-image: var(--spy-hooded); mask-image: var(--spy-hooded); }
.spy-cross { position: absolute; inset: 14%; background: currentcolor; -webkit-mask: var(--spy-crosshair) center / contain no-repeat; mask: var(--spy-crosshair) center / contain no-repeat; pointer-events: none; }

/* Persian (and Sorani) letters join: never letter-space them, and keep them in Vazirmatn. */
:lang(fa) .spy-stamp, :lang(fa) .spy-rec, :lang(fa) .spy-file__tab, :lang(fa) .spy-op__label,
:lang(ckb) .spy-stamp, :lang(ckb) .spy-rec { letter-spacing: 0; font-family: var(--font-sans); }

@media (prefers-reduced-motion: reduce) {
  .spy-radar::before, .spy-rec::before, .spy-typing::after, .spy-static { animation: none; }
  .spy-redact::after { animation-duration: 1ms; animation-delay: 0ms; }
  .spy-stamp.is-slam { animation: none; }
}