/* Lumen — Słowo dnia (gra). */

.lgra{--wine:#7a2532;--gold:#c9a227;--green:#2e7d32;--gray:#9a8a85;--line:#d9cfc0;--ink:#2a1c1e;
  max-width:520px;margin:0 auto;font-family:inherit;color:var(--ink);text-align:center}

.lgra__head{margin-bottom:16px}
.lgra__title{display:block;font-family:Georgia,serif;font-size:1.5rem;color:var(--wine);font-weight:700}
.lgra__hint{font-size:.9rem;color:#6e5e60}
.lgra__hint strong{color:var(--wine)}

/* plansza */
.lgra__board{display:grid;gap:6px;justify-content:center;margin:0 auto 14px}
.lgra__row{display:grid;grid-template-columns:repeat(var(--len,5),1fr);gap:6px;justify-content:center}
.lgra__tile{width:clamp(34px,10vw,52px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:8px;font-size:clamp(1.1rem,4vw,1.5rem);font-weight:700;
  text-transform:uppercase;background:#fff;transition:transform .1s,background .2s,border-color .2s}
.lgra__tile.is-filled{border-color:var(--wine)}
.lgra__tile.is-correct{background:var(--green);border-color:var(--green);color:#fff}
.lgra__tile.is-present{background:var(--gold);border-color:var(--gold);color:#3a2c05}
.lgra__tile.is-absent{background:var(--gray);border-color:var(--gray);color:#fff}

.lgra__msg{min-height:1.4em;font-weight:600;color:var(--wine);margin:6px 0}
.lgra__share{background:var(--wine);color:#fff;border:0;border-radius:999px;padding:10px 18px;
  font:inherit;font-weight:600;cursor:pointer;margin-bottom:10px}

/* klawiatura */
.lgra__kb{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.lgra__kbrow{display:flex;gap:5px;justify-content:center}
.lgra__key{flex:1 1 auto;min-width:0;max-width:42px;height:48px;border:0;border-radius:7px;
  background:#e7e0d4;color:var(--ink);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.lgra__key:hover{background:#dccfbb}
.lgra__key--wide{max-width:62px;flex:1.4 1 auto;font-size:1.2rem}
.lgra__key.is-correct{background:var(--green);color:#fff}
.lgra__key.is-present{background:var(--gold);color:#3a2c05}
.lgra__key.is-absent{background:#b7ada0;color:#fff}

.lgra__foot{font-size:.82rem;color:#9a8a85;margin-top:14px}

@media (max-width:480px){
  .lgra__key{height:52px;max-width:36px;font-size:.95rem}
  .lgra__key--wide{max-width:52px}
}