:root{
  --bg:#faf7ff;--ink:#1b1638;--muted:#6b6788;--line:rgba(27,22,56,.09);--card:#fff;
  --o1:#ff7a45;--o2:#ff4fa3;--v1:#7b5cff;--v2:#45c7ff;
  --font:"Outfit","Noto Sans SC",-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="zh-CN"] body{letter-spacing:.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* soft background lines like the reference, but light */
.bgLines{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1200px 600px at 85% -10%,rgba(255,122,69,.16),transparent 60%),
   radial-gradient(900px 600px at -10% 30%,rgba(123,92,255,.14),transparent 60%),
   repeating-radial-gradient(ellipse 160% 90% at 120% 120%,transparent 0 38px,rgba(123,92,255,.07) 38px 39px)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(20px,calc((100% - 1180px)/2));
  background:rgba(250,247,255,.75);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.brand .dot{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,var(--o1),var(--o2));box-shadow:inset 0 0 0 6px rgba(255,255,255,.0),0 4px 10px rgba(255,79,163,.35);position:relative}
.brand .dot:after{content:"";position:absolute;inset:7px;border-radius:50%;border:2.5px solid #fff}
.menu{display:flex;gap:30px;font-size:15px;font-weight:500}
.menu a{color:var(--muted);transition:color .2s}.menu a:hover{color:var(--ink)}
.right{display:flex;align-items:center;gap:12px}
.langs{display:flex;padding:3px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.langs button{border:0;background:none;font:600 13px var(--font);color:var(--muted);padding:6px 11px;border-radius:999px;cursor:pointer}
.langs button.on{background:var(--ink);color:#fff}
.cta{padding:11px 22px;border-radius:999px;font-weight:600;font-size:15px;color:#fff;background:linear-gradient(90deg,var(--o1),var(--o2));box-shadow:0 8px 20px -6px rgba(255,79,163,.55);white-space:nowrap;transition:transform .2s}
.cta:hover{transform:translateY(-2px)}

/* hero */
.hero{position:relative;max-width:1180px;margin:0 auto;padding:56px 20px 40px;text-align:center}
.hero h1{margin:0;font-weight:500;font-size:clamp(44px,8.4vw,98px);line-height:1.02;letter-spacing:-.035em}
.lead{max-width:600px;margin:22px auto 0;color:var(--muted);font-size:clamp(17px,2vw,20px)}
.badge{position:absolute;left:max(20px,4%);top:40px;width:132px;height:132px}
.badge svg{width:100%;height:100%;animation:spin 18s linear infinite}
.badge text{font:600 9.6px var(--font);letter-spacing:.18em;fill:var(--ink)}
.badge img{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;filter:drop-shadow(0 6px 8px rgba(40,20,120,.25));animation:bob 3s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-6px) rotate(6deg)}}
.side{position:absolute;right:max(20px,2%);bottom:120px;width:240px;margin:0;text-align:left;font-size:14px;color:var(--muted)}

/* fan of cards */
.fan{position:relative;height:560px;margin:56px auto 0;max-width:820px}
.card{position:absolute;bottom:0;width:300px;height:470px;padding:22px;border-radius:34px;overflow:hidden;text-align:left;color:var(--ink);
  box-shadow:0 30px 60px -20px rgba(40,20,120,.35),inset 0 0 0 1px rgba(255,255,255,.6);transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.c1{left:50%;margin-left:-410px;transform:rotate(-12deg) translateY(30px);background:linear-gradient(160deg,#7fe3ff 0%,#9b8cff 55%,#c9a6ff 100%)}
.c2{left:50%;margin-left:-160px;z-index:2;height:520px;width:320px;background:linear-gradient(170deg,#fff4ec 0%,#ffc7a1 45%,#ff8a7a 75%,#ff5fae 100%)}
.c3{left:50%;margin-left:110px;transform:rotate(12deg) translateY(30px);background:linear-gradient(160deg,#5b7cff 0%,#8f5cff 55%,#ff7fd0 100%);color:#fff}
.fan:hover .c1{transform:rotate(-15deg) translate(-20px,20px)}
.fan:hover .c3{transform:rotate(15deg) translate(20px,20px)}
.card:hover{z-index:3}
.cHead{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cHead h3{margin:0;font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.cHead p{margin:4px 0 0;font-size:15px;opacity:.75}
.pill{flex:none;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.75)}
.pill.hot{background:var(--ink);color:#fff}
.cMeta{position:relative;z-index:2;margin:12px 0 0;font-size:14px;opacity:.85}
.art{position:absolute;pointer-events:none}
.shot{left:50%;bottom:-120px;width:210px;margin-left:-105px;border-radius:26px;transform:rotate(-4deg);box-shadow:0 18px 36px rgba(20,20,80,.35)}
.rosa{left:50%;bottom:-6px;width:290px;margin-left:-160px;filter:drop-shadow(0 14px 18px rgba(120,30,60,.35))}
.cat{right:6px;bottom:6px;width:110px;filter:drop-shadow(0 8px 10px rgba(40,20,60,.35))}
.city{left:0;right:0;bottom:0;width:100%;height:68%;object-fit:cover;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}

/* game rows */
.games2{max-width:1180px;margin:60px auto 0;padding:0 20px;display:grid;gap:28px}
.game{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:28px;border-radius:36px;background:var(--card);box-shadow:0 20px 50px -30px rgba(40,20,120,.35),0 0 0 1px var(--line)}
.game.alt{grid-template-columns:1fr 1.1fr}
.game.alt .gArt{order:2}
.gImg{width:100%;border-radius:24px;aspect-ratio:448/400;object-fit:cover}
.gArt{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:448/400}
.gBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gRosa{position:absolute;left:50%;bottom:-4%;height:96%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 12px 16px rgba(0,0,0,.4))}
.gTxt .tag{display:inline-block;font-size:13px;font-weight:600;color:var(--o2);background:rgba(255,79,163,.1);padding:5px 12px;border-radius:999px}
.gTxt h2{margin:12px 0 10px;font-size:clamp(34px,4.4vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1}
.gTxt p{margin:0 0 22px;color:var(--muted)}
.store{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px}
.store:before{content:"";width:14px;height:16px;background:linear-gradient(135deg,#45c7ff,#7b5cff 50%,#ff4fa3);clip-path:polygon(0 0,100% 50%,0 100%)}

/* about */
.about{max-width:1180px;margin:70px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.about h3{margin:0 0 6px;font-size:21px;font-weight:600;letter-spacing:-.01em}
.about p{margin:0;color:var(--muted);font-size:16px}

footer{max-width:1180px;margin:80px auto 0;padding:26px 20px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:14px;color:var(--muted)}
footer a:hover{color:var(--ink)}

/* legal */
.legal{max-width:760px;margin:0 auto;padding:60px 20px 40px}
.legal h1{font-size:clamp(38px,6vw,58px);font-weight:600;letter-spacing:-.03em;margin:0}
.legal .updated{color:var(--muted);margin:10px 0 40px}
.legal h2{font-size:23px;font-weight:600;margin:40px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:#2e2a4f}
.legal ul{padding-left:22px}.legal li{margin:6px 0}
.legal a{color:var(--v1);text-decoration:underline}
.legal .box{background:#fff;border-radius:20px;padding:20px 22px;box-shadow:0 0 0 1px var(--line)}
.menu a.active{color:var(--ink);font-weight:600}

/* contact sheet */
.cmodal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.cbackdrop{position:absolute;inset:0;background:rgba(27,22,56,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .28s}
.csheet{position:relative;width:min(460px,100%);background:#fff;border-radius:28px;padding:30px 26px 24px;box-shadow:0 30px 80px -20px rgba(27,22,56,.45);display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .28s,transform .32s cubic-bezier(.2,.8,.2,1)}
.cmodal.open .cbackdrop{opacity:1}.cmodal.open .csheet{opacity:1;transform:none}
.csheet h2{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em}
.csub{margin:-6px 0 4px;color:var(--muted);font-size:15px}
.csheet label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.csheet input,.csheet select,.csheet textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;outline:none;resize:vertical}
.csheet input:focus,.csheet select:focus,.csheet textarea:focus{border-color:var(--o2);box-shadow:0 0 0 4px rgba(255,79,163,.15)}
.csend{margin-top:4px;font:inherit;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(90deg,var(--o1),var(--o2));border:0;border-radius:999px;padding:13px 20px;cursor:pointer}
.csend:disabled{opacity:.6}
.cx{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:0;background:var(--line);color:var(--ink);font-size:20px;cursor:pointer}
.cstatus{margin:0;min-height:20px;font-size:14px;text-align:center}.cstatus.ok{color:#1f9d55}.cstatus.err{color:#d6336c}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* responsive */
@media (max-width:980px){
  .side{position:static;width:auto;max-width:520px;margin:30px auto 0;text-align:center}
  .badge{width:96px;height:96px;top:24px}.badge img{width:38px;height:38px;margin:-19px}
  .fan{transform:scale(.8);transform-origin:50% 100%;margin-top:10px;height:520px}
}
@media (max-width:760px){
  .menu{display:none}
  .top{padding:12px 16px}.brand{font-size:16px}.cta{padding:9px 14px;font-size:13px}.langs button{padding:5px 8px;font-size:12px}
  .hero{padding-top:36px}.badge{position:static;margin:0 auto 18px}
  .fan{transform:scale(.62);height:520px;margin-top:-40px;margin-bottom:-180px}
  .game,.game.alt{grid-template-columns:1fr;gap:20px;padding:18px}.game.alt .gArt{order:0}
  .about{grid-template-columns:1fr}
}
@media (max-width:420px){.fan{transform:scale(.5);margin-bottom:-240px;margin-top:-90px}.cta{display:none}}
@media (prefers-reduced-motion:reduce){.badge svg,.badge img{animation:none}}

/* fixes: badge, side text, fan scaling on phones */
.badge{position:absolute}
.side{position:static!important;width:auto!important;max-width:560px;margin:34px auto 0!important;text-align:center!important;font-size:16px!important}
@media (max-width:980px){.fan{transform:scale(.8);transform-origin:50% 0;margin-bottom:-104px}}
@media (max-width:760px){
  .badge{position:relative!important;left:auto!important;top:auto!important;margin:0 auto 16px}
  .fan{transform:scale(.5)!important;transform-origin:50% 0!important;margin:40px auto -260px!important;width:820px;left:50%;margin-left:-410px!important}
}
@media (max-width:420px){.fan{transform:scale(.44)!important;margin-bottom:-292px!important}}
@media (min-width:981px){.side{margin-top:80px!important}}

/* WORDVIA — главная; остальные игры размыты «скоро» */
.c2.wv{background:linear-gradient(170deg,#fff7d6 0%,#ffd36b 35%,#9b7bff 75%,#6a4cff 100%)!important}
.c2.wv .shot{width:236px;margin-left:-118px;bottom:-60px;transform:rotate(-3deg)}
.card.locked>*:not(.lockTag){filter:blur(7px) saturate(.8);opacity:.85}
.lockTag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;box-shadow:0 6px 16px rgba(40,20,120,.25)}
.c3.locked .lockTag{transform:translate(-50%,-50%) rotate(-12deg)}.c1.locked .lockTag{transform:translate(-50%,-50%) rotate(12deg)}
.game.locked{position:relative;overflow:hidden}
.game.locked>*{filter:blur(8px);opacity:.7;pointer-events:none}
.game.locked:after{content:attr(data-soon);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 24px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:17px;white-space:nowrap}

.cmodal[hidden]{display:none!important}

/* language dropdown */
.langSel{position:relative;display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;height:38px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px}
.langSel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:600 14px var(--font);color:var(--ink);padding:0 22px 0 0;cursor:pointer;outline:none}
.langSel:after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);pointer-events:none}
html[lang="ru"] .hero h1,html[lang="uk"] .hero h1,html[lang="fr"] .hero h1{font-size:clamp(38px,7.2vw,86px)}

html[lang="ru"],html[lang="uk"]{--font:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif}
html[lang="ru"] .hero h1,html[lang="uk"] .hero h1{font-weight:600;letter-spacing:-.04em}
.legal h1{line-height:1.08}