/* ========================================================================== Intelligami - home hero vortex easter egg Idle crane lives in #mascotHome (existing .mascot-viewport box, untouched). Tap/click expands into #vortexOverlay (fixed, full-viewport, self-contained). Everything here is namespaced under #vortexOverlay / .vg- / #mascotHome so it cannot bleed into the rest of style.css or the other four pages. ========================================================================== */ #mascotHome{cursor:grab;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;} #mascotHome:active{cursor:grabbing;} #mascotHome.vg-settled{cursor:default;} #mascotHome canvas{display:block;outline:none;max-width:100%;max-height:100%;} #heroCopy{transition:opacity .8s ease,transform .8s ease;} #heroCopy.vg-hero-fade{opacity:0;transform:translateY(28px);pointer-events:none;} #vg-idle-wordmark{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:4px;color:rgba(0,117,255,.55);opacity:0;transition:opacity 1s ease;pointer-events:none;white-space:nowrap;} #mascotHome.vg-settled #vg-idle-wordmark{opacity:1;} #vortexOverlay, #vortexOverlay *{box-sizing:border-box;} #vortexOverlay{ position:fixed;inset:0; width:100vw;height:100dvh; background:#01040a; opacity:0;pointer-events:none; /* Must beat site.css header (1000) and #scrollProgress (99999) */ z-index:100000; transition:opacity .55s ease; font-family:'Inter',system-ui,sans-serif;color:#e8f4ff; } #vortexOverlay.active{opacity:1;pointer-events:auto;z-index:100000;} /* Hide site chrome while the game is open so nothing covers score / X */ body.vg-lock-scroll header, body.vg-lock-scroll #scrollProgress{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } body.vg-lock-scroll{ overflow:hidden !important; } #vortexOverlay canvas{display:block;width:100%;height:100%;touch-action:none;} body.vg-lock-scroll{overflow:hidden;} #vg-hud{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .5s ease;} #vg-hud.show{opacity:1;} #vg-brand{position:absolute;top:18px;left:20px;font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;letter-spacing:3px;color:#00e5ff;text-shadow:0 0 18px rgba(0,229,255,.55);} #vg-brand span{display:block;font-size:9px;letter-spacing:2.5px;opacity:.5;font-weight:500;margin-top:2px;} #vg-stats{position:absolute;top:16px;right:60px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:320px;} .vg-stat{background:rgba(0,12,28,.82);border:1px solid rgba(0,180,255,.35);border-radius:6px;padding:5px 10px;min-width:64px;text-align:center;backdrop-filter:blur(6px);} .vg-stat .l{font-size:8px;letter-spacing:1.2px;opacity:.55;text-transform:uppercase;} .vg-stat .v{font-size:13px;font-weight:700;font-family:'Orbitron',sans-serif;color:#00e5ff;} .vg-bar{height:3px;background:rgba(0,30,50,.8);border-radius:2px;margin-top:3px;overflow:hidden;} .vg-fill{height:100%;border-radius:2px;transition:width .15s linear;} #vg-hf{background:linear-gradient(90deg,#00cfff,#00ffaa);} #vg-ef{background:linear-gradient(90deg,#ff9900,#ffee00);} #vg-wep{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);display:flex;gap:6px;} .vg-slot{background:rgba(0,14,32,.85);border:1px solid rgba(0,180,255,.3);border-radius:5px;padding:4px 9px;font-size:9px;opacity:.4;min-width:54px;text-align:center;transition:all .2s;font-family:'Orbitron',sans-serif;} .vg-slot.on{opacity:1;border-color:#00e5ff;box-shadow:0 0 12px rgba(0,229,255,.35);color:#00e5ff;} .vg-slot b{display:block;font-size:10px;} #vg-msg{position:absolute;top:26%;left:50%;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:2px;text-shadow:0 0 20px rgba(0,229,255,.7);opacity:0;transition:opacity .3s;text-align:center;max-width:85vw;pointer-events:none;background:rgba(1,8,18,.55);padding:9px 20px;border-radius:20px;border:1px solid rgba(0,210,255,.25);} #vg-zone{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:2.5px;opacity:.65;font-family:'Orbitron',sans-serif;} #vg-lock{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1.5px;opacity:.55;color:#ff9a7a;} #vg-crosshair{position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .4s;z-index:6;} #vg-crosshair:before,#vg-crosshair:after{content:"";position:absolute;inset:0;border:1.5px solid rgba(0,229,255,.55);border-radius:50%;box-shadow:0 0 10px rgba(0,229,255,.35);} #vg-crosshair:after{inset:11px;border:1.5px solid rgba(255,255,255,.7);} .vg-ch-h,.vg-ch-v{position:absolute;background:#53cfff;} .vg-ch-h{width:8px;height:1.5px;top:14px;}.vg-ch-h.l{left:-3px;}.vg-ch-h.r{right:-3px;} .vg-ch-v{height:8px;width:1.5px;left:14px;}.vg-ch-v.t{top:-3px;}.vg-ch-v.b{bottom:-3px;} #vg-info{position:absolute;bottom:14px;left:16px;font-size:9px;opacity:.35;font-family:monospace;letter-spacing:.5px;} #vg-quit{position:absolute;top:14px;right:14px;z-index:20;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);color:#e8f4ff;font-size:15px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .3s ease,background .2s;pointer-events:none;} #vg-quit.show{display:flex;opacity:.85;pointer-events:auto;} #vg-quit:hover,#vg-quit:focus-visible{opacity:1;background:rgba(255,80,100,.25);border-color:rgba(255,120,140,.55);} #vg-quit:focus-visible{outline:2px solid #00e5ff;outline-offset:2px;} #vg-controls-hint{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);display:flex;gap:14px;opacity:0;transition:opacity .5s;pointer-events:none;z-index:7;} #vg-controls-hint.show{opacity:.75;} .vg-ctrl{font-size:9px;letter-spacing:1px;opacity:.75;text-align:center;} .vg-ctrl kbd{display:inline-block;border:1px solid rgba(0,180,255,.4);border-radius:3px;padding:2px 5px;margin:0 2px;font-family:monospace;font-size:9px;background:rgba(0,20,40,.6);} #vg-vignette{position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,4,10,.75) 100%);} #vg-end{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14%;transition:opacity 1.3s ease;} .vg-end-title{font-size:clamp(1.8rem,5vw,3rem);font-weight:900;letter-spacing:12px;color:#fff;text-shadow:0 0 35px rgba(0,210,255,.7);font-family:'Orbitron',sans-serif;} .vg-end-title span{color:#00d2ff;} .vg-end-line{width:0;height:2px;background:linear-gradient(90deg,transparent,#00d2ff,transparent);margin:14px 0;transition:width 1.1s ease .3s;} .vg-end-sub{font-size:clamp(.8rem,2vw,1rem);font-weight:700;letter-spacing:14px;color:#94a3b8;opacity:0;transition:opacity 1s ease .8s;font-family:'Orbitron',sans-serif;} /* no UI leak into ending */ .vg-ended #vg-hud, .vg-ended #vg-wep, .vg-ended #vg-info, .vg-ended #vg-zone, .vg-ended #vg-lock, .vg-ended #vg-crosshair, .vg-ended #vg-controls-hint, .vg-ended #vg-msg, .vg-ended #vg-brand, .vg-ended #vg-stats, .vg-ended #vg-touch, .vg-ended .vg-touch-btn, .vg-ended [class*="vg-touch"] { display: none !important; opacity: 0 !important; pointer-events: none !important; } .vg-ended #vg-quit { opacity: 0.85; } /* GREEN-V3 digital */ #vortexOverlay,.vg-root{background:#070b14!important} .vg-hud,.vg-wep,.vg-msg{color:#8b9bb3} /* combat HUD polish */ #vg-stats{top:12px;right:54px;gap:6px;max-width:380px} .vg-stat{background:rgba(0,8,20,.55);border:1px solid rgba(0,180,255,.28);border-radius:4px;padding:4px 8px;min-width:56px;backdrop-filter:blur(8px)} .vg-stat .l{font-size:7px;letter-spacing:1.4px;opacity:.5} .vg-stat .v{font-size:12px;font-weight:700} #vg-controls-hint{bottom:18px;opacity:0;pointer-events:none;transition:opacity .45s ease} #vg-controls-hint.show{opacity:.7} #vg-brand{top:12px;left:16px;font-size:12px;letter-spacing:2px;opacity:.85} body.vg-lock-scroll #vortexOverlay{cursor:none} #vortexOverlay.vg-ended{cursor:default} /* mobile HUD compact - stop huge overlapping cards */ @media (max-width: 900px), (pointer: coarse) { #vg-stats{ top: 8px !important; right: 44px !important; left: 8px !important; max-width: none !important; gap: 4px !important; flex-wrap: nowrap !important; justify-content: flex-start !important; } .vg-stat{ min-width: 0 !important; flex: 1 1 0; padding: 3px 5px !important; border-radius: 4px !important; } .vg-stat .l{font-size: 6px !important; letter-spacing: 0.8px !important;} .vg-stat .v{font-size: 11px !important;} #vg-brand{display:none !important;} #vg-zone{ top: auto !important; bottom: 168px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 9px !important; letter-spacing: 1.5px !important; opacity: .75 !important; max-width: 88vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 8; } #vg-lock{ top: auto !important; bottom: 148px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 9px !important; letter-spacing: 1.2px !important; opacity: .85 !important; max-width: 88vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 8; color: #7dd3fc !important; } #vg-info{display:none !important;} #vg-wep{display:none !important;} #vg-controls-hint{display:none !important;} #vg-quit{top: 8px; right: 8px; width: 36px; height: 36px;} #vg-msg{font-size: 12px; top: 22%;} } /* clearer action buttons */ .vg-btn{ background: rgba(0, 20, 40, .55) !important; border: 1px solid rgba(0, 210, 255, .35) !important; color: #b8f0ff !important; } .vg-btn svg{display:block; pointer-events:none;} #vg-btn-fire{ background: rgba(40, 10, 20, .55) !important; border-color: rgba(255, 120, 90, .45) !important; color: #ffb4a0 !important; } #vg-btn-fire:active{ background: rgba(255, 80, 50, .28) !important; border-color: rgba(255, 140, 100, .8) !important; } #vg-btn-fwd:active{ background: rgba(0, 229, 255, .25) !important; } /* immersive mobile shell (when FS API blocked e.g. iOS) */ #vortexOverlay.vg-immersive, #vortexOverlay.active{ position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: -webkit-fill-available; z-index: 100000 !important; background: #01060d; } @supports (padding: env(safe-area-inset-top)) { #vortexOverlay.active{ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } @media (max-width: 900px), (pointer: coarse) { #vg-stats{ top: calc(8px + env(safe-area-inset-top)) !important; } #vg-quit{ top: calc(8px + env(safe-area-inset-top)) !important; } .vg-stick-zone{ bottom: calc(16px + env(safe-area-inset-bottom)) !important; } #vg-btn-fire{ bottom: calc(88px + env(safe-area-inset-bottom)) !important; } #vg-btn-fwd{ bottom: calc(18px + env(safe-area-inset-bottom)) !important; } #vg-zone{ bottom: calc(168px + env(safe-area-inset-bottom)) !important; } #vg-lock{ bottom: calc(148px + env(safe-area-inset-bottom)) !important; } } } /* ========== MOBILE GAMEPAD CONTROLS ========== */ .vg-touch{display:none; pointer-events:auto; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none;} #vortexOverlay.active.is-touch:not(.vg-ended) .vg-touch{display:block;} /* Left analog stick */ .vg-stick-zone{ position:absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 132px; height: 132px; z-index: 12; } .vg-stick-ring{ position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(0,210,255,.18); box-shadow: 0 0 24px rgba(0,180,255,.12), inset 0 0 20px rgba(0,40,80,.35); pointer-events:none; } .vg-stick-base{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 50% 40%, rgba(0,40,70,.55), rgba(0,8,18,.78)); border: 1.5px solid rgba(0,200,255,.32); box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 18px rgba(0,0,0,.35); overflow:hidden; } .vg-stick-cross{ position:absolute; inset:0; width:100%; height:100%; color:#5ecfff; pointer-events:none; opacity:.85; } .vg-stick-thumb{ position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #4fd8ff 0%, #00a8d8 42%, #006a96 100%); border: 2px solid rgba(180,245,255,.75); box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 16px rgba(0,220,255,.45), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,40,70,.4); transition: transform .04s linear; z-index:2; } .vg-stick-zone .vg-ctrl-label{ position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); font-family:'Orbitron',sans-serif; font-size:8px; letter-spacing:2px; color:rgba(140,210,240,.55); pointer-events:none; } /* Right action cluster */ .vg-actions{ position:absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 86px; height: 168px; z-index: 12; } .vg-pad-btn{ position:absolute; right:0; width:74px; height:74px; margin:0; padding:0; border:0 !important; border-radius:50% !important; background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; outline:none !important; appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:none; overflow:visible; } .vg-pad-btn::-moz-focus-inner{border:0; padding:0;} #vortexOverlay button.vg-pad-btn, #vortexOverlay button.vg-pad-fire, #vortexOverlay button.vg-pad-boost{ background:transparent !important; background-color:transparent !important; box-shadow:none !important; border:0 !important; } .vg-pad-fire{ top:0; } .vg-pad-boost{ bottom:0; } .vg-pad-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.14); box-shadow: 0 0 0 4px rgba(0,0,0,.22); pointer-events:none; transition: border-color .12s, box-shadow .12s; } .vg-pad-core{ position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 42%), linear-gradient(160deg, #0a2034 0%, #041018 100%); border: 1.5px solid rgba(0,200,255,.4); box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -6px 12px rgba(0,0,0,.4); transition: transform .08s ease, box-shadow .12s, border-color .12s; } .vg-pad-core svg{ display:block; filter: drop-shadow(0 0 4px rgba(0,220,255,.35)); } /* FIRE variant - warm */ .vg-pad-fire .vg-pad-core{ border-color: rgba(255,120,70,.55); background: radial-gradient(circle at 35% 28%, rgba(255,180,120,.22), transparent 42%), linear-gradient(160deg, #2a1210 0%, #120808 100%); box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 18px rgba(255,80,40,.2), inset 0 1px 0 rgba(255,200,160,.12), inset 0 -6px 12px rgba(0,0,0,.45); } .vg-pad-fire .vg-pad-ring{ border-color: rgba(255,120,80,.28); } .vg-pad-fire .vg-pad-core svg{ filter: drop-shadow(0 0 5px rgba(255,100,50,.55)); } /* BOOST variant - cyan */ .vg-pad-boost .vg-pad-core{ border-color: rgba(0,220,255,.5); box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 18px rgba(0,200,255,.22), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -6px 12px rgba(0,0,0,.4); } .vg-pad-label{ position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); font-family:'Orbitron',sans-serif; font-size:7px; letter-spacing:1.6px; color:rgba(180,220,255,.55); pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.8); } .vg-pad-fire .vg-pad-label{ color:rgba(255,180,140,.6); } /* pressed states */ .vg-pad-btn:active .vg-pad-core, .vg-pad-btn.is-down .vg-pad-core{ transform: scale(0.9); border-color: rgba(255,255,255,.55); } .vg-pad-fire:active .vg-pad-core, .vg-pad-fire.is-down .vg-pad-core{ box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 22px rgba(255,90,40,.55), inset 0 2px 8px rgba(0,0,0,.5); } .vg-pad-boost:active .vg-pad-core, .vg-pad-boost.is-down .vg-pad-core{ box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 22px rgba(0,220,255,.55), inset 0 2px 8px rgba(0,0,0,.5); } /* hide legacy classes if any */ .vg-btn{display:none !important;} @media (max-width: 900px), (pointer: coarse) { .vg-stick-zone{ width:124px; height:124px; } .vg-stick-thumb{ width:48px; height:48px; margin:-24px 0 0 -24px; } .vg-actions{ width:80px; height:156px; } .vg-pad-btn{ width:70px; height:70px; } .vg-pad-core{ width:52px; height:52px; margin:-26px 0 0 -26px; } #vg-zone{ bottom: calc(176px + env(safe-area-inset-bottom, 0px)) !important; } #vg-lock{ bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important; } }