/* "Szép" jelölőnégyzet: a natív checkbox rejtve marad (de fókuszálható és
   kattintható a <label>-en át), helyette a global tileset két ikonja
   látszik -- 3. sor 1. poz. (0-tól: sor 2, oszlop 0) = üres, 3. sor 2. poz.
   (sor 2, oszlop 1) = bejelölt. A felirat a játék dísz-betűtípusa.
   Használat:
     <label class="fancy-checkbox">
         <input type="checkbox" ...>
         <span class="fancy-checkbox-box" aria-hidden="true"></span>
         <span class="fancy-checkbox-text">...</span>
     </label>
   L. a Beállítások popupot és a Hírek popupot (views/layouts/minimal.hbs). */
.fancy-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    user-select: none;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    line-height: 1.25;
}

.fancy-checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.fancy-checkbox-box {
    flex-shrink: 0;
    width: 1.9em;
    height: 1.9em;
    background-image: var(--tileset-global);
    background-repeat: no-repeat;
    background-size: calc(var(--tileset-img-w) / var(--tileset-cell) * 100%) calc(var(--tileset-img-h) / var(--tileset-cell) * 100%);
    background-position:
        calc(0 * var(--tileset-cell) / (var(--tileset-img-w) - var(--tileset-cell)) * 100%)
        calc(2 * var(--tileset-cell) / (var(--tileset-img-h) - var(--tileset-cell)) * 100%);
    filter: drop-shadow(0 0.1em 0.2em rgba(0, 0, 0, 0.45));
    transition: transform .12s ease;
}

.fancy-checkbox input:checked + .fancy-checkbox-box {
    background-position:
        calc(1 * var(--tileset-cell) / (var(--tileset-img-w) - var(--tileset-cell)) * 100%)
        calc(2 * var(--tileset-cell) / (var(--tileset-img-h) - var(--tileset-cell)) * 100%);
}

.fancy-checkbox:hover .fancy-checkbox-box {
    transform: scale(1.08);
}

.fancy-checkbox input:focus-visible + .fancy-checkbox-box {
    outline: 2px solid #ffe58a;
    outline-offset: 2px;
    border-radius: 0.3em;
}