*{box-sizing:border-box;margin:0;padding:0}body{background:#000;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}#game-wrap{position:relative;width:640px;height:480px;overflow:hidden;border:1px solid rgba(0,68,255,.25);box-shadow:0 0 60px #0032c833,0 0 120px #001e781a}#game-canvas{display:block;width:640px;height:480px}#start-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#0a143cfa,#020412fc);z-index:50;gap:0;transition:opacity .5s;overflow:hidden}.ss-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(30,60,180,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(30,60,180,.08) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}#start-screen:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(2,4,18,.75) 100%);pointer-events:none}.ss-header{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;position:relative;z-index:1}.ss-logo-mark{font-size:18px;color:#47f;text-shadow:0 0 18px rgba(60,110,255,.9);animation:pulse-mark 3s ease-in-out infinite;margin-bottom:2px}@keyframes pulse-mark{0%,to{opacity:.7;text-shadow:0 0 18px rgba(60,110,255,.6)}50%{opacity:1;text-shadow:0 0 30px rgba(80,140,255,1)}}.ss-title{font-size:36px;font-weight:800;letter-spacing:7px;text-transform:uppercase;text-align:center;line-height:1.08;color:#fff;text-shadow:0 0 40px rgba(70,120,255,.55),0 2px 0 rgba(0,0,0,.6)}.ss-tagline{font-size:10px;letter-spacing:5px;text-transform:uppercase;background:linear-gradient(90deg,#47f,#3fa,#f4c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:4px}.ss-htp-card{position:relative;z-index:1;width:460px;background:#060c28d1;border:1px solid rgba(40,80,200,.28);border-radius:6px;padding:14px 22px 16px;margin-bottom:18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 0 30px #1432b41f,inset 0 0 30px #000a3c40}.ss-htp-heading{font-size:8px;letter-spacing:4px;text-transform:uppercase;color:#35a;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(30,60,150,.3)}.ss-htp-grid{display:flex;flex-direction:column;gap:8px}.ss-htp-row{display:flex;align-items:center;gap:14px}.ss-htp-keys{display:flex;gap:4px;min-width:130px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:#0b1228;border:1px solid rgba(40,80,180,.5);border-bottom:2px solid rgba(25,55,140,.8);border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.5px;color:#79c;font-family:inherit;box-shadow:0 2px 6px #00000080,inset 0 1px #3c64c826}kbd.kbd-wide{min-width:52px;font-size:9px;letter-spacing:1px}kbd.kbd-accent{border-color:#32c88c80;border-bottom-color:#1e8c5acc;color:#4da;box-shadow:0 2px 6px #00000080,0 0 10px #32c88c1f,inset 0 1px #32c88c1a}.ss-htp-desc{font-size:11px;color:#4a608a;letter-spacing:.5px}#start-btn{position:relative;z-index:1;padding:12px 46px;font-size:13px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;font-family:inherit;cursor:pointer;border-radius:4px;border:1px solid rgba(220,150,30,.7);background:linear-gradient(135deg,#b46e0a8c,#d28c1473);color:#f5c842;text-shadow:0 0 12px rgba(240,190,40,.5);box-shadow:0 0 24px #c88c0a38,0 4px 18px #0000008c,inset 0 1px #ffdc502e;transition:all .22s ease;margin-bottom:18px}#start-btn:hover{background:linear-gradient(135deg,#d2870fbf,#f0aa1ea6);border-color:#f0b432f2;color:#ffe566;text-shadow:0 0 18px rgba(255,210,50,.8);box-shadow:0 0 38px #dca01466,0 4px 20px #0000008c,inset 0 1px #ffe66440;transform:translateY(-1px)}#start-btn:active{transform:translateY(1px);box-shadow:0 0 14px #c88c0a33,0 2px 8px #00000080}.ss-zones{position:relative;z-index:1;display:flex;align-items:center;gap:10px}.ss-zone{display:flex;align-items:center;gap:6px}.ss-zone-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}.ss-zone.zone-a .ss-zone-dot{background:#36f;box-shadow:0 0 6px #3264ffcc}.ss-zone.zone-b .ss-zone-dot{background:#3fa;box-shadow:0 0 6px #32ffa0cc}.ss-zone.zone-c .ss-zone-dot{background:#f3c;box-shadow:0 0 6px #ff32c8cc}.ss-zone-name{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase}.ss-zone.zone-a .ss-zone-name{color:#47f}.ss-zone.zone-b .ss-zone-name{color:#3fa}.ss-zone.zone-c .ss-zone-name{color:#f4c}.ss-zone-label{font-size:9px;color:#2a3a5a;letter-spacing:1px}.ss-zone-divider{color:#1a2440;font-size:14px;line-height:1}.zone-a{background:#3264ff33;color:#58f}.zone-b{background:#32c89633;color:#4da}.zone-c{background:#c832b433;color:#e5c}#crosshair{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffffff8c;font-size:20px;pointer-events:none;z-index:20;line-height:1;font-weight:100;letter-spacing:-1px}#interact-hint{position:absolute;bottom:64px;left:50%;transform:translate(-50%) translateY(10px);background:#08102ce6;border:1px solid rgba(50,100,255,.4);color:#79e;font-size:10px;letter-spacing:3px;padding:5px 16px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:20;text-transform:uppercase}#interact-hint.visible{opacity:1;transform:translate(-50%) translateY(0)}#zone-label{display:none;position:absolute;bottom:92px;left:50%;transform:translate(-50%);color:#acf;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;pointer-events:none;z-index:20;text-shadow:0 0 12px rgba(100,160,255,.7)}#hud{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:5px;z-index:20;pointer-events:none}.hud-zone{font-size:9px;letter-spacing:2px;padding:4px 11px;border-radius:10px;background:#080e28bf;border:1px solid rgba(26,50,100,.8);color:#346;text-transform:uppercase;transition:all .5s}.hud-zone.done{background:#143c28bf;border-color:#32dc8299;color:#4e9;text-shadow:0 0 8px rgba(50,220,130,.5)}#notification{position:absolute;bottom:18px;left:50%;transform:translate(-50%) translateY(16px);background:#060c24f2;border:1px solid rgba(50,100,255,.5);color:#9bf;font-size:11px;letter-spacing:1px;padding:8px 22px;border-radius:22px;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:30;white-space:nowrap;box-shadow:0 0 24px #3264ff33}#notification.show{opacity:1;transform:translate(-50%) translateY(0)}#panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#020410e0;z-index:40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#panel.hidden{display:none}#panel-inner{position:relative;width:510px;background:#060c24f7;border:1px solid rgba(50,100,255,.35);border-radius:3px;padding:28px 34px;box-shadow:0 0 50px #0032b426,inset 0 0 50px #00145033;display:flex;flex-direction:column;gap:14px;overflow:hidden}#panel-inner:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,40,120,.03) 3px,rgba(0,40,120,.03) 4px);pointer-events:none;border-radius:3px}#panel-title{font-size:12px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:#79e;text-shadow:0 0 14px rgba(80,130,255,.5);border-bottom:1px solid rgba(26,50,130,.6);padding-bottom:12px}#panel-tip{font-size:11px;color:#3d5280;line-height:1.7;font-style:italic;padding:8px 12px;background:#000a2866;border-left:2px solid rgba(50,100,255,.3);border-radius:0 2px 2px 0}#panel-prompt{font-size:13px;color:#aabbd4;line-height:1.7}#panel-input{width:100%;background:#000618d9;border:1px solid rgba(30,60,160,.6);border-radius:2px;color:#ccddf0;font-size:13px;padding:10px 14px;resize:none;min-height:88px;font-family:inherit;line-height:1.65;outline:none;transition:border-color .2s,box-shadow .2s}#panel-input:focus{border-color:#5082ffb3;box-shadow:0 0 16px #3264ff26}#panel-input.shake{animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}60%{transform:translate(6px)}80%{transform:translate(-3px)}}#panel-hint{font-size:10px;color:#1e2e50;letter-spacing:1px}#panel-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:2px}.btn{padding:7px 22px;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;border-radius:2px;cursor:pointer;border:1px solid;transition:all .2s;font-family:inherit}.btn-save{background:#1e3cb473;border-color:#466edccc;color:#9bf}.btn-save:hover{background:#325adc99;color:#fff;box-shadow:0 0 18px #3264ff4d}.btn-close{background:transparent;border-color:#1e325ab3;color:#346}.btn-close:hover{border-color:#325082cc;color:#568}#presentation{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#020410f0;z-index:45;gap:18px}#presentation.hidden{display:none}#pres-step-label{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:#2a3550;margin-bottom:-8px}#pres-label{font-size:20px;font-weight:200;letter-spacing:12px;text-transform:uppercase;color:#e4c;text-shadow:0 0 24px rgba(220,50,200,.6);opacity:0;transform:translateY(-12px);transition:opacity .9s ease,transform .9s ease}#pres-text{font-size:14px;color:#c8d8ee;max-width:440px;text-align:center;line-height:1.85;opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease;font-style:italic;min-height:60px}#pres-label.fade-in,#pres-text.fade-in{opacity:1;transform:translateY(0)}#pres-progress{display:flex;gap:10px;margin-top:8px}.pres-dot{width:6px;height:6px;border-radius:50%;background:#283c64cc;border:1px solid rgba(60,100,160,.4);transition:background .4s,box-shadow .4s}.pres-dot.active{background:#e4c;box-shadow:0 0 10px #dc32c899}#pres-skip{font-size:10px;letter-spacing:2.5px;color:#1e2e50;cursor:pointer;text-transform:uppercase;background:transparent;border:none;font-family:inherit;transition:color .2s;margin-top:6px}#pres-skip:hover{color:#457}#summary{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;background:#020410f7;z-index:50;padding:22px 28px 28px;gap:10px;scrollbar-width:thin;scrollbar-color:#1a3388 transparent}#summary.hidden{display:none}#summary h2{font-size:13px;letter-spacing:6px;text-transform:uppercase;color:#79e;text-shadow:0 0 18px rgba(80,130,255,.5);margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid rgba(26,50,130,.4)}.sum-section{background:#060c24d9;border:1px solid rgba(26,50,100,.5);border-radius:2px;padding:14px 18px;display:flex;flex-direction:column;gap:8px}.sum-section-title{font-size:9px;letter-spacing:3px;text-transform:uppercase;margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid rgba(26,50,100,.3)}.sum-section-title.zone-a{color:#58f}.sum-section-title.zone-b{color:#4da}.sum-section-title.zone-c{color:#e5c}.sum-item-label{font-size:9px;color:#2a3a5a;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}.sum-item-value{font-size:12px;color:#89b;line-height:1.6;font-style:italic}#summary-close{align-self:center;margin-top:6px;padding:8px 26px;font-size:10px;letter-spacing:3px;text-transform:uppercase;background:#1e3cb459;border:1px solid rgba(70,110,220,.6);border-radius:2px;color:#9bf;cursor:pointer;font-family:inherit;transition:all .2s}#summary-close:hover{background:#325adc80;color:#fff}