/* =========================================================
   ACCURATE CLAUDE ISSUE TRACKER
   One theme, one animation, one phrase per page load.
   ========================================================= */

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

/* Force the page to render in light mode regardless of OS / browser /
   reader-extension preference. Without this, Dark Reader and similar
   extensions invert our carefully-designed surfaces. */
html { color-scheme: only light; }

:root {
  --bg: #fafafa;
  --fg: #111;
  --accent: #111;
  --question-color: var(--fg);
  --question-font: -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --phrase-font: -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --phrase-weight: 800;
  --phrase-letter-spacing: -0.01em;
  --phrase-size: clamp(64px, 14vw, 220px);
  --phrase-stroke: transparent;
  --phrase-shadow: none;
  --bg-image: none;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  background-image: var(--bg-image);
  background-size: cover;
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--question-font);
  -webkit-font-smoothing: antialiased;
}
html { height: 100%; }
body { min-height: 100dvh; height: 100dvh; overflow: hidden; }

body {
  display: grid;
  grid-template-rows: auto 1fr;
  perspective: 1200px;
}

/* ---------- HEADER ---------- */
.page-header {
  position: relative;
  z-index: 5;
  padding: clamp(12px, 2.5vw, 28px) clamp(12px, 3vw, 32px) clamp(8px, 1.5vw, 16px);
  text-align: center;
}

.brand-mark {
  font-family: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 1.4vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: clamp(4px, 0.6vw, 8px);
}

.question {
  font-family: var(--question-font);
  font-weight: 600;
  font-size: clamp(15px, 2.4vw, 28px);
  letter-spacing: 0.02em;
  color: var(--question-color);
  opacity: 0.9;
  line-height: 1.2;
}

/* During phase-serious the brand mark is real & visible.
   After reveal, it stays subtle but the theme can take over coloring. */
body.phase-serious {
  --bg: #fafafa;
  --fg: #111;
  --question-color: #222;
  --question-font: "Georgia", "Times New Roman", serif;
}
body.phase-serious .question {
  font-weight: 400;
  opacity: 1;
  font-size: clamp(18px, 3.6vw, 38px);
}
body.phase-revealed .brand-mark { opacity: 0.3; }

/* ---------- STAGE ---------- */
.stage {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow-y: auto;            /* safety net: scroll if content somehow overflows */
  overflow-x: hidden;
  min-height: 0;
}
/* Hide scrollbar chrome but keep scroll affordance. */
.stage::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
.stage { scrollbar-width: none; }
/* In phase-revealed (the goofy answer) we want no scrollbar gutter at all. */
body.phase-revealed .stage { overflow: hidden; }

.phrase {
  font-family: var(--phrase-font);
  font-weight: var(--phrase-weight);
  font-size: var(--phrase-size);
  letter-spacing: var(--phrase-letter-spacing);
  color: var(--fg);
  text-align: center;
  line-height: 1.05;
  user-select: none;
  will-change: transform, opacity, filter;
  -webkit-text-stroke: var(--phrase-stroke);
  text-shadow: var(--phrase-shadow);
  transform-style: preserve-3d;
  max-width: 94vw;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Phrases with literal "\n" use pre-line so the break is honored. */
.phrase.preserve-breaks { white-space: pre-line; }

/* ---------- SERIOUS PANEL ---------- */
.serious-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  width: 100%;
  max-width: min(900px, 92vw);
}

.status-card {
  width: min(560px, 92vw);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.4vw, 14px);
  font-family: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  font-size: clamp(12px, 1.6vw, 15px);
  border: 1px solid #e5e5e5;
  border-radius: clamp(10px, 2vw, 18px);
  padding: clamp(14px, 2.4vw, 24px) clamp(16px, 2.8vw, 28px);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.04);
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #444;
}
.status-key { color: #777; }
.status-val { color: #222; display: inline-flex; align-items: center; gap: 6px; }
.status-val.mono { font-family: "Menlo", "Courier New", monospace; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok {
  background: #00a86b;
  box-shadow: 0 0 0 3px rgba(0,168,107,0.18);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(0,168,107,0.18); }
  50%     { box-shadow: 0 0 0 6px rgba(0,168,107,0.10); }
}

/* THE BIG CHECK BUTTON — sized by min(vw, vh) so it never overflows
   the viewport on short or narrow screens. */
.check-btn {
  font-family: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: clamp(44px, min(11vw, 18vh), 140px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  padding: clamp(20px, min(5.5vw, 7vh), 64px) clamp(28px, min(8vw, 10vh), 120px);
  width: min(820px, 92vw);
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 60%, #1e3a8a 100%);
  color: #fff;
  border: 0;
  border-radius: clamp(20px, 3vw, 32px);
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  text-align: center;
  position: relative;
  isolation: isolate;
  /* Multi-layer shadow stack:
     1. Inner highlight (top edge glossy)
     2. Inner darken (bottom edge)
     3. Solid color "depth" pushed under the button (3D press effect)
     4. Wide colored glow (visible on dark bg)
     5. Wide black ambient (visible on light bg)
     6. White outer halo (separates from any bg) */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -3px 0 rgba(0,0,0,0.25),
    0 12px 0 #1e3a8a,
    0 16px 36px rgba(37,99,235,0.55),
    0 28px 80px rgba(0,0,0,0.35),
    0 0 0 4px rgba(255,255,255,0.92),
    0 0 0 7px rgba(0,0,0,0.85);
  transition: transform 0.12s, box-shadow 0.18s, filter 0.2s;
}
.check-btn:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -3px 0 rgba(0,0,0,0.25),
    0 15px 0 #1e3a8a,
    0 22px 48px rgba(37,99,235,0.65),
    0 36px 100px rgba(0,0,0,0.4),
    0 0 0 4px rgba(255,255,255,0.95),
    0 0 0 7px rgba(0,0,0,0.9);
}
.check-btn:active {
  transform: translateY(8px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -3px 0 rgba(0,0,0,0.25),
    0 4px 0 #1e3a8a,
    0 8px 22px rgba(37,99,235,0.5),
    0 0 0 4px rgba(255,255,255,0.92),
    0 0 0 7px rgba(0,0,0,0.85);
}
.check-btn[disabled] { opacity: 0.92; cursor: progress; }

.status-fineprint {
  font-family: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  font-size: clamp(10px, 1.3vw, 12px);
  color: #aaa;
  letter-spacing: 0.06em;
  text-align: center;
  max-width: 92vw;
  line-height: 1.5;
}

/* Phase visibility */
body.phase-serious  .phrase[hidden],
body.phase-serious  .refresh-hint[hidden] { display: none !important; }
body.phase-revealed .serious-panel       { display: none; }
body.phase-revealed .phrase              { display: block; }

/* Tiny / short screens — keep the button king, drop ancillary chrome. */
@media (max-width: 480px) {
  .status-card { font-size: 12px; }
  .status-key, .status-val { font-size: 12px; }
}
/* Short screens (any width): hide the status card so button + fineprint fit. */
@media (max-height: 720px) {
  .status-card { display: none; }
  .serious-panel { gap: clamp(16px, 3vh, 32px); }
}
/* Really short: also drop the fineprint. */
@media (max-height: 560px) {
  .status-fineprint { display: none; }
  .page-header { padding-top: clamp(8px, 1.5vh, 16px); padding-bottom: 4px; }
  body.phase-serious .question { font-size: clamp(15px, 2.6vh, 26px); }
  .brand-mark { font-size: 10px; margin-bottom: 2px; }
}

/* ---------- DECORATION LAYER ---------- */
.decoration-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.deco-emoji {
  position: absolute;
  top: -10vh;
  font-size: clamp(20px, 3.5vw, 42px);
  user-select: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  animation: decoFall linear forwards;
}
@keyframes decoFall {
  0%   { transform: translateY(0)    rotate(0)    scale(0.9); opacity: 0;   }
  10%  { opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg) scale(1.05); opacity: 0.85; }
}

/* ---------- CORNER UI ---------- */
.corner-actions {
  position: fixed;
  bottom: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
}
.corner-actions[hidden] { display: none; }

.refresh-hint,
.share-btn {
  font-family: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  /* Opaque pill so contrast is guaranteed on any theme bg. */
  background: #ffffff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 9px 16px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.4) inset;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  opacity: 0.92;
  white-space: nowrap;
}
.refresh-hint:hover,
.share-btn:hover  { opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.5) inset; }
.refresh-hint:active,
.share-btn:active { transform: translateY(1px); }

/* Dark themes get the inverted chip so it still stands off the bg. */
body.dark-ui .refresh-hint,
body.dark-ui .share-btn {
  background: #1a1a1a;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset;
}

/* ---------- SHARE POPOVER (desktop fallback when navigator.share missing) */
.share-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 220px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: -apple-system, "Inter", "Helvetica Neue", sans-serif;
}
.share-popover[hidden] { display: none; }

.share-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 6px 4px;
}
body.dark-ui .share-divider { background: rgba(255,255,255,0.12); }

.share-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.share-opt:hover { background: rgba(0,0,0,0.06); }

.share-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.ico-x   { background: #000; }
.ico-wa  { background: #25d366; color: #25d366; box-shadow: inset 0 0 0 22px #25d366; }
.ico-fb  { background: #1877f2; }
.ico-li  { background: #0a66c2; font-size: 10px; }
.ico-tg  { background: #229ed9; }
.ico-rd  { background: #ff4500; color: #ff4500; box-shadow: inset 0 0 0 22px #ff4500; }
.ico-em  { background: #555; font-weight: 600; }
.ico-cp  { background: rgba(0,0,0,0.08); color: #444; }
body.dark-ui .ico-cp { background: rgba(255,255,255,0.15); color: #fff; }

.share-x:hover    { background: rgba(0,0,0,0.85); color: #fff; }
.share-wa:hover   { background: #25d366; color: #fff; }
.share-fb:hover   { background: #1877f2; color: #fff; }
.share-li:hover   { background: #0a66c2; color: #fff; }
.share-tg:hover   { background: #229ed9; color: #fff; }
.share-rd:hover   { background: #ff4500; color: #fff; }
.share-em:hover   { background: #555;    color: #fff; }
.share-copy.copied { background: #00a86b; color: #fff; }

body.dark-ui .share-popover {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}
body.dark-ui .share-opt        { color: #fff; }
body.dark-ui .share-opt:hover  { background: rgba(255,255,255,0.1); }

/* =========================================================
   ★  ANIMATIONS  ★
   Each is a class .fx-XXX you apply to .phrase.
   ========================================================= */

@keyframes fx-spin           { to { transform: rotate(360deg); } }
.fx-spin                     { animation: fx-spin 4s linear infinite; }

@keyframes fx-spin-fast      { to { transform: rotate(720deg); } }
.fx-spin-fast                { animation: fx-spin-fast 1.4s linear infinite; }

@keyframes fx-probe          { 0%,100%{transform:scale(0.7)} 50%{transform:scale(1.25)} }
.fx-probe                    { animation: fx-probe 1.8s ease-in-out infinite; }

@keyframes fx-probe-extreme  { 0%,100%{transform:scale(0.25)} 50%{transform:scale(1.6)} }
.fx-probe-extreme            { animation: fx-probe-extreme 1.4s ease-in-out infinite; }

@keyframes fx-pulse          { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.fx-pulse                    { animation: fx-pulse 1.6s ease-in-out infinite; }

@keyframes fx-pulse-glow     { 0%,100%{filter:drop-shadow(0 0 0 currentColor); transform:scale(1)} 50%{filter:drop-shadow(0 0 30px currentColor) drop-shadow(0 0 60px currentColor); transform:scale(1.05)} }
.fx-pulse-glow               { animation: fx-pulse-glow 1.6s ease-in-out infinite; }

@keyframes fx-heartbeat      { 0%,100%{transform:scale(1)} 14%{transform:scale(1.18)} 28%{transform:scale(1)} 42%{transform:scale(1.18)} 70%{transform:scale(1)} }
.fx-heartbeat                { animation: fx-heartbeat 1.4s ease-in-out infinite; }

@keyframes fx-shake          { 0%,100%{transform:translate(-2px,1px)} 25%{transform:translate(2px,-1px)} 50%{transform:translate(-1px,2px)} 75%{transform:translate(1px,-2px)} }
.fx-shake                    { animation: fx-shake 0.06s linear infinite; }

@keyframes fx-jiggle         { 0%,100%{transform:rotate(-1.5deg)} 50%{transform:rotate(1.5deg)} }
.fx-jiggle                   { animation: fx-jiggle 0.5s ease-in-out infinite; }

@keyframes fx-wobble         { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
.fx-wobble                   { animation: fx-wobble 1.0s ease-in-out infinite; }

@keyframes fx-flip-x         { to { transform: rotateX(360deg); } }
.fx-flip-x                   { animation: fx-flip-x 2s linear infinite; }

@keyframes fx-flip-y         { to { transform: rotateY(360deg); } }
.fx-flip-y                   { animation: fx-flip-y 2s linear infinite; }

@keyframes fx-flip-xy        { to { transform: rotateX(360deg) rotateY(360deg); } }
.fx-flip-xy                  { animation: fx-flip-xy 3s linear infinite; }

@keyframes fx-tada {
  0%,100% { transform: scale(1) rotate(0); }
  10%,20% { transform: scale(0.9) rotate(-3deg); }
  30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); }
  40%,60%,80%      { transform: scale(1.1) rotate(-3deg); }
}
.fx-tada                     { animation: fx-tada 1.6s ease-in-out infinite; }

@keyframes fx-jello {
  0%,100% { transform: skew(0,0); }
  22%     { transform: skew(-10deg, -10deg); }
  33%     { transform: skew(5deg, 5deg); }
  44%     { transform: skew(-2deg,-2deg); }
  55%     { transform: skew(1deg, 1deg); }
}
.fx-jello                    { animation: fx-jello 1.6s ease-in-out infinite; }

@keyframes fx-rubber         { 0%,100%{transform:scale(1,1)} 30%{transform:scale(1.25,0.75)} 60%{transform:scale(0.85,1.15)} }
.fx-rubber                   { animation: fx-rubber 1.0s ease-in-out infinite; }

@keyframes fx-bounce-y       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }
.fx-bounce-y                 { animation: fx-bounce-y 0.8s cubic-bezier(.5,0,.5,1) infinite; }

@keyframes fx-levitate       { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(1deg)} }
.fx-levitate                 { animation: fx-levitate 3s ease-in-out infinite; }

@keyframes fx-breathe        { 0%,100%{transform:scale(1); opacity:0.9} 50%{transform:scale(1.03); opacity:1} }
.fx-breathe                  { animation: fx-breathe 4s ease-in-out infinite; }

@keyframes fx-fade-in        { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fx-fade-in                  { animation: fx-fade-in 0.8s cubic-bezier(.2,.8,.2,1) both; }

@keyframes fx-zoom-in        { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.fx-zoom-in                  { animation: fx-zoom-in 0.7s cubic-bezier(.2,.8,.2,1) both; }

@keyframes fx-pop            { 0%{transform:scale(0)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
.fx-pop                      { animation: fx-pop 0.6s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes fx-slam           { 0%{transform:scale(8); opacity:0} 50%{opacity:1} 80%{transform:scale(0.92)} 100%{transform:scale(1); opacity:1} }
.fx-slam                     { animation: fx-slam 0.6s cubic-bezier(.4,0,.2,1) both; }

@keyframes fx-glitch {
  0%,100% { transform: translate(0); filter: hue-rotate(0); }
  20% { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
  40% { transform: translate(3px, -2px); filter: hue-rotate(180deg); }
  60% { transform: translate(-2px, 2px); filter: hue-rotate(270deg); }
  80% { transform: translate(2px, -1px); filter: hue-rotate(360deg); }
}
.fx-glitch                   { animation: fx-glitch 0.18s steps(1) infinite; }

@keyframes fx-chromatic {
  0%,100% { text-shadow: 4px 0 #ff0066, -4px 0 #00ffff; }
  50%     { text-shadow:-4px 0 #ff0066,  4px 0 #00ffff; }
}
.fx-chromatic                { animation: fx-chromatic 0.18s steps(2) infinite; }

@keyframes fx-hue            { to { filter: hue-rotate(360deg); } }
.fx-hue                      { animation: fx-hue 4s linear infinite; }

@keyframes fx-flicker {
  0%,18%,22%,25%,53%,57%,100% { opacity:1; filter: drop-shadow(0 0 18px currentColor); }
  20%,24%,55% { opacity:0.4; filter: none; }
}
.fx-flicker                  { animation: fx-flicker 2.4s linear infinite; }

@keyframes fx-blink          { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.fx-blink                    { animation: fx-blink 1s steps(1) infinite; }

@keyframes fx-perspective-y  { to { transform: rotateY(360deg); } }
.fx-perspective-y            { animation: fx-perspective-y 5s linear infinite; }

@keyframes fx-yank-3d        { 0%,100%{transform:perspective(600px) rotateY(0) translateZ(0)} 50%{transform:perspective(600px) rotateY(-50deg) translateZ(-200px)} }
.fx-yank-3d                  { animation: fx-yank-3d 2.4s ease-in-out infinite; }

@keyframes fx-shimmer        { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.6) saturate(1.3)} }
.fx-shimmer                  { animation: fx-shimmer 2.4s ease-in-out infinite; }

@keyframes fx-drift          { 0%{transform:translateX(-5vw) rotate(-2deg)} 100%{transform:translateX(5vw) rotate(2deg)} }
.fx-drift                    { animation: fx-drift 6s ease-in-out infinite alternate; }

@keyframes fx-typewriter-char { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fx-typewriter > span        { display: inline-block; opacity: 0; animation: fx-typewriter-char 0.06s linear forwards; }

@keyframes fx-rise-still     { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.fx-rise-still               { animation: fx-rise-still 1.2s cubic-bezier(.2,.8,.2,1) both; }

@keyframes fx-stamp          { 0%{transform:scale(3); opacity:0} 50%{opacity:1} 100%{transform:scale(1) rotate(-4deg)} }
.fx-stamp                    { animation: fx-stamp 0.4s cubic-bezier(.2,1.6,.4,1) both; }

@keyframes fx-cursor-blink   { 50% { opacity: 0; } }
.fx-cursor::after            { content: '▮'; margin-left: 0.1em; animation: fx-cursor-blink 0.7s steps(1) infinite; }

@keyframes fx-rainbow-text {
  0%   { color: hsl(0,   100%, 55%); }
  20%  { color: hsl(60,  100%, 55%); }
  40%  { color: hsl(150, 100%, 55%); }
  60%  { color: hsl(220, 100%, 55%); }
  80%  { color: hsl(290, 100%, 55%); }
  100% { color: hsl(360, 100%, 55%); }
}
.fx-rainbow-text             { animation: fx-rainbow-text 2s linear infinite; }

/* =========================================================
   ★  THEMES  ★
   Each is a body class theme-XXX that overrides CSS vars
   and (when needed) adds extras.
   ========================================================= */

/* ---- 1: GEOCITIES ---- */
body.theme-geocities {
  --bg: #ffff00;
  --fg: #ff00aa;
  --accent: #00ffff;
  --question-color: #000;
  --question-font: "Comic Sans MS", "Marker Felt", "Chalkboard SE", cursive;
  --phrase-font: "Comic Sans MS", "Marker Felt", "Chalkboard SE", cursive;
  --phrase-weight: 900;
  --phrase-shadow: 4px 4px 0 #00ffff, -4px -4px 0 #ff00ff, 0 0 30px #ff00ff;
  --bg-image: repeating-linear-gradient(45deg, transparent 0 30px, rgba(255,0,255,0.08) 30px 32px);
}

/* ---- 2: BRUTALIST ---- */
body.theme-brutalist {
  --bg: #ffffff;
  --fg: #000000;
  --accent: #ff0000;
  --question-color: #000;
  --question-font: "Helvetica Neue", "Inter", "Arial", sans-serif;
  --phrase-font: "Helvetica Neue", "Arial Black", "Helvetica", sans-serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: -0.06em;
  --phrase-size: clamp(80px, 18vw, 280px);
}

/* ---- 3: TERMINAL ---- */
body.theme-terminal {
  --bg: #050a05;
  --fg: #00ff66;
  --accent: #00ff66;
  --question-color: #00ff66;
  --question-font: "Menlo", "Courier New", monospace;
  --phrase-font: "Menlo", "Courier New", monospace;
  --phrase-weight: 700;
  --phrase-letter-spacing: 0;
  --phrase-shadow: 0 0 10px rgba(0,255,102,0.6);
}
body.theme-terminal::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,255,102,0.06) 0 1px, transparent 1px 3px);
}

/* ---- 4: VAPORWAVE ---- */
body.theme-vaporwave {
  --bg: #1a0033;
  --fg: #ff71ce;
  --accent: #01cdfe;
  --question-color: #01cdfe;
  --question-font: "Optima", "Avenir Next", "Helvetica Neue", sans-serif;
  --phrase-font: "Optima", "Avenir Next", "Helvetica Neue", sans-serif;
  --phrase-weight: 300;
  --phrase-letter-spacing: 0.5em;
  --phrase-shadow: 6px 6px 0 #01cdfe, -6px -6px 0 #b967ff, 0 0 50px rgba(255,113,206,0.5);
  --bg-image: linear-gradient(180deg, #1a0033 0%, #4b0082 40%, #ff71ce 70%, #ffd6e0 100%);
}

/* ---- 5: NEWSPAPER ---- */
body.theme-newspaper {
  --bg: #f3eedf;
  --fg: #1a1a1a;
  --question-color: #444;
  --question-font: "Georgia", "Times New Roman", serif;
  --phrase-font: "Georgia", "Times New Roman", serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: -0.02em;
}

/* ---- 6: COMIC ---- */
body.theme-comic {
  --bg: #ffeb3b;
  --fg: #d50000;
  --question-color: #000;
  --question-font: "Bangers", "Impact", "Anton", sans-serif;
  --phrase-font: "Impact", "Anton", "Bangers", sans-serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: 0.04em;
  --phrase-stroke: 4px #000;
  --phrase-shadow: 8px 8px 0 #000;
  --bg-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.18) 1px, transparent 1.5px);
}
body.theme-comic { background-size: 14px 14px; }

/* ---- 7: NEON / CYBERPUNK ---- */
body.theme-neon {
  --bg: #0a0014;
  --fg: #ff00ff;
  --accent: #00ffff;
  --question-color: #00ffff;
  --question-font: "Helvetica Neue", "Inter", sans-serif;
  --phrase-font: "Helvetica Neue", "Inter", sans-serif;
  --phrase-weight: 800;
  --phrase-letter-spacing: 0.18em;
  --phrase-shadow: 0 0 10px #ff00ff, 0 0 24px #ff00ff, 0 0 60px rgba(255,0,255,0.5);
}

/* ---- 8: PASTEL ---- */
body.theme-pastel {
  --bg: #ffd6e7;
  --fg: #ffffff;
  --question-color: #ad6b8b;
  --question-font: "Avenir Next", "Quicksand", -apple-system, sans-serif;
  --phrase-font: "Avenir Next", "Quicksand", -apple-system, sans-serif;
  --phrase-weight: 800;
  --phrase-shadow: 0 6px 20px rgba(173,107,139,0.3), 0 1px 0 #fff;
  --bg-image: radial-gradient(circle at 30% 20%, #fff 0%, transparent 35%), radial-gradient(circle at 80% 75%, #fff8e0 0%, transparent 40%);
}

/* ---- 9: GLITCH ---- */
body.theme-glitch {
  --bg: #000;
  --fg: #fff;
  --question-color: #fff;
  --question-font: "Menlo", "Courier New", monospace;
  --phrase-font: "Helvetica Neue", "Arial Black", sans-serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: -0.02em;
}

/* ---- 10: HOLOGRAM ---- */
body.theme-hologram {
  --bg: #f0f0f5;
  --fg: transparent;
  --question-color: #555;
  --question-font: "Avenir Next", "Futura", "Helvetica Neue", sans-serif;
  --phrase-font: "Avenir Next", "Futura", "Helvetica Neue", sans-serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: 0.02em;
}
body.theme-hologram .phrase {
  background: linear-gradient(120deg, #ff00ff 0%, #00ffff 25%, #ffff00 50%, #ff00ff 75%, #00ffff 100%);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-name: fx-hologram-shift !important;
}
@keyframes fx-hologram-shift { to { background-position: 400% 0; } }
body.theme-hologram .phrase { animation: fx-hologram-shift 3s linear infinite; }

/* ---- 11: ZINE ---- */
body.theme-zine {
  --bg: #f4ede0;
  --fg: #111;
  --question-color: #333;
  --question-font: "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive;
  --phrase-font: "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive;
  --phrase-weight: 900;
  --phrase-letter-spacing: -0.02em;
  --bg-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.05) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.04) 1px, transparent 1.5px);
}
body.theme-zine { background-size: 5px 5px, 7px 7px; }
body.theme-zine .phrase { transform: rotate(-2deg); }

/* ---- 12: MEMPHIS ---- */
body.theme-memphis {
  --bg: #f6f1e8;
  --fg: #111;
  --question-color: #111;
  --question-font: "Futura", "Avenir Next", sans-serif;
  --phrase-font: "Futura", "Avenir Next", sans-serif;
  --phrase-weight: 800;
  --bg-image:
    radial-gradient(circle 80px at 15% 20%, #ff3366 99%, transparent 100%),
    radial-gradient(circle 60px at 88% 30%, #ffb800 99%, transparent 100%),
    radial-gradient(circle 100px at 80% 80%, #00b894 99%, transparent 100%),
    linear-gradient(45deg, transparent 48%, #2d2d2d 48% 52%, transparent 52%) 10% 70% / 80px 80px no-repeat;
}

/* ---- 13: ARCADE ---- */
body.theme-arcade {
  --bg: #000010;
  --fg: #ffeb3b;
  --question-color: #ff00ff;
  --question-font: "Phosphate", "Impact", "Courier New", monospace;
  --phrase-font: "Phosphate", "Impact", "Courier New", monospace;
  --phrase-weight: 900;
  --phrase-letter-spacing: 0.16em;
  --phrase-shadow: 0 0 0 2px #000, 4px 4px 0 #ff00ff, 8px 8px 0 #00ffff;
}

/* ---- 14: HANDWRITTEN ---- */
body.theme-handwritten {
  --bg: #fffce8;
  --fg: #1a3a8b;
  --question-color: #1a3a8b;
  --question-font: "Bradley Hand", "Marker Felt", "Caveat", cursive;
  --phrase-font: "Bradley Hand", "Marker Felt", "Caveat", cursive;
  --phrase-weight: 700;
  --bg-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(26,58,139,0.18) 38px 39px);
}
body.theme-handwritten .phrase { transform: rotate(-1.5deg); }

/* ---- 15: TYPEWRITER ---- */
body.theme-typewriter {
  --bg: #f8f3e6;
  --fg: #2a2a28;
  --question-color: #555;
  --question-font: "American Typewriter", "Courier New", monospace;
  --phrase-font: "American Typewriter", "Courier New", monospace;
  --phrase-weight: 700;
  --phrase-letter-spacing: 0.02em;
  --bg-image: radial-gradient(circle at 25% 25%, rgba(0,0,0,0.03) 1px, transparent 1.5px);
}
body.theme-typewriter { background-size: 4px 4px; }

/* ---- 16: MINIMAL DARK ---- */
body.theme-minimal-dark {
  --bg: #0a0a0a;
  --fg: #fafafa;
  --question-color: #777;
  --question-font: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  --phrase-font: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  --phrase-weight: 200;
  --phrase-letter-spacing: -0.02em;
}

/* ---- 17: MINIMAL LIGHT ---- */
body.theme-minimal-light {
  --bg: #fafafa;
  --fg: #0a0a0a;
  --question-color: #888;
  --question-font: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  --phrase-font: -apple-system, "Inter", "Helvetica Neue", sans-serif;
  --phrase-weight: 200;
  --phrase-letter-spacing: -0.02em;
}

/* ---- 18: 80s MALL ---- */
body.theme-mall80s {
  --bg: #1a0033;
  --fg: #fff;
  --question-color: #ff00ff;
  --question-font: "Futura", "Avenir Next", sans-serif;
  --phrase-font: "Futura", "Avenir Next", sans-serif;
  --phrase-weight: 800;
  --phrase-letter-spacing: 0.02em;
  --phrase-shadow: 0 0 0 4px #ff00ff, 0 0 0 8px #00ffff, 0 0 60px #ff00ff;
  --bg-image:
    linear-gradient(180deg, #2a004f 0%, #ff0080 60%, #ffeb3b 100%),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(255,255,255,0.08) 28px 30px);
}

/* ---- 19: CALLIGRAPHY ---- */
body.theme-calligraphy {
  --bg: #f8f1e3;
  --fg: #2c1810;
  --question-color: #5a3d2a;
  --question-font: "Apple Chancery", "Snell Roundhand", "Brush Script MT", cursive;
  --phrase-font: "Apple Chancery", "Snell Roundhand", "Brush Script MT", cursive;
  --phrase-weight: 400;
  --phrase-letter-spacing: 0;
  --phrase-size: clamp(80px, 18vw, 280px);
}

/* ---- 20: RANSOM ---- */
body.theme-ransom {
  --bg: #ffffff;
  --fg: #000;
  --question-color: #444;
  --question-font: "Times New Roman", serif;
  --phrase-font: "Helvetica Neue", sans-serif;
  --phrase-weight: 900;
}
body.theme-ransom .phrase span {
  display: inline-block;
  padding: 0 0.04em;
  margin: 0 0.02em;
}

/* ---- 21: SWISS ---- */
body.theme-swiss {
  --bg: #ed1c24;
  --fg: #fff;
  --question-color: #fff;
  --question-font: "Helvetica Neue", "Helvetica", sans-serif;
  --phrase-font: "Helvetica Neue", "Helvetica", sans-serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: -0.04em;
  --phrase-size: clamp(80px, 18vw, 260px);
}

/* ---- 22: RISOGRAPH ---- */
body.theme-riso {
  --bg: #ffd6cc;
  --fg: #1a3a8b;
  --question-color: #1a3a8b;
  --question-font: "Futura", "Avenir Next", sans-serif;
  --phrase-font: "Futura", "Avenir Next", sans-serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: -0.02em;
  --phrase-shadow: 6px 6px 0 #ff5722;
  --bg-image:
    radial-gradient(circle at 10% 20%, rgba(0,0,0,0.06) 0.7px, transparent 1px),
    radial-gradient(circle at 70% 50%, rgba(0,0,0,0.05) 0.7px, transparent 1px);
}
body.theme-riso { background-size: 4px 4px, 6px 6px; }

/* ---- 23: TABLOID ---- */
body.theme-tabloid {
  --bg: #fff200;
  --fg: #d50000;
  --question-color: #000;
  --question-font: "Impact", "Anton", sans-serif;
  --phrase-font: "Impact", "Anton", sans-serif;
  --phrase-weight: 900;
  --phrase-letter-spacing: -0.02em;
  --phrase-stroke: 3px #000;
}

/* ---- 24: CHALKBOARD ---- */
body.theme-chalkboard {
  --bg: #1d2b1d;
  --fg: #fefae0;
  --question-color: #c9d1c1;
  --question-font: "Chalkboard SE", "Marker Felt", cursive;
  --phrase-font: "Chalkboard SE", "Marker Felt", cursive;
  --phrase-weight: 700;
  --phrase-shadow: 0 0 0 transparent;
  --bg-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.02) 1px, transparent 1px);
}
body.theme-chalkboard { background-size: 3px 3px, 5px 5px; }
body.theme-chalkboard .phrase { transform: rotate(-1deg); }