/* Szabály-panel -- pálya-indításkor megjelenő, NEM lapozható popup, ami
   egyetlen oldalon mutatja a pálya összes aktív szabályát (l.
   public/js/rules-panel.js, plans/24-szabaly-panel-terv.md). Ugyanaz a
   nyitási minta, mint a settings-panel.css/help-panel.css -- fixed
   overlay + középre igazított panel, [hidden] override az
   author-vs-user-agent cascade-indok miatt. */
.rules-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 16, 0.55);
}

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

/* Felhasználói kérés (2026-09-24, 3. kör): a szekciók MINDIG egyetlen
   sorban jelennek meg (kártya-szerűen egymás mellett), akkor is, ha 4
   van -- a pálya-szabályokból soha nincs 4-nél több, ezért a sor sosem
   csordulhat ki, és a panelen SOHA nem jelenhet meg gördítősáv (nincs is
   `overflow`/`max-height` korlát: a tartalom mindig belefér). A panel
   háttere TELJESEN átlátszatlan (nem áttetsző, ellentétben a többi
   popup-pal). */
.rules-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    min-width: 60vw;
    max-width: 95vw;
    padding: 2em 2.4em 1.6em;
    background: #12161e;
    border: 1px solid rgba(255, 255, 255, 0.4);
    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(-6%);
    transition: opacity 0.25s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* A szabály-szekciók sora -- MINDIG egy sorban, `flex` (nem `grid`),
   hogy a szélesség a tényleges tartalomhoz (max. 4 kártya) igazodjon,
   ne egy előre rögzített oszlop-rácshoz. */
.rules-panel-sections {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 5em;
    min-width: 60vw;
}

/* Egy "szabály szekció" -- három sor: név, dekor-kép, magyarázat (l.
   felhasználói kérés). A keret színe azt jelzi, hogy a szabály ÚJ-e (a
   felhasználó még nem látta, l. .is-new) vagy már ismert (.is-known). */
.rules-panel-section {
    display: flex;
    flex-direction: column;
    flex: 0 0 18em;
    width: 18em;
    padding: 1em;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 1em;
}

.rules-panel-section.is-new {
    border-color: #ffe58a;
    box-shadow: 0 0 0.6em rgba(255, 229, 138, 0.35);
}

.rules-panel-section-name {
    flex: 0 0 auto;
    margin-bottom: 0.8em;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.6);
}

/* Négyzet alakú dekor-kép -- SZÁNDÉKOSAN nincs háttérszín (felhasználói
   kérés): a PNG-k már saját, kitöltött hátterű illusztrációk, egy alatta
   lévő panel-szín csak csúnya keretet adna a (nem mindig pontosan
   négyzet arányú) képek körül. */
.rules-panel-section-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 0.6em;
}

.rules-panel-section-text {
    flex: 0 0 auto;
    margin-top: 0.9em;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #cbd5e0;
    white-space: pre-line;
}

.rules-panel-hide-known-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    margin: 1.6em 0 0.8em;
    font-size: 1rem;
    color: #cbd5e0;
    cursor: pointer;
}

/* Dizájnos, lekerekített jelölőnégyzet a natív checkbox helyett --
   felhasználói kérés. `appearance: none` törli a natív megjelenést, a
   pipát/kitöltést a `:checked` állapotban a `::after`
   pszeudo-elem/háttérszín adja. */
.rules-panel-hide-known-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.4em;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.rules-panel-hide-known-row input[type="checkbox"]:hover {
    border-color: rgba(255, 255, 255, 0.85);
}

.rules-panel-hide-known-row input[type="checkbox"]:checked {
    background: #ffe58a;
    border-color: #ffe58a;
}

.rules-panel-hide-known-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 0.42em;
    top: 0.16em;
    width: 0.35em;
    height: 0.7em;
    border: solid #12161e;
    border-width: 0 0.18em 0.18em 0;
    transform: rotate(45deg);
}

/* Lekerekített szegély, hogy jól látszódjon: ez egy gomb -- felhasználói
   kérés. */
#rules-panel-close {
    flex: 0 0 auto;
    align-self: center;
    padding: 0.6em 1.6em;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
}

#rules-panel-close:hover {
    border-color: rgba(255, 255, 255, 0.85);
}