/* rec.css · Cliplea · Reč dana (v0.4.50). Tastatura i prozor „Rešeno“ nose klase iz enigma.css (e-tastatura, e-taster, e-kraj). */
.rec .enigma-vrh { padding-bottom: 2px; }
.rec-alati { display: flex; gap: 8px; padding: 6px 16px 10px; flex-wrap: wrap; }
.rec-dugme { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border: 1.5px solid var(--linija); border-radius: 999px; background: #fff; color: var(--naslov); cursor: pointer; }
.rec-dugme:hover { border-color: var(--naslov); }
.rec-ploca { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; width: min(100% - 32px, 330px); margin: 6px auto 10px; }
.rec-red { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rec-polje { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #c5cad8; border-radius: 4px; font-family: var(--naslovni); font-weight: 800; font-size: 30px; line-height: 1; color: var(--tekst); text-transform: uppercase; background: #fff; -webkit-user-select: none; user-select: none; }
.rec-polje.puno { border-color: #7a7f90; animation: rec-pop .12s; }
.rec-polje.G { background: #3a9d5d; border-color: #3a9d5d; color: #fff; }
.rec-polje.Y { background: #d9a400; border-color: #d9a400; color: #fff; }
.rec-polje.X { background: #8a8f9c; border-color: #8a8f9c; color: #fff; }
.rec-polje.okreni { animation: rec-okret .5s; }
@keyframes rec-pop { 50% { transform: scale(1.08); } }
@keyframes rec-okret { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.rec-red.tresi { animation: rec-tresi .4s; }
@keyframes rec-tresi { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .rec-polje, .rec-red { animation: none !important; } }
.rec-poruka { width: max-content; max-width: calc(100% - 32px); margin: 0 auto 8px; padding: 8px 14px; border-radius: 6px; background: #151a2d; color: #fff; font-weight: 700; text-align: center; }
.rec-poruka[hidden] { display: none; }
.rec-tastatura { padding: 6px 4px 14px; }
/* v0.4.51: treći red = Potvrdi 20 + 6 slova × 6 + ⌫ 18 = 74 kolone (vlasnik: Potvrdi je bio uzak, ⌫ padao u nov red) */
.rec-tastatura .e-taster-pismo.e-taster-enter { grid-column: 1 / span 20; font-size: 14px; font-weight: 700; letter-spacing: .02em; border-color: var(--naslov); background: var(--naslov); color: #fff; }
.rec-tastatura .e-taster-brisi { grid-column: span 18; }
.rec-tastatura .e-taster.G { background: #3a9d5d; border-color: #3a9d5d; color: #fff; }
.rec-tastatura .e-taster.Y { background: #d9a400; border-color: #d9a400; color: #fff; }
.rec-tastatura .e-taster.X { background: #f7cdd9; border-color: #efa7bd; color: #7a1b3d; }   /* v0.4.51: isključeno slovo — blaga roze (vlasnik), umesto sive */
.rec-kraj .rec-resenje { font-size: 17px; }
.rec-stat { display: flex; justify-content: center; gap: 18px; margin: 4px 0 12px; }
.rec-stat div { text-align: center; min-width: 54px; }
.rec-stat b { display: block; font-family: var(--naslovni); font-size: 28px; line-height: 1; color: var(--naslov); }
.rec-stat small { display: block; margin-top: 4px; color: var(--sivo); font-size: 12px; line-height: 1.2; }
.rec-raspodela { text-align: left; margin: 0 0 14px; font-size: 13px; }
.rec-raspodela > b { display: block; margin-bottom: 6px; font-family: var(--naslovni); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--akcenat); }
.rec-raspodela div { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.rec-raspodela span { flex: none; width: 12px; font-weight: 700; }
.rec-raspodela i { display: block; min-width: 20px; padding: 2px 6px; border-radius: 3px; background: #8a8f9c; color: #fff; font-style: normal; font-weight: 700; font-size: 12px; text-align: right; box-sizing: border-box; }
.rec-raspodela i.ova { background: #3a9d5d; }
.rec-kako p { text-align: left; margin: 0 0 8px; font-size: 15px; }
.rec-kako .rec-red { width: 230px; margin: 10px 0 4px; }
.rec-kako .rec-polje { font-size: 20px; }
.rec-ponoc { margin: 12px 0 0 !important; font-size: 13px !important; color: var(--sivo); }
@media (min-width: 900px) { .rec-ploca { width: 360px; } .rec-polje { font-size: 34px; } }