/* ===== Dùng chung cho các trò chơi ===== */
.gpanel{margin-top:6px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.choice{padding:14px 8px;font:inherit;color:inherit;text-align:center;background:#fff;border:var(--line);border-radius:22px;box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.choice:hover:not([disabled]){background:var(--sun)}
.choice__img{display:block;font-size:4rem;line-height:1.1}
.choice__label{display:block;font-weight:800}
.choice--right,.choice--right:hover{background:var(--grass)!important}
.choice--wrong{background:#ff8a8a!important;animation:shake .4s}

/* hiệu ứng tung emoji và chữ bay */
.fx{position:absolute;z-index:6;font-size:1.6rem;line-height:1;pointer-events:none;animation:gfly .95s ease-out forwards}
.fxtext{position:absolute;z-index:7;white-space:nowrap;font-size:1.25rem;font-weight:800;color:#fff;pointer-events:none;text-shadow:2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);animation:grise 1.2s ease-out forwards}
@keyframes gfly{from{opacity:1;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(1.3)}}
@keyframes grise{from{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}to{opacity:0;transform:translate(-50%,-50px) scale(1)}}
@keyframes gfade{from{opacity:0}to{opacity:1}}
@keyframes ghop{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes gbreath{50%{transform:scale(1.06)}}
@keyframes gpopin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes gcloud{from{left:-14%}to{left:106%}}
.rescue__cloud,.escape__cloud,.treasure__cloud{position:absolute;top:8px;left:-14%;font-size:2.6rem;line-height:1;opacity:.85;animation:gcloud 38s linear infinite}
.rescue__cloud--2,.escape__cloud--2,.treasure__cloud--2{top:34px;font-size:1.8rem;animation-duration:55s;animation-delay:-20s}

/* ===== 1. Chạy bộ ===== */
.run{position:relative;display:grid;gap:8px;margin-bottom:14px;overflow:hidden}
.run__crowd{display:flex;justify-content:space-around;font-size:1.6rem;line-height:1}
.run__crowd span,.tug__crowd span{display:inline-block;animation:ghop .5s ease-in-out infinite alternate}
.lane{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#eaf7ff;border:3px solid var(--ink);border-radius:16px}
.lane--hero{background:#fff3b8}
.lane--win{box-shadow:0 0 0 4px var(--sun),0 0 22px 6px #ffe36e}
.lane__tag{width:2.2rem;font-size:.9rem;font-weight:800}
.lane__track{position:relative;flex:1;height:2.8rem;border-bottom:4px dashed var(--ink)}
.lane__runner{position:absolute;bottom:0;left:calc(var(--x) * (100% - 2.4rem));width:2.4rem;font-size:2rem;line-height:1;text-align:center;transition:left .1s linear}
.lane__runner--go{animation:grun .28s ease-in-out infinite alternate}
.lane__runner--go::after{content:'💨';position:absolute;right:100%;bottom:0;font-size:1.1rem;animation:gfade .3s ease infinite alternate}
.lane__runner--stuck{animation:shake .3s infinite}
.lane__runner--jump{animation:gjump .7s ease}
.lane__runner--trip{animation:gtrip .9s ease}
@keyframes grun{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-8px) rotate(6deg)}}
@keyframes gjump{40%{transform:translateY(-36px) rotate(-14deg)}100%{transform:translateY(0)}}
@keyframes gtrip{30%,70%{transform:rotate(80deg) translateY(4px)}100%{transform:rotate(0)}}
.lane__obstacle{position:absolute;bottom:0;left:calc(var(--c) * (100% - 2.4rem) + 1.8rem);font-size:1.6rem;line-height:1}
.lane__obstacle--hit{animation:shake .3s infinite}
.lane__obstacle--done{opacity:.25}
.lane__flag{font-size:1.8rem}
.run__tap{text-align:center}
.run__btn{padding:14px 46px;font-size:1.8rem}
.run__count{font-size:3.2rem;font-weight:800;text-align:center;animation:gpopin .6s ease}
.run__board{padding:0;font-size:1.4rem;text-align:center;list-style:none}
.run__rank{max-width:260px;margin:4px auto;padding:2px 14px;animation:gpopin .5s ease both}
.run__rank:nth-child(2){animation-delay:.15s}
.run__rank:nth-child(3){animation-delay:.3s}
.run__rank:nth-child(4){animation-delay:.45s}
.run__rank:nth-child(5){animation-delay:.6s}
.run__rank--me{font-weight:800;background:var(--sun);border-radius:999px}

/* ===== 2. Kéo co ===== */
.tug{position:relative;margin-bottom:14px;padding:8px 10px 12px;overflow:hidden;background:linear-gradient(90deg,#d8f8e1 0 25%,#eaf7ff 25% 75%,#ffe3e3 75%);border:var(--line);border-radius:20px}
.tug__crowd{display:flex;justify-content:space-around;font-size:1.5rem;line-height:1}
.tug__field{display:flex;align-items:center;gap:6px;padding:26px 0 8px}
.tug__team{display:flex;font-size:2.2rem;line-height:1}
.tug__team--rival{transform:translateX(calc(var(--p) * -48px));transition:transform .8s}
.tug__man{display:inline-block;transform-origin:50% 100%;animation:glean .7s ease-in-out infinite alternate}
.tug__team--rival .tug__man{animation-direction:alternate-reverse}
@keyframes glean{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.tug--pull .tug__team--hero .tug__man,.tug--lose .tug__team--rival .tug__man{animation-duration:.18s}
.tug--pull .tug__rope,.tug--lose .tug__rope{animation:shake .25s infinite}
.tug__rope{position:relative;flex:1;height:10px;background:repeating-linear-gradient(90deg,#b9803f 0 10px,#8a5a2a 10px 20px);border:3px solid var(--ink);border-radius:8px}
.tug__flag{position:absolute;top:-34px;left:calc(50% - var(--p) * 42%);font-size:1.8rem;transform:translateX(-50%);transition:left .8s}
.tug--win .tug__team--rival .tug__man{animation:gfall .8s forwards}
.tug--win .tug__team--hero .tug__man{animation:ghop .4s ease-in-out infinite alternate}
@keyframes gfall{to{transform:rotate(95deg) translateY(8px)}}

/* ===== 3. Tìm kho báu ===== */
.treasure{position:relative;height:270px;margin-bottom:14px;overflow:hidden;background:linear-gradient(#bfe9ff,#f9e7b8);border:var(--line);border-radius:20px}
.treasure__wave{position:absolute;right:0;bottom:0;left:0;font-size:1.4rem;line-height:1;white-space:nowrap;animation:ghop 1.2s ease-in-out infinite alternate}
.treasure__ship{position:absolute;right:8%;bottom:14px;font-size:2.2rem;line-height:1;animation:gsail 3s ease-in-out infinite alternate}
@keyframes gsail{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(-6px)}}
.treasure__map{position:absolute;top:8px;left:10px;display:flex;gap:4px}
.treasure__tile{padding:2px 6px;font-size:1.3rem;font-style:normal;background:#fff;border:3px solid var(--ink);border-radius:8px;opacity:.5}
.treasure__tile--got{background:var(--sun);opacity:1;animation:gpopin .5s ease}
.treasure__spot,.treasure__big,.treasure__hero,.treasure__foot{position:absolute;line-height:1;transform:translate(-50%,-50%)}
.treasure__spot{display:grid;justify-items:center}
.treasure__place{font-size:2.4rem}
.treasure__chest{font-size:1.8rem}
.treasure__chest--shake{animation:shake .3s 2}
.treasure__big{font-size:3.4rem;transition:opacity .8s,transform .8s}
.treasure__big--hidden{filter:grayscale(1);opacity:.25}
.treasure__big--open{transform:translate(-50%,-50%) scale(1.35);filter:drop-shadow(0 0 14px #ffe36e)}
.treasure__hero{z-index:2;font-size:2.4rem;transition:left .8s ease,top .8s ease}
.treasure__hero--walk{animation:gwalk .3s ease-in-out infinite alternate}
@keyframes gwalk{from{transform:translate(-50%,-50%) rotate(-8deg)}to{transform:translate(-50%,-64%) rotate(8deg)}}
.treasure__foot{font-size:1.2rem;animation:gfade .4s ease both}
.treasure__piece{position:absolute;z-index:5;font-size:2rem;line-height:1;transform:translate(-50%,-50%);transition:left .8s ease-in,top .8s ease-in}

/* ===== 4. Giải cứu khỏi quái vật ===== */
.rescue{position:relative;height:240px;margin-bottom:14px;overflow:hidden;background:linear-gradient(#bfe9ff,#e9fbe4);border:var(--line);border-radius:20px}
.rescue__ground{position:absolute;right:0;bottom:0;left:0;height:14px;background:#7ed957;border-top:3px solid var(--ink)}
.rescue__hero{position:absolute;bottom:18px;left:4%;font-size:3.6rem;line-height:1;animation:ghop .9s ease-in-out infinite alternate}
.rescue__hero--shoot{animation:gback .4s ease}
@keyframes gback{30%{transform:translateX(-12px) rotate(-10deg)}}
.rescue__monster{position:absolute;right:5%;bottom:18px;font-size:6rem;line-height:1;animation:gbreath 1.6s ease-in-out infinite;transition:opacity .8s}
.rescue__monster--hit{animation:shake .4s;filter:brightness(1.6)}
.rescue__monster--heal{animation:gheal .9s ease;filter:hue-rotate(90deg) brightness(1.2)}
@keyframes gheal{50%{transform:scale(1.28)}}
.rescue__mood{position:absolute;right:12%;bottom:132px;font-size:2rem;line-height:1;animation:ghop .5s ease-in-out infinite alternate}
.rescue__victim{position:absolute;right:21%;bottom:92px;font-size:2.6rem;line-height:1;animation:gstruggle .5s ease-in-out infinite alternate;transition:right .9s,bottom .9s}
.rescue__victim--cry{animation:shake .25s infinite}
@keyframes gstruggle{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.rescue__hp{position:absolute;top:10px;right:12px;display:flex;gap:4px}
.rescue__seg{width:22px;height:12px;background:#ff4d6d;border:2px solid var(--ink);border-radius:6px;transition:background .3s}
.rescue__seg--off{background:#d9d4e6}
.rescue__bubble{position:absolute;left:18%;bottom:74px;font-size:2.2rem;line-height:1;animation:gshoot .6s ease-in forwards}
@keyframes gshoot{0%{transform:translate(0,0) scale(.6)}50%{transform:translate(calc(var(--tx) * .5),-70px) scale(1.15)}100%{transform:translate(var(--tx),0) scale(1)}}
.rescue--won .rescue__monster{animation:none;opacity:0;transform:rotate(90deg) scale(.5)}
.rescue--won .rescue__mood{display:none}
.rescue--won .rescue__victim{right:70%;bottom:18px}

/* ===== 5. Đua xe chạy trốn quái vật ===== */
.escape{position:relative;height:160px;margin-bottom:14px;overflow:hidden;background:linear-gradient(#bfe9ff 60%,#9be28d 60%);border:var(--line);border-radius:20px}
.escape__scenery{position:absolute;left:0;bottom:62px;font-size:1.8rem;line-height:1;white-space:nowrap;animation:gscroll 5s linear infinite;animation-play-state:paused}
.escape--moving .escape__scenery{animation-play-state:running}
@keyframes gscroll{to{transform:translateX(-50%)}}
.escape__road{position:absolute;right:0;bottom:18px;left:0;height:46px;background:#3d3d4e linear-gradient(90deg,#fff 0 22px,transparent 22px 44px) 0 50%/44px 4px repeat-x}
.escape--moving .escape__road{animation:groad .4s linear infinite}
@keyframes groad{to{background-position:-44px 50%}}
.escape__bend,.escape__car,.escape__monster,.escape__shelter{position:absolute;line-height:1}
.escape__bend{bottom:64px;font-size:1.8rem;animation:gblink .8s steps(2) infinite}
@keyframes gblink{50%{opacity:.4}}
.escape__car{bottom:22px;font-size:3rem;transition:left 1s ease,transform .6s,opacity .6s}
.escape--moving .escape__car{animation:gdrive .22s ease-in-out infinite alternate}
@keyframes gdrive{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.escape__car--boost::before{content:'🔥';position:absolute;right:100%;top:30%;font-size:1.6rem;animation:gfade .2s ease infinite alternate}
.escape__monster{bottom:20px;font-size:3.6rem;transition:left 1.2s ease;animation:gbob .5s ease-in-out infinite alternate}
@keyframes gbob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-6px) rotate(4deg)}}
.escape__monster--lunge{animation:glunge .6s ease}
@keyframes glunge{40%{transform:scale(1.3) translateX(12px)}}
.escape--shake{animation:shake .4s}
.escape__shelter{right:3%;bottom:20px;font-size:3.4rem}
.escape--safe .escape__car{opacity:0;transform:scale(0)}
.escape--safe .escape__shelter{filter:drop-shadow(0 0 12px #ffe36e);animation:gbreath .8s ease-in-out infinite}
.escape--safe .escape__monster{animation:none}