/*
 * Enigma Word Search - Production Styles
 * Generated from Tailwind CSS utility classes used across the site.
 * Replaces the Tailwind CDN development script.
 */

/* === Preflight (Tailwind base reset) === */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; background-color: transparent; background-image: none; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }

/* === Container === */
.container { width: 100%; }
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* === Layout === */
.relative   { position: relative; }
.fixed      { position: fixed; }
.z-50       { z-index: 50; }
.block      { display: block; }
.inline-block { display: inline-block; }
.flex       { display: flex; }
.grid       { display: grid; }
.hidden     { display: none; }

/* Flex */
.flex-col        { flex-direction: column; }
.flex-shrink-0   { flex-shrink: 0; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.self-center     { align-self: center; }
.flex-wrap       { flex-wrap: wrap; }

/* Gap */
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* === Sizing === */
.w-3     { width: 0.75rem; }
.w-6     { width: 1.5rem; }
.w-16    { width: 4rem; }
.w-full  { width: 100%; }
.h-3     { height: 0.75rem; }
.h-6     { height: 1.5rem; }
.h-16    { height: 4rem; }
.h-auto  { height: auto; }
.max-w-2xl   { max-width: 42rem; }
.max-w-3xl   { max-width: 48rem; }
.max-w-4xl   { max-width: 56rem; }
.max-w-5xl   { max-width: 64rem; }
.max-w-6xl   { max-width: 72rem; }

/* Arbitrary max-width */
.max-w-\[380px\] { max-width: 380px; }

/* Arbitrary widths */
.w-\[80\%\] { width: 80%; }

/* === Spacing === */
.mx-auto { margin-left: auto; margin-right: auto; }
.-mx-4   { margin-left: -1rem; margin-right: -1rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-16   { margin-bottom: 4rem; }
.mt-4    { margin-top: 1rem; }
.mt-8    { margin-top: 2rem; }
.mt-12   { margin-top: 3rem; }
.ml-2    { margin-left: 0.5rem; }
.p-8     { padding: 2rem; }
.p-10    { padding: 2.5rem; }
.px-4    { padding-left: 1rem; padding-right: 1rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.py-8    { padding-top: 2rem; padding-bottom: 2rem; }
.py-12   { padding-top: 3rem; padding-bottom: 3rem; }
.py-16   { padding-top: 4rem; padding-bottom: 4rem; }
.py-20   { padding-top: 5rem; padding-bottom: 5rem; }
.pt-8    { padding-top: 2rem; }
.pt-32   { padding-top: 8rem; }
.pb-8    { padding-bottom: 2rem; }
.pb-24   { padding-bottom: 6rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
.space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }

/* === Typography === */
.text-xs   { font-size: 0.75rem; line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl  { font-size: 3rem; line-height: 1; }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.italic        { font-style: italic; }
.uppercase     { text-transform: uppercase; }
.underline     { text-decoration-line: underline; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide   { letter-spacing: 0.025em; }
.text-center     { text-align: center; }
.opacity-90      { opacity: 0.9; }

/* === Colors === */
.text-white      { color: #fff; }
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-gray-600   { color: #4b5563; }
.text-gray-800   { color: #1f2937; }
.text-yellow-300 { color: #fde047; }
.text-yellow-800 { color: #854d0e; }
.bg-white        { background-color: #fff; }
.bg-gray-50      { background-color: #f9fafb; }
.bg-gray-400     { background-color: #9ca3af; }
.bg-yellow-100   { background-color: #e5c895 !important; }
.text-yellow-200 { color: #e5c895 !important; }

/* === Borders === */
.rounded-full { border-radius: 9999px; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.border-t     { border-top-width: 1px; }

/* === Shadows === */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md  { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* === Overflow & Scroll Snap === */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.snap-x          { scroll-snap-type: x mandatory; }
.snap-mandatory  { /* included in snap-x */ }
.snap-center     { scroll-snap-align: center; }
.object-cover    { object-fit: cover; }

/* === Hover states === */
.hover\:text-yellow-700:hover { color: #a16207; }
.hover\:text-white:hover      { color: #fff; }
.hover\:opacity-80:hover      { opacity: 0.8; }

/* === Responsive: sm (640px) === */
@media (min-width: 640px) {
    .sm\:flex-row   { flex-direction: row; }
    .sm\:w-\[60\%\] { width: 60%; }
}

/* === Responsive: md (768px) === */
@media (min-width: 768px) {
    .md\:flex          { display: flex; }
    .md\:hidden        { display: none; }
    .md\:flex-row      { flex-direction: row; }
    .md\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:w-1\/2        { width: 50%; }
    .md\:w-5\/12       { width: 41.666667%; }
    .md\:text-left     { text-align: left; }
    .md\:text-2xl      { font-size: 1.5rem; line-height: 2rem; }
    .md\:text-3xl      { font-size: 1.875rem; line-height: 2.25rem; }
    .md\:text-5xl      { font-size: 3rem; line-height: 1; }
    .md\:text-6xl      { font-size: 3.75rem; line-height: 1; }
    .md\:pt-40         { padding-top: 10rem; }
    .md\:pb-32         { padding-bottom: 8rem; }
    .md\:p-14          { padding: 3.5rem; }
    .md\:px-0          { padding-left: 0; padding-right: 0; }
    .md\:mx-0          { margin-left: 0; margin-right: 0; }
    .md\:justify-start { justify-content: flex-start; }
    .md\:w-\[45\%\]    { width: 45%; }
}

/* === Responsive: lg (1024px) === */
@media (min-width: 1024px) {
    .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:w-\[35\%\]   { width: 35%; }
}

/* === Responsive: xl (1280px) === */
@media (min-width: 1280px) {
    .xl\:w-\[28\%\] { width: 28%; }
}