/* ROCKSTARGR.FUN GAMES — βιτρίνα παιχνιδιών · παλέτα «νυχτερινή σκηνή»: σχεδόν μαύρο-μωβ, χρυσό-πορτοκαλί φως, ελληνικό μπλε */
:root{
  --bg:#0c0a10; --deep:#07060a; --head:#100d15; --panel:#16121d; --panel2:#1e1828; --line:rgba(255,255,255,.07);
  --text:#ddd6e6; --white:#fff; --muted:#9a92a8; --dim:#6d6579;
  --blue:#ffc23a; --blue2:#ff8a2b; --tag:rgba(255,255,255,.07); --tag-t:#e6dcf0;
  --g1:#ffd35a; --g2:#ff922e; --gt:#241200; --greek:#2f86ff; --hot:#ff2d6a;
  --r:14px; --title:'Bungee','Fira Sans Condensed',Impact,sans-serif;
  --gold:#ffd15c; --gold2:#ff983b;
  --fb:'Fira Sans',Arial,Helvetica,sans-serif; --fc:'Fira Sans Condensed','Fira Sans',Arial,sans-serif;
  --wrap:1180px; --gut:clamp(12px,3vw,24px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:400 15px/1.55 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(1100px 520px at 50% -200px,rgba(255,140,40,.22),rgba(255,140,40,0) 70%),
    radial-gradient(900px 600px at 100% 10%,rgba(130,60,220,.14),rgba(130,60,220,0) 70%),var(--bg) fixed}
body.lock{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.h-label{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 13px/1.2 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--white)}
.h-label::before{content:'';width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:0 0 10px rgba(255,160,40,.6)}
.link{background:none;border:0;padding:0;color:var(--blue);cursor:pointer}
.link:hover{color:var(--white)}

/* ── κουμπιά ── */
.btn-green,.btn-blue{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s,box-shadow .12s,transform .08s}
.btn-green{height:44px;padding:0 22px;background:linear-gradient(180deg,var(--g1),var(--g2));color:var(--gt);font:700 16px/1 var(--fb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 14px rgba(255,140,40,.28)}
.btn-green:hover{background:linear-gradient(180deg,#ffe27a,#ffa53a);color:#1a0d00;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 22px rgba(255,160,50,.5)}
.btn-green:active{transform:translateY(1px)}
.btn-green svg{width:16px;height:16px;fill:currentColor}
.btn-green.big{height:54px;padding:0 30px;font-size:19px;letter-spacing:.01em}
.btn-green.big svg{width:20px;height:20px}
.btn-green.sm{height:32px;padding:0 13px;font-size:14px}
.btn-green.sm svg{width:12px;height:12px}
.btn-green.full{width:100%}
.btn-blue{height:36px;padding:0 16px;background:rgba(255,255,255,.07);color:var(--tag-t);font:500 14px/1 var(--fb);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-blue:hover,.btn-blue.on{background:rgba(255,194,58,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,194,58,.55)}
.btn-blue svg{width:16px;height:16px}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--tag);color:var(--tag-t);font-size:12px;line-height:1.35;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tag.adult{background:rgba(255,45,106,.16);color:#ff8fb0;box-shadow:inset 0 0 0 1px rgba(255,45,106,.35)}
.age{position:absolute;z-index:3;top:10px;right:10px;padding:5px 9px;border-radius:999px;background:var(--hot);color:#fff;font:700 12px/1 var(--fb);letter-spacing:.03em}

/* ── πάνω μπάρα ── */
.gh{position:sticky;top:0;z-index:40;background:rgba(12,10,16,.86);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,194,58,.16),0 8px 24px rgba(0,0,0,.35)}
.gh-in{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo svg{width:34px;height:34px}
/* λογότυπο ROCKSTARGR.FUN GAMES: χρυσό μέταλλο (GR = ελληνικό μπλε) με φως που περνάει, βάθος από πίσω, σήμα «GAMES» */
.logo .wm{display:inline-flex;flex-direction:column;align-items:stretch;gap:calc(var(--fs) * .2);transform:skewX(-7deg);--fs:23px}
.logo .top{display:flex;align-items:baseline}
.logo .rs{position:relative;display:inline-block;font:400 var(--fs)/1 'Bungee','Fira Sans Condensed',Impact,sans-serif;letter-spacing:.01em;white-space:nowrap}
.logo .rs::before{content:attr(data-t);position:absolute;left:0;top:0;color:#6b2a05;pointer-events:none;
  text-shadow:1px 1px 0 #7a3006,2px 2px 0 #5a2004,3px 3px 0 #361102,0 0 16px rgba(255,150,40,.42)}
.logo .rs i{position:relative;font-style:normal;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 48%,rgba(255,255,255,.95) 50%,transparent 60%),
    linear-gradient(180deg,#fffbe0 0%,#ffe27a 30%,#ffb52e 52%,#e8771a 54%,#ffaa36 78%,#ffd76a 100%);
  background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:rs-shine 6s ease-in-out infinite}
.logo .gr::before{color:#06264d;text-shadow:1px 1px 0 #083063,2px 2px 0 #062550,3px 3px 0 #031630,0 0 16px rgba(60,140,255,.5)}
.logo .gr i{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 48%,rgba(255,255,255,.95) 50%,transparent 60%),
    linear-gradient(180deg,#eef6ff 0%,#8cc2ff 30%,#2f86ff 52%,#0d5eaf 54%,#2a78e6 80%,#7ab6ff 100%)}
.logo .fun{font-size:calc(var(--fs) * .7)}
.logo .gr i,.logo .fun i{animation-delay:.25s}
.logo .gm{display:flex;align-items:center;gap:.55em;font:400 calc(var(--fs) * .5)/1 'Bungee','Fira Sans Condensed',sans-serif;
  letter-spacing:.62em;margin-right:-.62em;color:#fff;text-shadow:0 0 10px rgba(255,190,60,.55),0 1px 0 #000}
.logo .gm::before,.logo .gm::after{content:'';flex:1;height:2px;border-radius:2px}
.logo .gm::before{background:linear-gradient(90deg,transparent,#ffc23a)}
.logo .gm::after{background:linear-gradient(90deg,#ffc23a,transparent);margin-right:.62em}
.logo:hover .rs i{animation-duration:1.8s}
@keyframes rs-shine{0%{background-position:130% 0,0 0}50%,100%{background-position:-30% 0,0 0}}
.gh-nav{display:flex;gap:4px;height:100%}
.gh-nav a{display:flex;align-items:center;padding:0 12px;font:500 15px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:#e2dbea;border-bottom:3px solid transparent;border-top:3px solid transparent;transition:color .15s}
.gh-nav a:hover{color:#fff}
.gh-nav a.on{color:var(--blue);border-image:linear-gradient(90deg,var(--g1),var(--g2)) 0 0 1 0/0 0 3px 0}
.gh-user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;color:#c9c0d4}
.gh-user .sep{color:#4a4252}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.07);cursor:pointer;color:#e2dbea}
.icon-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.icon-btn svg{width:18px;height:18px}
.user-btn{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 4px;border-radius:999px;border:0;background:rgba(255,255,255,.07);cursor:pointer;color:#e2dbea;font-weight:500}
.user-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));color:#241200;font:800 14px/1 var(--fb);text-transform:uppercase}
.menu{position:absolute;right:var(--gut);top:58px;min-width:220px;padding:6px;border-radius:12px;background:#1e1828;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.6)}
.menu button{display:block;width:100%;padding:9px 12px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer;color:#e2dbea}
.menu button:hover{background:rgba(255,194,58,.16);color:#fff}

/* ── προτεινόμενα ── */
.feat{padding-top:28px}
.feat-stage{position:relative}
.feat-card{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);background:#120f18;border-radius:18px;overflow:hidden;min-height:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.65),0 0 80px rgba(255,140,40,.08)}
.feat-media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer}
.feat-media video,.feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-media .shot{opacity:0;transition:opacity .25s}
.feat-media .shot.on{opacity:1}
.play-dot{position:absolute;z-index:2;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,8,14,.5);border:2px solid rgba(255,210,110,.9);box-shadow:0 0 24px rgba(255,160,40,.45);opacity:0;transform:scale(.9);transition:opacity .18s,transform .18s;pointer-events:none}
.play-dot svg{width:34px;height:34px;margin-left:5px;fill:#fff}
.feat-media:hover .play-dot,.cap:hover .play-dot{opacity:1;transform:none}
.badge-live{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:3px;background:rgba(0,0,0,.6);
  color:#fff;font:600 11px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase}
.badge-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3d3d;box-shadow:0 0 8px #ff3d3d}
.feat-side{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:16px 16px 16px;overflow:hidden;min-width:0}
.feat-side::before{content:"";position:absolute;inset:-30px;z-index:-1;background:var(--art) center/cover;filter:blur(22px) brightness(.32) saturate(1.3)}
.feat-side h3{margin:0;font-size:28px;line-height:1.12;cursor:pointer}
.feat-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.feat-thumbs button{position:relative;aspect-ratio:16/9;padding:0;border:0;border-radius:8px;background:#000 center/cover;cursor:pointer;opacity:.8;transition:opacity .15s,outline-color .15s;outline:2px solid transparent;outline-offset:-2px}
.feat-thumbs button:hover,.feat-thumbs button.on{opacity:1;outline-color:var(--blue)}
.feat-avail{font:500 15px/1.2 var(--fb);color:#fff}
.feat-avail small{display:block;margin-top:3px;color:var(--muted);font-size:13px;font-weight:400}
.feat-cta{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.feat-cta .where{font-size:12.5px;color:var(--muted);text-align:center}
.feat-arrow{position:absolute;top:50%;z-index:5;width:44px;height:96px;margin-top:-48px;border:0;cursor:pointer;color:#fff;font-size:44px;line-height:1;
  background:none;opacity:.75;text-shadow:0 2px 10px rgba(0,0,0,.8);transition:opacity .15s,background .15s}
.feat-arrow:hover{opacity:1;color:var(--blue)}
.feat-arrow.prev{left:-58px}
.feat-arrow.next{right:-58px;transform:scaleX(-1)}
.feat-dots{display:flex;justify-content:center;gap:4px;margin-top:12px}
.feat-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.2);cursor:pointer;transition:background .15s,width .2s}
.feat-dots button.on{width:30px;background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:0 0 10px rgba(255,160,40,.55)}
.feat-dots button:hover{background:rgba(255,255,255,.4)}
.feat-card.anim{animation:featIn .35s ease}
@keyframes featIn{from{opacity:.25}to{opacity:1}}

/* ── όλα τα παιχνίδια ── */
.grid-sec{padding-top:42px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.sec-head .h-label{margin:0}
.filters{display:flex;flex-wrap:wrap;gap:4px}
.filters button{height:30px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.07);color:var(--tag-t);cursor:pointer;font-size:13.5px}
.filters button:hover{background:rgba(255,255,255,.14);color:#fff}
.filters button.on{background:var(--tag);color:var(--tag-t)}
.cap-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cap{position:relative;display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r);overflow:hidden;grid-column:span 2;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.45);transition:background .15s,transform .15s,box-shadow .15s}
.cap.wide{grid-column:span 3}
.cap-grid.filtered .cap{grid-column:span 2}
.cap:hover{background:var(--panel2);transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,194,58,.45),0 16px 38px rgba(0,0,0,.6),0 0 40px rgba(255,140,40,.12)}
.cap-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.cap-media img,.cap-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap-media video{opacity:0;transition:opacity .3s}
.cap.playing .cap-media video{opacity:1}
.cap-media img{transition:transform .4s ease}
.cap:hover .cap-media img{transform:scale(1.04)}
.cap-info{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 12px;min-height:66px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,0))}
.cap-info h3{margin:0 0 7px;font-size:16px;line-height:1.2;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-info>div{min-width:0}
.cap .btn-green{flex:none}

/* ── εγγραφή ── */
.join{padding-top:46px}
.join-box{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px 28px;border-radius:18px;background:linear-gradient(100deg,rgba(255,150,40,.18),rgba(140,60,255,.10)),var(--panel);
  box-shadow:0 0 0 1px rgba(255,194,58,.22),0 14px 40px rgba(0,0,0,.45)}
.join-box h2{margin:0 0 4px;font:500 22px/1.2 var(--fb);color:#fff}
.join-box p{margin:0;color:var(--text)}
.join-act{display:flex;gap:10px;flex-wrap:wrap}

/* ── σελίδα παιχνιδιού ── */
.gpage{position:relative;isolation:isolate;padding-bottom:30px}
.gp-bg{position:absolute;left:0;right:0;top:0;height:640px;z-index:-1;background:var(--art) center 30%/cover;opacity:.32;filter:blur(3px) saturate(1.2);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%)}
.crumbs{padding-top:22px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:#fff}
.gp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 14px}
.gp-head h1{margin:0;font-size:clamp(26px,3.6vw,38px);line-height:1.15}
.gp-head .act{display:flex;gap:6px;flex-wrap:wrap}
.gp-main{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;background:rgba(18,15,24,.72);padding:16px;border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 20px 50px rgba(0,0,0,.5)}
.hl{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:12px}
.hl>video,.hl>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.hl>img{cursor:zoom-in}
.hl-nav{position:absolute;top:50%;z-index:2;width:40px;height:72px;margin-top:-36px;border:0;cursor:pointer;background:rgba(0,0,0,.45);color:#fff;font-size:34px;line-height:1;opacity:0;transition:opacity .15s}
.hl:hover .hl-nav,.hl-nav:focus-visible{opacity:1}
.hl-nav.prev{left:0}.hl-nav.next{right:0}
.strip{display:flex;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#5b4a72 transparent}
.strip button{position:relative;flex:0 0 clamp(96px,17%,140px);aspect-ratio:16/9;padding:0;border:0;border-radius:8px;background:#000 center/cover;cursor:pointer;opacity:.7;
  outline:2px solid transparent;outline-offset:-2px;scroll-snap-align:start;transition:opacity .15s}
.strip button:hover{opacity:1}
.strip button.on{opacity:1;outline-color:var(--blue)}
.strip .vid::after{content:"";position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/16px no-repeat;border:1.5px solid #fff}
.gp-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.gp-side .capsule{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:12px}
.gp-short{margin:0;color:#e4ddec;font-size:14px;line-height:1.5}
.facts{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:12.5px}
.facts dt{color:var(--dim);text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;padding-top:1px}
.facts dd{margin:0;color:#ffd27a}
.facts dd a:hover{color:#fff}
.side-tags-l{font-size:12px;color:var(--dim);margin-bottom:-6px}
.buy{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;padding:18px 18px 18px 22px;
  background:linear-gradient(100deg,rgba(255,150,40,.20),rgba(140,60,255,.12));border-radius:18px;box-shadow:0 0 0 1px rgba(255,194,58,.25),0 14px 40px rgba(0,0,0,.4)}
.buy h2{margin:0;font:400 20px/1.3 var(--fb);color:#fff}
.buy h2 .gt{font-size:1.05em;margin-left:.2em}
.buy .free{display:block;margin-top:4px;font-size:13px;color:#d9cfe3}
.buy-act{display:flex;gap:8px;flex-wrap:wrap}
.gp-cols{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:28px;margin-top:30px}
.about{border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.about p{margin:0 0 14px;color:#bdb4c9;font-size:15px;line-height:1.65}
.about ul{margin:0;padding-left:20px;color:#bdb4c9}
.about li::marker{color:var(--blue)}
.about li{margin:4px 0}
.more{border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.more a{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;padding:6px;margin:0 -6px 4px;border-radius:10px;transition:background .15s}
.more a:hover{background:rgba(255,255,255,.07)}
.more img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.more b{display:block;margin-bottom:3px;font-weight:400;color:#fff;font-size:13px}
.more small{color:var(--muted);font-size:12px}
.sticky-play{display:none}

/* ── footer ── */
.gf{margin-top:60px;padding:28px 0 40px;background:var(--deep);border-top:1px solid rgba(255,194,58,.14);color:var(--muted);font-size:13px}
.gf-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gf .logo .wm{--fs:18px}
.gf .logo svg{width:26px;height:26px}
.gf nav{display:flex;gap:18px;flex-wrap:wrap}
.gf nav button{background:none;border:0;padding:0;cursor:pointer;color:var(--muted)}
.gf nav button:hover{color:#fff}

/* ── παράθυρα ── */
.dlg{width:min(480px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;border:0;border-radius:18px;background:#18131f;color:var(--text);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.75);overflow:auto}
.dlg::backdrop{background:rgba(0,0,0,.7)}
.dlg[open]{animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dlg-x{position:absolute;z-index:3;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;cursor:pointer;font-size:16px}
.dlg-x:hover{background:rgba(255,255,255,.18)}
.dlg-body{padding:22px 24px 24px}
.dlg h3{margin:0 0 14px;font:400 23px/1.2 var(--fb);color:#fff}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:#110d17}
.tabs button{height:50px;border:0;background:none;cursor:pointer;color:var(--muted);font:500 14px/1 var(--fb);letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid transparent}
.tabs button.on{color:#fff;border-bottom-color:var(--blue);background:#18131f}
.why{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(255,194,58,.12);color:#ffe7b8;font-size:14px}
.form label{display:block;margin-bottom:12px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:#ffd27a}
.form label small{text-transform:none;letter-spacing:0;color:var(--muted);font-size:12px}
.form input[type=email],.form input[type=password],.form input[type=text]{display:block;width:100%;height:42px;margin-top:5px;padding:0 14px;border:1px solid #30283b;border-radius:10px;
  background:#221b2c;color:#fff;font:400 15px var(--fb);text-transform:none;letter-spacing:0}
.form input:focus{outline:none;border-color:var(--blue);background:#2a2235;box-shadow:0 0 0 3px rgba(255,194,58,.15)}
.pw{position:relative}
.pw button{position:absolute;right:6px;bottom:6px;height:30px;padding:0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--tag-t);cursor:pointer;font-size:12px}
.check{display:flex!important;gap:10px;align-items:flex-start;text-transform:none!important;letter-spacing:0!important;color:var(--text)!important;font-size:14px!important;cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:#ffb52e;flex:none}
.err{min-height:20px;margin:2px 0 8px;color:#ff7b7b;font-size:13.5px}
.fine{margin:14px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.alt{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.acct-id{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.acct-id .avatar{width:48px;height:48px;font-size:22px}
.acct-id b{display:block;color:#fff;font-size:17px;font-weight:500}
.acct-id small{color:var(--muted)}
.box{padding:12px 14px;margin-bottom:14px;border-radius:12px;background:rgba(0,0,0,.25)}
.box h4{margin:0 0 8px;font:500 12.5px/1 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.follow-list{list-style:none;margin:0;padding:0}
.follow-list li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.follow-list li:first-child{border-top:0}
.follow-list img{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.follow-list span{flex:1;color:#fff}
.follow-list .empty{color:var(--muted);border:0}
.acct-act{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.danger{color:#ff8b8b}
.danger:hover{color:#ffb1b1}
.sh-top{position:relative;aspect-ratio:16/7;background:#000 center/cover}
.sh-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,19,31,0) 35%,#18131f)}
.sh-qr{display:flex;align-items:center;gap:16px;padding:12px;margin-bottom:14px;border-radius:12px;background:rgba(0,0,0,.25)}
.sh-qr img{width:140px;height:140px;flex:none;padding:7px;border-radius:10px;background:#fff}
.sh-qr b{display:block;margin-bottom:3px;color:#fff;font-weight:500}
.sh-or{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sh-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.sh-btns a,.sh-btns button{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 8px;border:0;border-radius:999px;background:rgba(255,255,255,.07);cursor:pointer;font-size:14px;color:#e6dff0}
.sh-btns a:hover,.sh-btns button:hover{background:rgba(255,255,255,.15);color:#fff}
.sh-btns i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.sh-btns .native{grid-column:1/-1}
.sh-link{display:flex;gap:6px}
.sh-link input{flex:1;min-width:0;height:38px;padding:0 12px;border:1px solid #30283b;border-radius:999px;background:#221b2c;color:#e6dff0;font:14px var(--fb)}
.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.94)}
.lightbox::backdrop{background:#000}
.lightbox img{width:100%;height:100%;object-fit:contain}
.lightbox .hl-nav{opacity:.8;width:56px;height:96px;margin-top:-48px;font-size:44px}
.prose p{margin:0 0 10px;font-size:14.5px;color:var(--text)}
.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));z-index:200;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  padding:11px 18px;border-radius:999px;background:#2a2235;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:.2s;font-size:14.5px}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── μικρότερες οθόνες ── */
@media (max-width:1300px){ .feat-arrow.prev{left:-6px} .feat-arrow.next{right:-6px} .feat-arrow{width:38px} }
@media (max-width:980px){
  .feat-card,.gp-main,.gp-cols{grid-template-columns:1fr}
  .feat-thumbs{grid-template-columns:repeat(4,1fr)}
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap,.cap.wide,.cap-grid.filtered .cap{grid-column:span 1}
  .cap.wide:first-child{grid-column:1/-1}
  .gp-side .capsule{display:none}
}
@media (max-width:640px){
  .gh-in{gap:10px;height:56px}
  .gh-nav{display:none}
  .logo .wm{--fs:15px}
  .logo svg{width:28px;height:28px}
  .gh-user .t{display:none}
  .feat{padding-top:16px}
  .feat-thumbs{display:none}
  .feat-arrow{top:calc((100vw - 2 * var(--gut)) * 9 / 32);width:34px;height:64px;margin-top:-32px;font-size:34px}
  .feat-side{padding:14px}
  .feat-side h3{font-size:23px}
  .cap-grid{grid-template-columns:1fr}
  .cap.wide:first-child{grid-column:auto}
  .cap-info{min-height:0}
  .play-dot{opacity:1;transform:none;width:60px;height:60px;margin:-30px 0 0 -30px}
  .play-dot svg{width:24px;height:24px}
  .gp-main{padding:8px;margin:0 calc(-1 * var(--gut))}
  .hl-nav{opacity:.85;width:32px;height:56px;margin-top:-28px;font-size:28px}
  .strip button{flex-basis:28%}
  .buy{padding:14px}
  .buy-act,.buy-act .btn-green,.buy-act .btn-blue{width:100%}
  .sticky-play{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--gut) max(10px,env(safe-area-inset-bottom));
    background:rgba(12,10,16,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 rgba(255,194,58,.16),0 -6px 18px rgba(0,0,0,.4)}
  .sticky-play .btn-green{flex:1}
  .gpage{padding-bottom:80px}
  .join-box{padding:20px}
  .join-act,.join-act .btn-green,.join-act .btn-blue{width:100%}
  .sh-btns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-qr img{width:112px;height:112px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ── κάρτα: όλη η κάρτα ανοίγει τη σελίδα του παιχνιδιού, το «Παίξε» ανοίγει το παιχνίδι ── */
.cap-link::after{content:"";position:absolute;inset:0;z-index:1}
.cap-link:focus-visible{outline:none}
.cap:has(.cap-link:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.cap .btn-green{position:relative;z-index:2}

/* ── intro (boot screen), μόνο αν οριστεί βίντεο ── */
.intro{position:fixed;inset:0;z-index:300;background:#000;display:grid;place-items:center}
.intro video{width:100%;height:100%;object-fit:contain}
.intro button{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));height:40px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;cursor:pointer;font-weight:500}
.tabs{grid-template-columns:1fr 1fr 50px}
#authDlg .dlg-x{top:8px;right:8px}
#all,#home .feat{scroll-margin-top:72px}

/* ── τίτλοι παιχνιδιών: Bungee· ασημί χρώμιο στις κάρτες (χρυσό όταν περνάει το ποντίκι), χρυσό μέταλλο με βάθος στους μεγάλους ── */
.gt{font-family:var(--title);font-weight:400;letter-spacing:.02em;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(180deg,#fff 0%,#f3eef8 44%,#b8adc9 52%,#e9e3f1 74%,#fff 100%);filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.cap:hover .gt,.more a:hover .gt,.feat-side h3:hover .gt{background-image:linear-gradient(180deg,#fffbe0 0%,#ffe27a 34%,#ffb52e 52%,#e8771a 54%,#ffaa36 80%,#ffd76a 100%)}
.gt.big{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.9) 50%,transparent 60%),
    linear-gradient(180deg,#fffbe0 0%,#ffe27a 30%,#ffb52e 52%,#e8771a 54%,#ffaa36 78%,#ffd76a 100%);
  background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:rs-shine 7s ease-in-out infinite;
  filter:drop-shadow(1px 1px 0 #7a3006) drop-shadow(1px 1px 0 #4e1804) drop-shadow(1px 1px 0 #2c0d02) drop-shadow(0 0 16px rgba(255,150,40,.32))}