/* niti.css · Cliplea · Niti (v0.4.117, kao NYT Strands). Dugmad, prozori i statistika nose klase iz enigma.css i rec.css (rec-dugme, e-kraj, rec-stat).
   Tabla 6 × 8 okruglih slova na belom „papiru“; izabrana slova plava sa linijom, nađene tematske reči plave, nit žuta, pomoć = isprekidan obrub.
   Papir ostaje svetao i u tamnoj temi. */
.niti-tema { width: min(100% - 32px, 400px); margin: 0 auto 6px; padding: 10px 14px; border-radius: 10px; background: #eef2fb; color: #10306e; text-align: center; font-size: 16px; }
.niti-tema-oznaka { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5c6070; margin-right: 4px; }
.niti-tema b { font-family: var(--naslovni); font-weight: 800; font-size: 18px; }
.niti-alati { align-items: center; flex-wrap: wrap; width: min(100% - 32px, 400px); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.niti-brojac { margin-right: auto; font-family: var(--naslovni); font-weight: 800; font-size: 16px; color: var(--naslov); white-space: nowrap; }
.niti-pomoc { position: relative; overflow: hidden; }
.niti-pomoc::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--niti-napredak, 0%); background: var(--akcenat); transition: width .3s; }
.niti-pomoc.spremna { background: var(--akcenat); border-color: var(--akcenat); color: #fff; }
.niti-pomoc.spremna::after { display: none; }
.niti-pomoc:disabled { opacity: .5; }
.niti-izbor { min-height: 30px; margin: 2px auto 4px; width: min(100% - 32px, 400px); text-align: center; font-family: var(--naslovni); font-weight: 800; font-size: 22px; letter-spacing: .12em; color: var(--naslov); }
.niti-mreza { position: relative; width: min(100% - 32px, 400px); margin: 0 auto 10px; padding: 10px; border-radius: 14px; background: #fff; color: #1c1e26; box-shadow: 0 2px 8px rgba(21, 26, 45, .14), 0 0 0 1px rgba(21, 26, 45, .06); -webkit-user-select: none; user-select: none; touch-action: none; }
.niti-staticno { border-collapse: collapse; width: 100%; font-family: var(--naslovni); font-weight: 800; font-size: 20px; text-align: center; }
.niti-staticno td { padding: 6px 0; }
.niti-tabla { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.niti-linije { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.niti-linije polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 8px; vector-effect: non-scaling-stroke; }
.niti-linije .izbor { stroke: #bcd2fb; }
.niti-linije .tema { stroke: #bcd2fb; }
.niti-linije .nit { stroke: #f6e27a; }
.niti-polje { position: relative; z-index: 1; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.niti-slovo { display: flex; align-items: center; justify-content: center; width: 72%; height: 72%; border-radius: 50%; font-family: var(--naslovni); font-weight: 800; font-size: clamp(17px, 5vw, 24px); line-height: 1; color: #1c1e26; transition: background .12s, color .12s, transform .12s; }
.niti-polje.izbor .niti-slovo { background: #bcd2fb; color: #10306e; }
.niti-polje.tema .niti-slovo { background: #a9c4f5; color: #10306e; }
.niti-polje.nit .niti-slovo { background: #f6e27a; color: #4a3b00; }
.niti-polje.pomoc .niti-slovo { box-shadow: inset 0 0 0 2.5px #10306e; outline: 2px dashed #10306e; outline-offset: 2px; }
.niti-polje.pomoc.izbor .niti-slovo, .niti-polje.pomoc.tema .niti-slovo, .niti-polje.pomoc.nit .niti-slovo { outline: none; box-shadow: none; }
.niti-polje.promasaj .niti-slovo { background: #fde2e4; color: #c62828; }
.niti-polje.pogodak .niti-slovo { transform: scale(1.12); }
.niti-nadjene { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(100% - 32px, 400px); margin: 0 auto 12px; padding: 0; list-style: none; }
.niti-nadjene li { padding: 4px 10px; border-radius: 999px; background: #dbe7fa; color: #10306e; font-size: 13px; font-weight: 700; }
.niti-nadjene li.nit { background: #f6e27a; color: #4a3b00; }
.niti-nadjene li.ostale { background: #eef0f5; color: #5c6070; font-weight: 600; }
.niti-tresi { animation: niti-tresi .3s; }
@keyframes niti-tresi { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.niti-kraj-niz { font-size: 22px !important; letter-spacing: 2px; margin: 0 0 8px !important; }
.niti-kraj .rec-stat { flex-wrap: wrap; gap: 12px 16px; }
.niti-kraj .rec-stat b { font-size: 20px; }
html[data-tema="tamna"] .niti-tema { background: #1b2540; color: #dbe7fa; }
html[data-tema="tamna"] .niti-tema-oznaka { color: #b4b8c6; }
@media (prefers-reduced-motion: reduce) { .niti-tresi { animation: none; } .niti-slovo { transition: none; } .niti-pomoc::after { transition: none; } }
@media (min-width: 900px) { .niti-tema, .niti-alati, .niti-izbor, .niti-mreza, .niti-nadjene { width: 420px; } .niti-slovo { font-size: 26px; } }