/**
 * TCC Interactive Crossword Game Engine Layout Sheet
 * Parity Build with Active Clue Highlights, Revealed Cells, and Monospace Timer Sizing
 */

/* ==========================================================================
   1. Core Board Matrix Geometry
   ========================================================================== */

.tcc-crossword-wrapper {   
    max-width: 600px;
    
    padding: 15px;
    
    
}

.tcc-grid-container {
    width: 100%;
    display: grid;
    background-color: transparent !important;
    border: none !important;
}

.tcc-grid-cell {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    box-sizing: border-box;
}

.tcc-cell-transparent {
    background-color: transparent !important;
    border: none !important;
}

.tcc-cell-white {
    background-color: #ffffff !important;
    border: 1px solid #212529 !important; 
}

.tcc-grid-cell.cell-blank {
    background-color: #bbc5ce !important;
    border: 1px solid #212529 !important;
}

/* ==========================================================================
   2. Input Element Layers
   ========================================================================== */

.tcc-grid-cell-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent;
    text-align: center;
    font-weight: 700; 
    
    /* Anchors font size strictly to 65% of the cell height */
    font-size: 65% !important; 
    line-height: 100%;
    
    color: #212529;
    text-transform: uppercase;
    z-index: 2;
    box-sizing: border-box;
    outline: none;
}

/* Focused active target word paths (Synced with managers.css parameters) */
.tcc-grid-cell-input.tcc-word-focused {
    background-color: rgba(255, 224, 130, 0.6) !important;
}

/* Single tile highlight intersection selector */
.tcc-grid-cell-input:focus {
    background-color: #fff9c4 !important;
    box-shadow: inset 0 0 0 2px #fbc02d;
}

/* ==========================================================================
   3. Live Error Validation Mechanics Rules
   ========================================================================== */

.tcc-cell-error {
    color: #dc3545 !important;
    text-decoration: line-through !important;
    font-weight: 700 !important;
}

/* Dynamic styling for cells filled via the "Reveal Answers" function */
.tcc-grid-cell-input.tcc-cell-revealed {
    color: #495057 !important;
    background-color: rgba(248, 249, 250, 0.8) !important;
    font-style: italic !important;
}

.tcc-pulse-highlight {
    animation: tccCellPulseEffect 1.2s ease-in-out;
}

@keyframes tccCellPulseEffect {
    0% { background-color: #ffffff; }
    30% { background-color: #ffda6a; box-shadow: inset 0 0 0 2px #ffc107; }
    100% { background-color: #ffffff; }
}

/* ==========================================================================
   4. Control Deck & Tab Directories
   ========================================================================== */

.tcc-clues-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 20px;
    
}

.target-game-tabs .nav-link {
    color: #495057;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6 !important;
    transition: all 0.15s ease-in-out;
}

.target-game-tabs .nav-link:hover {
    color: #0d6efd;
    background: #e9ecef;
}

.target-game-tabs .nav-link.active {
    color: #0d6efd !important;
    background: #ffffff !important;
    border-bottom: 2px solid #0d6efd !important;
}

.tcc-clues-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #212529;
    border-bottom: 2px solid #f1f3f5;
    padding-bottom: 4px;
}

.tcc-clue-item {
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    padding-left: 6px;
    padding-right: 6px;
}

.tcc-clue-item:hover {
    background-color: #f1f3f5;
    color: #212529 !important;
}

.tcc-clue-item.tcc-clue-active {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    font-weight: 700;
    border-radius: 0.25rem;
}

.border-bottom-dashed {
    border-bottom: 1px dashed #dee2e6;
}

/* ==========================================================================
   5. Active Live Context Clue Banner Area & General Utilities
   ========================================================================== */
.tcc-clue-ribbon {
    background-color: #d1e7dd;
    color: #0f5132;
    border-left: 4px solid #198754;
    padding: 12px 16px;
    border-radius: 0 0.25rem 0.25rem 0;
    font-weight: 500;
}

/* Keeps live timer letters from wiggling on character step shifts */
.font-monospace {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

#tcc-directory-across,
#tcc-directory-down {
    max-height: 200px;
    overflow-y: auto;    
}

.container-fluid {
    max-width: 1600px;
    margin-auto: 0;
}
/* Custom Wordsearch Reveal Action Button Styling */
.btn-reveal-utility {
    background-color: #ffffff !important;
    color: #6c757d !important;
    border: 1px solid #ced4da !important;
    transition: all 0.2s ease-in-out;
}

/* Crisp, predictable hover state transition */
.btn-reveal-utility:hover {
    background-color: #f8f9fa !important; /* Soft gray background hint */
    color: #495057 !important;            /* Darker, high-contrast text */
    border-color: #adb5bd !important;      /* Defined border profile */
}

/* Ensure the text color stays dark if the tooltip gains focus */
.btn-reveal-utility:focus {
    background-color: #ffffff !important;
    color: #6c757d !important;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}