:root{--blue:#2563eb;--sky:#06b6d4;--green:#22c55e;--ink:#172033;--muted:#64748b;--line:#dbeafe;--shadow:0 18px 50px rgba(37,99,235,.16)}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;color:var(--ink);min-height:100vh;background:radial-gradient(circle at 10% 4%,#fff176 0 7%,transparent 16%),linear-gradient(180deg,#b9ecff,#eaffff 45%,#e8ffd4)}button,input{font:inherit}button{border:0;cursor:pointer}
.app{max-width:1200px;margin:auto;padding:16px}.top{display:flex;justify-content:space-between;gap:14px;align-items:center;background:rgba(255,255,255,.85);border-radius:32px;padding:16px;box-shadow:var(--shadow)}.brand{display:flex;gap:14px;align-items:center}.bear{width:70px;height:70px;display:grid;place-items:center;font-size:38px;border-radius:26px;background:linear-gradient(135deg,#fef3c7,#bbf7d0)}h1{margin:0;font-size:25px}.brand p{margin:4px 0 0;color:var(--muted)}
.stats{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.stats label{display:grid;gap:5px;font-size:12px;color:var(--muted);font-weight:800}.stats input{width:150px;border:1px solid var(--line);border-radius:16px;padding:11px}.stats div{min-width:82px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px}.stats b{display:block;font-size:22px;color:var(--blue)}.stats span{font-size:12px;color:var(--muted)}
.screen{display:none}.screen.on{display:block}.hero{margin-top:18px;padding:30px;border-radius:38px;color:white;display:grid;grid-template-columns:1fr 330px;gap:18px;background:linear-gradient(135deg,#1d4ed8,#06b6d4 55%,#22c55e);box-shadow:var(--shadow)}.tag{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);font-size:12px;font-weight:900;color:white}.tag.blue{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}.hero h2{font-size:42px;line-height:1.12;margin:15px 0 12px}.hero p{font-size:17px;line-height:1.75;margin:0}.primary,.soft,.good{padding:13px 18px;border-radius:18px;font-weight:900;margin:8px 8px 0 0}.primary{color:white;background:linear-gradient(135deg,var(--blue),var(--sky));box-shadow:0 12px 28px rgba(37,99,235,.25)}.soft{background:white;color:var(--blue);border:1px solid var(--line)}.good{background:linear-gradient(135deg,#16a34a,#22c55e);color:white}
.coach{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:20px;text-align:center}.coach div{font-size:74px}.coach h3{font-size:24px;margin:0}.coach p{font-weight:800}.heading{margin:28px 0 14px}.worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.world{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:32px;padding:20px;box-shadow:var(--shadow);transition:.16s}.world:hover{transform:translateY(-6px)}.world .ico{width:66px;height:66px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(135deg,#fef3c7,#cffafe);font-size:36px}.world h3{font-size:21px;margin:14px 0 8px}.world p,.world li{color:var(--muted);line-height:1.55}
.gamehead{margin-top:18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:30px;padding:16px;box-shadow:var(--shadow)}.gamehead h2{font-size:31px;margin:8px 0 0}.score{min-width:150px;text-align:right;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px}.score span{display:block;color:var(--muted)}.score b{color:var(--blue);font-size:21px}.talk{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:14px;padding:16px;border-radius:28px;background:#fff7ed;border:1px solid #fed7aa;box-shadow:var(--shadow)}.talk span{font-size:34px}.talk p{margin:0;color:#7c2d12;line-height:1.55;font-weight:800}.talk button{width:54px;height:54px;border-radius:18px;background:#fff;border:1px solid #fed7aa}
.area{margin-top:14px;min-height:500px;padding:22px;border-radius:36px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}.q{display:flex;justify-content:space-between;gap:14px;padding:18px;border-radius:28px;background:linear-gradient(135deg,#eff6ff,#ecfeff);border:1px solid #dbeafe;margin-bottom:18px}.q h3{font-size:28px;line-height:1.35;margin:0}.q p{margin:6px 0 0;color:var(--muted);line-height:1.6}.target{padding:10px 14px;background:white;border:1px solid #bfdbfe;border-radius:18px;color:#1d4ed8;font-weight:900;white-space:nowrap}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.panel{border-radius:28px;padding:18px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(15,23,42,.08)}.panel h4{font-size:23px;margin:0 0 10px}.panel p{color:var(--muted);line-height:1.7}.fb{margin-top:14px;padding:14px 16px;border-radius:20px;line-height:1.65;font-weight:850}.info{background:#e0f2fe;color:#075985}.ok{background:#dcfce7;color:#166534}.bad{background:#fee2e2;color:#991b1b}.ans{display:flex;gap:10px;align-items:center;margin-top:12px}.ans input{flex:1;min-width:0;padding:14px;border-radius:18px;border:1px solid var(--line);font-size:20px;font-weight:900}.actions{margin-top:16px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.hide{display:none!important}
.pizza{width:min(340px,82vw);aspect-ratio:1;border-radius:50%;border:18px solid #92400e;background:conic-gradient(#fbbf24 0 45deg,#f59e0b 45deg 90deg,#fbbf24 90deg 135deg,#f59e0b 135deg 180deg,#fbbf24 180deg 225deg,#f59e0b 225deg 270deg,#fbbf24 270deg 315deg,#f59e0b 315deg 360deg);box-shadow:inset 0 0 0 10px #fde68a,0 24px 46px rgba(146,64,14,.24);position:relative;margin:auto}.slice{position:absolute;width:44px;height:44px;border-radius:50%;background:white;color:#92400e;border:3px solid #fef3c7;font-weight:900;box-shadow:0 8px 18px rgba(15,23,42,.16)}.slice.sel{background:#22c55e;color:#fff;transform:scale(1.08)}.slice:nth-child(1){left:46%;top:7%}.slice:nth-child(2){right:17%;top:20%}.slice:nth-child(3){right:11%;bottom:34%}.slice:nth-child(4){right:30%;bottom:12%}.slice:nth-child(5){left:30%;bottom:12%}.slice:nth-child(6){left:11%;bottom:34%}.slice:nth-child(7){left:17%;top:20%}.slice:nth-child(8){left:43%;top:42%}
.line{position:relative;height:250px;border-radius:28px;background:linear-gradient(180deg,#e0f2fe,#bae6fd);overflow:hidden}.line:before{content:"";position:absolute;left:8%;right:8%;bottom:74px;height:18px;border-radius:20px;background:#334155}.tick{position:absolute;bottom:102px;transform:translateX(-50%);display:grid;gap:6px;justify-items:center;font-weight:900}.tick i{width:4px;height:30px;background:#334155;border-radius:4px}.runner{position:absolute;bottom:135px;width:72px;height:72px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,#fef3c7,#fde68a);font-size:38px;box-shadow:0 14px 34px rgba(15,23,42,.2);transform:translateX(-50%);transition:.2s left}.slider{width:100%;margin-top:12px}
.balance{height:280px;display:grid;place-items:center;position:relative;border-radius:28px;background:linear-gradient(180deg,#fff7ed,#ffedd5)}.beam{width:80%;height:18px;background:#92400e;border-radius:20px;transition:.2s transform}.base{position:absolute;width:18px;height:160px;background:#92400e;border-radius:20px;bottom:28px}.pan{position:absolute;bottom:82px;width:120px;height:76px;border-radius:0 0 50px 50px;background:#facc15;border:5px solid #b45309;display:grid;place-items:center;font-weight:900}.left{left:12%}.right{right:12%}
.grid{display:grid;gap:4px;width:max-content;max-width:100%;margin:auto;padding:14px;border-radius:26px;background:#f8fbff;border:1px solid var(--line)}.cell{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#93c5fd,#22c55e);border:1px solid #bfdbfe}.pattern{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:18px}.gem{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;font-size:34px;background:#f8fbff;border:2px solid var(--line)}.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.opt{padding:14px;border-radius:18px;background:#f8fbff;border:1px solid var(--line);font-size:28px}.opt.active{background:#dbeafe}
.finish{max-width:720px;margin:38px auto;text-align:center;padding:34px;border-radius:40px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}.big{font-size:88px}.finish h2{font-size:40px;margin:8px 0}.reward{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.reward div{background:#f8fbff;border:1px solid var(--line);border-radius:24px;padding:16px}.reward b{display:block;font-size:32px;color:var(--blue)}.reward span{color:var(--muted)}.note{text-align:left;background:#fff7ed;border:1px solid #fed7aa;border-radius:26px;padding:18px;margin-bottom:18px}.note li{line-height:1.7;color:#7c2d12}.modal{position:fixed;inset:0;background:rgba(15,23,42,.35);display:grid;place-items:center;padding:18px;z-index:100}.modal>div{max-width:560px;width:100%;background:white;border-radius:34px;padding:26px;position:relative;box-shadow:var(--shadow)}#close{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:16px;background:#f1f5f9;font-size:24px}.toast{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;padding:14px 18px;border-radius:18px;z-index:101}
@media(max-width:900px){.top,.hero,.gamehead,.two{grid-template-columns:1fr;display:grid}.worlds{grid-template-columns:repeat(2,1fr)}.score{text-align:left}}@media(max-width:620px){.app{padding:10px}.hero{padding:20px}.hero h2{font-size:31px}.worlds{grid-template-columns:1fr}.area{padding:14px}.q{display:grid}.reward{grid-template-columns:1fr}.opts{grid-template-columns:repeat(2,1fr)}.talk{grid-template-columns:auto 1fr}.talk button{grid-column:1/-1;width:100%}}