.play-container, .run-container, .run-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    /* A canvas (fix 700x700px) középre kerüljön a #game-container-en belül,
       ne a bal felső sarokhoz tapadjon. */
    align-items: center;
    justify-content: center;
}

#runFrame {
    flex-grow: 1;
    border: none;
}

/* --- "play" oldal elrendezése (scene-alapú, l. views/pages/play.hbs) --- */

.play-page-layer {
    position: relative;
    width: 100%;
    height: 100%;
}

.play-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26cqw;
    z-index: 1;
    pointer-events: none;
    /* Csak a kliensoldali belépő animáció (scene-shell.js) villantja fel
       átmenetileg -- egy sima (nem SPA) oldalbetöltésen alapból rejtve marad,
       nehogy átlásszon a .play-layout réseinél. */
    opacity: 0;
}

.play-layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap: 1.2cqw;
    /* A "play" oldalon nincs felső infó-sáv, ezért nem kell neki helyet
       hagyni -- a háromhasábos elrendezés a teljes magasságot kihasználja. */
    padding: 1.5cqw;
    box-sizing: border-box;
}

.play-sidebar {
    width: 17cqw;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(20, 26, 38, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8em;
    box-sizing: border-box;
    overflow-y: hidden;
    color: #e7ecf5;
    font-size: 1cqw;
}

.play-sidebar-exit-row {
    margin-top: auto;
    padding-top: 1cqw;
    display: flex;
    justify-content: center;
}

.play-main {
    position: relative;
    flex: 1;
    min-width: 0;
    background: rgba(10, 14, 22, 0.55);
    border-radius: 1em;
    overflow: hidden;
}

/* Jutalmak (a pálya csillag-szintjei) -- l. views/pages/play.hbs
   .rewards-panel, public/js/play.js updateRewards. Egy bejegyzés: felül a
   szint csillagai (középre igazítva), alatta 50-50%-ban az XP és a
   szükséges hátralévő lépésszám. Ha a szint már nem elérhető, a
   bejegyzés elszürkül és piros kereszt kerül rá (.is-lost). */
.rewards-panel {
    text-align: center;
}

.rewards-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.reward-entry {
    position: relative;
    padding: 0;
    /* A két sáv (.reward-stars sötétebb, .reward-values világosabb) külön
       kapja a lekerekített felső/alsó sarkot (overflow nem vágja le, mert a
       zöld pipa kilóg a keretből). */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.6em;
    color: #e2e8f0;
    font-weight: 700;
    transition: filter .3s ease, opacity .3s ease;
    margin-left: 1em;
    margin-right: 1em;
}

.reward-stars {
    display: flex;
    justify-content: center;
    gap: 0.1em;
    padding: 0.25em 0.4em 0.1em;
    border-radius: 0.6em 0.6em 0 0;
    background: rgba(0, 0, 0, 0.28);
}

/* A csillag-ikon kivágása a közös components/tileset-grid.css-ben van. */
.reward-star {
    width: 35px;
    height: 35px;
}

.reward-values {
    display: flex;
    padding: 0.5em 0.4em;
    border-radius: 0 0 0.6em 0.6em;
    background: rgba(255, 255, 255, 0.07);
}

.reward-xp,
.reward-steps {
    flex: 1 1 50%;
    text-align: center;
    font-size: 1.2em;
}

/* "Még nem használhatod: ..." -- feltűnő, borostyánszínű figyelmeztetés a
   csillag-szintek alatt, ha a pályán van a játékos rangján még nem
   használható feature (l. plans/27 4. pont, views/pages/play.hbs). */
.feature-not-usable-notice {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 1.2em 1em 0;
    padding: 0.7em 0.9em;
    border: 1px solid rgba(251, 191, 36, 0.75);
    border-radius: 0.6em;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.3), rgba(217, 119, 6, 0.2));
    color: #fde68a;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 0 0.8em rgba(251, 191, 36, 0.35);
    animation: feature-not-usable-glow 1.8s ease-in-out infinite;
}

.feature-not-usable-notice .fa-lock {
    flex-shrink: 0;
    font-size: 1.2em;
}

@keyframes feature-not-usable-glow {
    0%, 100% { box-shadow: 0 0 0.5em rgba(251, 191, 36, 0.25); }
    50% { box-shadow: 0 0 1.2em rgba(251, 191, 36, 0.6); }
}

/* Egy korábban már elért szint: zöldített háttér + zöld pipa a jobb szélen,
   ugyanúgy, mint a teljesített pályák a zóna-listán (l. zone.css .is-won,
   .zone-level-won-icon). */
.reward-entry.is-earned {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.28), rgba(34, 197, 94, 0.14));
    border-color: rgba(74, 222, 128, 0.5);
}

.reward-earned-icon {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -45%);
    font-size: 1.1em;
    z-index: 1;
    filter: drop-shadow(0 0.1em 0.2em rgba(0, 0, 0, 0.6));
}

/* Csak a tartalom szürkül/halványul, a kereszt (::after) megtartja a saját
   színét. */
.reward-entry.is-lost .reward-stars,
.reward-entry.is-lost .reward-values {
    filter: grayscale(1);
    opacity: 0.5;
}

/* Áthúzás: a közös tileset 7. sorának 6. pozíciójában lévő kereszt-grafika
   (0-alapon sor 6, oszlop 5), a bejegyzés közepén, a bejegyzés magasságára
   méretezve (a csempe négyzet alakú). */
.reward-entry.is-lost::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    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(5 * var(--tileset-cell) / (var(--tileset-img-w) - var(--tileset-cell)) * 100%) calc(6 * var(--tileset-cell) / (var(--tileset-img-h) - var(--tileset-cell)) * 100%);
    background-repeat: no-repeat;
}

/* Győzelmi konfetti overlay + vereség overlay -- mindkettő ugyanazt a
   .result-panel popup-ot jeleníti meg végül (kép + gomb), csak a győzelemnél
   ez a konfetti-animáció UTÁN, a vereségnél egy rövid késleltetés (a rács +
   "fail" hangeffekt) UTÁN történik -- l. public/js/play.js. */
.win-overlay,
.lose-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* A fenti `display: flex` author-CSS, ami felülírná a böngésző user-agent
   [hidden] { display: none; } alapszabályát (author normal > user-agent
   normal, függetlenül a specifitástól) -- e nélkül a szabály nélkül a
   #win-overlay a `hidden` attribútum ellenére is jelen maradna (jelen
   esetben ártalmatlanul, mert nincs saját háttere/interakciója, de ez csak
   szerencse, nem szándékos működés). */
.win-overlay[hidden],
.lose-overlay[hidden] {
    display: none;
}

.win-confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.8s ease;
}

.win-confetti.is-fading-out {
    opacity: 0;
}

/* Majdnem fehér hátterű popup panel -- kép + alatta gomb (l.
   #win-panel / #lose-panel a play.hbs-ben). Korábban sötét/áttetsző
   volt, most invertálva (felhasználói kérés) -- a benne lévő elemek
   (csillag-háttér, feliratok, gomb) színe ennek megfelelően lett
   igazítva lentebb. */
.result-panel {
    position: relative;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Levegősebb, kevésbé átlátszó popup (felhasználói kérés) -- nagyobb
       gap/padding minden gyerek (csillagok, kép, gomb) körül. */
    gap: 1.5em;
    padding: 1.2em 1.2em 2em;
    background: rgba(245, 246, 248, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 1.2em;
    box-shadow: 0 1em 3em rgba(0, 0, 0, 0.6);
    opacity: 0;
    /* Felülről csúszik be -- l. .is-visible: a cubic-bezier túllő a
       célértéken (>1), majd visszarugózik ("ease-out with overshoot"),
       ahelyett hogy sima lineáris fékezéssel állna meg. */
    transform: translateY(-160%);
    transition: opacity 0.3s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.result-panel[hidden] {
    display: none;
}

.result-panel-image {
    /* Még egy kicsit nagyobb, mint korábban (27cqw/330px -> 32cqw/390px). */
    width: 32cqw;
    max-width: 390px;
    height: auto;
    display: block;
    margin: 0.3em 0;
    border-radius: 0.6em;
    box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.5);
}

/* A win/lose popup gombja és a Beállítások popup "Bezárás" gombja
   (l. views/layouts/minimal.hbs #settings-panel-close) is ezt az osztályt
   használja -- csak felirat, keret/háttér nélkül, ugyanaz a betűtípus
   ('Denk One'), mint az Exit/Settings gomboké (l. exit-button.css), hover
   esetén ugyanaz a kis "megemelkedés" animáció, mint a "play" oldal
   Exit/Settings ikonjain. */
.result-panel-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    background: none;
    border: none;
    color: #fff;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    text-shadow: 0 0.15em 0.35em rgba(0, 0, 0, 0.9), 0 0 0.7em rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: transform .15s ease;
}

.result-panel-btn:hover {
    transform: translateY(-0.25em);
}

/* A win/lose popup gombja (fehér felirat) a panel invertálása (l. fent
   .result-panel) óta saját, lekerekített szélű, sötét hátteret kap --
   enélkül a fehér szöveg a majdnem fehér panelen olvashatatlan lenne.
   ID-szelektor, hogy a .settings-panel-close-btn (ami ugyanezt az
   osztályt használja egy MÁR sötét panelen) ne kapja meg -- ott
   felesleges/zavaró lenne egy plusz sötét doboz. */
#win-back-btn,
#lose-restart-btn {
    background: rgba(26, 32, 44, 0.85);
    border-radius: 999px;
}

/* Csillag-helyek a nyerés-popup tetején -- a global tileset
   (tilesets/tileset-global.png) padló-sorának 6. (üres hely) / 7. (betöltött csillag)
   oszlopából, ugyanazzal a %-alapú sprite-technikával, mint az avatar/
   rang-medál (l. info-panel.css .avatar-sprite/.rank-medal-sprite és
   plans/13-jatekos_fejlodese_terv.md K11 pont). A teljes rács logikailag
   8 oszlop x 5 sor (az 5. sorban vannak az Exit/Settings gombok és a
   hangerőszabályzó ikonjai, l. exit-button.css/settings-panel.css), a
   csillag-hely a padló-sorban (0. sor) van. */
/* A nyerés-popup tetején a Jutalmak-panel kártyája (.reward-entry) áll --
   a kártya sötét panelhez készült, ezért a világos popupon egy sötét
   keret-alapra kerül. */
.win-stars {
    display: flex;
    gap: 0.8em;
    justify-content: center;
}

/* Minden kártya saját, vele azonos méretű sötét alapot kap. */
.win-card-slot {
    background: rgba(20, 26, 38, 0.92);
    border-radius: 0.6em;
}

.win-card-slot .reward-entry {
    min-width: 12em;
    border: none;
}

/* A panel két kártya elférésére előkészítve szélesebb (2 x 12em + rés +
   belső margó). */
#win-panel {
    min-width: 28em;
}

.win-stars[hidden] {
    display: none;
}

/* Tájékoztató szöveg a nyerés-popup alján, csak ha új rangot ért el a
   játékos -- l. plans/13-jatekos_fejlodese_terv.md 5.2 pont. Csak
   tájékoztat (a zóna-oldalon úgyis megjelenik az ünneplő popup), NEM
   kattintható -- felhasználói döntés, ezért nincs alávonás/kéz-kurzor,
   és nem félkövér. */
.win-rankup-link {
    font-size: 0.85rem;
    font-weight: 400;
    color: #2d3748;
    text-align: center;
    padding: 0.3em 0.6em;
}

.win-rankup-link[hidden] {
    display: none;
}

/* Lebegő, világos alapszínű üzenet a figura mellett, ha a játékos egy még
   nem elérhető feature-t (kalapács, teleport) próbál aktiválni -- l.
   game/js/Escape10x10.js onFeatureLocked, public/js/play.js
   showLockedItemToast, plans/19-item-kijelzes-es-ranghoz-rogzites-terv.md
   5.4 pont. A pontos top/left-et (a figura fölé/alá, ahol több a hely) a
   JS állítja be inline stílusként. */
.locked-item-toast {
    position: absolute;
    z-index: 400;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    padding: 0.5em 1em;
    background: rgba(247, 250, 252, 0.95);
    color: #1a202c;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    border-radius: 1.2em;
    box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.locked-item-toast[hidden] {
    display: none;
}

.locked-item-toast.is-visible {
    opacity: 1;
}

/* A "Restart" gombon belül a billentyű ("R") kiemelése, mint egy
   billentyűzet-gomb ("keycap"), hogy egyértelmű legyen: ezt a billentyűt
   kell megnyomni. */
.key-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    padding: 0.05em 0.45em;
    background: #1a1206;
    color: #ffe58a;
    border: 2px solid #6b4a12;
    border-radius: 0.35em;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    box-shadow: inset 0 0.1em 0.25em rgba(0, 0, 0, 0.5);
}