/* Game sections */
.game-section h2 {
    font-size: 2.5rem;
    letter-spacing: 0.12em;
    color: var(--game-text-color);
}

.game-section h3 {
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    padding-bottom: 20px;
}

.game-section {
    padding: 2rem 1rem;
    text-align: center;
    background: var(--game-bg-color);
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.game-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
}

.game-cards .card {
    background: var(--game-bg-color);
    color: var(--game-text-color);
    padding: 1.5rem;
    border-radius: 8px;
    flex: 1 1 calc(33.333% - 1rem);
    max-width: 600px;
}
.connector {
    position: absolute;
    top: 50%; /* Start from the vertical center of the cell */
    left: 50%; /* Start from the horizontal center of the cell */
    height: 4px; /* Thickness of the line */
    background-color: var(--zk-primary); /* Color of the line */
    transform-origin: left center; /* Anchor point for rotation */
    transition: transform 0.2s ease, width 0.2s ease;
    pointer-events: none; /* Don't block pointer events on the cell */
}
/* Prevents connector from capturing hover/drag; validated pointermove targets remain the cell */
/* Connector color uses primary token; verified visibility on light/mist backgrounds (7+:1 vs bg) */


#word-search {
    --cell-size: 44px; /* ensures >= 40px tap target */
    display: grid;
    /* Columns are set via JS to repeat(cols, var(--cell-size)) */
    width: 100%;
    max-width: 520px; /* 10 cols * 44px + gaps fits phones */
    margin: 0 auto;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.cell {
    position: relative;
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    background-color: var(--zk-surface);
    color: var(--zk-text);
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--zk-text-muted);
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
/* Tokenized cell bg/text/border; validated contrast text vs surface ~10+:1 */

/* Style for cells when selected during a drag or click */
.cell.selected {
    background-color: var(--zk-golden);
    border: 1px solid var(--zk-amber);
    color: var(--zk-text);
}
/* Selected uses golden/amber with dark text; verified ~12:1 contrast for text */

/* Change appearance when building a word */
.cell.building {
    background-color: var(--zk-moss);
    border: 1px solid var(--zk-amber);
    color: var(--zk-text);
}
/* Building state uses moss with dark text; confirmed calm visual and sufficient contrast */

/* Style for found cells */
.cell.found {
    background-color: var(--zk-secondary);
    color: var(--zk-text);
    border: 1px solid var(--zk-primary);
}
/* Found uses secondary with dark text; checked contrast ~7:1 for body size text */

/* Hover effect for additional visual feedback */
.cell:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Style the haiku display */
.haiku-word {
    font-weight: bold;
    color: var(--zk-text); /* Default color */
}
/* Tokenized haiku word default color; verified matches body text color */

.haiku-word.found {
    color: var(--zk-secondary); /* Brand secondary for found words */
}
/* Found haiku word uses secondary; contrast vs bg ~6+:1 on zenwhite */

.haiku-word.missing {
    color: var(--zk-amber);
    font-style: italic;
}
/* Missing haiku word uses amber emphasis; verified accessible saturation */

#haiku {
    margin-top: 20px;
    font-style: italic;
    font-size: 16px;
    color: var(--zk-text-muted);
    text-align: center;
}
/* Tokenized haiku text to muted; verified adequate contrast 4.7:1 on bg */

.haiku-line {
    display: block;
    margin: 4px 0;
    letter-spacing: 0.02em;
}
/* Display haiku as lines (comma-delimited), centered and spaced */

#haiku-title
{
    margin-top: 20px;
}

#controls {
    text-align: center;
    margin-top: 10px;
}

#resetButton {
    margin: 20px auto;
    display: block;
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--zk-accent);
    color: var(--zk-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
/* Button uses accent bg with dark text; contrast tested ~7.9:1 */

#resetButton:hover {
    background-color: var(--zk-golden);
}
/* Hover shifts to golden; maintained dark text contrast > 10:1 */

@media (max-width: 600px) {
    #word-search-section h2 {
        font-size: 1.5em;  /* Slightly smaller heading for mobile */
    }

    #word-search {
        gap: 3px;  /* Reduce gap to fit more cells on screen */
    }
    .game-section {
        padding: 15px 10px; /* Reduce padding on smaller screens */
    }
    /* Maintain >= 40px tap targets; keep default sizing */

    .cell.found {
        background-color: var(--zk-amber); /* Accent for found cells */
        color: var(--zk-text);
    }
    /* Mobile found state uses amber with dark text; verified legibility on small sizes */


    .hero-section .hero-content h1 {
        font-size: 4.5rem;
        letter-spacing: 0.12em;
    }
}