/* osmosmerka.css · Cliplea · Osmosmerka (v0.4.62; izgled po OSMIK-u v0.4.63). Dugmad, prozori i statistika nose klase iz enigma.css i rec.css.
   Tabla = beli „papir“ bez ivica i razmaka (kao OSMIK, tema „Moderna“ u bojama sajta); pronađene reči i selekcija su SVG linije-markeri
   preko slova (osmosmerka.js). Tabla ostaje svetla i u tamnoj temi (kao sudoku), pilule pojmova imaju tamnu varijantu. */
.osm { --osm-pilula: #e8edf8; --osm-pilula-tekst: var(--naslov); }
html[data-tema="tamna"] .osm { --osm-pilula: #2b3246; --osm-pilula-tekst: #e3e5ec; }
.osm .enigma-vrh { padding-bottom: 2px; }
.osm-tema { margin: 0; padding: 2px 16px 6px; text-align: center; font-family: var(--naslovni); font-weight: 800; font-size: 20px; color: var(--naslov); }
.osm-alati { max-width: 512px; margin-left: auto; margin-right: auto; align-items: center; }
.osm-alati .e-sat { margin-right: auto; font-family: var(--naslovni); font-weight: 800; font-size: 18px; color: var(--naslov); min-width: 56px; }
.osm-mreza { width: min(100% - 32px, 480px); margin: 4px auto 12px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(21, 26, 45, .16), 0 0 0 1px rgba(21, 26, 45, .06); touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.osm-tabla { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); }
.osm-polje { box-sizing: border-box; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: #1c1e26; font-family: var(--naslovni); font-weight: 700; font-size: clamp(14px, 4.4vw, 22px); line-height: 1; -webkit-tap-highlight-color: transparent; border-right: 1px solid rgba(230, 48, 111, .18); border-bottom: 1px solid rgba(230, 48, 111, .18); }   /* v0.4.64: blage roze linije razdvajaju polja (vlasnik) */
.osm-polje:nth-child(12n) { border-right: 0; }
.osm-polje:nth-child(n+133) { border-bottom: 0; }
.osm-linije { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.osm-linije line { fill: none; stroke-linecap: round; stroke-width: .62; }
.osm-linije .osm-nadjena { stroke: var(--akcenat); stroke-opacity: .35; }
.osm-linije .osm-izbor { stroke: #10306e; stroke-opacity: .3; }
.osm-linije .osm-izbor.promasaj { stroke: #c62828; stroke-opacity: .45; animation: osm-bljesak .35s; }
@keyframes osm-bljesak { 0%, 100% { stroke-opacity: .45; } 50% { stroke-opacity: .12; } }
.osm-poruka { margin-bottom: 8px; }
.osm-reci { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(100% - 32px, 512px); margin: 0 auto 14px; padding: 0; }
.osm-reci li { padding: 5px 11px; border: 1.5px solid transparent; border-radius: 14px; background: var(--osm-pilula); color: var(--osm-pilula-tekst); font-weight: 700; font-size: 14px; letter-spacing: .02em; transition: opacity .3s; }
.osm-reci li.nadjena { order: 1; opacity: .45; text-decoration: line-through; }
.osm-reci li.otkrivena { border-color: rgba(230, 48, 111, .6); }
@media (prefers-reduced-motion: reduce) { .osm-linije .osm-izbor.promasaj { animation: none; } .osm-reci li { transition: none; } }
.osm-kraj .rec-stat b { font-size: 24px; }
@media (min-width: 900px) { .osm-mreza { width: 500px; } .osm-polje { font-size: 22px; } .osm-alati, .osm-reci { max-width: 532px; width: 532px; } }