/* ROPI-FOCI Party – bemutató oldal a játék stílusában (krétarajz: fehér vonal sötét alapon, Patrick Hand betű,
   ragasztószalagos lapok, kézzel húzott keretek). A figurák a játék saját rajzmotorjából készült képsorok (/assets/spr_*.webp). */
:root{--bg:#0b0b0b;--line:#fff;--dim:#9a9a9a;--mid:#bdbdbd;--orange:#ffa04d;--yellow:#ffd84d;--green:#4fd387;--pink:#ff7fd0;--blue:#5aa9ff;
  --font:'Patrick Hand','Comic Sans MS',system-ui,sans-serif;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--line);font-family:var(--font);font-size:20px;line-height:1.35;overflow-x:hidden;}
a{color:inherit;}
img{display:block;max-width:100%;}
.wrap{width:min(1180px,100% - 32px);margin:0 auto;}
section{position:relative;padding:72px 0;}
::selection{background:#fff;color:#0b0b0b;}
/* görgetősáv: a kézzel rajzolt felülethez illő (sötét csúszka fehér kontúrral, krétacsíkozással; szaggatott vékony sín) */
::-webkit-scrollbar{width:14px;height:14px;}
::-webkit-scrollbar-track{background:transparent;margin:14px;}
::-webkit-scrollbar-track:vertical{background:repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px) center/2px 100% no-repeat;}
::-webkit-scrollbar-track:horizontal{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px) center/100% 2px no-repeat;}
::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:9px 12px 8px 11px/11px 8px 12px 9px;
     background:repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 2px,transparent 2px 6px) padding-box,#0b0b0b padding-box;
     box-shadow:inset 0 0 0 2px rgba(255,255,255,.8);}
::-webkit-scrollbar-thumb:hover{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.5) 0 2px,transparent 2px 6px) padding-box,#0b0b0b padding-box;
     box-shadow:inset 0 0 0 2px #fff;}
::-webkit-scrollbar-thumb:active{background:#fff padding-box;box-shadow:inset 0 0 0 2px #fff;}
::-webkit-scrollbar-corner,::-webkit-scrollbar-button{display:none;background:transparent;}
@supports (-moz-appearance:none){ *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.75) transparent;} }   /* Firefox: csak színezhető */

/* ---------- közös elemek ---------- */
.sheet{position:relative;background:var(--bg);border:3px solid var(--line);border-radius:22px 14px 26px 16px/16px 26px 14px 22px;box-shadow:7px 9px 0 rgba(255,255,255,.12);}
.tape{position:absolute;z-index:2;top:-14px;width:92px;height:26px;background:rgba(255,255,255,.18);border:1.5px dashed rgba(255,255,255,.45);pointer-events:none;}
.tape.l{left:22px;transform:rotate(-8deg);} .tape.r{right:22px;transform:rotate(7deg);}
.h2{position:relative;display:inline-block;margin:0 0 34px;font-weight:normal;font-size:clamp(40px,6vw,64px);line-height:1;transform:rotate(-2deg);}
.h2 svg{position:absolute;left:-6px;right:-10px;bottom:-14px;width:calc(100% + 16px);height:18px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1s .3s ease-out;}
.in .h2 svg,.h2.in svg{stroke-dashoffset:0;}
.lead{max-width:640px;color:var(--mid);font-size:22px;margin:0 0 30px;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 26px 14px;font:26px/1 var(--font);color:var(--line);background:var(--bg);text-decoration:none;cursor:pointer;
  border:3px solid var(--line);border-radius:16px 22px 14px 20px/20px 14px 22px 16px;transition:transform .2s cubic-bezier(.2,1.8,.4,1),background .15s,color .15s;}
.btn:hover,.btn:focus-visible{transform:scale(1.06) rotate(-2deg);outline:none;}
.btn.big{font-size:34px;padding:14px 34px 17px;background:#fff;color:#0b0b0b;box-shadow:0 6px 0 rgba(255,255,255,.35);animation:goPulse 2.4s ease-in-out infinite;}
.btn.big:hover{animation-play-state:paused;}
.btn.big .arr{display:inline-block;transition:transform .2s;} .btn.big:hover .arr{transform:translateX(6px);}
.btn .free{position:absolute;top:-15px;right:-20px;padding:4px 10px 6px;font:17px/1 var(--font);font-style:normal;white-space:nowrap;color:#fff;background:#0b0b0b;
  border:2px solid #fff;border-radius:10px 14px 9px 12px/12px 9px 14px 10px;transform:rotate(7deg);pointer-events:none;}
.btn.big{position:relative;}
@media (max-width:520px){ .btn .free{right:-6px;top:-20px;font-size:15px;} }
/* az ingyenesség ideiglenes: ha lejár, a .free címkéket és a [data-free] szövegeket kell kivenni */
@keyframes goPulse{0%,100%{transform:rotate(-1deg);}50%{transform:rotate(1deg) scale(1.04);}}
.reveal{opacity:0;transform:translateY(40px) rotate(-1.5deg);transition:opacity .6s,transform .8s cubic-bezier(.2,1.4,.4,1);}
.reveal.in{opacity:1;transform:none;}

/* képsor-animáció: a figura a játék motorjából (n képkocka egymás mellett) */
.spr{--n:12;--fw:270;--fh:351;--dur:1s;--s:1;width:calc(var(--fw) * var(--s) * 1px);height:calc(var(--fh) * var(--s) * 1px);
  background-size:calc(var(--fw) * var(--n) * var(--s) * 1px) 100%;background-repeat:no-repeat;animation:spr var(--dur) steps(var(--n)) infinite;}
@keyframes spr{from{background-position:0 0;}to{background-position:calc(var(--fw) * var(--n) * var(--s) * -1px) 0;}}
.spr.flip{transform:scaleX(-1);}

/* ---------- fejléc ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,11,11,.88);backdrop-filter:blur(6px);border-bottom:2px dashed rgba(255,255,255,.18);}
.nav .wrap{display:flex;align-items:center;gap:24px;height:66px;}
.nav .mini{font-size:28px;text-decoration:none;letter-spacing:.02em;transform:rotate(-3deg);color:#fff;-webkit-text-stroke:5px #0b0b0b;paint-order:stroke fill;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);}
.nav nav{display:flex;gap:22px;margin-left:auto;}
/* asztali menü: kategória-gombok, rámutatva alattuk egy panel mindhárom kategóriával (a rámutatott kiemelve) */
.mtop{position:relative;display:flex;align-items:center;gap:3px;padding:4px 2px;cursor:pointer;background:none;border:none;font:21px/1 var(--font);color:var(--mid);white-space:nowrap;}
.mtop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;}
.mtop::after{content:'';position:absolute;left:0;right:18px;bottom:-3px;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.mtop:hover,.mtop.on,.mtop:focus-visible{color:#fff;outline:none;} .mtop.on::after{transform:scaleX(1);} .mtop.on svg{transform:rotate(180deg);}
.mega{position:absolute;left:0;right:0;top:100%;display:none;background:#0b0b0b;border-bottom:2px dashed rgba(255,255,255,.18);box-shadow:0 18px 30px rgba(0,0,0,.45);}
.mega.show{display:block;animation:megaIn .3s cubic-bezier(.2,1.3,.4,1) both;}
.mega.out{display:block;animation:megaOut .16s ease-in both;pointer-events:none;}
@keyframes megaIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
@keyframes megaOut{to{opacity:0;transform:translateY(-6px);}}
.nav .mega .wrap{height:auto;align-items:start;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:20px;padding-bottom:24px;}
.mcol{padding:12px 14px 14px;border:2.5px solid transparent;border-radius:14px 18px 12px 16px/16px 12px 18px 14px;transition:border-color .2s,background .2s,transform .25s;}
.mcol.on{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.04);transform:rotate(-.5deg);}
.mcol h4{margin:0 0 8px 6px;font-weight:normal;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;}
.mcol.on h4{color:#ffd84d;}
.mcol a{display:flex;align-items:center;gap:12px;padding:7px 10px 8px;font-size:23px;line-height:1.1;color:#fff;text-decoration:none;border-radius:10px 13px 9px 12px;transition:background .15s,color .15s,transform .2s;}
.mega.show .mcol a{animation:megaItem .35s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.05s + var(--i) * 45ms);}
@keyframes megaItem{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:none;}}
.mcol a svg{flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.mcol a:hover,.mcol a:focus-visible{outline:none;background:#fff;color:#0b0b0b;transform:rotate(-1deg) translateX(3px);}
.nav .btn{padding:7px 16px 9px;font-size:20px;white-space:nowrap;}
.nav .mini,.nav nav a{white-space:nowrap;}
@media (max-width:900px){ .nav nav,.mega{display:none !important;} .nav .lang{margin-left:auto;} }
html.i18n-wait body{visibility:hidden;}

/* nyelvválasztó (mint a játékban: földgömb + nyelvkód, lenyíló rács) */
.lbtn{display:flex;align-items:center;gap:6px;padding:6px 10px 7px;cursor:pointer;font:20px/1 var(--font);color:#fff;background:none;
  border:2.5px solid rgba(255,255,255,.5);border-radius:14px 18px 12px 16px/16px 12px 18px 14px;transition:background .15s,color .15s,border-color .15s,transform .2s;}
.lbtn:hover,.lbtn.on{background:#fff;color:#0b0b0b;border-color:#fff;transform:rotate(1.5deg);}
.lbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;}
.lbtn b{font-weight:normal;} .lbtn span{font-size:14px;opacity:.7;}
.lpop{position:absolute;top:calc(100% + 8px);right:16px;z-index:60;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 90px);overflow-y:auto;padding:14px 16px 16px;
  background:#0b0b0b;border:3px solid #fff;border-radius:18px 26px 16px 24px/24px 16px 26px 18px;box-shadow:6px 8px 0 rgba(255,255,255,.12);display:none;transform-origin:top right;}
.lpop.show{display:block;animation:langIn .38s cubic-bezier(.2,1.35,.4,1) both;}
.lpop.out{display:block;animation:langOut .18s ease-in both;pointer-events:none;}
.lpop.show .lgrid button{animation:langItem .32s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.08s + var(--i) * 12ms);}
@keyframes langIn{0%{opacity:0;transform:translateY(-14px) scale(.86,.7);}100%{opacity:1;transform:none;}}
@keyframes langOut{0%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(-10px) scale(.92,.8);}}
@keyframes langItem{0%{opacity:0;transform:translateY(-8px);}100%{opacity:1;transform:none;}}
.lpop .ltitle{font-size:26px;margin:0 0 10px 4px;}
.lpop .lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;}
.lpop button{display:flex;align-items:center;gap:8px;padding:6px 10px 7px;cursor:pointer;text-align:left;font:18px/1.1 var(--font);color:#fff;background:#0b0b0b;
  border:2px solid rgba(255,255,255,.35);border-radius:10px 14px 9px 13px/13px 9px 14px 10px;transition:transform .12s,border-color .12s;}
.lpop button i{font-style:normal;font-size:13px;letter-spacing:1px;color:#9a9a9a;min-width:22px;}
.lpop button:hover,.lpop button:focus-visible{outline:none;border-color:#fff;transform:translateY(-2px) rotate(-1deg);}
.lpop button.on{border-color:#fff;background:#fff;color:#0b0b0b;} .lpop button.on i{color:#555;}
.lpop .lnote{display:flex;align-items:flex-start;gap:9px;min-height:2.7em;margin:12px 2px 0;padding:10px 4px 0;border-top:2px dashed rgba(255,255,255,.2);
  font-size:15px;line-height:1.35;color:#9a9a9a;}
.lpop .lnote i{flex:none;width:18px;height:18px;margin-top:1px;display:flex;align-items:center;justify-content:center;font:italic bold 12px/1 Georgia,serif;
  color:#0b0b0b;background:#9a9a9a;border-radius:50%;}
.lpop .lnote span{transition:opacity .14s;}
.lpop .lnote span.swap{opacity:0;}
@media (max-width:520px){ .lbtn span{display:none;} .lbtn{padding:6px 8px 7px;} .nav .wrap{gap:12px;} .nav .btn{padding:7px 12px 9px;font-size:18px;} }

/* ---------- hős ---------- */
.hero{padding:40px 0 0;overflow:hidden;}
.hero .bgdoodle{position:absolute;inset:0;background:url(/assets/hatter.webp) center/cover no-repeat;opacity:.3;pointer-events:none;}
.hero .wrap{position:relative;text-align:center;}
.logo{position:relative;display:inline-flex;align-items:center;margin:20px 0 6px;font-size:clamp(64px,13vw,150px);line-height:1;}
.logo i{display:inline-block;font-style:normal;transform:rotate(var(--r));animation:drop .6s calc(.15s + var(--i) * .08s) cubic-bezier(.2,1.6,.4,1) both, wave 3s calc(1.6s + var(--i) * .15s) ease-in-out infinite;}
.logo .w{color:#fff;-webkit-text-stroke:.09em #0b0b0b;paint-order:stroke fill;
  filter:drop-shadow(.025em 0 0 #fff) drop-shadow(-.025em 0 0 #fff) drop-shadow(0 .025em 0 #fff) drop-shadow(0 -.025em 0 #fff) drop-shadow(.06em .08em 0 rgba(255,255,255,.28));}
.logo .k{color:#0b0b0b;-webkit-text-stroke:.03em #fff;paint-order:stroke fill;
  filter:drop-shadow(.03em 0 0 #0b0b0b) drop-shadow(-.03em 0 0 #0b0b0b) drop-shadow(0 .03em 0 #0b0b0b) drop-shadow(0 -.03em 0 #0b0b0b)
         drop-shadow(.02em 0 0 #fff) drop-shadow(-.02em 0 0 #fff) drop-shadow(0 .02em 0 #fff) drop-shadow(0 -.02em 0 #fff) drop-shadow(.06em .08em 0 rgba(255,255,255,.28));}
.logo .dash{width:.38em;height:.12em;margin:0 .04em;border-radius:.06em;background:#0b0b0b;box-shadow:0 0 0 .035em #fff;align-self:center;}
.logo .ball{width:.62em;height:.62em;margin:0 .02em;animation:drop .7s .75s cubic-bezier(.2,1.6,.4,1) both, hop 3.2s 1.8s cubic-bezier(.3,0,.7,1) infinite;}
.logo .ball{padding:.035em;background:#fff;border-radius:50%;filter:drop-shadow(.06em .08em 0 rgba(255,255,255,.28));}   /* a játék labdája fehér matrica-kontúrral, mint a játék logójában */
.logo .ball img{width:100%;height:100%;animation:spin 6s linear infinite;}
@keyframes drop{0%{opacity:0;translate:0 -2.2em;rotate:30deg;}100%{opacity:1;translate:0 0;rotate:0deg;}}
@keyframes wave{0%,100%{translate:0 0;}50%{translate:0 -.05em;}}
@keyframes hop{0%,82%,100%{translate:0 0;rotate:0deg;}90%{translate:0 -.4em;rotate:180deg;}}
.party{position:absolute;right:-.2em;bottom:-.55em;padding:.06em .3em .1em;font-size:.32em;line-height:1;color:#0b0b0b;background:#fff;border-radius:.2em .3em .18em .26em;
  transform:rotate(-7deg);box-shadow:.05em .07em 0 rgba(255,255,255,.3);animation:stamp .5s 1.4s cubic-bezier(.2,1.9,.4,1) both;}
.party::before{content:'';position:absolute;inset:.08em;border:.035em dashed #0b0b0b;border-radius:.16em;}
@keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(-20deg);}100%{opacity:1;transform:rotate(-7deg);}}
.tag{margin:44px auto 26px;max-width:700px;font-size:clamp(22px,2.8vw,30px);color:var(--mid);}
.ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;}
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px;}
.store{position:relative;display:inline-flex;align-items:center;gap:10px;padding:8px 16px 9px 12px;color:#fff;text-decoration:none;background:rgba(11,11,11,.85);
  border:2.5px solid #fff;border-radius:14px 18px 12px 16px/16px 12px 18px 14px;transition:transform .2s cubic-bezier(.2,1.8,.4,1);}
.store:nth-child(even){transform:rotate(1.5deg);} .store:nth-child(odd){transform:rotate(-1.5deg);}
.store:hover{transform:scale(1.07) rotate(-2deg);}
.store svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.store small{display:block;font-size:13px;color:var(--dim);line-height:1;letter-spacing:.06em;text-transform:uppercase;}
.store b{display:block;font-weight:normal;font-size:21px;line-height:1.05;}
.store.soon{opacity:.75;}
.store.soon::after{content:attr(data-soon);position:absolute;right:-10px;top:-12px;padding:1px 7px 2px;font-size:13px;color:#0b0b0b;background:var(--yellow);border-radius:8px 10px 7px 9px;transform:rotate(6deg);}

/* pálya-jelenet a hős alján: a két figura fejjel adogatja a labdát (a figurák képsora a játék motorjából, 2 mp-es kör,
   a fejelés a kör elején; a jobb oldali fél körrel később), alatta a játék talaja (fű, virágok, kavicsok), egy mászkáló poloska */
.pitch{--hx:230px;--top:253px;--arc:95px;position:relative;height:clamp(330px,36vw,420px);margin-top:70px;}
.pitch .who{position:absolute;bottom:32px;}   /* a képkocka alja 14 px-lel a talp alatt: így a talp épp a talajvonalon (46 px) */
.pitch .p1{left:calc(50% - var(--hx) - 96px);} .pitch .p2{right:calc(50% - var(--hx) - 96px);}   /* a fej közepe 96 px-re a képkocka szélétől */
.pitch .p2 .spr{animation-delay:-1s;}
.pitch .label{position:absolute;bottom:-12px;left:96px;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;font-size:18px;color:var(--mid);}
.pitch .p2 .label{left:auto;right:96px;transform:translateX(50%) rotate(3deg);}
.hball{position:absolute;left:50%;bottom:var(--top);width:46px;height:46px;margin-left:-23px;animation:hbx 2s linear infinite;}
.hball .y{width:100%;height:100%;animation:hby 2s infinite;}
.hball img{width:100%;height:100%;animation:spin 1s linear infinite;}
@keyframes hbx{0%,100%{transform:translateX(calc(var(--hx) * -1));}50%{transform:translateX(var(--hx));}}
@keyframes hby{0%,50%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.33,.7,.6,1);}
  25%,75%{transform:translateY(calc(var(--arc) * -1));animation-timing-function:cubic-bezier(.4,0,.67,.3);}}
@keyframes spin{to{transform:rotate(360deg);}}
/* repülők az égen: a játék sirálya és sárkánya (/assets/spr_gull.webp, spr_dragon.webp). Minden sáv fordulónként váltja a kettőt
   (a csere a képen kívül történik), a sávok eltolva indulnak, így egyszerre több is repül, madár és sárkány vegyesen */
.flyer{position:absolute;left:0;top:var(--top);animation:fly var(--dur) linear var(--d) infinite;pointer-events:none;}
.flyer.rev{animation-direction:reverse;} .flyer.rev i{transform:scaleX(-1);}
.flyer i{position:absolute;left:0;top:0;display:block;background-repeat:no-repeat;}
.flyer .fb{width:calc(170px * var(--k));height:calc(105px * var(--k));background-image:url(/assets/spr_gull.webp);background-size:calc(170px * var(--k) * 16) 100%;
  animation:fb 1.4s steps(16) infinite,showA calc(var(--dur) * 2) step-end var(--d) infinite;}
.flyer .fd{width:calc(316px * var(--k));height:calc(130px * var(--k));background-image:url(/assets/spr_dragon.webp);background-size:calc(316px * var(--k) * 20) 100%;
  animation:fd 1.43s steps(20) infinite,showB calc(var(--dur) * 2) step-end var(--d) infinite;}
.flyer.alt .fb{animation-name:fb,showB;} .flyer.alt .fd{animation-name:fd,showA;}
@keyframes fb{to{background-position:calc(170px * var(--k) * -16) 0;}}
@keyframes fd{to{background-position:calc(316px * var(--k) * -20) 0;}}
@keyframes showA{0%{visibility:visible;}50%{visibility:hidden;}}
@keyframes showB{0%{visibility:hidden;}50%{visibility:visible;}}
@keyframes fly{0%{transform:translateX(-260px);}100%{transform:translateX(calc(100vw + 40px));}}
@media (max-width:700px){ .flyer{top:var(--tm);} }   /* mobilon a hős magasabb: a sávok a logó körül maradnak, ne a szövegen */
/* ---------- megjelenés: visszaszámláló (krétatábla, érdes krétaszámok, karakterek) ---------- */
#launch{padding:96px 0 104px;overflow:hidden;text-align:center;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.08),transparent 60%);}
#launch .edge{position:absolute;left:0;width:100%;height:26px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.55;}
#launch .edge.t{top:-6px;} #launch .edge.b{bottom:-6px;}
#launch .lead{margin-left:auto;margin-right:auto;}
/* a visszaszámláló az admin felületen elrejthető (launchShow): akkor csak a frissítés-bejelentő marad; ha az sincs, az egész szakasz és a menüpont */
html.nolaunch #launch > .wrap:not(.upd){display:none;}
html.nolaunch #launch .upd{margin-top:0;}
html.nolaunch.noupd #launch,html.nolaunch.noupd a[href="#launch"]{display:none;}
.lcd{position:relative;max-width:1180px;margin:10px auto 0;padding:46px 18px 132px;background:#0d0d0d radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.05),transparent 70%);}
.lcd .lmid{position:relative;z-index:1;display:flex;justify-content:center;}
.lcd .lchar{position:absolute;bottom:30px;z-index:1;pointer-events:none;} .lcd .lchar.l{left:22px;} .lcd .lchar.r{right:22px;}   /* a krétavonalon állnak */
.lunits{display:flex;align-items:center;gap:clamp(4px,1.2vw,14px);}
.lu{position:relative;display:flex;flex-direction:column;align-items:center;padding:12px clamp(8px,1.6vw,22px) 10px;border:2.5px solid rgba(255,255,255,.88);
  border-radius:16px 22px 14px 20px/20px 14px 22px 16px;background:rgba(255,255,255,.025);box-shadow:4px 5px 0 rgba(255,255,255,.1);}
.lu:nth-child(4n+1){transform:rotate(-1.6deg);} .lu:nth-child(4n+3){transform:rotate(1.2deg);} .lu:nth-child(4n+5){transform:rotate(-.8deg);} .lu:nth-child(4n+7){transform:rotate(1.8deg);}
.lnum{display:flex;font-size:clamp(50px,7vw,104px);line-height:1;color:#fff;filter:url(#chalkf);}
.lnum .slot{position:relative;display:inline-block;width:.56em;height:1.05em;}
.lnum .slot i{position:absolute;inset:0;font-style:normal;text-align:center;}
.lnum .slot i.in{animation:chalkIn .5s cubic-bezier(.3,.7,.4,1) both;}
.lnum .slot i.out{animation:chalkOut .45s ease-in both;}
@keyframes chalkIn{0%{clip-path:inset(0 100% 0 0);opacity:.4;transform:scale(1.12) rotate(-4deg);}70%{opacity:1;}100%{clip-path:inset(0 0 0 0);transform:none;}}
@keyframes chalkOut{0%{opacity:1;}100%{opacity:0;transform:translateY(10px) scaleX(1.15);filter:blur(4px);}}
.llab{margin-top:4px;font-size:clamp(14px,1.6vw,19px);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
.lsep{font-style:normal;font-size:clamp(40px,6vw,84px);line-height:1;color:#fff;opacity:.85;filter:url(#chalkf);animation:lsep 1s steps(1) infinite;margin-top:-18px;}
@keyframes lsep{50%{opacity:.25;}}
.lcd .lgnd{position:absolute;left:14px;right:14px;bottom:28px;height:4px;border-radius:3px;background:#fff;opacity:.85;}
.lcd .lclip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;}   /* ami kilógna (futók, csillagok), azt a tábla széle levágja */
.lcd .lrun{position:absolute;bottom:31px;left:-120px;animation:lrun 9s linear infinite;pointer-events:none;}
@keyframes lrun{from{left:-120px;}to{left:calc(100% + 20px);}}
.lcd .lrun.b{animation-delay:1.5s;}
.lcd .lrun .dball{position:absolute;left:62px;bottom:3px;width:16px;height:16px;animation:dribble 1.1s ease-in-out infinite, spin .45s linear infinite;}
.lcd .ldust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.lcd .lstar{position:absolute;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;opacity:.0;animation:lstar 3.2s ease-in-out infinite;}
@keyframes lstar{0%,100%{opacity:0;transform:scale(.4) rotate(0);}40%{opacity:.85;transform:scale(1) rotate(20deg);}70%{opacity:.2;}}
.ldate{margin:26px 0 0;font-size:clamp(22px,2.6vw,30px);color:var(--yellow);transform:rotate(-1deg);}
.ldone{display:none;flex-direction:column;align-items:center;gap:18px;}
.lcd.done .lunits{display:none;} .lcd.done .ldone{display:flex;}
.ldone b{font-weight:normal;font-size:clamp(56px,9vw,120px);line-height:1;filter:url(#chalkf);transform:rotate(-3deg);animation:ldone 1.6s ease-in-out infinite;}
@keyframes ldone{50%{transform:rotate(2deg) scale(1.05);}}
/* teljesítmény: a képernyőtől messze lévő szakaszok animációi állnak (.zz, a lenti szkript), a Shop polcának képe csak közelről töltődik (.near) */
.zz,.zz *{animation-play-state:paused!important;}
#style.near .tile .it{background-image:url(/assets/spr_items.webp);}
/* ---------- frissítés-bejelentő (a megjelenés szakasz alján) ---------- */
.upd{margin-top:70px;}
.usheet{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:center;padding:26px 28px 28px;overflow:hidden;
  background:#0d0d0d radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.05),transparent 70%);}
.ustage{--pl:6%;--pr:44%;position:relative;height:340px;border-radius:16px 22px 14px 20px;overflow:hidden;border:2px dashed rgba(255,255,255,.18);
  background:linear-gradient(#101010 0 52%,#0c140e 52%);}
.ustands{position:absolute;left:0;top:0;width:100%;height:56%;}
.ustands .tier{fill:#161616;stroke:rgba(255,255,255,.45);stroke-width:2;}
.ustands .fan{animation:ufan var(--t,1.6s) ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:50% 100%;}
.ustands .fan circle{fill:#0b0b0b;stroke:rgba(255,255,255,.7);stroke-width:1.6;}
.ustands .fan path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-linecap:round;}
.ustands .flag{transform-box:fill-box;transform-origin:0 100%;animation:uflag 1.4s ease-in-out infinite alternate;}
@keyframes ufan{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes uflag{from{transform:skewY(-6deg);}to{transform:skewY(8deg);}}
.upitch{position:absolute;left:-2%;right:-2%;bottom:46px;height:3px;border-radius:3px;background:#fff;opacity:.8;}
.upitch::before{content:'';position:absolute;left:50%;top:-34px;width:120px;height:34px;margin-left:-60px;border:2px solid rgba(255,255,255,.25);border-bottom:none;border-radius:60px 60px 0 0;}
.upass{position:absolute;bottom:47px;opacity:.85;} .upass.l{left:var(--pl);} .upass.r{left:var(--pr);}
.uball{position:absolute;bottom:49px;left:calc(var(--pl) + 66px);width:16px;height:16px;animation:upassX 1.3s ease-in-out infinite alternate;}
.uball img{width:100%;height:100%;display:block;animation:upassY .65s ease-out infinite alternate,spin .5s linear infinite;}
@keyframes upassX{from{left:calc(var(--pl) + 66px);}to{left:calc(var(--pr) + 2px);}}
@keyframes upassY{from{transform:translateY(0);}to{transform:translateY(-10px);}}
.usit{position:absolute;right:2%;bottom:6px;}
.ububble{position:absolute;right:-6px;top:-18px;max-width:200px;padding:7px 12px 8px;font-size:16px;line-height:1.2;color:#0b0b0b;background:#fff;
  border-radius:14px 18px 12px 16px/16px 12px 18px 14px;box-shadow:4px 5px 0 rgba(255,255,255,.16);transform:rotate(3deg);animation:ububble 2.86s ease-in-out infinite;}
.ububble::after{content:'';position:absolute;left:30%;bottom:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#fff;}
.ububble b{display:block;font-weight:normal;font-size:19px;} .ububble span{display:block;font-size:14px;color:#555;}
@keyframes ububble{0%,100%{transform:rotate(3deg) translateY(0);}50%{transform:rotate(1deg) translateY(-5px);}}
.uinfo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;}
.ukick{padding:3px 12px 5px;font-size:18px;color:#0b0b0b;background:var(--yellow);border-radius:12px 9px 14px 8px;transform:rotate(-2deg);}
.upd.out .ukick{background:var(--green);}
.uname{margin:0;font-weight:normal;font-size:clamp(36px,4.4vw,54px);line-height:1.02;filter:url(#chalkf);transform:rotate(-1.5deg);}
.ucount{display:flex;align-items:center;gap:6px;}
.ucount .lu{padding:6px 10px 5px;} .ucount .lnum{font-size:clamp(30px,3.4vw,44px);} .ucount .llab{font-size:13px;} .ucount .lsep{font-size:30px;margin-top:-10px;}
.upd.out .ucount{display:none;}
.udate{margin:0;color:var(--yellow);font-size:20px;}
.ufeats b{font-weight:normal;font-size:20px;color:var(--mid);}
.ufeats ul{margin:6px 0 4px;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;}
.ufeats li{position:relative;padding-left:30px;font-size:19px;line-height:1.3;}
.ufeats li::before{content:'';position:absolute;left:2px;top:3px;width:18px;height:18px;border:2.2px solid #fff;border-radius:6px 8px 5px 7px;}
.ufeats li::after{content:'';position:absolute;left:7px;top:6px;width:6px;height:10px;border:solid var(--green);border-width:0 3px 3px 0;transform:rotate(40deg);}
.ucount .lsep{display:inline;}
@media (max-width:900px){ .usheet{grid-template-columns:1fr;padding:22px 16px 22px;} .ustage{height:300px;} .usit .spr{--s:.5 !important;} .upass .spr{--s:.24 !important;} }
@media (max-width:600px){ .ustage{--pl:3%;--pr:30%;height:270px;} .usit .spr{--s:.44 !important;} .uball{left:calc(var(--pl) + 52px);}
  @keyframes upassX{from{left:calc(var(--pl) + 52px);}to{left:calc(var(--pr) + 2px);}}
  .ucount{gap:4px;} .ucount .lsep{display:none;} .ucount .lu{padding:5px 7px 4px;} .ucount .lnum{font-size:26px;} .ububble{max-width:150px;font-size:14px;} .ububble b{font-size:16px;} }
@media (prefers-reduced-motion:reduce){ .ustage *{animation:none!important;} }
/* a /game/-re vivő gombok az admin felületen elrejthetők (GET /api/launch: play); a boltok megbillennek, ha a megjelenés gombjáról ide jött */
html.noplay [data-link="play"]{display:none !important;}
.stores.hey .store{animation:storeHey .9s cubic-bezier(.2,1.6,.4,1) both;}
.stores.hey .store:nth-child(2){animation-delay:.08s;} .stores.hey .store:nth-child(3){animation-delay:.16s;} .stores.hey .store:nth-child(4){animation-delay:.24s;} .stores.hey .store:nth-child(5){animation-delay:.32s;}
@keyframes storeHey{0%{transform:none;}30%{transform:translateY(-10px) rotate(-4deg) scale(1.08);}60%{transform:rotate(3deg);}100%{transform:none;}}
/* megjelenés után: szalagátvágás (két oszlop, köztük piros szalag masnival; az olló lecsap, a szalag két fele lehull, konfetti) */
.lrib{position:absolute;inset:0;z-index:0;pointer-events:none;display:none;--ry:47%;--px:18%;}
.lcd.done .lrib{display:block;}
.lcd.done{cursor:pointer;}   /* a táblára kattintva újra átvágják */
.lcd.done .ldone .btn{cursor:pointer;}
.lpost{position:absolute;bottom:31px;top:calc(var(--ry) - 4px);width:14px;margin-left:-7px;border:2.5px solid #fff;border-radius:6px 6px 2px 2px;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 3px,transparent 3px 9px),#0d0d0d;}
.lpost.l{left:var(--px);} .lpost.r{left:calc(100% - var(--px));}
.lpost::before{content:'';position:absolute;left:50%;top:-19px;width:22px;height:22px;margin-left:-11px;box-sizing:border-box;border:2.5px solid #fff;border-radius:50%;background:var(--yellow);}
.lpost::after{content:'';position:absolute;left:50%;bottom:-5px;width:48px;height:11px;margin-left:-24px;box-sizing:border-box;border:2.5px solid #fff;border-radius:50%;background:#0d0d0d;}
.lrbn{position:absolute;top:var(--ry);height:24px;margin-top:-12px;box-sizing:border-box;border-top:2.5px solid #fff;border-bottom:2.5px solid #fff;
  background:linear-gradient(transparent 36%,rgba(255,255,255,.4) 36% 46%,transparent 46%),#ff5a6a;animation:lsway 2.4s ease-in-out infinite;}
.lrbn.l{left:var(--px);right:50%;transform-origin:0 50%;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 25%,100% 50%,calc(100% - 9px) 75%,100% 100%,0 100%);}
.lrbn.r{left:50%;right:var(--px);transform-origin:100% 50%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 75%,0 50%,9px 25%);animation-delay:-1.2s;}
@keyframes lsway{50%{transform:translateY(2px) rotate(.3deg);}}
.lbow{position:absolute;left:50%;top:var(--ry);width:104px;height:82px;margin:-34px 0 0 -52px;overflow:visible;}
.lbow path,.lbow circle{fill:#ff5a6a;stroke:#fff;stroke-width:2.6;stroke-linejoin:round;}
.lbow .hi{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linecap:round;}
.lscis{position:absolute;left:50%;top:var(--ry);width:120px;height:150px;margin:-142px 0 0 -60px;overflow:visible;opacity:0;transform:translate(240px,-240px) rotate(50deg);}
.lscis .bl{transform-box:view-box;transform-origin:60px 70px;}
.lscis .bl.a{transform:rotate(22deg);} .lscis .bl.b{transform:rotate(-22deg);}
.lscis .bld{fill:#ececec;stroke:#0b0b0b;stroke-width:1.6;stroke-linejoin:round;}
.lscis .arm{fill:none;stroke:var(--yellow);stroke-width:7;stroke-linecap:round;}
.lscis .ring{fill:none;stroke:var(--yellow);stroke-width:6;}
.lscis .pin{fill:#0b0b0b;stroke:#fff;stroke-width:2;}
.lcd.done .ldone b,.lcd.done .ldone .btn{opacity:0;}
/* átvágás: az olló becsúszik és kétszer csattan; utána a szalag két fele lehull, a masni leesik, a felirat és a gomb előugrik */
.lcd.cutting .lscis{animation:lscisIn .7s cubic-bezier(.2,1.25,.4,1) forwards;}
.lcd.cutting .lscis .bl.a{animation:lsnipA .34s .72s ease-in-out 2;} .lcd.cutting .lscis .bl.b{animation:lsnipB .34s .72s ease-in-out 2;}
@keyframes lscisIn{to{opacity:1;transform:none;}}
@keyframes lsnipA{50%{transform:rotate(0);}} @keyframes lsnipB{50%{transform:rotate(0);}}
.lcd.cut .lscis{animation:lscisOut .7s ease-in forwards;}
.lcd.cut .lscis .bl{transform:rotate(0);}
@keyframes lscisOut{0%{opacity:1;transform:none;}100%{opacity:0;transform:translate(-280px,-300px) rotate(-80deg);}}
.lcd.cut .lrbn.l{animation:lfallL 1.5s cubic-bezier(.3,1.3,.5,1) forwards;}
.lcd.cut .lrbn.r{animation:lfallR 1.5s cubic-bezier(.3,1.3,.5,1) forwards;}
@keyframes lfallL{0%{transform:none;}14%{transform:rotate(-7deg) scaleX(.96);}52%{transform:rotate(98deg) scaleX(.34);}72%{transform:rotate(74deg) scaleX(.36);}88%{transform:rotate(87deg) scaleX(.35);}100%{transform:rotate(83deg) scaleX(.35);}}
@keyframes lfallR{0%{transform:none;}14%{transform:rotate(7deg) scaleX(.96);}52%{transform:rotate(-98deg) scaleX(.34);}72%{transform:rotate(-74deg) scaleX(.36);}88%{transform:rotate(-87deg) scaleX(.35);}100%{transform:rotate(-83deg) scaleX(.35);}}
.lcd.cut .lbow{animation:lbowFall 1.3s cubic-bezier(.45,0,.7,1) forwards;}
@keyframes lbowFall{0%{transform:none;}16%{transform:translateY(-22px) rotate(-10deg);}62%{transform:translateY(var(--fall,150px)) rotate(32deg);}76%{transform:translateY(calc(var(--fall,150px) - 26px)) rotate(18deg);}
  90%,100%{transform:translateY(var(--fall,150px)) rotate(24deg);}}
.lcd.cut .ldone b{opacity:1;animation:ldPop .75s .2s cubic-bezier(.2,1.6,.4,1) both,ldone 1.6s 1s ease-in-out infinite;}
.lcd.cut .ldone .btn{opacity:1;animation:ldBtn .55s .7s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes ldPop{0%{opacity:0;transform:scale(.2) rotate(-14deg);}100%{opacity:1;transform:rotate(-3deg);}}
@keyframes ldBtn{0%{opacity:0;transform:translateY(18px) scale(.8);}100%{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .lrib *,.lcd.cut .ldone b,.lcd.cut .ldone .btn{animation-duration:.01s !important;animation-delay:0s !important;animation-iteration-count:1 !important;} }
@media (max-width:1240px){ .lcd .lchar .spr{--s:.38 !important;} }
@media (max-width:1080px){ .lcd{padding-bottom:150px;} .lcd .lchar.l{left:8px;} .lcd .lchar.r{right:8px;} }
@media (max-width:820px){
  .lcd{padding:40px 10px 150px;}
  .lcd .lchar .spr{--s:.32 !important;}
  .lunits{flex-wrap:wrap;justify-content:center;} .lsep{display:none;}
  .lu{min-width:38%;}
  .lcd .lrun{display:none;}
  .lrib{--px:27%;--ry:60%;}
  .lbow{scale:.72;} .lscis{width:90px;height:112px;margin:-106px 0 0 -45px;}
  .lscis .bl{transform-origin:60px 70px;}
}
/* ---------- játékmódok: külön szekció ---------- */
#modes{padding:104px 0 112px;overflow:hidden;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.07),transparent 62%),
  radial-gradient(ellipse at 10% 100%,rgba(255,255,255,.035),transparent 45%),radial-gradient(ellipse at 92% 60%,rgba(255,255,255,.03),transparent 40%),#111;}
#modes .edge{position:absolute;left:0;width:100%;height:26px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s ease-out,opacity .6s;}
#modes .edge.t{top:-6px;} #modes .edge.b{bottom:-6px;}
#modes .edge.reveal,#modes .edge.reveal.in{transform:none;}
#modes .edge.in{stroke-dashoffset:0;}
/* szezonális krétarajzok a háttérben (a lenti szkript rakja ki): alapból mindhárom téma halványan; ha épp él egy (mint a játékban:
   halloween okt. 24. – nov. 7., karácsony dec. 18. – jan. 1., kínai újév ± 7 nap; ?season=… előnézet), csak az, erősebben, színesen */
.mdood svg{position:absolute;left:var(--x);top:var(--y);width:var(--s,46px);height:var(--s,46px);fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.2;
  animation:mdood var(--t) ease-in-out infinite;animation-delay:var(--d);}
.mdood{position:absolute;inset:0;z-index:0;pointer-events:none;}   /* a tartalom mögött */
#modes > .wrap{position:relative;z-index:1;}
.mdood svg .tw{animation:mdtw 3.4s ease-in-out infinite;animation-delay:var(--d);}   /* a csillagok, hópelyhek pislognak */
.mdood.on svg{stroke:var(--c);opacity:.42;}
.mdood.on svg .fl{fill:var(--c);fill-opacity:.16;}
@keyframes mdtw{50%{opacity:.25;}}
@keyframes mdood{0%,100%{transform:translate(0,0) rotate(-8deg);}33%{transform:translate(14px,-22px) rotate(10deg);}66%{transform:translate(-10px,-8px) rotate(-2deg);}}
.mgolf{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:center;padding:28px 30px 26px;margin:6px 0 46px;}
.mgolf.reveal{transform:translateX(90px) rotate(2.5deg);} .mgolf.reveal.in{transform:rotate(-.6deg);}
.mgolf .badge,.mten .badge{position:absolute;z-index:3;top:-20px;right:28px;padding:5px 16px 7px;font:24px/1 var(--font);font-weight:normal;color:#0b0b0b;background:#ffd84d;
  border-radius:12px 16px 10px 14px/14px 10px 16px 12px;box-shadow:4px 5px 0 rgba(255,255,255,.18);animation:mbadge 1.8s ease-in-out infinite;}
@keyframes mbadge{0%,100%{transform:rotate(6deg) scale(1);}50%{transform:rotate(-3deg) scale(1.1);}}
.mgolf .tape.r{right:120px;}
.mgolf .gart{border-bottom:3px solid #fff;border-radius:0 0 4px 4px;}
/* Új meccs: széles kártya, a nehezítések valódi játékfelvételen (/assets/twists.mp4 -> R2: media.sh, tools/promo site_modes.json) */
.mnew .nvid{border-bottom:none;}
.mnew .nvid video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0b0b;border:3px solid #fff;border-radius:14px 18px 12px 16px/16px 12px 18px 14px;box-shadow:5px 6px 0 rgba(255,255,255,.14);}
.mnew.reveal{transform:translateX(-90px) rotate(-2.5deg);} .mnew.reveal.in{transform:rotate(.5deg);}
.mnew .tws{margin-top:10px;font-size:17px;color:#ffd84d;}
.mgolf2{margin:46px 0 6px;}
/* foci-tenisz kártya: két figura, középen háló, a labda egy pattanással oda-vissza */
.tscene{display:block;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.tscene .gnd{stroke-width:3.4;} .tscene .mesh{stroke-width:1.2;opacity:.55;} .tscene .post{stroke-width:4;} .tscene .tape{stroke-width:3.6;}
.tscene .cone{fill:#0b0b0b;stroke-width:2;} .tscene .kicker{stroke-width:1.8;} .tscene .ball circle{fill:#0b0b0b;stroke-width:2.2;} .tscene .ball path{fill:#fff;stroke:none;}
.tscene .shadow{fill:#fff;stroke:none;opacity:.25;} .tscene .trail{stroke-dasharray:1 9;stroke-width:3;stroke:#ffd84d;opacity:.55;}
.gscene{display:block;width:100%;height:auto;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.gscene .fillbg{fill:#0b0b0b;} .gscene .gfill{fill:#0b0b0b;stroke:none;} .gscene .gnd{stroke-width:3.4;}
.gscene .trees{opacity:.38;stroke-width:2;} .gscene .fans{opacity:.7;stroke-width:1.8;} .gscene .grass,.gscene .tee{stroke-width:2;}
.gscene .cl{opacity:.35;stroke-width:2;animation:mcloud 18s linear infinite;} .gscene .c2{animation-duration:26s;animation-delay:-9s;}
@keyframes mcloud{0%{transform:translateX(-60px);}100%{transform:translateX(160px);}}
.gscene .cup{fill:#000;stroke-width:2;} .gscene .tun{fill:#000;} .gscene .pl{stroke-width:1.6;opacity:.6;}
.gscene .win{fill:#ffd84d;fill-opacity:.45;stroke-width:1.8;}
.gscene .sails path{stroke-width:2.6;} .gscene .sails rect{fill:rgba(11,11,11,.85);stroke-width:2;} .gscene .lat{stroke-width:1.2;}
.gscene .hub{fill:#0b0b0b;stroke-width:2.4;}
.gscene .cloth{fill:#ff6b6b;stroke-width:2;transform-box:fill-box;transform-origin:0 50%;}
.gscene .ball circle{fill:#0b0b0b;stroke-width:2.2;} .gscene .ball path{fill:#fff;stroke:none;}
.gscene .aim{stroke-dasharray:1 11;stroke-width:4;stroke:#ffd84d;}
.gscene .boom{stroke:#ffd84d;stroke-width:3;} .gscene .conf rect{stroke:none;}
.gscene .kicker{stroke-width:2.4;}
.mgolf h3{margin:0 0 8px;font-weight:normal;font-size:44px;line-height:1;}
.mgolf p{margin:0;color:var(--mid);font-size:20px;}
.mgolf .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 28px;}
.mgrid .feat.reveal{transform:translateY(60px) rotate(-3deg);} .mgrid .feat.reveal.in:nth-child(3n+1){transform:rotate(-1deg);}
.mgrid .feat.reveal.in:nth-child(3n+2){transform:rotate(.8deg);} .mgrid .feat.reveal.in:nth-child(3n){transform:rotate(-.5deg);}
.vs{gap:2px;} .vsb{align-self:center;font:34px/1 var(--font);font-weight:normal;padding:4px 8px 6px;border:2.5px solid #fff;border-radius:50% 46% 52% 44%;animation:vsb 1.6s ease-in-out infinite;}
@keyframes vsb{0%,100%{transform:rotate(-8deg) scale(1);}50%{transform:rotate(6deg) scale(1.15);}}
@media (max-width:860px){ .mgolf{grid-template-columns:1fr;gap:18px;padding:22px 18px;} .mgolf h3{font-size:36px;} .mdood svg{width:calc(var(--s,46px) * .72);height:calc(var(--s,46px) * .72);} }
/* a hős: fent a logó, alatta balra a szlogen és a gombok, jobbra az intró videó (mobilon egymás alatt) */
.hrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;margin-top:84px;text-align:left;}
.hrow .tag{margin:0 0 26px;}
.hrow .ctas,.hrow .stores{justify-content:flex-start;}
.hvid{position:relative;animation:hvidIn .9s .9s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes hvidIn{0%{opacity:0;transform:translateY(40px) rotate(3deg) scale(.92);}100%{opacity:1;transform:rotate(1.2deg);}}
.hvid .vid{max-width:none;padding:10px;box-shadow:9px 11px 0 rgba(255,255,255,.14);}
.hvid .vplay .ring{width:clamp(60px,6vw,86px);}
.hvid .vplay b{font-size:clamp(24px,2.6vw,32px);}
.hvl{position:absolute;z-index:3;left:-18px;top:-46px;display:flex;align-items:flex-end;gap:2px;font-size:24px;color:#fff;transform:rotate(-5deg);pointer-events:none;}
.hvl svg{width:52px;height:36px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:-18px;animation:hvl 1.6s ease-in-out infinite;}
@keyframes hvl{0%,100%{transform:translate(0,0);}50%{transform:translate(4px,4px);}}
/* a lejátszás gomb középen, alatta elmosódik a videó képe (::after, backdrop-filter): asztali nézetben csak rámutatásra,
   érintőképernyőn / keskeny nézetben mindig; lejátszás közben egyik sem */
.hvid .vplay{z-index:2;}
.hvid .vid::after{content:'';position:absolute;inset:10px;z-index:1;border-radius:10px 14px 8px 12px;pointer-events:none;opacity:1;
  background:rgba(11,11,11,.3);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:opacity .3s;}
.hvid .vid.playing::after{opacity:0;}
@media (hover:hover) and (min-width:901px){
  .hvid .vid::after{opacity:0;}
  .hvid .vid:not(.playing) .vplay{opacity:0;}
  .hvid .vid:not(.playing):hover::after,.hvid .vid:not(.playing):focus-within::after{opacity:1;}
  .hvid .vid:not(.playing):hover .vplay,.hvid .vid:not(.playing) .vplay:focus-visible{opacity:1;}
}
@media (max-width:900px){ .hrow{grid-template-columns:1fr;gap:0;margin-top:44px;text-align:center;} .hcopy{display:contents;}
  .hrow .tag{order:1;margin:20px auto 22px;} .hrow .ctas{order:2;} .hvid{order:3;margin-top:70px;} .hrow .stores{order:4;margin-top:30px;}
  .hrow .ctas,.hrow .stores{justify-content:center;} .hvl{left:8px;top:-42px;font-size:21px;} .hvid .vplay .ring{width:50px;} .hvid .vplay b{font-size:20px;} }
/* ---------- testreszabás & Shop ---------- */
#style{overflow:hidden;}
.sgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:stretch;}
.stag{position:absolute;z-index:3;top:-19px;left:50%;padding:3px 16px 6px;font:24px/1 var(--font);font-weight:normal;color:#0b0b0b;background:#fff;
  border-radius:10px 14px 9px 12px/12px 9px 14px 10px;transform:translateX(-50%) rotate(-3deg);}
.mirror{padding:34px 22px 22px;transform:rotate(-1deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;}
.mirror.reveal{transform:translateX(-70px) rotate(-4deg);} .mirror.reveal.in{transform:rotate(-1deg);}
.glass{position:relative;width:min(340px,100%);aspect-ratio:300/380;display:flex;align-items:flex-end;justify-content:center;}
.glass .frame{position:absolute;inset:0;width:100%;height:100%;fill:rgba(255,255,255,.035);stroke:#fff;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;}
.glass .frame .gl{fill:none;stroke-width:3;opacity:.45;}
.glass .looks{position:relative;z-index:1;margin-bottom:8%;animation:spr var(--dur) steps(var(--n)) infinite,lbob 1.4s ease-in-out infinite;}
@keyframes lbob{0%,100%{translate:0 0;}50%{translate:0 -4px;}}
.glass .podium{position:absolute;left:12%;right:12%;bottom:6%;height:3px;background:#fff;border-radius:3px;}
.poof{position:absolute;z-index:2;left:50%;top:44%;width:0;height:0;}
.poof i{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;border:2.5px solid #fff;opacity:0;animation:poof 1.4s ease-out infinite;}
.poof i:nth-child(1){--dx:-90px;--dy:-60px;} .poof i:nth-child(2){--dx:86px;--dy:-74px;} .poof i:nth-child(3){--dx:-100px;--dy:40px;}
.poof i:nth-child(4){--dx:96px;--dy:30px;} .poof i:nth-child(5){--dx:-20px;--dy:-120px;border-color:#ffd84d;} .poof i:nth-child(6){--dx:30px;--dy:110px;border-color:#ff8ad8;}
@keyframes poof{0%{opacity:0;transform:translate(0,0) scale(.4);}6%{opacity:1;}30%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4);}100%{opacity:0;}}
.mirror .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.shelf{padding:34px 24px 24px;transform:rotate(.8deg);}
.shelf.reveal{transform:translateX(70px) rotate(4deg);} .shelf.reveal.in{transform:rotate(.8deg);}
.wallet{position:absolute;top:14px;right:18px;display:flex;align-items:center;gap:6px;font-size:22px;color:#ffd84d;}
.coin{width:24px;height:24px;fill:none;stroke:#ffd84d;stroke-width:2;stroke-linecap:round;}
.wallet .coin{animation:coinspin 2.4s ease-in-out infinite;}
@keyframes coinspin{0%,60%,100%{transform:scaleX(1);}80%{transform:scaleX(-1);}}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px;}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 8px;border:2px dashed rgba(255,255,255,.3);
  border-radius:12px 9px 13px 10px/10px 13px 9px 12px;animation:tbuy 14.4s infinite;animation-delay:calc(var(--i) * .9s);}
.tile .it{width:min(100%,96px);aspect-ratio:1;background:no-repeat;background-size:1600% 100%;
  background-position:calc(var(--i) / 15 * 100%) 0;}   /* 16 kocka: az i. kocka a sáv i/15-öd részénél */
.tile b{display:flex;align-items:center;gap:3px;font-weight:normal;font-size:17px;color:#ffd84d;}
.tile b .coin{width:16px;height:16px;}
.tile .ok{position:absolute;top:4px;right:4px;width:26px;height:26px;fill:none;stroke:#4fd387;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;animation:tok 14.4s infinite;animation-delay:calc(var(--i) * .9s);}
@keyframes tbuy{0%,7%,100%{transform:none;border-color:rgba(255,255,255,.3);background:transparent;}2%{transform:scale(1.1) rotate(-3deg);border-color:#fff;background:rgba(255,255,255,.08);}4%{transform:scale(1.04) rotate(2deg);border-color:#4fd387;}}
@keyframes tok{0%,1.5%{stroke-dashoffset:30;opacity:1;}4%,10%{stroke-dashoffset:0;opacity:1;}14%,100%{stroke-dashoffset:0;opacity:0;}}
.steps{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:44px;}
.step{flex:1;max-width:330px;display:flex;align-items:flex-start;gap:12px;}
.step h3{margin:0 0 2px;font-weight:normal;font-size:26px;line-height:1.05;}
.step p{margin:0;color:var(--mid);font-size:17px;}
.si{flex:none;width:46px;height:46px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.si.coinspin{stroke:#ffd84d;animation:coinspin 2.4s ease-in-out infinite;}
.sarr{flex:none;width:56px;height:28px;fill:none;stroke:rgba(255,255,255,.6);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:860px){ .glass .looks{--s:.84 !important;} .glass{width:min(290px,100%);} .sgrid{grid-template-columns:1fr;gap:44px;} .steps{flex-direction:column;align-items:stretch;} .step{max-width:none;} .sarr{transform:rotate(90deg);align-self:center;} }
@media (max-width:520px){ .tiles{grid-template-columns:repeat(4,1fr);gap:7px;} .tile b{font-size:14px;} .tile .ok{width:18px;height:18px;} .shelf{padding:34px 12px 16px;} }
@media (prefers-reduced-motion:reduce){ .flyer{display:none;} }
.cloud{position:absolute;opacity:.55;animation:drift linear infinite;}
.cloud svg{width:100%;fill:#0b0b0b;stroke:#fff;stroke-width:2.4;}
@keyframes drift{from{transform:translateX(-30vw);}to{transform:translateX(130vw);}}
/* nyitókép: szezonális réteg (a tartalom mögött, a felhőkkel együtt) */
.hseason{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.hseason .hsky{position:absolute;inset:0;width:100%;height:100%;}
.hmoon{position:absolute;right:6%;top:3%;width:clamp(86px,10vw,140px);aspect-ratio:1;animation:hmoon 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 22px rgba(255,160,77,.55)) drop-shadow(0 0 60px rgba(255,160,77,.25));}
.hmoon svg{width:100%;height:100%;fill:#1a120a;stroke:#ffa04d;stroke-width:2.4;}
.hmoon .cr{fill:none;stroke:rgba(255,160,77,.55);stroke-width:1.8;}
@keyframes hmoon{to{transform:translateY(8px) rotate(4deg);}}
.hstar{position:absolute;width:14px;height:14px;fill:none;stroke:#ffd8a8;stroke-width:1.6;stroke-linejoin:round;animation:hstar 2.8s ease-in-out infinite;}
@keyframes hstar{0%,100%{opacity:.15;transform:scale(.6);}50%{opacity:.9;transform:scale(1);}}
.hbat{position:absolute;left:0;top:var(--y);width:var(--w);animation:hbatX var(--t) linear var(--d) infinite;}
.hbat > i{display:block;animation:hbatY calc(var(--t) / 4) ease-in-out var(--d) infinite alternate;}
.hbat svg{display:block;width:100%;fill:#3a1d06;stroke:#ffa04d;stroke-width:2.2;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 0 6px rgba(255,160,77,.55));}
.hbat .wl,.hbat .wr{transform-box:fill-box;animation:hflap .26s ease-in-out infinite alternate;}
.hbat .wl{transform-origin:100% 40%;} .hbat .wr{transform-origin:0 40%;}
.hbat.rev{animation-direction:reverse;} .hbat.rev svg{transform:scaleX(-1);}
@keyframes hbatX{from{transform:translateX(-120px);}to{transform:translateX(calc(100vw + 60px));}}
@keyframes hbatY{from{transform:translateY(-14px);}to{transform:translateY(16px);}}
@keyframes hflap{from{transform:scaleY(1);}to{transform:scaleY(.3);}}
.hlan{position:absolute;top:-6px;left:var(--x);width:var(--w);transform-origin:50% 0;animation:hlan var(--t) ease-in-out var(--d) infinite alternate;}
.hlan svg{display:block;width:100%;overflow:visible;fill:none;stroke:#ffd84d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hlan .bd{fill:#c8323c;stroke:#ffd84d;}
.hlan{filter:drop-shadow(0 0 16px rgba(255,90,90,.45));}
@keyframes hlan{from{transform:rotate(-6deg);}to{transform:rotate(6deg);}}
@media (max-width:700px){ .hmoon{right:3%;top:1%;} .hlan:nth-of-type(n+4){display:none;} }
@media (prefers-reduced-motion:reduce){ .hseason *{animation:none!important;} }
/* talaj: a játék kezdőképernyőjének talajdarabja (JS rajzolja: talajvonal, jelek, kavicsok, fűcsomók, virágok, hajtás) */
.turf{position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;}
.turf svg{position:absolute;left:0;bottom:0;width:100%;height:100%;overflow:visible;}
.turf .gl{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:4000;stroke-dashoffset:4000;animation:draw 1.8s .2s ease-out forwards;}
.turf .mk{stroke:#fff;stroke-width:2.6;stroke-linecap:round;opacity:.8;}
.turf .pb{fill:#0b0b0b;stroke:#fff;stroke-width:2.4;}
.turf .tuft{transform-box:fill-box;transform-origin:50% 100%;animation:grow .55s cubic-bezier(.2,1.8,.4,1) both, sway var(--sd,2.6s) ease-in-out infinite alternate;}
.turf .tuft path{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;}
.turf .fl{fill:#0b0b0b;stroke:#fff;stroke-width:2.2;}
.turf .fc{fill:#fff;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes grow{from{scale:1 0;}to{scale:1 1;}}
@keyframes sway{from{rotate:calc(var(--sw,6deg) * -1);}to{rotate:var(--sw,6deg);}}
.bug{position:absolute;bottom:42px;left:0;animation:crawl 46s linear infinite;}
.bug .spr{--n:10;--fw:130;--fh:73;--dur:.65s;--s:.55;}
@keyframes crawl{0%{transform:translateX(-90px);}100%{transform:translateX(calc(100vw + 90px));}}
@media (max-width:760px){ .pitch{--hx:100px;--arc:75px;margin-top:60px;} }

/* ---------- hirdetési helyek ---------- */
/* Hirdetés: a data-slot helyőrzőbe kerül a hirdetési kód (pl. Google AdSense <ins> elem). Méretek: leaderboard 728x90 (mobilon 320x50), medium rectangle 300x250. */
.ad{position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto;color:var(--dim);font-size:16px;letter-spacing:.14em;
  border:2.5px dashed rgba(255,255,255,.35);border-radius:12px 16px 10px 14px/14px 10px 16px 12px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);}
.ad::before{content:'AD';position:absolute;left:10px;top:6px;font-size:12px;color:#6a6a6a;}
.ad.lb{width:min(728px,100%);height:90px;}
.ad.mr{width:300px;height:250px;flex:none;}
.ad.live{border:none;background:none;}                    /* élő hirdetés: nincs helyőrző-keret */
.ad.live::before{display:none;}
.no-ads .ad,.no-ads .adrow,.no-ads [data-cookie]{display:none;}   /* amíg nincs hirdetés: se helyőrző, se süti-link */
@media (max-width:760px){ .ad.lb{width:320px;height:50px;} }
.adrow{padding:26px 0;}

/* ---------- futó csík ---------- */
.runner{position:relative;height:250px;overflow:hidden;border-top:2px dashed rgba(255,255,255,.15);border-bottom:2px dashed rgba(255,255,255,.15);}
.runner .lane{position:absolute;bottom:26px;left:0;animation:runacross 9s linear infinite;}
.runner .lane:not(.b){animation-delay:-1.4s;}   /* elöl a labdát vezető Samu, mögötte üldözi Tibi */
.runner .line{position:absolute;left:0;right:0;bottom:34px;height:5px;background:#fff;border-radius:3px;opacity:.9;}
.runner .lane .dball{position:absolute;left:142px;bottom:9px;width:30px;height:30px;animation:dribble 1.1s ease-in-out infinite, spin .45s linear infinite;}   /* a labdát vezeti maga előtt */
@keyframes dribble{0%,100%{translate:0 0;}20%{translate:34px -10px;}45%{translate:46px 0;}70%{translate:20px -4px;}}
@keyframes runacross{from{transform:translateX(-260px);}to{transform:translateX(calc(100vw + 260px));}}
.runner .slogan{position:absolute;left:50%;top:26px;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;font-size:clamp(28px,4.6vw,52px);letter-spacing:.06em;
  color:#fff;-webkit-text-stroke:6px #0b0b0b;paint-order:stroke fill;}

/* ---------- haladó: nehezítések ---------- */
.advwhere{margin:-14px 0 26px;}
.advwhere .chip{font-size:18px;color:#fff;border-color:rgba(255,255,255,.7);}
.advs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 24px;}
.adv{padding:18px 18px 20px;}
.adv:nth-child(3n+1){transform:rotate(.7deg);} .adv:nth-child(3n+2){transform:rotate(-.8deg);} .adv:nth-child(3n){transform:rotate(.4deg);}
.adv.reveal.in:nth-child(3n+1){transform:rotate(.7deg);} .adv.reveal.in:nth-child(3n+2){transform:rotate(-.8deg);} .adv.reveal.in:nth-child(3n){transform:rotate(.4deg);}
.adv .ico{height:96px;display:flex;justify-content:center;margin-bottom:8px;}
.adv .ico svg{height:100%;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.adv h3{margin:0 0 4px;font-weight:normal;font-size:27px;line-height:1.05;}
.adv p{margin:0;color:var(--mid);font-size:18px;}
.ico .gnd{stroke-width:3;}
.ico.chaos .fall{animation:advFall 1.8s cubic-bezier(.55,0,1,.45) infinite;} .ico.chaos .shadow{fill:rgba(255,255,255,.3);stroke:none;animation:advShadow 1.8s ease-in infinite;transform-origin:60px 91px;}
@keyframes advFall{0%{transform:translateY(-30px);opacity:0;}15%{opacity:1;}80%{transform:translateY(46px);}86%{transform:translateY(42px);}92%,100%{transform:translateY(46px);opacity:1;}}
@keyframes advShadow{0%{transform:scaleX(.3);}80%,100%{transform:scaleX(1);}}
.ico.weather .bolt{stroke-width:4.5;animation:advFlash 2.4s steps(1) infinite;} .ico.weather .rain{animation:advRain .6s linear infinite;}
@keyframes advFlash{0%,62%,70%,100%{opacity:0;}64%,74%{opacity:1;}}
@keyframes advRain{from{transform:translate(0,-6px);}to{transform:translate(-2px,6px);}}
.ico.ufo .bob{animation:advBob 1.6s ease-in-out infinite;} .ico.ufo .beam{fill:rgba(255,255,255,.14);stroke-dasharray:8 7;animation:advBeam 1.6s linear infinite;}
.ico.ufo .up{animation:advUp 2.4s ease-in infinite;}
@keyframes advBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes advBeam{to{stroke-dashoffset:-30;}}
@keyframes advUp{0%{transform:translateY(0);opacity:1;}80%{transform:translateY(-40px) scale(.6);opacity:1;}100%{transform:translateY(-44px) scale(.4);opacity:0;}}
.ico.moon .tw{animation:advTw 1.8s ease-in-out infinite;} .ico.moon .float{animation:advFloat 3s ease-in-out infinite;} .ico.moon .helm{stroke-width:2.5;}
@keyframes advTw{0%,100%{opacity:.3;}50%{opacity:1;}}
@keyframes advFloat{0%,100%{transform:translateY(4px);}50%{transform:translateY(-14px);}}
.ico.quake .shake{animation:advShake .32s linear infinite;}
@keyframes advShake{0%{transform:translate(0,0) rotate(0);}25%{transform:translate(-3px,1px) rotate(-1.5deg);}50%{transform:translate(2px,-1px) rotate(1deg);}75%{transform:translate(-1px,2px) rotate(-.5deg);}100%{transform:translate(0,0) rotate(0);}}
.ico.ice rect{fill:rgba(255,255,255,.14);} .ico.ice .slide{animation:advSlide 2.6s ease-in-out infinite;} .ico.ice .tw{animation:advTw 1.4s ease-in-out infinite;}
@keyframes advSlide{0%{transform:translateX(0) rotate(0);}50%{transform:translateX(46px) rotate(8deg);}100%{transform:translateX(0) rotate(0);}}
.ico.lava .hatch{stroke-width:3;} .ico.lava .bub{animation:advBub 1.4s ease-out infinite;} .ico.lava .b2{animation-delay:.6s;} .ico.lava .heat{stroke-width:2.5;opacity:.7;animation:advHeat 1.6s ease-in-out infinite;}
@keyframes advBub{0%{transform:translateY(0) scale(.6);opacity:1;}100%{transform:translateY(-22px) scale(1.4);opacity:0;}}
@keyframes advHeat{0%,100%{transform:translateY(0);opacity:.2;}50%{transform:translateY(-6px);opacity:.8;}}
.ico.mirror .frame{stroke-dasharray:6 6;opacity:.6;} .ico.mirror .rgt{animation:advFlip 3s ease-in-out infinite;transform-origin:center;}
@keyframes advFlip{0%,35%{transform:scaleY(1);}50%{transform:scaleY(.05);}65%,100%{transform:scaleY(1);}}
.ico.dog .run{animation:advDog .35s ease-in-out infinite alternate;} .ico.dog .tail{animation:advWag .25s ease-in-out infinite alternate;transform-origin:right bottom;}
.ico.dog .ball{animation:advDogBall 2.4s ease-in-out infinite;}
@keyframes advDog{from{transform:translateY(0) rotate(-1deg);}to{transform:translateY(-4px) rotate(1.5deg);}}
@keyframes advWag{from{transform:rotate(-14deg);}to{transform:rotate(14deg);}}
@keyframes advDogBall{0%,40%{transform:translate(14px,30px);}60%,100%{transform:translate(0,0);}}
.ico.night .dark{fill:#05050a;stroke:none;} .ico.night .cone{fill:rgba(255,255,255,.16);stroke:none;animation:advCone 2.4s ease-in-out infinite;transform-origin:left center;}
.ico.night .glow{fill:#fff;filter:drop-shadow(0 0 6px #fff);} .ico.night .moonc{fill:#fff;stroke:none;} .ico.night .flashes{opacity:0;animation:advFlashes 2.4s steps(1) infinite;}
@keyframes advCone{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(5deg);}}
@keyframes advFlashes{0%,70%,78%,100%{opacity:0;}72%,82%{opacity:1;}}
.ico.tornado .tw ellipse{animation:advWob .5s ease-in-out infinite alternate;stroke-width:3;}
.ico.tornado .tw ellipse:nth-child(1){animation-delay:-0.08s;}.ico.tornado .tw ellipse:nth-child(2){animation-delay:-0.16s;}.ico.tornado .tw ellipse:nth-child(3){animation-delay:-0.24s;}.ico.tornado .tw ellipse:nth-child(4){animation-delay:-0.32s;}.ico.tornado .tw ellipse:nth-child(5){animation-delay:-0.40s;}.ico.tornado .tw ellipse:nth-child(6){animation-delay:-0.48s;}
.ico.tornado .orb{animation:advOrb 1.4s linear infinite;}
@keyframes advWob{from{transform:translateX(-5px);}to{transform:translateX(5px);}}
@keyframes advOrb{0%{transform:translate(-20px,30px);}25%{transform:translate(0,22px);}50%{transform:translate(22px,12px);}75%{transform:translate(0,2px);}100%{transform:translate(-26px,-10px);}}
.ico.ref .shirt{fill:#0b0b0b;} .ico.ref .card{fill:#ffd84d;stroke-width:2.5;animation:advCard 3s steps(1) infinite;} .ico.ref .arm{animation:advArm 3s ease-in-out infinite;transform-origin:left bottom;}
.ico.ref .note{opacity:0;animation:advNote 3s ease-out infinite;}
@keyframes advArm{0%,20%{transform:rotate(30deg);}35%,85%{transform:rotate(0);}100%{transform:rotate(30deg);}}
.ico.hell .heat{fill:url(#hellg);stroke:none;} .ico.hell .gnd{stroke:#ff6a2a;} .ico.hell .pit{fill:#0b0b0b;stroke:#ff6a2a;animation:advPit 3s ease-in-out infinite;transform-origin:60px 70px;}
.ico.hell .lava{stroke:#ffd84d;animation:advPit 3s ease-in-out infinite;transform-origin:60px 70px;}
.ico.hell .fl path{fill:rgba(255,106,42,.3);stroke:#ff6a2a;stroke-width:2.5;}
.ico.hell .fl{animation:advFlame .45s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center bottom;}
.ico.hell .f2{animation-delay:-.2s;} .ico.hell .f3{animation-delay:-.1s;} .ico.hell .f4{animation-delay:-.3s;}
.ico.hell .fb{fill:#0b0b0b;stroke:#ffd84d;animation:advHellBall 3s ease-in infinite;}
.ico.hell .emb{stroke:#ffd84d;stroke-width:2;animation:advEmb 1.6s linear infinite;}
@keyframes advPit{0%,15%{transform:scaleX(.05);}30%,70%{transform:scaleX(1);}85%,100%{transform:scaleX(.05);}}
@keyframes advFlame{from{transform:scaleY(.8) skewX(-4deg);}to{transform:scaleY(1.12) skewX(5deg);}}
@keyframes advHellBall{0%{transform:translateY(-12px);opacity:0;}8%{opacity:1;}30%{transform:translateY(64px);}55%{transform:translateY(112px);opacity:1;}56%{opacity:0;transform:translateY(-14px);}100%{transform:translateY(64px);opacity:1;}}
@keyframes advEmb{from{transform:translateY(6px);opacity:1;}to{transform:translateY(-22px);opacity:0;}}
.ico.zeus .cloud{fill:#0b0b0b;} .ico.zeus .beard{fill:#0b0b0b;stroke-width:2;} .ico.zeus .cl{animation:advZeusFloat 2.4s ease-in-out infinite alternate;}
.ico.zeus .bh{stroke:#fff6c4;stroke-width:2.5;filter:drop-shadow(0 0 3px #fff6c4);}
.ico.zeus .bolt{stroke:#fff6c4;stroke-width:3;filter:drop-shadow(0 0 4px #fff);opacity:0;animation:advZeusBolt 2.4s steps(1) infinite;}
.ico.zeus .tgt{stroke-dasharray:5 4;animation:advZeusTgt 2.4s steps(1) infinite;}
.ico.zeus .pl{animation:advZeusJump 2.4s ease-in-out infinite;}
@keyframes advZeusFloat{from{transform:translateY(0);}to{transform:translateY(4px);}}
@keyframes advZeusBolt{0%,58%{opacity:0;}60%,66%{opacity:1;}63%{opacity:.3;}70%,100%{opacity:0;}}
@keyframes advZeusTgt{0%,8%{opacity:0;}10%,20%,30%,40%,50%{opacity:1;}15%,25%,35%,45%,55%,100%{opacity:.25;}}
@keyframes advZeusJump{0%,30%{transform:translate(-34px,0);}45%{transform:translate(-14px,-24px);}58%,100%{transform:translate(0,0);}}
.ico.shroom .cap{fill:#e8483f;} .ico.shroom .stem{fill:#0b0b0b;} .ico.shroom .dot{fill:#fff;stroke:none;}
.ico.shroom .m{animation:advShroomPop 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom;}
.ico.shroom .sp circle{fill:#ff8a80;stroke:none;opacity:0;animation:advSpore 3s ease-out infinite;}
.ico.shroom .sp circle:nth-child(2){animation-delay:.08s;} .ico.shroom .sp circle:nth-child(3){animation-delay:.16s;} .ico.shroom .sp circle:nth-child(4){animation-delay:.04s;}
.ico.shroom .pl{animation:advShroomWalk 3s ease-in-out infinite;} .ico.shroom .body{animation:advShroomSway 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom;}
.ico.shroom .stars{stroke:#ffd84d;stroke-width:2;opacity:0;animation:advShroomStars 3s linear infinite;transform-box:fill-box;transform-origin:center;}
@keyframes advShroomPop{0%{transform:scale(0);}15%,45%{transform:scale(1);}50%,100%{transform:scale(0);}}
@keyframes advSpore{0%,47%{opacity:0;transform:translate(0,0);}50%{opacity:1;}80%,100%{opacity:0;transform:translate(6px,-22px);}}
@keyframes advShroomWalk{0%,20%{transform:translateX(0);}48%{transform:translateX(-42px);}62%{transform:translateX(-30px);}74%{transform:translateX(-46px);}88%{transform:translateX(-34px);}100%{transform:translateX(0);}}
@keyframes advShroomSway{0%,48%{transform:rotate(0);}58%{transform:rotate(-14deg);}70%{transform:rotate(12deg);}82%{transform:rotate(-80deg);}92%{transform:rotate(0);}}
@keyframes advShroomStars{0%,48%{opacity:0;transform:rotate(0);}52%,92%{opacity:1;}100%{opacity:0;transform:rotate(360deg);}}
.ico.meteor .rock{fill:#0b0b0b;stroke-width:2.5;} .ico.meteor .tail{fill:#ff7a2a;stroke:none;opacity:.85;filter:drop-shadow(0 0 3px #ff9a3a);}
.ico.meteor .m1{animation:advMet1 2.6s ease-in infinite;} .ico.meteor .m2{animation:advMet2 2.6s ease-in infinite;}
.ico.meteor .boom{stroke:#ffd84d;stroke-width:2.5;opacity:0;} .ico.meteor .b1{animation:advBoom1 2.6s ease-out infinite;} .ico.meteor .b2{animation:advBoom2 2.6s ease-out infinite;}
.ico.meteor .crater{fill:#ff7a2a;stroke:none;opacity:0;} .ico.meteor .c1{animation:advCrater1 2.6s linear infinite;} .ico.meteor .c2{animation:advCrater2 2.6s linear infinite;}
@keyframes advMet1{0%{transform:translate(30px,-10px);opacity:1;}38%{transform:translate(90px,86px);opacity:1;}40%,100%{transform:translate(90px,86px);opacity:0;}}
@keyframes advMet2{0%,45%{transform:translate(-10px,-6px);opacity:0;}46%{opacity:1;}72%{transform:translate(38px,88px);opacity:1;}74%,100%{transform:translate(38px,88px);opacity:0;}}
@keyframes advBoom1{0%,38%{opacity:0;transform:scale(.4);}42%{opacity:1;transform:scale(1);}60%,100%{opacity:0;transform:scale(1.2);}}
@keyframes advBoom2{0%,72%{opacity:0;}76%{opacity:1;}90%,100%{opacity:0;}}
@keyframes advCrater1{0%,38%{opacity:0;}42%{opacity:.9;}100%{opacity:0;}}
@keyframes advCrater2{0%,72%{opacity:0;}76%{opacity:.9;}100%{opacity:0;}}
.ico.meteor .b1,.ico.meteor .b2{transform-box:fill-box;transform-origin:center bottom;}
@keyframes advCard{0%,50%{fill:#ffd84d;}50.01%,100%{fill:#ff5a5a;}}
@keyframes advNote{0%,30%{opacity:0;}38%{opacity:1;}60%,100%{opacity:0;transform:translate(6px,-6px);}}
.ico svg *{transform-box:fill-box;}
.ico.chaos .shadow{transform-origin:center;}

/* ---------- jellemzők ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:34px 28px;}
.feat{padding:26px 24px 24px;}
.feat:nth-child(3n+1){transform:rotate(-1deg);} .feat:nth-child(3n+2){transform:rotate(.8deg);} .feat:nth-child(3n){transform:rotate(-.5deg);}
.feat.reveal.in:nth-child(3n+1){transform:rotate(-1deg);} .feat.reveal.in:nth-child(3n+2){transform:rotate(.8deg);} .feat.reveal.in:nth-child(3n){transform:rotate(-.5deg);}
.feat .art{position:relative;height:190px;display:flex;align-items:flex-end;justify-content:center;gap:6px;margin-bottom:14px;border-bottom:3px solid #fff;border-radius:0 0 4px 4px;}
.feat h3{margin:0 0 6px;font-weight:normal;font-size:30px;line-height:1.05;}
.feat p{margin:0;color:var(--mid);font-size:19px;}
.feat .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.chip{padding:1px 10px 3px;font-size:15px;border:2px dashed rgba(255,255,255,.4);border-radius:12px 9px 11px 8px/9px 12px 8px 11px;color:var(--mid);}
.kball{position:absolute;bottom:4px;left:50%;width:30px;height:30px;margin-left:30px;animation:kickball 1.3s cubic-bezier(.3,0,.4,1) infinite;}

@keyframes kickball{0%,45%{transform:translate(0,0) rotate(0);}100%{transform:translate(160px,-120px) rotate(540deg);opacity:0;}}
/* fekvő telefon a valódi kontroller képével (pad.html); a koppintások a joystickon és a gombokon */
.lphone{position:relative;width:min(300px,100%);aspect-ratio:844/390;margin-bottom:12px;padding:7px 9px;box-sizing:content-box;background:#0b0b0b;
  border:3px solid #fff;border-radius:22px 26px 22px 26px/26px 22px 26px 22px;box-shadow:5px 6px 0 rgba(255,255,255,.12);transform:rotate(-2deg);}
.lphone::before{content:'';position:absolute;left:3px;top:50%;width:5px;height:34px;margin-top:-17px;border-radius:3px;background:rgba(255,255,255,.35);}
.lphone img{width:100%;height:100%;border-radius:12px;}
.lphone .tap{position:absolute;width:14%;aspect-ratio:1;margin:-7% 0 0 -7%;border-radius:50%;border:2.5px solid #fff;opacity:0;animation:tap 2.4s ease-out infinite;}
.lphone .stick{left:15.5%;top:72%;width:12%;margin:-6% 0 0 -6%;animation:stick 2.4s ease-in-out infinite;opacity:.85;background:rgba(255,255,255,.18);}
.lphone .b1{left:79%;top:71%;animation-delay:.3s;} .lphone .b2{left:87%;top:83%;animation-delay:1s;} .lphone .b3{left:95%;top:71%;animation-delay:1.6s;}
@keyframes tap{0%{opacity:.9;transform:scale(.6);}35%{opacity:0;transform:scale(1.5);}100%{opacity:0;}}
@keyframes stick{0%,100%{translate:0 0;}25%{translate:30% -6%;}50%{translate:40% 0;}75%{translate:-25% 8%;}}
.langs{font-size:15px;color:var(--mid);text-align:center;line-height:1.6;}
/* új kártyák rajzai: kupák (5 trófea a kupák színeiben), Király marad (korona, telefonok), játékmódok (kerék + ceruza), tizenegyes */
.cups{display:flex;align-items:flex-end;gap:6px;margin-bottom:10px;}
.cups .tro{width:52px;height:52px;stroke:#fff;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;animation:trob 2.4s ease-in-out infinite;animation-delay:var(--d);}
.cups .tro:nth-child(3){width:66px;height:66px;} .cups .tro:nth-child(5){width:58px;height:58px;}
@keyframes trob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-8px) rotate(3deg);}}
.king{gap:22px;}
.kfig{position:relative;display:flex;flex-direction:column;align-items:center;}
.kfig .crown{position:absolute;top:-6px;width:46px;height:46px;fill:#ffd84d;stroke:#ffd84d;stroke-width:1.4;stroke-linejoin:round;z-index:1;animation:crown 2.2s ease-in-out infinite;}
@keyframes crown{0%,100%{transform:translateY(0) rotate(-8deg);}50%{transform:translateY(-6px) rotate(6deg);}}
.queue{display:flex;gap:4px;margin-bottom:16px;}
.queue .ph{width:34px;height:32px;fill:none;stroke:#4fd387;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;animation:qhop 3.2s ease-in-out infinite;}
.queue .ph circle{fill:#4fd387;stroke:none;}
.queue .ph:nth-child(2){animation-delay:.2s;stroke:#fff;} .queue .ph:nth-child(3){animation-delay:.4s;stroke:#fff;} .queue .ph:nth-child(4){animation-delay:.6s;stroke:#fff;}
.queue .ph:nth-child(n+2) circle{fill:#fff;}
@keyframes qhop{0%,70%,100%{transform:translateY(0);}80%{transform:translateY(-10px);}}
.modes{gap:0;}
.mpen{height:150px;width:auto;margin-left:-14px;}
.pen{width:min(300px,100%);height:auto;margin-bottom:6px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.pen .net{stroke-width:1.2;opacity:.45;}
.pen .keeper{animation:keep 2.6s ease-in-out infinite;}
@keyframes keep{0%,55%,100%{transform:translateY(0);}70%{transform:translateY(-34px);}}
.pen .ball{fill:#0b0b0b;} .pen .dot{fill:#fff;stroke:none;}
.pen .arc{stroke-dasharray:3 9;stroke-width:3.4;animation:arc 2.6s linear infinite;}
@keyframes arc{0%{stroke-dashoffset:120;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
.pen .bar rect:first-child{stroke-width:2.4;}
.pen .bar .fill{fill:#fff;stroke:none;transform-origin:17px 127px;animation:pow 1.3s ease-in-out infinite alternate;}
@keyframes pow{0%{transform:scaleY(.05);}100%{transform:scaleY(1);}}
.langs b{display:block;font-weight:normal;font-size:64px;line-height:1;color:#fff;}

/* ---------- intró videó: krétás keretben, saját PLAY matricagombbal; megnyomásra hanggal indul ---------- */
.vid{padding:14px;max-width:980px;margin:0 auto;}
.vid video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px 14px 8px 12px;border:2px solid rgba(255,255,255,.25);}
.vplay{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;color:#fff;background:none;border:0;cursor:pointer;font-family:var(--font);
  transform:translate(-50%,-50%) rotate(-3deg);transition:transform .25s cubic-bezier(.2,1.8,.4,1),opacity .25s;}
.vplay .ring{width:clamp(110px,16vw,160px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:rgba(11,11,11,.82);
  border:4px solid #fff;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;box-shadow:6px 8px 0 rgba(255,255,255,.18);animation:vring 2.6s ease-in-out infinite;}
.vplay .ring svg{width:42%;fill:#fff;margin-left:8%;}
.vplay b{font-weight:normal;font-size:clamp(28px,4vw,40px);letter-spacing:.08em;color:#fff;-webkit-text-stroke:6px #0b0b0b;paint-order:stroke fill;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);}
.vplay:hover{transform:translate(-50%,-50%) rotate(2deg) scale(1.1);}
.vplay:hover .ring{background:#fff;} .vplay:hover .ring svg{fill:#0b0b0b;}
.vid.playing .vplay{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(1.4);}
@keyframes vring{0%,100%{rotate:0deg;scale:1;}50%{rotate:4deg;scale:1.05;}}

/* ---------- galéria ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:30px;}
.shot{position:relative;padding:12px 12px 10px;cursor:zoom-in;transition:transform .25s cubic-bezier(.2,1.6,.4,1);}
.shot:nth-child(odd){transform:rotate(-1.4deg);} .shot:nth-child(even){transform:rotate(1.2deg);}
.shot.reveal.in:nth-child(odd){transform:rotate(-1.4deg);} .shot.reveal.in:nth-child(even){transform:rotate(1.2deg);}
.shot:hover{transform:scale(1.04) rotate(0deg)!important;z-index:3;}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px 12px 6px 10px;border:2px solid rgba(255,255,255,.25);}
.shot figcaption{padding:8px 4px 0;font-size:20px;}
.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.88);cursor:zoom-out;}
.lightbox.show{display:flex;animation:fadein .25s;}
.lightbox img{max-width:min(1400px,100%);max-height:90vh;border:3px solid #fff;border-radius:14px;animation:pop .4s cubic-bezier(.2,1.6,.4,1);}
@keyframes fadein{from{opacity:0;}} @keyframes pop{from{transform:scale(.85) rotate(-3deg);}}
/* fiók: a fejléc gombja, a bejelentkezés és a statisztika (a játék statisztika-lapjának mintájára: ../ropi-foci/css/style.css #statbox) */
.acbtn{display:flex;align-items:center;gap:7px;max-width:190px;padding:6px 12px 8px;font:20px/1 var(--font);color:#fff;background:none;cursor:pointer;white-space:nowrap;
  border:2px solid rgba(255,255,255,.45);border-radius:14px 10px 16px 9px/10px 15px 9px 14px;transition:transform .2s,border-color .2s;}
.acbtn:hover,.acbtn:focus-visible{border-color:#fff;transform:rotate(-2deg) scale(1.05);outline:none;}
.acbtn.in{border-color:#fff;}
.acbtn svg{flex:none;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;}
.acbtn span{overflow:hidden;text-overflow:ellipsis;}
.acct{position:fixed;inset:0;z-index:105;display:none;padding:20px;overflow-y:auto;background:rgba(0,0,0,.82);}
.acct.show{display:flex;animation:fadein .2s;}
.acct .abox{width:min(460px,100%);margin:auto;padding:30px 28px 26px;animation:pop .4s cubic-bezier(.2,1.6,.4,1);}
.acct.instat .abox{width:min(880px,100%);}
.acct h3{margin:0;font-size:36px;font-weight:normal;line-height:1;}
.acct .uline{display:block;width:210px;height:14px;margin:6px 0 18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;}
.acct .x{position:absolute;top:10px;right:12px;width:38px;height:38px;padding:0;font:28px/1 var(--font);color:#fff;background:none;border:0;cursor:pointer;transition:transform .2s;}
.acct .x:hover{transform:rotate(90deg) scale(1.15);}
.acct .astat,.acct.instat .alog{display:none;}
.acct.instat .astat{display:block;}
.acct .aforgot{align-self:flex-end;margin:-6px 2px -2px 0;font-size:16px;color:var(--dim);}
.acct .aforgot:hover{color:#fff;}
.acct .anew{margin:2px 0 0;font-size:17px;color:var(--dim);}
.acct .anew a{color:#fff;}
.acct .scols{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start;}
.acct .sleft{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.acct .sname{font-weight:normal;font-size:28px;line-height:1.1;word-break:break-word;}
.acct .srank{padding:2px 12px 4px;font-size:18px;color:#0b0b0b;background:var(--yellow);border-radius:12px 9px 14px 8px;transform:rotate(-2deg);}
.acct .sbig{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.acct .sbig>div{display:flex;flex-direction:column;align-items:center;}
.acct .sbig b{font-weight:normal;font-size:56px;line-height:1;}
.acct .sbig span{font-size:16px;color:var(--dim);}
.acct .sbig>i{font-style:normal;font-size:44px;color:var(--dim);}
.acct .sratio{margin-left:auto;padding:6px 14px;border:2.5px solid #fff;border-radius:40% 55% 45% 60%/55% 40% 60% 45%;}
.acct .sratio b{font-size:34px;}
.acct .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.acct .stile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 9px;text-align:center;
  border:2px dashed rgba(255,255,255,.35);border-radius:14px 10px 16px 11px/11px 16px 10px 14px;}
.acct.instat .stile{animation:acRow .45s var(--d) cubic-bezier(.2,1.4,.4,1) both;}
@keyframes acRow{0%{opacity:0;transform:translateX(-50px) rotate(-3deg);}100%{opacity:1;transform:none;}}
.acct .stile b{font-weight:normal;font-size:30px;line-height:1;}
.acct .stile span{font-size:14px;line-height:1.15;color:var(--mid);}
.acct .scups{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:17px;color:var(--mid);}
.acct .stro{display:flex;gap:6px;}
.acct .stro i svg{width:34px;height:34px;stroke:#fff;stroke-width:2;stroke-linejoin:round;}
.acct .stro i:not(.won) svg{opacity:.3;stroke-dasharray:3 3;}
.acct .sempty{display:none;margin-top:12px;font-size:17px;color:var(--yellow);}
.acct .sempty.show{display:block;}
.acct .aacts{display:flex;justify-content:flex-end;margin-top:20px;}
.acct .alogout{padding:8px 18px 10px;font-size:20px;}
@media (max-width:760px){ .acct .scols{grid-template-columns:1fr;} .acct .sgrid{grid-template-columns:repeat(3,1fr);} .acct .sbig b{font-size:44px;} .acct .sratio{margin-left:0;} }
@media (max-width:520px){ .acbtn span{display:none;} .acbtn{padding:6px 8px 7px;} .acct .abox{padding:26px 18px 22px;} }

/* ---------- jobb klikk: kis bemutató ablak (a szövegkijelölés és a helyi menü tiltva) ---------- */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
img{-webkit-user-drag:none;}
.about{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.82);}
.about.show{display:flex;animation:fadein .2s;}
.about .sheet{width:min(460px,100%);padding:30px 28px 26px;text-align:center;animation:pop .4s cubic-bezier(.2,1.6,.4,1);}
.about .spr{margin:-6px auto 4px;}
.about h3{margin:0 0 10px;font-size:34px;font-weight:normal;line-height:1;}
.about p{margin:0 0 20px;font-size:20px;color:var(--mid);}
.about .x{position:absolute;top:10px;right:12px;width:38px;height:38px;padding:0;font:28px/1 var(--font);color:#fff;background:none;border:0;cursor:pointer;transition:transform .2s;}
.about .x:hover{transform:rotate(90deg) scale(1.15);}

/* ---------- irányítás + hirdetés ---------- */
.howrow{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap;justify-content:center;}
.how{flex:1;min-width:300px;padding:28px 28px 24px;}
.keys{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:center;}
.kbd{display:inline-flex;gap:6px;flex-wrap:wrap;}
.kbd i{min-width:38px;height:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:20px;
  border:2.5px solid #fff;border-radius:9px 12px 8px 11px;box-shadow:0 4px 0 rgba(255,255,255,.35);animation:keyTap 3s infinite;}
.keys > div:nth-child(4n+1) .kbd i{animation-delay:.2s;} .keys > div:nth-child(4n+3) .kbd i{animation-delay:1.1s;}
@keyframes keyTap{0%,90%,100%{transform:none;box-shadow:0 4px 0 rgba(255,255,255,.35);}94%{transform:translateY(3px);box-shadow:0 1px 0 rgba(255,255,255,.35);}}
.keys span{color:var(--mid);}
.how .custom{margin:22px 0 0;padding:12px 16px 14px;font-size:19px;color:var(--mid);border:2.5px dashed rgba(255,255,255,.4);border-radius:14px 10px 16px 12px/10px 16px 12px 14px;}
.how .custom b{display:block;font-weight:normal;font-size:24px;color:#fff;}

/* ---------- regisztráció (a fiók: ../ropi-foci/worker/auth.js; a játékban csak bejelentkezés van) ---------- */
.reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:34px;align-items:center;padding:44px 40px;}
.reg .lead{margin-bottom:0;}
.reg .rpen{display:block;margin:2px 0 -14px 0;}      /* a karakter ceruzával felhasználó-ikont rajzol, majd kiradírozza (/assets/pencil_draw.webp) */
.reg .rpen img{display:block;width:238px;height:auto;}
.rform{display:flex;flex-direction:column;gap:13px;}
.rform label{display:flex;flex-direction:column;gap:4px;font-size:19px;color:var(--mid);}
.rform input{padding:9px 13px 8px;font:23px/1.1 var(--font);color:#fff;background:var(--bg);outline:none;
  border:2.4px solid rgba(255,255,255,.55);border-radius:12px 16px 11px 15px/15px 11px 16px 12px;transition:border-color .15s,box-shadow .15s;}
.rform input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.rform input[aria-invalid="true"]{border-color:#ff8a8a;}
.rform .rmsg{min-height:1.3em;margin:-3px 0 -5px 2px;font-size:18px;color:#ff8a8a;}
.rform .btn.big{align-self:flex-start;font-size:28px;}
.rform .btn.big:disabled{opacity:.55;cursor:default;animation:none;}
.rform .legal{margin:2px 0 0;font-size:15px;line-height:1.35;color:var(--dim);}
.rform .legal a{color:var(--mid);}
.rdone{display:none;text-align:center;}
.reg.done .rform{display:none;}
.reg.done .rdone{display:block;}
.reg.verify .rdone .btn{display:none;}
.rdone b{display:block;margin-bottom:6px;font-weight:normal;font-size:34px;color:#fff;}
.rdone p{margin:0 0 22px;color:var(--mid);font-size:20px;}
@media (max-width:820px){ .reg{grid-template-columns:1fr;gap:18px;padding:34px 20px;} .reg .rpen{margin:-8px auto -8px;width:180px;} .reg .rpen img{width:180px;} }

/* ---------- letöltés ---------- */
.dl{padding:56px 30px 46px;text-align:center;}      /* nincs overflow:hidden: a ragasztószalagok kilógnak felül */
.dl .h2{margin-bottom:16px;}
.dl .spr{position:absolute;bottom:0;}
.dl .left{left:2%;} .dl .right{right:2%;}
@media (max-width:900px){ .dl .spr{display:none;} }

/* ---------- lábléc ---------- */
footer{padding:54px 0 40px;border-top:2px dashed rgba(255,255,255,.18);color:var(--dim);}
footer .wrap{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;}
.socials{display:flex;flex-wrap:wrap;gap:10px;}
.socials a{padding:5px 14px 7px;font-size:19px;color:#fff;text-decoration:none;border:2.5px solid #fff;border-radius:12px 16px 10px 14px/14px 10px 16px 12px;transition:transform .2s cubic-bezier(.2,1.8,.4,1),background .15s,color .15s;}
.socials a:hover{transform:rotate(-3deg) scale(1.08);background:#fff;color:#0b0b0b;}
.socials a.soon{opacity:.45;pointer-events:none;border-style:dashed;}
.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:18px;}
/* akadálymentesség: billentyűzetes fókusz mindenhol jól látható (sárga szaggatott keret), és az "ugrás a tartalomhoz" link (az első Tab-ra) */
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2.5px dashed #ffd84d!important;outline-offset:4px!important;}
.skip{position:fixed;left:16px;top:-80px;z-index:300;padding:10px 18px 12px;font:20px/1 'Patrick Hand','Comic Sans MS',system-ui,sans-serif;color:#0b0b0b;background:#ffd84d;
  border-radius:12px 16px 10px 14px;text-decoration:none;box-shadow:4px 5px 0 rgba(255,255,255,.2);transition:top .15s;}
.skip:focus{top:12px;}
/* animációk megállítása (lábléc gomb; WCAG 2.2.2): minden CSS-animáció áll, a vásznak (hó, tűzijáték, konfetti) nem rajzolnak */
html.calm *,html.calm *::before,html.calm *::after{animation-play-state:paused!important;}
.calmbtn{display:inline-flex;align-items:center;gap:7px;padding:0;font:18px var(--font);color:var(--mid);background:none;border:0;cursor:pointer;}
.calmbtn:hover{color:#fff;} .calmbtn svg{width:16px;height:16px;fill:currentColor;}
.flinks a{color:var(--mid);text-decoration:none;} .flinks a:hover{color:#fff;}
.flinks .fstatus{display:inline-flex;align-items:center;gap:7px;}   /* szerver státusz: a pötty az összesített állapot színe (GET /api/status) */
.fstatus i{width:9px;height:9px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 3px rgba(255,255,255,.08);}
.fstatus.ok i{background:var(--green);} .fstatus.warn i{background:var(--yellow);} .fstatus.bad i{background:#ff6b6b;}
.copy{width:100%;font-size:15px;}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;} .reveal{opacity:1;transform:none;} }
/* megjelenési értesítő a visszaszámláló alatt (index.html .lnotify; site.js): krétás mező + gomb; elküldéskor papírrepülő száll el */
.lnotify{max-width:640px;margin:26px auto 0;text-align:center;}
.lcd.done ~ .lnotify{display:none;}
.lnotify .nlab{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;font-size:26px;transform:rotate(-1deg);}
.lnotify .nlab svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transform-origin:50% 10%;animation:nbell 3.4s ease-in-out infinite;}
@keyframes nbell{0%,70%,100%{transform:rotate(0);}74%{transform:rotate(16deg);}80%{transform:rotate(-13deg);}86%{transform:rotate(8deg);}92%{transform:rotate(-4deg);}}
.lnotify .nrow{position:relative;display:flex;gap:12px;justify-content:center;align-items:stretch;}
.lnotify input[type=email]{flex:1;min-width:0;max-width:380px;padding:10px 16px 9px;font:23px/1.1 var(--font);color:#fff;background:var(--bg);outline:none;
  border:2.6px solid rgba(255,255,255,.6);border-radius:14px 18px 12px 16px/16px 12px 18px 14px;transition:border-color .15s,box-shadow .15s;}
.lnotify input[type=email]::placeholder{color:#8a8a8a;}
.lnotify input[type=email]:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.lnotify input[aria-invalid="true"]{border-color:#ff8a8a;}
.lnotify .nhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.lnotify .btn{font-size:24px;padding:10px 22px 12px;}
.lnotify .btn:disabled{opacity:.55;cursor:default;transform:none;}
.lnotify.busy .btn span{animation:nbusy 1s ease-in-out infinite;}
@keyframes nbusy{50%{opacity:.35;}}
.lnotify .nmsg{min-height:1.4em;margin:12px 0 0;font-size:20px;color:var(--mid);}
.lnotify .nmsg:empty{min-height:0;margin:0;}
.lnotify .nmsg:focus{outline:none;}
.lnotify .nmsg.ok{color:var(--green);} .lnotify .nmsg.err{color:#ff8a8a;} .lnotify .nmsg.warn{color:var(--yellow);}
.lnotify .nmsg{max-width:560px;margin-left:auto;margin-right:auto;}
.lnotify .nresend{margin-top:12px;font-size:21px;padding:8px 18px 10px;}
.lnotify .nresend[hidden]{display:none;}
.lnotify .nresend:disabled{opacity:.55;cursor:default;transform:none;}
.lnotify .nfine{margin:10px auto 0;max-width:520px;font-size:16px;line-height:1.35;color:var(--dim);}
.lnotify .nfine a{color:var(--mid);}
.lnotify .nplane{position:absolute;left:50%;top:50%;width:52px;height:34px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linejoin:round;opacity:0;pointer-events:none;}
.lnotify.fly .nplane{animation:nfly 1.5s cubic-bezier(.3,.1,.4,1) forwards;}
@keyframes nfly{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(0);}15%{opacity:1;}
  60%{opacity:1;transform:translate(120px,-70px) scale(1) rotate(-12deg);}100%{opacity:0;transform:translate(420px,-190px) scale(.7) rotate(-20deg);}}
.lnotify.sent .nrow{display:none;}
@media (max-width:560px){ .lnotify .nrow{flex-direction:column;align-items:center;} .lnotify input[type=email]{width:100%;max-width:none;} .lnotify .nlab{font-size:23px;} }