/* sifra.css · Cliplea · Šifra (v0.4.109, Skočko iz Slagalice). Dugmad, prozori i statistika nose klase iz enigma.css i rec.css (rec-dugme, e-kraj, rec-stat).
   Tabla na belom „papiru“ (kao kviz, računica, osmosmerka): šest redova × četiri polja sa ikonicom simbola + ocena (četiri tačke: crvene, žute, sive),
   paleta šest simbola, ⌫ i „Proveri“. Papir ostaje svetao i u tamnoj temi. */
.sifra-alati { align-items: center; }
.sifra-brojac { margin-left: auto; font-family: var(--naslovni); font-weight: 800; font-size: 16px; color: var(--naslov); white-space: nowrap; }
.sifra-tabla { width: min(100% - 32px, 420px); margin: 0 auto 10px; }
.sifra-papir { padding: 14px 14px 12px; border-radius: 12px; background: #fff; color: #1c1e26; box-shadow: 0 2px 8px rgba(21, 26, 45, .14), 0 0 0 1px rgba(21, 26, 45, .06); }
.sifra-redovi { display: flex; flex-direction: column; gap: 8px; }
.sifra-red { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 52px; gap: 8px; align-items: center; border-radius: 10px; }
.sifra-polje { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1.5px solid #e1e4ee; border-radius: 10px; background: #f7f8fc; }
.sifra-polje .sifra-ikona { width: 62%; height: 62%; }
.sifra-red.tekuci .sifra-polje { border-color: #10306e; background: #fff; cursor: pointer; }
.sifra-red.tekuci .sifra-polje.prazno { border-style: dashed; cursor: default; }
.sifra-red.buduci .sifra-polje { opacity: .5; }
.sifra-red.gotov .sifra-polje { background: #fff; }
.sifra-ocena { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 38px; justify-self: center; }
.sifra-tacka { display: block; width: 17px; height: 17px; border-radius: 50%; background: #e1e4ee; }
.sifra-tacka.crveno { background: #d93025; }
.sifra-tacka.zuto { background: #e8b400; }
.sifra-paleta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.sifra-simbol { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #cdd3e4; border-radius: 10px; background: #fff; box-shadow: 0 1px 1.5px rgba(21, 26, 45, .22); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, opacity .12s; }
.sifra-simbol .sifra-ikona { width: 64%; height: 64%; }
.sifra-simbol:disabled { opacity: .35; cursor: default; }
.sifra-simbol:active:not(:disabled) { background: #dbe7fa; }
.sifra-dugmad { display: flex; gap: 8px; margin-top: 10px; }
.sifra-dugmad .dugme { flex: 1; }
.sifra-brisi { flex: none; width: 56px; border: 1px solid #cdd3e4; border-radius: 10px; background: #fff; color: #10306e; font-size: 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sifra-brisi:disabled { opacity: .4; cursor: default; }
.sifra-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; width: min(100% - 32px, 420px); margin: 0 auto 12px; font-size: 13px; color: var(--sivo); }
.sifra-legenda .sifra-tacka { display: inline-block; vertical-align: middle; width: 12px; height: 12px; margin: -2px 5px 0 0; }
.sifra-tresi { animation: sifra-tresi .3s; }
@keyframes sifra-tresi { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sifra-kockice { font-size: 20px !important; line-height: 1.3; white-space: pre-line; letter-spacing: 2px; margin: 0 0 8px !important; }
.sifra-kraj-oznaka { margin: 4px 0 6px !important; font-size: 14px; color: var(--sivo); }
.sifra-resenje { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
.sifra-resenje .sifra-polje { width: 46px; background: #fff; }
.sifra-kraj .rec-stat { flex-wrap: wrap; gap: 12px 16px; }
.sifra-kraj .rec-stat b { font-size: 22px; }
.sifra-kako-simboli { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 6px 0 0; }
.sifra-kako-simbol { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--sivo); }
.sifra-kako-simbol .sifra-ikona { width: 30px; height: 30px; }
html[data-tema="tamna"] .sifra-legenda, html[data-tema="tamna"] .sifra-kako-simbol { color: #b4b8c6; }
@media (prefers-reduced-motion: reduce) { .sifra-tresi { animation: none; } .sifra-simbol { transition: none; } }
@media (min-width: 900px) { .sifra-tabla, .sifra-legenda { width: 440px; } }