/* Karty hier (hry.html + sekcia Hry na úvodnej stránke). Obsah generuje hry.js z poľa GAMES. */
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;text-align:left;perspective:1100px}
@media(max-width:900px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gcards{grid-template-columns:minmax(0,1fr);gap:14px}}
.gc{--mx:50%;--my:0%;--rx:0deg;--ry:0deg;--c:198,255,61;position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;color:var(--text,#f2f2f5);text-decoration:none;
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 55%,rgba(var(--c),.07));
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 60px -28px rgba(0,0,0,.9),0 0 0 0 rgba(var(--c),0);
  opacity:0;transform:translateY(26px) scale(.97);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1.1),box-shadow .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.gc.in{opacity:1;transform:translateY(0) scale(1)}
.gc.in.tilt{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);transition:transform .12s ease-out,box-shadow .3s,border-color .3s}
.gc::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,255,255,.16),transparent 45%);opacity:0;transition:opacity .3s}
.gc:hover::before,.gc:focus-visible::before{opacity:1}
.gc:hover,.gc:focus-visible{border-color:rgba(var(--c),.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 28px 70px -26px rgba(0,0,0,.95),0 0 40px -10px rgba(var(--c),.55);outline:0}
.gc:active{transform:scale(.985)}
.gc.flap{--c:61,214,255}.gc.click{--c:198,255,61}.gc.soonc{--c:255,255,255;cursor:default}
.gc .sc{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.1)}
.gc .body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.gc .pill{align-self:flex-start;padding:4px 10px;border-radius:99px;font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--c));border:1px solid rgba(var(--c),.4);background:rgba(var(--c),.08)}
.gc h3{font-size:clamp(22px,3vw,28px);font-weight:900;letter-spacing:-.03em;line-height:1.05;font-stretch:85%;text-transform:uppercase}
.gc p{color:#a9a9b8;font-size:14px;line-height:1.45}
.gc .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.gc .gst{font:600 11px/1.2 'JetBrains Mono',monospace;letter-spacing:.06em;color:#8d8d9c}
.gc .gst b{color:rgb(var(--c));font-weight:700}
.gc .go{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:99px;font-weight:800;font-size:14px;color:#0b0b0f;background:linear-gradient(135deg,#e3ff8a,#c6ff3d 55%,#9be21a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px -10px rgba(198,255,61,.7);transition:transform .2s}
.gc.flap .go{background:linear-gradient(135deg,#b8ecff,#3dd6ff 55%,#14a9d6);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px -10px rgba(61,214,255,.7)}
.gc:hover .go{transform:translateX(3px)}
.gc.soonc .go{display:none}
.gc.soonc h3{color:rgb(var(--c))}
.gc.soonc .gst{animation:gcBlink 2.2s ease-in-out infinite}
@keyframes gcBlink{50%{opacity:.4}}
/* --- scény --- */
.sc.s-flap{background:linear-gradient(180deg,#0f2a44,#1d5f8a 58%,#2a86a8)}
.sc.s-flap .cl{position:absolute;height:14px;border-radius:99px;background:rgba(255,255,255,.22);animation:gcCloud 14s linear infinite}
.sc.s-flap .cl::after{content:"";position:absolute;left:18%;top:-8px;width:44%;height:16px;border-radius:99px;background:inherit}
.sc.s-flap .cl.a{top:16%;width:54px;left:100%}.sc.s-flap .cl.b{top:42%;width:38px;left:100%;animation-duration:20s;animation-delay:-8s;opacity:.7}
@keyframes gcCloud{from{transform:translateX(0)}to{transform:translateX(-420px)}}
.sc.s-flap .pipe{position:absolute;width:15%;left:100%;border:2px solid #0b3d15;background:linear-gradient(90deg,#5fe06b,#2fae3c 60%,#1f7e2b);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);animation:gcPipe 3.4s linear infinite}
.sc.s-flap .pipe.t{top:-4px;height:32%;border-radius:0 0 8px 8px}.sc.s-flap .pipe.b{bottom:-4px;height:34%;border-radius:8px 8px 0 0}
.sc.s-flap .pipe.t2{top:-4px;height:48%;border-radius:0 0 8px 8px;animation-delay:-1.7s}.sc.s-flap .pipe.b2{bottom:-4px;height:18%;border-radius:8px 8px 0 0;animation-delay:-1.7s}
@keyframes gcPipe{from{left:105%}to{left:-20%}}
.sc.s-flap .hd{position:absolute;left:24%;top:38%;width:17%;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));animation:gcFlap 1.7s ease-in-out infinite}
@keyframes gcFlap{0%,100%{transform:translateY(-18px) rotate(-14deg)}30%{transform:translateY(14px) rotate(16deg)}60%{transform:translateY(-6px) rotate(-6deg)}}
.sc.s-flap .score{position:absolute;top:8px;left:50%;transform:translateX(-50%);font:900 22px/1 'Archivo',sans-serif;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.sc.s-click{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(198,255,61,.22),transparent 70%),linear-gradient(180deg,#14141c,#0d0d13)}
.sc.s-click::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(198,255,61,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,61,.07) 1px,transparent 1px);background-size:26px 26px;animation:gcGrid 6s linear infinite}
@keyframes gcGrid{to{background-position:26px 26px}}
.sc.s-click .cnt{position:absolute;top:10px;left:0;right:0;text-align:center;font:900 clamp(24px,4vw,32px)/1 'Archivo',sans-serif;font-stretch:85%;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 18px rgba(198,255,61,.5)}
.sc.s-click .cnt small{display:block;margin-top:3px;font:600 9px/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:var(--accent,#c6ff3d)}
.sc.s-click .hd{position:absolute;left:50%;top:44%;width:25%;height:auto;margin-left:-12.5%;filter:drop-shadow(0 0 16px rgba(198,255,61,.55));animation:gcPulse 1.1s ease-in-out infinite}
@keyframes gcPulse{0%,100%{transform:scale(1)}8%{transform:scale(1.1) rotate(-3deg)}22%{transform:scale(1)}}
.sc.s-click .fl{position:absolute;bottom:34%;font:900 15px/1 'Archivo',sans-serif;color:#c6ff3d;text-shadow:0 2px 0 #0b0b0f,0 0 10px rgba(198,255,61,.7);opacity:0;animation:gcFloat 2.4s ease-out infinite}
.sc.s-click .fl.a{left:26%}.sc.s-click .fl.b{left:68%;animation-delay:-.8s;color:#ff3d81;text-shadow:0 2px 0 #0b0b0f,0 0 10px rgba(255,61,129,.7)}.sc.s-click .fl.c{left:46%;animation-delay:-1.6s}
@keyframes gcFloat{0%{opacity:0;transform:translateY(10px) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.15)}}
.sc.s-click .pbar{position:absolute;left:10%;right:10%;bottom:9%;height:7px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.sc.s-click .pbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c6ff3d,#e3ff8a);box-shadow:0 0 10px rgba(198,255,61,.7);transform-origin:0 50%;animation:gcBar 6s ease-in-out infinite}
@keyframes gcBar{0%{transform:scaleX(.04)}85%,100%{transform:scaleX(1)}}
.sc.s-soon{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px),linear-gradient(180deg,#14141c,#0d0d13)}
.sc.s-soon .q{font:900 64px/1 'Archivo',sans-serif;color:rgba(255,255,255,.14);animation:gcQ 3s ease-in-out infinite}
@keyframes gcQ{50%{transform:translateY(-8px) rotate(6deg);color:rgba(255,255,255,.28)}}
.sc.s-soon .eq{position:absolute;left:0;right:0;bottom:12%;display:flex;justify-content:center;gap:5px;height:26px;align-items:flex-end}
.sc.s-soon .eq i{width:6px;border-radius:3px;background:rgba(255,255,255,.22);animation:gcEq 1.2s ease-in-out infinite}
.sc.s-soon .eq i:nth-child(2){animation-delay:-.3s}.sc.s-soon .eq i:nth-child(3){animation-delay:-.6s}.sc.s-soon .eq i:nth-child(4){animation-delay:-.9s}.sc.s-soon .eq i:nth-child(5){animation-delay:-.15s}
@keyframes gcEq{0%,100%{height:6px}50%{height:24px}}
.gall{display:flex;justify-content:center;margin-top:30px}
.gall a{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:99px;font-weight:800;font-size:16px;color:#0b0b0f;background:linear-gradient(135deg,#e3ff8a,#c6ff3d 55%,#9be21a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 34px -12px rgba(198,255,61,.7);transition:transform .2s,box-shadow .2s}
.gall a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 40px -12px rgba(198,255,61,.85)}
.gall a span{display:inline-block;transition:transform .2s}.gall a:hover span{transform:translateX(4px)}
.gc.paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.gc,.gc *{animation:none!important;transition:none!important}.gc{opacity:1;transform:none}}
/* stránka hry.html */
main.hub{padding:40px 20px 56px;align-items:center}
main.hub h1{margin:10px 0 8px}
main.hub .lead{margin:0 0 34px;max-width:560px;color:#a9a9b8;font-weight:600;font-size:16px;letter-spacing:0}
@media(max-width:520px){main.hub{padding:26px 14px 36px}main.hub .lead{margin-bottom:22px;font-size:15px}}