:root{--red:#ff3b45;--blue:#168cff;--gold:#ffd438;--dark:#071a3b;--panel:#ffffffee}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,Arial,sans-serif;background:#071a3b;color:#fff;touch-action:none}button,select,input{font:inherit}.screen{display:none;width:100%;height:100%;position:relative}.screen.active{display:flex}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,#00dce9aa,#1775ffaa),url('assets/logo.png') center/cover;filter:blur(14px);transform:scale(1.08)}.start-card{z-index:2;margin:auto;width:min(880px,92vw);max-height:92vh;overflow:auto;background:#ffffffed;color:#09285a;border-radius:32px;padding:22px 34px;box-shadow:0 24px 70px #00133c99;border:5px solid #68f6ff}.logo{display:block;width:min(420px,70vw);max-height:37vh;object-fit:cover;object-position:center;border-radius:22px;margin:0 auto 14px;box-shadow:0 12px 30px #0974b644}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.setup-grid label{font-weight:800;font-size:14px}.setup-grid select,.name-row input{display:block;width:100%;margin-top:5px;border:2px solid #a7d8ff;border-radius:12px;padding:11px;background:#f5fbff;color:#09285a;font-weight:700}.module-info{text-align:center;margin:12px 0;padding:8px;border-radius:10px;background:#e7f8ff;color:#145782;font-size:14px}.name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.start-actions{display:flex;gap:12px;margin-top:16px;justify-content:center}.primary,.secondary{border:0;border-radius:14px;padding:13px 22px;font-weight:900;cursor:pointer}.primary{color:white;background:linear-gradient(#ff8b2c,#ee3c1d);box-shadow:0 6px 0 #9a260d}.secondary{color:#0b3f7d;background:#d9f5ff;border:2px solid #73cfff}.tip{text-align:center;color:#50708e;font-size:13px}.start-card+footer{position:absolute;z-index:3;bottom:7px;width:100%;text-align:center;font-size:12px;text-shadow:0 2px 5px #000}
#gameScreen{flex-direction:column;background:#0c2461}#arena{height:30%;min-height:190px;position:relative;display:flex;align-items:center;justify-content:space-around;background:linear-gradient(#1ac8ff,#6967ff 70%,#37236e);border-bottom:5px solid #ffe058;overflow:hidden}.sky-fx{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,#fff9 0 2%,transparent 18%),repeating-linear-gradient(115deg,transparent 0 55px,#ffffff0d 58px 62px)}.player-fighter{z-index:2;text-align:center;width:22%}.hero-avatar{font-size:clamp(48px,7vw,95px);filter:drop-shadow(0 8px 3px #00195288)}.fighter-hit{animation:shake .25s}.player-fighter .name{font-weight:1000;text-shadow:0 2px 2px #000}.hp{height:15px;background:#351534;border:2px solid white;border-radius:20px;overflow:hidden}.hp i,.boss-hp i,#versusBossBars i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#26dc59,#d2ff39);transition:width .35s}.red .hp i{background:linear-gradient(90deg,#ff293e,#ffb137)}.blue .hp i{background:linear-gradient(90deg,#158cff,#42f4ff)}#bossWrap{z-index:2;text-align:center;width:42%;position:relative}#bossName{font-weight:1000;letter-spacing:2px;color:#ffe45c;text-shadow:0 2px 3px #35003e}#boss{font-size:clamp(65px,9vw,125px);height:clamp(70px,10vw,135px);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 10px 5px #25002999);position:relative}.boss-hit{animation:bossHit .28s}.hit-flash{position:absolute;width:80px;height:80px;border-radius:50%;opacity:0;background:radial-gradient(#fff,#fff00088,transparent 70%)}.boss-hit .hit-flash{animation:flash .3s}.boss-hp{height:19px;border:3px solid #fff;background:#340d35;border-radius:15px;overflow:hidden;box-shadow:0 3px 0 #16001a}.boss-hp i{background:linear-gradient(90deg,#8d0dff,#ff274f)}#versusBossBars{display:none;gap:8px}#versusBossBars>div{width:50%;font-size:11px}#versusBossBars b{display:block;height:13px;background:#28072b;border:1px solid white;border-radius:8px;overflow:hidden}#versusBossBars i{background:linear-gradient(90deg,#ff6037,#ffd438)}#timer{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:clamp(22px,3vw,38px);font-weight:1000;background:#071a3bcc;padding:3px 17px;border-radius:15px;border:2px solid #fff}#pauseBtn,#quitBtn{position:absolute;top:10px;border:0;border-radius:10px;padding:8px 12px;background:#071a3bcc;color:white;font-weight:900}#pauseBtn{right:55px}#quitBtn{right:10px}#battleLog{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);padding:3px 15px;border-radius:15px;background:#071a3bb8;font-size:13px;white-space:nowrap}
#controls{height:70%;display:grid;grid-template-columns:1fr 1fr}.player-zone{position:relative;overflow:hidden;padding:10px 14px 8px;display:flex;flex-direction:column}.zone-red{background:linear-gradient(135deg,#fff5f2,#ffd4ca);color:#541315;border-right:3px solid #ffe058}.zone-blue{background:linear-gradient(225deg,#eefaff,#cbe9ff);color:#082d5c;border-left:3px solid #ffe058}.zone-head{height:34px;display:flex;gap:12px;align-items:center;font-weight:900}.zone-head>span:first-child{margin-right:auto;font-size:18px}.score,.combo{padding:5px 9px;background:#fff9;border-radius:12px}.challenge{flex:1;min-height:0;background:#ffffffc9;border:3px solid #fff;border-radius:18px;padding:10px;box-shadow:inset 0 0 18px #4c80a322;position:relative;overflow:hidden}.instruction{text-align:center;font-size:clamp(17px,2.1vw,28px);font-weight:1000;margin:0 0 8px;color:#163b6b}.subtext{text-align:center;font-size:13px;color:#55708b}.slash-field{position:absolute;inset:62px 8px 8px;overflow:hidden}.flying-word{position:absolute;left:-140px;padding:13px 22px;border:3px solid #fff;border-radius:22px;color:white;font-weight:1000;font-size:clamp(17px,2vw,28px);text-shadow:0 2px 2px #000;background:linear-gradient(135deg,#8d40ff,#ff477b);box-shadow:0 5px 0 #4b1d75;animation:fly var(--speed) linear forwards;user-select:none}.flying-word.cut{animation:none;transform:scale(1.4) rotate(20deg);opacity:0;transition:.35s}.builder-bank,.builder-slots{min-height:72px;padding:8px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;border-radius:15px}.builder-bank{background:#e8f6ff}.builder-slots{margin-top:13px;border:3px dashed #6aa8d4;background:#fff}.word-block,.slot-block{padding:13px 16px;border-radius:12px;font-weight:900;font-size:clamp(16px,1.7vw,23px);user-select:none}.word-block{background:linear-gradient(#ffe45d,#ff9d23);color:#502600;box-shadow:0 5px 0 #bd610a;cursor:grab}.word-block.dragging{opacity:.35}.slot-block{background:#35baf3;color:#fff;box-shadow:0 4px 0 #117bb2}.builder-actions{text-align:center;margin-top:13px}.builder-actions button{margin:3px}.shield-question{text-align:center;font-size:clamp(19px,2.1vw,30px);font-weight:900;margin:12px 5px}.shield-timer{height:9px;border-radius:9px;background:#ddd;overflow:hidden;margin:10px}.shield-timer i{display:block;height:100%;background:#ff5147;animation:countdown 3s linear forwards}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-btn{min-height:54px;border:0;border-radius:14px;background:linear-gradient(#29c2ff,#1673df);color:white;font-weight:1000;font-size:clamp(16px,1.8vw,24px);box-shadow:0 5px 0 #0c499f}.answer-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #0c499f}.feedback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(35px,6vw,75px);font-weight:1000;pointer-events:none;opacity:0}.feedback.show{animation:feedback .7s}.power-row{height:44px;padding-top:6px;display:flex;justify-content:center;gap:8px}.power{border:0;border-radius:12px;padding:6px 13px;color:white;font-weight:900}.power.ink{background:#6d28d9}.power.freeze{background:#168bd3}.power:disabled{filter:grayscale(1);opacity:.38}.ink-overlay,.freeze-overlay{display:none;position:absolute;inset:0;z-index:20}.ink-overlay.active{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 30%,#351055 0 12%,transparent 13%),radial-gradient(circle at 70% 20%,#1b052c 0 18%,transparent 19%),radial-gradient(circle at 50% 70%,#2d0747 0 24%,transparent 25%),#150520dd}.ink-blot{font-size:60px;color:#dc91ff;font-weight:1000;text-align:center}.ink-blot small{display:block;font-size:14px;color:#fff}.freeze-overlay.active{display:flex;align-items:center;justify-content:center;background:#8aeaff99;color:#fff;font-size:50px;font-weight:1000;text-shadow:0 3px 5px #1473a7}.modal{display:none;position:fixed;inset:0;z-index:100;background:#001536cc;align-items:center;justify-content:center}.modal.active{display:flex}.modal>div{background:white;color:#0c2a58;border-radius:25px;padding:28px;text-align:center;min-width:min(460px,88vw);border:5px solid #69eaff}.result-card h1{font-size:45px;margin:0}.result-score{display:flex;justify-content:space-around;margin:18px}.result-score span{display:flex;flex-direction:column}.result-score b{font-size:45px}.result-score small{font-weight:900}
@keyframes fly{to{left:110%}}@keyframes countdown{to{width:0}}@keyframes bossHit{25%{transform:translateX(-14px) rotate(-8deg)}75%{transform:translateX(14px) rotate(8deg)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes flash{50%{opacity:1;transform:scale(2)}}@keyframes feedback{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.5)}}@media(max-width:800px){.setup-grid{grid-template-columns:1fr}.logo{max-height:25vh}.start-card{padding:15px}.player-zone{padding:6px}.zone-head{font-size:12px}.zone-head>span:first-child{font-size:13px}.power{font-size:11px;padding:5px}.hero-avatar{font-size:50px}#arena{min-height:150px}}