/*
Theme Name: SpinTheWheelOfNames
Theme URI: https://example.com/
Author: Generated from Google AI Studio export
Description: A Genesis-inspired wheel + teacher tools theme with Customizer-controlled ad slots.
Version: 1.0.1
License: GPLv2 or later
Text Domain: spinthewheelofnames
*/

/* Theme shell is Tailwind-CDN driven. Keep tiny safety styles here. */
html, body { margin: 0; padding: 0; }
#root { min-height: 100vh; }

/* Overflow safety (prevents the "space to the right" issue) */
html { width: 100%; overflow-x: hidden; }
body { width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
canvas { max-width: 100%; }

/* Hide scrollbars for x-scroll navs */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* Minimal “prose” typography (Tailwind CDN doesn't include the typography plugin by default)
   IMPORTANT: do NOT use :where() here because it has zero specificity and Tailwind's preflight can win,
   causing paragraphs/headings to look squished.
*/
.prose { color: #111827; }
.prose p { margin: 0 0 1rem 0; line-height: 1.85; }
.prose h2 { margin: 1.75rem 0 0.75rem 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }
.prose h3 { margin: 1.25rem 0 0.5rem 0; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; }
.prose ul, .prose ol { margin: 0 0 1rem 1.25rem; line-height: 1.8; }
.prose li { margin: 0.25rem 0; }
.prose a { color: #111827; text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 4px solid #111827; background: #f9fafb; border-radius: 0.75rem; }
.prose img { max-width: 100%; height: auto; border-radius: 1rem; }


/* Visible thin scrollbar for the wheel tabs */
.wheel-tabs-scroll {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  -webkit-overflow-scrolling: touch;
}
.wheel-tabs-scroll::-webkit-scrollbar {
  height: 6px;
}
.wheel-tabs-scroll::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 9999px;
}
.wheel-tabs-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 9999px;
}
.wheel-tabs-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}


.wheel-scroll-hint {
  animation: spwHintPulse 1.8s ease-in-out infinite;
}

@keyframes spwHintPulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}