:root{
  --gold:#c9952a;--gold2:#f0c050;--gold3:#8b6914;
  --brown:#4a2c0a;--brownMid:#7a4a1e;
  --teal:#1a6a7a;--orange:#d06010;
  --green:#27ae60;--red:#e74c3c;
  --shadow:0 6px 32px rgba(80,40,0,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Nunito',sans-serif;
  background:linear-gradient(170deg,#9ecfed 0%,#c8e8f8 30%,#e8f4ff 55%,#fdf2d0 100%);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;overflow:hidden;
}

/* ── CLOUDS ── */
.bg-clouds{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cl{position:absolute;background:rgba(255,255,255,.7);border-radius:50px}
.cl::before,.cl::after{content:'';position:absolute;background:rgba(255,255,255,.7);border-radius:50%}
.cl1{width:160px;height:48px;top:8%;left:-20%;animation:clMove 35s linear infinite}
.cl1::before{width:70px;height:70px;top:-35px;left:25px}
.cl1::after{width:55px;height:55px;top:-25px;left:75px}
.cl2{width:120px;height:36px;top:22%;right:-15%;animation:clMove 28s linear infinite reverse;animation-delay:-8s}
.cl2::before{width:55px;height:55px;top:-27px;left:18px}
.cl2::after{width:44px;height:44px;top:-18px;left:58px}
.cl3{width:90px;height:28px;top:70%;left:10%;animation:clMove 42s linear infinite;opacity:.5}
.cl3::before{width:44px;height:44px;top:-22px;left:12px}
.cl3::after{width:35px;height:35px;top:-15px;left:42px}
@keyframes clMove{from{transform:translateX(0)}to{transform:translateX(130vw)}}

/* ── FRAME ── */
.frame{
  position:relative;z-index:1;
  width:min(480px,100vw);max-height:min(820px,100dvh);
  background:linear-gradient(168deg,#fffbf0 0%,#fef4d0 60%,#f8e8a0 100%);
  border-radius:24px;
  box-shadow:var(--shadow),0 2px 6px rgba(150,100,10,.15),inset 0 1px 0 rgba(255,255,200,.6);
  overflow:hidden;display:flex;flex-direction:column;
}
.frame-border{
  position:absolute;inset:0;pointer-events:none;z-index:20;
  background:
    linear-gradient(to right,rgba(201,149,42,.6) 0,rgba(201,149,42,.6) 4px,transparent 4px),
    linear-gradient(to left,rgba(201,149,42,.6) 0,rgba(201,149,42,.6) 4px,transparent 4px),
    linear-gradient(to bottom,rgba(201,149,42,.6) 0,rgba(201,149,42,.6) 4px,transparent 4px),
    linear-gradient(to top,rgba(201,149,42,.6) 0,rgba(201,149,42,.6) 4px,transparent 4px);
  border-radius:24px;
}
.frame-border::after{
  content:'';position:absolute;inset:8px;
  border:2px dashed rgba(201,149,42,.3);border-radius:18px;
}
.corner{position:absolute;font-size:28px;z-index:25;filter:drop-shadow(0 2px 4px rgba(150,100,0,.4));pointer-events:none;line-height:1}
.c-tl{top:6px;left:6px}.c-tr{top:6px;right:6px}.c-bl{bottom:6px;left:6px}.c-br{bottom:6px;right:6px}

/* ── TOPBAR ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px 8px;flex-shrink:0;position:relative;z-index:5;
  background:linear-gradient(90deg,rgba(255,248,220,.95),rgba(255,235,150,.85));
  border-bottom:2px solid rgba(201,149,42,.35);
}
.logo-wrap img{height:26px;width:auto;display:block}
.lang-btns{display:flex;gap:5px}
.lang-btn{
  padding:4px 10px;border:2px solid rgba(201,149,42,.4);border-radius:20px;
  background:rgba(255,248,220,.7);font-family:'Nunito',sans-serif;
  font-size:11px;font-weight:800;color:var(--brownMid);cursor:pointer;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.lang-btn:hover{background:rgba(255,235,150,.9);border-color:var(--gold)}
.lang-btn.active{
  background:linear-gradient(135deg,var(--gold3),var(--gold));
  color:#fff;border-color:var(--gold);
  box-shadow:0 2px 8px rgba(140,90,0,.3);text-shadow:0 1px 2px rgba(60,30,0,.4);
}

/* ── BANNER ── */
.banner{
  background:linear-gradient(90deg,#7a5010,#c9952a,#f0d060,#c9952a,#7a5010);
  padding:10px 20px 8px;text-align:center;flex-shrink:0;
  box-shadow:0 4px 14px rgba(120,70,0,.3);
}
.banner-inner{
  display:inline-block;
  background:linear-gradient(180deg,rgba(255,255,180,.25),transparent);
  border:2px solid rgba(255,240,160,.5);border-radius:30px;padding:4px 24px;
}
.banner-text{
  font-family:'Russo One',sans-serif;font-size:clamp(14px,4vw,20px);color:#fff;
  text-shadow:1px 2px 4px rgba(60,30,0,.6),0 0 20px rgba(255,220,100,.4);letter-spacing:.5px;
}

/* ── SCROLL ── */
.content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:rgba(180,120,40,.3);border-radius:4px}

/* ── SCREENS ── */
.screen{display:none;animation:fadeSlide .35s ease}
.screen.active{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── INTRO ── */
.intro-wrap{padding:14px 18px 20px;text-align:center}
.intro-animals{display:flex;align-items:flex-end;justify-content:center;margin:6px 0 10px}
.elephant{position:relative;width:110px;height:100px}
.el-body{position:absolute;bottom:0;left:10px;width:80px;height:65px;background:radial-gradient(ellipse at 40% 35%,#d8d8e8,#a8a8c0);border-radius:40px 35px 30px 35px;box-shadow:2px 4px 10px rgba(0,0,0,.15)}
.el-head{position:absolute;bottom:45px;left:5px;width:50px;height:46px;background:radial-gradient(ellipse at 45% 35%,#d8d8e8,#a8a8c0);border-radius:50% 45% 30% 35%}
.el-ear{position:absolute;bottom:55px;left:-2px;width:28px;height:38px;background:radial-gradient(ellipse,#c8b8c8,#a090a8);border-radius:50%;transform:rotate(-10deg)}
.el-ear-inner{position:absolute;bottom:58px;left:1px;width:20px;height:28px;background:#e8b8c8;border-radius:50%;transform:rotate(-10deg);opacity:.7}
.el-trunk{position:absolute;bottom:28px;left:42px;width:14px;height:32px;background:linear-gradient(180deg,#b8b8d0,#a0a0b8);border-radius:0 0 8px 8px;transform-origin:top center;animation:trunkSwing 3s ease-in-out infinite}
@keyframes trunkSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(15deg)}}
.el-eye{position:absolute;bottom:66px;left:28px;width:8px;height:8px;background:#333;border-radius:50%;box-shadow:0 0 0 2px white}
.el-leg{position:absolute;width:16px;height:22px;background:linear-gradient(180deg,#a8a8c0,#9090a8);border-radius:4px 4px 6px 6px;bottom:0}
.el-l1{left:18px}.el-l2{left:36px}.el-l3{left:50px}.el-l4{left:68px}
.el-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:900;color:var(--brown);white-space:nowrap}
.mouse-wrap{position:relative;width:65px;height:75px;margin-left:-8px}
.mouse{position:absolute;bottom:0;left:8px;width:42px;height:38px;background:radial-gradient(ellipse at 45% 40%,#d4a87a,#b08050);border-radius:45% 45% 40% 40%;box-shadow:2px 3px 8px rgba(0,0,0,.15)}
.mouse-head{position:absolute;bottom:28px;left:14px;width:32px;height:30px;background:radial-gradient(ellipse,#d4a87a,#b08050);border-radius:50%}
.mouse-ear1,.mouse-ear2{position:absolute;bottom:48px;width:14px;height:16px;background:#c898a0;border-radius:50%}
.mouse-ear1{left:12px}.mouse-ear2{left:22px}
.mouse-nose{position:absolute;bottom:36px;left:28px;width:6px;height:5px;background:#e09090;border-radius:50%}
.mouse-eye{position:absolute;bottom:40px;left:20px;width:5px;height:5px;background:#333;border-radius:50%;box-shadow:0 0 0 1.5px white}
.mouse-tail{position:absolute;bottom:5px;right:0;width:22px;height:3px;background:#c09070;border-radius:3px;transform:rotate(-20deg)}
.mouse-leg{position:absolute;width:8px;height:14px;background:#b07848;border-radius:3px 3px 4px 4px;bottom:0}
.mouse-l1{left:14px}.mouse-l2{left:26px}
.mouse-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:900;color:var(--brown);white-space:nowrap}
.intro-title{font-family:'Russo One',sans-serif;font-size:clamp(20px,5vw,26px);color:var(--brown);margin:22px 0 4px;text-shadow:1px 1px 0 rgba(255,255,200,.8)}
.intro-sub{font-size:clamp(13px,3.2vw,15px);color:var(--orange);font-weight:800;margin-bottom:4px}
.intro-desc{font-size:12px;color:var(--brownMid);margin-bottom:14px;line-height:1.5}
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.cat-card{
  background:linear-gradient(135deg,rgba(255,248,210,.9),rgba(255,235,140,.7));
  border:2px solid var(--gold2);border-radius:14px;padding:10px 8px;
  cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:center;
  box-shadow:0 3px 10px rgba(180,120,10,.15);
}
.cat-card:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 7px 18px rgba(180,120,10,.25)}
.cat-card:active{transform:scale(.97)}
.cat-icon{font-size:26px;margin-bottom:3px}
.cat-name{font-size:11px;font-weight:800;color:var(--brown);line-height:1.3}
.btn-start{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2),var(--gold));
  color:#fff;border:none;border-radius:40px;padding:13px 40px;
  font-size:17px;font-weight:900;font-family:'Nunito',sans-serif;cursor:pointer;
  box-shadow:0 6px 22px rgba(140,90,0,.4),inset 0 1px 0 rgba(255,255,200,.3);
  text-shadow:1px 1px 3px rgba(60,30,0,.5);transition:transform .15s,box-shadow .15s;
}
.btn-start:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 30px rgba(140,90,0,.5)}

/* ── LEARN ── */
.learn-wrap{padding:14px 16px 20px}
.learn-cat-title{text-align:center;font-size:18px;font-weight:900;color:var(--brown);margin-bottom:12px}
.pair-list{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.pair-row{
  display:flex;align-items:center;
  background:linear-gradient(135deg,rgba(255,250,230,.95),rgba(255,240,180,.8));
  border:2px solid rgba(201,149,42,.4);border-radius:14px;overflow:hidden;
  box-shadow:0 3px 10px rgba(150,90,10,.12);transition:transform .2s;
}
.pair-row:hover{transform:translateX(3px)}
.pair-side{flex:1;display:flex;flex-direction:column;align-items:center;padding:9px 6px;gap:3px}
.pair-emoji{font-size:32px;line-height:1}
.pair-word{font-size:13px;font-weight:800;color:var(--brown);text-align:center}
.pair-divider{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--gold);font-size:20px;font-weight:900;flex-shrink:0}
.pair-answer-side{background:rgba(201,149,42,.08)}
.pair-answer-word{color:var(--teal)!important}
.nav-row{display:flex;gap:8px;justify-content:center}
.btn-nav{flex:1;max-width:160px;padding:11px 14px;border:none;border-radius:22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:transform .15s}
.btn-back{background:linear-gradient(135deg,#e8d8a0,#d4c080);color:var(--brown);box-shadow:0 3px 10px rgba(150,100,0,.2)}
.btn-next{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;box-shadow:0 3px 12px rgba(150,90,0,.3);text-shadow:1px 1px 2px rgba(60,30,0,.4)}
.btn-nav:hover{transform:translateY(-2px) scale(1.03)}
.divider-line{height:1px;background:linear-gradient(90deg,transparent,rgba(201,149,42,.4),transparent);margin:10px 0}

/* ── GAME ── */
.game-header{padding:8px 16px 4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.score-gems{display:flex;gap:3px}
.gem{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;background:rgba(201,149,42,.12);border:1.5px solid rgba(201,149,42,.3);transition:all .3s}
.gem.earned{background:linear-gradient(135deg,#f0c050,#c9952a);border-color:var(--gold);animation:gemPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes gemPop{0%{transform:scale(.5)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.progress-track{height:8px;flex:1;margin:0 10px;background:rgba(180,120,10,.15);border-radius:10px;overflow:hidden}
.progress-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--gold3),var(--gold),var(--gold2));transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px rgba(201,149,42,.5)}
.q-counter{font-size:12px;font-weight:800;color:var(--teal);min-width:42px;text-align:right}
.game-wrap{padding:4px 14px 14px}
.cat-badge{display:inline-block;font-size:12px;font-weight:800;color:var(--brownMid);background:rgba(201,149,42,.12);border-radius:20px;padding:3px 14px;border:1.5px solid rgba(201,149,42,.3)}
.cat-badge-wrap{text-align:center;margin-bottom:8px}
.q-area{text-align:center;margin-bottom:12px}
.q-label{font-size:13px;font-weight:700;color:var(--brownMid);margin-bottom:5px}
.q-emoji-big{font-size:clamp(56px,14vw,72px);display:block;margin:0 auto 6px;animation:emojiIn .5s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));line-height:1}
@keyframes emojiIn{from{transform:scale(.4) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.q-word{font-family:'Russo One',sans-serif;font-size:clamp(26px,6.5vw,34px);color:var(--teal);display:block;text-shadow:2px 2px 0 rgba(255,255,255,.8);animation:wordIn .4s cubic-bezier(.34,1.56,.64,1) .1s both}
@keyframes wordIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:8px}
.opt{
  background:linear-gradient(145deg,#fffbee,#fff3c8);
  border:3px solid rgba(201,149,42,.45);border-radius:16px;
  padding:13px 7px 11px;display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;font-family:'Nunito',sans-serif;font-size:clamp(12px,3vw,15px);font-weight:800;
  color:var(--brown);transition:transform .15s,box-shadow .15s,border-color .15s;
  box-shadow:0 4px 14px rgba(150,90,10,.14);-webkit-tap-highlight-color:transparent;
  user-select:none;position:relative;overflow:hidden;
}
.opt::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,200,.4),transparent);pointer-events:none}
.opt:hover:not(:disabled){transform:translateY(-4px) scale(1.03);box-shadow:0 8px 22px rgba(150,90,10,.22);border-color:var(--gold)}
.opt:active:not(:disabled){transform:scale(.95)}
.opt-emoji{font-size:clamp(32px,8vw,42px);line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.14))}
.opt.correct{background:linear-gradient(145deg,#c8f0d8,#a0e0b8);border-color:var(--green);animation:correctPop .5s cubic-bezier(.34,1.56,.64,1)}
.opt.wrong{background:linear-gradient(145deg,#fad8d8,#f0a8a8);border-color:var(--red);animation:wrongShake .4s ease}
.opt.reveal{background:linear-gradient(145deg,#d0f0e0,#a8dfbe);border-color:var(--green);opacity:.8}
@keyframes correctPop{0%{transform:scale(1)}40%{transform:scale(1.1)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(5px)}}
.feedback-row{min-height:30px;text-align:center;font-size:clamp(16px,4vw,20px);font-weight:900;transition:opacity .25s}
.feedback-row.ok{color:var(--green)}.feedback-row.no{color:var(--red)}

/* ── RESULT ── */
.result-wrap{padding:20px 18px 22px;text-align:center}
.result-trophy{font-size:72px;display:block;margin:0 auto 8px;animation:trophyBounce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes trophyBounce{from{transform:scale(.3) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.result-title{font-family:'Russo One',sans-serif;font-size:26px;color:var(--brown);margin-bottom:5px}
.result-sub{font-size:14px;color:var(--brownMid);margin-bottom:12px;line-height:1.5}
.result-stars{font-size:34px;margin-bottom:5px;letter-spacing:4px;animation:starsIn .6s ease .3s both}
@keyframes starsIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.result-score{font-size:18px;font-weight:900;color:var(--teal);margin-bottom:18px}
.result-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-result{padding:11px 26px;border:none;border-radius:30px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s}
.btn-again{background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));color:#fff;box-shadow:0 5px 18px rgba(140,90,0,.35);text-shadow:1px 1px 2px rgba(60,30,0,.4)}
.btn-menu{background:linear-gradient(135deg,#e8d8a0,#d4c080);color:var(--brown);box-shadow:0 3px 10px rgba(150,100,0,.2)}
.btn-result:hover{transform:translateY(-2px) scale(1.04)}

/* ── CONFETTI ── */
.conf{position:fixed;pointer-events:none;z-index:999;top:-12px;border-radius:2px;animation:confFall linear forwards}
@keyframes confFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(105vh) rotate(800deg)}}