:root{
  --bg1:#eee3ff; --bg2:#ffe4f3; --bg3:#dff7ff; --bg4:#fff6de;
  --ink:#241d47; --ink-soft:#5b527a; --ink-faint:#8a80ab;
  --glass:rgba(255,255,255,.38); --glass-brd:rgba(255,255,255,.75);
  --glass-deep:rgba(255,255,255,.55);
  --violet:#a78bfa; --mint:#5eead4; --peach:#fca5a5; --sky:#7dd3fc; --gold:#fbbf24; --rose:#f9a8d4;
  --shadow-soft:0 20px 60px -20px rgba(88,66,150,.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',sans-serif; color:var(--ink);
  min-height:100vh; overflow-x:hidden;
  background:linear-gradient(135deg,var(--bg1),var(--bg3) 45%, var(--bg2) 75%, var(--bg4));
  background-attachment:fixed;
  position:relative;
}
h1,h2,h3,.font-display{font-family:'Sora',sans-serif;}

/* ---------- Ambient background ---------- */
.orbfield{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.orb{position:absolute; border-radius:50%; filter:blur(50px); opacity:.55; animation:drift 26s ease-in-out infinite;}
.orb.o1{width:420px; height:420px; background:radial-gradient(circle,var(--violet),transparent 70%); top:-10%; left:-8%; animation-duration:30s;}
.orb.o2{width:360px; height:360px; background:radial-gradient(circle,var(--mint),transparent 70%); bottom:-12%; right:-6%; animation-duration:24s; animation-delay:-6s;}
.orb.o3{width:300px; height:300px; background:radial-gradient(circle,var(--peach),transparent 70%); top:40%; right:12%; animation-duration:34s; animation-delay:-12s;}
.orb.o4{width:280px; height:280px; background:radial-gradient(circle,var(--sky),transparent 70%); bottom:20%; left:8%; animation-duration:28s; animation-delay:-4s;}
.orb.o5{width:220px; height:220px; background:radial-gradient(circle,var(--gold),transparent 70%); top:10%; right:35%; animation-duration:22s; animation-delay:-9s;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-40px) scale(1.08);} 66%{transform:translate(-25px,25px) scale(.95);}}
.rays{position:fixed; inset:-50%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.5) 3deg, transparent 10deg, transparent 40deg, rgba(255,255,255,.35) 43deg, transparent 55deg, transparent 90deg, rgba(255,255,255,.4) 93deg, transparent 105deg, transparent 160deg, rgba(255,255,255,.3) 163deg, transparent 175deg, transparent 260deg, rgba(255,255,255,.4) 263deg, transparent 275deg);
  animation:spin 90s linear infinite; opacity:.5; mix-blend-mode:soft-light;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Layout shell ---------- */
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px;}
header.top{position:sticky; top:0; z-index:50; backdrop-filter:blur(18px); background:rgba(255,255,255,.35); border-bottom:1px solid var(--glass-brd);}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer;}
.brand .halo{width:38px; height:38px; border-radius:50%; background:conic-gradient(from 90deg,var(--violet),var(--sky),var(--mint),var(--gold),var(--peach),var(--violet)); box-shadow:0 0 22px rgba(167,139,250,.7); display:flex; align-items:center; justify-content:center;}
.brand .halo::after{content:"✦"; color:#fff; font-size:16px;}
.brand .name{font-family:'Sora',sans-serif; font-weight:800; font-size:17px; letter-spacing:.3px; white-space:nowrap;}
.brand .name span{color:var(--violet);}
@media(max-width:640px){.brand .name{font-size:14px;}}
.stats-pill{display:flex; gap:14px; align-items:center; font-size:13px; color:var(--ink-soft); font-weight:700;}
.stats-pill .chip{background:var(--glass); border:1px solid var(--glass-brd); padding:7px 14px; border-radius:999px; backdrop-filter:blur(10px); display:flex; align-items:center; gap:6px;}
.stats-pill .chip b{color:var(--ink); font-family:'Sora',sans-serif;}

.lang-select{position:relative;}
.lang-btn{background:var(--glass); border:1px solid var(--glass-brd); padding:7px 12px; border-radius:999px; backdrop-filter:blur(10px); display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-soft); cursor:pointer; font-family:inherit;}
.lang-btn:hover{color:var(--ink);}
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--glass-brd); border-radius:14px; box-shadow:0 12px 32px rgba(36,29,71,.18); padding:6px; min-width:190px; max-height:340px; overflow-y:auto; z-index:60; display:none;}
.lang-menu.open{display:block;}
.lang-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:9px; font-size:13.5px; color:var(--ink-soft); cursor:pointer; font-weight:600;}
.lang-opt:hover{background:var(--bg1);}
.lang-opt.active{background:var(--bg1); color:var(--ink); font-weight:800;}
.lang-opt .native{color:var(--ink-faint); font-weight:500; font-size:12px;}
html[dir="rtl"] .lang-menu{right:auto; left:0;}
@media(max-width:640px){ .lang-btn span.lbl{display:none;} }

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px; text-align:center; position:relative;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); background:var(--glass); border:1px solid var(--glass-brd); padding:8px 18px; border-radius:999px; backdrop-filter:blur(10px); margin-bottom:22px;}
.hero h1{font-size:clamp(34px,6vw,64px); font-weight:800; line-height:1.05; letter-spacing:-1px;
  background:linear-gradient(100deg,#4c3a8a,#8b5fbf 30%,#3a7ca8 60%,#4c3a8a);
  -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 7s linear infinite;}
@keyframes shine{to{background-position:200% center;}}
.hero p.sub{max-width:620px; margin:20px auto 0; font-size:17px; color:var(--ink-soft); line-height:1.6;}
.hero-cta{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn{font-family:'Sora',sans-serif; font-weight:700; font-size:14.5px; padding:14px 28px; border-radius:999px; border:1px solid var(--glass-brd); cursor:pointer; backdrop-filter:blur(10px); transition:transform .25s ease, box-shadow .25s ease; display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:linear-gradient(120deg,var(--violet),var(--sky)); color:#fff; box-shadow:0 12px 30px -8px rgba(122,110,240,.65);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px -10px rgba(122,110,240,.8);}
.btn-ghost{background:var(--glass); color:var(--ink);}
.btn-ghost:hover{transform:translateY(-3px); background:var(--glass-deep);}

/* ---------- Category filter ---------- */
.filters{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:38px 0 30px;}
.filter-chip{font-size:13px; font-weight:700; padding:9px 17px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-brd); cursor:pointer; backdrop-filter:blur(8px); color:var(--ink-soft); transition:all .2s;}
.filter-chip.active{background:linear-gradient(120deg,var(--violet),var(--sky)); color:#fff; box-shadow:0 8px 20px -6px rgba(122,110,240,.6);}

/* ---------- Game grid / cards (signature 3D glass tilt) ---------- */
#gameGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; padding-bottom:70px;}
.gcard{position:relative; border-radius:24px; padding:24px 22px; cursor:pointer; overflow:hidden;
  background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft); transform-style:preserve-3d; transition:box-shadow .3s ease, transform .1s ease;
  min-height:190px; display:flex; flex-direction:column; justify-content:space-between;
}
.gcard::before{content:""; position:absolute; inset:0; border-radius:24px; padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.gcard .glow{position:absolute; width:150px; height:150px; border-radius:50%; filter:blur(38px); opacity:.55; top:-40px; right:-30px; pointer-events:none; transition:opacity .3s;}
.gcard:hover{box-shadow:0 26px 70px -18px rgba(88,66,150,.5);}
.gcard:hover .glow{opacity:.85;}
.gcard .emoji{font-size:34px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.12)); transform:translateZ(30px);}
.gcard .tag{font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); margin-top:14px;}
.gcard h3{font-size:18px; margin-top:4px; font-weight:700; letter-spacing:-.2px;}
.gcard p{font-size:12.8px; color:var(--ink-soft); margin-top:6px; line-height:1.45;}
.gcard .play{margin-top:14px; font-size:12.5px; font-weight:800; color:var(--violet); display:flex; align-items:center; gap:5px;}

/* ---------- Game stage ---------- */
#stage{display:none; position:relative; z-index:1; max-width:900px; margin:0 auto; padding:30px 24px 90px;}
.stage-card{background:var(--glass-deep); border:1px solid var(--glass-brd); border-radius:28px; padding:32px; backdrop-filter:blur(20px); box-shadow:var(--shadow-soft); position:relative; overflow:hidden;}
.stage-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; gap:14px; flex-wrap:wrap;}
.stage-head h2{font-size:24px; font-weight:800;}
.stage-meta{font-size:13px; color:var(--ink-soft); margin-top:4px;}
.back-btn{font-family:'Sora',sans-serif; font-size:13px; font-weight:700; background:var(--glass); border:1px solid var(--glass-brd); padding:9px 16px; border-radius:999px; cursor:pointer; backdrop-filter:blur(8px); color:var(--ink);}
.scorebar{display:flex; gap:10px; flex-wrap:wrap;}
.pill{background:var(--glass); border:1px solid var(--glass-brd); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:800; font-family:'Sora',sans-serif;}
.pill.gold{color:#b8860b; background:rgba(251,191,36,.22);}
.pill.mint{color:#0f766e; background:rgba(94,234,212,.25);}
.pill.rose{color:#a3266b; background:rgba(249,168,212,.3);}

/* Quiz engine */
.qtext{font-size:19px; font-weight:700; line-height:1.5; margin-bottom:22px;}
.qopts{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:560px){.qopts{grid-template-columns:1fr;}}
.opt{background:var(--glass); border:1px solid var(--glass-brd); border-radius:16px; padding:15px 18px; text-align:left; cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); transition:all .18s; backdrop-filter:blur(8px);}
.opt:hover{transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(88,66,150,.4);}
.opt.correct{background:rgba(94,234,212,.45); border-color:#5eead4; box-shadow:0 0 24px rgba(94,234,212,.6);}
.opt.wrong{background:rgba(252,165,165,.45); border-color:#fca5a5; box-shadow:0 0 24px rgba(252,165,165,.5);}
.opt:disabled{cursor:default;}
.feedback{margin-top:16px; font-size:13.5px; color:var(--ink-soft); min-height:20px; font-weight:600;}
.progress-track{height:8px; background:rgba(255,255,255,.4); border-radius:99px; overflow:hidden; margin-top:18px; border:1px solid var(--glass-brd);}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--violet),var(--sky)); border-radius:99px; transition:width .4s ease;}

/* Memory match */
.matchgrid{display:grid; gap:12px;}
.mcell{aspect-ratio:1; border-radius:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; font-weight:700; font-size:13px; background:linear-gradient(135deg,var(--violet),var(--sky)); color:#fff; box-shadow:0 10px 24px -10px rgba(88,66,150,.5); transition:transform .35s; user-select:none;}
.mcell.flip{background:var(--glass-deep); color:var(--ink); border:1px solid var(--glass-brd);}
.mcell.matched{background:rgba(94,234,212,.35); border:1px solid var(--mint); color:var(--ink); cursor:default;}
.mcell.shake{animation:shake .4s;}
@keyframes shake{20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}

/* Word games */
.letterbank{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px 0;}
.tile{width:44px; height:44px; border-radius:12px; background:var(--glass-deep); border:1px solid var(--glass-brd); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:18px; cursor:pointer; box-shadow:0 8px 18px -8px rgba(88,66,150,.4);}
.tile.used{opacity:.25; cursor:default;}
.answer-slots{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; min-height:52px;}
.slot{width:44px; height:44px; border-radius:12px; border:2px dashed var(--glass-brd); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:18px; background:rgba(255,255,255,.25);}
.hangfig{font-size:15px; line-height:1.7; text-align:center; white-space:pre; font-family:monospace; color:var(--ink); background:rgba(255,255,255,.3); border-radius:16px; padding:14px; margin-bottom:16px;}
.wordline{font-size:26px; letter-spacing:8px; text-align:center; font-family:'Sora',sans-serif; font-weight:800; margin:18px 0;}
.keyboard{display:flex; flex-wrap:wrap; gap:7px; justify-content:center;}
.key{width:36px; height:40px; border-radius:9px; background:var(--glass-deep); border:1px solid var(--glass-brd); font-weight:800; cursor:pointer; font-family:'Sora',sans-serif;}
.key.used-good{background:rgba(94,234,212,.5);}
.key.used-bad{background:rgba(252,165,165,.5); opacity:.6;}

.wsgrid{display:grid; gap:2px; margin:0 auto; user-select:none; touch-action:none;}
.wscell{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:rgba(255,255,255,.35); border-radius:4px; cursor:pointer; font-family:'Sora',sans-serif;}
.wscell.sel{background:rgba(167,139,250,.55); color:#fff;}
.wscell.found{background:rgba(94,234,212,.6); color:#0f4f47;}
.wswords{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; justify-content:center;}
.wsword{padding:6px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-brd); font-size:12.5px; font-weight:700;}
.wsword.done{background:rgba(94,234,212,.45); text-decoration:line-through; color:#0f4f47;}

/* Ordering */
.seqlist{display:flex; flex-direction:column; gap:10px; margin:18px 0;}
.seqitem{display:flex; align-items:center; gap:12px; background:var(--glass-deep); border:1px solid var(--glass-brd); border-radius:14px; padding:13px 16px; font-weight:700; font-size:14px;}
.seqitem .num{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--sky)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-family:'Sora',sans-serif;}
.seqbtns{display:flex; gap:6px; margin-left:auto;}
.seqbtns button{width:30px; height:30px; border-radius:8px; border:1px solid var(--glass-brd); background:rgba(255,255,255,.5); cursor:pointer; font-weight:800;}

/* Bingo */
.bingogrid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:16px 0;}
.bcell{aspect-ratio:1; display:flex; align-items:center; justify-content:center; text-align:center; font-size:10.5px; font-weight:700; padding:4px; background:var(--glass-deep); border:1px solid var(--glass-brd); border-radius:8px; cursor:pointer; line-height:1.2;}
.bcell.marked{background:linear-gradient(135deg,var(--violet),var(--sky)); color:#fff;}
.bcell.free{background:rgba(251,191,36,.4); font-weight:800;}

/* End screen */
.endscreen{text-align:center; padding:20px 0;}
.endscreen .big{font-size:56px; margin-bottom:6px;}
.endscreen h3{font-size:24px; font-weight:800; margin-bottom:8px;}
.endscreen p{color:var(--ink-soft); margin-bottom:22px;}

/* Reference speed round */
.refbox{text-align:center;}
.reftext{font-size:22px; font-weight:800; font-family:'Sora',sans-serif; margin:18px 0;}
.refinput{width:100%; max-width:340px; padding:14px 18px; border-radius:14px; border:1px solid var(--glass-brd); background:rgba(255,255,255,.5); font-size:16px; font-weight:700; text-align:center; font-family:'Manrope',sans-serif;}

footer{position:relative; z-index:1; text-align:center; padding:40px 24px 60px; color:var(--ink-faint); font-size:12.5px;}
footer b{color:var(--ink-soft);}
.chip#soundToggle{user-select:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
::selection{background:var(--violet); color:#fff;}