@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{color-scheme:dark;--ink:#f6f5ff;--muted:#c2c7dc;--glass:rgba(23,34,43,.94);--line:rgba(224,238,194,.28);--pink:#ff8fa3;--violet:#a99cff}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10172a;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#game-shell{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;background:radial-gradient(ellipse at 55% 30%,#5268a4 0%,#222b52 44%,#10172a 100%);isolation:isolate}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.glass{background:var(--glass);border:2px solid var(--line);box-shadow:5px 5px 0 #101725b8;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.topbar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 28px;pointer-events:none}
.brand,.top-actions{display:flex;align-items:center;gap:12px;pointer-events:auto}
.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:5px;background:linear-gradient(145deg,#ff9bb3,#8d7bff);font-size:24px;color:white;box-shadow:0 7px 24px #9a83ff55}
.brand strong{display:block;font-size:14px;letter-spacing:1.4px;font-weight:900}
.brand small{display:block;margin-top:3px;color:#c4c9e2;font-size:9px;letter-spacing:2px}
.pill{border:1px solid var(--line);background:#11182a9c;padding:9px 13px;border-radius:5px;font-size:9px;letter-spacing:1.2px;font-weight:900;color:#dce1f6}
.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#63e6be;margin-right:7px;box-shadow:0 0 12px #63e6be}
.icon-btn{border:1px solid var(--line);background:#151c32bd;width:38px;height:38px;border-radius:5px;font-weight:900}
.welcome-card{position:absolute;z-index:2;left:28px;top:50%;transform:translateY(-44%);width:min(310px,calc(100vw - 36px));padding:25px;border-radius:6px}
.eyebrow{font-size:10px;letter-spacing:2.4px;color:#b9b5ff;font-weight:900}
h1{font-size:clamp(31px,4vw,45px);line-height:1.03;letter-spacing:-1.8px;margin:12px 0}
h1 span{color:#ff9eb6}
.welcome-card>p,.right-panel>p{color:var(--muted);font-size:12px;line-height:1.65;margin:12px 0 18px}
.mini-stats{display:flex;gap:10px;margin:19px 0}
.mini-stats>div{flex:1;background:#ffffff0b;border:1px solid #ffffff10;border-radius:4px;padding:10px}
.stat-icon{display:block;font-size:16px;margin-bottom:3px}
.mini-stats strong{display:block;font-size:15px}
.mini-stats small{display:block;color:#aeb6d3;font-size:10px;margin-top:2px}
.primary-btn{width:100%;border:0;border-radius:4px;padding:13px 14px;background:linear-gradient(100deg,#ff8fa3,#a18cff);font-size:10px;font-weight:900;letter-spacing:.7px;box-shadow:0 8px 24px #9c85ff38}
.primary-btn span{float:right;font-size:16px;margin-top:-3px}
.right-panel{position:absolute;z-index:2;right:28px;top:50%;transform:translateY(-34%);width:225px;padding:18px;border-radius:6px}
.panel-title{font-size:11px;letter-spacing:.8px;font-weight:900}.panel-title span{color:#b8a8ff;margin-right:6px}
.right-panel>p{margin:8px 0 13px;font-size:11px}
.color-options{display:flex;gap:10px;flex-wrap:wrap}
.color-dot{width:27px;height:27px;border-radius:3px;border:3px solid transparent;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff40}
.color-dot.active{outline:2px solid #fff;outline-offset:3px}
.panel-divider{height:1px;background:#ffffff19;margin:18px 0}
.mission-heading{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.4px}
.mission-text{margin:9px 0!important}
.mission-progress{height:8px;border-radius:2px;background:#ffffff18;overflow:hidden;margin-bottom:7px}
.mission-progress span{display:block;width:0;height:100%;border-radius:9px;background:linear-gradient(90deg,#ff8fa3,#a18cff);transition:width .25s}
.right-panel>small{font-size:10px;color:#b7bfd9}
.bottom-tip{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);width:min(590px,calc(100% - 420px));min-width:300px;border-radius:15px;padding:13px 15px;display:flex;align-items:center;gap:12px}
.tip-icon{font-size:22px}.bottom-tip strong{display:block;font-size:11px;margin-bottom:3px}.bottom-tip span{display:block;color:#c1c8e1;font-size:10px;line-height:1.5}.bottom-tip span b{color:#fff}
.bottom-tip>button{margin-left:auto;align-self:flex-start;border:0;background:transparent;color:#b9c0da;font-size:22px;line-height:1}
.toast{position:absolute;z-index:5;left:50%;top:90px;transform:translate(-50%,-10px);opacity:0;pointer-events:none;padding:11px 17px;border:1px solid #ffffff24;background:#11182aeb;border-radius:5px;font-size:12px;font-weight:800;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.loading-screen{position:absolute;z-index:10;inset:0;background:#10172a;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;transition:opacity .45s,visibility .45s}
.loading-screen.done{opacity:0;visibility:hidden;pointer-events:none}
.loading-logo{font-size:42px;color:#ff9eb6;animation:pulse 1s infinite alternate}.loading-screen strong{font-size:12px;letter-spacing:2px}.loading-screen>span{font-size:11px;color:#aeb6d3}
@keyframes pulse{to{transform:scale(1.2);filter:drop-shadow(0 0 15px #b29cff)}}
.mobile-controls{display:none}
@media(max-width:850px){.topbar{padding:15px}.brand-icon{width:36px;height:36px}.brand strong{font-size:12px}.pill{font-size:8px;padding:8px}.welcome-card{left:16px;top:100px;transform:none;width:235px;padding:17px;border-radius:19px}.welcome-card h1{font-size:31px}.welcome-card>p{font-size:11px;margin:8px 0}.mini-stats{margin:12px 0}.mini-stats>div{padding:8px}.right-panel{right:15px;top:auto;bottom:105px;transform:none;width:190px;padding:14px}.bottom-tip{bottom:12px;width:calc(100% - 30px);min-width:0;padding:10px 12px}.bottom-tip span{font-size:9px}.mobile-controls{display:block;position:absolute;z-index:4;inset:auto 0 0;height:190px;pointer-events:none}.move-pad{position:absolute;left:17px;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:auto}.move-pad>button,.move-pad div button{width:42px;height:42px;border-radius:4px;border:2px solid #ffffff3a;background:#141b31c9;backdrop-filter:blur(8px);font-size:14px}.move-pad div{display:flex;gap:5px}.jump-btn{position:absolute;right:20px;bottom:27px;pointer-events:auto;border:1px solid #ffffff55;background:linear-gradient(145deg,#ff8fa3d9,#8978ffd9);border-radius:5px;width:72px;height:72px;font-size:11px;font-weight:900;box-shadow:0 8px 24px #0004}.jump-btn span{display:block;font-size:16px}.right-panel{bottom:115px}.bottom-tip{bottom:10px;left:50%;width:calc(100% - 26px);z-index:3}.bottom-tip>div{padding-right:10px}.bottom-tip>button{display:none} }
@media(max-width:520px){.pill{display:none}.topbar{padding:12px}.welcome-card{top:76px;left:12px;width:min(205px,57vw);padding:14px}.welcome-card h1{font-size:27px}.eyebrow{font-size:8px}.welcome-card>p{font-size:10px;line-height:1.45}.mini-stats{gap:5px}.mini-stats small{font-size:9px}.mini-stats strong{font-size:13px}.primary-btn{font-size:9px;padding:11px 8px}.right-panel{right:12px;bottom:105px;width:154px;padding:12px}.panel-title{font-size:9px}.right-panel>p,.mission-text{font-size:10px!important}.color-options{gap:8px}.color-dot{width:22px;height:22px}.panel-divider{margin:12px 0}.mission-heading{font-size:9px}.bottom-tip{bottom:7px}.bottom-tip .tip-icon{font-size:17px}.bottom-tip strong{font-size:10px}.bottom-tip span{font-size:8px}.mobile-controls{height:175px}.move-pad{left:12px;bottom:82px}.move-pad>button,.move-pad div button{width:36px;height:36px;border-radius:11px}.jump-btn{width:60px;height:60px;right:14px;bottom:89px;font-size:9px} }
@media(max-height:570px) and (min-width:521px){.welcome-card{top:95px;transform:none}.right-panel{top:95px;transform:none}.bottom-tip{bottom:10px}}
body.hide-help .welcome-card{display:none}
body.hide-tip .bottom-tip{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}