/* ════════════════════════════════════════════════════════════════════
   Los Polos Empires — Cinematic Intro Stylesheet (M7)
   Belépő-oldal: full-screen színpad, párhuzamosított felhők, sziluett
   várak, gradiens cím. NEM keveredik a game.css-szel (külön névtér:
   .lpe-intro*).
   ──────────────────────────────────────────────────────────────────── */

:root {
    --lpe-acc:      #E8711A;
    --lpe-acc-d:    #b85510;
    --lpe-acc-l:    #f4a35c;
    --lpe-cream:    #F5F0EA;
    --lpe-brown:    #3D2800;
    --lpe-gold:     #f0c040;
    --lpe-bad:      #c44747;
    /* M7 "vidám reggel" paletta — világosabb mint Heroes dusk-ja */
    --lpe-sky-top:  #6db8ff;    /* világoskék ég teteje */
    --lpe-sky-mid:  #ffd690;    /* arany napsugár-öv */
    --lpe-sky-low:  #ffb070;    /* meleg-pasztell horizont */
    --lpe-castle:   #4a3a2a;    /* meleg-barna kastély (nem fekete) */
    --lpe-hill-bk:  #6ea050;    /* világoszöld távoli dombok */
    --lpe-hill-fg:  #3b6028;    /* sötétebb zöld előtér */
}

* { box-sizing: border-box; }

html, body.lpe-intro-page {
    margin: 0;
    padding: 0;
    background: #6db8ff;     /* matching a sky-top color, ha rövid villanás van */
    color: #3a2818;          /* sötét szöveg a világos hátérere — felülíródik a wrappereken */
    font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ── Cinematic stage ─────────────────────────────────────────────── */
/* M7 v2: Jani által küldött spartan-warrior kép a háttérben.
   FÁJL ELHELYEZÉSE: aoe/assets/intro/main_menu_bg.jpg
   Ha még nincs a fájl, a fallback procedurális ég is megmarad alatta. */
.lpe-intro {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #2a1d10 url('assets/intro/main_menu_bg.jpg?v=2') center 30% / cover no-repeat !important;
}
/* Bulletproof — body szintjén is, hogy bármi alá ne maradjon takarva */
body.lpe-intro-page {
    background: #2a1d10 url('assets/intro/main_menu_bg.jpg?v=2') center 30% / cover no-repeat fixed !important;
}

/* z:0 — FALLBACK ég (csak ha hiányzik a main_menu_bg.jpg).
   Opacity 0 mert a kép takar; ha tested nélkül indítod fel, állítsd 0.5-re. */
.lpe-intro-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 78% 18%, rgba(255,240,180,0.45) 0%, transparent 30%),
        linear-gradient(180deg, var(--lpe-sky-top) 0%, #a4d3ff 35%,
                        var(--lpe-sky-mid) 75%, var(--lpe-sky-low) 100%);
    opacity: 0.0;
}

/* SVG procedurális rétegek + felhők opacity 0 — a spartan-warrior kép takar.
   Ha image nincs, opacity-t emeld 0.6-0.85-re. */
.lpe-intro-stars,
.lpe-intro-hills-back,
.lpe-intro-castle,
.lpe-intro-hills-front,
.lpe-intro-clouds-back,
.lpe-intro-clouds-front {
    opacity: 0 !important;
    pointer-events: none;
}

/* Madarak — kikapcsolva (eredeti) */
.lpe-intro-stars-OFF {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 1px;
    height: 1px;
    background: transparent;
    z-index: 0;
    opacity: 0.45;
    /* V-alakú madarak: 2-2 pötty egymás mellett, kis transzformációkkal */
    box-shadow:
        -380px 60px 0 0 #2a3040, -376px 62px 0 0 #2a3040,
        -240px 110px 0 0 #2a3040, -236px 112px 0 0 #2a3040,
         140px 80px 0 0 #2a3040,  144px 82px 0 0 #2a3040,
         340px 130px 0 0 #2a3040, 344px 132px 0 0 #2a3040;
}

/* z:1 — distant hills */
.lpe-intro-hills-back {
    position: absolute;
    bottom: 22%;
    left: 0;
    width: 100%;
    height: 30%;
    z-index: 1;
    pointer-events: none;
}

/* z:2 — back cloud layer (slow drift, dim) */
.lpe-intro-clouds-back {
    position: absolute;
    top: 5%;
    left: 0;
    width: 200%;
    height: 35%;
    z-index: 2;
    opacity: 0.5;
    animation: lpe-drift-back 95s linear infinite;
    pointer-events: none;
}

/* z:3 — castle silhouettes */
.lpe-intro-castle {
    position: absolute;
    bottom: 18%;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 0 18px rgba(232,113,26,0.35));
}

/* Nincs villámlás vidám reggelen — a flash-t kikapcsoljuk */
.lpe-intro-flash {
    display: none;
}

/* z:4 — front cloud layer (faster drift) */
.lpe-intro-clouds-front {
    position: absolute;
    top: 18%;
    left: 0;
    width: 200%;
    height: 25%;
    z-index: 4;
    opacity: 0.8;
    animation: lpe-drift-front 55s linear infinite;
    pointer-events: none;
}

/* z:5 — foreground hills + vignette */
.lpe-intro-hills-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    z-index: 5;
    pointer-events: none;
}

.lpe-intro-vignette {
    /* Spartan-warrior képen ÉRTÉKES a vignette — a menü olvashatóvá teszi,
       és a kép sarkait elsötétíti hogy a középső warriors fókuszba kerüljenek */
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        /* sötét sarkok, középre fókusz */
        radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10,5,2,0.45) 75%, rgba(10,5,2,0.75) 100%),
        /* enyhe alulról-felfelé sötétedés a menü mögötti olvashatóságért */
        linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.4) 100%);
}

/* ── Drift animations ────────────────────────────────────────────── */
@keyframes lpe-drift-back {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes lpe-drift-front {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes lpe-flash {
    0%, 92%, 100% { opacity: 0; }
    93%           { opacity: 0.85; }
    94%           { opacity: 0.1; }
    95%           { opacity: 0.7; }
    96%           { opacity: 0; }
}

/* ── Foreground content ──────────────────────────────────────────── */
.lpe-intro-content {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px 40px;
    text-align: center;
}

/* ── Title row ───────────────────────────────────────────────────── */
.lpe-intro-title-row {
    margin: 20px 0 36px;
    text-shadow: 0 4px 24px rgba(0,0,0,0.8);
}
.lpe-intro-title-top {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 3.4vw, 42px);
    letter-spacing: 14px;
    color: var(--lpe-cream);
    text-transform: uppercase;
    margin: 0 0 4px;
    opacity: 0.92;
}
.lpe-intro-title-main {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(60px, 11vw, 150px);
    letter-spacing: 10px;
    line-height: 0.95;
    margin: 0;
    text-transform: uppercase;
    background: linear-gradient(180deg,
        #ffd166 0%,
        #f0c040 30%,
        #e87a1f 60%,
        #b85510 85%,
        #8a3e08 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.85))
            drop-shadow(0 0 30px rgba(232,113,26,0.4));
}
.lpe-intro-tagline {
    margin: 14px 0 0;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--lpe-acc-l);
    text-transform: uppercase;
    opacity: 0.85;
}

/* ── SkyNet user chip ────────────────────────────────────────────── */
.lpe-skynet-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    margin: 18px 0;
    background: rgba(10, 5, 16, 0.7);
    border: 1px solid rgba(232,113,26,0.5);
    border-radius: 40px;
    color: var(--lpe-cream);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.lpe-skynet-chip:hover {
    background: rgba(232,113,26,0.2);
    border-color: var(--lpe-acc);
}
.lpe-skynet-chip img,
.lpe-skynet-chip .lpe-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--lpe-brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--lpe-gold);
}
.lpe-chip-elo {
    color: var(--lpe-gold);
    font-weight: 700;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.15);
    margin-left: 4px;
}
.lpe-chip-rank {
    color: var(--lpe-acc-l);
    font-size: 12px;
    margin-left: 4px;
}

/* ── Menu grid ───────────────────────────────────────────────────── */
.lpe-intro-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
    max-width: 820px;
    margin: 30px auto 28px;
}
.lpe-intro-menu-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #c43614 0%, #8a1f08 100%);
    color: var(--lpe-cream);
    border: 1px solid #5a1004;
    border-radius: 8px;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,210,160,0.35),
        inset 0 -2px 6px rgba(0,0,0,0.5),
        0 4px 14px rgba(0,0,0,0.55);
    transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.lpe-intro-menu-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #e8451a 0%, #a82a10 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,230,200,0.5),
        inset 0 -2px 6px rgba(0,0,0,0.5),
        0 6px 22px rgba(232,113,26,0.55),
        0 0 0 1px var(--lpe-gold);
}
.lpe-intro-menu-btn:active {
    transform: translateY(0);
}
.lpe-intro-menu-btn.active {
    border-color: var(--lpe-gold);
    box-shadow:
        inset 0 1px 0 rgba(255,230,200,0.45),
        inset 0 -2px 6px rgba(0,0,0,0.5),
        0 0 0 2px var(--lpe-gold),
        0 6px 22px rgba(240,192,64,0.4);
}
.lpe-intro-menu-btn .lpe-btn-ico {
    font-size: 20px;
    line-height: 1;
}
.lpe-intro-menu-btn.disabled,
.lpe-intro-menu-btn[disabled] {
    background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
    color: #888;
    border-color: #2a2a2a;
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -2px 4px rgba(0,0,0,0.4);
}
.lpe-intro-menu-btn.disabled:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -2px 4px rgba(0,0,0,0.4);
}
.lpe-intro-menu-btn .soon-tag {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--lpe-acc);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── New-game submenu (under "Új játék") ─────────────────────────── */
.lpe-intro-submenu {
    display: none;
    max-width: 720px;
    margin: 8px auto 16px;
    padding: 16px 20px;
    background: rgba(10, 5, 16, 0.78);
    border: 1px solid var(--lpe-acc-d);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.lpe-intro-submenu.open {
    display: block;
    animation: lpe-fadein 0.25s ease;
}
.lpe-intro-submenu label {
    display: inline-block;
    margin-right: 6px;
    color: var(--lpe-acc-l);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.lpe-intro-submenu select,
.lpe-intro-submenu input {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--lpe-acc-d);
    background: #1a1208;
    color: var(--lpe-cream);
    font-size: 14px;
    margin-right: 10px;
    margin-bottom: 8px;
}
.lpe-intro-submenu .lpe-start-btn {
    background: linear-gradient(180deg, var(--lpe-gold) 0%, var(--lpe-acc) 100%);
    color: #1a1208;
    border: 1px solid var(--lpe-acc-d);
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
@keyframes lpe-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Leaderboard ─────────────────────────────────────────────────── */
.lpe-intro-leaderboard {
    max-width: 720px;
    margin: 40px auto;
    background: linear-gradient(180deg, rgba(245, 230, 200, 0.94) 0%, rgba(220, 195, 150, 0.94) 100%);
    color: #2a1a06;
    padding: 24px 28px;
    border: 2px solid #6a4818;
    border-radius: 10px;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.6),
        inset 0 0 50px rgba(120,70,20,0.15);
    position: relative;
    z-index: 10;
}
.lpe-intro-leaderboard h2 {
    margin: 0 0 14px;
    font-family: Georgia, serif;
    font-style: italic;
    color: #6a4818;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
}
.lpe-intro-leaderboard table {
    width: 100%;
    border-collapse: collapse;
}
.lpe-intro-leaderboard th {
    color: #6a4818;
    font-family: Georgia, serif;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid #6a4818;
    letter-spacing: 1px;
}
.lpe-intro-leaderboard td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(106,72,24,0.25);
    font-size: 14px;
}
.lpe-intro-leaderboard tr:nth-child(1) td { color: #8a5800; font-weight: 700; }
.lpe-intro-leaderboard .lpe-empty {
    text-align: center;
    color: #6a4818;
    font-style: italic;
    padding: 14px 0;
}

/* ── Roadmap ─────────────────────────────────────────────────────── */
.lpe-intro-roadmap {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 16px 22px;
    background: rgba(10, 5, 16, 0.72);
    border: 1px solid var(--lpe-acc-d);
    border-radius: 10px;
    position: relative;
    z-index: 10;
}
.lpe-intro-roadmap h2 {
    margin: 0 0 10px;
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--lpe-acc-l);
    text-transform: uppercase;
}
.lpe-intro-roadmap ol {
    margin: 0;
    padding-left: 22px;
    font-size: 13px;
    color: var(--lpe-cream);
    opacity: 0.82;
}
.lpe-intro-roadmap li { margin: 3px 0; }
.lpe-intro-roadmap li.active { color: var(--lpe-gold); opacity: 1; }

/* ── Footer ──────────────────────────────────────────────────────── */
.lpe-intro-footer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 28px 16px 22px;
    font-size: 12px;
    color: var(--lpe-text-mut, #7a6850);
    letter-spacing: 1px;
}

/* ── Music toggle ────────────────────────────────────────────────── */
.lpe-intro-music {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--lpe-acc-d);
    background: rgba(10, 5, 16, 0.78);
    color: var(--lpe-acc);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.lpe-intro-music:hover {
    background: rgba(232,113,26,0.25);
    color: var(--lpe-gold);
}

/* ── Mobile responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .lpe-intro-menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .lpe-intro-title-top { letter-spacing: 8px; }
    .lpe-intro-title-main { letter-spacing: 6px; }
    .lpe-intro-content { padding: 40px 14px 30px; }
    .lpe-intro-leaderboard,
    .lpe-intro-roadmap { margin-left: 12px; margin-right: 12px; }
}
@media (max-width: 480px) {
    .lpe-intro-menu { grid-template-columns: 1fr; }
    .lpe-intro-title-top { letter-spacing: 6px; font-size: 18px; }
    .lpe-intro-title-main { letter-spacing: 4px; }
    .lpe-skynet-chip { font-size: 13px; }
}