:root{--bg:#06090f;--panel:#0c111b;--panel2:#101827;--text:#f4f7fb;--muted:#94a3b8;--line:#202b3d;--blue:#4ea1ff;--cyan:#6ee7f9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(6,9,15,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.brand{font-weight:900;letter-spacing:.08em;font-size:1.2rem}.brand span{color:var(--blue)}nav{display:flex;gap:28px;font-size:.92rem;color:#d8e0eb}nav a:hover{color:#fff}.nav-actions{display:flex;gap:10px}.lang,.menu{border:1px solid var(--line);background:#0d1522;color:#fff;border-radius:10px;padding:9px 13px;cursor:pointer}.menu{display:none}.hero{min-height:760px;height:92vh;display:grid;place-items:center;position:relative;overflow:hidden;padding:100px 6vw 50px}.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,12,.95),rgba(4,7,12,.55) 58%,rgba(4,7,12,.82)),linear-gradient(0deg,var(--bg),transparent 45%)}.hero-inner{position:relative;width:min(1180px,100%);margin:auto}.eyebrow,.kicker{font-size:.78rem;letter-spacing:.22em;color:var(--cyan);font-weight:800}.hero h1{font-size:clamp(2.7rem,6vw,6rem);line-height:1.03;max-width:950px;margin:18px 0 24px}.hero p{font-size:clamp(1rem,1.6vw,1.25rem);max-width:760px;color:#c5d0de}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{padding:13px 20px;border:1px solid #33445d;border-radius:12px;background:rgba(15,23,38,.72);font-weight:700;transition:.2s}.btn:hover{transform:translateY(-2px);border-color:var(--blue)}.btn.primary{background:linear-gradient(135deg,#2679db,#4ea1ff);border-color:transparent}.stats{max-width:1180px;margin:-52px auto 0;position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(12,17,27,.93);border:1px solid var(--line);border-radius:18px;overflow:hidden}.stats div{padding:26px;text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{display:block;font-size:1.25rem}.stats span{color:var(--muted);font-size:.88rem}.section{max-width:1280px;margin:auto;padding:110px 5vw}.section.alt{max-width:none;background:#090e17}.section.alt>*{max-width:1180px;margin-left:auto;margin-right:auto}.section h2,.contact h2{font-size:clamp(2rem,4vw,3.5rem);margin:10px 0 12px}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end}.section-head p,.review-grid p{color:var(--muted)}.search-wrap input{width:min(350px,80vw);padding:13px 16px;border-radius:12px;background:#0c1320;border:1px solid var(--line);color:white;font-size:1rem}.letters{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}.letters button{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#0d1420;color:#bdc7d5;cursor:pointer}.letters button.active,.letters button:hover{background:#1f6fc9;color:white;border-color:#3d91ef}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.game-card{min-height:190px;border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;background:radial-gradient(circle at 70% 20%,#15345f,#0b111b 62%);isolation:isolate}.game-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.game-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,7,12,.98),rgba(3,7,12,.12) 75%)}.game-card .info{position:absolute;left:17px;right:17px;bottom:15px}.game-card h3{margin:0;font-size:1rem}.subs{font-size:.76rem;color:#c4cedb;margin-top:6px}.empty{text-align:center;color:var(--muted);padding:50px}.steps,.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}.steps article,.features article{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:25px}.steps b{color:var(--blue);font-size:1.4rem}.steps p,.features p{color:var(--muted);font-size:.92rem}.features{grid-template-columns:repeat(3,1fr)}.review-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:55px;align-items:center}.video-card{position:relative;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#000;cursor:pointer;box-shadow:0 25px 80px rgba(0,0,0,.35)}.video-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.84}.video-card span{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#fff;color:#111;font-size:1.4rem}.faq{margin-top:35px;display:grid;gap:10px}.faq details{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:0 20px}.faq summary{padding:19px 0;cursor:pointer;font-weight:750}.faq p{color:var(--muted);margin:0 0 20px}.payment-list{columns:2}.contact{padding:100px 5vw;text-align:center;background:radial-gradient(circle at center,#16385f,#080d15 62%)}.contact p{color:#c0cbd9}.contact .cta{justify-content:center}footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding:65px 7vw;background:#05080d;border-top:1px solid var(--line)}footer p{max-width:500px;color:var(--muted)}footer h4{margin-top:0}footer div a:not(.brand){display:block;color:#aeb9c8;margin:8px 0}.modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.78);padding:5vh 4vw;overflow:auto}.modal.show{display:block}.modal-box{max-width:850px;margin:auto;background:#0c121c;border:1px solid var(--line);border-radius:18px;padding:40px;position:relative}.modal-box>button{position:absolute;right:18px;top:14px;border:0;background:none;color:#fff;font-size:2rem;cursor:pointer}.modal-box p{color:var(--muted)}@media(max-width:900px){nav{position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;background:#080d15;padding:22px 5vw}.nav.open nav{display:flex}.menu{display:block}.stats{margin:-25px 4vw 0;grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}.game-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr 1fr}.review-grid{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.features{grid-template-columns:1fr}footer{grid-template-columns:1fr 1fr}}@media(max-width:580px){.hero{min-height:700px}.hero h1{font-size:2.6rem}.stats div{padding:18px 8px}.stats strong{font-size:1rem}.section{padding:80px 5vw}.game-grid{display:block}.game-card{min-height:76px;margin-bottom:9px}.game-card img{width:125px;right:0;left:auto}.game-card:after{background:linear-gradient(90deg,#07101a 55%,rgba(7,16,26,.4))}.game-card .info{position:relative;left:auto;right:auto;bottom:auto;padding:16px;max-width:75%}.subs{display:none}.steps{grid-template-columns:1fr}.payment-list{columns:1}footer{grid-template-columns:1fr}.bg-video{display:none}.hero{background:radial-gradient(circle at 75% 20%,#143d70,#06090f 55%)}}


/* 2026-08 micro-adjustments */
.hero h1{position:relative;overflow:hidden;text-wrap:balance}
.hero h1 .hero-brand,.hero h1 .hero-divider,.hero h1 .hero-accent{display:inline-block;opacity:0;transform:translateY(24px);animation:heroRise .7s cubic-bezier(.2,.75,.2,1) forwards}
.hero h1 .hero-divider{animation-delay:.12s}
.hero h1 .hero-accent{animation-delay:.2s;background:linear-gradient(110deg,#fff 5%,#9fcfff 43%,#fff 55%,#70b7ff 88%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation-name:heroRise,heroShine;animation-duration:.7s,1.25s;animation-delay:.2s,.85s;animation-timing-function:cubic-bezier(.2,.75,.2,1),ease;animation-fill-mode:forwards}
.hero p{opacity:0;transform:translateY(15px);animation:heroSubIn .8s .55s ease forwards}
@keyframes heroRise{to{opacity:1;transform:none}}
@keyframes heroSubIn{to{opacity:1;transform:none}}
@keyframes heroShine{from{background-position:100% 0}to{background-position:-100% 0}}
.game-card{aspect-ratio:460/215;min-height:0}
.game-card img{object-position:center center;transform:scale(1.015);transition:transform .35s ease,filter .35s ease}
.game-card:hover img{transform:scale(1.055);filter:saturate(1.05)}
.game-placeholder{position:absolute;inset:0;z-index:-2;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 65% 24%,rgba(78,161,255,.35),transparent 30%),linear-gradient(135deg,#101c2d,#07101a 62%,#0e2947)}
.game-placeholder:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.06) 45%,transparent 65%),repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.025) 39px 40px);opacity:.8}
.game-placeholder span{font-size:3.1rem;font-weight:950;line-height:1;color:rgba(255,255,255,.18);letter-spacing:.05em}
.game-placeholder small{font-size:.66rem;letter-spacing:.28em;color:rgba(255,255,255,.44);margin-top:8px}
.game-card.no-image:after{background:linear-gradient(0deg,rgba(3,7,12,.96),rgba(3,7,12,.04) 85%)}
@media(max-width:580px){.hero h1 .hero-divider{display:none}.hero h1 .hero-accent{display:block;margin-top:.12em}.game-card{aspect-ratio:auto;min-height:82px}.game-card img{height:100%;object-fit:cover;object-position:center center}.game-placeholder{width:125px;left:auto}.game-placeholder span{font-size:2rem}.game-placeholder small{font-size:.52rem}}
@media(prefers-reduced-motion:reduce){.hero h1 .hero-brand,.hero h1 .hero-divider,.hero h1 .hero-accent,.hero p{opacity:1;transform:none;animation:none}.game-card img{transition:none}}

/* 2026-08 final refinement: continuous hero motion, bilingual game names, series popovers */
.hero h1{
  max-width:none;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  overflow:visible;
  font-size:clamp(1.05rem,4.45vw,5.2rem);
  letter-spacing:-.035em;
  text-wrap:nowrap;
}
.hero h1 .hero-brand,.hero h1 .hero-accent{
  opacity:1;
  transform:none;
  animation:none;
}
.hero h1 .hero-brand,.hero h1 .hero-accent{
  display:inline;
  background:linear-gradient(105deg,#f8fbff 0%,#8fbde9 25%,#ffffff 43%,#6ba8e5 62%,#f9fcff 82%,#9fcaf0 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:heroGradientFlow 6s linear infinite,heroGlowPulse 3.8s ease-in-out infinite;
}
.hero h1:after{
  content:"";
  position:absolute;
  top:-20%;bottom:-20%;left:-22%;
  width:12%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  filter:blur(2px);
  pointer-events:none;
  animation:heroSweep 5.5s ease-in-out infinite;
}
.hero p{opacity:1;transform:none;animation:heroSubtlePulse 5s ease-in-out infinite}
@keyframes heroGradientFlow{to{background-position:-280% 0}}
@keyframes heroGlowPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(114,181,244,.16))}50%{filter:drop-shadow(0 0 14px rgba(114,181,244,.42))}}
@keyframes heroSweep{0%,58%{left:-22%;opacity:0}64%{opacity:.8}82%{left:112%;opacity:.25}100%{left:112%;opacity:0}}
@keyframes heroSubtlePulse{0%,100%{color:#c5d0de}50%{color:#eef5fd}}
.game-card{overflow:visible}
.game-card>img,.game-card>.game-placeholder,.game-card:after{border-radius:15px}
.game-card .info{z-index:2}
.game-card h3{line-height:1.28}
.en-name{font-size:.72rem;color:#aebbd0;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.series-badge{display:inline-flex;align-items:center;border:1px solid rgba(110,231,249,.46);background:rgba(7,22,35,.76);color:#8cecf8;border-radius:999px;padding:2px 7px;margin-bottom:6px;font-size:.58rem;font-weight:900;letter-spacing:.14em}
.series-toggle{display:none;border:0;background:none;color:#b9c8da;padding:5px 0 0;font:inherit;font-size:.72rem;cursor:pointer}
.series-panel{position:absolute;z-index:30;left:calc(100% + 12px);top:50%;width:min(310px,78vw);padding:16px 17px;background:rgba(8,14,23,.97);border:1px solid rgba(103,172,238,.46);border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.55);backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-8px,-50%) scale(.98);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.game-card:nth-child(4n+3) .series-panel,.game-card:nth-child(4n+4) .series-panel{left:auto;right:calc(100% + 12px);transform:translate(8px,-50%) scale(.98)}
.game-card.is-series:hover .series-panel,.game-card.is-series:focus-within .series-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%) scale(1)}
.series-panel strong{display:block;color:#eef7ff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
.series-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.series-panel li{position:relative;padding-left:14px;color:#cfdae8;font-size:.82rem;line-height:1.35}
.series-panel li:before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#68b9ff;box-shadow:0 0 8px rgba(104,185,255,.7)}
.series-panel li small{display:block;color:#788ca5;font-size:.68rem;margin-top:2px}
@media(max-width:900px),(hover:none){
  .series-toggle{display:block}
  .series-panel,.game-card:nth-child(4n+3) .series-panel,.game-card:nth-child(4n+4) .series-panel{position:relative;left:auto;right:auto;top:auto;width:100%;margin-top:12px;opacity:0;visibility:hidden;display:none;pointer-events:none;transform:none;box-shadow:none;background:rgba(3,8,14,.82)}
  .game-card.is-series.series-open{height:auto;min-height:190px}
  .game-card.is-series.series-open .series-panel{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:none}
}
@media(max-width:580px){
  .hero h1{font-size:clamp(.98rem,4.55vw,1.42rem);letter-spacing:-.045em}
  .hero p{animation-duration:6s}
  .game-card{overflow:hidden}
  .game-card.is-series.series-open{padding-bottom:12px}
  .game-card.is-series.series-open .info{max-width:100%}
  .game-card.is-series.series-open img,.game-card.is-series.series-open .game-placeholder{height:82px}
  .game-card.is-series.series-open .series-panel{margin:4px 12px 0;width:calc(100% - 24px)}
  .en-name{font-size:.67rem;max-width:82%}
}
@media(prefers-reduced-motion:reduce){
 .hero h1 .hero-brand,.hero h1 .hero-accent,.hero h1:after,.hero p{animation:none!important;filter:none}
}


/* 2026-08 v4 refinement: layered series popovers, mobile quick actions, two-line hero */
.mobile-quick-actions{display:none}

/* Keep series popovers above every filtered card. */
.game-grid{position:relative;overflow:visible}
.game-card{z-index:1}
.game-card.is-series:hover,
.game-card.is-series:focus-within,
.game-card.is-series.series-open{z-index:1000}
.series-panel{z-index:10000}

/* Two-line hero hierarchy. */
.hero h1{
  width:fit-content;
  max-width:min(1100px,100%);
  white-space:normal;
  overflow:visible;
  font-size:clamp(4rem,7.2vw,7rem);
  line-height:.92;
  letter-spacing:-.045em;
}
.hero h1 .hero-brand,
.hero h1 .hero-accent{display:block}
.hero h1 .hero-brand{
  font-size:1em;
  letter-spacing:.035em;
  line-height:.9;
}
.hero h1 .hero-accent{
  width:max-content;
  max-width:100%;
  margin-top:.28em;
  font-size:.46em;
  line-height:1.12;
  letter-spacing:-.02em;
}

@media(max-width:900px){
  .nav{
    height:auto;
    min-height:72px;
    flex-wrap:wrap;
    row-gap:10px;
    padding:12px 5vw 13px;
  }
  .nav>nav{top:100%}
  .mobile-quick-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    flex:0 0 100%;
    width:100%;
  }
  .mobile-quick-actions>.btn{
    display:flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:10px 14px;
  }
  .mobile-quick-actions>div{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .mobile-quick-actions>div .btn{
    display:flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:10px 14px;
  }
  .hero{padding-top:205px}
  .hero h1{font-size:clamp(3.1rem,12vw,5.2rem)}
  .hero h1 .hero-accent{font-size:.43em}
}

@media(max-width:580px){
  .hero{min-height:760px;padding-top:210px}
  .hero h1{
    font-size:clamp(3rem,16vw,4.35rem);
    letter-spacing:-.04em;
  }
  .hero h1 .hero-brand{letter-spacing:.02em}
  .hero h1 .hero-accent{
    width:100%;
    font-size:clamp(1.18rem,6.2vw,1.65rem);
    line-height:1.15;
    margin-top:.42em;
    white-space:normal;
  }
}

/* v5 catalog guidance */
.card-contact-overlay{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:24px;text-align:center;background:linear-gradient(180deg,rgba(5,9,15,.2),rgba(5,9,15,.88));opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;pointer-events:none;border-radius:15px}
.card-contact-overlay span{max-width:250px;padding:10px 13px;border:1px solid rgba(129,190,255,.45);border-radius:10px;background:rgba(6,12,21,.84);box-shadow:0 12px 30px rgba(0,0,0,.35);color:#edf7ff;font-size:.82rem;font-weight:750;line-height:1.45;backdrop-filter:blur(10px)}
.game-card:not(.is-series):hover .card-contact-overlay,.game-card:not(.is-series):focus-within .card-contact-overlay{opacity:1;visibility:visible}
.game-card:not(.is-series){cursor:default}
.mobile-card-hint{display:none;color:#8fa4bc;font-size:.68rem;line-height:1.25;margin-top:5px}
.series-contact{margin-top:12px;padding-top:11px;border-top:1px solid rgba(125,170,215,.22);color:#9fc7ed;font-size:.73rem;line-height:1.4}
@media(max-width:580px){
  .card-contact-overlay{display:none!important}
  .mobile-card-hint{display:block}
  .game-card:not(.is-series) .info{padding-bottom:13px}
}
@media(prefers-reduced-motion:reduce){.card-contact-overlay{transition:none}}
.seo-intro{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}