/**
 * WDC Word Chain - Game-specific styling
 * Base tile and keyboard styles are in puzzle-tiles.css
 */

/* ============================================
   CONTAINER
   ============================================ */

#wordchain-container {
    -webkit-text-size-adjust: 100%;
}

/* ============================================
   WORD CHAIN SPECIFIC TILE STATES
   ============================================ */

/* Start word tiles (green background) */
.puzzle-tile.wc-start {
    background: #e8f5e9;
    border-color: #4CAF50;
    color: #2e7d32;
}

/* Target/end word tiles (grayed) */
.puzzle-tile.wc-target {
    background: #fafafa;
    border-color: #ccc;
    color: #999;
}

/* Correct/completed step tiles */
.puzzle-tile.wc-correct {
    background: #6aaa64;
    border-color: #6aaa64;
    color: white;
}

/* ============================================
   EDIT BUTTON
   ============================================ */

.wc-edit-indicator {
    font-size: 0.85em;
    padding: 4px 12px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
    font-weight: bold;
}

.wc-edit-indicator:hover {
    background: #1976D2;
    transform: scale(1.05);
}

.wc-edit-indicator:active {
    transform: scale(0.95);
}

/* ============================================
   STEP HEADER (responsive for zoom)
   ============================================ */

.wc-step-container {
    margin: 8px 0;
}

.wc-step-header {
    font-size: 0.85em;
    font-weight: bold;
    color: #666;
    margin-bottom: 3px;
    text-align: center;
}

.wc-step-arrow {
    color: #333;
    font-size: 1.1em;
    margin-right: 8px;
    text-shadow: 0 0 1px #333;
}

.wc-step-label {
    /* Normal display */
}

.wc-step-num {
    /* Number styling */
}

/* Compact mode for zoomed/narrow viewports */
@media (max-width: 340px) {
    /* Make container a horizontal flex row */
    .wc-step-container {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 3px 0;
        justify-content: center;
    }
    
    /* Step header becomes inline number on the left */
    .wc-step-header {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        min-width: 20px;
        width: 20px;
        justify-content: flex-end;
    }
    
    /* Hide arrow entirely */
    .wc-step-arrow {
        display: none;
    }
    
    /* Hide "Step " text and END label, show only number */
    .wc-step-label {
        font-size: 0;
    }
    
    .wc-step-num {
        font-size: 0.9rem;
        font-weight: bold;
        color: #888;
    }
    
    /* Hide START and END labels entirely */
    .wc-start-label,
    .wc-end-label {
        display: none;
    }
    
    /* START and END containers - empty placeholder to keep alignment */
    .wc-start-container .wc-step-header,
    .wc-end-container .wc-step-header {
        min-width: 20px;
        width: 20px;
    }
    
    /* Tile row stays centered, no flex grow */
    .wc-step-container .puzzle-tile-row {
        flex: 0 0 auto;
        justify-content: center;
    }
    
    /* Add balancing spacer on the right */
    .wc-step-container::after {
        content: '';
        min-width: 20px;
        width: 20px;
    }
    
    /* Edit button replaces spacer visually */
    .wc-edit-indicator {
        padding: 2px 6px;
        font-size: 0.7em;
        min-width: 20px;
        position: absolute;
        right: 4px;
    }
    
    /* Position context for edit button */
    .wc-step-container[data-step-container] {
        position: relative;
    }
    
    /* Reduce message spacing */
    #wc-message {
        margin: 8px 0 !important;
        min-height: 20px !important;
        font-size: 0.9em !important;
    }
    
    /* Tighten keyboard spacing */
    #wc-keyboard {
        margin: 10px auto !important;
    }
}