/* ============================================================
   JÁTÉKKÖZPONT — sötét / neon dizájn
   Színek kártyánként: a --accent és --accent2 a config/games.php-ból jön.
   ============================================================ */

:root{
    --bg:#05060c;
    --bg2:#0a0d1a;
    --panel:rgba(255,255,255,.045);
    --line:rgba(255,255,255,.10);
    --txt:#e8ecff;
    --muted:#8d95bb;
    --radius:20px;
    --font-display:'Orbitron','OrbitronExt','Rajdhani',system-ui,sans-serif;
    --font-body:'Rajdhani',system-ui,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* a hidden attribútum legyen erősebb a display szabályoknál (kereső szűrése) */
[hidden]{display:none!important}

html{scroll-behavior:smooth}

body{
    min-height:100vh;
    background:var(--bg);
    color:var(--txt);
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.5;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
}

a{color:inherit;text-decoration:none}
kbd{
    font-family:var(--font-body);font-weight:700;font-size:.85em;
    padding:1px 7px;border-radius:6px;
    border:1px solid var(--line);background:rgba(255,255,255,.07);
}

/* ---------------------------- HÁTTÉR ---------------------------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
    radial-gradient(120% 80% at 50% -10%,#151a35 0%,var(--bg2) 45%,var(--bg) 100%)}

.bg-grid{
    position:absolute;inset:-50%;
    background-image:
        linear-gradient(rgba(120,140,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(120,140,255,.07) 1px,transparent 1px);
    background-size:56px 56px;
    transform:perspective(600px) rotateX(58deg);
    animation:gridmove 18s linear infinite;
    mask-image:radial-gradient(60% 50% at 50% 45%,#000 0%,transparent 75%);
    -webkit-mask-image:radial-gradient(60% 50% at 50% 45%,#000 0%,transparent 75%);
}
@keyframes gridmove{to{background-position:0 56px,56px 0}}

.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen}
.o1{width:46vw;height:46vw;left:-10vw;top:-8vw;background:#ff5f2e;animation:float1 22s ease-in-out infinite}
.o2{width:40vw;height:40vw;right:-8vw;top:10vh;background:#7c3aed;animation:float2 26s ease-in-out infinite}
.o3{width:38vw;height:38vw;left:35vw;bottom:-16vw;background:#0891b2;animation:float3 30s ease-in-out infinite}
@keyframes float1{50%{transform:translate(8vw,10vh) scale(1.15)}}
@keyframes float2{50%{transform:translate(-10vw,6vh) scale(1.1)}}
@keyframes float3{50%{transform:translate(6vw,-8vh) scale(1.2)}}

.bg-noise{position:absolute;inset:0;opacity:.05;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

.scan{position:absolute;inset:0;pointer-events:none;opacity:.35;
    background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.35) 3px 4px)}

/* ---------------------------- FEJLÉC ---------------------------- */
.top{
    position:relative;z-index:5;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:26px clamp(18px,5vw,64px);
    animation:dropIn .8s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-24px)}}

.brand{display:flex;align-items:center;gap:16px}

.logo{position:relative;width:54px;height:54px;display:grid;place-items:center;flex:none}
.logo-ring{
    position:absolute;inset:0;border-radius:50%;
    border:2px solid transparent;
    background:conic-gradient(from 0deg,#ff7a18,#ff2d55,#9b5cff,#22d3ee,#ff7a18) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:spin 6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-core{
    font-size:18px;color:#fff;
    text-shadow:0 0 14px #9b5cff,0 0 30px #22d3ee;
    animation:pulseCore 2.6s ease-in-out infinite;
}
@keyframes pulseCore{50%{transform:scale(1.18);opacity:.75}}

.brand-text h1{
    font-family:var(--font-display);
    font-size:clamp(20px,3.4vw,34px);
    font-weight:900;letter-spacing:.14em;
    background:linear-gradient(100deg,#fff 10%,#9b5cff 40%,#22d3ee 60%,#fff 90%);
    background-size:220% auto;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:sheen 6s linear infinite;
}
@keyframes sheen{to{background-position:220% center}}
.tagline{color:var(--muted);font-size:15px;letter-spacing:.04em}

/* -------------------------- NYELVVÁLASZTÓ ------------------------ */
.lang{position:relative;flex:none}

.lang-btn{
    display:flex;align-items:center;gap:10px;
    padding:11px 16px;border-radius:14px;cursor:pointer;
    font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:.08em;
    color:var(--txt);background:var(--panel);
    border:1px solid var(--line);
    backdrop-filter:blur(12px);
    transition:.25s cubic-bezier(.2,.9,.25,1);
}
.lang-btn:hover{
    border-color:rgba(155,92,255,.7);
    box-shadow:0 0 0 4px rgba(155,92,255,.12),0 0 26px rgba(155,92,255,.35);
    transform:translateY(-2px);
}
.flag{
    width:24px;height:16px;flex:none;display:block;border-radius:3px;
    box-shadow:0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.5);
    transition:transform .25s;
}
.flag-emoji{font-size:19px;line-height:1;width:auto;height:auto;box-shadow:none}
.lang-btn:hover .flag{transform:scale(1.08)}
.caret{
    width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:.3s;
}
.lang.open .caret{transform:rotate(-135deg) translateY(-2px)}
.lang.open .lang-btn{border-color:rgba(155,92,255,.8);box-shadow:0 0 24px rgba(155,92,255,.4)}

.lang-menu{
    position:absolute;right:0;top:calc(100% + 12px);z-index:20;
    min-width:230px;list-style:none;padding:8px;
    border-radius:18px;border:1px solid var(--line);
    background:rgba(10,12,26,.9);backdrop-filter:blur(18px);
    box-shadow:0 24px 60px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.96);
    transform-origin:top right;
    transition:.28s cubic-bezier(.2,.9,.25,1);
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}

.lang-item{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;border-radius:12px;
    font-weight:600;letter-spacing:.02em;
    transition:.2s;position:relative;overflow:hidden;
}
.lang-item::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(#9b5cff,#22d3ee);transform:scaleY(0);transition:.25s;
}
.lang-item:hover{background:rgba(255,255,255,.07);transform:translateX(4px)}
.lang-item:hover::before{transform:scaleY(1)}

.lang-item .name{flex:1}
.lang-item .tick{opacity:0;color:#22d3ee}
.lang-item.is-active{background:rgba(155,92,255,.16)}
.lang-item.is-active .tick{opacity:1}
.lang.open .lang-item{animation:itemIn .35s backwards}
.lang.open li:nth-child(1) .lang-item{animation-delay:.02s}
.lang.open li:nth-child(2) .lang-item{animation-delay:.05s}
.lang.open li:nth-child(3) .lang-item{animation-delay:.08s}
.lang.open li:nth-child(4) .lang-item{animation-delay:.11s}
.lang.open li:nth-child(5) .lang-item{animation-delay:.14s}
.lang.open li:nth-child(6) .lang-item{animation-delay:.17s}
.lang.open li:nth-child(7) .lang-item{animation-delay:.20s}
.lang.open li:nth-child(8) .lang-item{animation-delay:.23s}
@keyframes itemIn{from{opacity:0;transform:translateX(14px)}}

/* ---------------------------- TARTALOM --------------------------- */
.wrap{
    position:relative;z-index:2;flex:1;
    width:min(1280px,100%);margin:0 auto;
    padding:10px clamp(18px,5vw,64px) 60px;
    display:flex;flex-direction:column;justify-content:center;
}

.toolbar{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    margin:10px 0 30px;
    animation:fadeUp .8s .15s both;
}
.section{
    font-family:var(--font-display);font-size:15px;font-weight:700;
    letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
    padding-left:14px;position:relative;
}
.section::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:18px;border-radius:2px;
    background:linear-gradient(#ff7a18,#9b5cff);
    box-shadow:0 0 12px rgba(155,92,255,.8);
}

.search{position:relative;flex:1;min-width:220px;max-width:420px}
.search-ico{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    font-size:20px;color:var(--muted);pointer-events:none;
}
.search input{
    width:100%;padding:12px 16px 12px 42px;
    border-radius:14px;border:1px solid var(--line);
    background:var(--panel);color:var(--txt);
    font-family:var(--font-body);font-size:16px;
    outline:none;transition:.25s;backdrop-filter:blur(10px);
}
.search input::placeholder{color:var(--muted)}
.search input:focus{
    border-color:rgba(34,211,238,.7);
    box-shadow:0 0 0 4px rgba(34,211,238,.1),0 0 26px rgba(34,211,238,.25);
}
.count{color:var(--muted);font-size:15px;letter-spacing:.05em}
.count b{color:var(--txt);font-family:var(--font-display);font-size:17px}

/* ----------------------------- RÁCS ------------------------------ */
.grid{
    display:grid;gap:26px;
    grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
    perspective:1400px;
}

.card{
    position:relative;isolation:isolate;overflow:hidden;
    min-height:348px;border-radius:var(--radius);
    background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
    border:1px solid var(--line);
    display:flex;flex-direction:column;justify-content:flex-end;
    transform-style:preserve-3d;
    transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .35s,border-color .35s;
    animation:cardIn .9s cubic-bezier(.2,.9,.25,1) both;
    animation-delay:var(--d,0ms);
    will-change:transform;
}
@keyframes cardIn{from{opacity:0;transform:translateY(46px) rotateX(12deg) scale(.94)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}

.card:hover,.card:focus-visible{
    border-color:color-mix(in srgb,var(--accent) 70%,transparent);
    box-shadow:0 26px 60px rgba(0,0,0,.55),
               0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),
               0 0 60px color-mix(in srgb,var(--accent) 35%,transparent);
    outline:none;
}

/* futó neon keret */
.card-border{
    position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:3;
    background:conic-gradient(from var(--ang,0deg),transparent 0 62%,var(--accent) 78%,var(--accent2) 88%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .35s;
    animation:angle 4s linear infinite;
}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes angle{to{--ang:360deg}}
.card:hover .card-border{opacity:1}

/* egeret követő fény */
.shine{
    position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
        color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%);
    opacity:0;transition:opacity .35s;
}
.card:hover .shine{opacity:1}

.card-body{
    position:relative;z-index:5;
    padding:26px;
    background:linear-gradient(to top,rgba(5,6,12,.92) 30%,rgba(5,6,12,.55) 70%,transparent);
}

.icon{
    display:block;font-size:44px;line-height:1;margin-bottom:12px;
    filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 80%,transparent));
    transition:transform .4s cubic-bezier(.2,.9,.25,1);
}
.card:hover .icon{transform:translateY(-6px) scale(1.12) rotate(-6deg)}

.title{
    font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:8px;
    background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--accent) 80%,#fff));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.desc{color:var(--muted);font-size:16px;min-height:48px}

.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}

.badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 12px;border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.06em;
    border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted);
}
.dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:blink 1.8s ease-in-out infinite}
.status-beta .dot{background:#facc15;box-shadow:0 0 10px #facc15}
.status-dev  .dot{background:#38bdf8;box-shadow:0 0 10px #38bdf8}
.status-soon .dot{background:#f87171;box-shadow:0 0 10px #f87171}
@keyframes blink{50%{opacity:.35}}

.cta{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;
    color:color-mix(in srgb,var(--accent) 85%,#fff);
}
.arrow{transition:transform .35s cubic-bezier(.2,.9,.25,1);font-style:normal}
.card:hover .arrow{transform:translateX(8px)}

.empty{
    text-align:center;color:var(--muted);font-size:20px;padding:70px 0;
    animation:fadeUp .4s both;
}

/* =================== KATEGÓRIÁNKÉNTI ANIMÁCIÓK =================== */
.fx{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit}
.fx::after{content:'';position:absolute;inset:0;
    background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 26%,transparent),
                                       color-mix(in srgb,var(--accent2) 22%,transparent));}

/* ------- RACING: aszfalt, sebességvonalak, kockás zászló ------- */
.fx-racing .asphalt{
    position:absolute;inset:0;
    background:
        repeating-linear-gradient(115deg,rgba(0,0,0,.35) 0 22px,transparent 22px 44px),
        linear-gradient(180deg,#2a1206,#0b0507);
    animation:asphalt 2.4s linear infinite;
}
@keyframes asphalt{to{background-position:88px 0,0 0}}
.fx-racing .streak{
    position:absolute;height:3px;border-radius:3px;left:-45%;
    background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent2),transparent);
    box-shadow:0 0 18px var(--accent);
    animation:zoom 1.6s linear infinite;
    opacity:.85;
}
.fx-racing .s1{top:14%;width:60%;animation-duration:1.1s}
.fx-racing .s2{top:27%;width:45%;animation-duration:1.5s;animation-delay:.2s}
.fx-racing .s3{top:41%;width:70%;animation-duration:.9s;animation-delay:.45s}
.fx-racing .s4{top:56%;width:38%;animation-duration:1.8s;animation-delay:.1s}
.fx-racing .s5{top:68%;width:55%;animation-duration:1.3s;animation-delay:.6s}
.fx-racing .s6{top:82%;width:48%;animation-duration:1.05s;animation-delay:.35s}
@keyframes zoom{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(260%) skewX(-18deg)}}
.card--racing:hover .streak{animation-duration:.45s!important}
.fx-racing .flag{
    position:absolute;top:0;right:0;width:56px;height:100%;opacity:.10;
    mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
    background-image:
        linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
        linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
    background-size:20px 20px;background-position:0 0,10px 10px;
    animation:flagScroll 1.4s linear infinite;
}
@keyframes flagScroll{to{background-position:0 20px,10px 30px}}

/* --- száguldó autó --- */
.fx-racing .car-lane{position:absolute;left:0;right:0;top:24%;height:76px;pointer-events:none}
.fx-racing .car{
    position:absolute;bottom:0;z-index:2;width:min(60%,200px);height:auto;overflow:visible;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.65))
           drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 55%,transparent));
    animation:drive 5.2s linear infinite;
}
@keyframes drive{
    0%   {left:-62%;opacity:0}
    10%  {opacity:1}
    88%  {opacity:1}
    100% {left:112%;opacity:0}
}
.fx-racing .car-shape{transform-box:fill-box;transform-origin:center;animation:bob .45s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2.5px) rotate(-.5deg)}}
.fx-racing .car-body{fill:#160709;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.fx-racing .car-glass{fill:color-mix(in srgb,var(--accent2) 45%,transparent);stroke:color-mix(in srgb,var(--accent) 60%,transparent);stroke-width:1.5}
.fx-racing .car-light{fill:#fff3cf;filter:drop-shadow(0 0 8px #ffd98a)}
.fx-racing .wheel circle{fill:#0a0608;stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:2.5}
.fx-racing .wheel .rim{fill:color-mix(in srgb,var(--accent) 30%,#000)}
.fx-racing .wheel .spokes{stroke:color-mix(in srgb,var(--accent) 65%,transparent);stroke-width:2;fill:none}
.fx-racing .wheel{transform-box:fill-box;transform-origin:center;animation:spin .32s linear infinite}
.fx-racing .boost{
    position:absolute;bottom:16px;z-index:1;width:min(46%,155px);height:9px;border-radius:9px;
    margin-left:-132px;opacity:.5;filter:blur(3px);
    background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),#fff);
    animation:drive 5.2s linear infinite;animation-delay:-.045s;
}
.card--racing:hover .car,
.card--racing:hover .boost{animation-duration:1.9s}
.card--racing:hover .wheel{animation-duration:.12s}

/* ------------- MAFIA: füst, reflektor, eső, arany ------------- */
.fx-mafia{background:linear-gradient(180deg,#171208,#080604)}
.fx-mafia::after{background:linear-gradient(170deg,
    color-mix(in srgb,var(--accent) 12%,transparent),
    color-mix(in srgb,var(--accent2) 34%,transparent) 70%,rgba(0,0,0,.5))}
.fx-mafia .smoke{
    position:absolute;border-radius:50%;filter:blur(28px);opacity:.4;
    background:radial-gradient(circle,rgba(224,182,74,.55),transparent 70%);
}
.fx-mafia .m1{width:190px;height:190px;left:-30px;bottom:-50px;animation:drift1 11s ease-in-out infinite}
.fx-mafia .m2{width:150px;height:150px;right:-20px;top:10px;animation:drift2 14s ease-in-out infinite}
.fx-mafia .m3{width:220px;height:220px;left:40%;top:20%;animation:drift3 17s ease-in-out infinite;opacity:.25}
@keyframes drift1{50%{transform:translate(60px,-40px) scale(1.25)}}
@keyframes drift2{50%{transform:translate(-50px,50px) scale(1.3)}}
@keyframes drift3{50%{transform:translate(-40px,-30px) scale(1.15)}}
.fx-mafia .spot{
    position:absolute;left:50%;top:-60%;width:150%;height:150%;
    transform:translateX(-50%) rotate(0deg);transform-origin:top center;
    background:conic-gradient(from 200deg at 50% 0%,transparent 0 12%,rgba(255,236,180,.20) 16%,transparent 22%);
    animation:sweep 9s ease-in-out infinite alternate;
}
@keyframes sweep{from{transform:translateX(-50%) rotate(-16deg)}to{transform:translateX(-50%) rotate(16deg)}}
.fx-mafia .rain{
    position:absolute;inset:0;opacity:.18;
    background-image:repeating-linear-gradient(102deg,rgba(255,255,255,.55) 0 1px,transparent 1px 9px);
    animation:rain 1.1s linear infinite;
}
@keyframes rain{to{background-position:60px 260px}}
.card--mafia:hover .spot{animation-duration:3.4s}

/* --- lebegő pisztoly, visszarúgás, torkolattűz, hüvely --- */
.fx-mafia .gun-wrap{
    position:absolute;left:50%;top:33%;transform:translate(-50%,-50%);
    width:72%;max-width:228px;pointer-events:none;
}
.fx-mafia .gun{
    width:100%;height:auto;overflow:visible;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.75))
           drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 45%,transparent));
    animation:gunFloat 6s ease-in-out infinite;
}
@keyframes gunFloat{
    0%,100%{transform:translateY(0) rotate(-5deg)}
    50%    {transform:translateY(-9px) rotate(-1deg)}
}
.fx-mafia .gun-shape{
    transform-box:fill-box;transform-origin:22% 62%;
    animation:recoil 5s cubic-bezier(.2,.9,.3,1) infinite;
}
@keyframes recoil{
    0%,62%   {transform:translate(0,0) rotate(0)}
    64%      {transform:translate(-17px,-4px) rotate(-9deg)}
    70%      {transform:translate(4px,1px) rotate(2deg)}
    76%,100% {transform:translate(0,0) rotate(0)}
}
.fx-mafia .gun-slide,
.fx-mafia .gun-frame,
.fx-mafia .gun-barrel,
.fx-mafia .gun-sight,
.fx-mafia .gun-hammer{fill:#120c06;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.fx-mafia .gun-grip{fill:#1d1309;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.fx-mafia .gun-guard,
.fx-mafia .gun-trigger{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.fx-mafia .flash{
    fill:#ffe6a3;opacity:0;transform-box:fill-box;transform-origin:left center;
    filter:drop-shadow(0 0 20px #ffbe3d);
    animation:muzzle 5s linear infinite;
}
@keyframes muzzle{
    0%,61.5%{opacity:0;transform:scale(.3)}
    63%     {opacity:1;transform:scale(1.05)}
    66%     {opacity:.45;transform:scale(.7)}
    68%,100%{opacity:0;transform:scale(.3)}
}
.fx-mafia .shell{
    fill:color-mix(in srgb,var(--accent) 90%,#fff);opacity:0;
    transform-box:fill-box;transform-origin:center;
    animation:eject 5s linear infinite;
}
@keyframes eject{
    0%,62%{opacity:0;transform:translate(0,0) rotate(0)}
    64%   {opacity:1;transform:translate(-6px,-10px) rotate(60deg)}
    78%   {opacity:1;transform:translate(-30px,-42px) rotate(220deg)}
    93%   {opacity:0;transform:translate(-52px,26px) rotate(430deg)}
    100%  {opacity:0}
}
.card--mafia:hover .gun-shape,
.card--mafia:hover .flash,
.card--mafia:hover .shell{animation-duration:1.9s}
.card--mafia:hover .gun{animation-duration:2.6s}

/* --------- TCG: varázskör, lebegő lapok, szikrák --------- */
.fx-tcg{background:radial-gradient(70% 70% at 50% 60%,#241548,#0a0618)}
.fx-tcg .rune{
    position:absolute;left:50%;top:52%;width:250px;height:250px;margin:-125px 0 0 -125px;
    border-radius:50%;opacity:.5;
    border:1px dashed color-mix(in srgb,var(--accent) 75%,transparent);
    box-shadow:0 0 42px color-mix(in srgb,var(--accent) 45%,transparent),
               inset 0 0 42px color-mix(in srgb,var(--accent2) 30%,transparent);
    animation:spin 16s linear infinite;
}
.fx-tcg .rune::before{
    content:'';position:absolute;inset:34px;border-radius:50%;
    border:1px solid color-mix(in srgb,var(--accent2) 70%,transparent);
    animation:spin 11s linear infinite reverse;
}
.fx-tcg .mini{
    position:absolute;width:58px;height:82px;border-radius:8px;
    background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 55%,#fff2),rgba(10,6,24,.9));
    border:1px solid color-mix(in srgb,var(--accent2) 60%,transparent);
    box-shadow:0 10px 26px rgba(0,0,0,.6);
}
.fx-tcg .c1{left:20%;top:26%;animation:hover1 6s ease-in-out infinite}
.fx-tcg .c2{left:44%;top:18%;animation:hover2 7.5s ease-in-out infinite}
.fx-tcg .c3{left:66%;top:28%;animation:hover3 6.8s ease-in-out infinite}
@keyframes hover1{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-16px) rotate(-6deg)}}
@keyframes hover2{0%,100%{transform:translateY(-6px) rotate(3deg)}50%{transform:translateY(10px) rotate(-3deg)}}
@keyframes hover3{0%,100%{transform:translateY(4px) rotate(13deg)}50%{transform:translateY(-12px) rotate(7deg)}}
.card--tcg:hover .c1{transform:translate(-26px,-10px) rotate(-24deg) scale(1.1)}
.card--tcg:hover .c2{transform:translateY(-24px) scale(1.14)}
.card--tcg:hover .c3{transform:translate(26px,-10px) rotate(24deg) scale(1.1)}
.fx-tcg .mini{transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.fx-tcg .spark{
    position:absolute;width:4px;height:4px;border-radius:50%;
    background:#fff;box-shadow:0 0 10px var(--accent2),0 0 20px var(--accent);
    animation:rise 5s linear infinite;opacity:0;
}
.fx-tcg .p1{left:12%;animation-delay:0s}
.fx-tcg .p2{left:26%;animation-delay:.7s}
.fx-tcg .p3{left:38%;animation-delay:1.5s}
.fx-tcg .p4{left:52%;animation-delay:2.2s}
.fx-tcg .p5{left:64%;animation-delay:.4s}
.fx-tcg .p6{left:76%;animation-delay:3.1s}
.fx-tcg .p7{left:86%;animation-delay:1.1s}
.fx-tcg .p8{left:94%;animation-delay:2.7s}
@keyframes rise{
    0%{transform:translateY(320px) scale(.4);opacity:0}
    15%{opacity:1}
    85%{opacity:.9}
    100%{transform:translateY(-30px) scale(1.1);opacity:0}
}

/* --------- ALAP (új kategóriákhoz): neon pulzus + rács --------- */
.fx-neon{background:linear-gradient(160deg,#0b1024,#05060c)}
.fx-neon .pulse{
    position:absolute;left:50%;top:50%;width:180px;height:180px;margin:-90px 0 0 -90px;
    border-radius:50%;border:2px solid var(--accent);opacity:.6;
    animation:ping 3s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(2.2);opacity:0}}
.fx-neon .grid{
    position:absolute;inset:0;opacity:.25;
    background-image:
        linear-gradient(color-mix(in srgb,var(--accent) 40%,transparent) 1px,transparent 1px),
        linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent) 1px,transparent 1px);
    background-size:34px 34px;
    animation:gridmove 6s linear infinite;
}

/* ----------------------------- LÁBLÉC ---------------------------- */
.foot{
    position:relative;z-index:2;
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    padding:22px clamp(18px,5vw,64px) 30px;
    border-top:1px solid var(--line);
    color:var(--muted);font-size:14.5px;
    animation:fadeUp .8s .4s both;
}

/* --------------------------- RESZPONZÍV -------------------------- */
@media (max-width:720px){
    .top{flex-direction:row;align-items:flex-start}
    .brand-text h1{font-size:20px}
    .tagline{font-size:13.5px}
    .card{min-height:270px}
    .grid{gap:18px;grid-template-columns:1fr}
    .foot{flex-direction:column;text-align:center}
    .hint{display:none}
}

/* ------------------- CSÖKKENTETT MOZGÁS IGÉNY -------------------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
        transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ================================================================
   LÁTVÁNY-CSOMAG: intro loader, reagáló háttér, parallax,
   holo-fólia, kurzor-nyom, belépő portál-átmenet
   ================================================================ */

/* ------------------------- INTRO LOADER ------------------------- */
.boot{
    position:fixed;inset:0;z-index:120;
    display:grid;place-content:center;justify-items:center;gap:18px;
    background:radial-gradient(120% 90% at 50% 45%,#151a35,#05060c 70%);
    transition:opacity .55s ease,visibility .55s;
}
html.booted .boot{display:none}
.boot.is-done{opacity:0;visibility:hidden}
.boot-ring{
    grid-area:1/1;width:96px;height:96px;border-radius:50%;
    border:2px solid transparent;
    background:conic-gradient(from 0deg,#ff7a18,#ff2d55,#9b5cff,#22d3ee,#ff7a18) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:spin 1.1s linear infinite;
}
.boot-core{grid-area:1/1;align-self:center;font-size:26px;color:#fff;text-shadow:0 0 18px #9b5cff,0 0 34px #22d3ee;animation:pulseCore 1.2s ease-in-out infinite}
.boot-name{
    font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;
    letter-spacing:.5em;text-indent:.5em;opacity:.85;
    animation:bootName 1.4s ease-out both;
}
@keyframes bootName{from{opacity:0;letter-spacing:1.4em;filter:blur(6px)}}
.boot-bar{display:block;width:190px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.boot-bar i{display:block;height:100%;width:40%;border-radius:3px;
    background:linear-gradient(90deg,#ff7a18,#9b5cff,#22d3ee);
    animation:bootBar 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bootBar{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}
/* a rács "kinyílik", amikor a loader eltűnik */
html:not(.booted) .wrap{animation:openUp .9s .25s cubic-bezier(.2,.9,.25,1) both}
@keyframes openUp{from{opacity:0;transform:translateY(26px) scale(.97)}}

/* --------------- HÁTTÉR, AMI REAGÁL A KÁRTYÁRA ------------------ */
.amb{
    position:absolute;inset:-10%;pointer-events:none;
    background:radial-gradient(45% 45% at var(--ax,50%) var(--ay,50%),var(--amb,#7c5cff),transparent 70%);
    filter:blur(60px);mix-blend-mode:screen;
    opacity:0;transition:opacity .6s ease,background-position .6s ease;
}
body.has-amb .amb{opacity:.75}
body.has-amb .bg-grid{opacity:.55;transition:opacity .6s}

/* ------------------------- PARALLAX ----------------------------- */
.fx{transform:translate3d(var(--fx-x,0px),var(--fx-y,0px),0) scale(1.05);transition:transform .35s ease-out}
.fx-racing .car-lane,
.fx-tcg .stage{position:absolute;inset:0;transform:translate3d(var(--l-x,0px),var(--l-y,0px),0);transition:transform .3s ease-out}
.fx-racing .car-lane{top:24%;bottom:auto;height:76px}
.fx-mafia .gun-wrap{
    transform:translate(calc(-50% + var(--l-x,0px)),calc(-50% + var(--l-y,0px)));
    transition:transform .3s ease-out;
}
.card-body{transform:translate3d(var(--b-x,0px),0,0);transition:transform .35s ease-out}

/* ---------------------- HOLO-FÓLIA (TCG) ------------------------ */
.fx-tcg .holo{
    position:absolute;inset:0;pointer-events:none;z-index:2;
    background:
        radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%),
        repeating-linear-gradient(115deg,
            rgba(255,0,128,.30) 0 22px,rgba(255,196,0,.26) 22px 44px,
            rgba(0,255,170,.26) 44px 66px,rgba(0,140,255,.30) 66px 88px,
            rgba(190,0,255,.30) 88px 110px);
    background-size:auto,340% 340%;
    mix-blend-mode:overlay;filter:blur(1px);
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 70%);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 70%);
    opacity:.10;transition:opacity .4s;
    animation:holo 9s linear infinite;
}
@keyframes holo{0%{background-position:0 0,0% 50%}100%{background-position:0 0,100% 50%}}
.card--tcg:hover .holo{opacity:.32}

/* -------------------------- KURZOR-NYOM ------------------------- */
.cursor{position:fixed;inset:0;z-index:110;pointer-events:none;mix-blend-mode:screen}

/* --------------------- BELÉPŐ PORTÁL-ÁTMENET -------------------- */
.portal{position:fixed;inset:0;z-index:115;pointer-events:none;opacity:0}
.portal.is-on{opacity:1;pointer-events:all}
.portal>span{position:absolute;inset:0;display:block}

.p-fill{
    background:radial-gradient(circle at var(--ox,50%) var(--oy,50%),
        var(--pc,#9b5cff) 0%,color-mix(in srgb,var(--pc2,#22d3ee) 80%,#000) 45%,#05060c 70%);
    clip-path:circle(0% at var(--ox,50%) var(--oy,50%));
}
.portal.is-on .p-fill{animation:pOpen .62s cubic-bezier(.5,0,.3,1) forwards}
@keyframes pOpen{to{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}}

.p-flash{background:#fff;opacity:0}
.portal.is-on.t-mafia .p-flash{animation:pFlash .5s ease-out forwards}
@keyframes pFlash{0%{opacity:.95}18%{opacity:.15}30%{opacity:.55}100%{opacity:0}}

.p-streaks{overflow:hidden;opacity:0}
.portal.is-on.t-racing .p-streaks{opacity:1}
.p-streaks i{
    position:absolute;left:-40%;height:6px;width:60%;border-radius:6px;
    background:linear-gradient(90deg,transparent,#fff,var(--pc,#ff7a18),transparent);
    box-shadow:0 0 22px var(--pc,#ff7a18);transform:translateX(-120%) skewX(-20deg);
}
.p-streaks i:nth-child(1){top:12%}
.p-streaks i:nth-child(2){top:26%;width:80%}
.p-streaks i:nth-child(3){top:41%;width:50%}
.p-streaks i:nth-child(4){top:58%;width:75%}
.p-streaks i:nth-child(5){top:72%;width:45%}
.p-streaks i:nth-child(6){top:86%;width:65%}
.portal.is-on.t-racing .p-streaks i{animation:pZoom .5s cubic-bezier(.4,0,.2,1) forwards}
.portal.is-on.t-racing .p-streaks i:nth-child(2){animation-delay:.04s}
.portal.is-on.t-racing .p-streaks i:nth-child(3){animation-delay:.08s}
.portal.is-on.t-racing .p-streaks i:nth-child(4){animation-delay:.02s}
.portal.is-on.t-racing .p-streaks i:nth-child(5){animation-delay:.1s}
.portal.is-on.t-racing .p-streaks i:nth-child(6){animation-delay:.06s}
@keyframes pZoom{to{transform:translateX(320%) skewX(-20deg)}}

.p-flag{
    opacity:0;transform:translateY(-100%);
    background-image:
        linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
        linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
    background-size:44px 44px;background-position:0 0,22px 22px;
}
.portal.is-on.t-racing .p-flag{animation:pFlag .62s cubic-bezier(.5,0,.3,1) forwards}
@keyframes pFlag{0%{opacity:.9;transform:translateY(-100%)}70%{opacity:.35}100%{opacity:0;transform:translateY(0)}}

.p-ring{
    border-radius:50%;inset:auto;left:var(--ox,50%);top:var(--oy,50%);
    width:44vmax;height:44vmax;margin:-22vmax 0 0 -22vmax;
    border:2px dashed color-mix(in srgb,var(--pc,#9b5cff) 85%,#fff);
    box-shadow:0 0 60px var(--pc,#9b5cff),inset 0 0 60px var(--pc2,#22d3ee);
    opacity:0;transform:scale(.05) rotate(0)
}
.portal.is-on.t-tcg .p-ring{animation:pRing .62s cubic-bezier(.3,0,.2,1) forwards}
@keyframes pRing{0%{opacity:1;transform:scale(.05) rotate(0)}100%{opacity:0;transform:scale(1.6) rotate(220deg)}}

/* a kattintott kártya "beszippan" */
.card.is-leaving{transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .5s;transform:scale(1.35);opacity:0}

@media (prefers-reduced-motion:reduce){
    .cursor,.portal,.boot{display:none!important}
    .fx,.card-body,.fx-tcg .stage,.fx-racing .car-lane,.fx-mafia .gun-wrap{transform:none!important}
}

/* ------------------ "FOLYTATÁS" (utoljára játszott) ------------------ */
.card .cont{
    position:absolute;top:14px;right:14px;z-index:6;
    display:inline-flex;align-items:center;gap:7px;
    padding:6px 13px;border-radius:999px;
    font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:#fff;
    background:color-mix(in srgb,var(--accent) 28%,rgba(5,6,12,.75));
    border:1px solid color-mix(in srgb,var(--accent) 75%,transparent);
    box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);
    backdrop-filter:blur(8px);
    animation:contIn .5s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes contIn{from{opacity:0;transform:translateY(-10px) scale(.9)}}
.card .cont::before{
    content:'';width:7px;height:7px;border-radius:50%;
    background:#fff;box-shadow:0 0 10px #fff;animation:blink 1.6s ease-in-out infinite;
}
.card.is-last{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

/* ------------------------- admin fogaskerék ------------------------- */
.admin-link{
    font-size:17px;line-height:1;opacity:.35;
    transition:opacity .25s,transform .4s,filter .25s;
}
.admin-link:hover{opacity:1;transform:rotate(90deg);filter:drop-shadow(0 0 10px #9b5cff)}