/* ===============================
   The Tool Bakery – Yes/No & Maybe Generator
   Fun, accessible, theme-safe styles
   =============================== */

:root {
  --ttb-yn-bg: #ffffff;
  --ttb-yn-card: #ffffff;
  --ttb-yn-text: #1f2937;         /* slate-800 */
  --ttb-yn-muted: #6b7280;        /* slate-500 */
  --ttb-yn-primary: #7c3aed;      /* violet-600 */
  --ttb-yn-primary-press: #6d28d9;/* violet-700 */
  --ttb-yn-accent: #06b6d4;       /* cyan-500 */
  --ttb-yn-ring: rgba(124,58,237,.35);

  --ttb-yn-yes: #10b981;          /* emerald-500 */
  --ttb-yn-no: #ef4444;           /* red-500 */
  --ttb-yn-maybe: #f59e0b;        /* amber-500 */

  --ttb-yn-radius: 1.25rem;
  --ttb-yn-shadow: 0 10px 25px rgba(31,41,55,.12);
  --ttb-yn-shadow-press: 0 6px 16px rgba(31,41,55,.18);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --ttb-yn-bg: #0b1220;         /* deep navy */
    --ttb-yn-card: #0f172a;       /* slate-900 */
    --ttb-yn-text: #e5e7eb;       /* slate-200 */
    --ttb-yn-muted: #9ca3af;      /* slate-400 */
    --ttb-yn-ring: rgba(56,189,248,.35);
    --ttb-yn-shadow: 0 10px 25px rgba(0,0,0,.35);
    --ttb-yn-shadow-press: 0 6px 16px rgba(0,0,0,.5);
  }
}

/* Page-level backdrop (subtle confetti-esque glow) */
.ttb-rng-container {
  --_pad: clamp(1rem, 3vw, 2rem);
  isolation: isolate;
  contain: layout paint; /* reduce layout bleed */
  max-width: 680px;
  margin: 32px auto;
  padding: calc(var(--_pad) + 4px);
  border-radius: calc(var(--ttb-yn-radius) + 6px);
  background:
    radial-gradient(1200px 300px at 20% -20%, rgba(6,182,212,.20), transparent 60%),
    radial-gradient(900px 250px at 110% 10%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

/* Card */
.ttb-rng-container > * {
  box-sizing: border-box;
}

.ttb-rng-container h2 {
  margin: 0 0 14px 0;
  font-size: clamp(1.25rem, 1.2rem + 1.5vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;
  text-wrap: balance;
}

.ttb-rng-container .ttb-yn-generate,
.ttb-rng-container .ttb-yn-result {
  display: block;
  width: 100%;
}

.ttb-rng-container .ttb-yn-generate {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;

  border: 0;
  border-radius: calc(var(--ttb-yn-radius) + 6px);
  padding: clamp(0.9rem, 0.8rem + 0.6vw, 1.2rem) clamp(1.1rem, 1rem + 1vw, 1.6rem);

  background:
    radial-gradient(200% 100% at 0% 0%, rgba(255,255,255,.25), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, var(--ttb-yn-primary), var(--ttb-yn-accent));
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: none;
  line-height: 1;
  box-shadow: var(--ttb-yn-shadow);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.ttb-rng-container .ttb-yn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(31,41,55,.16);
  filter: saturate(1.05) brightness(1.02);
}

.ttb-rng-container .ttb-yn-generate:active {
  transform: translateY(0);
  box-shadow: var(--ttb-yn-shadow-press);
  background:
    radial-gradient(200% 100% at 100% 100%, rgba(0,0,0,.12), rgba(0,0,0,0) 40%),
    linear-gradient(135deg, var(--ttb-yn-primary-press), var(--ttb-yn-accent));
}

.ttb-rng-container .ttb-yn-generate:focus {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--ttb-yn-ring),
    var(--ttb-yn-shadow);
}

/* Result card */
.ttb-rng-container .ttb-yn-result {
  margin-top: 16px;
  text-align: center;
  background: var(--ttb-yn-card);
  color: var(--ttb-yn-text);
  border-radius: var(--ttb-yn-radius);
  padding: clamp(1.2rem, 1rem + 2vw, 2rem);
  box-shadow: var(--ttb-yn-shadow);
  border: 1px solid rgba(0,0,0,.06);
  font-size: clamp(2rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 900;
  letter-spacing: .4px;
  line-height: 1;
  min-height: clamp(72px, 10vw, 110px);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

/* Fun shimmering edge when updated (JS can toggle .is-fresh for ~800ms) */
.ttb-rng-container .ttb-yn-result.is-fresh::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(6,182,212,.25) 120deg,
    rgba(124,58,237,.25) 240deg,
    transparent 360deg
  );
  animation: ttb-yn-spin 1.1s linear both;
  pointer-events: none;
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 0);
  border-radius: inherit;
}

@keyframes ttb-yn-spin {
  to { transform: rotate(1turn); }
}

/* Pop-in animation when text changes (JS can toggle .pop) */
.ttb-rng-container .ttb-yn-result.pop {
  animation: ttb-yn-pop .28s ease both;
}
@keyframes ttb-yn-pop {
  0% { transform: scale(.92); filter: brightness(1.02); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Optional semantic color states your JS can add */
.ttb-rng-container .ttb-yn-result.is-yes {
  color: var(--ttb-yn-yes);
  text-shadow: 0 2px 0 rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
}
.ttb-rng-container .ttb-yn-result.is-no {
  color: var(--ttb-yn-no);
  text-shadow: 0 2px 0 rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
}
.ttb-rng-container .ttb-yn-result.is-maybe {
  color: var(--ttb-yn-maybe);
  text-shadow: 0 2px 0 rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.25);
}

/* Subtle caption style if you ever add helper text */
.ttb-rng-container .ttb-yn-caption {
  margin-top: 10px;
  text-align: center;
  color: var(--ttb-yn-muted);
  font-size: .95rem;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ttb-rng-container .ttb-yn-generate,
  .ttb-rng-container .ttb-yn-result,
  .ttb-rng-container .ttb-yn-result.is-fresh::after {
    transition: none !important;
    animation: none !important;
  }
}