*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#03050b;color:#fff;font-family:Arial,Helvetica,sans-serif;touch-action:none}
body{display:flex;justify-content:center}
.wrap{width:min(1050px,100%);padding:10px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.brand{font-size:1.38rem;font-weight:1000;color:#b8a0ff;text-shadow:0 0 20px rgba(147,111,255,.42)}
.sub{color:#8390a9;font-size:.82rem}
.stats{display:flex;gap:6px;flex-wrap:wrap}
.stats div{min-width:78px;background:#0b1020;border:1px solid rgba(161,129,255,.14);border-radius:11px;padding:7px 8px;text-align:center}
.stats span{display:block;color:#77839c;font-size:.58rem;text-transform:uppercase}
.stats b{font-size:.94rem}
.objective{display:flex;align-items:center;gap:8px;background:#080e1c;border:1px solid rgba(161,129,255,.13);border-radius:12px;padding:9px 11px;margin-bottom:8px;color:#9aa7bd}
.objective strong{color:#fff;flex:1}
.objective button{border:1px solid rgba(161,129,255,.17);background:#11182c;color:#fff;border-radius:10px;padding:8px 10px;font-weight:900;cursor:pointer}
.game-shell{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(158,122,255,.18);box-shadow:0 25px 70px rgba(0,0,0,.65);background:#02040a}
canvas{display:block;width:100%;height:auto;background:#02040a}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(1,3,8,.76);padding:14px;z-index:20}
.overlay.hidden{display:none}
.panel{width:min(500px,94%);max-height:94%;overflow:auto;background:linear-gradient(145deg,rgba(15,18,36,.98),rgba(5,8,17,.98));border:1px solid rgba(162,128,255,.22);border-radius:22px;padding:24px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.hero{font-size:3.7rem}
.panel h1{margin:5px 0;font-size:2rem}
.panel p{color:#aab4c7;line-height:1.45}
.panel>button,.wizard-card button,.final-message button,.mobile-controls button{border:0;border-radius:15px;background:linear-gradient(135deg,#744cff,#ad4cff);color:#fff;font-weight:1000;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.panel>button{padding:13px 24px;font-size:1rem}
.help{color:#76839b;font-size:.76rem;line-height:1.42;margin-top:12px}
.online-box{margin:12px 0;padding:10px;border-radius:13px;background:#070b16;border:1px solid rgba(162,128,255,.14);text-align:left}
.online-box label{display:block;font-weight:800;font-size:.82rem;margin:5px 0}
.online-check{display:flex!important;align-items:center;gap:8px}
.online-check input{width:18px;height:18px}
.online-box input#onlineName{width:100%;background:#03060d;border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:10px}
.online-box small{display:block;color:#7d899f;font-size:.68rem;margin-top:6px}
.online-message{min-height:16px;color:#ff8ca5;font-size:.72rem;margin-top:4px}
.orb-message{position:absolute;left:12px;bottom:12px;max-width:62%;display:flex;align-items:center;gap:8px;background:rgba(4,7,15,.78);border:1px solid rgba(103,235,255,.16);border-radius:12px;padding:8px 10px;color:#dce9f5;font-size:.78rem;z-index:8;pointer-events:none}
.orb-dot{width:10px;height:10px;border-radius:50%;background:#6cefff;box-shadow:0 0 14px #6cefff;flex:0 0 auto}
.phase-banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(1,2,7,.46);z-index:14;pointer-events:none}
.phase-banner.hidden{display:none}
.phase-card{min-width:min(430px,88%);text-align:center;background:rgba(5,7,15,.92);border:1px solid rgba(174,143,255,.23);border-radius:20px;padding:20px;box-shadow:0 20px 55px rgba(0,0,0,.55)}
.phase-kicker,.wizard-kicker{color:#a88cff;font-size:.72rem;font-weight:1000;letter-spacing:.12em}
.phase-card h2{margin:5px 0}.phase-card p{margin:0;color:#a0abc0}
.danger-glow{position:absolute;inset:0;box-shadow:inset 0 0 0 rgba(255,40,80,0);pointer-events:none;z-index:7;transition:.12s}
.danger-glow.on{box-shadow:inset 0 0 70px rgba(255,34,75,.43)}
.static-flash{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:12;background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,rgba(0,0,0,.6) 1px 3px)}
.static-flash.on{animation:staticPop .34s linear}
@keyframes staticPop{0%,100%{opacity:0}20%,55%{opacity:.65}35%,75%{opacity:.18}}
.ghost-indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);padding:7px 10px;border-radius:999px;background:rgba(110,31,100,.78);border:1px solid rgba(255,121,234,.25);font-size:.72rem;font-weight:1000;opacity:0;z-index:8;transition:.15s}
.ghost-indicator.on{opacity:1}
.wizard-overlay{position:absolute;inset:0;background:radial-gradient(circle,rgba(73,48,120,.5),rgba(1,3,8,.92));display:flex;align-items:center;justify-content:center;z-index:30;padding:14px}
.wizard-overlay.hidden{display:none}
.wizard-card{width:min(440px,92%);background:linear-gradient(145deg,#17152b,#080b17);border:1px solid rgba(179,145,255,.25);border-radius:22px;padding:23px;text-align:center;box-shadow:0 25px 75px rgba(0,0,0,.65)}
.wizard{font-size:5rem;filter:drop-shadow(0 0 20px rgba(158,124,255,.5))}
.wizard-card h2{font-size:1.7rem;margin:5px 0}.wizard-card p{color:#b7bfd0;line-height:1.45}.wizard-next{color:#8f9ab0;font-size:.8rem;margin:10px}.wizard-card button{padding:11px 16px}
.final-scene{position:absolute;inset:0;z-index:40;overflow:hidden;background:linear-gradient(#71c9ff 0 55%,#75c95e 55% 100%)}
.final-scene.hidden{display:none}
.sky{position:absolute;inset:0 0 45% 0;background:linear-gradient(#61c4ff,#bdeaff)}
.sun{position:absolute;right:8%;top:7%;font-size:6rem;animation:sunBob 2.4s ease-in-out infinite}
@keyframes sunBob{50%{transform:translateY(8px) rotate(4deg)}}
.cloud{position:absolute;font-size:4rem;opacity:.88}.c1{left:8%;top:12%}.c2{left:48%;top:22%}
.bird{position:absolute;font-size:2rem;animation:birdFly 5s linear infinite}.b1{top:19%;left:-10%;animation-delay:0s}.b2{top:30%;left:-15%;animation-delay:1.6s}.b3{top:10%;left:-18%;animation-delay:3.1s}
@keyframes birdFly{to{left:110%;transform:translateY(-18px)}}
.meadow{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(#62b84f,#3f913b);display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px}
.flowers{position:absolute;left:4%;right:4%;bottom:10px;font-size:2rem;text-align:center;letter-spacing:.7rem}
.princess{font-size:6rem;margin:0 30px 25px}.wizard-end{font-size:5.5rem;margin:0 30px 25px}
.final-message{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(520px,90%);text-align:center;background:rgba(255,255,255,.9);color:#16311b;border-radius:24px;padding:20px;box-shadow:0 20px 70px rgba(0,70,20,.25)}
.fim{font-size:3.3rem;font-weight:1000;letter-spacing:.12em;color:#ff9d23}.final-message h2{font-size:2rem;margin:4px}.final-message p{font-weight:800;line-height:1.45}.final-message button{padding:11px 18px;background:linear-gradient(135deg,#1da65e,#5aba42)}
.mobile-controls{display:none;grid-template-columns:1.25fr .85fr;gap:8px;margin-top:8px}
.move-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.action-controls{display:grid;gap:7px}
.mobile-controls button{min-height:72px;font-size:.92rem;padding:9px}
#runBtn{background:linear-gradient(135deg,#ff7b38,#d84b71)}
@media(max-width:760px){
 header{flex-direction:column;align-items:flex-start}.stats{width:100%}.stats div{flex:1;min-width:0}.sub{display:none}
 .mobile-controls{display:grid;position:sticky;bottom:0;z-index:50}
 .wrap{padding:5px}
}
@media(max-width:560px){
 .brand{font-size:1.02rem}.stats div{flex-basis:calc(33.333% - 6px);padding:6px 4px}.stats span{font-size:.54rem}.stats b{font-size:.86rem}
 .objective{font-size:.75rem;padding:7px}.game-shell{border-radius:14px}
 canvas{aspect-ratio:390/900}
 .panel{width:min(326px,95%);padding:14px 12px}.hero{font-size:2.5rem}.panel h1{font-size:1.45rem}.panel p{font-size:.87rem}
 .orb-message{max-width:76%;font-size:.68rem}
 .mobile-controls{padding:7px 1px 1px;background:linear-gradient(180deg,rgba(2,4,10,0),rgba(2,4,10,.94) 30%,#02040a)}
 .mobile-controls button{min-height:82px;border-radius:17px}
 .action-controls button{min-height:105px}
 .wizard{font-size:4rem}.final-message{top:44%;padding:15px}.fim{font-size:2.5rem}.princess{font-size:4.5rem}.wizard-end{font-size:4rem}
}

.power-aura{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;transition:.14s;background:radial-gradient(circle at 50% 55%,rgba(255,225,84,.03),rgba(91,222,255,.12) 52%,rgba(127,84,255,.28) 100%);box-shadow:inset 0 0 85px rgba(102,220,255,.35)}
.power-aura.on{opacity:1;animation:powerAuraPulse .72s ease-in-out infinite}
@keyframes powerAuraPulse{50%{filter:brightness(1.35);box-shadow:inset 0 0 110px rgba(255,225,84,.38)}}