*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#090e22;color:#f1f7ff;font-family:Inter,"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif}button{font:inherit}#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 38%,#253050 0%,#0b1027 68%,#070b1b 100%);touch-action:none;user-select:none;-webkit-user-select:none}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.vignette,.screen-grain,#flash{position:absolute;inset:0;pointer-events:none}.vignette{background:radial-gradient(ellipse at 50% 45%,transparent 31%,rgba(3,7,20,.15) 65%,rgba(2,5,17,.71) 120%);z-index:1}.screen-grain{z-index:2;opacity:.19;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.13' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}#flash{z-index:5;opacity:0;transition:opacity .17s}#flash.good{background:radial-gradient(circle at 50% 48%,rgba(100,255,218,.27),rgba(41,250,204,.06) 45%,transparent 70%)}#flash.bad{background:radial-gradient(circle at 50% 48%,rgba(255,105,129,.22),rgba(255,83,129,.04) 53%,transparent 72%)}
.topbar{position:absolute;left:clamp(18px,3.4vw,55px);right:clamp(18px,3.4vw,55px);top:clamp(18px,2.8vw,36px);z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900;letter-spacing:.12em;line-height:1;color:#f2f7ff;text-shadow:0 0 22px rgba(107,233,255,.33)}.brand-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(102,239,222,.56);border-radius:12px;background:rgba(46,221,202,.10);box-shadow:inset 0 0 14px rgba(56,240,208,.10),0 0 24px rgba(56,240,208,.10);color:#6fffe1;font-size:23px;transform:rotate(-8deg)}.brand-light{color:#5bf5d4}.brand small{display:block;margin-top:7px;font-size:9px;font-weight:700;letter-spacing:.23em;color:#8193ad;text-shadow:none}.hud-caption{display:block;color:#91a5bc;font-size:10px;font-weight:800;letter-spacing:.2em}.jobs{text-align:center;padding-top:2px}.job-dots{display:flex;gap:8px;justify-content:center;margin-top:13px}.job-dot{width:29px;height:9px;border-radius:20px;background:#34435e;border:1px solid #536784;box-shadow:inset 0 1px 4px #151e34;transform:skewX(-21deg);transition:background .25s,box-shadow .25s,transform .25s}.job-dot.done{background:#5dffe0;border-color:#a6fff0;box-shadow:0 0 11px #42f4cb,inset 0 0 5px #c4fff0;transform:skewX(-21deg) scale(1.05)}.job-dot.current{border-color:#f5d889;background:#836953;box-shadow:0 0 12px rgba(255,205,131,.45);animation:dotPulse 1.6s ease-in-out infinite}@keyframes dotPulse{50%{opacity:.57}}.timer-box{min-width:107px;text-align:right}.timer-box #timer{display:block;margin-top:3px;font-family:"Courier New",monospace;font-size:37px;font-weight:700;letter-spacing:-.09em;line-height:1;color:#eafaff;text-shadow:0 0 24px rgba(86,225,248,.3);font-variant-numeric:tabular-nums}.timer-box.danger #timer{color:#ff8c9e;text-shadow:0 0 26px #ff526a;animation:timerPulse .6s ease-in-out infinite alternate}@keyframes timerPulse{to{opacity:.65}}
.toast{position:absolute;z-index:4;top:18%;left:50%;transform:translate(-50%,10px);min-width:180px;text-align:center;opacity:0;pointer-events:none;color:#f0fff9;font-size:clamp(16px,2.2vw,26px);font-weight:900;letter-spacing:.16em;text-shadow:0 0 16px #4dffdc,0 3px 15px #07162a;white-space:nowrap;transition:opacity .22s,transform .22s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{color:#ffb7b9;text-shadow:0 0 18px #ff536c,0 3px 15px #160b21}.bottom-ui{position:absolute;z-index:4;bottom:clamp(22px,4vh,48px);left:clamp(18px,3.4vw,55px);right:clamp(18px,3.4vw,55px);display:grid;grid-template-columns:1fr 160px 1fr;align-items:end;gap:18px;pointer-events:none}.control-hint{align-self:end;padding-bottom:7px;color:#b4c2d7;font-size:12px;line-height:1.85;letter-spacing:.02em;text-shadow:0 2px 8px #071024}.control-hint strong{color:#7fffe3;letter-spacing:.1em}.hint-index{display:block;margin-bottom:8px;font-size:10px;font-weight:800;color:#7693aa;letter-spacing:.19em}.button-wrap{text-align:center;pointer-events:auto}.hold-button{width:98px;height:98px;border:2px solid #9cffe8;border-radius:50%;color:#eafff9;background:radial-gradient(circle at 45% 32%,#2c7e78 0%,#155a68 40%,#102d48 78%);box-shadow:0 0 0 7px rgba(80,245,213,.10),0 0 0 14px rgba(80,245,213,.045),0 0 28px rgba(59,241,217,.3),inset 0 2px 16px rgba(157,255,236,.24),inset 0 -11px 18px rgba(3,16,42,.55);cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:transform .13s,box-shadow .13s,background .13s;touch-action:none;-webkit-tap-highlight-color:transparent}.hold-button:hover{box-shadow:0 0 0 8px rgba(80,245,213,.14),0 0 0 16px rgba(80,245,213,.055),0 0 39px rgba(59,241,217,.5),inset 0 2px 16px rgba(157,255,236,.3)}.hold-button.engaged,.hold-button:active{transform:scale(.92);background:radial-gradient(circle at 45% 32%,#58d9c5,#188c93 45%,#12445c 85%);box-shadow:0 0 0 11px rgba(80,245,213,.13),0 0 0 22px rgba(80,245,213,.07),0 0 54px rgba(59,241,217,.66),inset 0 2px 20px rgba(216,255,244,.5)}.hold-button:focus-visible,.start-button:focus-visible{outline:3px solid #ffdb92;outline-offset:6px}.button-icon{font-size:33px;line-height:1;filter:drop-shadow(0 0 9px #a5ffea)}.button-text{font-size:9px;font-weight:900;letter-spacing:.05em;margin-top:4px}.button-subtitle{margin-top:17px;color:#8094b0;font-size:10px;font-weight:800;letter-spacing:.15em;white-space:nowrap}.guidance{justify-self:end;align-self:end;width:min(100%,265px);padding:16px 18px 14px;border:1px solid rgba(117,197,212,.21);border-radius:11px;background:linear-gradient(125deg,rgba(11,27,48,.77),rgba(10,18,42,.54));box-shadow:0 10px 30px rgba(1,5,18,.17),inset 0 1px rgba(219,255,255,.07);backdrop-filter:blur(12px)}.guidance-top{display:flex;justify-content:space-between;gap:8px;font-size:9px;font-weight:800;letter-spacing:.12em;color:#86a3b5}.guidance-top span:last-child{color:#9cedd9}.guide-text{margin:11px 0 12px;color:#92ffdc;font-size:16px;line-height:1.1;font-weight:900;letter-spacing:.06em;white-space:nowrap;text-shadow:0 0 15px rgba(66,255,210,.3)}.guidance.off .guide-text{color:#ffc2a1;text-shadow:none}.meter{height:5px;position:relative;overflow:hidden;background:#2b3a53;border-radius:99px}.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#2ea6c2,#75ffe1);border-radius:inherit;box-shadow:0 0 12px #53ffe3;transition:width .1s linear}.guidance.off .meter-fill{background:#ffaf83;box-shadow:0 0 10px #f78b71}.meter-center{position:absolute;top:-2px;bottom:-2px;left:50%;width:2px;background:#f6fff8;box-shadow:0 0 5px white}.guide-detail{margin-top:10px;color:#91a8bc;font-size:10px;letter-spacing:.015em;white-space:nowrap}
.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:rgba(3,8,23,.56);backdrop-filter:blur(8px);transition:opacity .4s,visibility .4s;overflow:auto}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.intro-card{width:min(430px,100%);position:relative;padding:22px 28px 23px;overflow:hidden;border-radius:17px;border:1px solid rgba(128,234,227,.35);background:linear-gradient(142deg,rgba(25,44,70,.97),rgba(10,21,43,.98) 50%,rgba(11,22,43,.98));box-shadow:0 25px 90px rgba(1,4,15,.72),inset 0 1px rgba(255,255,255,.13),0 0 45px rgba(72,236,212,.07)}.intro-card:before{content:"";position:absolute;left:0;top:0;width:45%;height:2px;background:linear-gradient(90deg,#69ffe0,transparent)}.card-top{display:flex;align-items:center;gap:8px;color:#a6e9df;font-size:9px;font-weight:900;letter-spacing:.17em}.live-dot{width:6px;height:6px;border-radius:50%;background:#5cffe1;box-shadow:0 0 9px #54ffdb;animation:dotPulse 1.2s infinite}.card-top-right{margin-left:auto;color:#728aa8;font-size:8px}.card-art{height:152px;margin:20px -2px 16px;position:relative;overflow:hidden;border-radius:9px;border:1px solid rgba(111,186,203,.12);background:radial-gradient(ellipse at 50% 98%,rgba(48,248,204,.18),transparent 51%),radial-gradient(circle at 72% 23%,rgba(145,151,255,.23),transparent 31%),linear-gradient(#162847,#101d38 64%,#132440)}.card-art:after{content:"";position:absolute;left:-10%;bottom:-17px;width:120%;height:37px;border-top:1px solid #7df2d7;border-radius:50%;box-shadow:0 -4px 27px rgba(91,255,217,.37)}.art-stars{position:absolute;top:20px;left:28px;color:#9cc9e1;letter-spacing:40px;font-size:12px}.art-ufo{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:170px;height:95px;animation:artFloat 2.7s ease-in-out infinite}@keyframes artFloat{50%{transform:translate(-50%,-7px)}}.art-dome{position:absolute;width:66px;height:42px;left:52px;top:9px;background:linear-gradient(130deg,#c8fafa,#668eb0 65%,#314a75);border-radius:80px 80px 15px 15px;border:2px solid #bbf8f1;box-shadow:inset -10px -7px 15px rgba(22,41,72,.5),0 0 18px rgba(93,255,230,.23)}.art-saucer{position:absolute;left:4px;top:42px;width:162px;height:35px;border-radius:50%;background:linear-gradient(#e5f4f6 5%,#8aa8c2 45%,#1b3c62 72%);border:3px solid #80fae6;box-shadow:0 0 18px #39eecf,inset 0 -7px 10px #132e59}.art-beam{position:absolute;left:46px;top:69px;width:78px;height:90px;background:linear-gradient(rgba(72,249,207,.24),rgba(72,249,207,.03));clip-path:polygon(40% 0%,60% 0%,100% 100%,0 100%);filter:blur(3px)}.art-pad{position:absolute;bottom:9px;left:50%;width:156px;height:32px;transform:translateX(-50%);border-radius:50%;border:3px solid #78ffda;box-shadow:0 0 11px #4afad3,inset 0 0 13px #4afad3;background:rgba(49,255,202,.05)}.eyebrow{color:#78f3d4;font-size:10px;font-weight:900;letter-spacing:.18em;line-height:1.4}.intro-card h1{margin:9px 0 12px;font-size:clamp(39px,7vw,57px);line-height:.98;letter-spacing:-.065em;font-weight:950;color:#f4faff;text-shadow:0 5px 20px rgba(15,42,61,.5)}.intro-card h1 em{font-style:normal;color:#81ffdf}.intro-card p{font-size:13px;line-height:1.65;color:#bccbde;margin:0 0 18px;max-width:370px}.intro-card p b{color:#effff9}.start-button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border:1px solid #acffeb;border-radius:8px;background:linear-gradient(100deg,#83ffe1,#48d8c8);color:#062a39;font-size:13px;font-weight:950;letter-spacing:.17em;box-shadow:0 5px 20px rgba(37,243,209,.22);cursor:pointer;transition:transform .14s,filter .14s}.start-button:hover{transform:translateY(-2px);filter:brightness(1.11)}.start-button span:last-child{font-size:22px;font-weight:500;line-height:16px}.card-footer{margin-top:15px;display:flex;justify-content:space-between;color:#7391aa;font-size:9px;font-weight:800;letter-spacing:.12em}.card-footer span:last-child{color:#5c9c9d;letter-spacing:4px}
@media(max-width:800px){.brand{font-size:14px}.brand-icon{width:30px;height:30px;font-size:18px}.brand small{font-size:7px}.job-dot{width:20px}.job-dots{gap:5px}.timer-box #timer{font-size:30px}.hud-caption{font-size:8px}.bottom-ui{grid-template-columns:1fr 110px 1fr;gap:8px}.guidance{padding:12px;width:206px}.guide-text{font-size:13px}.control-hint{font-size:10px}.hold-button{width:82px;height:82px}.button-icon{font-size:26px}.button-text{font-size:8px}.button-subtitle{font-size:8px}.guidance-top{font-size:8px}}
@media(max-width:650px){.topbar{top:15px;left:16px;right:16px;gap:5px}.brand{font-size:12px;gap:6px;letter-spacing:.06em}.brand-icon{width:26px;height:26px;border-radius:8px}.brand small{font-size:6px;letter-spacing:.08em;margin-top:5px}.jobs{position:absolute;left:50%;top:45px;transform:translateX(-50%);white-space:nowrap}.jobs .hud-caption{display:none}.job-dots{margin:0;gap:5px}.job-dot{width:25px;height:7px}.timer-box{min-width:72px}.timer-box #timer{font-size:27px}.bottom-ui{bottom:22px;left:14px;right:14px;grid-template-columns:1fr 1fr;gap:11px;align-items:end}.control-hint{display:none}.button-wrap{grid-column:1 / -1;grid-row:2}.hold-button{width:80px;height:80px}.button-subtitle{margin-top:12px}.guidance{grid-column:1 / -1;grid-row:1;justify-self:center;width:min(280px,90vw);padding:10px 13px 10px;text-align:center}.guidance-top{font-size:8px}.guide-text{margin:6px 0 6px;font-size:14px}.guide-detail{margin-top:5px;font-size:9px}.toast{top:24%;font-size:18px}.intro-card{padding:19px 21px}.card-art{height:123px;margin:14px -2px}.art-ufo{top:8px;transform:translateX(-50%) scale(.86)}.art-pad{bottom:4px}.intro-card h1{font-size:45px}.intro-card p{font-size:12px}.card-footer{font-size:8px}}
@media(max-height:650px){.bottom-ui{bottom:13px}.hold-button{width:72px;height:72px}.button-subtitle{margin-top:8px}.intro-card{padding-top:14px;padding-bottom:14px}.card-art{height:90px;margin:9px -2px}.art-ufo{top:-13px;transform:translateX(-50%) scale(.7)}.art-pad{bottom:0}.intro-card h1{font-size:37px;margin:5px 0}.intro-card p{font-size:11px;line-height:1.45;margin-bottom:10px}.start-button{padding:10px 16px}.card-footer{margin-top:9px}}