.battle-page{position:relative;z-index:2;width:min(940px,calc(100% - 30px));margin:22px auto 35px}.battle-back{display:inline-block;color:#fff;text-decoration:none;font-weight:850;font-size:13px;border:1px solid #7379dd;background:#080d3dcc;border-radius:22px;padding:9px 15px;box-shadow:0 5px 15px #0005}.battle-back:hover{background:#24328dcc}.battle-hero{text-align:center;padding:12px 10px 18px}.mini-kicker{font-size:12px;letter-spacing:5px;font-weight:950;color:#75dcff}.battle-hero h1{margin:7px 0 5px;font-size:clamp(48px,7vw,74px);line-height:.9;letter-spacing:-3px;text-shadow:0 6px 0 #0009}.battle-hero h1 span{color:#fff}.battle-hero h1 strong{color:#ffcf18;text-shadow:0 6px 0 #d76c00}.battle-hero p{margin:12px 0 0;font-weight:750;color:#e0e6ff}.battle-shell{max-width:760px;margin:auto;border:2px solid #716fe0;border-radius:30px;background:linear-gradient(150deg,#101c59e8,#30175fe8);box-shadow:0 22px 60px #0009,inset 0 1px #fff5;overflow:hidden;backdrop-filter:blur(10px)}.hidden{display:none!important}.battle-start,.result-screen{padding:34px 25px 40px;text-align:center}.fighters{display:flex;justify-content:center;align-items:center;gap:35px;font-size:78px;filter:drop-shadow(0 8px 7px #0008)}.fighters b{font-size:24px;color:#ffcf18}.battle-start h2{font-size:30px;margin:8px 0}.battle-start p{max-width:530px;margin:0 auto 20px;color:#d8defd;line-height:1.5}.difficulty{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:15px 0 25px}.difficulty-btn{min-width:145px;padding:13px 12px;border-radius:18px;border:1px solid #737acb;background:#07103f;color:#fff;cursor:pointer;display:grid;gap:2px;box-shadow:0 5px 12px #0005}.difficulty-btn span{font-size:24px}.difficulty-btn b{font-size:14px}.difficulty-btn small{font-size:10px;color:#bdc8ed}.difficulty-btn.selected{border-color:#ffd23b;background:linear-gradient(#6245c8,#321e78);box-shadow:0 0 20px #a477ff66}.start-btn,.games-btn{display:inline-block;border:0;color:#fff;text-decoration:none;font-weight:950;cursor:pointer;border-radius:30px;padding:14px 27px;background:linear-gradient(135deg,#ff4d69,#bd0f63);box-shadow:0 7px 18px #0007,0 0 18px #ff426633}.start-btn:hover,.games-btn:hover{transform:translateY(-2px)}.game-screen{padding:22px}.game-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.stat{display:flex;align-items:center;gap:7px}.stat:last-child{justify-content:flex-end}.stat span{font-size:25px}.stat b{font-size:21px}.stat small{font-size:9px;color:#bfc9ef;font-weight:900}.round{display:flex;align-items:baseline;gap:4px;background:#070e3f;border:1px solid #5964bd;padding:7px 15px;border-radius:22px}.round span{font-size:9px;font-weight:900;color:#b6c1eb}.round b{font-size:20px;color:#ffcf18}.round em{font-style:normal;font-size:10px;color:#b6c1eb}.progress{height:8px;background:#070c36;border:1px solid #525da9;border-radius:9px;overflow:hidden;margin:14px 0 5px}.progress i{display:block;width:10%;height:100%;background:linear-gradient(90deg,#ff4b69,#ffcf18);transition:width .3s}.arena{display:flex;align-items:center;justify-content:center;gap:70px;padding:15px 0 3px}.hero-fighter,.monster{font-size:78px;text-align:center;filter:drop-shadow(0 8px 8px #0009);animation:floaty 2.5s ease-in-out infinite}.monster{animation-delay:.3s}.hero-fighter small,.monster small{display:block;font-size:10px;letter-spacing:2px;color:#dce4ff;font-weight:950;margin-top:-7px}.monster small{color:#ff879a;letter-spacing:0;font-size:15px}.versus{font-size:33px;filter:drop-shadow(0 0 10px #ffe257);animation:pulse .9s infinite alternate}@keyframes floaty{50%{transform:translateY(-7px)}}@keyframes pulse{to{transform:scale(1.15)}}.question-card{border:2px solid #7b70db;background:linear-gradient(160deg,#1c2670,#321b67);border-radius:25px;padding:19px 20px;text-align:center;box-shadow:inset 0 1px #fff5,0 10px 25px #0006}.question-label{font-size:10px;letter-spacing:4px;font-weight:950;color:#9fe8ff}.question{font-size:52px;font-weight:950;margin:8px 0 17px;text-shadow:0 4px 0 #0007}.answer-row{display:flex;max-width:460px;margin:auto;gap:9px}.answer-row input{width:130px;flex:1;min-width:0;border:2px solid #737fe2;border-radius:18px;background:#070d39;color:#fff;font-size:28px;text-align:center;font-weight:900;outline:none;padding:11px}.answer-row input:focus{border-color:#ffcf18;box-shadow:0 0 15px #ffcf1844}.answer-row button{border:0;border-radius:18px;padding:0 20px;color:#fff;font-weight:950;background:linear-gradient(135deg,#168ff3,#5040d6);cursor:pointer;box-shadow:0 6px 14px #0006}.answer-row button:disabled{opacity:.6;cursor:wait}.feedback{min-height:25px;margin-top:10px;font-size:14px;font-weight:950}.feedback.good{color:#5ff3b4}.feedback.bad{color:#ff7d91}.lives{text-align:center;font-size:21px;padding:12px 0 0;letter-spacing:3px}.result-icon{font-size:76px;filter:drop-shadow(0 8px 7px #0008)}.result-kicker{font-size:11px;letter-spacing:4px;color:#7ee6ff;font-weight:950}.result-screen h2{font-size:32px;margin:5px 0 10px}.result-score{font-size:65px;font-weight:950;color:#ffcf18;text-shadow:0 5px #d56a00}.result-score small{font-size:13px;color:#fff;text-shadow:none}.result-stats{display:flex;justify-content:center;gap:12px;margin:8px 0 24px}.result-stats div{min-width:105px;padding:12px 8px;border-radius:17px;background:#080f40aa;border:1px solid #626bc3}.result-stats b,.result-stats small{display:block}.result-stats b{font-size:21px;color:#fff}.result-stats small{font-size:9px;color:#bcc6ed;font-weight:850;margin-top:2px}.games-btn{margin-left:7px;background:#5535bd}
@media(max-width:600px){.battle-page{width:min(100% - 16px,760px);margin-top:12px}.battle-hero h1{font-size:48px}.battle-shell{border-radius:22px}.battle-start,.result-screen{padding:25px 14px 30px}.fighters{font-size:62px;gap:22px}.difficulty-btn{min-width:125px}.game-screen{padding:13px}.arena{gap:24px}.hero-fighter,.monster{font-size:61px}.question{font-size:43px}.answer-row button{padding:0 13px;font-size:12px}.stat b{font-size:17px}.round{padding:6px 10px}.result-stats{gap:5px}.result-stats div{min-width:90px}}
/* Readability upgrade: make gameplay text comfortable for young players. */
.battle-hero p,.battle-start p{font-size:18px;line-height:1.55}
.question-label{font-size:13px}
.question{font-size:60px;line-height:1.1}
.feedback{font-size:18px;line-height:1.4}
.difficulty-btn b{font-size:17px}
.difficulty-btn small{font-size:13px}
@media(max-width:600px){.question{font-size:48px}.battle-hero p,.battle-start p{font-size:17px}.feedback{font-size:17px}}