@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap');

:root{--black:#070707;--panel:#101010;--red:#ed1b2e;--red-hot:#ff3041;--white:#f7f5f3;--gray:#898989}
*{box-sizing:border-box}
html{min-width:320px;background:var(--black)}
body{margin:0;min-height:100svh;overflow-x:hidden;background:var(--black);color:var(--white);font-family:'Space Mono',monospace}
button,a{font:inherit}
button{cursor:pointer}
.combo-page{isolation:isolate}
.combo-header{position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,5vw,76px);pointer-events:none}
.combo-brand,.component-toggle{pointer-events:auto}
.combo-brand{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 10px 13px;color:var(--white);text-decoration:none;border:2px solid var(--red);background:rgba(6,6,6,.78);clip-path:polygon(0 0,94% 0,100% 30%,100% 100%,5% 100%,0 70%);box-shadow:5px 5px 0 #050505}
.combo-brand strong{font:400 clamp(20px,2.3vw,34px)/1 'Press Start 2P',monospace;color:var(--red-hot);letter-spacing:-.13em}
.combo-brand span{font-size:clamp(10px,1vw,15px);font-weight:700;letter-spacing:.26em}
.component-toggle{display:flex;align-items:center;gap:22px;padding:15px 18px 15px 23px;color:var(--white);border:2px solid var(--red);background:rgba(8,8,8,.9);clip-path:polygon(7% 0,100% 0,100% 100%,7% 100%,0 70%,0 30%);box-shadow:4px 4px 0 #050505;transition:transform .18s steps(2,end),background .18s,color .18s}
.component-toggle span{font:700 clamp(9px,1vw,13px)/1 'Press Start 2P',monospace;white-space:nowrap}
.component-toggle b{font-size:30px;line-height:.55;color:var(--red-hot);font-weight:400}
.component-toggle:hover{transform:translateY(3px);color:#080808;background:var(--red-hot)}
.component-toggle:hover b{color:#080808}

.selector{position:relative;min-height:100svh;overflow:hidden;background:#070707 url('./assets/products/build-select-background-clean.png') center/cover no-repeat}
.selector::before{position:absolute;inset:0;content:"";background:linear-gradient(90deg,rgba(0,0,0,.78),transparent 24%,transparent 76%,rgba(0,0,0,.78)),linear-gradient(0deg,rgba(0,0,0,.42),transparent 62%);pointer-events:none}
.arena-glow{display:none;position:absolute;z-index:0;left:50%;top:42%;width:min(55vw,820px);height:min(55vw,820px);transform:translate(-50%,-50%);border:2px solid rgba(237,27,46,.68);border-radius:50%;box-shadow:0 0 80px rgba(237,27,46,.38),inset 0 0 80px rgba(237,27,46,.24);opacity:.72}
.arena-glow::after{position:absolute;inset:8%;content:"";border:1px solid rgba(255,48,65,.35);border-radius:50%;animation:orbPulse 2.8s ease-in-out infinite}
.arena-grid{display:none;position:absolute;z-index:0;inset:43% -20% -12%;transform:perspective(520px) rotateX(58deg);transform-origin:top center;background:repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,38,53,.25) 87px 89px),repeating-linear-gradient(0deg,transparent 0 49px,rgba(255,38,53,.25) 50px 52px);mask-image:linear-gradient(180deg,rgba(0,0,0,1),transparent 90%)}
.scanlines{display:none;position:absolute;z-index:10;inset:0;opacity:.11;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.14) 4px 5px);mix-blend-mode:screen}
.smoke-canvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;opacity:.72}
.selector-stage{position:relative;z-index:2;display:grid;place-items:center;height:100svh;min-height:620px;padding:88px 8vw 22px;isolation:isolate;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.selected-build{position:relative;z-index:5;width:min(900px,82vw);display:grid;justify-items:center;user-select:none;-webkit-user-select:none}
.selected-build.is-initial{animation:buildEnter .68s cubic-bezier(.2,.78,.24,1) both}
.build-code{display:none}
.combo-art-shell{position:relative;width:100%;height:min(62vh,590px);min-height:330px;overflow:visible;display:grid;place-items:center;background:transparent;clip-path:none;box-shadow:none;cursor:pointer}
.combo-art-shell::before{display:none;position:absolute;z-index:1;inset:14px;content:"";border:1px solid rgba(255,48,65,.55);clip-path:inherit;pointer-events:none}
.combo-art{position:absolute;inset:0;display:grid;place-items:center;overflow:visible;background:none}
.combo-art::before,.combo-art::after{display:none}
.combo-art img{position:relative;z-index:1;width:auto;height:min(62vh,590px);max-width:100%;object-fit:contain;object-position:center bottom;filter:contrast(1.05) saturate(1.06) drop-shadow(0 22px 18px rgba(0,0,0,.84));transform:translateY(var(--art-y,0%)) scale(var(--art-scale,1));transform-origin:center bottom;mix-blend-mode:normal;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.art-glare{display:none;position:absolute;z-index:3;left:-35%;top:-25%;width:22%;height:150%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);transform:skewX(-17deg);pointer-events:none}
.combo-caption{position:relative;z-index:6;display:grid;justify-items:center;width:100%;margin-top:8px}
.combo-caption h1{display:none;margin:0 0 13px;color:var(--white);font:400 clamp(13px,1.5vw,23px)/1.15 'Press Start 2P',monospace;letter-spacing:-.07em;text-align:center;text-shadow:3px 3px 0 #080808}
.price-panel{display:grid;grid-template-columns:auto auto auto;align-items:end;gap:5px;padding:10px 25px 11px;border:2px solid var(--red);background:rgba(8,8,8,.92);clip-path:polygon(4% 0,96% 0,100% 20%,100% 80%,96% 100%,4% 100%,0 80%,0 20%);box-shadow:5px 5px 0 #050505}
.price-panel small{grid-column:1/-1;margin-bottom:2px;color:var(--gray);font-size:8px;font-weight:700;letter-spacing:.24em}
.price-panel strong{color:var(--red-hot);font:400 clamp(24px,3vw,45px)/.9 'Press Start 2P',monospace;letter-spacing:-.12em}
.price-panel sup{align-self:start;margin-top:2px;color:var(--white);font-size:clamp(12px,1.4vw,19px);font-weight:700}
.ghost-build{position:absolute;z-index:1;width:min(320px,24vw);height:360px;overflow:hidden;opacity:0;filter:grayscale(.8) brightness(.35);transition:opacity .35s ease,transform .6s cubic-bezier(.15,.8,.2,1);pointer-events:none}
.ghost-build img{width:180%;height:180%;object-fit:cover;object-position:74% 50%;transform:translate(-22%,-20%);pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.ghost-left{left:3%;transform:translateX(-110%) rotate(-9deg)}
.ghost-right{right:3%;transform:translateX(110%) rotate(9deg)}
.selector-stage.is-rotating .ghost-build{opacity:.35}
.selector-stage.is-rotating .ghost-left{transform:translateX(0) rotate(-9deg)}
.selector-stage.is-rotating .ghost-right{transform:translateX(0) rotate(9deg)}
.selector-stage.rotate-next .ghost-right{animation:ghostArriveRight .62s both}
.selector-stage.rotate-prev .ghost-left{animation:ghostArriveLeft .62s both}
.selector-stage.rotate-next > .selected-build{animation:cardSpinOutNext .28s cubic-bezier(.45,0,.8,.45) both}
.selector-stage.rotate-prev > .selected-build{animation:cardSpinOutPrev .28s cubic-bezier(.45,0,.8,.45) both}
.selector-stage.rotate-next > .selected-build.is-entering{animation:cardSpinInFromRight .5s cubic-bezier(.2,.72,.25,1) both}
.selector-stage.rotate-prev > .selected-build.is-entering{animation:cardSpinInFromLeft .5s cubic-bezier(.2,.72,.25,1) both}
.rotation-hotspot{position:absolute;z-index:8;top:50%;display:grid;place-items:center;width:clamp(52px,5vw,72px);height:clamp(68px,7vw,92px);padding:0;color:var(--white);border:2px solid var(--red);background:rgba(5,5,5,.84);clip-path:polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%);box-shadow:5px 5px 0 #020202;opacity:1;transform:translateY(-50%);transition:background .16s,color .16s,transform .16s}
.rotation-hotspot span{font:700 clamp(38px,4vw,58px)/1 Arial,sans-serif;transform:translateY(-3px)}
.rotation-hotspot:hover,.rotation-hotspot:focus-visible{color:#080808;background:var(--red-hot);outline:none;transform:translateY(-50%) scale(1.06)}
.rotation-hotspot:active{transform:translateY(-50%) scale(.95)}
.hotspot-prev{left:clamp(16px,4vw,64px)}.hotspot-next{right:clamp(16px,4vw,64px)}

.modal-backdrop{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.9);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;isolation:isolate}
.modal-backdrop::before{position:absolute;z-index:0;inset:-30%;content:"";background:radial-gradient(ellipse at 50% 50%,rgba(255,35,52,.22) 0 16%,transparent 42%),repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,40,55,.09) 8px 9px);opacity:0;transform:scaleY(.06);pointer-events:none}
.modal-backdrop::after{position:absolute;z-index:0;left:5%;right:5%;top:50%;height:3px;content:"";background:#fff;box-shadow:0 0 20px 9px rgba(255,31,48,.8);opacity:0;pointer-events:none}
.modal-backdrop[hidden]{display:none}
.modal-backdrop.is-open{opacity:1;visibility:visible}
.modal-backdrop.is-open::before{animation:projectorPower .55s steps(6,end) both}
.modal-backdrop.is-open::after{animation:projectorBeam .44s steps(5,end) both}
.components-modal{position:relative;z-index:1;width:min(980px,92vw);padding:42px clamp(22px,4vw,62px) 36px;border:2px solid var(--red);background:linear-gradient(135deg,rgba(13,13,13,.98),rgba(4,4,4,.98));clip-path:polygon(2% 0,98% 0,100% 4%,100% 96%,98% 100%,2% 100%,0 96%,0 4%);box-shadow:10px 10px 0 #020202,0 0 70px rgba(237,27,46,.28);transform:translateY(16px) scale(.96);transition:transform .3s cubic-bezier(.18,.86,.2,1)}
.modal-backdrop.is-open .components-modal{animation:projectorPanel .68s steps(8,end) both}
.components-modal::before{position:absolute;z-index:0;inset:12px;content:"";border:1px solid rgba(237,27,46,.45);pointer-events:none}
.components-modal::after{position:absolute;z-index:4;left:5%;right:5%;top:-8%;height:3px;content:"";background:rgba(255,255,255,.9);box-shadow:0 0 12px 5px rgba(255,32,49,.85);opacity:0;pointer-events:none}
.modal-backdrop.is-open .components-modal::after{animation:modalScan 1.2s steps(8,end) .24s both}
.modal-close{position:absolute;z-index:2;top:12px;right:17px;width:43px;height:43px;color:var(--white);border:2px solid var(--red);background:#070707;clip-path:polygon(15% 0,100% 0,100% 85%,85% 100%,0 100%,0 15%);font-size:32px;line-height:1;transition:color .15s,background .15s}
.modal-close:hover{color:#070707;background:var(--red-hot)}
.modal-kicker{position:relative;z-index:1;margin:0 0 8px;color:var(--red-hot);font-size:9px;letter-spacing:.21em}
.components-modal h2{position:relative;z-index:1;margin:0 0 28px;font:400 clamp(22px,3vw,42px)/1 'Press Start 2P',monospace;letter-spacing:-.09em}
.component-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.component-item{display:flex;align-items:center;min-height:70px;padding:12px 14px;border:1px solid rgba(237,27,46,.86);background:rgba(10,10,10,.9);clip-path:polygon(3% 0,97% 0,100% 16%,100% 84%,97% 100%,3% 100%,0 84%,0 16%);box-shadow:3px 3px 0 #050505}
.component-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;margin-right:12px;color:var(--red-hot);border:1px solid var(--red);font-size:22px}
.component-item small{display:block;margin-bottom:4px;color:var(--gray);font-size:8px;font-weight:700;letter-spacing:.13em}
.component-item strong{display:block;color:var(--white);font-size:clamp(10px,1.1vw,14px);line-height:1.2}
.modal-buy-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:22px;margin-top:26px}
.modal-price{display:grid;grid-template-columns:auto auto auto;align-items:end;gap:4px;padding:9px 18px;border:1px solid var(--red);background:#070707;clip-path:polygon(5% 0,95% 0,100% 25%,100% 75%,95% 100%,5% 100%,0 75%,0 25%)}
.modal-price small{grid-column:1/-1;color:var(--gray);font-size:7px;letter-spacing:.18em}
.modal-price strong{color:var(--red-hot);font:400 clamp(19px,2.1vw,32px)/1 'Press Start 2P',monospace;letter-spacing:-.12em}
.modal-price sup{color:var(--white);font-size:11px}
.order-button{display:flex;align-items:center;gap:22px;padding:16px 24px;color:var(--white);border:2px solid var(--red-hot);background:var(--red);clip-path:polygon(5% 0,95% 0,100% 22%,100% 78%,95% 100%,5% 100%,0 78%,0 22%);box-shadow:4px 4px 0 #050505;font:400 clamp(10px,1.1vw,14px)/1 'Press Start 2P',monospace;transition:transform .15s steps(2,end),background .15s,color .15s}
.order-button span{font-size:25px;font-family:Arial,sans-serif}
.order-button:hover{transform:translate(3px,3px);background:var(--white);color:#080808}
.order-button.is-confirmed{background:#fff;color:#080808}
.order-toast{position:fixed;z-index:60;left:50%;bottom:26px;padding:14px 20px;border:1px solid var(--red);background:#090909;color:var(--white);font-size:11px;letter-spacing:.08em;transform:translate(-50%,18px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.order-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.modal-open{overflow:hidden}

@keyframes buildEnter{0%{opacity:0;transform:translateY(22px) scale(.95)}58%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes cardSpinOutNext{0%{opacity:1;transform:translateX(0) rotateY(0) scale(1)}100%{opacity:0;transform:translateX(-42vw) rotateY(56deg) scale(.78)}}
@keyframes cardSpinOutPrev{0%{opacity:1;transform:translateX(0) rotateY(0) scale(1)}100%{opacity:0;transform:translateX(42vw) rotateY(-56deg) scale(.78)}}
@keyframes cardSpinInFromRight{0%{opacity:0;transform:translateX(38vw) rotateY(-48deg) scale(.82)}100%{opacity:1;transform:translateX(0) rotateY(0) scale(1)}}
@keyframes cardSpinInFromLeft{0%{opacity:0;transform:translateX(-38vw) rotateY(48deg) scale(.82)}100%{opacity:1;transform:translateX(0) rotateY(0) scale(1)}}
@keyframes ghostArriveRight{0%{opacity:0;transform:translateX(120%) rotate(9deg)}55%{opacity:.45}100%{opacity:.18;transform:translateX(0) rotate(9deg)}}
@keyframes ghostArriveLeft{0%{opacity:0;transform:translateX(-120%) rotate(-9deg)}55%{opacity:.45}100%{opacity:.18;transform:translateX(0) rotate(-9deg)}}
@keyframes glareSweep{0%,22%{left:-35%;opacity:0}29%{opacity:1}46%,100%{left:130%;opacity:0}}
@keyframes orbPulse{0%,100%{transform:scale(.98);opacity:.4}50%{transform:scale(1.03);opacity:.9}}
@keyframes projectorPower{0%{opacity:0;transform:scaleY(.04)}22%{opacity:.95;transform:scaleY(.16)}58%{opacity:.48;transform:scaleY(1)}100%{opacity:.2;transform:scaleY(1)}}
@keyframes projectorBeam{0%{opacity:0;transform:scaleX(.04)}30%{opacity:1;transform:scaleX(.2)}100%{opacity:0;transform:scaleX(1)}}
@keyframes modalScan{0%{top:-8%;opacity:0}15%{opacity:1}100%{top:108%;opacity:0}}
@keyframes projectorPanel{0%{opacity:0;transform:translateY(10px) scaleX(.03) scaleY(.08);filter:brightness(2.2);clip-path:inset(47% 0 47% 0)}24%{opacity:1;transform:translateY(0) scaleX(.32) scaleY(.24);filter:brightness(1.7);clip-path:inset(34% 0 34% 0)}62%{opacity:1;transform:translateY(0) scaleX(1.02) scaleY(1.02);filter:brightness(1.08);clip-path:inset(0 0 0 0)}100%{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}}

@media(max-width:760px){
  .combo-header{padding:16px 14px;align-items:flex-start}.combo-brand{padding:7px 10px}.combo-brand strong{font-size:16px}.combo-brand span{font-size:8px}.component-toggle{padding:11px 10px 11px 13px;gap:8px}.component-toggle span{font-size:7px}.component-toggle b{font-size:23px}
  .selector-stage{padding:92px 15px 22px}.selected-build{width:min(86vw,620px)}.combo-art-shell{height:56vh;min-height:300px}.combo-art img{width:auto;height:56vh;max-width:100%;object-position:center bottom;transform:translateY(var(--mobile-art-y,0%)) scale(var(--mobile-art-scale,1));transform-origin:center bottom}.combo-caption h1{font-size:11px}.price-panel strong{font-size:24px}.ghost-build{width:38vw;height:260px}.ghost-left{left:-13%}.ghost-right{right:-13%}.rotation-hotspot{width:44px;height:62px}.rotation-hotspot span{font-size:36px}.hotspot-prev{left:8px}.hotspot-next{right:8px}
  .components-modal{padding:37px 14px 24px}.components-modal h2{margin-bottom:19px;font-size:22px}.component-grid{gap:8px}.component-item{min-height:63px;padding:8px}.component-icon{width:28px;height:28px;margin-right:7px;font-size:16px}.component-item small{font-size:6px}.component-item strong{font-size:8px}.modal-buy-row{flex-direction:column;gap:12px;margin-top:18px}.modal-price strong{font-size:21px}.order-button{width:100%;justify-content:center;font-size:9px}
}