body {
    background-color: #7a7676;
    color: #eee;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;       /* Fix 100% képernyő magasság */
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none; /* EZZEL tiltjuk le biztonságosan a mobil gumi-effektust a "fixed" helyett! */
}

/* De a menükben vissza kell engednünk a húzást (görgetést)! */
.start-screen, .modal-content, .settings-content, .level-select-content, .legal-content, .warning-content, .controls-content, .records-content {
    touch-action: auto; 
}

.game-wrapper {
    text-align: center;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;             /* <--- JAVÍTVA */
    max-width: 600px;        /* <--- ÚJ: Nem engedi 600px-nél (a játék méreténél) nagyobbra nőni */
    margin: 0 auto 10px auto;
    background: #333;
    padding: 10px 15px;      /* Picit kisebb belső margó mobilra */
    box-sizing: border-box;
    border-radius: 5px;
    border: 2px solid #555;
}

h1 {
    margin: 0;
    font-size: 24px;
    color: #ffcc00;
    text-shadow: 2px 2px #000;
    letter-spacing: 2px;
}

.stats span {
    margin-left: 20px;
    font-size: 18px;
    color: #ffcc00;
}

canvas {
    background-color: #000;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    border: 4px solid #444;
    display: block;
    margin: 0 auto;
    max-width: 100%;         /* <--- ÚJ: Sosem lóg ki a képernyőből! */
    height: auto;            /* <--- ÚJ: Megtartja a 4:3-as képarányt összenyomáskor is */
    box-sizing: border-box;  /* <--- ÚJ: A vastag keret se lógjon ki */
}

.controls {
    margin-top: 15px;
    color: #888;
    font-size: 14px;
}
/* Modális háttér (sötétítés) */
.modal-overlay {
    display: none; /* Alapból rejtve */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 100;
}

/* A kis ablak stílusa */
.modal-content {
    background: #222;
    padding: 30px 50px;
    border: 3px solid #ffcc00;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 20px #ffcc00;
    color: white;
}

.modal-content h2 {
    color: #ffcc00;
    margin-top: 0;
}

/* Modern gomb stílusa */
#modalButton {
    background: #ffcc00;
    border: none;
    padding: 10px 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.2s, background 0.2s;
}

#modalButton:hover {
    background: #fff;
    transform: scale(1.1);
}
/* --- START KÉPERNYŐ STÍLUSOK --- */
.start-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;     
    flex-direction: column;  
    background: radial-gradient(circle, #2a2a2a 0%, #0a0a0a 100%);
    z-index: 10;
    
    /* ---> ÚJ: Engedélyezi a lefelé ÉS oldalirányú görgetést telefonon! <--- */
    overflow: auto; 
    padding: 30px 0;
}

.start-content {
    display: flex;
    flex-direction: column;
    align-items: center;     /* Ez kényszeríti a gombot és a szöveget is középre! */
    text-align: center;
    width: 100%;
}

.start-screen p {
    font-size: 22px;
    color: #aaa;
    margin-bottom: 40px;
}

#startButton {
    background: #ffcc00;
    color: #111;
    border: none;
    padding: 15px 40px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

#startButton:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}
/* --- ÚJ: Játék Folytatása Gomb --- */
#loadButton {
    background: #00ff33;
    color: #111;
    border: none;
    padding: 15px 40px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 51, 0.5);
    margin-top: 15px; /* Távolság az Új Játék gombtól */
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

#loadButton:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}
/* --- KNIGHT RIDER SZÖVEG EFFEKT --- */
.knight-rider-text {
    font-size: 70px; /* Kicsit nagyobbra vettem */
    font-weight: 900; /* Legyen jó vastag a betű */
    text-transform: uppercase;
    margin-bottom: 10px;
    
    /* VILÁGOSABB LETT: #444444 helyett #777777 */
    background-image: linear-gradient(
        to right,
        #777777 0%,
        #ffcc00 50%,
        #777777 100%
    );
    
    /* A háttér mérete kétszerese a szövegnek, hogy tudjon mozogni */
    background-size: 200% auto;
    
    /* A háttér levágása a szöveg formájára (varázslat!) */
    background-clip: text;
    -webkit-background-clip: text; /* Chrome/Safari támogatás */
    
    /* A betű maga legyen átlátszó, hogy átüssön a háttér */
    color: transparent;
    
    /* GYORSABB LETT: 3s helyett 1.5s alatt ér át a fény */
    animation: shine 1.5s linear infinite alternate;
    
    /* Egy kis árnyék, hogy kiemelkedjen a háttérből */
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
}

/* A mozgás definíciója */
@keyframes shine {
    0% {
        background-position: 0% center; /* Bal oldalon kezd */
    }
    100% {
        background-position: 100% center; /* Jobb oldalra ér */
    }
}
/* --- MOBILOS GOMBOK --- */
.controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px; /* A canvas szélessége */
    
    /* JAVÍTÁS: Alapból elrejtjük (így PC-n nem látszik) */
    display: none; 
    
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
}

/* ÚJ: Ha a böngésző érintőképernyőt (pointer: coarse) érzékel, akkor megjeleníti! */
@media (pointer: coarse) {
    .controls {
        display: flex;
    }
}

.d-pad {
    display: flex;
    gap: 15px;
}

.control-btn {
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-size: 24px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none; /* Ne lehessen kijelölni a szöveget */
    touch-action: manipulation; /* Gyorsabb érintés érzékelés */
    cursor: pointer;
    backdrop-filter: blur(5px);
}

.control-btn:active {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0.95);
}

.action-btn {
    width: 100px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    background: rgba(255, 204, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.6);
}

.action-btn:active {
    background: rgba(255, 204, 0, 0.6);
}
/* --- VÉGSŐ GRATULÁCIÓS KÉPERNYŐ STÍLUSAI --- */
.win-screen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.92);
    /* Ugyanaz a Flexbox módszer a győzelmi ablakhoz is */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 200;
}

#fireworks-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none; /* Hogy át lehessen kattintani rajta a gombra */
}

.win-content {
    position: relative;
    z-index: 201;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;     /* Minden elem középre húzása */
    text-align: center;
    width: 100%;
}

#win-title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #00ff33;
    text-shadow: 0 0 20px rgba(0, 255, 51, 0.6);
}

#win-subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    color: #ccc;
}

#win-score {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: bold;
    color: #ffcc00;
}

#win-menu-btn {
    padding: 12px 30px;
    font-size: 18px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: #333;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    font-weight: bold;
}

#win-menu-btn:hover {
    background: #fff;
    color: #333;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
/* --- ÚJ: Nagy, 3D Hatású és Animált Bumpy --- */
.large-bumpy-container { 
    width: 140px; 
    height: 140px; 
    position: relative; 
    /* Ez a margin: 0 auto; gondoskodik róla, hogy maga Bumpy doboza is középen legyen! */
    margin: 0 auto 25px auto; 
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floatBumpy 3s ease-in-out infinite; 
}

/* Lebegés kulcskockái */
@keyframes floatBumpy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.large-bumpy { 
    width: 100%; 
    height: 100%; 
    /* 3D hatású színátmenet a sima sárga helyett */
    background: radial-gradient(circle at 35% 35%, #fff080 0%, #ffcc00 40%, #cc9900 90%, #996600 100%);
    border-radius: 50%; 
    position: relative; 
    /* Erősebb térbeli külső, és sötétítő belső árnyék */
    box-shadow: 
        0 15px 25px rgba(0,0,0,0.5), 
        inset -10px -10px 20px rgba(0,0,0,0.3); 
}

/* Szemek */
.eye { 
    width: 24px; 
    height: 24px; 
    background: #fff; 
    border-radius: 50%; 
    position: absolute; 
    top: 35px; 
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.4); /* Szemek mélysége */
    animation: blinkEye 4s infinite; /* Pislogás animáció */
}
.eye.left { left: 30px; }
.eye.right { right: 30px; }

/* Pislogás kulcskockái */
@keyframes blinkEye {
    0%, 96%, 98%, 100% { transform: scaleY(1); }
    97%, 99% { transform: scaleY(0.1); }
}

/* Pupillák csillogással */
.eye::after { 
    content: ''; 
    width: 12px; 
    height: 12px; 
    background: black; 
    border-radius: 50%; 
    position: absolute; 
    top: 6px; 
    left: 6px; 
    /* Csillogás (fényvisszaverődés) a szemekben */
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.8);
}

/* Mosoly */
.smile { 
    width: 46px; 
    height: 22px; 
    border-bottom: 6px solid #222; 
    border-radius: 50%; 
    position: absolute; 
    bottom: 30px; 
    left: 47px; 
}

/* Pír az arcán (lágyítva) */
.cap { 
    width: 18px; 
    height: 12px; 
    background-color: rgba(255, 100, 100, 0.5); 
    border-radius: 50%; 
    position: absolute; 
    top: 70px; 
    left: 18px; 
    /* A második pír a jobb oldalon */
    box-shadow: 86px 0 0 rgba(255, 100, 100, 0.5); 
    /* Lágyabb, valósághűbb pirosodás */
    filter: blur(2px); 
}

/* Méretezés a Győzelmi képernyőhöz */
.win-scale { 
    transform: scale(0.85); 
    margin-bottom: 15px; 
}
/* --- ÚJ: IRÁNYÍTÁSOK GOMB ÉS ABLAK --- */
#controlsButton {
    background: #00ccff;
    color: #111;
    border: none;
    padding: 12px 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.5);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    margin-top: 15px; 
}

#controlsButton:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.controls-content {
    max-width: 500px;
    max-height: 80vh; /* JAVÍTÁS: Maximum a képernyő 80%-át foglalhatja el */
    overflow-y: auto; /* JAVÍTÁS: Ha hosszabb a szöveg, belül görgethető lesz! */
    text-align: left;
    border-color: #00ccff; 
    box-shadow: 0 0 20px #00ccff;
}

.controls-content h2 {
    text-align: center;
    color: #00ccff;
    margin-bottom: 20px;
}

.controls-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    color: #ddd;
    font-size: 15px;
    line-height: 1.5;
}

.controls-list li {
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 5px;
    border-left: 4px solid #00ccff;
}

/* A billentyűzet gombok stílusa (CTRL, ALT, stb) */
.controls-list kbd {
    background: #111;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #777;
    font-family: monospace;
    font-weight: bold;
    color: #ffcc00;
}

.controls-list em {
    color: #888;
    font-size: 13px;
}

#closeControlsButton {
    background: #ff3333;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    transition: 0.2s;
}

#closeControlsButton:hover {
    background: #fff;
    color: #ff3333;
    transform: scale(1.1);
}
/* --- ÚJ: FIGYELMEZTETÉS GOMB ÉS ABLAK --- */
#warningButton {
    background: #ff3333;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    margin-top: 15px; 
}

#warningButton:hover {
    background: #fff;
    color: #ff3333;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.warning-content {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    text-align: left;
    border-color: #ff3333; 
    box-shadow: 0 0 25px #ff3333;
}

.warning-content h2 {
    text-align: center;
    color: #ff3333;
    margin-bottom: 20px;
    font-size: 22px;
}

.warning-text {
    color: #ddd;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.warning-text p {
    margin-bottom: 15px;
}

.warning-text strong {
    color: #ffcc00;
}

#closeWarningButton {
    background: #00ccff;
    color: #111;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    transition: 0.2s;
}

#closeWarningButton:hover {
    background: #fff;
    transform: scale(1.1);
}
/* --- ÚJ: SPEEDRUN STOPPER STÍLUSOK --- */
#gameContainer {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    touch-action: none; /* ÚJ: Szigorúan letiltja a képernyő elhúzását játék közben */
}

#speedrunTimer {
    position: absolute;
    top: -55px; /* <--- JAVÍTÁS: Ezzel toljuk ki a játéktéren kívülre, fölé! */
    left: 50%; /* <--- JAVÍTÁS: Vízszintesen középre teszi (1. lépés) */
    transform: translateX(-50%); /* <--- JAVÍTÁS: Vízszintesen középre teszi (2. lépés) */
    
    background: rgba(0, 0, 0, 0.8);
    color: #00ffcc; /* Neon ciánkék */
    font-family: monospace; 
    font-size: 24px; /* Kicsit nagyobbra vettem, mert kint jobban elfér */
    font-weight: bold;
    padding: 8px 24px;
    border: 2px solid rgba(0, 255, 204, 0.5);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.4);
    z-index: 50;
    pointer-events: none; 
}
/* --- ÚJ: MEGERŐSÍTŐ ABLAK STÍLUSOK --- */
.confirm-content {
    max-width: 400px;
    border-color: #ff8800;
    box-shadow: 0 0 20px #ff8800;
}

.confirm-content h2 {
    color: #ff8800;
    margin-bottom: 15px;
    font-size: 22px;
}

.confirm-text {
    color: #ddd;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.confirm-buttons {
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

#btnConfirmYes {
    background: #ff3333;
    color: #fff;
    border: none;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s;
    flex: 1;
}

#btnConfirmYes:hover {
    background: #fff;
    color: #ff3333;
    transform: scale(1.05);
}

#btnConfirmNo {
    background: #555;
    color: #fff;
    border: none;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s;
    flex: 1;
}

#btnConfirmNo:hover {
    background: #fff;
    color: #333;
    transform: scale(1.05);
}
/* --- ÚJ: BEÁLLÍTÁSOK GOMB ÉS ABLAK --- */
#settingsButton {
    background: #999;
    color: #111;
    border: none;
    padding: 12px 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(153, 153, 153, 0.5);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    margin-top: 15px; 
}

#settingsButton:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.settings-content {
    max-width: 400px;
    border-color: #999; 
    box-shadow: 0 0 20px #999;
}

.settings-content h2 {
    color: #ccc;
}

.settings-options {
    margin: 20px 0 30px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #fff;
    background: rgba(255,255,255,0.05);
    padding: 10px 15px;
    border-radius: 8px;
}

.toggle-btn {
    border: none;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.toggle-btn.on {
    background: #00ff33;
    color: #000;
}

.toggle-btn.off {
    background: #ff3333;
    color: #fff;
}

#closeSettingsButton {
    background: #999;
    color: #111;
    border: none;
    padding: 10px 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s;
}

#closeSettingsButton:hover {
    background: #fff;
    transform: scale(1.1);
}
/* --- ÚJ: MÁSODLAGOS GOMBOK ELRENDEZÉSE (Egymás mellett) --- */
.secondary-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Távolság a három gomb között */
    margin-top: 25px; /* Kicsit eltoljuk lefelé a nagy gomboktól */
    width: 100%;
    flex-wrap: wrap; /* Ha nagyon kicsi a képernyő, szépen új sorba töri őket */
}

/* Felülírjuk az eredeti gigantikus méreteket egy picit szerényebbre */
#controlsButton, #settingsButton, #warningButton {
    font-size: 16px !important; /* 20px helyett kisebb */
    padding: 10px 20px !important; /* Vékonyabb gombok */
    margin-top: 0 !important; /* A margót már a .secondary-buttons adja */
    flex: 1; /* Egyforma szélesre húzza a három gombot */
    max-width: 160px; /* De ne legyenek túl szélesek */
}
/* --- ÚJ: SZÜNET GOMB ÉS MENÜ STÍLUSOK --- */
.pause-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 2px solid #888;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    cursor: pointer;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.pause-btn:hover {
    background: #fff;
    border-color: #fff;
    transform: scale(1.1);
}

.pause-content {
    border-color: #00aaff;
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.6);
    width: 350px;
}

.pause-content h2 {
    color: #00aaff;
    margin-bottom: 25px;
}

.pause-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pause-buttons button {
    background: #333;
    color: #fff;
    border: 2px solid #555;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s;
}

.pause-buttons button:hover {
    background: #00aaff;
    color: #000;
    border-color: #fff;
    transform: scale(1.05);
}

#quitBtn:hover {
    background: #ff3333;
    color: #fff;
    border-color: #fff;
}
/* --- ÚJ: JOGI NYILATKOZAT GOMB ÉS ABLAK --- */
#legalButton {
    background: #9b59b6; /* Kellemes lila szín */
    color: #fff;
    border: none;
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.5);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

#legalButton:hover {
    background: #fff;
    color: #9b59b6;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.legal-content {
    max-width: 650px;
    max-height: 85vh;
    overflow-y: auto;
    text-align: left;
    border-color: #9b59b6; 
    box-shadow: 0 0 25px #9b59b6;
}

.legal-content h2 {
    text-align: center;
    color: #9b59b6;
    margin-bottom: 20px;
    font-size: 22px;
}

.legal-text {
    color: #ddd;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.legal-text p {
    margin-bottom: 12px;
}

.legal-text strong {
    color: #ffcc00;
}

#closeLegalButton {
    background: #9b59b6;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    transition: 0.2s;
}

#closeLegalButton:hover {
    background: #fff;
    color: #9b59b6;
    transform: scale(1.1);
}
/* --- ÚJ: REKORDOK GOMB ÉS ABLAK --- */
#recordsButton {
    background: #ff8800; /* Narancssárga */
    color: #fff;
    border: none;
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.5);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

#recordsButton:hover {
    background: #fff;
    color: #ff8800;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.records-content {
    max-width: 450px;
    border-color: #ff8800; 
    box-shadow: 0 0 25px #ff8800;
}

.records-content h2 {
    color: #ff8800;
    margin-bottom: 25px;
    font-size: 24px;
}

.records-text {
    color: #ddd;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.records-text p {
    margin-bottom: 20px;
    background: rgba(0,0,0,0.4);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #444;
}

#closeRecordsButton {
    background: #ff8800;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    transition: 0.2s;
}

#closeRecordsButton:hover {
    background: #fff;
    color: #ff8800;
    transform: scale(1.1);
}
/* --- ÚJ: RETRO CRT KÉPCSŐ FILTER --- */
/* Vízszintes csíkozás (Scanlines) és szín-eltolódás */
body.crt-effect::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none; /* Nagyon fontos: a kattintások átmennek rajta! */
}

/* Sötétedő peremek (Vignette) a monitor szélén */
body.crt-effect::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
    z-index: 998;
    pointer-events: none;
}
/* --- ÚJ: PÁLYAVÁLASZTÓ DIZÁJN --- */
#levelSelectButton {
    background: #2ecc71; /* Kellemes zöld */
    color: #fff;
    border: none;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
    transition: 0.2s;
}

#levelSelectButton:hover {
    background: #fff;
    color: #2ecc71;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    max-height: 45vh; /* Ha sok pálya lesz, görgethető lesz a belseje */
    overflow-y: auto;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid #444;
}

.level-btn {
    background: #333;
    color: #fff;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.level-btn:hover:not(:disabled) {
    background: #ffcc00;
    color: #000;
    border-color: #fff;
    transform: scale(1.1);
}

.level-btn:disabled {
    background: #1a1a1a;
    color: #444;
    border-color: #222;
    cursor: not-allowed;
    opacity: 0.7;
}
/* --- Pályaválasztó VISSZA gomb szépítése --- */
#closeLevelSelectButton {
    background: #2ecc71; /* A pályaválasztó zöldje */
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    margin: 25px auto 0 auto;
    transition: 0.2s;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

#closeLevelSelectButton:hover {
    background: #fff;
    color: #2ecc71;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}
/* --- Menük görgethetőségének javítása --- */
.settings-content, .level-select-content {
    max-height: 85vh;    /* A képernyő magasságának max 85%-a lehet */
    overflow-y: auto;    /* Ha ennél nagyobb, megjelenik a görgetősáv */
    scrollbar-width: thin; /* Modern böngészőknek vékony görgetősáv */
    scrollbar-color: #555 #222;
}

/* Egyedi görgetősáv stílus Chrome/Edge/Safari böngészőkhöz */
.settings-content::-webkit-scrollbar, 
.level-select-content::-webkit-scrollbar {
    width: 8px;
}

.settings-content::-webkit-scrollbar-track, 
.level-select-content::-webkit-scrollbar-track {
    background: #222;
    border-radius: 10px;
}

.settings-content::-webkit-scrollbar-thumb, 
.level-select-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

.settings-content::-webkit-scrollbar-thumb:hover, 
.level-select-content::-webkit-scrollbar-thumb:hover {
    background: #ffcc00; /* Kiemelés, ha ráviszik az egeret */
}
/* --- ÚJ: NYELVVÁLASZTÓ LEBEGŐ GOMB --- */
.lang-float-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #222;
    color: #fff;
    border: 2px solid #555;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.lang-float-btn:hover {
    background: #444;
    transform: scale(1.1);
    border-color: #ffcc00;
    color: #ffcc00;
}
/* ---> ÚJ: A Játék Leírás gomb stílusa (hogy egyezzen a többivel) <--- */
#guideButton {
    font-family: inherit; 
    font-weight: bold; /* ---> ÚJ: Vastagabb (félkövér) betű! <--- */
    background: #0088cc; 
    color: black; 
    border: 2px solid #00aabb; 
    padding: 10px 15px; 
    cursor: pointer; 
    /* JAVÍTVA: A 'transform 0.2s' bekerült, hogy szép lágy legyen a nagyítás */
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s; 
    margin: 3px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 0 10px rgba(0, 136, 204, 0.4); 
}

/* Hover effektus (amikor ráviszed az egeret) */
#guideButton:hover {
    background: #ffffff; 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); 
    /* ---> ÚJ: Nagyítás effektus! <--- */
    transform: scale(1.1); 
}
/* --- JAVÍTVA: A bezáró X gomb stílusosabb és élettelibb kinézete --- */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px; /* Megjegyzés: A te CSS-edben jobb oldalon van, ha balra akarod, cseréld le 'left: 15px'-re */
    color: #ff5555; /* Alapból piros, hogy észrevehetőbb legyen */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    /* JAVÍTVA: Több tulajdonságot animálunk a lágyabb mozgásért */
    transition: color 0.2s, transform 0.2s, background 0.2s, box-shadow 0.2s; 
    z-index: 10;
    
    /* ---> ÚJ: Gomb-szerű kinézet és központosítás <--- */
    width: 40px;
    height: 40px;
    background: rgba(255, 0, 0, 0.1); /* Halvány piros háttér */
    border-radius: 50%; /* Kör alakú */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid rgba(255, 85, 85, 0.4); /* Finom keret */
}

/* Hover effektus (amikor ráviszed az egeret) */
.close-btn:hover {
    color: #ffffff; /* Fehérre vált a szöveg */
    background: rgba(255, 0, 0, 0.3); /* Sötétebb piros háttér */
    
    /* ---> ÚJ: Dinamikus effektusok! <--- */
    transform: rotate(90deg) scale(1.15); /* Forgatás és nagyítás */
    box-shadow: 0 0 20px rgba(255, 85, 85, 0.8); /* Ragyogás */
    border-color: rgba(255, 255, 255, 0.6); /* Fehéredő keret */
}