/* TOOL — Arabic Word Guess.
   Only what the shared runtime does not already give. */

.gw { max-width: 520px; margin: 0 auto; }

.gw-bar {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.gw-levsel { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.gw-levsel span { color: var(--at-ink-soft) !important; font-weight: 600; }
/* Astra pins select height and the shared input adds padding on top of
   it, slicing the chosen option in half. Same fix as tools.css. */
.gw-levsel select { height: auto !important; }

.gw-flash {
    min-height: 22px;
    margin: 0 0 8px !important;
    text-align: center;
    font-size: 14px;
    color: var(--at-danger) !important;
    opacity: 0;
    transition: opacity .15s var(--at-ease);
}
.gw-flash.is-on { opacity: 1; }

/* ── Board ──────────────────────────────────────────────────── */

.gw-board { display: grid; gap: 8px; margin-bottom: 18px; }

/* Right-to-left: the first letter of the word must sit on the right,
   or the whole board reads backwards.

   Column count comes from --gw-cols, set on the board by the script,
   so 4, 5 and 6 letter rounds all lay out from one rule. */
.gw-row {
    display: grid;
    grid-template-columns: repeat(var(--gw-cols, 4), 1fr);
    gap: 8px;
    direction: rtl;
}

.gw-tile {
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--at-font-ar);
    font-size: clamp(26px, 7vw, 38px);
    font-weight: 600;
    border: 2px solid var(--at-line-strong);
    border-radius: var(--at-radius-sm);
    background: var(--at-surface) !important;
    color: var(--at-ink-deep) !important;
    /* Tiles show isolated letters. Without this the browser would try
       to join a tile's letter to nothing and render a stub. */
    text-align: center;
}

.gw-tile.is-filled { border-color: var(--at-primary-soft); }

.gw-tile.is-hit,
.gw-tile.is-near,
.gw-tile.is-miss { color: #FFFFFF !important; border-color: transparent; }

.gw-tile.is-hit  { background: var(--at-green) !important; }
.gw-tile.is-near { background: var(--at-gold) !important; color: var(--at-ink-deep) !important; }
.gw-tile.is-miss { background: var(--at-ink-muted) !important; }

/* ── Result ─────────────────────────────────────────────────── */

.gw-result {
    text-align: center;
    padding: 18px 20px;
    border-radius: var(--at-radius);
    margin-bottom: 18px;
    background: var(--at-lilac) !important;
    border: 1px solid var(--at-line);
}
.gw-result.is-won { background: #EDF7F1 !important; border-color: #BFE0CD; }

.gw-result__head { margin: 0 0 8px !important; font-weight: 700; color: var(--at-ink-deep) !important; }

.gw-answer {
    font-family: var(--at-font-ar);
    font-size: 34px;
    margin: 0 0 4px !important;
    color: var(--at-ink-deep) !important;
}

.gw-gloss { margin: 0 0 4px !important; color: var(--at-ink-soft) !important; }
.gw-root  { margin: 0 0 12px !important; font-size: 13px; color: var(--at-ink-muted) !important; }
.gw-root span { font-family: var(--at-font-ar); font-size: 16px; letter-spacing: .1em; }

/* ── Keyboard ───────────────────────────────────────────────── */

.gw-kb { display: grid; gap: 6px; }

.gw-kbrow {
    display: flex;
    gap: 5px;
    justify-content: center;
    direction: rtl;
}

.gw-kbrow--act { direction: ltr; margin-top: 4px; }

.gw-key {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 2px;
    font-family: var(--at-font-ar);
    font-size: 19px;
    line-height: 1;
    border: 1px solid var(--at-line-strong);
    border-radius: 8px;
    background: var(--at-surface) !important;
    color: var(--at-ink-deep) !important;
    cursor: pointer;
    transition: background-color .12s var(--at-ease), color .12s var(--at-ease);
}

.gw-key:hover { background: var(--at-lilac) !important; }

.gw-key--wide {
    flex: 0 0 auto;
    padding: 11px 22px;
    font-family: var(--at-font);
    font-size: 14px;
    font-weight: 600;
}

.gw-key.is-hit  { background: var(--at-green) !important;     color: #FFFFFF !important; border-color: transparent; }
.gw-key.is-near { background: var(--at-gold) !important;      color: var(--at-ink-deep) !important; border-color: transparent; }
.gw-key.is-miss { background: var(--at-line-strong) !important; color: var(--at-ink-muted) !important; border-color: transparent; }

@media (max-width: 420px) {
    .gw-key { padding: 9px 1px; font-size: 17px; }
    .gw-kbrow { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .gw-flash, .gw-key { transition: none; }
}

@media print {
    .gw-kb, .gw-bar, .gw-flash { display: none !important; }
}