body.game-playing{background:#0d1239}body.game-playing .sidebar,body.game-playing .topbar,body.game-playing .class-context,body.game-playing .mobile-nav,body.game-playing .main-shell>footer{display:none}body.game-playing .main-shell>main{padding:0;max-width:none;min-height:100dvh}body.game-playing .layout{min-height:100dvh}
.blast-shell{--space:#0c1234;color:#fff;background:var(--space);min-height:100dvh;display:flex;flex-direction:column;isolation:isolate}
.blast-top{display:flex;align-items:center;gap:18px;padding:15px 28px;background:#101833;border-bottom:1px solid #30415b;min-height:82px}.blast-back,.blast-sound{color:#e0e8ff;background:#1b2850;border:1px solid #3c4c78;border-radius:12px;padding:10px 15px}.blast-back{font-size:24px;line-height:1;width:45px;height:45px}.blast-top>div{min-width:0;flex:1}.blast-top h1{font-size:22px;margin:0;display:flex;align-items:center;gap:14px}.blast-top h1 span{color:#aec5f1;font-weight:500;font-size:12px;letter-spacing:0}.blast-top p{font-size:12px;color:#b6c7e7;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80ch}.blast-sound{font-size:12px;white-space:nowrap}
.blast-hud{display:flex;align-items:center;gap:28px;max-width:1120px;width:100%;margin:auto;padding:17px 30px;position:relative;z-index:3}.blast-hud>div>span,.blast-goal>div>span{display:block;font-size:11px;color:#b4c7ef}.blast-hud strong{font-size:26px;line-height:1.3;font-variant-numeric:tabular-nums}.blast-goal{flex:1}.blast-goal>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:15px}.blast-goal strong{font-size:17px}.blast-meter{height:9px;background:#2d3861;border-radius:20px;overflow:hidden;margin-top:10px}.blast-meter>span{display:block;width:100%;height:100%;background:#57e4c1;transform:scaleX(0);transform-origin:left;transition:transform 180ms ease}.blast-clock strong{color:#ffe597;font-size:32px}.blast-clock strong span{font-size:14px;margin-left:3px}.blast-clock.urgent strong{color:#ff9a99}.blast-total{text-align:right}
.blast-arena{position:relative;flex:1;min-height:490px;overflow:hidden;background:radial-gradient(ellipse at 15% 80%,#1e285d 0,transparent 52%),radial-gradient(ellipse at 90% 12%,#242453 0,transparent 48%),#0c1234}.blast-stars{position:absolute;inset:0;background-image:radial-gradient(circle at 9% 14%,#9aadeb 1px,transparent 2px),radial-gradient(circle at 65% 18%,#a9c8ff 1px,transparent 2px),radial-gradient(circle at 40% 48%,#798dcd 1px,transparent 2px),radial-gradient(circle at 84% 62%,#a9c8ff 2px,transparent 3px),radial-gradient(circle at 12% 80%,#6379c4 2px,transparent 3px);background-size:317px 233px,431px 307px,281px 287px,619px 461px,757px 499px;opacity:.55;pointer-events:none}.blast-orbit{position:absolute;border:2px solid #35397555;border-radius:50%;pointer-events:none;transform:rotate(-24deg)}.orbit-one{width:1000px;height:450px;left:-600px;top:60%}.orbit-two{width:600px;height:1200px;right:-450px;top:-600px}
.blast-targets{position:absolute;inset:0 0 110px}.blast-planet{--surface:#3e48a9;--edge:#8b9bff;position:absolute;left:var(--px);top:var(--py);width:142px;height:142px;border:2px solid var(--edge);border-radius:46% 54% 49% 51%/54% 47% 53% 46%;background:radial-gradient(circle at 30% 24%,var(--surface),#18265a 76%);color:white;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);padding:14px;animation:planet-drift 5s ease-in-out infinite;animation-delay:var(--delay);box-shadow:inset -10px -15px 18px #00000059,0 12px 24px #0000004d;transition:border-color 120ms,background-color 120ms;isolation:isolate}.planet-1{--surface:#236f7c;--edge:#59d5cc}.planet-2{--surface:#995f79;--edge:#f2a8c0}.planet-3{--surface:#876837;--edge:#e9c87d}.blast-planet strong{position:relative;z-index:2;font-size:23px;line-height:1.45;letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 2px 4px #0009;background:#091f4699;border-radius:9px;padding:5px 8px}.blast-planet.long-word strong{font-size:16px}.blast-planet small{position:absolute;bottom:-13px;left:calc(50% - 13px);border:1px solid #aabbe4;color:#e5ecff;background:#172447;border-radius:50%;width:26px;height:26px;font-size:12px;display:grid;place-items:center}.planet-craters{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:radial-gradient(ellipse at 25% 20%,#05173a55 0 8%,transparent 9%),radial-gradient(ellipse at 75% 35%,#05173a44 0 6%,transparent 7%),radial-gradient(ellipse at 48% 83%,#05173a66 0 10%,transparent 11%);z-index:-1}.blast-planet:hover,.blast-planet:focus-visible{border-color:#fff;outline:3px solid #ffdf93;outline-offset:5px}.blast-planet.is-hit{animation:planet-pop 320ms ease-out forwards;pointer-events:none;opacity:1}.blast-planet.is-miss{animation:planet-miss 240ms ease;opacity:.42;filter:saturate(.25)}
.blast-launcher{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:25px;max-width:min(720px,92%);width:max-content;z-index:4}.blast-gun{--aim:0deg;position:relative;width:105px;height:105px;flex:none}.blast-gun-core{position:absolute;inset:14px;border-radius:50%;background:#54e0bd;border:7px solid #25a7a4;box-shadow:inset 0 -8px 0 #24bba1,0 8px 0 #063b61;display:grid;place-items:center;z-index:2}.blast-gun-core span{font-size:28px;font-weight:900;color:#074753}.blast-gun-barrel{position:absolute;width:26px;height:78px;background:#9ed8e7;border:5px solid #658db4;border-radius:10px;left:40px;top:-16px;transform-origin:50% 76px;transform:rotate(var(--aim));transition:transform 65ms linear}.gun-wing{position:absolute;width:28px;height:49px;border-radius:13px;background:#7585ff;bottom:6px;box-shadow:inset 0 -9px 0 #dfe9ff;z-index:3}.wing-left{left:0;transform:rotate(15deg)}.wing-right{right:0;transform:rotate(-15deg)}.blast-prompt{background:#15274b;border:1px solid #52669d;border-radius:15px;min-width:200px;max-width:490px;padding:15px 22px}.blast-prompt-copy>span{display:block;font-size:11px;letter-spacing:.01em;color:#b8cdef;margin-bottom:5px}.blast-prompt strong{font-size:24px;line-height:1.35;font-weight:800;display:block;overflow-wrap:anywhere;color:#fff5ce}.blast-feedback{position:absolute;bottom:132px;left:0;right:0;text-align:center;font-size:13px;color:#bcefe3;min-height:22px;pointer-events:none}
.blast-shot{position:absolute;width:6px;height:20px;background:#c6fff1;border-radius:7px;box-shadow:none;z-index:7;pointer-events:none}.blast-score-pop{position:absolute;z-index:8;pointer-events:none;font-size:24px;font-weight:900;animation:blast-points 700ms ease-out forwards;color:#b9ffe3;text-shadow:0 3px 8px #0009}.blast-score-pop.miss{font-size:18px;color:#ffc4b8}.blast-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:#080d27a8;backdrop-filter:blur(4px)}.blast-intro{max-width:470px;background:#152347;border:1px solid #506495;border-radius:24px;text-align:center;padding:28px;color:#f4f7ff;box-shadow:0 22px 50px #0006}.blast-intro h2{font-size:29px;margin:12px 0}.blast-intro p{font-size:14px;color:#cad8f4;margin:0 0 18px}.blast-intro ul{text-align:left;padding:0;list-style:none;display:grid;gap:9px;font-size:13px;color:#dbe5ff;margin:18px 0 24px}.blast-intro .btn{background:#b2f4dc;border-color:#b2f4dc;color:#123c43;font-size:16px;padding:13px 25px}.blast-intro small{display:block;margin-top:15px;color:#b7c8e8;font-size:12px}.blast-mini-planet{display:grid;place-items:center;width:64px;height:64px;border-radius:47% 53% 45% 55%;background:#5771d7;border:2px solid #a4bcff;margin:0 auto;font-size:32px;font-weight:800}.blast-level-clear{text-align:center;animation:blast-clear 320ms var(--ease)}.blast-level-clear>span{font-size:56px;color:#ffe697}.blast-level-clear h2{font-size:38px;color:#b9ffe3;margin:8px 0 12px}.blast-level-clear p{font-size:17px;color:#e8efff}.blast-footer{display:flex;justify-content:space-between;gap:14px;padding:11px 28px;background:#101833;color:#bdd0f1;border-top:1px solid #2d3e65;font-size:12px}
@keyframes planet-drift{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,calc(-50% - 9px)) rotate(2deg)}}@keyframes planet-pop{to{transform:translate(-50%,-50%) scale(1.32);opacity:0}}@keyframes planet-miss{25%{translate:-6px 0}75%{translate:6px 0}}@keyframes blast-points{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-110px)}}@keyframes blast-clear{from{opacity:.3;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(min-height:800px){.blast-arena{min-height:calc(100dvh - 220px)}.blast-targets{bottom:130px}.blast-planet{width:160px;height:160px}.blast-launcher{bottom:23px}}
@media(max-width:600px){.blast-top{padding:10px 14px;gap:10px;min-height:70px}.blast-top h1{font-size:20px}.blast-top h1 span{display:none}.blast-top p{font-size:11px}.blast-sound{font-size:10px;padding:9px}.blast-hud{padding:13px 17px;gap:16px}.blast-hud strong{font-size:22px}.blast-hud .blast-total{display:none}.blast-goal strong{font-size:14px}.blast-goal>div>span{font-size:10px}.blast-arena{min-height:calc(100dvh - 190px)}.blast-targets{bottom:115px}.blast-planet{width:109px;height:109px;padding:7px}.blast-planet strong{font-size:18px}.blast-planet.long-word strong{font-size:13px}.blast-launcher{width:calc(100% - 30px);gap:13px;bottom:10px}.blast-gun{width:76px;height:84px}.blast-gun-core{inset:10px 6px;border-width:5px}.blast-gun-core span{font-size:22px}.blast-gun-barrel{width:20px;height:63px;left:28px;top:-10px;transform-origin:50% 60px;border-width:4px}.gun-wing{width:20px;height:38px;bottom:3px}.wing-left{left:-3px}.wing-right{right:-3px}.blast-prompt{min-width:0;flex:1;padding:12px 14px;max-width:none}.blast-prompt strong{font-size:18px;max-height:100px;overflow-y:auto}.blast-prompt-copy>span{font-size:10px}.blast-feedback{bottom:116px;font-size:11px}.blast-footer{padding:10px 15px;font-size:10px}.blast-footer>span:last-child{display:none}.blast-intro{padding:22px 20px}.blast-intro h2{font-size:25px}.blast-intro ul{font-size:12px}.blast-level-clear h2{font-size:30px}.blast-level-clear p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.blast-planet,.blast-level-clear,.blast-score-pop{animation:none}.blast-planet.is-hit{opacity:0;transform:translate(-50%,-50%)}.blast-planet.is-miss{opacity:.45}.blast-meter>span,.blast-gun-barrel{transition:none}.blast-score-pop{transform:translate(-50%,-50%)}.blast-overlay{backdrop-filter:none}}

@media(max-width:600px){.blast-planet:nth-child(odd){left:24%}.blast-planet:nth-child(even){left:76%}.blast-planet:nth-child(-n+2){top:16%}.blast-planet:nth-child(n+3):nth-child(-n+4){top:47%}.blast-planet:nth-child(n+5){top:78%}}

/* Clip the decorative orbits without creating a hidden scroll container.
   Otherwise focusing the start button can scroll the whole arena. */
.blast-arena{overflow:clip}
@media(max-width:600px){.blast-arena{min-height:max(520px,calc(100dvh - 190px))}.blast-planet:nth-child(-n+2){top:20%}.blast-planet:nth-child(n+3):nth-child(-n+4){top:49%}}

/* The selected vocabulary photograph stays beside the Vietnamese prompt. */
.blast-prompt{display:flex;align-items:center;gap:16px;max-width:600px}.blast-prompt-copy{min-width:0}.blast-prompt-image{width:110px;height:86px;margin:0;flex:none;border-radius:10px;overflow:hidden;background:#edf2f8;display:grid;place-items:center}.blast-prompt-image img{display:block;width:100%;height:100%;object-fit:contain}.blast-prompt-image>span{font-size:42px}.blast-prompt-image .photo-unavailable{min-height:0;font-size:10px;padding:8px}.blast-targets{bottom:160px}.blast-feedback{bottom:143px}
@media(max-width:600px){.blast-prompt{gap:10px;padding:10px;max-width:none}.blast-prompt-image{width:70px;height:70px}.blast-prompt-copy>span{font-size:9px}.blast-prompt strong{font-size:16px;max-height:76px}.blast-launcher{gap:10px}.blast-gun{width:63px}.blast-gun-barrel{left:22px}.blast-targets{bottom:150px}.blast-feedback{bottom:127px}}