/* ==========================================================
   O'YINLAR — KLASSIK ERTAKONA ANIMATSIYA USLUBI
   ========================================================== */
:root{
  --gf-ink:#2f372f;
  --gf-muted:#677267;
  --gf-paper:#fff8e8;
  --gf-paper-deep:#eeddbb;
  --gf-green:#356b49;
  --gf-green-dark:#1e4935;
  --gf-moss:#7da75a;
  --gf-gold:#e5b34c;
  --gf-red:#c5523f;
  --gf-sky-top:#eff4e5;
  --gf-sky-mid:#e5edd0;
  --gf-sky-low:#d4dfad;
  --gf-hill-far:#9db3ad;
  --gf-hill-mid:#88aa72;
  --gf-hill-near:#608d4f;
  --gf-shadow:0 24px 60px rgba(39,70,51,.20);
  --gf-soft-shadow:0 12px 28px rgba(39,70,51,.15);
  --gf-display:"Baloo 2",system-ui,sans-serif;
  --gf-body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.games-fairytale{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--gf-ink);
  background:#dfe8cd;
  font-family:var(--gf-body);
  -webkit-tap-highlight-color:transparent;
}
body.games-fairytale button{font-family:inherit}
body.games-fairytale[data-theme="dusk"]{
  --gf-sky-top:#f2ddd2;--gf-sky-mid:#d9bdc5;--gf-sky-low:#ac91aa;
  --gf-hill-far:#85929c;--gf-hill-mid:#718276;--gf-hill-near:#4f6b55;
}
body.games-fairytale[data-theme="night"]{
  --gf-sky-top:#394f68;--gf-sky-mid:#4d6276;--gf-sky-low:#71677f;
  --gf-hill-far:#536678;--gf-hill-mid:#435b63;--gf-hill-near:#29483d;
}

.game-fairy-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--gf-sky-top),var(--gf-sky-mid) 46%,var(--gf-sky-low));transition:background .8s ease}
.gf-sun{position:absolute;left:13%;top:4%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,252,224,.98) 0 12%,rgba(255,238,170,.58) 35%,rgba(255,238,170,0) 72%);filter:blur(.2px);animation:gfSun 8s ease-in-out infinite}
@keyframes gfSun{50%{transform:scale(1.06);opacity:.86}}
.gf-rays{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;opacity:.74}
.gf-rays i{position:absolute;left:14%;top:-10%;width:90px;height:92%;transform-origin:top center;background:linear-gradient(180deg,rgba(255,252,224,.52),rgba(255,252,224,0));clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(3px);animation:gfRay 9s ease-in-out infinite}
.gf-rays i:nth-child(1){transform:rotate(-12deg);width:70px}
.gf-rays i:nth-child(2){transform:rotate(2deg);left:20%;animation-delay:-2s}
.gf-rays i:nth-child(3){transform:rotate(15deg);left:25%;width:120px;animation-delay:-4s}
@keyframes gfRay{50%{opacity:.45;filter:blur(5px)}}
.gf-mountain{position:absolute;left:-8%;right:-8%;border-radius:50% 50% 0 0;transition:background .8s ease}
.gf-mountain.far{bottom:41%;height:28%;background:var(--gf-hill-far);clip-path:polygon(0 100%,0 68%,9% 48%,18% 67%,29% 34%,40% 61%,51% 26%,63% 59%,72% 40%,83% 67%,93% 38%,100% 70%,100% 100%);opacity:.68}
.gf-mountain.mid{bottom:31%;height:27%;background:var(--gf-hill-mid);clip-path:polygon(0 100%,0 66%,12% 45%,24% 70%,35% 39%,47% 69%,58% 48%,70% 72%,82% 43%,93% 62%,100% 49%,100% 100%);opacity:.85}
.gf-meadow{position:absolute;left:-6%;right:-6%;bottom:0;height:39%;border-radius:50% 50% 0 0/28% 28% 0 0;background:linear-gradient(180deg,#bfd383,var(--gf-hill-near) 78%);transition:background .8s ease}
.gf-meadow::before{content:"";position:absolute;inset:0;background:radial-gradient(280px 90px at 18% 24%,rgba(255,241,151,.34),transparent 72%),radial-gradient(300px 100px at 72% 18%,rgba(255,241,151,.25),transparent 75%),radial-gradient(230px 90px at 48% 68%,rgba(47,91,48,.22),transparent 76%)}
.gf-cloud{position:absolute;width:170px;height:46px;border-radius:80px;background:rgba(255,255,247,.70);filter:blur(.2px);animation:gfCloud 52s linear infinite}
.gf-cloud::before,.gf-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.gf-cloud::before{width:72px;height:72px;left:25px;bottom:5px}.gf-cloud::after{width:98px;height:82px;right:18px;bottom:2px}
.gf-cloud.c1{top:15%;left:-210px}.gf-cloud.c2{top:27%;left:-260px;transform:scale(.7);animation-duration:70s;animation-delay:-18s;opacity:.65}.gf-cloud.c3{top:8%;left:-260px;transform:scale(1.25);animation-duration:84s;animation-delay:-36s;opacity:.52}
@keyframes gfCloud{to{left:112%}}
.gf-tree{position:absolute;bottom:8%;width:130px;height:310px;transform-origin:bottom center;animation:gfSway 6s ease-in-out infinite}
.gf-tree.left{left:-20px}.gf-tree.right{right:-10px;transform:scaleX(-1);animation-delay:-2.2s}
.gf-tree .trunk{position:absolute;left:50%;bottom:0;width:30px;height:210px;border-radius:50% 45% 20% 30%;background:linear-gradient(90deg,#5d432f,#9a7654 45%,#5d432f);transform:translateX(-50%) rotate(5deg)}
.gf-tree .trunk::before{content:"";position:absolute;left:-38px;top:48px;width:86px;height:18px;border-radius:16px;background:#624833;transform:rotate(-34deg)}
.gf-tree .crown{position:absolute;border-radius:48% 52% 46% 54%;background:#315f3d;box-shadow:inset -20px -24px 0 rgba(24,67,44,.25),inset 18px 15px 0 rgba(142,178,91,.22)}
.gf-tree .crown::before,.gf-tree .crown::after{content:"";position:absolute;border-radius:50%;background:inherit;box-shadow:inherit}
.gf-tree .crown.a{width:150px;height:125px;left:-10px;top:18px}.gf-tree .crown.a::before{width:110px;height:100px;left:-45px;top:44px}.gf-tree .crown.a::after{width:100px;height:94px;right:-48px;top:36px}
.gf-tree .crown.b{width:105px;height:90px;left:20px;top:104px;background:#3e7447}
@keyframes gfSway{50%{transform:rotate(1.5deg)}}
.gf-flower-line{position:absolute;left:0;right:0;bottom:0;height:94px;background-image:radial-gradient(circle at 8px 24px,#fff 0 5px,#edbd43 6px 8px,transparent 9px),radial-gradient(circle at 28px 50px,#db79a8 0 6px,transparent 7px),radial-gradient(circle at 48px 25px,#8e79ce 0 5px,transparent 6px);background-size:68px 84px;opacity:.55}

.game-main{position:relative;z-index:2;min-height:100vh;padding:112px 0 70px}
.view{display:none;animation:gfFade .45s ease}
.view.active{display:block}
@keyframes gfFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.game-container{width:min(1180px,calc(100% - 36px));margin:0 auto}

.game-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);gap:42px;align-items:center;min-height:490px;padding:38px 0 24px}
.hero-copy{position:relative}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,248,227,.82);border:1px solid rgba(255,255,255,.92);box-shadow:var(--gf-soft-shadow);font-size:12px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:var(--gf-green-dark)}
.hero-copy h1{max-width:760px;margin:18px 0 15px;font-family:var(--gf-display);font-size:clamp(48px,7.5vw,88px);line-height:.92;color:#fff8dd;text-shadow:0 5px 0 rgba(39,80,52,.35),0 12px 28px rgba(35,67,47,.22)}
.hero-copy h1 span{display:block;color:#f5cf6c}
.hero-copy p{max-width:640px;margin:0;color:#394b3e;font-size:clamp(16px,1.8vw,20px);line-height:1.7;font-weight:800;text-shadow:0 1px rgba(255,255,255,.52)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:13px 22px;border-radius:20px;text-decoration:none;font-family:var(--gf-display);font-weight:800;transition:.16s ease}
.hero-btn.primary{color:#fff;background:linear-gradient(155deg,#d65d43,#a83b30);box-shadow:0 8px 0 rgba(112,43,33,.28),0 14px 25px rgba(112,43,33,.18)}
.hero-btn.secondary{color:var(--gf-green-dark);background:rgba(255,248,229,.82);border:2px solid rgba(255,255,255,.85);box-shadow:var(--gf-soft-shadow)}
.hero-btn:hover{transform:translateY(-3px)}
.hero-notes{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-note{padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.48);color:#526253;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.64)}

.hero-visual{position:relative;min-height:430px;display:grid;place-items:center}
.story-window{position:relative;width:min(430px,100%);aspect-ratio:1/1.03;border-radius:48% 48% 44% 44%/40% 40% 54% 54%;background:radial-gradient(circle at 50% 18%,rgba(255,255,239,.93),rgba(247,222,166,.75) 42%,rgba(81,129,71,.65) 77%);border:8px solid rgba(255,248,225,.88);box-shadow:0 26px 70px rgba(32,69,47,.27),inset 0 0 0 3px rgba(183,126,42,.24);overflow:hidden}
.story-window::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-15%;height:42%;border-radius:50%;background:linear-gradient(180deg,#9fbe6d,#5e8b4d)}
.story-window::after{content:"";position:absolute;inset:16px;border:1px solid rgba(192,136,49,.25);border-radius:inherit;pointer-events:none}
.story-window #catHome{position:absolute;inset:35px 30px 20px;display:grid;place-items:center;z-index:2}
.story-window .mascot{width:88%;height:auto;filter:drop-shadow(0 15px 12px rgba(41,57,36,.18))}
.story-spark{position:absolute;z-index:3;color:#fff2aa;font-size:24px;filter:drop-shadow(0 2px 4px rgba(100,68,24,.2));animation:gfSpark 3.2s ease-in-out infinite}
.story-spark.s1{left:12%;top:17%}.story-spark.s2{right:11%;top:29%;animation-delay:-1.4s}.story-spark.s3{right:20%;bottom:16%;animation-delay:-2.2s}
@keyframes gfSpark{50%{transform:translateY(-8px) rotate(18deg);opacity:.55}}
.story-banner{position:absolute;z-index:4;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;max-width:88%;padding:10px 20px;border-radius:18px;background:linear-gradient(180deg,#fff9e8,#eed8aa);border:2px solid rgba(255,255,255,.88);box-shadow:0 8px 18px rgba(58,65,42,.18);font-family:var(--gf-display);font-weight:800;color:var(--gf-green-dark);text-align:center}

.grade-journey{position:relative;margin-top:22px;padding:34px 30px 40px;border-radius:38px;background:linear-gradient(180deg,rgba(255,249,232,.90),rgba(244,231,199,.86));border:3px solid rgba(255,255,255,.82);box-shadow:var(--gf-shadow);overflow:hidden}
.grade-journey::before{content:"";position:absolute;inset:11px;border:1px solid rgba(177,121,42,.25);border-radius:28px;pointer-events:none}
.section-heading{position:relative;z-index:1;text-align:center;max-width:720px;margin:0 auto 26px}
.section-kicker{font-size:12px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#a5742e}
.section-heading h2{margin:5px 0 6px;font-family:var(--gf-display);font-size:clamp(30px,4vw,46px);color:var(--gf-green-dark)}
.section-heading p{margin:0;color:var(--gf-muted);font-weight:800;line-height:1.6}
.grades{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.gcard{position:relative;min-height:190px;padding:20px 18px 17px;border:3px solid rgba(255,255,255,.74);border-radius:30px;color:#fff;text-align:left;overflow:hidden;box-shadow:0 10px 0 rgba(47,57,44,.15),0 18px 35px rgba(45,64,46,.18);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.gcard::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.30),transparent 38%,rgba(32,64,43,.15));pointer-events:none}
.gcard::after{content:"";position:absolute;left:-25%;right:-25%;bottom:-46%;height:74%;border-radius:50%;background:rgba(38,74,45,.20);pointer-events:none}
.gcard:hover,.gcard:focus-visible{transform:translateY(-8px) rotate(-.5deg);box-shadow:0 14px 0 rgba(47,57,44,.13),0 27px 42px rgba(45,64,46,.24);filter:saturate(1.07)}
.gcard-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.gcard .num{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(255,250,231,.93);color:#374c3a;border:3px solid rgba(255,255,255,.85);box-shadow:0 7px 0 rgba(45,57,41,.16);font-family:var(--gf-display);font-size:33px;font-weight:800}
.gcard .grade-icon{font-size:34px;filter:drop-shadow(0 4px 3px rgba(45,57,41,.18))}
.gcard .lbl{position:relative;z-index:2;margin-top:17px;font-family:var(--gf-display);font-size:21px;font-weight:800}
.gcard .sub{position:relative;z-index:2;margin-top:3px;font-size:12.5px;font-weight:800;opacity:.92}
.gcard .pips{position:relative;z-index:2;display:flex;gap:4px;margin-top:15px}
.gcard .pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.36)}
.gcard .pips i.on{background:#fff7c8;box-shadow:0 0 8px rgba(255,246,172,.8)}
.gcard .blob{position:absolute;right:-34px;top:-38px;width:135px;height:135px;border-radius:50%;background:rgba(255,255,255,.16)}

.featured-adventure{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;margin:26px 0 20px;padding:28px 30px;border-radius:34px;background:linear-gradient(135deg,rgba(43,90,61,.95),rgba(27,61,45,.96));box-shadow:var(--gf-shadow);color:#fff;overflow:hidden;position:relative}
.featured-adventure::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 18%,rgba(249,215,121,.28),transparent 26%),linear-gradient(90deg,transparent,rgba(255,255,255,.05));pointer-events:none}
.featured-copy{position:relative;z-index:1}
.featured-copy small{font-weight:900;text-transform:uppercase;letter-spacing:1.4px;color:#f5d47d}
.featured-copy h3{margin:7px 0 7px;font-family:var(--gf-display);font-size:clamp(28px,3.2vw,42px)}
.featured-copy p{max-width:650px;margin:0;color:#dbe9dc;font-weight:700;line-height:1.65}
.featured-link{display:inline-flex;margin-top:17px;padding:11px 18px;border-radius:17px;background:#f5d47d;color:#314631;text-decoration:none;font-family:var(--gf-display);font-weight:800;box-shadow:0 7px 0 rgba(114,73,22,.25)}
.featured-art{position:relative;z-index:1;display:grid;place-items:center;font-size:112px;filter:drop-shadow(0 16px 12px rgba(7,28,19,.25));animation:trainFloat 4s ease-in-out infinite}
@keyframes trainFloat{50%{transform:translateY(-8px)}}

/* GAME VIEW */
.game-shell{width:min(1050px,calc(100% - 30px));margin:0 auto;padding:16px 0 28px}
.topbar{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:24px;background:rgba(255,248,229,.86);border:2px solid rgba(255,255,255,.85);box-shadow:var(--gf-soft-shadow);backdrop-filter:blur(8px)}
.icon-btn{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border:0;border-radius:50%;background:linear-gradient(180deg,#fff9e9,#e8d3aa);color:var(--gf-green-dark);box-shadow:0 6px 0 rgba(101,75,36,.18);font-size:21px;font-weight:900;cursor:pointer}
.stats{margin-left:auto;display:flex;gap:8px}
.chip{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.72);color:#405044;font-size:14px;font-weight:900;border:1px solid rgba(113,130,103,.16)}
.chip small{font-size:10px;color:#798278;letter-spacing:.6px}
.progress{height:14px;margin:13px 12px 0;padding:3px;border-radius:999px;background:rgba(255,249,230,.62);box-shadow:inset 0 2px 6px rgba(47,76,51,.15)}
.progress>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#efcf66,#d96946,#b7473a);box-shadow:0 0 12px rgba(229,179,76,.48);transition:width .42s ease}
.play{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(420px,1.28fr);gap:30px;align-items:center;min-height:570px;padding:24px 10px 16px}
.game-guide{display:flex;flex-direction:column;align-items:center}
#catGame{width:100%;display:grid;place-items:center}
.play .mascot{width:min(300px,95%);height:auto;filter:drop-shadow(0 20px 14px rgba(36,58,39,.20))}
.guide-bubble{position:relative;margin-top:-16px;padding:12px 17px;border-radius:19px;background:rgba(255,249,232,.92);border:2px solid rgba(255,255,255,.90);box-shadow:var(--gf-soft-shadow);font-weight:900;color:#4a5b4d;text-align:center}
.guide-bubble::before{content:"";position:absolute;top:-10px;left:50%;width:18px;height:18px;background:inherit;border-left:2px solid rgba(255,255,255,.9);border-top:2px solid rgba(255,255,255,.9);transform:translateX(-50%) rotate(45deg)}
.challenge-area{display:flex;flex-direction:column;align-items:stretch}
.qcard,.result{position:relative;padding:31px 30px;border-radius:34px;background:linear-gradient(180deg,#fff9e9,#f0dfbd);border:5px solid rgba(255,255,255,.90);box-shadow:var(--gf-shadow);text-align:center;overflow:hidden}
.qcard::before,.result::before{content:"";position:absolute;inset:9px;border:1px solid rgba(179,121,41,.28);border-radius:23px;pointer-events:none}
.qcard::after{content:"✦";position:absolute;right:21px;top:14px;color:#d3a23e;font-size:24px;opacity:.55}
.qcard .ask{position:relative;z-index:1;color:#778076;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.qcard .q{position:relative;z-index:1;margin-top:7px;font-family:var(--gf-display);font-size:clamp(42px,7vw,72px);font-weight:800;line-height:1;color:#334237;text-shadow:0 3px 0 rgba(255,255,255,.75)}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}
.ans{position:relative;min-height:82px;padding:16px 10px;border:3px solid rgba(255,255,255,.72);border-radius:25px;color:#fff;font-family:var(--gf-display);font-size:clamp(25px,4vw,36px);font-weight:800;box-shadow:0 8px 0 rgba(42,61,43,.16),0 14px 24px rgba(42,61,43,.16);cursor:pointer;overflow:hidden;transition:transform .13s ease,filter .13s ease;animation:answerFloat 4s ease-in-out infinite}
.ans::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 44%);pointer-events:none}
.ans:nth-child(2){animation-delay:-1s}.ans:nth-child(3){animation-delay:-2s}.ans:nth-child(4){animation-delay:-3s}
.ans:hover{transform:translateY(-4px);filter:saturate(1.08)}
.ans:active{transform:translateY(2px) scale(.97)}
@keyframes answerFloat{50%{translate:0 -4px}}
.ans.correct{animation:answerPop .45s ease;background:linear-gradient(155deg,#70bf72,#3e8e55)!important}
.ans.wrong{animation:answerShake .4s ease;background:linear-gradient(155deg,#e36d62,#b84038)!important}
.ans.dim{opacity:.42;filter:saturate(.5)}
@keyframes answerPop{40%{transform:scale(1.1)}}
@keyframes answerShake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.result{width:100%}
.result .stars{font-size:44px;letter-spacing:6px}
.result h3{margin:8px 0;font-family:var(--gf-display);font-size:32px;color:var(--gf-green-dark)}
.result .line{margin:6px 0;color:#657166;font-weight:900}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:145px;margin:16px 5px 0;padding:13px 21px;border:0;border-radius:19px;color:#fff;background:linear-gradient(155deg,#d45d43,#a93b30);box-shadow:0 7px 0 rgba(105,42,33,.24);font-family:var(--gf-display);font-size:17px;font-weight:800;cursor:pointer}
.btn.ghost{color:var(--gf-green-dark);background:#fff8e7;box-shadow:0 7px 0 rgba(137,103,48,.16)}
.confetti{position:fixed;inset:0;z-index:990;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-18px;width:10px;height:14px;border-radius:3px;animation:confettiFall 1.2s linear forwards}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(560deg);opacity:.85}}

/* Mascot animation */
.mascot{transform-origin:bottom center}
.mascot.idle{animation:mascotBreathe 3.2s ease-in-out infinite}
.mascot.happy{animation:mascotHop .55s ease}
.mascot.sad{animation:mascotDroop .5s ease forwards}
.cat-eye{transform-origin:center;animation:catBlink 4.6s infinite}
.cat-arm{transform-origin:33px 112px;animation:catWave 2.7s ease-in-out infinite}
@keyframes mascotBreathe{50%{transform:translateY(-6px) scale(1.018)}}
@keyframes mascotHop{30%{transform:translateY(-30px) rotate(-5deg)}60%{transform:translateY(-8px) rotate(3deg)}}
@keyframes mascotDroop{to{transform:translateY(5px) rotate(2deg)}}
@keyframes catBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes catWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-24deg)}45%{transform:rotate(-5deg)}}

@media(max-width:930px){
  .game-hero{grid-template-columns:1fr;gap:16px;text-align:center;padding-top:28px}
  .hero-copy p{margin-left:auto;margin-right:auto}.hero-actions,.hero-notes{justify-content:center}
  .hero-visual{min-height:380px}.story-window{max-width:390px}
  .grades{grid-template-columns:repeat(2,1fr)}
  .play{grid-template-columns:1fr;gap:8px}.game-guide{display:none}.game-shell{padding-top:10px}
  .featured-adventure{grid-template-columns:1fr;text-align:center}.featured-copy p{margin:auto}.featured-art{font-size:84px}
}
@media(max-width:600px){
  .game-main{padding-top:88px}
  .game-container{width:min(100% - 22px,1180px)}
  .hero-copy h1{font-size:clamp(42px,14vw,64px)}
  .story-window{max-width:330px}
  .grade-journey{padding:28px 16px 30px;border-radius:28px}
  .grades{gap:11px}.gcard{min-height:174px;border-radius:24px;padding:16px 14px}.gcard .num{width:50px;height:50px;font-size:29px}.gcard .lbl{font-size:18px}.gcard .grade-icon{font-size:28px}
  .featured-adventure{padding:24px 18px;border-radius:26px}
  .game-shell{width:min(100% - 18px,1050px)}
  .topbar{padding:8px;border-radius:20px}.chip{padding:8px 10px;font-size:12px}.chip small{display:none}.icon-btn{width:43px;height:43px}
  .play{padding:15px 0}.qcard,.result{padding:25px 16px;border-radius:27px}.answers{gap:10px}.ans{min-height:72px;border-radius:20px}
}
@media(max-width:390px){.grades{grid-template-columns:1fr}.gcard{min-height:155px}.hero-actions{display:grid}.hero-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.games-fairytale *{animation-duration:.001s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}