/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*body {*/
/*  background-color: white;*/
/*  color: black;*/
/*  font-family: Verdana;*/
/*}*/

/* style.css - Neocities-friendly, simple, playful */

:root {
  /* Defaults (overridden by body theme classes) */
  --bg: #0f1226;
  --card: rgba(255, 255, 255, 0.08);
  --text: #f6f7fb;
  --muted: rgba(246, 247, 251, 0.75);
  --border: rgba(255, 255, 255, 0.14);

  --accent: #5eead4;   /* teal */
  --accent2: #a78bfa;  /* purple */

  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --radius: 18px;
  --maxw: 980px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* =========================
   Hover-to-reveal joke box
   ========================= */

.joke {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.joke .prompt {
  color: var(--muted);
  margin: 0;
}

/* The hidden/reveal square */
.reveal-box {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Make it obvious it's interactive */
.reveal-box button {
  width: 100%;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* Top area with the joke setup */
.reveal-top {
  padding: 16px 16px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.reveal-top strong {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.reveal-top .hint {
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
}

/* Bottom area with the hidden punchline */
.reveal-bottom {
  padding: 0 16px 16px;
}

.punchline {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 92px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.08));
  user-select: none;
}

/* The text that will be revealed */
.punchline .answer {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  padding: 0 10px;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* The overlay that hides it */
.punchline::before {
  content: "Hover (or tap) to reveal 👀";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,0.85);
  font-weight: 800;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Reveal on hover (desktop), focus/click (keyboard/mobile) */
.reveal-box:hover .punchline::before,
.reveal-box:focus-within .punchline::before {
  opacity: 0;
  transform: scale(0.98);
}

.reveal-box:hover .punchline .answer,
.reveal-box:focus-within .punchline .answer {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility: visible focus ring */
.reveal-box button:focus-visible {
  outline: 3px solid rgba(110,231,255,0.35);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Mobile: also reveal while pressing */
.reveal-box button:active .punchline::before {
  opacity: 0;
}
.reveal-box button:active .punchline .answer {
  opacity: 1;
  transform: translateY(0);
}


/* Theme: GOOD day */
body.theme-good {
  --bg: #081a18;
  --card: rgba(255, 255, 255, 0.08);
  --text: #f2fffb;
  --muted: rgba(242, 255, 251, 0.78);
  --border: rgba(255, 255, 255, 0.16);
  --accent: #34d399;   /* green */
  --accent2: #60a5fa;  /* blue */
}

/* Theme: BAD day (cheer-up colors) */
body.theme-bad {
  --bg: #1a0b12;
  --card: rgba(255, 255, 255, 0.09);
  --text: #fff6fb;
  --muted: rgba(255, 246, 251, 0.78);
  --border: rgba(255, 255, 255, 0.16);
  --accent: #fb7185;   /* rosy */
  --accent2: #fbbf24;  /* warm yellow */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* Soft background glow (simple, not fragile) */
.bg-glow {
  position: fixed;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 20% 20%, rgba(94, 234, 212, 0.20), transparent 55%),
    radial-gradient(closest-side at 80% 30%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(closest-side at 50% 90%, rgba(255, 255, 255, 0.06), transparent 60%);
  filter: blur(10px);
}

.container {
  width: min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
}

.header {
  padding: 28px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 800;
  letter-spacing: -0.02em;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.badge {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
}

main {
  padding: 24px 0 60px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.hero-title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 65ch;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255,255,255,0.05);
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(255,255,255,0.26);
}

.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: rgba(0,0,0,0.85);
}

.small {
  font-size: 14px;
  color: var(--muted);
}

.list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.footer {
  padding: 18px 0 38px;
  color: var(--muted);
  font-size: 14px;
}

.codebox {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  padding: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
}