/* Pixel-coordinate React layout rebuilt from the 1672 × 941 concept canvases. */
.artwork.artwork--vanguard{display:block;overflow:hidden;background:#080c0f;border-color:#2c3336;border-radius:3px;padding:0;}
.vg-viewport{width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:#080c0f;}
.vg-fit{position:relative;flex:none;}
.vg-canvas{position:absolute;top:0;left:0;width:1672px;height:941px;transform-origin:top left;overflow:hidden;background:#11181b;color:#f7f1e4;font-family:Georgia,'Times New Roman',serif;font-size:24px;line-height:1.3;text-shadow:0 2px 3px #000;}
.vg-canvas *{box-sizing:border-box;}
.vg-canvas h1,.vg-canvas h2,.vg-canvas h3,.vg-canvas p{margin:0;font-family:inherit;font-weight:400;letter-spacing:0;color:inherit;}
.vg-canvas button{font:inherit;color:inherit;cursor:pointer;line-height:inherit;text-shadow:inherit;}
.vg-canvas button:disabled{cursor:default;}
.vg-canvas button:focus-visible{outline:3px solid #ffe3a0;outline-offset:5px;}
.vg-canvas button:hover:not(:disabled){filter:brightness(1.2);}
.vg-canvas button{transition:filter .15s,background-color .15s;}
.vg-canvas .vg-art{display:block;object-fit:contain;width:100%;height:100%;max-width:none;padding:0;min-height:0;cursor:inherit;user-select:none;}
.vg-canvas .vg-scene{position:absolute;inset:0;width:1672px;height:941px;object-fit:fill;pointer-events:none;}
.vg-main{position:absolute;inset:0;}
.vg-header{position:absolute;left:0;top:0;width:800px;height:105px;background:linear-gradient(90deg,#080f13d9,#10161a99,transparent);}
.vg-breadcrumb{height:48px;display:flex;align-items:center;gap:22px;padding:0 40px;border-bottom:1px solid #bba57a66;letter-spacing:3px;font-size:23px;}
.vg-breadcrumb button{background:none;border:0;padding:0;letter-spacing:3px;}
.vg-breadcrumb strong{color:#efc978;font-weight:400;}
.vg-breadcrumb small{font-size:22px;letter-spacing:0;margin-left:27px;}
.vg-class-tabs{display:flex;height:56px;border-bottom:1px solid #a3a08a44;padding:0 40px;gap:14px;}
.vg-class-tabs button{flex:1;background:none;border:0;position:relative;font-size:25px;text-transform:uppercase;padding:5px 10px;color:#d8d7d2;}
.vg-class-tabs button[aria-pressed=true]{color:#ffd17d;border-bottom:3px solid #bd3227;}
.vg-class-tabs button[aria-pressed=true]:after{content:'◇';position:absolute;bottom:-16px;left:calc(50% - 12px);font-size:26px;color:#e6b266;background:#711b17;line-height:26px;transform:scale(.65);}
.vg-class-title{position:absolute;left:49px;top:140px;display:flex;gap:23px;align-items:center;height:190px;}
.vg-banner-button{background:none;border:0;width:99px;height:196px;padding:0;}
.vg-class-title h1{font-size:67px;text-transform:uppercase;font-variant:small-caps;line-height:1.15;}
.vg-class-title h2{font-size:33px;margin-top:4px;}
.vg-class-title p{font-size:24px;margin-top:22px;}
.vg-traits{position:absolute;left:57px;top:354px;width:528px;padding-top:20px;border-top:1px solid #bd995b;}
.vg-trait{display:flex;align-items:center;gap:24px;height:82px;}
.vg-diamond-icon{width:53px;height:53px;transform:rotate(45deg);border:2px solid #cfb17a;display:grid;place-items:center;margin:0 20px 0 9px;background:#11191dcc;}
.vg-diamond-icon svg{width:40px;height:40px;transform:rotate(-45deg);color:#f4d89b;}
.vg-trait>div{width:300px;flex:none;}
.vg-trait>div>span{font-size:26px;}
.vg-bar{height:16px;margin-top:7px;border:1px solid #b9b4a5;border-radius:2px;background:#12181dcc;overflow:hidden;box-shadow:inset 0 0 5px #000;}
.vg-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#ffffff00 0 49px,#fff6 50px 51px),linear-gradient(0deg,#bc8e4a,#ffe4a1);box-shadow:inset 0 0 4px #fff7;}
.vg-trait-1 .vg-bar i{background:repeating-linear-gradient(90deg,#ffffff00 0 49px,#fff6 50px 51px),linear-gradient(0deg,#45758e,#b5e6f9);}
.vg-trait-2 .vg-bar i{background:repeating-linear-gradient(90deg,#ffffff00 0 49px,#fff6 50px 51px),linear-gradient(0deg,#912c24,#e29576);}
.vg-trait strong{font-size:24px;font-weight:400;text-transform:uppercase;color:#e5c382;}
.vg-traits em{display:block;font-size:21px;margin-top:20px;color:#e6e0d4;}
.vg-frame{position:absolute;background:linear-gradient(110deg,#0b1215f2,#121819ed 50%,#080f11f5);border:2px solid #b59254;box-shadow:inset 0 0 0 4px #11191c,inset 0 0 0 5px #b2925755,0 4px 12px #0009;border-radius:9px 3px 9px 3px;}
.vg-corner{position:absolute;width:15px;height:15px;border:1px solid #d6b16d;pointer-events:none;}
.vg-corner:after{content:'◇';position:absolute;font-size:14px;line-height:14px;color:#bd9c62;}
.vg-corner.tl{top:5px;left:5px;border-right:0;border-bottom:0;}.vg-corner.tr{top:5px;right:5px;transform:rotate(90deg);border-right:0;border-bottom:0;}.vg-corner.bl{bottom:5px;left:5px;transform:rotate(-90deg);border-right:0;border-bottom:0;}.vg-corner.br{bottom:5px;right:5px;transform:rotate(180deg);border-right:0;border-bottom:0;}
.vg-tradeoff{left:49px;top:654px;width:528px;height:119px;display:flex;gap:27px;align-items:center;padding:18px 26px;}
.vg-tradeoff>svg{width:57px;height:57px;color:#e4c18a;flex:none;}
.vg-tradeoff h3{font-size:24px;text-transform:uppercase;color:#edd29e;margin-bottom:9px;}
.vg-tradeoff p{font-size:21px;white-space:nowrap;}
.vg-current-loadout{top:124px;left:1265px;width:364px;height:673px;padding:19px 22px 22px;}
.vg-current-loadout h3{text-align:center;text-transform:uppercase;font-size:25px;margin:0 0 10px;}
.vg-divider{height:1px;position:relative;background:linear-gradient(90deg,transparent,#c09a58 15%,#c09a58 85%,transparent);margin:19px 0;}
.vg-divider:after{content:'◇';position:absolute;left:calc(50% - 8px);top:-12px;background:#101718;color:#dfb96c;font-size:21px;line-height:22px;}
.vg-equipped-row{display:flex;width:100%;height:181px;align-items:center;gap:23px;background:none;border:0;text-align:left;padding:4px 0;}
.vg-item-tile{height:171px;width:137px;flex:none;display:block;background:linear-gradient(135deg,#202627,#090d10);border:1px solid #b1935b;box-shadow:inset 0 0 0 4px #111719,inset 0 0 0 5px #b1935b66;padding:10px;}
.vg-equipped-row strong{font-size:27px;font-weight:400;white-space:nowrap;}
.vg-badge{display:block;border:1px solid #aeb8a0;background:#1b271bcc;color:#f5f0e6;text-transform:uppercase;font-size:17px;text-align:center;padding:4px 13px;margin-top:10px;box-shadow:inset 0 0 0 3px #0b111377;}
.vg-badge.is-preview{background:linear-gradient(#d8bc84,#a58344);border-color:#d6b777;color:#17130c;text-shadow:none;}
.vg-footer{position:absolute;left:0;bottom:0;width:100%;height:113px;background:linear-gradient(#070e13cd,#05090dce);border-top:2px solid #c4a46b;display:flex;align-items:center;justify-content:space-between;padding:0 55px;}
.vg-back,.vg-spectate{border:0;background:none;text-transform:uppercase;font-size:25px;display:flex;align-items:center;gap:28px;}
.vg-back span{font-size:41px;color:#dcc7a7;font-family:Georgia,serif;font-weight:400;line-height:1;}
.vg-step{margin-left:auto;padding:12px 0 12px 38px;border-left:1px solid #bb9c68;font-size:24px;}
.vg-button{position:relative;border:1px solid #bea270;background:linear-gradient(120deg,#11191ddd,#080d10ed);padding:17px 28px;text-transform:uppercase;font-size:22px;box-shadow:inset 0 0 0 4px #11171a,inset 0 0 0 5px #a98b5a66;min-height:58px;}
.vg-primary{background:linear-gradient(100deg,#3b0d0f,#7c1d15 45%,#3a0d0c);color:#fff5e3;border-color:#e9b966;box-shadow:inset 0 0 0 4px #4b2815,inset 0 0 0 5px #e7b566,0 0 12px #000;}
.vg-button:disabled{opacity:.48;filter:grayscale(.7);}
.vg-main-action{position:absolute;left:50%;top:16px;transform:translateX(-50%);min-width:405px;height:74px;font-size:32px;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);padding:12px 56px;border:2px solid #d7a44a;}
.vg-main-action:before{content:'';position:absolute;inset:5px;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);border-top:1px solid #f6cf87;border-bottom:1px solid #f6cf87;pointer-events:none;}
.vg-main-action:focus-visible{outline:0;filter:brightness(1.5);text-decoration:underline;}
.vg-screen-deploy .vg-main-action{min-width:356px;font-size:40px;}
.vg-current-class{position:absolute;left:429px;top:0;height:104px;display:flex;align-items:center;gap:35px;background:none;border:0;text-transform:uppercase;color:#edd29e!important;font-size:23px;}
.vg-current-class .vg-art{width:67px;height:115px;}
.vg-screen-loadout .vg-breadcrumb{height:105px;width:427px;font-size:30px;gap:22px;padding-left:43px;}
.vg-screen-loadout .vg-header{height:105px;}
.vg-collection{position:absolute;top:140px;left:56px;width:507px;}
.vg-collection h2{text-transform:uppercase;font-size:30px;margin-bottom:8px;}
.vg-gold-rule{height:1px;background:#b39359;width:100%;margin-bottom:29px;}
.vg-weapon-grid{display:flex;gap:20px;}
.vg-weapon-card{width:155px;height:500px;flex:none;position:relative;border:2px solid #a78e60;background:linear-gradient(145deg,#202729eb,#070c0deb);box-shadow:inset 0 0 0 4px #0c1214,inset 0 0 0 5px #caa96e55;padding:12px 10px 14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}
.vg-weapon-card.is-selected{border-color:#ffe0a0;box-shadow:0 0 13px #e9c58b88,inset 0 0 0 4px #0c1214,inset 0 0 0 5px #caa96eaa;}
.vg-weapon-card .vg-art{position:absolute;left:12px;top:12px;width:127px;height:376px;object-fit:cover;}
.vg-weapon-card strong{font-size:21px;text-transform:uppercase;font-weight:400;margin-top:auto;width:100%;text-align:center;border-top:1px solid #756341;padding-top:7px;}
.vg-weapon-card .vg-badge{width:100%;margin-top:9px;font-size:18px;padding:10px 5px;}
.vg-rank{font-size:21px;line-height:1.2;text-align:center;margin-top:11px;min-height:48px;}
.vg-lock{position:absolute;top:328px;right:47px;width:39px;height:46px;color:#d0c09b;background:#1118;}
.vg-canvas .vg-weapon-hero{position:absolute;left:647px;top:12px;width:333px;height:816px;object-fit:cover;pointer-events:none;filter:drop-shadow(14px 15px 8px #000a);}
.vg-comparison{top:143px;left:1090px;width:540px;height:636px;padding:32px 38px;}
.vg-comparison h1{font-size:47px;text-align:center;text-transform:uppercase;line-height:1.15;}
.vg-comparison>em{display:block;font-size:25px;text-align:center;margin-top:2px;}
.vg-comparison .vg-divider{margin:22px 0 24px;}
.vg-comparison h3{text-align:center;text-transform:uppercase;font-size:25px;margin-bottom:23px;}
.vg-comparison table{width:100%;border-collapse:collapse;font-size:25px;}
.vg-comparison th{font-weight:400;text-align:left;}.vg-comparison td{text-align:center;}
.vg-comparison td,.vg-comparison th{height:65px;border-bottom:1px solid #d7c79e29;}
.vg-comparison .vg-new-value{color:#f1cd73;}
.vg-illustrative{text-align:center;font-style:italic;font-size:20px!important;margin:21px 0 17px!important;}
.vg-comparison-message{font-size:25px;line-height:1.2;min-height:69px;}
.vg-comparison-actions{display:flex;gap:18px;position:absolute;bottom:40px;left:38px;right:38px;}
.vg-comparison-actions .vg-button{flex:1;padding:13px 11px;font-size:20px;white-space:nowrap;}
.vg-screen-loadout .vg-footer{height:96px;}
.vg-review{position:absolute;top:133px;left:63px;width:453px;}
.vg-review h1{text-transform:uppercase;font-size:52px;white-space:nowrap;line-height:1.2;}
.vg-review h2{font-size:32px;margin-top:9px;margin-bottom:32px;text-align:center;}
.vg-review-list>button{display:flex;align-items:center;text-align:left;background:#10161b66;border:0;border-top:1px solid #d3bd872d;width:100%;height:88px;gap:22px;padding:8px 0;}
.vg-review-list .vg-art,.vg-review-list svg{width:83px;height:76px;flex:none;border:1px solid #b99d6766;padding:6px;background:#151b1d66;}
.vg-review-list button:first-child .vg-art{padding:0;border:0;}
.vg-review-list svg{padding:14px;color:#e6c997;}
.vg-review-list span{display:flex;flex-direction:column;}
.vg-review-list small{text-transform:uppercase;font-size:17px;margin-bottom:3px;color:#d8d6ce;}
.vg-review-list strong{text-transform:uppercase;font-size:28px;font-weight:400;}
.vg-review-list i{font-style:normal;color:#d4b471;font-size:19px;margin-left:auto;}
.vg-saved{border:1px solid #b8d4a277;background:#14241bbb;padding:11px 15px;display:flex;align-items:center;gap:29px;height:65px;margin-top:6px;font-size:29px;color:#b8e3b2;}
.vg-saved svg{width:45px;height:39px;}
.vg-edit{display:block;width:342px;margin:11px auto 0;padding:10px 15px;font-size:23px;min-height:49px;}
.vg-mission{left:1166px;top:128px;width:466px;height:685px;padding:23px 25px;text-align:center;}
.vg-mission h1{font-size:51px;text-transform:uppercase;white-space:nowrap;line-height:1.2;}
.vg-mission h2{font-size:31px;margin-top:7px;}
.vg-mission .vg-divider{margin:15px 0;}
.vg-canvas .vg-map{width:100%;height:373px;object-fit:cover;border:2px solid #ba9a59;padding:4px;background:#11191a;margin-top:11px;}
.vg-mission p{font-size:25px;margin:21px 0;}
.vg-mission small{font-size:20px;}
.vg-spectate{font-size:25px;gap:19px;margin-left:auto;}
.vg-spectate svg{width:39px;height:39px;color:#d9bc8d;}
.vg-modal-backdrop{position:absolute;inset:0;background:#02080ac4;display:grid;place-items:center;backdrop-filter:blur(5px);}
.vg-modal{position:relative;width:690px;padding:45px 48px;text-align:center;box-shadow:0 30px 100px #000;}
.vg-modal h2{font-size:46px;text-transform:uppercase;margin-bottom:18px;}
.vg-modal p{font-size:26px;line-height:1.5;margin:20px 0 28px;}
.vg-modal small{font-size:22px;color:#d7c5a6;}
.vg-modal .vg-demo-label{font-size:21px;color:#d3c9b8;}
.vg-modal-actions,.vg-team-options{display:flex;justify-content:center;gap:18px;margin-top:23px;}
.vg-team-options{margin-bottom:25px;}
.vg-modal>div>svg{width:75px;height:75px;color:#dab876;margin-bottom:22px;}
.vg-modal .vg-badge{width:max-content;margin:0 auto;}
.vg-canvas .vg-detail-art{height:235px;width:175px;margin:0 auto 25px;}
.vg-spinner{width:65px;height:65px;border:2px solid #b3935544;border-top-color:#e7c78a;transform:rotate(45deg);margin:0 auto 30px;animation:vg-spin 1.2s linear infinite;}
@keyframes vg-spin{to{transform:rotate(405deg);}}
.vg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.vg-canvas{font-family:'Times New Roman',Georgia,serif;text-shadow:0 1px 3px #000;}
.vg-screen-class .vg-main:before,.vg-screen-deploy .vg-main:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#060d12c9 0%,#060d1266 31%,transparent 48%);}
.vg-class-title{gap:36px;}
.vg-class-title>div{position:relative;top:20px;}
.vg-class-title p{margin-top:2px;}
.vg-banner-button .vg-art{object-fit:cover;}
.vg-traits{padding-top:10px;}
.vg-trait{height:75px;}
.vg-traits em{margin-top:10px;}
.vg-item-tile{overflow:hidden;position:relative;}
.vg-item-tile .vg-art{object-fit:cover;}
.vg-item-tile .vg-art[data-asset=halberd],.vg-item-tile .vg-art[data-asset=poleaxe]{position:absolute;left:-48px;top:8px;width:228px;height:345px;object-fit:contain;}
.vg-frame{background-image:linear-gradient(#080d109c,#080d10bd),url('portfolio-imgs/vanguard/assets/panel-texture.png');background-size:auto,520px;}
.vg-item-tile,.vg-weapon-card{background-image:linear-gradient(#080d1033,#080d1099),url('portfolio-imgs/vanguard/assets/panel-texture.png');background-size:auto,330px;}
.vg-main-action{clip-path:none;border:0;box-shadow:none;background:none;padding:12px 55px;}
.vg-main-action:before{display:none;}
.vg-main-action>span{position:relative;z-index:1;}
.vg-action-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.vg-main-action:focus-visible{outline:2px solid #ffe3a0;outline-offset:6px;filter:none;}
.vg-frame,.vg-item-tile,.vg-weapon-card{background-color:#0c1114;}
.vg-current-loadout h3{margin:0;}
.vg-current-loadout .vg-divider{margin:14px 0 0;}
.vg-equipped-row{height:196px;}
.vg-canvas .vg-weapon-hero{transform:rotate(8deg);}
.vg-team-blue .vg-art[data-asset=banner]{filter:hue-rotate(185deg);}
.vg-review h2{margin-bottom:12px;}
.vg-review-list>button{height:86px;}
.vg-edit{height:49px;min-height:49px;padding:8px 15px;line-height:1.2;}
.vg-screen-deploy .vg-main:before{background:linear-gradient(90deg,#060d12e0 0%,#060d12c4 31%,transparent 48%);}
.vg-canvas .vg-map{object-position:center top;}
.vanguard-standalone{margin:0;background:#080c0f;color:#ece6d9;overflow:hidden;}
.vanguard-standalone #vanguard-app{width:100vw;height:100dvh;}
@media(prefers-reduced-motion:reduce){.vg-canvas button{transition:none;}.vg-spinner{animation:none;}}

