/* Text Twist — sits on top of /assets/boggle.css for shared palette/header. */

#game {
    display: flex; flex-direction: column;
    gap: 1.25rem;
}

/* --- Found-words columns (lives inside .play-area, above source row) - */
.found-strip {
    width: 100%;
    background: rgba(61, 90, 128, .04);
    border: 1px solid rgba(61, 90, 128, .15);
    border-radius: 8px;
    padding: .75rem 1rem;
}
.found-strip h3 {
    margin: 0 0 .55rem;
    color: var(--accent);
    font-size: .9rem;
    display: flex; justify-content: space-between; align-items: baseline;
}
.found-count { color: var(--muted); font-weight: 500; font-size: .8rem; }

/* Four groups: 3-letter, 4-letter, 5-letter, 6-letter words. Each group sizes
   to its own contents rather than taking a rigid quarter, because with the full
   dictionary the 3- and 4-letter groups hold far more words than the others. */
.found-words {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    align-items: start;
    gap: .85rem;
    overflow-x: auto;
}
.found-col h4 {
    margin: 0 0 .35rem;
    color: var(--muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex; justify-content: space-between;
}
.found-col h4 .col-count { font-weight: 500; color: var(--muted); }

/* Slots run DOWN a column and wrap into the next one when they hit the height
   cap, newspaper style. Without the cap a rack with 60 three-letter words grew
   one long column that pushed the letter rack and the board off the screen. */
.found-col .slots {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    max-height: min(26vh, 13rem);
    /* Generous column gap: wrapped columns sit side by side, and a tight gap
       made two columns of letter-blocks read as one wide word. */
    gap: .2rem 1.4rem;
}

/* One row per word slot. Letter-blocks within. */
.word-slot {
    display: flex; gap: 2px;
}
.letter-block {
    width: 1.1rem;
    height: 1.3rem;
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700; font-size: .8rem;
    background: rgba(61, 90, 128, .18);
    color: transparent;
}
.word-slot.found .letter-block {
    background: var(--accent);
    color: white;
}
.word-slot.missed .letter-block {
    background: rgba(107, 118, 137, .22);
    color: var(--muted);
    font-style: italic;
    font-weight: 500;
}
/* The base word (6-letter) gets a brighter color when found. */
.found-col[data-len="6"] .word-slot.found .letter-block {
    background: #b34900;
}
.found-col[data-len="5"] .word-slot.found .letter-block {
    background: var(--ok);
}
.found-col[data-len="3"] .word-slot.found .letter-block {
    background: #6b7689;
}

/* --- 3-column main: actions | play | HUD --------------------------- */
.play-layout {
    display: grid;
    grid-template-columns: 13rem 1fr 11rem;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .play-layout { grid-template-columns: 1fr; }
}

.actions-panel {
    background: var(--card);
    border: 1px solid var(--tile-edge);
    border-radius: 10px;
    padding: 1rem .9rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.actions-panel button {
    width: 100%; padding: .55rem .7rem;
    background: var(--accent); color: white;
    border: 0; border-radius: 6px;
    font-size: .95rem; font-weight: 600; cursor: pointer;
}
.actions-panel button:hover { background: var(--accent-dark); }
.actions-panel button.btn-secondary {
    background: white; color: var(--accent);
    border: 1px solid var(--tile-edge);
}
.actions-panel button.btn-secondary:hover {
    background: #f0f4fa; border-color: var(--accent);
}
.actions-panel button:disabled { opacity: .55; cursor: default; }
.actions-panel .hint {
    margin: .75rem 0 0;
    color: var(--muted); font-size: .85rem; line-height: 1.45;
}
.actions-panel .hint kbd {
    background: rgba(61, 90, 128, .1);
    padding: 1px 4px; border-radius: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8em;
}

/* The play area: submission row + source letters + toast */
.play-area {
    background: var(--card);
    border: 1px solid var(--tile-edge);
    border-radius: 10px;
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex; flex-direction: column; align-items: center;
    gap: 1.25rem;
}

.hud-panel {
    background: var(--card);
    border: 1px solid var(--tile-edge);
    border-radius: 10px;
    padding: 1rem .8rem;
    display: flex; flex-direction: column; gap: .55rem;
    font-variant-numeric: tabular-nums;
}
.hud-panel .hud-cell {
    margin: 0; width: 100%;
    padding: .55rem .4rem;
    text-align: center;
}

/* --- Submission "what you're building" row ------------------------- */
.submission {
    display: flex; gap: .5rem;
    min-height: 4.5rem;
    align-items: center; justify-content: center;
    flex-wrap: wrap;
}
.sub-tile {
    width: 4rem; height: 4.5rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #d9e1ec 100%);
    border: 1px solid var(--tile-edge);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700;
    cursor: pointer;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .85),
        inset 0 -2px 0 rgba(0, 0, 0, .06),
        0 3px 5px rgba(31, 42, 58, .12);
    transition: transform .08s;
}
.sub-tile:hover { transform: translateY(-1px); }
.submission-placeholder {
    color: var(--muted);
    font-size: 1.1rem;
    font-style: italic;
}

/* --- Source letter row --------------------------------------------- */
.source-row {
    display: flex; gap: .75rem;
    align-items: center; justify-content: center;
}
.src-tile {
    width: 5rem; height: 5.5rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #d9e1ec 100%);
    border: 1px solid var(--tile-edge);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; font-weight: 700;
    cursor: pointer; user-select: none;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .85),
        inset 0 -3px 0 rgba(0, 0, 0, .08),
        0 4px 6px rgba(31, 42, 58, .15);
    transition: transform .08s, opacity .15s;
}
.src-tile:hover:not(.used) { transform: translateY(-2px); }
.src-tile.used { opacity: .25; cursor: default; transform: scale(.92); }
.src-tile.twisting { animation: tile-twist .35s ease-out; }
@keyframes tile-twist {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(.85); }
    100% { transform: rotate(360deg) scale(1); }
}

.toast {
    min-height: 1.3rem;
    font-weight: 600; color: var(--muted); text-align: center;
}
.toast.ok  { color: var(--ok); }
.toast.bad { color: var(--bad); }

#timer.warn { color: var(--bad); }

/* All-words-found celebration: a big heart blooms and floats up. */
@keyframes twist-heart-bloom {
    0%   { transform: translate(-50%, -50%) scale(.2);  opacity: 0; }
    25%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
    65%  { transform: translate(-50%, -80%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -140%) scale(.95); opacity: 0; }
}
.twist-heart {
    position: fixed;
    top: 50%; left: 50%;
    font-size: 12rem;
    color: #e0245e;
    text-shadow: 0 8px 24px rgba(224, 36, 94, .45);
    pointer-events: none;
    z-index: 9999;
    animation: twist-heart-bloom 2.2s ease-out forwards;
}