*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#183d64}body{font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color:#7d350a}button,input,select,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible{outline:5px solid #fff900;outline-offset:3px}#viewport{position:fixed;inset:0;overflow:hidden}#stage{position:absolute;width:1672px;height:941px;overflow:hidden;transform-origin:top left;isolation:isolate}#background{position:absolute;inset:0;background:url("assets/farm.webp") center/100% 100% no-repeat}.screen{position:absolute;inset:0}.hidden{display:none!important}.brand{position:absolute;z-index:10;left:22px;top:20px;border-radius:29px;background:linear-gradient(165deg,#3fd7ff 0,#167aff 48%,#0641af 95%);border:5px solid #fff;box-shadow:0 6px 0 #e7981d,0 9px 17px #064c91aa;color:#fff;text-align:center;padding:8px 16px 6px;font-weight:800;font-size:22px;line-height:1.15;text-shadow:1px 3px #0b52ae}.brand span{display:block}.brand-strong{font-size:26px}.brand.compact{transform:scale(.77);transform-origin:top left}.home-title{position:absolute;top:23px;left:410px;width:850px;height:auto;filter:drop-shadow(0 9px 7px #6b441d55)}.home-team{position:absolute;left:115px;top:330px;width:880px;height:auto;filter:drop-shadow(0 8px 4px #65432322)}.home-root{position:absolute;left:1005px;top:365px;width:245px;height:auto;filter:drop-shadow(0 8px 5px #684e2733)}.home-bop{position:absolute;right:90px;top:362px;width:228px;filter:drop-shadow(0 8px 6px #65432333);animation:float 2.6s ease-in-out infinite}.home-actions{position:absolute;bottom:62px;left:335px;right:100px;display:flex;align-items:center;justify-content:center;gap:35px;z-index:6}.big{min-width:470px;padding:18px 22px 9px;border-radius:40px;border:6px solid #fff;color:#fff;font-size:41px;font-weight:800;line-height:1.17;text-shadow:0 4px 1px #17583e;box-shadow:0 9px 0 #a76b20,0 15px 22px #56361155}.lime{background:linear-gradient(#b7ff58,#56d800 55%,#169c18)!important}.rose{background:linear-gradient(#ff9fca,#fa3689 60%,#d81070)!important}.home-controls{position:absolute;left:28px;right:28px;bottom:22px;display:flex;justify-content:space-between;z-index:6}.home-controls button{border:4px solid white;border-radius:25px;padding:7px 21px 3px;background:linear-gradient(#28beff,#0061d3);color:#fff;font-size:23px;font-weight:800;box-shadow:0 6px 0 #a16b22}.home-controls button:last-child{background:linear-gradient(#ffe354,#ff9500);color:#a31c05}.play-title{position:absolute;left:601px;top:-9px;width:470px;height:auto;z-index:7;filter:drop-shadow(0 4px 6px #533d2766)}.toolbar{position:absolute;top:22px;right:30px;z-index:9;display:flex;gap:12px}.toolbar button{width:70px;height:67px;border:5px solid #fff;border-radius:23px;background:linear-gradient(#fff37c,#ff9c1f 50%,#f46a06);box-shadow:0 6px 0 #ae430b;color:#fff;font-weight:800;font-size:45px;line-height:1;text-shadow:0 2px 2px #ab440f}.toolbar button:active,.answer-grid button:active{transform:translateY(3px)}.progress{position:absolute;top:183px;left:423px;width:824px;height:112px;border:5px solid #f7b65a;border-radius:45px;background:linear-gradient(#fffcf0,#fff0c6);box-shadow:0 5px 0 #a7732d,0 10px 15px #57361e44;z-index:6;text-align:center;padding:7px 15px 4px}.progress-label{font-size:32px;font-weight:800;line-height:1.15}.progress-label strong{color:#eb3e18}.stars{display:flex;justify-content:center;align-items:center;gap:7px;font-size:38px;line-height:1;color:#aeb1b7;text-shadow:0 2px #777f87}.stars span.on{color:#ffbf00;text-shadow:0 2px #e98016,0 0 5px #fffec4}.play-field{position:absolute;inset:0;pointer-events:none;z-index:2}.play-field img{position:absolute;user-select:none;-webkit-user-drag:none}.play-field #team{left:110px;top:298px;width:845px;height:auto;transform-origin:70% 75%;filter:drop-shadow(0 5px 3px #6e4b2133)}.play-field.pulling #team{animation:pull .85s ease-in-out}.radish-clip{position:absolute;inset:0 0 auto 0;height:644px;overflow:hidden;z-index:3}.radish-clip img#radish{position:absolute;left:990px;top:530px;width:225px;height:auto;max-width:none;transform:translateY(0);transition:transform .95s cubic-bezier(.17,.85,.31,1);will-change:transform;filter:drop-shadow(0 5px 3px #6b4b2433)}.soil-edge{position:absolute;z-index:4;left:989px;top:636px;width:220px;height:20px;pointer-events:none;border-radius:60% 30% 50% 45%;background:linear-gradient(180deg,#9ef62f 0%,#50b61a 26%,#a36c29 34%,#b77b35 100%);box-shadow:0 3px 0 #86622165;opacity:.94}#bop{width:178px;right:45px;top:347px;z-index:2;animation:float 2.5s ease-in-out infinite}.question{position:absolute;top:700px;left:290px;width:1092px;height:104px;z-index:8;display:flex;align-items:center;justify-content:center;border:6px solid #fff;outline:5px solid #f2ae32;border-radius:64px;background:linear-gradient(#fffefa,#ffedbd);box-shadow:0 7px 0 #b56c18;color:#994112;font-weight:800;font-size:84px;line-height:1;letter-spacing:3px;text-shadow:0 3px #fff}.answer-grid{position:absolute;left:180px;right:180px;bottom:25px;height:102px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;z-index:9}.answer-grid button{display:flex;align-items:center;justify-content:center;border:6px solid #fff;border-radius:39px;box-shadow:0 7px 0 #a65d20,0 10px 14px #59401b55;color:#fff;text-shadow:0 3px 1px #284979;font-size:72px;font-weight:800;line-height:1;-webkit-text-stroke:.6px #22528d}.answer-grid button:nth-child(4n+1){background:linear-gradient(#7fe5ff,#008df7)}.answer-grid button:nth-child(4n+2){background:linear-gradient(#c2fa60,#5cda00)}.answer-grid button:nth-child(4n+3){background:linear-gradient(#ffe67b,#ffae00)}.answer-grid button:nth-child(4n+4){background:linear-gradient(#ffabd3,#ed4693)}.answer-grid button:disabled{cursor:default}.answer-grid button.correct{outline:6px solid #fff24a;filter:brightness(1.15)}.answer-grid button.wrong{animation:shake .35s ease-in-out}.status-message{position:absolute;z-index:10;top:260px;left:590px;width:500px;text-align:center;pointer-events:none;font-size:40px;font-weight:800;color:#13852f;text-shadow:2px 3px #fff;opacity:0;transition:opacity .18s,transform .18s}.status-message.show{opacity:1;transform:translateY(-12px)}.status-message.bad{color:#dc352d}.team-scores{position:absolute;z-index:7;top:264px;left:435px;display:flex;gap:15px;align-items:center;font-size:20px;font-weight:800;background:#fff8e6ed;border-radius:25px;border:3px solid #fbcf69;padding:6px 14px}.team-scores span:last-child{color:#c33688}.win-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.win-hotspot{position:absolute;z-index:2;border:0;background:transparent}.win-replay{left:22.5%;top:81%;width:25%;height:14%}.win-home{left:50%;top:81%;width:26.5%;height:14%}.modal{position:absolute;inset:0;display:grid;place-items:center;z-index:30;background:#0f3158bb}.panel{width:740px;max-height:860px;overflow-y:auto;padding:25px 40px;border:8px solid #f7ab3d;border-radius:40px;background:#fff9e8;box-shadow:0 22px 70px #072b48aa;font-size:26px}.panel h2{margin:0 0 10px;text-align:center;font-size:40px}.panel label{display:block;font-weight:700;margin:16px 0}.panel input,.panel select,.panel textarea{background:#fff;border:3px solid #eabc6b;border-radius:13px;padding:5px 12px;color:#61320e}.panel textarea{display:block;width:100%;font-size:22px}.mini-note{font-size:20px}.panel-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:14px}.panel-buttons button{border:4px solid #fff;border-radius:20px;background:#f2cb8e;padding:6px 22px;font-size:27px;font-weight:800;box-shadow:0 5px #aa7a44}.panel-buttons button.lime{color:#fff}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes pull{0%,100%{transform:translateX(0) rotate(0)}35%{transform:translateX(-10px) rotate(-1deg)}75%{transform:translateX(4px) rotate(.5deg)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

/* Approved art layout: connected pulling group / one underground turnip / organic mound */
.play-field #team{left:165px;top:278px;width:845px;z-index:2}
.radish-clip{height:635px;z-index:3}
.radish-clip img#radish{left:969px;top:518px;width:245px;z-index:3}
.soil-edge{left:834px;top:574px;width:510px;height:108px;opacity:1;background:url('assets/soil-mound.svg') center/100% 100% no-repeat;border-radius:0;box-shadow:none;z-index:5}
.question{top:691px;height:103px}
#win{animation:win-reveal .7s ease-out both}
@keyframes win-reveal{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#win{animation:none}}

/* Independent celebratory finale: each mascot is a separate transparent image. */
#win{z-index:12;overflow:hidden}
.party-title{position:absolute;top:2px;left:515px;width:645px;z-index:5;filter:drop-shadow(0 6px 5px #63371766)}
.party-progress{position:absolute;top:188px;left:474px;width:728px;height:108px;border:5px solid #f7af42;border-radius:38px;background:linear-gradient(#fffdf0,#ffe6aa);box-shadow:0 5px 0 #a76d30;text-align:center;font-weight:800;font-size:31px;z-index:6;padding-top:3px}
.party-progress b{color:#e83f1c}.party-stars{color:#ffb800;font-size:39px;line-height:1.05;letter-spacing:8px;text-shadow:0 2px #df7712}
.party-ground{position:absolute;top:614px;left:1090px;width:350px;height:63px;border-radius:50%;background:radial-gradient(ellipse,#91501d 20%,#b86d2a 58%,#8d4b1c 80%,transparent 83%);z-index:3;opacity:0;animation:groundPop .5s .15s both}
.party-root{position:absolute;width:290px;left:1120px;top:315px;z-index:4;filter:drop-shadow(0 8px 5px #3c5e2444);transform-origin:50% 100%;animation:radishVictory 1.1s .10s cubic-bezier(.17,.8,.25,1.2) both}
.party-mate{position:absolute;z-index:4;object-fit:contain;transform-origin:50% 100%;filter:drop-shadow(0 10px 4px #4d582b36);opacity:0;animation:partyJump 1.2s ease-out both,partyDance 1s ease-in-out infinite alternate}
.party-squirrel{width:256px;left:145px;top:385px;animation-delay:.55s,1.7s}
.party-bunny{width:260px;left:388px;top:348px;animation-delay:.79s,1.94s}
.party-bear{width:270px;left:627px;top:340px;animation-delay:1.03s,2.18s}
.party-dino{width:279px;left:873px;top:328px;animation-delay:1.27s,2.42s}
.party-robot{position:absolute;left:70px;top:205px;width:200px;z-index:4;opacity:0;animation:robotEntrance 1.15s 1.5s both,robotDance 1.4s 2.7s ease-in-out infinite alternate}
.party-shine{position:absolute;left:1050px;top:310px;font-size:60px;color:#fff687;text-shadow:0 0 15px #ffe313;z-index:5;opacity:0;animation:shineIn .7s .35s both}
.party-banner{position:absolute;z-index:10;left:238px;right:220px;bottom:135px;text-align:center;opacity:0;animation:bannerShow .68s 2.1s cubic-bezier(.19,1.2,.3,1) both}
.party-heading{padding:10px 25px 0;background:linear-gradient(#fff5aa,#ffcd44 70%,#ffc13a);border:6px solid white;border-radius:36px;color:#b32511;font-size:54px;font-weight:800;letter-spacing:.5px;-webkit-text-stroke:1px #fff2d0;text-shadow:2px 4px #fff8ce;box-shadow:0 8px 0 #e69a24,0 12px 25px #6f391d7a;white-space:nowrap}
.party-subheading{display:table;margin:-3px auto 0;padding:0 45px;background:linear-gradient(#fffef5,#ffeec7);border:4px solid #f1ac3a;border-radius:36px;font-size:33px;font-weight:800;color:#8b3810;box-shadow:0 5px 0 #b3731d}.party-subheading span{color:#e83b16}
.party-buttons{position:absolute;bottom:28px;left:350px;right:350px;display:flex;gap:35px;justify-content:center;z-index:14;opacity:0;animation:bannerShow .6s 2.55s both}
.party-buttons button{width:400px;height:92px;border-radius:45px;border:6px solid #fff;font-size:44px;color:#fff;font-weight:800;text-shadow:0 3px #28511e;box-shadow:0 8px 0 #99631f,0 12px 17px #76502255}
.party-again{background:linear-gradient(#adff4d,#19bc24)}.party-home{background:linear-gradient(#78dfff,#0784e4)}
.confetti{position:absolute;inset:0;z-index:9;pointer-events:none}.confetti i{position:absolute;display:block;width:13px;height:20px;top:-40px;left:var(--left);background:var(--color);opacity:0;transform:rotate(var(--rotate));animation:confettiDrop var(--dur) var(--delay) linear forwards}
@keyframes radishVictory{0%{opacity:0;transform:translateY(265px) scale(.8)}45%{opacity:1}70%{transform:translateY(-35px) scale(1.08)}85%{transform:translateY(13px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes groundPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes partyJump{0%{opacity:0;transform:translateY(115px) scale(.62)}30%{opacity:1}60%{transform:translateY(-40px) scale(1.07) rotate(-5deg)}83%{transform:translateY(8px) scale(.98) rotate(2deg)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes partyDance{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-14px) rotate(2deg)}}
@keyframes robotEntrance{0%{opacity:0;transform:translate(-150px,110px) rotate(-20deg) scale(.65)}60%{opacity:1;transform:translate(10px,-26px) rotate(8deg)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes robotDance{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(-18px) rotate(8deg)}}
@keyframes shineIn{0%{opacity:0;transform:scale(.3) rotate(-30deg)}60%{opacity:1;transform:scale(1.18) rotate(10deg)}100%{opacity:1;transform:scale(1)}}
@keyframes bannerShow{0%{opacity:0;transform:translateY(85px) scale(.78)}70%{opacity:1;transform:translateY(-10px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes confettiDrop{0%{opacity:0;transform:translateY(-20px) rotate(var(--rotate))}12%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(860px) rotate(720deg)}}
@media(prefers-reduced-motion:reduce){.party-title,.party-progress,.party-ground,.party-root,.party-mate,.party-robot,.party-shine,.party-banner,.party-buttons{animation:none!important;opacity:1!important;transform:none!important}.confetti{display:none}}

/* Safari-compatible, clear Vietnamese lettering on victory screen */
.party-heading{
  display:flex;align-items:center;justify-content:center;
  font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  font-size:51px;font-weight:800;line-height:1.3;
  letter-spacing:0;white-space:nowrap;
  -webkit-text-stroke:0 transparent;text-shadow:none;
  color:#9e2f11;
  padding:11px 18px 4px;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
.party-subheading{font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;text-shadow:none;-webkit-text-stroke:0 transparent}
.party-buttons button{display:flex;align-items:center;justify-content:center;gap:14px;line-height:1.2;white-space:nowrap;text-shadow:none;-webkit-text-stroke:0 transparent;}
.party-buttons .btn-symbol{font-family:Arial,sans-serif;font-size:56px;font-weight:700;line-height:1;flex:none;}

/* 16:9 opening scene is independent of the gameplay and victory scene. */
.intro-screen{z-index:5;overflow:hidden;isolation:isolate}
.intro-screen .intro-brand{position:absolute;top:23px;left:33px;min-width:288px;border:5px solid #fff;border-radius:24px;padding:8px 22px 2px;background:linear-gradient(180deg,#17baff,#0648d8 75%,#082d98);color:#fff;font-size:30px;line-height:1.06;font-weight:800;text-align:center;text-shadow:0 3px #174594;box-shadow:0 6px 0 #ee9c31,0 10px 24px #10355a66;z-index:9}
.intro-screen .intro-brand b{color:#ffe131}.intro-brand small{display:block;font-size:20px;letter-spacing:3px;padding:4px 0 5px}
.intro-headline{position:absolute;left:415px;top:10px;width:850px;z-index:8;animation:introHeadline .9s cubic-bezier(.18,1.25,.36,1) both}
.intro-headline img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 8px #642f2177)}
.intro-pull-scene{position:absolute;left:73px;top:250px;width:1500px;height:500px;z-index:4;transform-origin:45% 82%;animation:introTeamTug 3.2s ease-in-out infinite}
.intro-pull-scene img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 6px #4f6a2833)}
.intro-ground{position:absolute;left:1010px;top:700px;width:315px;height:37px;background:radial-gradient(ellipse,#89421b 0%,#b16b2d 62%,#754116 85%,transparent 86%);border-radius:50%;opacity:.92;z-index:3;animation:introGround 3.2s ease-in-out infinite}
.intro-tip{position:absolute;top:711px;left:300px;width:1045px;text-align:center;font-size:32px;font-weight:800;color:#fff;background:linear-gradient(90deg,#ffffff00,#25498bd9 22%,#25498bd9 78%,#ffffff00);text-shadow:1px 3px #234474;padding:5px 8px 1px;border-radius:25px;z-index:7}
.intro-enter{position:absolute;z-index:10;left:558px;bottom:66px;width:556px;height:106px;border:6px solid white;border-radius:58px;background:linear-gradient(180deg,#b7fa59,#43d326 49%,#0b9d2c);color:white;font-size:49px;font-weight:800;text-shadow:1px 4px #12632c;box-shadow:0 8px 0 #a2651e,0 15px 32px #2a5b2c88;cursor:pointer;animation:introButtonPulse 2s ease-in-out infinite}
.intro-enter:hover{filter:brightness(1.1)}.intro-enter:focus-visible{outline:6px solid #ffce19;outline-offset:5px}
.intro-hint{position:absolute;bottom:14px;left:0;width:100%;text-align:center;z-index:7;color:#724012;font-size:22px;font-weight:800;text-shadow:1px 1px #fff9c0}
.intro-spark{position:absolute;color:#fff170;font-size:78px;z-index:6;text-shadow:0 0 28px #fff331;animation:introTwinkle 2.4s ease-in-out infinite}.intro-spark-a{left:1285px;top:380px}.intro-spark-b{left:1175px;top:575px;animation-delay:.7s}
@keyframes introHeadline{from{opacity:0;transform:translateY(-45px) scale(.88)}to{opacity:1;transform:none}}
@keyframes introTeamTug{0%,100%{transform:translate(0,0) rotate(0deg)}19%{transform:translate(-12px,3px) rotate(-.4deg)}31%{transform:translate(-24px,6px) rotate(-.7deg)}44%{transform:translate(-28px,4px) rotate(-.6deg)}58%{transform:translate(7px,-22px) rotate(1deg)}69%{transform:translate(2px,-11px) rotate(.2deg)}83%{transform:translate(0,0)}}
@keyframes introGround{0%,47%,100%{transform:scaleX(1)}62%{transform:scaleX(1.12)}}
@keyframes introTwinkle{0%,100%{opacity:.3;transform:scale(.65)}50%{opacity:1;transform:scale(1.2)}}
@keyframes introButtonPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.027)}}
@media(prefers-reduced-motion:reduce){.intro-pull-scene,.intro-headline,.intro-ground,.intro-enter,.intro-spark{animation:none!important}}