/* Base styles */
@import url('https://fonts.googleapis.com/css2?family=Faustina:ital,wght@0,300..800;1,300..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Selection */
::selection { background-color: #a7f3d0; color: #064e3b; }
::-moz-selection { background-color: #a7f3d0; color: #064e3b; }

/* Fonts */
body { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Faustina', serif; }
.font-open-sans { font-family: 'Open Sans', sans-serif; }
.font-faustina { font-family: 'Faustina', serif; }

/* Prevent flash: remove UA color-scheme hints; theme controlled via classes */

/* Mobile interaction: prevent iOS double-tap to zoom while preserving pinch-zoom */
html, body,
button, a, [role="button"],
input, select, textarea {
    touch-action: manipulation;
}

/* Force main header onto its own compositing layer to prevent rendering issues */
header.bg-white\/80.backdrop-blur-sm.shadow-lg.border-b.border-gray-200\/50 {
    transform: translateZ(0);
    will-change: transform;
}

/* Force other key UI elements onto their own compositing layers */
/* Date display container */
.text-center.bg-white\/60.backdrop-blur-sm.rounded-2xl.px-4.py-2.shadow-md {
    transform: translateZ(0);
    will-change: transform;
}

/* Theme selector container */
.bg-gray-100.dark\:bg-slate-800.rounded-lg.p-1 {
    transform: translateZ(0);
    will-change: transform;
}

/* Limit layer promotion to top-level containers only (avoid promoting thousands of children) */
main {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Force key UI sections onto their own compositing layers */
#js-game-status,
#js-status-bar,
#js-typing-section {
    transform: translateZ(0);
    will-change: transform;
}

/* Loading state */
#loadingState {
    transform: translateZ(0);
    will-change: transform;
}

/* Loading spinner styles */
#js-loading-spinner {
    transform: translateZ(0);
    will-change: transform;
}

/* Spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Error state */
#errorState {
    transform: translateZ(0);
    will-change: transform;
}

/* Gradient text with solid-color fallback for older Safari */
.gradient-text {
  /* Fallback solid colors when text clipping isn't supported */
  color: #1f2937; /* slate-800 */
}
.dark .gradient-text {
  color: #f1f5f9; /* lighten for better contrast on dark */
}
@supports (-webkit-background-clip: text) {
  .gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Apply gradient background only when clipping is supported to avoid blocks */
    background-image: linear-gradient(to right, #059669, #10b981); /* emerald-600 to emerald-500 */
  }
  .dark .gradient-text {
    /* Lighten the gradient stops in dark mode for readability (one level lighter) */
    background-image: linear-gradient(to right, #34d399, #6ee7b7);
  }
}

/* Gradient logo text with safe fallbacks */
.logo-text {
  background: linear-gradient(135deg, #009444 0%, #00d4aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #009444; /* Fallback */
}

/* Fancy letter styling */
.fancy-letter {
  font-family: 'Charm', 'Georgia', 'Times New Roman', serif !important;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
}

/* When Charm font is confirmed loaded, use it */
.charm-loaded .fancy-letter {
  font-family: 'Charm', serif !important;
}

/* Fancy letters in history display */
.fancy-letter.text-lg {
  font-size: 1.125rem; /* 18px - appropriate for history context */
  line-height: 1.2;
  color: #059669; /* emerald-600 - darker green for better contrast in light mode */
  font-weight: 800;
  font-family: 'Charm', 'Georgia', 'Times New Roman', serif !important;
}

/* When Charm font is confirmed loaded, use it for history too */
.charm-loaded .fancy-letter.text-lg {
  font-family: 'Charm', serif !important;
}

/* Dark mode: fancy letters in history should be light green, non-fancy letters should be slate */
.dark .fancy-letter.text-lg {
  color: #34d399; /* emerald-400 - light green for fancy letters in dark mode */
}

/* Non-fancy letters in history should inherit the parent text color (slate in dark mode) */
#js-history span:not(.fancy-letter) {
  color: inherit; /* This will be slate in dark mode due to parent styling */
}

/* Ensure readable contrast if JS is disabled */



/* Dark mode refinements */
input[type="text"], input[type="search"], textarea {
  color: inherit;
}
.dark input[type="text"], .dark input[type="search"], .dark textarea {
  color: #F8FAFC; /* slate-50 */
}

/* Shop cards and played words lists */
#js-shop-cards > * {
  /* cards created by JS can inherit rounded/border via utility classes; ensure bg contrasts in dark */
  background-color: #ffffff;
}
.dark #js-shop-cards > * {
  background-color: rgba(2, 6, 23, 0.75); /* slate-950 with opacity */
}

#js-history > li {
  background-color: #ffffff;
}
.dark #js-history > li {
  background-color: rgba(2, 6, 23, 0.8); /* slate-950/80 */
}

/* Modern scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection styling */
::selection {
    background-color: #3b82f6;
    color: white;
}

::-moz-selection {
    background-color: #3b82f6;
    color: white;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-bounce,
    .animate-pulse {
        animation: none !important;
    }
}

/* Touch device optimizations */
@media (hover: none) {
  /* On touch devices, eliminate transitions to reduce flicker during taps */
  button, input, select, textarea {
    transition: none !important;
  }
  
  /* On touch devices, disable hover rings to reduce repaints */
  button:hover::before,
  button:hover::after {
    display: none !important;
  }
}

/* Enhanced focus styles for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Button hover effects */
button:hover {
    transform: translateY(-2px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

button:active {
    transform: translateY(0);
}

/* Disabled button styles */
button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

button:disabled:hover {
    transform: none !important;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    /* Mobile modal adjustments */
    .modal > div {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    /* Remove main margins on mobile but preserve bottom padding */
    main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Disable costly backdrop blur on mobile to reduce GPU load */
    header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Interactive element touch optimizations */
button, [role="button"], input, select, textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Performance optimizations */
/* Isolate paints to reduce neighbor flicker */
section {
    contain: paint;
}

/* Stabilize alternating background overlays to prevent neighbor flicker */
.rounded-xl {
    contain: paint;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Integrated shop styles */
#js-shop {
    contain: paint;
    transform: translateZ(0);
    backface-visibility: hidden;
}

#js-shop-cards {
    gap: 0.5rem;
}

#js-shop .group {
    min-height: 120px;
    transition: all 0.2s ease-in-out;
}

#js-shop .group:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ensure shop cards fit well in the integrated layout */
@media (max-width: 640px) {
    #js-shop-cards .group {
        min-width: 80px;
        flex: 0 0 auto;
    }
}