/* Szófejtő – stílus.
 *
 * FIGYELEM: minden szabály a .wordguess-app gyökérosztály alá van hatókörözve.
 * A motor a saját wrapper divjét adja, NEM a modul nevét használjuk osztályként.
 * A game.js a játékképernyőre `game-screen ${moduleName}` osztályt tesz, így egy
 * `.wordguess` nevű szabály véletlenül a teljes képernyőre is ráülne, és
 * összenyomná a layoutot. (Ez az öltöztetőnél élesben megtörtént.)
 *
 * A színek kontrasztja WCAG AA-ra van állítva: a fehér szöveg mindhárom
 * állapotszínen legalább 4.5:1. A gombok legalább 44px magasak, ami a
 * gyerekeknek szánt felületek ajánlott minimuma.
 */

.wordguess-app {
    --wg-tile: 58px;
    --wg-gap: 8px;
    --wg-correct: #1f7a44;
    --wg-present: #a8730a;
    --wg-absent: #5f6773;
    --wg-ink: #2f2a45;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Tábla ──────────────────────────────────────────────────────────────── */

.wordguess-app .wordguess-board {
    display: flex;
    flex-direction: column;
    gap: var(--wg-gap);
}

.wordguess-app .wordguess-row {
    display: flex;
    gap: var(--wg-gap);
    justify-content: center;
}

.wordguess-app .wordguess-tile {
    width: var(--wg-tile);
    height: var(--wg-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 12px;
    border: 3px solid #ded7f2;
    background: #fff;
    color: var(--wg-ink);
    font-size: calc(var(--wg-tile) * 0.5);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.wordguess-app .wordguess-tile.is-filled {
    border-color: #8e83bd;
    transform: scale(1.04);
}

.wordguess-app .wordguess-row.is-submitted .wordguess-tile {
    color: #fff;
    border-color: transparent;
    animation: wordguess-reveal 340ms ease both;
}

.wordguess-app .wordguess-tile.is-correct { background: var(--wg-correct); }
.wordguess-app .wordguess-tile.is-present { background: var(--wg-present); }
.wordguess-app .wordguess-tile.is-absent  { background: var(--wg-absent); }

@keyframes wordguess-reveal {
    0%   { transform: rotateX(0deg); }
    50%  { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

/* Finom jelzés, ha a sor még nincs tele – nem hibaüzenet, csak egy mozdulat. */
.wordguess-app .wordguess-row.is-shaking {
    animation: wordguess-nudge 400ms ease;
}

@keyframes wordguess-nudge {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* ── Jelmagyarázat ──────────────────────────────────────────────────────── */

.wordguess-app .wordguess-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    font-size: 0.85rem;
    color: var(--wg-ink);
}

.wordguess-app .wordguess-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wordguess-app .wordguess-legend-item::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 5px;
    flex: 0 0 auto;
}

.wordguess-app .wordguess-legend-item.is-correct::before { background: var(--wg-correct); }
.wordguess-app .wordguess-legend-item.is-present::before { background: var(--wg-present); }
.wordguess-app .wordguess-legend-item.is-absent::before  { background: var(--wg-absent); }

/* ── Billentyűzet ───────────────────────────────────────────────────────── */

.wordguess-app .wordguess-keyboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 560px;
}

.wordguess-app .wordguess-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.wordguess-app .wordguess-key {
    flex: 1 1 0;
    min-width: 34px;
    max-width: 56px;
    min-height: 48px;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid #ded7f2;
    border-radius: 10px;
    background: #fff;
    color: var(--wg-ink);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
}

.wordguess-app .wordguess-key:hover:not(:disabled) {
    transform: translateY(-2px);
}

.wordguess-app .wordguess-key:disabled {
    cursor: default;
    opacity: 0.55;
}

.wordguess-app .wordguess-key.is-correct,
.wordguess-app .wordguess-key.is-present,
.wordguess-app .wordguess-key.is-absent {
    color: #fff;
    border-color: transparent;
    opacity: 1;
}

.wordguess-app .wordguess-key.is-correct { background: var(--wg-correct); }
.wordguess-app .wordguess-key.is-present { background: var(--wg-present); }
.wordguess-app .wordguess-key.is-absent  { background: var(--wg-absent); }

.wordguess-app .wordguess-key--wide {
    flex: 1.6 1 0;
    max-width: 84px;
    font-size: 1.2rem;
}

.wordguess-app .wordguess-key--enter.is-ready {
    background: #7147df;
    border-color: #7147df;
    color: #fff;
}

/* ── Kisebb kijelzők ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .wordguess-app { --wg-tile: 46px; --wg-gap: 6px; }
    .wordguess-app .wordguess-key { min-width: 28px; min-height: 46px; font-size: 0.95rem; }
    .wordguess-app .wordguess-keyboard-row { gap: 4px; }
}

@media (max-width: 380px) {
    .wordguess-app { --wg-tile: 40px; --wg-gap: 5px; }
    .wordguess-app .wordguess-key { min-width: 24px; font-size: 0.85rem; }
}

/* Aki csökkentett mozgást kért, annak ne pörögjenek a csempék. */
@media (prefers-reduced-motion: reduce) {
    .wordguess-app .wordguess-row.is-submitted .wordguess-tile,
    .wordguess-app .wordguess-row.is-shaking {
        animation: none;
    }
    .wordguess-app .wordguess-key:hover:not(:disabled) {
        transform: none;
    }
}