/* Megosztott "teljes képernyős, fix arányú, középre igazított jelenet" minta.
   Minden screen_bg/*.png háttérkép pontosan 1672x941 px, ezért ugyanaz a
   letterbox-fit technika használható login / főmenü / börtön-térkép oldalakon. */

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #05070d;
}

.scene-viewport {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #05070d;
}

.scene {
    position: relative;
    aspect-ratio: 1672 / 941;
    width: 100%;
    height: 100%;
    max-width: calc(100vh * 1672 / 941);
    max-height: calc(100vw * 941 / 1672);
    /* Így a benne lévő HUD-elemek (info panel, exit gomb, stb.) cqw egységgel
       pontosan a jelenet tényleges (letterboxolt) méretéhez arányosan
       skálázhatók, ugyanúgy, mint maga a háttérkép. */
    container-type: inline-size;
}

.scene-bg,
.scene-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
}

.scene-bg {
    z-index: 0;
    /* Egy lejátszott <video> Chromium-ban időnként saját, külön GPU-rétegen
       kompozitálódik. Ha egy testvér-elem opacity-je változik (pl. hover-
       overlay), a böngésző néha újraépíti a réteg-sorrendet, és emiatt a
       videó fölé rétegzett elemek (info panel, exit gomb) egy kockányi
       időre eltűnhetnek. A z-index + saját compositing réteg kikényszerítése
       (will-change/transform) stabilizálja a rétegsorrendet. */
    will-change: transform;
    transform: translateZ(0);
}

.scene-overlay {
    z-index: 1;
    opacity: 0;
    transition: opacity .15s ease;
    will-change: opacity;
}

.scene-overlay.is-active {
    opacity: 1;
}

.scene-hotspot {
    position: absolute;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover-felirat a hotspot tetejének közepén -- pontosan akkor jelenik meg,
   amikor a szegély is (l. public/js/scene-shell.js wireSceneContent:
   ugyanaz a mouseenter/mouseleave pár váltja az overlay-kép .is-active
   osztályát is), mert mindkettő ugyanarra a .scene-hotspot :hover
   állapotra épül. Azonos betűtípus, mint a Settings/Exit gomb felirata
   (l. exit-button.css .scene-action-btn-label) -- a "Térkép" feliratnak
   (l. .scene-hotspot-label--large a main-menu.hbs-ben) a másik kettőnél
   nagyobb méret jár. */
.scene-hotspot-label {
    color: #fff;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.7cqw;
    letter-spacing: 0.02em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    /* Sötétszürke (NEM fekete) körvonal a betűkön (a legtöbb böngészőben,
       l. -webkit-text-stroke) + egy text-shadow "kézi körvonal" ugyanabból
       a 4 irányból, ami MINDEN böngészőben működik (a -webkit-text-stroke
       nélkülieknél ez adja az olvashatóságot) -- erre rátéve egy erősebb,
       nagyobb kontrasztú homályos árnyék is, hogy világos hátterű
       jeleneteken (pl. a térkép) se vesszen el a felirat. */
    -webkit-text-stroke: 0.05em rgba(30, 30, 30, 0.95);
    paint-order: stroke fill;
    text-shadow:
        -0.06em -0.06em 0 rgba(30, 30, 30, 0.95),
         0.06em -0.06em 0 rgba(30, 30, 30, 0.95),
        -0.06em  0.06em 0 rgba(30, 30, 30, 0.95),
         0.06em  0.06em 0 rgba(30, 30, 30, 0.95),
        0 0.15em 0.4em rgba(0, 0, 0, 0.95),
        0 0 0.9em rgba(0, 0, 0, 0.9);
}

.scene-hotspot-label--large {
    font-size: 2.5cqw;
}

.scene-hotspot:hover .scene-hotspot-label {
    opacity: 0.8;
}

/* Navigáció közben (scene-shell.js) letiltjuk a kattintást, hogy az
   átúszó animáció alatt ne lehessen újabb navigációt indítani. */
.scene.is-navigating {
    pointer-events: none;
}