/**
 * Kooword Game Styles
 * Extracted from play_v3.html inline styles
 *
 * Contains:
 * - Alpine.js x-cloak styles
 * - Slot highlighting styles (blue borders around active word)
 */

/* Alpine.js x-cloak CSS - Prevents flash of unstyled content */
[x-cloak] {
    display: none !important;
}

/* Disable animation class for status messages */
.no-message-animation,
.no-message-animation * {
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   Slot Highlighting Styles - Single rectangle around entire word
   ========================================================================== */

/* Horizontal words (across) */
.slot-highlight-across-start {
    box-shadow: inset 3px 0 0 #3B82F6,
                inset 0 3px 0 #3B82F6,
                inset 0 -3px 0 #3B82F6 !important;
    position: relative;
    z-index: 10;
}

.slot-highlight-across-middle {
    box-shadow: inset 0 3px 0 #3B82F6,
                inset 0 -3px 0 #3B82F6 !important;
    position: relative;
    z-index: 10;
}

.slot-highlight-across-end {
    box-shadow: inset -3px 0 0 #3B82F6,
                inset 0 3px 0 #3B82F6,
                inset 0 -3px 0 #3B82F6 !important;
    position: relative;
    z-index: 10;
}

/* Vertical words (down) */
.slot-highlight-down-start {
    box-shadow: inset 3px 0 0 #3B82F6,
                inset -3px 0 0 #3B82F6,
                inset 0 3px 0 #3B82F6 !important;
    position: relative;
    z-index: 10;
}

.slot-highlight-down-middle {
    box-shadow: inset 3px 0 0 #3B82F6,
                inset -3px 0 0 #3B82F6 !important;
    position: relative;
    z-index: 10;
}

.slot-highlight-down-end {
    box-shadow: inset 3px 0 0 #3B82F6,
                inset -3px 0 0 #3B82F6,
                inset 0 -3px 0 #3B82F6 !important;
    position: relative;
    z-index: 10;
}

/* Single cell word */
.slot-highlight-single {
    box-shadow: inset 3px 0 0 #3B82F6,
                inset -3px 0 0 #3B82F6,
                inset 0 3px 0 #3B82F6,
                inset 0 -3px 0 #3B82F6 !important;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   Note: Validated word border styles are generated dynamically by JavaScript
   when the theme is loaded. They will be injected into <style id="theme-styles">
   ========================================================================== */