@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800;900&family=Inter:wght@500;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--cyan:#45cfff;--violet:#a54bff;--ink:#070b1c;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;background:#050914;width:100%;height:100%;min-height:100dvh;margin:0;overflow:hidden}button,input{font:inherit}#game-canvas{outline:none;display:block;position:fixed;inset:0}.panel-screen{z-index:20;background-image:radial-gradient(circle at 50% 35%,#18235b47,#02040ec7 68%),linear-gradient(100deg,#020512e0,#080a1c6b),url(/vortexa/assets/brand/vortexa-keyart-v1.jpg);background-position:50%;background-size:cover;place-items:center;padding:20px;transition:opacity .25s;display:grid;position:fixed;inset:0}.panel-screen.hidden{opacity:0;pointer-events:none;display:none}.join-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(145deg,#070b1ff0,#0f0c2be6);border:1px solid #7978ff6b;border-radius:22px;width:calc(100vw - 40px);max-width:780px;max-height:calc(100vh - 30px);padding:22px 30px 26px;overflow:auto;box-shadow:0 24px 90px #0000009e,0 0 40px #4364ff29,inset 0 0 35px #6443ff0f}.eyebrow{color:var(--cyan);letter-spacing:.27em;text-align:center;text-shadow:0 0 12px #45cfffb3;font:700 11px/1 Inter,sans-serif}.game-logo{object-fit:contain;filter:drop-shadow(0 10px 25px #0000008c);width:min(100%,430px);max-height:185px;margin:-8px auto -14px;display:block}h1{color:#fff;letter-spacing:-.04em;margin:10px 0 4px;font:900 clamp(52px,12vw,76px)/.73 Barlow Condensed,sans-serif}h1 span{color:var(--cyan)}.join-card p{color:#aebbd1;text-align:center;margin:4px 0 20px;font-size:13px}form{gap:10px;display:grid}label{color:#7f90af;letter-spacing:.16em;font-size:11px;font-weight:700}input{color:#fff;background:#18243d;border:1px solid #35435f;border-radius:10px;outline:none;width:100%;padding:15px 16px}input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #44e5e71f}.hero-picker{border:0;min-width:0;margin:10px 0 4px;padding:0}.hero-picker legend{color:#7f90af;letter-spacing:.16em;margin-bottom:9px;font-size:11px;font-weight:700}.hero-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0;display:grid}.hero-option{color:#aebbd1;background:linear-gradient(160deg, color-mix(in srgb, var(--hero-color) 16%, #17243d), #0b1222 72%);cursor:pointer;border:1px solid #35435f;border-radius:12px;grid-template-rows:152px auto auto;place-items:center;gap:2px;min-width:0;padding:0 5px 9px;transition:transform .15s,border-color .15s,filter .15s;display:grid;position:relative;overflow:hidden}.hero-option:after{content:"";background:linear-gradient(90deg, transparent, var(--hero-color), transparent);opacity:.55;height:1px;position:absolute;bottom:42px;left:8%;right:8%}.hero-option:hover{filter:brightness(1.12);transform:translateY(-3px)}.hero-option.selected{color:#fff;border-color:var(--hero-color);box-shadow:0 0 0 2px color-mix(in srgb, var(--hero-color) 28%, transparent), inset 0 -4px var(--hero-color), 0 8px 24px #00000061}.hero-portrait{background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--hero-color) 28%, transparent), transparent 68%);align-self:stretch;width:100%;overflow:hidden}.hero-portrait img{object-fit:contain;object-position:center top;filter:drop-shadow(0 7px 7px #000000ad);width:100%;height:168px;transition:transform .18s;display:block}.hero-option:hover .hero-portrait img,.hero-option.selected .hero-portrait img{transform:scale(1.045)}.hero-option.granite{--hero-color:#67d8d4}.hero-option.andreborg{--hero-color:#31bfff}.hero-option.filippus{--hero-color:#d8efff}.hero-option.daragon14{--hero-color:#e5a23f}.hero-option.manu{--hero-color:#55d8ff}.hero-option.mortimer{--hero-color:#ed334f}.hero-option.nora{--hero-color:#ef445f}.hero-option.luna{--hero-color:#a985ff}.hero-option.kai{--hero-color:#5ab8ff}.hero-option.raven{--hero-color:#9b55e7}.hero-option strong{z-index:1;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap;width:100%;max-width:100%;font:800 15px Barlow Condensed;overflow:hidden}.hero-option small{z-index:1;color:#8c9ab4;letter-spacing:.1em;font-size:7px}.primary{color:#fff;letter-spacing:.08em;cursor:pointer;background:linear-gradient(100deg,#1579d6,#7849e8 55%,#b238dd);border:1px solid #fff3;border-radius:10px;margin-top:5px;padding:16px;font-weight:900;box-shadow:0 8px 26px #5643e25c,inset 0 1px #ffffff40}.primary:disabled{opacity:.55}.install-button{color:#c7f6ff;letter-spacing:.13em;cursor:pointer;background:#1e486e80;border:1px solid #55dcff85;border-radius:9px;padding:11px 16px;font-size:11px;font-weight:900}.install-button[hidden]{display:none}#connection-status{color:#7f90af;text-align:center;min-height:18px;margin-top:14px;font-size:12px}#hud{z-index:10;pointer-events:none;opacity:0;transition:opacity .25s;position:fixed;inset:0}.playing #hud{opacity:1}.stats-card{top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0c162bb8;border:1px solid #ffffff26;border-radius:10px;display:flex;position:absolute;overflow:hidden}.stats-card div{text-align:center;min-width:70px;padding:7px 13px;display:grid}.stats-card div+div{border-left:1px solid #ffffff1f}.stats-card strong{font:800 22px/1 Barlow Condensed}.stats-card span{color:#96a6c0;letter-spacing:.15em;margin-top:3px;font-size:8px}.room-pill{top:calc(16px + env(safe-area-inset-top));color:#bdc7d8;letter-spacing:.12em;background:#0c162ba8;border-radius:99px;align-items:center;gap:7px;padding:7px 12px;font-size:9px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.online-dot{background:#5cff95;border-radius:50%;width:6px;height:6px;box-shadow:0 0 7px #5cff95}.pill-separator{color:#647592}#quality-badge{color:var(--cyan);font-weight:800}.health-card{top:calc(76px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));background:#0c162bc7;border-radius:9px;align-items:center;gap:8px;width:142px;padding:8px 10px;display:flex;position:absolute}.health-card>span{color:var(--cyan);font:800 12px Barlow Condensed}.health-card>strong{width:27px;font:800 16px Barlow Condensed}.health-track{background:#26344c;border-radius:10px;flex:1;height:7px;overflow:hidden}#health-fill{border-radius:inherit;background:linear-gradient(90deg, #23ba9b, var(--cyan));width:100%;height:100%;transition:width .15s}#health-fill.danger{background:#ff596b}.energy-card{left:calc(18px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));position:absolute}#energy-ring{--energy:360deg;background:conic-gradient(#ff304f var(--energy), #3b0e19cc 0);border-radius:50%;width:106px;height:106px;padding:8px;transition:background .18s;display:grid;box-shadow:0 0 25px #ff23464d,inset 0 0 0 2px #ffffff1f}#energy-ring:before{content:"";background:radial-gradient(circle at 40% 32%,#44202a,#120d18 72%);border-radius:50%;grid-area:1/1;box-shadow:inset 0 0 16px #ff234638}#energy-ring>div{z-index:1;text-align:center;grid-area:1/1;place-content:center;display:grid}#energy-ring strong{color:#fff;font:900 31px/.85 Barlow Condensed}#energy-ring span{color:#ff8798;letter-spacing:.13em;margin-top:5px;font:800 8px Inter}#energy-ring.low{animation:.55s ease-in-out infinite alternate energy-low}@keyframes energy-low{to{filter:brightness(.62);scale:.96}}.inventory-card{right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;background:#070d1ce6;border:1px solid #fff3;border-radius:14px;min-width:410px;padding:9px;position:absolute;box-shadow:0 12px 32px #00000052}.inventory-heading{justify-content:flex-end;align-items:baseline;gap:7px;padding:0 3px 7px;display:flex}.inventory-heading span{color:#7e8ba3;letter-spacing:.14em;font:700 8px Inter}.inventory-heading strong{letter-spacing:.06em;font:800 13px Barlow Condensed}#inventory-slots{gap:5px;display:flex}.inventory-slot{opacity:.3;color:#acb7cb;cursor:pointer;background:linear-gradient(145deg,#1c2940,#11192a);border:1px solid #3d4961;border-radius:9px;place-items:center;width:61px;height:58px;padding:3px;display:grid}.inventory-slot.owned{opacity:.9}.inventory-slot.active{opacity:1;color:#fff;border-color:var(--item-color);background:color-mix(in srgb, var(--item-color) 20%, #151e30);box-shadow:inset 0 -3px var(--item-color), 0 0 14px color-mix(in srgb, var(--item-color), transparent 72%);transform:translateY(-3px)}.inventory-slot b{color:var(--item-color);text-shadow:0 0 10px var(--item-color);font:900 24px/1 Barlow Condensed}.inventory-slot small{letter-spacing:.05em;text-overflow:ellipsis;width:100%;font:700 7px Barlow Condensed;overflow:hidden}#crosshair{width:38px;height:38px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playing #crosshair{display:none}#crosshair i{background:#fff;display:block;position:absolute;box-shadow:0 0 3px #0c1427}#crosshair i:first-child,#crosshair i:nth-child(2){width:9px;height:2px;top:18px}#crosshair i:first-child{left:0}#crosshair i:nth-child(2){right:0}#crosshair i:nth-child(3),#crosshair i:nth-child(4){width:2px;height:9px;left:18px}#crosshair i:nth-child(3){top:0}#crosshair i:nth-child(4){bottom:0}#hit-marker{opacity:0;color:#fff;font:500 38px/1 sans-serif;position:absolute;top:50%;left:50%;transform:translate(-50%,-54%)rotate(45deg)}#hit-marker.flash{animation:.18s ease-out hit}@keyframes hit{0%{opacity:1;scale:.65}to{opacity:0;scale:1.25}}#feed{text-align:center;position:absolute;top:20%;left:50%;transform:translate(-50%)}#feed div{color:#fff;letter-spacing:.08em;background:#0e172cbf;border-radius:5px;margin:5px;padding:7px 13px;font:800 16px Barlow Condensed;animation:2.6s forwards feed}@keyframes feed{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}to{opacity:0}}#respawn-message{color:#ff7887;text-align:center;letter-spacing:.08em;background:#0c1222e6;border:1px solid #ff596b;border-radius:10px;padding:18px 28px;font:900 28px Barlow Condensed;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#respawn-message.visible{display:block}#respawn-message small{color:#fff;font-size:14px}#debug-panel{top:calc(116px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));white-space:pre;color:#8dffb6;background:#000000b3;border-radius:5px;padding:8px;font:11px/1.5 monospace;display:none;position:absolute}#debug-panel.visible{display:block}.touch-control{pointer-events:auto;display:none}#rotate-device{display:none}@media (pointer:coarse),(max-width:850px){.touch-control{display:block}#joystick-zone{bottom:calc(8px + env(safe-area-inset-bottom));left:env(safe-area-inset-left);width:47vw;height:48vh;position:absolute}#joystick-base{background:#0c162b4d;border:2px solid #ffffff47;border-radius:50%;width:122px;height:122px;position:absolute;bottom:3px;left:126px}#joystick-knob{background:#44e5e76b;border:2px solid #ffffffb3;border-radius:50%;width:48px;height:48px;position:absolute;top:35px;left:35px}#action-buttons{right:calc(16px + env(safe-area-inset-right));bottom:calc(82px + env(safe-area-inset-bottom));width:190px;height:155px;position:absolute}#action-buttons button{color:#eaf7ff;box-shadow:inset 0 1px 0 #ffffff57, inset 0 -7px 15px #00000047, 0 5px 16px #0006, 0 0 12px color-mix(in srgb, currentColor 24%, transparent);background:radial-gradient(circle at 38% 30%,#67aee64d,#0a142adb 68%);border:2px solid #d2ebffa3;border-radius:50%;place-items:center;padding:0;transition:scale .1s,filter .1s,box-shadow .1s;display:grid;position:absolute;overflow:visible}#action-buttons button:before{content:"";opacity:.2;border:1px solid;border-radius:50%;position:absolute;inset:4px}#action-buttons button:active{filter:brightness(1.45);box-shadow:inset 0 3px 12px #00000061, 0 0 20px color-mix(in srgb, currentColor 55%, transparent);scale:.88}#action-buttons svg{fill:none;stroke:currentColor;stroke-width:2.1px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px);pointer-events:none;width:56%;height:56%;overflow:visible}#fire-button{background:radial-gradient(circle,#1da2c357,#07162beb 70%);width:82px;height:82px;animation:1.8s ease-in-out infinite alternate fire-ready;bottom:0;right:0;box-shadow:inset 0 0 19px #39dbff33,0 6px 18px #00000073,0 0 22px #44e5e747;color:#5eeeff!important;border-color:#5eeeffe0!important}#fire-button svg{stroke-width:1.9px;width:61%;height:61%}#jump-button{width:58px;height:58px;bottom:65px;right:92px;color:#b9b3ff!important;border-color:#b9b3ffc7!important}#interact-button{background:radial-gradient(circle at 40% 30%,#ffbe4042,#1c1824e6 70%);width:54px;height:54px;bottom:0;right:82px;color:#ffd76a!important;border-color:#ffd76ad1!important}#reload-button{width:50px;height:50px;bottom:95px;right:0;color:#8fdcff!important}@keyframes fire-ready{to{box-shadow:inset 0 0 24px #39dbff47,0 6px 18px #00000073,0 0 30px #44e5e77a}}.health-card{top:calc(72px + env(safe-area-inset-top));width:142px}#energy-ring{width:92px;height:92px}.energy-card{left:calc(10px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom))}.inventory-card{right:calc(10px + env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));min-width:0;padding:5px}.inventory-heading{display:none}#inventory-slots{gap:3px}.inventory-slot{width:43px;height:43px}.inventory-slot b{font-size:16px}.inventory-slot small{display:none}}@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){.stats-card{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));transform-origin:0 0;transform:scale(.72)}.health-card{top:calc(58px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));transform-origin:0 0;transform:scale(.78)}.room-pill{top:calc(8px + env(safe-area-inset-top));transform:translate(-50%)scale(.82)}.energy-card{left:calc(8px + env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom))}#energy-ring{width:70px;height:70px;padding:6px}#energy-ring strong{font-size:23px}#energy-ring span{margin-top:3px;font-size:6px}#joystick-zone{width:42vw;height:44vh}#joystick-base{width:88px;height:88px;left:clamp(48px,10vw,92px)}#joystick-knob{width:34px;height:34px;top:25px;left:25px}#action-buttons{right:calc(8px + env(safe-area-inset-right));bottom:calc(54px + env(safe-area-inset-bottom));width:148px;height:116px}#fire-button{width:64px;height:64px}#fire-button svg{width:60%;height:60%}#jump-button{width:46px;height:46px;bottom:49px;right:72px}#interact-button{width:43px;height:43px;right:64px}#reload-button{width:40px;height:40px;bottom:70px}.inventory-card{right:calc(8px + env(safe-area-inset-right));bottom:calc(5px + env(safe-area-inset-bottom))}.inventory-slot{width:36px;height:36px}.inventory-slot b{font-size:14px}}@media (max-width:560px){.join-card{padding:22px}.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-option{grid-template-rows:122px auto auto}.hero-portrait img{height:138px}}@media (orientation:portrait) and (pointer:coarse){.playing #rotate-device{z-index:50;text-align:center;background:#10182e;place-content:center;gap:8px;display:grid;position:fixed;inset:0}.phone-icon{color:var(--cyan);margin:auto;font-size:58px;animation:1.6s ease-in-out infinite rotate-phone}#rotate-device strong{letter-spacing:.08em;font:900 26px Barlow Condensed}#rotate-device span{color:#91a0b9;font-size:13px}@keyframes rotate-phone{50%{transform:rotate(90deg)}}}