/* ==========================================================
   SMEX – STÍLUSOK
   Szerkesztés: színek/méretek a :root részben (fent).
   A képek/betű a ../kepek/ui és ../fontok mappában vannak.
   ========================================================== */
        /* ── MINECRAFT-STÍLUSÚ PIXELBETŰ (külön fájlban: fontok/smexpixel.woff) ── */
        @font-face {
            font-family: 'SmexPixel';
            src: url("../fontok/smexpixel.woff") format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* ── ALAPBEÁLLÍTÁSOK ── */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --hatter-kep: url("../kepek/ui/hatter.jpg");

            --fold-kep: url("../kepek/ui/fold.png");   /* Minecraft föld/fű textúra – kepek/ui/ */
            --fuves-kep: url("../kepek/ui/fuves.png");
            --mc-betu: 'SmexPixel', 'Courier New', monospace;

            --gomb-pozicio: 52dvh;

            /* Gombok színei – itt könnyen átállíthatod az egész kinézetet */
            --gomb-hatter: rgba(12, 22, 42, 0.55);
            --gomb-hatter-hover: rgba(30, 50, 90, 0.65);
            --gomb-el: #06101f;            /* a gomb "vastagsága" (alsó él) */
            --keret-1: #00e5ff;            /* keret színátmenet eleje */
            --keret-2: #7c4dff;            /* közepe */
            --keret-3: #ff2bd6;            /* vége */
        }

        body {
            min-height: 100vh;
            min-height: 100dvh;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
            /* FIGYELEM: a body-nak nem lehet saját háttérszíne, mert eltakarná a z-index:-1 háttérréteget (body::before).
               Az alapszínt az html kapja. */
            background: transparent;
        }

        /* ── ÁLLÓ HÁTTÉR: külön fix réteg, lapozáskor sem mozdul ── */
        html {
            background-color: #0b1a2e;
        }

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            height: 100lvh;
            z-index: -1;
            pointer-events: none;
            transform: translateZ(0);
            /* neon fények + finom pontrács + vignetta a fotó fölött (SMEX színek: cián / lila / magenta) */
            background-image:
                radial-gradient(ellipse at 50% 115%, rgba(255, 43, 214, 0.30) 0%, transparent 55%),
                radial-gradient(ellipse at 0% 0%, rgba(0, 229, 255, 0.26) 0%, transparent 50%),
                radial-gradient(ellipse at 100% 18%, rgba(124, 77, 255, 0.30) 0%, transparent 52%),
                radial-gradient(rgba(255, 255, 255, 0.10) 1.1px, transparent 1.6px),
                linear-gradient(rgba(5, 10, 26, 0.10), rgba(5, 10, 26, 0.55)),
                var(--hatter-kep);
            background-size: auto, auto, auto, 24px 24px, auto, cover;
            background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center 38%;
            background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
            background-color: #0b1a2e;
        }

        /* ── OLDALVÁLTÁS (JS nélkül is működik a :target miatt) ── */
        .oldal {
            display: none;
        }

        #fooldal {
            display: block;
        }

        body.nezet-rolunk #fooldal,
        body:not(.js):has(#rolunk:target) #fooldal {
            display: none;
        }

        body.nezet-rolunk #rolunk,
        body:not(.js) #rolunk:target {
            display: block;
        }

        body.nezet-galeria #fooldal,
        body:not(.js):has(#galeria:target) #fooldal {
            display: none;
        }

        body.nezet-galeria #galeria,
        body:not(.js) #galeria:target {
            display: block;
        }

        body.nezet-galeria::before,
        body:not(.js):has(#galeria:target)::before {
            background-image:
                repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 60px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 60px),
                radial-gradient(ellipse at 50% 0%, #1d4a5c 0%, #0c2230 55%, #07131c 100%);
            background-size: auto;
            background-repeat: repeat, repeat, no-repeat;
            background-position: 0 0;
            background-color: #07131c;
        }

        body.nezet-server #fooldal,
        body:not(.js):has(#server:target) #fooldal {
            display: none;
        }

        body.nezet-server #server,
        body:not(.js) #server:target {
            display: block;
        }

        /* Minecraft-textúrás háttér: fű-blokk sor felül, alatta föld (16x16-os textúra, felnagyítva, pixelesen) */
        body.nezet-server::before,
        body:not(.js):has(#server:target)::before {
            background-image:
                linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)),
                var(--fuves-kep),
                var(--fold-kep);
            background-size: auto, 96px 96px, 96px 96px;
            background-repeat: no-repeat, repeat-x, repeat;
            background-position: 0 0, 0 0, 0 0;
            background-color: #3b2a1a;
            image-rendering: pixelated;
        }

        body.nezet-rolunk::before,
        body:not(.js):has(#rolunk:target)::before {
            background-image:
                linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75)),
                var(--hatter-kep);
            background-size: auto, cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* ── FŐOLDAL ── */
        #fooldal .container {
            min-height: 100vh;
            min-height: 100dvh;
            display: grid;
            grid-template-rows: minmax(var(--gomb-pozicio), auto) auto;
            justify-items: center;
            align-content: start;
            padding: 0 18px 35px;
        }

        #fooldal h1 {
            text-align: center;
            font-size: clamp(25px, 5vw, 43px);
            font-weight: 800;
            line-height: 1.3;
            padding-top: 55px;
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
        }

        #fooldal .metal {
            display: inline-block;
            background: linear-gradient(
                120deg,
                var(--keret-1),
                var(--keret-2),
                var(--keret-3)
            );
            background-size: 100% auto;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            filter: drop-shadow(0 0 5px rgba(124, 77, 255, 0.65));
            font-weight: 900;
            letter-spacing: 1px;
        }

        .registered {
            font-size: 0.42em;
            line-height: 0;
            vertical-align: super;
            margin-left: 2px;
            color: white;
            -webkit-text-fill-color: white;
        }

        .buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
            width: 100%;
            max-width: 330px;
        }

        /* ── GOMBOK KINÉZETE ── */
        .menu-button {
            position: relative;
            overflow: hidden;
            isolation: isolate;

            display: flex;
            align-items: center;
            justify-content: center;

            width: 88%;
            min-height: 62px;
            padding: 10px 22px;

            color: white;
            text-decoration: none;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 1.5px;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);

            border-radius: 999px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%),
                var(--gomb-hatter);

            box-shadow:
                0 6px 0 var(--gomb-el),
                0 12px 22px rgba(0, 0, 0, 0.5),
                0 0 18px rgba(124, 77, 255, 0.35);

            backdrop-filter: blur(8px) saturate(140%);
            -webkit-backdrop-filter: blur(8px) saturate(140%);

            -webkit-tap-highlight-color: transparent;
            transition:
                transform 0.12s ease,
                box-shadow 0.12s ease,
                background 0.2s ease;
        }

        .menu-button::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 2px;
            border-radius: inherit;
            background: linear-gradient(120deg, var(--keret-1), var(--keret-2), var(--keret-3));
            -webkit-mask:
                linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask:
                linear-gradient(#000 0 0) content-box exclude,
                linear-gradient(#000 0 0);
            pointer-events: none;
            z-index: -1;
        }

        .menu-button::after {
            content: "";
            position: absolute;
            top: 0;
            left: -80%;
            width: 50%;
            height: 100%;
            background: linear-gradient(
                100deg,
                transparent 0%,
                rgba(255, 255, 255, 0.35) 50%,
                transparent 100%
            );
            transform: skewX(-20deg);
            pointer-events: none;
            z-index: -1;
        }

        @media (hover: hover) {
            .menu-button:hover {
                transform: translateY(-3px);
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
                    var(--gomb-hatter-hover);
                box-shadow:
                    0 9px 0 var(--gomb-el),
                    0 16px 28px rgba(0, 0, 0, 0.55),
                    0 0 26px rgba(0, 229, 255, 0.55);
            }

            .menu-button:hover::after {
                left: 130%;
                transition: left 0.7s ease;
            }
        }

        .menu-button:active {
            transform: translateY(5px) scale(0.985);
            box-shadow:
                0 1px 0 var(--gomb-el),
                0 3px 8px rgba(0, 0, 0, 0.5),
                inset 0 4px 14px rgba(0, 0, 0, 0.55),
                0 0 30px rgba(255, 43, 214, 0.6);
            transition-duration: 0.05s;
        }

        .menu-button:focus-visible {
            outline: 3px solid #ffffff;
            outline-offset: 4px;
        }

        .server-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-family: var(--mc-betu);
        }

        .server-s {
            font-size: 60px;          /* 6px-es pixelek */
            line-height: 0.8;
            font-weight: normal;
            color: #ffffff;
        }

        .server-words {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            line-height: 0.75;
        }

        .server-top,
        .server-bottom {
            font-size: 30px;          /* 3px-es pixelek */
            letter-spacing: 0;
        }

        .menu-button.world-button {
            background:
                repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 14px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 14px),
                linear-gradient(135deg, rgba(14, 92, 120, 0.78), rgba(8, 40, 64, 0.82));
            flex-wrap: nowrap;
            gap: 6px;
            letter-spacing: 0.4px;
        }

        .world-button .terkep {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        #fooldal .world-button .metal {
            background: linear-gradient(90deg, #8ff6ff, #ffe08a);
            background-clip: text;
            -webkit-background-clip: text;
            filter: none;
        }

        .world-button .terkep-szoveg {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
        }

        /* ── RÓLUNK OLDAL ── */
        #rolunk .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 18px 50px;
        }

        #rolunk h1 {
            text-align: center;
            font-size: clamp(28px, 6vw, 44px);
            margin-bottom: 30px;
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
        }

        .team-title {
            text-align: center;
            font-size: clamp(24px, 5vw, 34px);
            margin-bottom: 28px;
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
        }

        #rolunk .metal {
            display: inline-block;
            background: linear-gradient(120deg, var(--keret-1), var(--keret-2), var(--keret-3));
            background-size: 100% auto;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 5px rgba(124, 77, 255, 0.65));
            font-weight: 900;
            letter-spacing: 1px;
        }

        .team {
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-bottom: 40px;
        }

        .member {
            /* Minden tag saját kiemelő színe (keret, fény, kép gyűrűje) */
            --szin: #00b0ff;

            position: relative;
            text-align: center;
            padding: 30px 22px 28px;
            background: rgba(15, 18, 23, 0.82);
            border: 2px solid var(--szin);
            border-radius: 18px;
            box-shadow:
                0 6px 22px rgba(0, 0, 0, 0.55),
                0 0 18px color-mix(in srgb, var(--szin) 45%, transparent),
                inset 0 1px 1px rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            overflow: hidden;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .member::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--szin);
            box-shadow: 0 0 12px var(--szin);
        }

        @media (hover: hover) {
            .member:hover {
                transform: translateY(-4px);
                box-shadow:
                    0 10px 28px rgba(0, 0, 0, 0.65),
                    0 0 28px color-mix(in srgb, var(--szin) 70%, transparent),
                    inset 0 1px 1px rgba(255, 255, 255, 0.15);
            }
        }

        /* Kiemelés, amikor a Galériából ide ugrunk */
        .member.kiemel { animation: tagvillan 1.6s ease; }

        @keyframes tagvillan {
            0%, 60% { box-shadow: 0 0 0 4px #ffc83d, 0 0 26px #ffc83d; }
            100% { box-shadow: none; }
        }

        .member:nth-child(1) { --szin: #ff1744; }
        .member:nth-child(2) { --szin: #ff9100; }
        .member:nth-child(3) { --szin: #00e676; }
        .member:nth-child(4) { --szin: #00b0ff; }
        .member:nth-child(5) { --szin: #ff00e5; }

        .member-photo {
            width: 170px;
            height: 170px;
            margin: 6px auto 18px;
            border-radius: 50%;
            padding: 4px;
            background: var(--szin);
            box-shadow: 0 0 20px color-mix(in srgb, var(--szin) 70%, transparent);
        }

        .member-photo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            background: #1b2230;
            border: 3px solid rgba(15, 18, 23, 0.9);
        }

        .member-name {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 4px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        }

        .member-role {
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--szin);
            margin-bottom: 14px;
        }

        .member-text {
            font-size: 17px;
            line-height: 1.6;
            max-width: 560px;
            margin: 0 auto;
        }

        .back-button {
            display: block;
            width: fit-content;
            margin: 30px auto 0;
            padding: 14px 28px;
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 18px;
            background: rgba(15, 18, 23, 0.78);
            border: 2px solid rgba(220, 225, 232, 0.8);
            border-radius: 14px;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        @media (hover: hover) {
            .back-button:hover {
                transform: translateY(-3px);
                background: rgba(65, 70, 78, 0.88);
                border-color: #ffffff;
            }
        }

        .back-button:focus-visible {
            outline: 3px solid #ffffff;
            outline-offset: 3px;
        }

        /* Kicsi vissza gomb a bal felső sarokban (Rólunk, Galéria) */
        .vissza-mini {
            position: fixed;
            top: max(10px, env(safe-area-inset-top));
            left: 10px;
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            color: #fff;
            text-decoration: none;
            font-size: 20px;
            line-height: 1;
            background: rgba(15, 18, 23, 0.6);
            border: 1px solid rgba(220, 225, 232, 0.55);
            border-radius: 50%;
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }

        .vissza-mini:active { background: rgba(65, 70, 78, 0.85); }
        .vissza-mini:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

        /* ── MINECRAFT GOMB (.mc-button) ── */
        .mc-button {
            --mc-pixel: 4px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            min-width: 220px;
            min-height: 62px;
            padding: 6px 22px;

            font-family: var(--mc-betu);
            font-size: 20px;
            font-weight: normal;
            letter-spacing: 0;
            text-decoration: none;
            text-align: center;
            color: #ffffff;
            text-shadow: 0.1em 0.1em 0 #3f3f3f;

            background: #6f6f6f;
            border: 4px solid #000000;
            border-radius: 0;
            box-shadow:
                inset 4px 4px 0 #b6b6b6,
                inset -4px -4px 0 #3b3b3b;
            clip-path: polygon(
                0 4px, 4px 4px, 4px 0,
                calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
                100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
                4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
            );
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: none;
        }

        .menu-button.mc-button {
            padding-top: 0;
            padding-bottom: 0;
            width: 88%;
            overflow: visible;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-radius: 0;
        }

        .menu-button.mc-button::before,
        .menu-button.mc-button::after {
            display: none;
        }

        .mc-button.back-button {
            margin: 30px auto 0;
            padding: 10px 22px;
            font-size: 20px;
            border: 4px solid #000000;
            border-radius: 0;
            background: #6f6f6f;
        }

        @media (hover: hover) {
            .mc-button:hover,
            .menu-button.mc-button:hover,
            .mc-button.back-button:hover {
                transform: none;
                background: #7a86c8;
                color: #ffffa0;
                border-color: #000000;
                box-shadow:
                    inset 4px 4px 0 #c4ccf2,
                    inset -4px -4px 0 #3a4170;
            }
        }

        .mc-button:active,
        .menu-button.mc-button:active {
            transform: translateY(4px);
            background: #5f5f5f;
            box-shadow:
                inset 4px 4px 0 #3b3b3b,
                inset -4px -4px 0 #8a8a8a;
        }

        .mc-button:focus-visible {
            outline: 4px solid #ffffff;
            outline-offset: 2px;
        }

        /* ── SERVER OLDAL ── */
        #server .container {
            max-width: 640px;
            margin: 0 auto;
            padding: 40px 18px 50px;
            font-family: var(--mc-betu);
            font-size: 20px;
            line-height: 1.5;
            text-shadow: 0.1em 0.1em 0 #3f3f3f;
        }

        #server h1 {
            text-align: center;
            font-size: 50px;
            font-weight: normal;
            line-height: 1.1;
            margin-bottom: 30px;
            color: #ffaa00;
            text-shadow: 0.1em 0.1em 0 #2a2a00;
        }

        #server h2 {
            font-size: 30px;
            font-weight: normal;
            color: #ffaa00;
            text-shadow: 0.1em 0.1em 0 #2a2a00;
            margin: 34px 0 14px;
        }

        .mc-szerver {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 14px;
            background: rgba(0, 0, 0, 0.78);
            border: 4px solid #ffffff;
            box-shadow: 0 0 0 4px #000000;
            margin: 4px;
        }

        .mc-ikon {
            flex: 0 0 auto;
            width: 80px;
            height: 80px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            border: 4px solid #000;
        }

        .mc-szerver-nev {
            font-size: 30px;
            line-height: 1.1;
            color: #ffffff;
        }

        .mc-cimke {
            color: #aaaaaa;
            text-shadow: 0.1em 0.1em 0 #2a2a2a;
            margin: 26px 0 8px;
        }

        .mc-ip {
            display: block;
            width: 100%;
            padding: 16px 14px;
            background: #000000;
            border: 4px solid #a0a0a0;
            color: #ffffff;
            font-size: 30px;
            line-height: 1.2;
            text-align: center;
            overflow-wrap: anywhere;
            -webkit-user-select: all;
            user-select: all;
            text-shadow: 0.1em 0.1em 0 #3f3f3f;
        }

        .mc-masol {
            margin: 18px auto 0;
            min-width: 260px;
        }

        .mc-masol.kesz,
        .mc-masol.kesz:hover {
            color: #55ff55;
        }

        .mc-lepesek {
            list-style: none;
            counter-reset: lepes;
            padding: 0;
        }

        .mc-lepesek li {
            counter-increment: lepes;
            position: relative;
            padding: 6px 0 6px 40px;
        }

        .mc-lepesek li::before {
            content: counter(lepes) ".";
            position: absolute;
            left: 0;
            color: #ffaa00;
            text-shadow: 0.1em 0.1em 0 #2a2a00;
        }

        .mc-lepesek b {
            font-weight: normal;
            color: #55ffff;
            text-shadow: 0.1em 0.1em 0 #153f3f;
        }

        /* ── GALÉRIA ── */
        #galeria .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 18px 50px;
        }

        #galeria h1 {
            text-align: center;
            font-size: clamp(28px, 6vw, 44px);
            margin-bottom: 30px;
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
        }

        #galeria .metal {
            display: inline-block;
            background: linear-gradient(90deg, #00e5ff, #7c4dff, #ff2bd6);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
        }

        .gal-racs {
            display: grid;
            grid-template-columns: 1fr;
            gap: 34px 26px;
            padding: 0 6px;
        }

        @media (min-width: 640px) {
            .gal-racs { grid-template-columns: 1fr 1fr; }
        }

        /* Egy kártya = egy "polaroid" fotó helyszínnel */
        .gal-kartya {
            margin: 0;
            padding: 12px 12px 16px;
            background: #f6f1e4;
            color: #2a2a2a;
            border-radius: 4px;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
            transform: rotate(-1.2deg);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .gal-kartya:nth-child(even) { transform: rotate(1.4deg); }

        @media (hover: hover) {
            .gal-kartya:hover {
                transform: rotate(0deg) translateY(-4px);
                box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
            }
        }

        .gal-kep {
            position: relative;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: #1b3a4a;
        }

        .gal-kep img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: zoom-in;
        }

        .gal-felirat {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 4px 0;
            font-family: Georgia, "Times New Roman", serif;
            font-style: italic;
            font-size: 18px;
            line-height: 1.3;
        }

        .gal-felirat svg {
            flex: 0 0 auto;
            width: 20px;
            height: 26px;
        }

        .gal-hely {
            color: #7a1f1f;
            font-weight: bold;
            text-decoration: none;
            border-bottom: 1px dashed #7a1f1f;
        }

        /* Lapozható kártya: egyszerre egy dia (kép + felirat) látszik */
        .gal-slide { display: none; }
        .gal-slide.aktiv { display: block; }

        .gal-nyil {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
        }

        .gal-nyil.elozo { left: 8px; }
        .gal-nyil.kovetkezo { right: 8px; }

        .gal-pontok {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 8px;
            z-index: 2;
            display: flex;
            justify-content: center;
            gap: 6px;
        }

        .gal-pont {
            width: 8px;
            height: 8px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
        }

        .gal-pont.aktiv { background: #fff; }

        /* Rekord doboz */
        .gal-rekord {
            margin: 34px auto 0;
            max-width: 560px;
            padding: 18px;
            text-align: center;
            background: linear-gradient(160deg, rgba(60, 45, 10, 0.85), rgba(15, 18, 23, 0.9));
            border: 2px solid #ffc83d;
            border-radius: 18px;
            box-shadow: 0 0 22px rgba(255, 200, 61, 0.35);
        }

        .gal-rekord h2 {
            margin-bottom: 12px;
            font-size: clamp(20px, 5vw, 26px);
            color: #ffc83d;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
        }

        .rekord-kep {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            border-radius: 10px;
            background: #1b3a4a;
        }

        .rekord-kep img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Amíg nincs kép, szöveg jelzi a helyét */
        .rekord-kep.hianyzik img { display: none; }
        .rekord-kep.hianyzik::after { content: "Ide kerül a matrica képe"; color: #9fb7c4; }

        .rekord-adatok {
            margin-top: 14px;
            list-style: none;
            font-size: 17px;
            line-height: 1.7;
        }

        .rekord-adatok a { color: #7fe3ff; }
        .rekord-tav { font-size: 26px; font-weight: 800; color: #ffc83d; }

        /* Nagyított kép */
        .gal-nagy {
            position: fixed;
            inset: 0;
            z-index: 60;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.9);
            cursor: zoom-out;
        }

        .gal-nagy img {
            max-width: 100%;
            max-height: 82vh;
            border: 6px solid #f6f1e4;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
        }

        .gal-nagy span {
            color: #fff;
            font-size: 18px;
            text-align: center;
        }

        /* ── KISEBB MOBILKÉPERNYŐK ── */
        @media (max-width: 400px) {
            #fooldal h1 {
                padding-top: 38px;
            }

            #server h1 {
                font-size: 40px;
            }

            .mc-ip {
                font-size: 20px;
            }

            .mc-szerver-nev {
                font-size: 20px;
            }

            .mc-ikon {
                width: 64px;
                height: 64px;
            }
        }

        /* ── FEKVŐ / SZÉLES KÉPERNYŐ ── */
        @media (min-aspect-ratio: 1/1) {
            :root {
                --gomb-pozicio: 66dvh;
            }

            body::before {
                background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center 35%;
            }

            body.nezet-rolunk::before,
            body:not(.js):has(#rolunk:target)::before {
                background-position: center;
            }

            body.nezet-server::before,
            body:not(.js):has(#server:target)::before {
                background-position: 0 0;
            }

            body.nezet-galeria::before,
            body:not(.js):has(#galeria:target)::before {
                background-position: 0 0;
            }
        }

        /* ══════════════════════════════════════════════
           SMEX EVENTS (naptár + Post Events)
           ══════════════════════════════════════════════ */

        /* Oldalváltás (JS nélkül is működik a :target miatt) */
        body.nezet-events #fooldal,
        body:not(.js):has(#events:target) #fooldal {
            display: none;
        }

        body.nezet-events #events,
        body:not(.js) #events:target {
            display: block;
        }

        /* Háttér: pontrácsos "tervező" papír, lila-magenta fénnyel */
        body.nezet-events::before,
        body:not(.js):has(#events:target)::before {
            background-image:
                radial-gradient(rgba(255, 255, 255, 0.11) 1.2px, transparent 1.7px),
                radial-gradient(ellipse at 15% 0%, rgba(124, 77, 255, 0.42) 0%, transparent 58%),
                radial-gradient(ellipse at 95% 100%, rgba(255, 43, 214, 0.26) 0%, transparent 58%),
                linear-gradient(180deg, #0e1c36 0%, #090f20 100%);
            background-size: 26px 26px, auto, auto, auto;
            background-repeat: repeat, no-repeat, no-repeat, no-repeat;
            background-position: 0 0, 0 0, 0 0, 0 0;
            background-color: #090f20;
        }

        #events [hidden] { display: none !important; }

        /* ── Főoldali gomb: SMEX Events ── */
        .menu-button.events-button {
            letter-spacing: 0.6px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
                linear-gradient(120deg, rgba(124, 77, 255, 0.85), rgba(255, 43, 214, 0.64) 62%, rgba(255, 145, 0, 0.6));
        }

        @media (hover: hover) {
            .menu-button.events-button:hover {
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 55%),
                    linear-gradient(120deg, rgba(150, 110, 255, 0.92), rgba(255, 80, 225, 0.72) 62%, rgba(255, 170, 40, 0.7));
                box-shadow:
                    0 9px 0 var(--gomb-el),
                    0 16px 28px rgba(0, 0, 0, 0.55),
                    0 0 26px rgba(255, 43, 214, 0.6);
            }
        }

        .events-button .esz-konfetti {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        .events-button .esz-gomb-szoveg {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
        }

        .events-button .esz-gomb-naptar {
            flex: none;
            width: 24px;
            height: 26px;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
        }

        #fooldal .events-button .metal {
            background: linear-gradient(90deg, #fff1a8, #ffffff);
            background-clip: text;
            -webkit-background-clip: text;
            text-shadow: none;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
        }

        /* Váltakozó eseménytípus-ikonok a gomb jobb szélén */
        .esz-gomb-tipusok {
            position: absolute;
            right: 16px;
            top: 50%;
            width: 26px;
            height: 26px;
            margin-top: -13px;
            font-size: 20px;
            line-height: 26px;
            text-align: center;
            pointer-events: none;
        }

        .esz-gomb-tipusok span {
            position: absolute;
            inset: 0;
            opacity: 0;
            animation: esz-tipus 7.5s infinite;
        }

        .esz-gomb-tipusok span:nth-child(2) { animation-delay: 1.5s; }
        .esz-gomb-tipusok span:nth-child(3) { animation-delay: 3s; }
        .esz-gomb-tipusok span:nth-child(4) { animation-delay: 4.5s; }
        .esz-gomb-tipusok span:nth-child(5) { animation-delay: 6s; }

        @keyframes esz-tipus {
            0%   { opacity: 0; transform: translateY(8px) scale(0.6); }
            4%, 16% { opacity: 1; transform: none; }
            20%, 100% { opacity: 0; transform: translateY(-8px) scale(0.6); }
        }

        @media (prefers-reduced-motion: reduce) {
            .esz-gomb-tipusok span { animation: none; }
            .esz-gomb-tipusok span:first-child { opacity: 1; }
        }

        @media (max-width: 400px) {
            .events-button .esz-gomb-szoveg { font-size: 17px; gap: 6px; }
            .esz-gomb-tipusok { right: 12px; }
        }

        /* ── Az oldal ── */
        #events .container {
            max-width: 760px;
            margin: 0 auto;
            padding: 40px 18px 50px;
        }

        #events h1 {
            text-align: center;
            font-size: clamp(28px, 6vw, 44px);
            margin-bottom: 30px;
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
        }

        #events .metal {
            display: inline-block;
            background: linear-gradient(120deg, var(--keret-1), var(--keret-2), var(--keret-3));
            background-size: 100% auto;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 5px rgba(124, 77, 255, 0.65));
            font-weight: 900;
            letter-spacing: 1px;
        }

        /* ── Naptár ── */
        .esz-naptar {
            position: relative;
            margin-top: 26px;
            background: rgba(12, 20, 38, 0.84);
            border: 2px solid rgba(255, 255, 255, 0.16);
            border-radius: 18px;
            box-shadow:
                0 8px 26px rgba(0, 0, 0, 0.55),
                0 0 22px rgba(124, 77, 255, 0.35);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }

        /* Spirál gyűrűk a tetején */
        .esz-naptar::before,
        .esz-naptar::after {
            content: "";
            position: absolute;
            top: -16px;
            width: 12px;
            height: 30px;
            border-radius: 6px;
            background: linear-gradient(90deg, #8b95a3, #f4f7fb 45%, #8b95a3);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
            z-index: 2;
        }

        .esz-naptar::before { left: 22%; }
        .esz-naptar::after { right: 22%; }

        .esz-fej {
            padding: 24px 16px 14px;
            text-align: center;
            border-radius: 16px 16px 0 0;
            background: linear-gradient(120deg, #7c4dff, #ff2bd6);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        }

        .esz-ho {
            font-size: clamp(24px, 6vw, 34px);
            font-weight: 800;
            letter-spacing: 1px;
        }

        .esz-ma {
            margin-top: 4px;
            font-size: 14px;
            opacity: 0.92;
        }

        .esz-racsdoboz { padding: 12px 10px 14px; }

        .esz-hetnapok,
        .esz-napok {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 4px;
        }

        .esz-hetnapok { margin-bottom: 6px; }

        .esz-hetnapok span {
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: #9fb7c4;
        }

        .esz-hetnapok .hv { color: #ff8ae9; }

        .esz-nap {
            --szin: #ff2bd6;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: 0;
            aspect-ratio: 1 / 1;
            padding: 4px 4px 3px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 10px;
        }

        .esz-nap.ures {
            background: none;
            border-color: transparent;
        }

        .esz-szam {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            width: 20px;
            height: 20px;
            font-size: 13px;
            font-weight: bold;
            line-height: 1;
            border-radius: 50%;
        }

        .esz-nap.hvege .esz-szam { color: #ff8ae9; }
        .esz-nap.mult { opacity: 0.6; }

        .esz-nap.van {
            background: color-mix(in srgb, var(--szin) 17%, rgba(12, 20, 38, 0.6));
            border-color: var(--szin);
            box-shadow: 0 0 10px color-mix(in srgb, var(--szin) 40%, transparent);
        }

        .esz-nap.van.mult { opacity: 0.82; }

        .esz-nap.ma {
            border: 2px solid #ffc83d;
            box-shadow: 0 0 12px rgba(255, 200, 61, 0.55);
        }

        .esz-nap.ma:not(.van) { background: rgba(255, 200, 61, 0.12); }

        .esz-nap.ma .esz-szam {
            background: #ffc83d;
            color: #1a1405;
        }

        /* Esemény: kis pontok (mobil) / feliratok (nagyobb kijelző) */
        .esz-pontok {
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
            margin-top: auto;
            padding: 0 1px 1px;
        }

        .esz-pont {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--szin);
            box-shadow: 0 0 6px var(--szin);
        }

        .esz-chipek { display: none; }

        .esz-chip {
            margin-top: 3px;
            padding: 2px 5px;
            overflow: hidden;
            font-size: 11px;
            font-weight: bold;
            line-height: 1.25;
            overflow-wrap: anywhere;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            color: #0b1220;
            background: var(--szin);
            border-radius: 5px;
        }

        .esz-chip.esz-tobb {
            color: #fff;
            background: rgba(255, 255, 255, 0.22);
        }

        @media (min-width: 560px) {
            .esz-racsdoboz { padding: 16px 16px 18px; }

            .esz-nap {
                aspect-ratio: auto;
                min-height: 94px;
                padding: 6px 7px;
            }

            .esz-szam {
                width: 24px;
                height: 24px;
                font-size: 14px;
            }

            .esz-chipek {
                display: block;
                width: 100%;
                margin-top: 4px;
            }

            .esz-pontok { display: none; }
        }

        /* Az adott hónap eseményei a naptár alatt */
        .esz-al-cim {
            padding: 4px 16px 10px;
            font-size: 15px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #ffc83d;
        }

        .esz-honap-lista {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0 14px 18px;
            list-style: none;
        }

        .esz-honap-lista li {
            --szin: #ff2bd6;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 9px 12px;
            font-size: 16px;
            background: rgba(255, 255, 255, 0.06);
            border-left: 5px solid var(--szin);
            border-radius: 10px;
        }

        .esz-li-nap {
            min-width: 2.2em;
            font-weight: 800;
            color: var(--szin);
        }

        .esz-li-nev {
            flex: 1 1 auto;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .esz-li-cimke {
            flex: none;
            padding: 3px 8px;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: #1a1405;
            background: #ffc83d;
            border-radius: 999px;
        }

        .esz-li-cimke.veg {
            color: #cfd8df;
            background: rgba(255, 255, 255, 0.14);
        }

        .esz-ures-uzenet {
            padding: 4px 18px 18px;
            text-align: center;
            font-style: italic;
            line-height: 1.5;
            color: #9fb7c4;
        }

        /* ── Post Events ── */
        .esz-post { margin-top: 44px; }

        .esz-cim {
            margin-bottom: 6px;
            text-align: center;
            font-size: clamp(24px, 5vw, 34px);
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
        }

        .esz-alcim {
            margin-bottom: 22px;
            text-align: center;
            font-size: 15px;
            color: #b9c8d3;
        }

        .esz-post-lista {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .esz-post-kartya {
            --szin: #00b0ff;
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 12px 14px 12px 12px;
            font: inherit;
            text-align: left;
            color: #fff;
            cursor: pointer;
            background: rgba(15, 18, 23, 0.82);
            border: 2px solid var(--szin);
            border-radius: 16px;
            box-shadow:
                0 6px 18px rgba(0, 0, 0, 0.5),
                0 0 14px color-mix(in srgb, var(--szin) 40%, transparent);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        @media (hover: hover) {
            .esz-post-kartya:hover {
                transform: translateY(-3px);
                box-shadow:
                    0 10px 26px rgba(0, 0, 0, 0.6),
                    0 0 26px color-mix(in srgb, var(--szin) 70%, transparent);
            }
        }

        .esz-post-kartya:active { transform: scale(0.985); }
        .esz-post-kartya:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

        .esz-datum {
            flex: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 62px;
            height: 66px;
            line-height: 1;
            color: #0b1220;
            background: var(--szin);
            border-radius: 12px;
        }

        .esz-datum b { font-size: 26px; font-weight: 900; }

        .esz-datum span {
            margin-top: 3px;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .esz-post-info {
            flex: 1 1 auto;
            min-width: 0;
        }

        .esz-post-nev {
            display: block;
            font-size: 19px;
            font-weight: 800;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .esz-post-meta {
            display: block;
            margin-top: 4px;
            font-size: 14px;
            color: #b9c8d3;
        }

        .esz-thumb {
            display: none;
            flex: none;
            width: 64px;
            height: 64px;
            object-fit: cover;
            border: 3px solid #f6f1e4;
            border-radius: 4px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
            transform: rotate(3deg);
        }

        @media (min-width: 440px) {
            .esz-thumb { display: block; }
        }

        .esz-nyil-jel {
            flex: none;
            font-size: 28px;
            line-height: 1;
            color: var(--szin);
        }

        /* ── Esemény galériája ── */
        #events .esz-gal-fej h1 { margin-bottom: 14px; }

        .esz-gal-fej {
            margin-bottom: 28px;
            text-align: center;
        }

        .esz-gal-datum {
            --szin: #ffc83d;
            display: inline-block;
            padding: 6px 16px;
            font-size: 15px;
            font-weight: bold;
            background: rgba(15, 18, 23, 0.7);
            border: 2px solid var(--szin);
            border-radius: 999px;
            box-shadow: 0 0 12px color-mix(in srgb, var(--szin) 50%, transparent);
        }

        .esz-racs {
            display: grid;
            grid-template-columns: 1fr;
            gap: 34px 26px;
            padding: 0 6px;
        }

        @media (min-width: 640px) {
            .esz-racs { grid-template-columns: 1fr 1fr; }
        }

        .esz-racs .gal-kep.hianyzik {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .esz-racs .gal-kep.hianyzik img { display: none; }

        .esz-racs .gal-kep.hianyzik::after {
            content: "A kép nem található";
            padding: 10px;
            text-align: center;
            font-size: 14px;
            color: #9fb7c4;
        }

        .esz-gal-ures {
            padding: 30px 20px;
            text-align: center;
            line-height: 1.6;
            color: #cfd8df;
            background: rgba(15, 18, 23, 0.78);
            border: 2px dashed rgba(255, 255, 255, 0.35);
            border-radius: 16px;
        }

        /* Nagyított kép: léptető nyilak */
        .gal-nagy .gal-nyil {
            position: absolute;
            width: 44px;
            height: 44px;
            font-size: 28px;
        }

        /* ── ZENE GOMB (tagonként) ── */
        .music-button {
            display: inline-flex; align-items: center; justify-content: center; gap: 12px;
            max-width: 100%; margin-top: 22px; padding: 10px 22px 10px 12px;
            color: white; font-family: inherit; font-size: 15px; font-weight: bold; text-align: left;
            cursor: pointer; background: rgba(255, 255, 255, 0.08);
            border: 2px solid var(--szin); border-radius: 999px;
            box-shadow: 0 0 12px color-mix(in srgb, var(--szin) 50%, transparent);
            -webkit-tap-highlight-color: transparent;
            transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
        }
        .music-icon {
            flex: none; display: flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 50%;
            background: var(--szin); color: #0b1220; font-size: 15px; padding-left: 2px;
        }
        .music-title { line-height: 1.25; }
        @media (hover: hover) {
            .music-button:hover {
                background: color-mix(in srgb, var(--szin) 22%, transparent);
                box-shadow: 0 0 20px color-mix(in srgb, var(--szin) 75%, transparent);
            }
        }
        .music-button:active { transform: scale(.96); }
        .music-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
        .music-button.playing {
            background: color-mix(in srgb, var(--szin) 30%, transparent);
            animation: pulzal 1.4s ease-in-out infinite;
        }
        .music-button.playing .music-icon { padding-left: 0; }
        @keyframes pulzal {
            0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--szin) 50%, transparent); }
            50% { box-shadow: 0 0 26px color-mix(in srgb, var(--szin) 90%, transparent); }
        }
        @media (prefers-reduced-motion: reduce) { .music-button.playing { animation: none; } }

        /* ── AKADÁLYMENTES MOZGÁSBEÁLLÍTÁS ── */
        @media (prefers-reduced-motion: reduce) {
            .menu-button,
            .menu-button::after {
                transition: none !important;
            }
        }

        /* ══════════ SMEX GARÁZS ══════════ */
        .garage-button {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            max-width: 100%; margin-top: 12px; padding: 9px 22px 9px 14px;
            color: white; font-family: inherit; font-size: 15px; font-weight: bold;
            cursor: pointer; background: rgba(255, 255, 255, 0.05);
            border: 2px solid var(--szin); border-radius: 999px;
            box-shadow: 0 0 10px color-mix(in srgb, var(--szin) 40%, transparent);
            -webkit-tap-highlight-color: transparent;
            transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
        }
        .garage-button .garage-icon { font-size: 18px; line-height: 1; }
        @media (hover: hover) {
            .garage-button:hover {
                background: color-mix(in srgb, var(--szin) 22%, transparent);
                box-shadow: 0 0 20px color-mix(in srgb, var(--szin) 75%, transparent);
            }
        }
        .garage-button:active { transform: scale(.96); }
        .garage-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

        .garazs-modal {
            position: fixed; inset: 0; z-index: 300;
            display: none; align-items: center; justify-content: center;
            padding: 16px; overflow-y: auto;
            background: rgba(3, 8, 18, 0.72);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            opacity: 0; transition: opacity .25s ease;
        }
        .garazs-modal.nyitva { display: flex; }
        .garazs-modal.latszik { opacity: 1; }

        .garazs-card {
            --mod-szin: #00e5ff;                       /* autó mód: kék/cián */
            position: relative; overflow: hidden;
            width: min(720px, 100%); margin: auto;
            padding: 12px; display: flex; flex-direction: column; gap: 12px;
            border-radius: 22px;
            background: rgba(10, 18, 34, 0.84);
            border: 2px solid var(--mod-szin);
            box-shadow: 0 0 28px color-mix(in srgb, var(--mod-szin) 55%, transparent),
                        inset 0 0 28px color-mix(in srgb, var(--mod-szin) 14%, transparent);
            transform: translateY(14px) scale(.97);
            transition: transform .25s ease, border-color .3s ease, box-shadow .3s ease;
        }
        .garazs-modal.latszik .garazs-card { transform: none; }
        .garazs-card.mod-motor { --mod-szin: #ff5a1f; } /* motor mód: piros/narancs */
        .garazs-card.mod-targonca { --mod-szin: #ffc400; } /* 3. jármű (csak Kristófnál): sárga */

        .garazs-bezar {
            position: absolute; top: 20px; right: 20px; z-index: 5;
            width: 44px; height: 44px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; line-height: 1; color: #fff; cursor: pointer;
            background: rgba(6, 12, 24, 0.6); border: 1.5px solid var(--szin);
            -webkit-tap-highlight-color: transparent;
            transition: background .2s ease, transform .12s ease;
        }
        .garazs-bezar:hover { background: color-mix(in srgb, var(--szin) 35%, rgba(6,12,24,.6)); }
        .garazs-bezar:active { transform: scale(.92); }
        .garazs-bezar:focus-visible, .garazs-sisak:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

        .garazs-kepdoboz {
            position: relative; overflow: hidden;
            width: 100%; aspect-ratio: 16 / 10; max-height: calc(100dvh - 150px);
            border-radius: 14px; background: #07101e;
        }
        .garazs-kep {
            position: absolute; inset: 0; opacity: 0;
            transition: opacity .25s ease, filter .2s ease;
        }
        .garazs-kep.aktiv { opacity: 1; }
        .garazs-kep img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .garazs-kep .garazs-hely {
            display: none; position: absolute; inset: 0;
            align-items: center; justify-content: center; color: rgba(255,255,255,.35);
            background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.08), transparent 70%);
        }
        .garazs-kep .garazs-hely svg { width: 38%; max-width: 220px; height: auto; }
        .garazs-kep.hiba img { display: none; }
        .garazs-kep.hiba .garazs-hely { display: flex; }
        .garazs-kepdoboz.sotet .garazs-kep { filter: brightness(.45) blur(3px); }

        /* neon fénycsík */
        .garazs-csik {
            position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: 3;
            pointer-events: none; opacity: 0; transform: translateX(-120%) skewX(-18deg);
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mod-szin) 45%, transparent), transparent);
        }
        .garazs-csik.fut { animation: garazsCsik .7s ease-out; }
        @keyframes garazsCsik {
            0%   { opacity: 0; transform: translateX(-120%) skewX(-18deg); }
            20%  { opacity: 1; }
            100% { opacity: 0; transform: translateX(380%) skewX(-18deg); }
        }

        .garazs-szoveg {
            margin: 0; padding: 2px 8px 6px; text-align: center;
            font-size: clamp(16px, 4.4vw, 21px); font-weight: bold; letter-spacing: .02em;
            text-shadow: 0 0 10px color-mix(in srgb, var(--mod-szin) 70%, transparent);
            transition: opacity .2s ease;
        }
        .garazs-szoveg.el { opacity: 0; }

        /* bukósisak kapcsoló */
        .garazs-sisak {
            position: absolute; right: 10px; bottom: 10px; z-index: 4;
            width: 50px; height: 50px; padding: 0; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            color: #fff; background: rgba(8, 14, 26, 0.38);
            border: 1.5px solid color-mix(in srgb, var(--mod-szin) 65%, transparent);
            box-shadow: 0 0 10px color-mix(in srgb, var(--mod-szin) 35%, transparent);
            -webkit-tap-highlight-color: transparent; touch-action: manipulation;
            transition: background .2s ease, box-shadow .2s ease, transform .12s ease, border-color .3s ease;
        }
        .garazs-sisak:hover { background: rgba(8, 14, 26, 0.6); box-shadow: 0 0 16px color-mix(in srgb, var(--mod-szin) 60%, transparent); }
        .garazs-sisak:active { transform: scale(.92); }
        .garazs-sisak svg { width: 36px; height: 36px; overflow: visible; }
        .garazs-sisak .plexi {
            transform-box: view-box; transform-origin: 30px 24px;
            transform: rotate(-52deg);                 /* nyitott plexi */
            transition: transform .3s ease;
        }
        .garazs-sisak.zart .plexi { transform: rotate(0deg); }

        body.garazs-nyitva { overflow: hidden; }

        @media (max-width: 520px) {
            .garazs-modal { padding: 10px; }
            .garazs-card { padding: 8px; border-radius: 18px; }
            .garazs-bezar { top: 14px; right: 14px; }
            .garazs-kepdoboz { aspect-ratio: 4 / 3; }
        }

        @media (prefers-reduced-motion: reduce) {
            .garazs-modal, .garazs-card, .garazs-kep, .garazs-szoveg, .garazs-sisak .plexi { transition: none !important; }
            .garazs-card { transform: none; }
            .garazs-kepdoboz.sotet .garazs-kep { filter: none; }
            .garazs-csik.fut { animation: none; }
        }