/* 2026-10-02: a korábbi egyetlen tileset-zone-1.png helyett két tileset
   van, azonos mérettel és azonos ikon-pozíciókkal (l.
   plans/28a-hirlevel-megvalositasi-terv.md 1. pont):
     - global (tilesets/tileset-global.png, CSS: var(--tileset-global)):
       felület-ikonok -- csillagok, hangerő-sáv és fogantyú, a menüoldalak
       és a Beállítások popup gomb-ikonjai, zászlók, a tutorial pecsétjei
       és nyilacskája, az áthúzás-kereszt, a zóna-oldal feature-ikonjai,
       a Hírek gomb borítékjai (4. sor 3-4. poz.);
     - board (tilesets/tileset-board.png, CSS: var(--tileset-board), JS:
       window.getBoardTileset): a pálya grafikája -- falak, padlók, ajtók,
       exit, a play oldali tárgyak, a vereség-rács.
   A változók verziózott URL-jét a views/partials/asset-head.hbs adja (l.
   services/asset-versions.js). Az alábbi pozíció-táblázat a régi, közös
   tilesetet írja le; minden ikon ugyanazon a helyen maradt, csak a fenti
   felosztás szerinti fájlba került.

   Központi rács-definíció a tileset sprite-lapokhoz. Minden innen kivágott ikon (exit-button.css
   .scene-action-btn-icon, settings-panel.css .settings-row-icon /
   .language-flag-icon, play.css .win-star-slot) EZEKET a változókat
   használja a background-size/background-position kiszámításához --
   így a tileset PNG bővülésekor (új sor/oszlop) elég EBBEN AZ EGY
   fájlban frissíteni a 3 értéket, nem kell minden egyes .css fájlban
   külön-külön átírni a %-os képleteket.

   Egy cella mérete FIX: 213x213 px (l. alábbi hivatkozás-táblázat).
   A --tileset-img-w / --tileset-img-h a PNG TÉNYLEGES pixelmérete --
   ez azért kell, mert a fájl jobb/alsó szélén üres (teljesen átlátszó)
   kitöltés van a rács hasznos területén túl, ezért a kép valódi mérete
   NEM pontosan nx213 x mx213. A 2026-09-23-i, 7 soros bővítés (l. lent
   a 7. sort) után a PNG tényleges mérete 1717x1537 -- ezt az IHDR
   chunkból (PNG fejléc, szélesség/magasság) lehet ellenőrizni, ha
   legközelebb megint bővül a tileset. Ha valaki a jövőben pontosan a
   rács-méretre vágja/exportálja a PNG-t (jelenleg 1704x1491 = 8x213 x
   7x213), ezt a 2 értéket kell majd 1704-re / 1491-re állítani --
   attól kezdve a lenti képletek pontosan ugyanúgy működnek tovább,
   csak egyszerűbb (kerekebb) közbülső eredményekkel.

   FONTOS: az --tileset-img-w/-h értékeket mindig a PNG tényleges,
   friss pixelméretére kell állítani exportálás után (pl. Windowson
   jobb klikk -> Tulajdonságok -> Részletek, vagy egy képszerkesztő),
   különben az ikonok kivágása elcsúszik -- pontosan ez történt
   2026-09-ben, amikor egy új sor (földgömb-ikon) került a tileset-be,
   de a %-os képletek még a régi (5 soros) mérethez voltak hardcode-olva.

   Hivatkozás-táblázat (sor/oszlop 1-indexeléssel, ahogy a grafikus
   megadta; a --tile-col/--tile-row CSS változók 0-indexeltek, tehát
   mindig -1 eltolással kerülnek a markupba):
     1. sor: 1-6. poz. = padló-csempék, 7. poz. = szürke csillag,
             8. poz. = arany csillag
     2. sor: 1-6. poz. = fal-elemek (lámpa, ív, cellaajtó, exit),
             7. poz. = "EXIT" tábla, 8. poz. = fehér gömb
     3. sor: 1-3. poz. = piros/arany/kék kulcs, 4. poz. = kalapács,
             5. poz. = örvény-ajtó, 6-8. poz. = ládák/hordó
     4. sor: 1-3. poz. = piros/arany/kék lakat-rács, 4. poz. = nyitott
             átjáró, 5. poz. = "vissza" ajtó-ikon (Exit/Settings gomb),
             6. poz. = hangszóró (Hangok), 7. poz. = kotta (Zene),
             8. poz. = fogaskerék (Beállítások)
     5. sor: 1. poz. = üres csík (progress-bar minta), 4. poz. = kék
             csík (progress-bar minta), 7. poz. = magyar zászló,
             8. poz. = angol zászló
             (Megj.: a csík-grafikák [slider-track/-fill/-handle] a
             valóságban KÜLÖN, már kivágott PNG-ként élnek --
             l. settings-panel.css .volume-slider-track/-fill/-handle
             -- ide csak tájékoztatásul került be, mert eredetileg a
             tileset-en belül lettek megtervezve, és VÍZSZINTESEN 3
             egység szélesek (colSpan=3), szemben a többi, 1x1 méretű
             ikonnal.)
     6. sor: 1. poz. = földgömb (Nyelv), 2. poz. = kérdőjel (ismeretlen/
             tartalék grafika, jelenleg nincs felhasználva), 3. poz. =
             hármas kulcs-ikon (kulcsok+kapuk feature), 4. poz. = teleport
             ikon, 5. poz. = kalapács ikon -- ez a 3 utóbbi a zóna-lista
             pálya-címein megjelenő feature-jelvény (l.
             public/css/pages/zone.css .zone-level-feature-icon,
             services/features.js FEATURE_TILE_POSITION,
             plans/19-item-kijelzes-es-ranghoz-rogzites-terv.md 5.5 pont),
             6. poz. = rács (vereség-overlay), 7. poz. = játékos-figura
             (l. game/js/Escape10x10.js TILESET_COL_BARS/TILESET_COL_PLAYER),
             8. poz. = felfelé mutató "figyelem" nyíl (l.
             public/css/components/help-panel.css .help-tutorial-guide-arrow-icon)
     7. sor: 1. poz. = "TELJESÍTVE" pecsét (magyar), 2. poz. = "COMPLETED"
             pecsét (angol), 3. poz. = "elfogyott a lépés" kudarc-pecsét
             (magyar), 4. poz. = ugyanaz (angol) -- l.
             public/css/components/help-panel.css .help-tutorial-stamp,
             6. poz. = áthúzás-kereszt, 7. poz. = kicsinyített szürke
             csillag-hely, 8. poz. = kicsinyített arany csillag (a csempe
             közepén) -- l. public/css/pages/play.css .reward-entry/.reward-star
     8. sor: 1-8. poz. = faltörés-animáció képkockái (kalapáccsal törött
             fal, sorban lejátszva) -- l. game/js/Escape10x10.js
             TILESET_ROW_BREAK_ANIM, csak a játéktér-canvas rajzolja
             (NEM CSS-ből kivágott ikon, mint a többi sor), ide csak
             dokumentációként került be. Ez a board tilesetben van; a
             global tileset 8. sorának 1-3. poz. = nyitott / félig csukott
             / csukott szem (a zóna-oldal "szem" gombjának pislogása, l.
             public/css/pages/zone.css .zone-view-toggle).

   2026-09-26: a PNG-t pontosan a rács-méretre vágták/exportálták (8. sor
   hozzáadásával 8x213=1704 mindkét irányban) -- innentől a fenti,
   "üres kitöltés" miatti óvatosság már nem szükséges, de az
   --tileset-img-w/-h értékeket TOVÁBBRA IS a PNG tényleges pixelméretére
   kell állítani minden jövőbeli exportálás után.
*/
:root {
    --tileset-cell: 213;
    --tileset-img-w: 1704;
    --tileset-img-h: 1704;
}

/* Közös, kicsinyített csillag-ikonok (a tileset 7. sorában: 7. poz. = arany,
   8. poz. = szürke "csillag-hely"), mindkettő a csempe KÖZEPÉN, kb. 35x35 px-es
   ablakban (a kivágás bal-felső sarka: x = col*213+89, y = 6*213+89).
   A kivágás %-os méretezésű, ezért bármilyen elem-mérettel működik -- 35 px-en
   pontosan 1:1 (éles), kisebbre/nagyobbra állítva arányosan skálázódik.
   Használják: play.css .reward-star (a nyerés-popup kártyája is), zone.css .zone-level-star.
   Az elem méretét (width/height) a használó oldal adja meg. */
.reward-star,
.zone-level-star {
    background-image: var(--tileset-global);
    background-repeat: no-repeat;
    background-size: calc(var(--tileset-img-w) / 35 * 100%) calc(var(--tileset-img-h) / 35 * 100%);
    background-position: calc(1580 / (var(--tileset-img-w) - 35) * 100%) calc(1367 / (var(--tileset-img-h) - 35) * 100%);
}

.reward-star.is-earned,
.zone-level-star.is-filled {
    background-position: calc(1367 / (var(--tileset-img-w) - 35) * 100%) calc(1367 / (var(--tileset-img-h) - 35) * 100%);
}