/* A .scene sarkában (illetve a "play" oldalon az oldalsáv közepén) megjelenő
   Exit/Settings gomb-pár -- l. views/partials/scene-action-buttons.hbs,
   exit-button.hbs, settings-button.hbs. Az ikonok a
   global tileset (l. components/tileset-grid.css) rácsának 4. sorából jönnek
   (%-alapú sprite-technika, mint az info-panel.css .avatar-sprite/
   .rank-medal-sprite), a teljes rács 8 oszlop x 5 sor. Hover esetén a gomb
   MÉRETE nem változik -- helyette jobbra fehér felirat jelenik meg (a
   'Denk One' Google Font, ugyanaz, mint a játék logója -- l.
   views/layouts/main.hbs <head>, már betöltve minden oldalon, és a
   latin-ext subsetje lefedi az ő/ű ékezeteket is). Nincs külön keret. */
.scene-action-buttons {
    position: absolute;
    left: 2cqw;
    bottom: 2cqw;
    display: flex;
    flex-direction: column;
    gap: 0.8cqw;
    z-index: 10;
}

/* Inline változat: a "play" oldal bal oldalsávjában, a Controls szekció
   alatt, vízszintesen középre helyezve jelenik meg (nem a jelenet szélén
   lebegve), ezért a pozicionálást a normál flow-ra kell váltani. */
.scene-action-buttons.scene-action-buttons--inline {
    position: relative;
    left: auto;
    bottom: auto;
    align-items: center;
}

.scene-action-btn {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.3em;
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

/* 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. */
.scene-action-btn-icon {
    width: 5.5cqw;
    height: 5.5cqw;
    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;
    filter: drop-shadow(0 0.2em 0.4em rgba(0, 0, 0, 0.5));
}

.scene-action-btn-label {
    color: #fff;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.7cqw;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .15s ease, opacity .15s ease, margin-left .15s ease;
    /* Ugyanaz a sötétszürke körvonal + kontraszt-árnyék, mint a főmenü
       hotspot-feliratain (l. scene.css .scene-hotspot-label) -- azonos
       olvashatósági indok, világos hátterű jeleneteken (pl. a térkép) itt
       is elveszne a fehér felirat körvonal nélkül. */
    -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-action-btn:hover .scene-action-btn-label {
    max-width: 14em;
    opacity: 1;
    margin-left: 0.2em;
}

/* A "play" oldal oldalsávjában nincs elég hely a felirat kiúszásához --
   ott a felirat véglegesen rejtve marad, hover esetén pedig maga a gomb
   (ikon) emelkedik meg egy kicsit, ahelyett hogy felirat jelenne meg. */
.scene-action-buttons--inline .scene-action-btn-label {
    display: none;
}

.scene-action-buttons--inline .scene-action-btn {
    transition: transform .15s ease;
}

.scene-action-buttons--inline .scene-action-btn:hover {
    transform: translateY(-0.3em);
}