/* ═══════════════════════════════════════════════════════════
   ABILAND — pagina de intrare (alegerea jocului)
   Fundal care leagă cele două identități: violetul din Toddler
   Worlds la stânga, verdele din Puzzle la dreapta.
   ═══════════════════════════════════════════════════════════ */

:root{
  --tw:#6F3FFD; --tw-deep:#3C1BA3;
  --pz:#2FA36B; --pz-deep:#14663F;
  --ink:#140E28;
  --cream:#FFFCF6;
  --font-display:'Gluten','Comfortaa','Nunito',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[lang="ru"]{--font-display:'Comfortaa','Nunito',system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  font-family:var(--font-body);font-size:17px;line-height:1.6;color:#fff;
  background:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.08;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:8px}
.skip-link{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--ink);padding:10px 18px;border-radius:99px;z-index:50}
.skip-link:focus{left:16px}

/* fundal */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 700px at 12% 18%, rgba(111,63,253,.55), transparent 62%),
  radial-gradient(1100px 700px at 88% 78%, rgba(47,163,107,.55), transparent 62%),
  linear-gradient(160deg,#1B1140 0%,#140E28 45%,#0C2318 100%);
}
.bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}
.bg .g1{width:520px;height:520px;background:#8B5CFF;top:-160px;left:-120px}
.bg .g2{width:520px;height:520px;background:#35DD92;bottom:-180px;right:-120px}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}

/* antet */
.top{padding:26px 0 0}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.word{font-family:var(--font-display);font-size:22px;letter-spacing:.06em;font-weight:800}
.langs{display:flex;flex-wrap:wrap;gap:4px}
.langs a{
  display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:99px;
  font-size:13px;font-weight:800;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07);transition:background .18s,color .18s;
}
.langs a:hover{background:rgba(255,255,255,.18);color:#fff}
.langs a[aria-current="true"]{background:#fff;color:var(--ink)}
.langs .flag{font-size:15px;line-height:1}

/* miez */
.main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:52px 0 40px}
.head{text-align:center;max-width:640px;margin:0 auto 46px}
.kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 16px;border-radius:99px;background:rgba(255,255,255,.12);margin-bottom:20px;
}
/* Titlul apare cu majuscule, dar textul rămâne scris normal în HTML:
   așa cititoarele de ecran nu îl silabisesc literă cu literă. */
h1{font-size:clamp(36px,5.6vw,62px);margin-bottom:16px;text-transform:uppercase;letter-spacing:.005em}
.lead{font-size:17px;color:rgba(255,255,255,.72)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}

.card{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:38px 30px 30px;border-radius:34px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),border-color .3s,background .3s,box-shadow .3s;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  transition:opacity .3s;background:radial-gradient(520px 260px at 50% 0%,var(--glow),transparent 70%);
}
.card:hover{transform:translateY(-8px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.card:hover::before{opacity:.5}
.card > *{position:relative}

.icon{
  width:152px;height:152px;border-radius:40px;margin-bottom:22px;
  box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .3s cubic-bezier(.34,1.5,.64,1);
}
.card:hover .icon{transform:scale(1.05) rotate(-2deg)}
.name{font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1.15;margin-bottom:10px}
.tag{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:99px;margin-bottom:16px;
  background:var(--chip);color:#fff;
}
.desc{font-size:15.5px;color:rgba(255,255,255,.72);max-width:30ch;margin-bottom:26px;flex:1}
.go{
  display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:99px;
  font-family:var(--font-display);font-weight:600;font-size:17px;color:#fff;
  background:linear-gradient(180deg,var(--btn) 0%,var(--btn-deep) 100%);
  box-shadow:0 6px 0 var(--btn-shadow), 0 14px 30px rgba(0,0,0,.35);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
}
.card:hover .go{transform:translateY(-2px);box-shadow:0 8px 0 var(--btn-shadow), 0 20px 40px rgba(0,0,0,.4)}
.go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.card-tw{--glow:rgba(111,63,253,.55);--chip:rgba(111,63,253,.85);--btn:#6F3FFD;--btn-deep:#3C1BA3;--btn-shadow:rgba(30,12,90,.7)}
.card-pz{--glow:rgba(47,163,107,.55);--chip:rgba(47,163,107,.9);--btn:#2FA36B;--btn-deep:#14663F;--btn-shadow:rgba(8,58,34,.7)}

/* link pe tot cardul, fara a pierde butonul vizual */
.card-link{position:absolute;inset:0;border-radius:inherit;z-index:2}

/* subsol */
.foot{padding:26px 0 34px;font-size:13.5px;color:rgba(255,255,255,.5)}
.foot-inner{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;text-align:center}
.foot a{transition:color .2s}
.foot a:hover{color:#fff}
.foot .sep{opacity:.35}

@media (max-width:760px){
  /* Pe telefon cele două iconițe trebuie să fie aproape de marginea de sus,
     deci selectorul de limbă se reduce la steaguri. Numele rămâne în DOM,
     ascuns vizual, ca să fie citit în continuare de cititoarele de ecran. */
  .langs a span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .langs a{padding:8px 11px}
  .langs .flag{font-size:19px}
  .top-inner{flex-direction:row;align-items:center}
  .top{padding:16px 0 0}
  .main{padding:22px 0 20px}
  .head{margin-bottom:24px}
  .kicker{margin-bottom:14px}
  h1{font-size:clamp(27px,7.6vw,36px);margin-bottom:12px}
  .lead{font-size:15px}
  .word{font-size:19px}
  .cards{grid-template-columns:1fr;gap:18px}
  .card{padding:30px 24px 26px}
  .icon{width:118px;height:118px;border-radius:32px;margin-bottom:18px}
  .main{padding:34px 0 28px}
  .head{margin-bottom:32px}
  .desc{margin-bottom:22px}
  .top-inner{flex-direction:column;align-items:center;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* Pe ecrane joase (laptop mic, fereastră nemaximizată) cele două iconițe
   trebuie să încapă fără derulare — asta e tot rostul paginii. */
@media (min-width:761px) and (max-height:840px){
  .main{padding:26px 0 20px}
  .head{margin-bottom:26px}
  .kicker{margin-bottom:13px;padding:5px 14px}
  h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:11px}
  .lead{font-size:15.5px}
  .card{padding:26px 26px 24px}
  .icon{width:112px;height:112px;border-radius:30px;margin-bottom:16px}
  .name{font-size:22px;margin-bottom:8px}
  .tag{margin-bottom:12px}
  .desc{font-size:14.5px;margin-bottom:18px}
  .go{padding:12px 26px;font-size:16px}
  .top{padding:18px 0 0}
  .foot{padding:18px 0 22px}
}