/* CSS dùng chung cho các màn Gamification / AI Practice / AI Speak trong app chính.
   MỌI class có tiền tố "gx-" để không đụng CSS của index.html. Bố cục chính của từng màn dùng style inline như canvas. */
.gx-screen{font-family:'Poppins',system-ui,sans-serif;color:#374151}
.gx-screen .main-area{background:#EEF3F8}
.gx-full{background:#07263B}
.gx-root button{font-family:inherit;cursor:pointer}
.gx-root button:disabled{cursor:not-allowed;opacity:.55}
.gx-root :focus-visible{outline:3px solid #F5B30B;outline-offset:2px}
.gx-root a{cursor:pointer}
[hidden]{display:none!important}

/* hiệu ứng dùng lại từ canvas */
@keyframes gx-shine{0%{transform:translateX(-160%) skewX(-20deg)}60%,100%{transform:translateX(420%) skewX(-20deg)}}
@keyframes gx-glow{0%,100%{box-shadow:0 0 10px rgba(255,214,102,.5),inset 0 0 0 2px rgba(255,243,207,.9)}50%{box-shadow:0 0 26px rgba(255,214,102,.95),inset 0 0 0 2px rgba(255,255,255,1)}}
@keyframes gx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gx-pulse{50%{transform:scale(1.06)}}
@keyframes gx-twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.gx-shine{position:absolute;top:-20%;left:0;width:26%;height:140%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));animation:gx-shine 3.2s ease-in-out infinite;pointer-events:none}
.gx-glow{animation:gx-glow 2.4s ease-in-out infinite}
.gx-float{animation:gx-float 3s ease-in-out infinite}
.gx-hex{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

.gx-star{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;animation:gx-twinkle 2.2s ease-in-out infinite}
@keyframes gx-flame{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.15) translateY(-2px)}}
.gx-flame{transform-origin:bottom center;animation:gx-flame .9s ease-in-out infinite}
/* viên đá (sprite canvas: 4 màu theo kỹ năng) */
.gx-gem{background-image:url('/assets/game/gems.png');background-repeat:no-repeat;background-size:202px 152px;display:inline-block}
.gx-gem-tv{background-position:-44px -23px}.gx-gem-nn{background-position:-110px -23px}.gx-gem-np{background-position:-44px -80px}.gx-gem-pa{background-position:-110px -80px}
.gx-gem-sm{background-size:101px 76px}.gx-gem-sm.gx-gem-tv{background-position:-22px -12px}.gx-gem-sm.gx-gem-nn{background-position:-55px -12px}.gx-gem-sm.gx-gem-np{background-position:-22px -40px}.gx-gem-sm.gx-gem-pa{background-position:-55px -40px}

/* thẻ tên / bubble / avatar (game-core) */
.gx-nameplate{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;max-width:420px;aspect-ratio:4.6/1;border-radius:10px;padding:0 12px 0 16px;box-sizing:border-box;
  background:linear-gradient(115deg,var(--a) 0%,var(--b) 62%,var(--c) 100%);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 6px 16px rgba(0,0,0,.18)}
.gx-nameplate.gx-sm{max-width:240px}
.gx-np-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.gx-np-text b{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 rgba(0,0,0,.25);color:#fff}
.gx-np-text span{font-size:11px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-nameplate.gx-sm .gx-np-text b{font-size:13px}.gx-nameplate.gx-sm .gx-np-text span{font-size:9px}
.gx-np-badge{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#FFF7D6,#E0A800);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(255,255,255,.7);flex-shrink:0}
.gx-nameplate.gx-sm .gx-np-badge{width:28px;height:28px}
.gx-np-star{font-weight:900;color:#5A3A00;font-size:15px}
.gx-np-shine{position:absolute;top:-20%;left:0;width:22%;height:140%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:translateX(-160%) skewX(-20deg)}
.gx-fx-shine .gx-np-shine,.gx-fx-sparkle .gx-np-shine,.gx-fx-fire .gx-np-shine{animation:gx-shine 3.2s ease-in-out infinite}
.gx-fx-sparkle{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 18px var(--c)}
.gx-fx-fire{box-shadow:inset 0 0 0 2px rgba(255,200,120,.7),0 0 22px var(--b)}
.gx-bubble{display:inline-block;background:var(--bg);color:var(--ink);border:2px solid var(--bd);border-radius:16px 16px 16px 4px;padding:6px 14px;font-size:14px;font-weight:600;max-width:100%}
.gx-avatar{display:inline-block;width:52px;height:52px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--ring);background:#ECFBFF;flex-shrink:0}
.gx-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
.gx-tchip{display:inline-flex;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap}.gx-t0{background:#F3F4F6;color:#6B7280}

/* toast + hướng dẫn + hộp thoại */
#gxToast{position:fixed;right:24px;top:24px;display:flex;flex-direction:column;gap:8px;z-index:9999;width:440px;max-width:calc(100% - 32px);font-family:'Poppins',sans-serif}
.gx-toast{background:#004671;color:#fff;border-radius:14px;padding:12px 16px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .4s,transform .4s}
.gx-toast b{color:#fff}.gx-toast.gx-out{opacity:0;transform:translateY(-10px)}
.gx-coach{position:fixed;inset:0;background:rgba(0,20,40,.5);display:flex;align-items:flex-end;justify-content:center;padding:24px;z-index:9990;font-family:'Poppins',sans-serif}
.gx-coach-card{display:flex;gap:12px;align-items:flex-end;width:560px;max-width:100%}
.gx-coach-bot{width:110px;height:110px;object-fit:contain;flex-shrink:0}
.gx-coach-body{background:#fff;border-radius:20px 20px 20px 4px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.gx-coach-body p{margin:0;font-size:15px;color:#111827;line-height:1.5}
.gx-coach-step{font-size:12px;font-weight:700;color:#0876B1}
.gx-coach-row{display:flex;gap:8px;align-items:center}
.gx-coach-say,.gx-coach-prev{font-size:13px;font-weight:600;color:#0876B1;padding:6px 12px;border-radius:999px;background:#ECFBFF;border:none;cursor:pointer;font-family:inherit}
.gx-coach-next{font-size:14px;font-weight:800;background:#F5B30B;color:#3A2600;padding:8px 18px;border-radius:999px;border:none;cursor:pointer;font-family:inherit}
.gx-modal{position:fixed;inset:0;background:rgba(0,20,40,.55);display:flex;align-items:center;justify-content:center;z-index:9980;padding:16px;font-family:'Poppins',sans-serif}
.gx-modal-card{background:#fff;border-radius:22px;padding:22px;width:460px;max-width:100%;display:flex;flex-direction:column;gap:10px;max-height:90%;overflow:auto;color:#374151}
.gx-modal-card ul{margin:0;padding-left:20px}
.gx-help{position:absolute;right:20px;bottom:20px;z-index:30;background:#fff;border-radius:999px;padding:10px 16px;font-weight:700;font-size:13px;color:#0876B1;box-shadow:0 6px 18px rgba(16,24,40,.18);border:none;cursor:pointer;font-family:'Poppins',sans-serif}
.gx-note{margin:12px 36px 0;padding:8px 14px;border-radius:12px;background:#FFF4DB;color:#8A5A00;font-size:13px}
/* Phản hồi đúng/sai (G.fx) */
@keyframes gxPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes gxShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes gxSlideUp{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes gxBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}
@keyframes gxDroop{0%{transform:translateY(0)}40%{transform:translateY(6px) rotate(-8deg)}100%{transform:translateY(2px) rotate(-4deg)}}
@keyframes gxFly{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@keyframes gxFlame{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes gxStarIn{0%{transform:scale(0) rotate(-40deg);opacity:0}70%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.gx-pop{animation:gxPop .42s cubic-bezier(.2,1.4,.4,1) both}
.gx-shake{animation:gxShake .42s ease both}
.gx-slide-up{animation:gxSlideUp .28s cubic-bezier(.2,.9,.3,1) both}
.gx-bounce{animation:gxBounce .7s ease both}
.gx-droop{animation:gxDroop .6s ease both}
.gx-flame{animation:gxFlame .5s ease 3}
.gx-star-in{animation:gxStarIn .5s cubic-bezier(.2,1.4,.4,1) both}
.gx-burst{position:absolute;left:62px;top:34px;width:0;height:0;pointer-events:none;z-index:5}
.gx-burst i{position:absolute;width:9px;height:9px;border-radius:2px;animation:gxFly .9s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes gxCta{0%,100%{transform:scale(1);box-shadow:0 3px 0 #C98F00,0 0 0 0 rgba(255,216,77,.6)}50%{transform:scale(1.05);box-shadow:0 3px 0 #C98F00,0 0 0 8px rgba(255,216,77,0)}}
@keyframes gxBossIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.gx-boss-idle{animation:gxBossIdle 2.4s ease-in-out infinite}
@keyframes gxAura{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
.gx-boss-aura{animation:gxAura 1.8s ease-in-out infinite}
@keyframes gxSpin{to{transform:rotate(360deg)}}
.gx-spin{animation:gxSpin 1s linear infinite}
/* Độ nhớ: lớp bụi phủ viên đá */
.gx-dustlayer{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 22% 30%,rgba(170,160,140,.95) 0 2.5px,transparent 3.5px),radial-gradient(circle at 70% 24%,rgba(170,160,140,.9) 0 2px,transparent 3px),
  radial-gradient(circle at 58% 68%,rgba(170,160,140,.95) 0 3px,transparent 4px),radial-gradient(circle at 30% 78%,rgba(170,160,140,.85) 0 2px,transparent 3px),
  radial-gradient(circle at 82% 82%,rgba(170,160,140,.9) 0 2.5px,transparent 3.5px),linear-gradient(160deg,rgba(205,195,175,.55),rgba(205,195,175,.25))}
.gx-dustlayer.gx-dust-faded{background:linear-gradient(160deg,rgba(225,222,215,.78),rgba(225,222,215,.62))}
.gx-dust-chip{position:absolute;right:-6px;top:-6px;z-index:2;font-size:10px;font-weight:800;color:#5A4A2A;background:#EADFC8;border:1.5px solid #FFFFFF;border-radius:999px;padding:1px 6px;white-space:nowrap}
@keyframes gxSweep{0%{transform:translateX(-120%) rotate(20deg)}100%{transform:translateX(220%) rotate(20deg)}}
.gx-quest-hot{animation:gxCta 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gx-root *,.gx-coach *{animation:none!important;transition:none!important}}