/* pcelica.css · Cliplea · Pčelica (v0.4.110, Spelling Bee). Dugmad, prozori i statistika nose klase iz enigma.css i rec.css (rec-dugme, e-kraj, rec-stat).
   Beli „papir“ (kao kviz i računica): rang sa tačkama, polje unosa, saće od 7 šestougaonih dugmadi (središnje u boji akcenta; pcelica.js ih
   smešta u % kvadratnog kontejnera), dugmad Obriši / Promešaj / Unesi, spisak pronađenih reči. Papir ostaje svetao i u tamnoj temi. */
.pcelica-alati { align-items: center; }
.pcelica-tabla { width: min(100% - 32px, 440px); margin: 0 auto 10px; }
.pcelica-papir { padding: 14px 16px 16px; 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); }
.pcelica-slova-tekst { margin: 0; text-align: center; font-family: var(--naslovni); font-weight: 800; font-size: 22px; letter-spacing: .2em; color: #10306e; }
.pcelica-slova-tekst .centar { color: var(--akcenat); }
.pcelica-rang-vrh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: #4a4e5e; }
.pcelica-rang-vrh b { font-family: var(--naslovni); font-weight: 800; font-size: 18px; color: #10306e; white-space: nowrap; }
.pcelica-rang-traka { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; height: 14px; background: linear-gradient(#e1e4ee, #e1e4ee) center / 100% 2px no-repeat; }
.pcelica-rang-tacka { width: 10px; height: 10px; border-radius: 50%; background: #e1e4ee; box-shadow: 0 0 0 2px #fff; }
.pcelica-rang-tacka.puna { background: var(--akcenat); }
.pcelica-rang-tacka.genije { width: 14px; height: 14px; }
.pcelica-unos-okvir { margin: 4px 0 6px; }
.pcelica-unos { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; font-family: var(--naslovni); font-weight: 800; font-size: 30px; letter-spacing: .06em; color: #10306e; text-transform: uppercase; }
.pcelica-unos .centar { color: var(--akcenat); }
.pcelica-unos .strano { color: #a3a8b8; }
.pcelica-unos .kursor { width: 2px; height: 32px; margin-left: 2px; background: var(--akcenat); animation: pcelica-kursor 1s steps(2) infinite; }
@keyframes pcelica-kursor { 50% { opacity: 0; } }
.pcelica-sace { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto 10px; }
.pcelica-hex { position: absolute; width: 28%; aspect-ratio: 0.866; transform: translate(-50%, -50%); padding: 0; border: 0; background: #e8edf8; color: #10306e; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-family: var(--naslovni); font-weight: 800; font-size: 26px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, transform .08s; }
.pcelica-hex.centar { background: var(--akcenat); color: #fff; }
.pcelica-hex:active { transform: translate(-50%, -50%) scale(.94); }
.pcelica-hex:not(.centar):active { background: #dbe7fa; }
.pcelica-dugmad { display: flex; gap: 8px; justify-content: center; }
.pcelica-dugmad .dugme { min-width: 110px; }
.pcelica-nadjene { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6e7ec; }
.pcelica-nadjene-naslov { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #4a4e5e; }
.pcelica-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pcelica-lista li { padding: 4px 10px; border-radius: 999px; background: #f1f3f8; color: #10306e; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.pcelica-lista li.pangram { background: #fcdce7; color: #7a1b3d; }
.pcelica-lista-sve li { opacity: .55; }
.pcelica-lista-sve li.nadjena { opacity: 1; box-shadow: inset 0 0 0 1.5px #3a9d5d; }
.pcelica-poruka.dobro { color: #0b5c2b; }
.pcelica-poruka.pangram { color: #7a1b3d; font-weight: 800; }
.pcelica-tresi { animation: pcelica-tresi .3s; }
@keyframes pcelica-tresi { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pcelica-kraj .rec-stat { flex-wrap: wrap; gap: 12px 14px; }
.pcelica-kraj .rec-stat b { font-size: 22px; }
.pcelica-kraj-nastavi { font-size: 14px; color: var(--sivo); }
.pcelica-kako-rangovi { font-size: 13px; color: var(--sivo); }
.pcelica-sve .pcelica-lista { max-height: 50vh; overflow: auto; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .pcelica-tresi { animation: none; } .pcelica-unos .kursor { animation: none; } .pcelica-hex { transition: none; } }
@media (min-width: 900px) { .pcelica-tabla { width: 460px; } .pcelica-sace { width: 320px; } }