/* A single spatial story: distant opponent, foreground cockpit, upward energy. */
.in-battle { min-height:100dvh; background:#0c122b; color:#edf4ff; background-image:radial-gradient(ellipse at 50% 20%,#243263 0,transparent 65%); }
.in-battle .site-header { max-width:640px; padding:14px 24px; }
.in-battle .brand { font-size:15px; }
.in-battle .brand small { color:#9ba9d0; font-size:6px; }
.in-battle .menu-toggle { border-color:#ffffff40; width:38px;height:38px; }
.in-battle .menu-toggle span { background:#edf4ff; }
.in-battle main { max-width:600px; min-height:0; padding:0 16px 26px; }
.in-battle .site-footer { display:none; }
.in-battle .preview-label { height:22px; background:#060b1e; color:#aebde6; }
.in-battle #storage-warning { color:#202b34; }
.in-battle dialog { color:#202b34; }
.battle { position:relative; isolation:isolate; max-width:520px; margin:auto; }
.enemy-stage { position:relative;height:195px;overflow:hidden;border-radius:24px 24px 0 0;background:radial-gradient(ellipse at 50% 60%,#4a285e77,transparent 55%); }
.enemy-stage::before { content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 12% 30%,#b0c9ff 1px,transparent 2px),radial-gradient(circle at 83% 25%,#fff 1px,transparent 2px),radial-gradient(circle at 72% 67%,#90a7d9 1px,transparent 2px),radial-gradient(circle at 24% 76%,#90a7d9 1px,transparent 2px); }
.enemy-status { position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px 7px;font-size:10px;color:#c9d4f1; }
.enemy-tag { display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.04em;background:#ef62761c;border:1px solid #ed66775c;border-radius:20px;color:#ffb2bd;padding:5px 9px; }
.enemy-tag::before { content:'◆';font-size:7px;color:#ff627c; }
.enemy-hp { position:relative;z-index:2;height:5px;background:#ffffff18;margin:0 17px;border-radius:10px;overflow:hidden; }
.enemy-hp>span { display:block;height:100%;background:linear-gradient(90deg,#ff6676,#ffb376);border-radius:10px;transition:width .55s ease-out; }
.enemy-sprite { display:block;position:absolute;left:50%;top:51px;transform:translateX(-50%);height:140px;width:140px;object-fit:contain;filter:drop-shadow(0 10px 20px #040b2d99);animation:enemy-hover 4s ease-in-out infinite; }
.enemy-defeated .enemy-sprite { filter:grayscale(.3);opacity:.7;transform:translateX(-50%) rotate(-15deg);animation:none; }
.target-ring { position:absolute;left:50%;top:62px;transform:translateX(-50%);width:126px;height:126px;border:1px dashed #ee6d814d;border-radius:50%; }
.target-ring::before,.target-ring::after { content:'';position:absolute;background:#ff819888;left:50%;top:-5px;height:10px;width:1px; }
.target-ring::after { top:auto;bottom:-5px; }
.target-coordinate { position:absolute;right:20px;top:123px;font-size:7px;line-height:1.8;letter-spacing:1.5px;color:#8c9cc5; }
.cockpit { position:relative;border-radius:28px 28px 20px 20px;padding:18px 22px 12px;background:#eef3ff;color:#172239;border:1px solid #c3d2e5;box-shadow:0 -5px 35px #6bc8f426,0 20px 60px #0004;overflow:hidden; }
.cockpit::before { content:'';position:absolute;top:0;left:34%;right:34%;height:3px;background:#6fbfff;box-shadow:0 0 14px #168bff; }
.console-top { display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.04em;color:#63728b; }
.console-top>b { font-size:25px;line-height:1;letter-spacing:-1px;color:#172239; }
.console-top small { font-size:12px;letter-spacing:0;color:#7687a2; }
.mission-progress { display:flex;justify-content:space-between;gap:5px;margin:12px 0; }
.mission-dot { width:28px;height:28px;border:1px solid #ccd6e7;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#93a0b6;background:#e1e8f3; }
.mission-dot.current { border:2px solid #7060e7;background:#fff;color:#6c51db;box-shadow:0 0 0 3px #7665df14; }
.mission-dot.good { background:#11a864;color:white;border-color:#11a864; }
.mission-dot.bad { background:#e6667a;color:white;border-color:#e6667a; }
.power-bank { display:flex;align-items:center;gap:10px;background:#192842;border-radius:9px;padding:9px 11px;color:#b6c8e5;box-shadow:inset 0 1px 3px #0004; }
.power-bank>span { font-size:9px;white-space:nowrap; }
.power-bank>b { color:#8bffbd;font-size:18px;white-space:nowrap;line-height:1; }
.power-bank small { font-size:9px;color:#9fb2cf; }
.power-cells { display:flex;gap:3px;flex:1; }
.power-cells i { display:block;height:14px;flex:1;background:#344361;border-radius:2px; }
.power-cells .charged { background:#60f4aa;box-shadow:0 0 8px #4effa470; }
.power-gain { animation:bank-charge .65s ease-out; }
.question-card h1 { font-size:16px;letter-spacing:.01em;text-align:center;margin:16px 0 4px; }
.quiz-battle .flag-stage { position:relative;height:113px;margin:5px 0 12px; }
.quiz-battle .flag-stage img { width:180px;height:105px;max-height:105px;max-width:180px;filter:drop-shadow(0 3px 4px #101d3420); }
.quiz-battle .options { gap:9px; }
.quiz-battle .option { background:#fff;border:1px solid #c6d2e5;border-bottom:3px solid #b7c6db;border-radius:12px;min-height:61px;padding:11px 10px;font-size:14px;line-height:1.5;gap:8px;transition:background .08s,transform .08s; }
.quiz-battle .option:active { transform:translateY(2px);border-bottom-width:1px; }
.answer-symbol { font-size:10px;color:#8a99ae;min-width:12px;text-align:center; }
.quiz-battle .option.correct { background:#079d58;color:white;border-color:#087a49;box-shadow:0 0 0 3px #4be89755,0 5px 15px #079d5830;animation:correct-bounce .35s ease-out; }
.quiz-battle .option.wrong { background:#dc3b5a;color:white;border-color:#af2442;animation:wrong-nudge .3s ease-out; }
.quiz-battle .option.correct .answer-symbol,.quiz-battle .option.wrong .answer-symbol { color:white;font-size:20px; }
.quiz-battle .option:disabled:not(.correct):not(.wrong) { opacity:.48; }
@media(hover:hover) and (pointer:fine){.quiz-battle .pointer-moved .option:hover:not(:disabled) { background:#e7e1ff;border-color:#9a8bde; }}
.answer-good .cockpit { background:#dff9ec;border-color:#62dc9a; }
.answer-bad .cockpit { background:#ffebef;border-color:#ee99a8; }
.verdict { position:absolute;right:calc(50% - 116px);top:5px;display:grid;place-items:center;width:65px;height:65px;border-radius:50%;font-size:60px;line-height:1;font-weight:700;box-shadow:0 5px 20px #0002;animation:verdict-pop .3s cubic-bezier(.2,1.4,.4,1); }
.verdict.good { background:#079d58;color:white; }
.verdict.bad { background:#dc3b5a;color:white;font-size:54px; }
.answer-good .flag-stage::after { content:'✦　✧　✦';position:absolute;left:0;right:0;top:0;text-align:center;color:#0caa62;font-size:24px;letter-spacing:25px;animation:charge-particles .7s both;pointer-events:none; }
.answer-message { display:flex;justify-content:center;align-items:center;gap:7px;min-height:37px;padding-top:6px;font-size:10px;color:#76839b;white-space:normal; }
.answer-message img { width:23px;max-height:16px;object-fit:contain; }
.answer-message b { font-size:13px; }
.answer-message.good { color:#057444; }
.answer-message.bad { color:#b42645; }
.answer-message.good span { background:#b0efca;border-radius:20px;padding:4px 9px; }
.auto-timer { position:absolute;bottom:0;left:0;right:0;height:3px;background:#a4dbc0; }
.auto-timer::after { content:'';display:block;background:#079d58;height:100%;transform-origin:left;animation:auto-progress var(--dwell) linear forwards; }
.auto-timer.bad { background:#efbec7; }.auto-timer.bad::after { background:#d04764; }
.question-enter { animation:question-in .2s ease-out; }
.home-console h1,.fire-console h1,.result-console h1 { font-size:24px;text-align:center; }
.home-console .eyebrow,.fire-console .eyebrow,.result-console .eyebrow { text-align:center;color:#6b58cb;font-size:9px; }
.home-console .sub { text-align:center;margin:12px 0 22px;font-size:12px; }
.battle .primary { background:#7252df;border-bottom:4px solid #4b32a7;box-shadow:0 5px 16px #583daf2b;color:white;margin:12px 0 5px;min-height:57px;padding:14px 20px; }
.battle .primary:hover { background:#8062ea; }
.battle .primary:active { transform:translateY(3px);border-bottom-width:1px; }
.fire-console .primary { background:#e7ff76;border-color:#9aad40;color:#1a3425;font-size:18px;box-shadow:0 0 28px #cbf96b44; }
.fire-console .primary .arrow { font-size:0; }.fire-console .primary .arrow::after { content:'↑';font-size:25px; }
.fire-console { padding-top:22px;text-align:center; }
.fire-console h1 { font-size:22px; }
.reactor { width:116px;height:116px;position:relative;display:grid;place-items:center;margin:20px auto 12px;background:radial-gradient(circle,#c4ffc9,#def7ff 60%,transparent 61%); }
.reactor b { color:#14775a;font-size:45px;line-height:1;z-index:1; }
.reactor small { display:block;font-size:8px;letter-spacing:3px;margin-top:6px; }
.reactor-ring { position:absolute;inset:0;border-radius:50%;border:2px solid #91c9b6;border-top-color:#0caa68;border-right-color:#0caa68;animation:reactor-spin 5s linear infinite; }
.fire-explain { font-size:12px;color:#65758a;margin-bottom:14px; }
.perfect-round .reactor { background:radial-gradient(circle,#faff8d,#f5edcd 60%,transparent 61%); }
.perfect-round h1 { color:#ad7915; }
.result-console { padding-top:22px; }
.result-console h1 { font-size:22px; }
.team-equation { display:flex;align-items:center;justify-content:space-between;gap:6px;margin:22px 0 10px;text-align:center; }
.team-equation span { font-size:9px;color:#65758c; }
.team-equation b { display:block;font-size:30px;line-height:1.4;color:#203b5b; }
.team-equation i { font-size:17px;color:#9dabc2;font-style:normal; }
.team-equation .yours b { color:#0c9c5c; }
.team-equation .sum b { color:#7850d6;font-size:38px; }
.team-note { text-align:center; }
.result-console .badge-list { margin:16px 0; }
.result-console .badge { padding:12px 0; }.result-console .badge-icon { background:#ffe67d; }
.cinematic { overflow:hidden;border-radius:24px;min-height:620px;background:radial-gradient(ellipse at 50% 45%,#233b68,#0a132e 70%); }
.cinematic .enemy-stage { height:230px;z-index:2;overflow:visible; }
.cinematic .enemy-sprite { height:160px;width:160px;top:64px; }
.battle-space { position:relative;height:390px; }
.shot-origin { position:absolute;z-index:3;left:50%;top:210px;transform:translateX(-50%);width:96px;height:50px;border:2px solid #718fc1;border-radius:50%;background:#223756;box-shadow:0 0 0 20px #1d2c4e,0 0 0 21px #52678d; }
.shot-origin span { position:absolute;width:50px;height:50px;left:21px;top:-25px;border-radius:50%;background:#d0ff9d;box-shadow:0 0 30px #7dffaa,0 0 70px #30fff3; }
.phase-charge .shot-origin span { animation:orb-charge .65s ease-in both; }
.phase-launch .shot-origin span,.phase-hit .shot-origin span { opacity:.5; }
.beam { position:absolute;z-index:4;left:calc(50% - 18px);top:-94px;bottom:151px;width:36px;border-radius:50%;background:linear-gradient(90deg,#65ffe600,#66ffe6,#fff,#a0ffab,#a0ffab00);box-shadow:0 0 26px #6affcd;opacity:0;transform-origin:bottom; }
.phase-launch .beam { opacity:1;animation:beam-fire .55s ease-out both; }
.shockwave { position:absolute;z-index:5;left:50%;top:-117px;width:70px;height:70px;border:5px solid #d5ff8d;border-radius:50%;opacity:0;transform:translate(-50%,-50%); }
.phase-hit .shockwave { animation:shockwave .7s ease-out both; }
.impact-sparks { position:absolute;z-index:5;left:50%;top:-117px; }
.impact-sparks i { position:absolute;width:7px;height:20px;background:#ffed8a;border-radius:10px;opacity:0;--angle:calc(var(--i)*30deg); }
.phase-hit .impact-sparks i { animation:impact-spark .65s ease-out both; }
.phase-hit .enemy-sprite { animation:enemy-hit .6s ease-out both; }
.damage-pop { position:absolute;z-index:8;left:50%;top:102px;transform:translateX(-50%);font-size:65px;line-height:1;color:#fbffad;text-shadow:0 3px #607227,0 0 35px #fdff7f;font-weight:900;white-space:nowrap;animation:damage-rise .7s ease-out both; }
.phase-unite .damage-pop,.phase-total .damage-pop { display:none; }
.earth { position:absolute;left:50%;top:57px;width:245px;height:245px;transform:translateX(-50%) scale(.25);opacity:0;z-index:2;filter:drop-shadow(0 0 30px #51b7fa44); }
.earth svg { width:100%;height:100%; }
.earth-label { position:absolute;top:57%;right:0;padding:4px 8px;border-radius:20px;color:#d5ffbc;font-size:10px;background:#101d3e; }
.phase-unite .earth,.phase-total .earth { animation:earth-arrives .7s ease-out both; }
.phase-unite .shot-origin,.phase-total .shot-origin { opacity:0; }
.team-light { position:absolute;left:75%;top:47%;width:8px;height:8px;border-radius:50%;background:#edffb0;box-shadow:0 0 12px #caff90;opacity:0; }
.phase-unite .team-light { animation:team-gather 1.2s calc(var(--i)*.09s) ease-in-out both; }
.cinema-caption { position:absolute;z-index:6;top:298px;left:0;right:0;text-align:center;padding:0 16px; }
.cinema-caption h1 { font-size:21px;color:#f5f9ff; }.cinema-caption p { color:#a9bbdb;font-size:11px;margin-top:10px; }
.phase-total .cinema-caption { top:260px; }.phase-total .earth { top:3px;width:230px;height:230px; }
.combined-total>span,.combined-total>small { display:block;font-size:10px;color:#a9bbdb;margin-top:8px; }
.combined-total strong { font-size:55px;color:#ceff99;line-height:1.15;letter-spacing:-1px; }
.support-only .beam,.support-only .shockwave,.support-only .impact-sparks { display:none; }
.support-only .damage-pop { font-size:20px;top:164px; }.support-only.phase-hit .enemy-sprite { animation:enemy-hover 4s ease-in-out infinite; }
.target-intro .enemy-tag { position:absolute;z-index:2;top:12px;left:50%;transform:translateX(-50%);color:#c63f59;background:#ffebed;border-color:#f3b1bb;white-space:nowrap; }
.target-intro .orbit-label { font-size:10px; }
@keyframes enemy-hover { 50%{transform:translateX(-50%) translateY(-7px) rotate(3deg)} }
@keyframes bank-charge { 20%{box-shadow:0 0 0 4px #48e89077,0 0 28px #48e89055;transform:scale(1.025)} }
@keyframes correct-bounce { 40%{transform:scale(1.035)} }
@keyframes wrong-nudge { 25%{transform:translateX(-3px)}75%{transform:translateX(3px)} }
@keyframes verdict-pop { from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1} }
@keyframes charge-particles { 0%{transform:translateY(40px);opacity:0}30%{opacity:1}100%{transform:translateY(-60px) scale(.4);opacity:0} }
@keyframes auto-progress { from{transform:scaleX(1)}to{transform:scaleX(0)} }
@keyframes question-in { from{transform:translateX(14px);opacity:0}to{transform:translateX(0);opacity:1} }
@keyframes reactor-spin { to{transform:rotate(360deg)} }
@keyframes orb-charge { from{transform:scale(.25);opacity:.3}to{transform:scale(1.5);opacity:1} }
@keyframes beam-fire { 0%{transform:scaleY(.02) scaleX(.3);opacity:0}30%{transform:scaleY(1) scaleX(.8);opacity:1}65%{transform:scaleY(1) scaleX(1.7);opacity:1}100%{transform:scaleY(1) scaleX(.2);opacity:.15} }
@keyframes shockwave { from{transform:translate(-50%,-50%) scale(.25);opacity:1}to{transform:translate(-50%,-50%) scale(5);opacity:0} }
@keyframes impact-spark { from{transform:rotate(var(--angle)) translateY(0);opacity:1}to{transform:rotate(var(--angle)) translateY(150px) scale(.1);opacity:0} }
@keyframes enemy-hit { 0%{transform:translateX(-50%) scale(1.15);filter:brightness(2)}20%{transform:translateX(-50%) rotate(-16deg)}50%{transform:translateX(-50%) rotate(12deg)}100%{transform:translateX(-50%);filter:brightness(1)} }
@keyframes damage-rise { from{transform:translateX(-50%) translateY(20px) scale(.5);opacity:0}25%{opacity:1}to{transform:translateX(-50%) translateY(-18px) scale(1);opacity:1} }
@keyframes earth-arrives { from{transform:translateX(-50%) scale(.25);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1} }
@keyframes team-gather { 0%{transform:translate(calc((var(--i) - 3)*25px),calc((var(--i) - 2)*12px));opacity:0}30%{opacity:1}60%{transform:translate(0,0);opacity:1}100%{transform:translate(-60px,-170px);opacity:0} }
@media(max-width:700px) {
 .in-battle main{padding:0 12px 20px}.in-battle .site-header{padding:10px 18px}.enemy-stage{height:172px}.enemy-sprite{height:124px;width:124px;top:47px}.target-ring{width:112px;height:112px;top:51px}.target-coordinate{top:112px;font-size:6px;right:16px}.cockpit{padding:14px 16px 10px}.mission-dot{width:25px;height:25px}.mission-progress{margin:10px 0}.quiz-battle .flag-stage{height:103px;margin:4px 0 10px}.quiz-battle .flag-stage img{height:95px;max-height:95px;width:170px}.question-card h1{margin-top:12px;font-size:15px}.quiz-battle .option{min-height:58px;font-size:13px;padding:10px 9px}.enemy-status{font-size:9px}.enemy-tag{font-size:9px}.power-bank{gap:8px;padding:8px 9px}.power-bank>span{font-size:8px}.power-cells{gap:2px}.cinematic{min-height:610px}.cinematic .enemy-stage{height:220px}.target-intro .enemy-tag{top:-7px}.target-intro .orbit-label{bottom:3px;left:calc(50% + 12px);font-size:8px}.intro-art.target-intro{margin-top:16px}.result-console h1{font-size:20px}
}
@media(max-width:350px){.in-battle main{padding:0 8px 16px}.cockpit{padding:12px 11px 10px}.mission-progress{gap:3px}.mission-dot{width:23px;height:23px;font-size:9px}.quiz-battle .option{font-size:12px;padding:9px 7px;gap:5px;min-height:57px}.enemy-stage{height:158px}.enemy-sprite{height:111px;width:111px}.target-ring{height:100px;width:100px}.power-bank>span{font-size:7px}.power-bank{gap:6px}.answer-message{font-size:9px}.answer-message b{font-size:11px}.target-coordinate{display:none}}
body.motion-reduced .battle *,body.motion-reduced .battle *::before,body.motion-reduced .battle *::after{animation:none!important;transition:none!important}body.motion-reduced .phase-launch .beam{opacity:1}body.motion-reduced .phase-hit .shockwave{opacity:.5}body.motion-reduced .phase-unite .earth,body.motion-reduced .phase-total .earth{opacity:1;transform:translateX(-50%) scale(1)}body.motion-reduced .answer-good .flag-stage::after{display:none}
/* Keep the full firing-to-total story visible on shorter phones. */
@media(max-height:680px) and (max-width:700px){
 .cinematic{min-height:0}.cinematic .enemy-stage{height:180px}.cinematic .enemy-sprite{height:128px;width:128px;top:50px}.battle-space{height:290px}.shot-origin{top:125px}.beam{top:-74px;bottom:140px}.shockwave,.impact-sparks{top:-66px}.cinema-caption{top:205px}.cinema-caption h1{font-size:18px}.cinema-caption p{margin-top:6px}.earth{top:4px;width:185px;height:185px}.phase-total .earth{top:-10px;width:160px;height:160px}.phase-total .cinema-caption{top:145px}.combined-total strong{font-size:42px}.combined-total>span,.combined-total>small{margin-top:5px;font-size:9px}.damage-pop{top:95px;font-size:52px}
}
@media(max-height:680px) and (max-width:700px){
 .in-battle .site-header{padding-top:6px;padding-bottom:6px}.quiz-battle .enemy-stage{height:98px}.quiz-battle .enemy-sprite{height:62px;width:62px;top:36px}.quiz-battle .target-ring{width:60px;height:60px;top:36px}.quiz-battle .target-coordinate{top:60px}.quiz-battle .enemy-status{padding-top:4px;padding-bottom:4px}.quiz-battle .cockpit{padding-top:10px;padding-bottom:6px}.quiz-battle .console-top>b{font-size:20px}.quiz-battle .mission-progress{margin:7px 0}.quiz-battle .mission-dot{width:21px;height:21px}.quiz-battle .power-bank{padding:6px 9px}.quiz-battle .power-cells i{height:11px}.quiz-battle .question-card h1{margin:8px 0 3px;font-size:14px}.quiz-battle .flag-stage{height:72px;margin:3px 0 8px}.quiz-battle .flag-stage img{height:68px;max-height:68px;width:130px;max-width:130px}.quiz-battle .option{min-height:48px;padding:7px 8px}.quiz-battle .options{gap:7px}.quiz-battle .answer-message{min-height:29px;padding-top:4px}.quiz-battle .verdict{width:46px;height:46px;font-size:43px;right:calc(50% - 80px)}
}