/* Beállítások popup (zene/hangok hangereje) -- a markup a
   views/layouts/main.hbs layout-ban él (a .scene-en kívül, hogy
   SPA-navigáció ne érintse), a nyitó/záró logika public/js/settings-panel.js.
   Vizuálisan a play.css .result-panel/.rankup-panel mintáját követi
   (sötét, áttetsző panel + arany gomb), mert a játék-UI része. */
.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 16, 0.55);
}

.settings-overlay[hidden] {
    display: none;
}

.settings-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.3em;
    width: min(34em, 92vw);
    padding: 1.8em 2.2em 2em;
    background: rgba(40, 44, 52, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.2em;
    box-shadow: 0 1em 3em rgba(0, 0, 0, 0.6);
    color: #e7ecf5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    transform: translateY(-12%);
    transition: opacity 0.25s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* A panel-cím (és a többi popup-panel címe, l. profile-panel.css
   .profile-panel-title / zone.css .rankup-panel-title) ugyanazt a
   betűtípust használja, mint a gombok feliratai (l. exit-button.css
   .scene-action-btn-label): fehér kitöltés + sötétszürke (NEM sárga,
   NEM fekete) körvonal. A körvonalat KIZÁRÓLAG -webkit-text-stroke adja;
   a text-shadow itt csak lágy, elmosódott háttér-árnyék (nem duplázott
   "kézi körvonal" -- a korábbi 4px-es, nagy eltolású text-shadow-másolatok
   önálló, látványosan elcsúszott "szellem-feliratként" jelentek meg a
   vastag körvonal mellett, ez okozta a duplán megjelenő címet). */
.settings-panel-title {
    font-size: 1.8rem;
    text-align: center;
    color: #fff;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-text-stroke: 2px rgba(60, 60, 60, 0.9);
    paint-order: stroke fill;
    text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.6);
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 0.9em;
}

/* A kivágás képlete a components/tileset-grid.css :root változóit
   használja (cella-méret + a PNG tényleges pixelmérete) -- l. ott a
   részletes magyarázatot és a pozíció-táblázatot. */
.settings-row-icon {
    width: 2.6em;
    height: 2.6em;
    flex-shrink: 0;
    background-image: var(--tileset-global);
    background-size: calc(var(--tileset-img-w) / var(--tileset-cell) * 100%) calc(var(--tileset-img-h) / var(--tileset-cell) * 100%);
    background-position:
        calc(var(--tile-col, 0) * var(--tileset-cell) / (var(--tileset-img-w) - var(--tileset-cell)) * 100%)
        calc(var(--tile-row, 0) * var(--tileset-cell) / (var(--tileset-img-h) - var(--tileset-cell)) * 100%);
    background-repeat: no-repeat;
}

/* Jelölőnégyzetes sorok (Szabályok, Hírlevél): ikon + felirat (a többi
   sorral azonos szélességű .settings-row-label) + a közös
   components/fancy-checkbox.css jelölőnégyzete rövid szöveggel. Így a
   jelölőnégyzet ott kezdődik, ahol a nyelv-sorban a magyar zászló
   gombjának kerete. A negatív margó a tileset-cella átlátszó bal szélét (a
   négyzet-grafika a 213 px-es cellában 13 px-nél kezdődik) vonja le, hogy a
   látható négyzet bal széle essen a zászló-keret vonalára. */
.settings-row-checkbox .fancy-checkbox {
    flex: 1 1 auto;
    font-size: 1.1rem;
    --fancy-box-size: 2.2em;
}

.settings-row-checkbox .fancy-checkbox-box {
    width: var(--fancy-box-size);
    height: var(--fancy-box-size);
    margin-left: calc(var(--fancy-box-size) * -13 / 213);
}

.settings-row-label {
    flex-shrink: 0;
    width: 5.6em;
    font-size: 1.2rem;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Nyelv-választó (l. plans/14-tobbnyelvuseg_terv.md 6. pont) -- 2 gomb,
   mindegyik egy zászló-ikonnal (tileset sprite, ugyanaz a technika, mint
   a .settings-row-icon) + a nyelv saját nevével. Szöveg-gomb stílus,
   ugyanaz a betűtípus/hover-emelkedés, mint a .result-panel-btn-nél. */
.language-switch {
    display: flex;
    gap: 0.6em;
    flex: 1 1 auto;
}

/* A felirat ("Magyar"/"English") a zászló ALATT jelenik meg (nem
   mellette), hogy a zászló-ikon nagyobb méretben férjen el -- l.
   .language-flag-icon lent. A keret (szürke vagy aktív esetén sárga)
   1px-szel vastagabb, mint a többi hasonló gombkeret, ezért `calc`-kal
   adjuk hozzá az em-alapú vastagsághoz. */
.language-flag-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    padding: 0.5em 0.9em 0.4em;
    background: none;
    border: calc(0.12em + 1px) solid rgba(255, 255, 255, 0.25);
    border-radius: 0.7em;
    color: #fff;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.language-flag-btn:hover {
    transform: translateY(-0.15em);
}

.language-flag-btn.is-active {
    border-color: #ffe58a;
    background: rgba(255, 229, 138, 0.15);
}

/* L. exit-button.css .scene-action-btn-icon fölötti komment -- ugyanaz a
   components/tileset-grid.css-beli, PNG-mérettől független képlet. */
.language-flag-icon {
    width: 3.2em;
    height: 3.2em;
    flex-shrink: 0;
    background-image: var(--tileset-global);
    background-size: calc(var(--tileset-img-w) / var(--tileset-cell) * 100%) calc(var(--tileset-img-h) / var(--tileset-cell) * 100%);
    background-position:
        calc(var(--tile-col, 0) * var(--tileset-cell) / (var(--tileset-img-w) - var(--tileset-cell)) * 100%)
        calc(var(--tile-row, 0) * var(--tileset-cell) / (var(--tileset-img-h) - var(--tileset-cell)) * 100%);
    background-repeat: no-repeat;
}

.settings-panel-close-btn {
    align-self: center;
    margin-top: 0.4em;
    font-size: 1.1rem;
    padding: 0.6em 1.8em;
}

/* Hangerőszabályzó ("potméter"): 3 réteg -- háttér-sín (track), a fölé
   rakott, dinamikusan szélesített kék "érték-vonal" (fill, egy fixmé-retű
   képet vágunk le --value arányban) és egy húzható gomb (handle). A
   --value CSS custom property (0..1) mind a három rétegen elérhető, mert
   a .volume-slider elemen van beállítva (öröklődik) -- l.
   public/js/settings-panel.js.

   A track/fill KÖZVETLENÜL a global tileset-ből (tileset-global.png)
   töltődik: mindkettő vízszintesen 3 cella (639 x 213 px) széles terület
   az 5. sorban (0-tól: sor 4) -- 1-3. poz. = üres sín, 4-6. poz. = kék
   kitöltés. A két terület ugyanúgy van elhelyezve a saját 3 cellájában,
   ezért egymásra téve pontosan fedik egymást.

   TORZÍTÁSMENTES méretezés: a tileset-képet EGYETLEN arányszámmal (--s =
   a doboz szélessége / 639 px) skálázzuk mindkét irányban, és a doboz
   csak a grafika függőleges sávját mutatja (a cellák fölötte/alatta lévő
   átlátszó részét levágjuk). A mért értékek (2026-10-02, a tileset
   átlátszatlan pixelei alapján):
     - sín: x 1..637, y 54..158 (a 3-cellás területen belül);
     - kitöltés: x 26..611, y 74..133 (a sín vájatával pontosan fed);
     - a sín krémszínű keretének közepe: bal oldalon x 18, jobb oldalon x 618.
   A gomb (handle) KÖZEPE 0%-nál x 56-on, 100%-nál x 580-on áll (--knob-
   start / --knob-span, ugyanezek a public/js/settings-panel.js-ben is):
   a gomb látható köre kb. 38 px sugarú, így a széle épp a keret közepéig
   ér, nem lóg ki a sínből. A kék kitöltés a gomb közepéig látszik.
   A doboz a 3-cellás terület y 50..162 sávját mutatja (--band-top,
   --band-h). Ha a tileset sáv-grafikája változik, ezeket a számokat kell
   újramérni. A handle a szokásos 1x1 cellás technikával jön, négyzetes
   dobozban (l. lentebb .volume-slider-handle). */
.volume-slider {
    position: relative;
    --slider-w: 15em;
    --s: calc(var(--slider-w) / 639);
    --band-top: 50;
    --band-h: 112;
    --knob-start: 56;
    --knob-span: 524;
    --knob-x: calc((var(--knob-start) + var(--knob-span) * var(--value, 1)) * var(--s));
    --handle-size: 2.4em;
    /* Rögzített méret -- NEM nyúlhat (flex-grow:0), különben a ténylegesen
       renderelt szélesség eltérne a --slider-w-től, és a húzáskor számolt
       egér-arány (public/js/settings-panel.js) nem egyezne a sávval. */
    flex: 0 0 var(--slider-w);
    width: var(--slider-w);
    height: calc(var(--band-h) * var(--s));
    --value: 1;
    cursor: pointer;
    touch-action: none;
}

.volume-slider-track,
.volume-slider-fill-img {
    background-image: var(--tileset-global);
    background-repeat: no-repeat;
    background-size: calc(var(--tileset-img-w) * var(--s)) calc(var(--tileset-img-h) * var(--s));
}

.volume-slider-track {
    position: absolute;
    inset: 0;
    background-position: 0 calc((-4 * var(--tileset-cell) - var(--band-top)) * var(--s));
    pointer-events: none;
}

/* A kitöltés PONTOSAN ugyanakkora és ugyanott lévő doboz, mint a sín, és
   nem egy levágó (overflow:hidden) szülő vágja, hanem a saját clip-path-ja.
   Egy levágó dobozt a böngésző egész pixelre igazít, a sín hátterét viszont
   tört pixelre rajzolja -- kicsinyítve ettől csúszott el a kék sáv a
   vájathoz képest. */
.volume-slider-fill-clip {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.volume-slider-fill-img {
    position: absolute;
    inset: 0;
    background-position:
        calc(-3 * var(--tileset-cell) * var(--s))
        calc((-4 * var(--tileset-cell) - var(--band-top)) * var(--s));
    clip-path: inset(0 calc(var(--slider-w) - var(--knob-x)) 0 0);
}

.volume-slider-handle {
    position: absolute;
    top: 50%;
    left: calc(var(--knob-x) - var(--handle-size) / 2);
    width: var(--handle-size);
    height: var(--handle-size);
    transform: translateY(-50%);
    /* Ez már a szokásos 1x1 cellás tileset-kivágás (l.
       components/tileset-grid.css) -- 2. sor (1-indexelt, 0-indexelten
       1), 8. poz. (0-indexelten 7) = fehér gömb. */
    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(7 * var(--tileset-cell) / (var(--tileset-img-w) - var(--tileset-cell)) * 100%)
        calc(1 * var(--tileset-cell) / (var(--tileset-img-h) - var(--tileset-cell)) * 100%);
    filter: drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.5));
    pointer-events: none;
    transition: filter .1s ease;
}

.volume-slider.is-dragging .volume-slider-handle {
    filter: drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.5)) brightness(1.1);
}