/* BLACKOUT DISTRICT / Art-directed city control */
:root{--gold:#f7b84a;--bg:#080d14;--line:#29343e}body{background:radial-gradient(ellipse at 70% 0,#15233455,transparent 45%),var(--bg)}header{height:78px;min-height:78px;padding:15px 3%;border-bottom-color:#26303b;font-weight:500}.brandmark{width:30px;height:34px;display:grid;place-items:center;background:var(--gold);color:#101620;clip-path:polygon(15% 0,100% 0,100% 85%,85% 100%,0 100%,0 15%);font-size:27px}.brand{font-size:16px;letter-spacing:2px}nav a{padding:10px 0;position:relative}nav a:hover:after{content:'';height:2px;background:var(--gold);position:absolute;bottom:0;left:0;width:100%}.demo-bar{background:#0d191c;border-bottom:1px solid #203338;font-size:9px}.intro{margin:34px 0 25px;align-items:flex-end}h1{font-size:clamp(35px,3.65vw,58px);letter-spacing:-2.4px;line-height:1.03}.intro .lead{font-size:12px;line-height:1.7;margin:15px 0 0}.eyebrow{font-size:9px;letter-spacing:2.6px}.chapter{font-size:10px;gap:11px;margin-bottom:2px}.chapter .live-label{color:var(--teal);font-size:9px}.chapter strong{font-size:23px;letter-spacing:-.6px}main{max-width:1800px;padding:0 3%}.game-grid{grid-template-columns:minmax(0,1fr) 322px;gap:0;border:1px solid #3c454c;box-shadow:0 25px 70px #0004}.map{border:0;min-height:665px;isolation:isolate;background:#07101c}.map-world{position:absolute;inset:0;z-index:0;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1s;transform:scale(1.07);transform-origin:50% 50%;will-change:transform}.map-world>img{width:100%;height:100%;object-fit:cover;opacity:.95}.map.zoomed[data-focus="0"] .map-world{transform:scale(1.34);transform-origin:25% 45%}.map.zoomed[data-focus="1"] .map-world{transform:scale(1.34);transform-origin:80% 35%}.map.zoomed[data-focus="2"] .map-world{transform:scale(1.34);transform-origin:48% 75%}.map:after{z-index:1;background:linear-gradient(180deg,#050b1644,transparent 26%,transparent 50%,#060e18dd)}.map-status{top:24px;left:24px;border-color:#52637255;background:#0a1421c9;backdrop-filter:blur(10px);padding:10px 13px;letter-spacing:1px}.map-tools{position:absolute;top:24px;right:22px;display:flex;gap:8px;z-index:5}.map-tools button{width:37px;height:37px;background:#0b1421df;border:1px solid #435364;color:#d7e2e9;font:22px monospace}.map-tools button:hover,.map-tools button[aria-pressed="true"]{border-color:#a08045;color:var(--gold)}.pin{background:#0b1521e6;border-color:#506172;backdrop-filter:blur(8px);font-size:9px;padding:13px 15px;letter-spacing:1.2px;transition:transform .5s,border-color .3s;white-space:nowrap}.pin:after{content:'';position:absolute;left:50%;bottom:-19px;width:1px;height:18px;background:#8396a6}.pin:before{content:'';position:absolute;left:calc(50% - 3px);bottom:-24px;width:7px;height:7px;border:1px solid #aab4be;background:#162337;border-radius:50%;box-shadow:0 0 0 4px #111c2966}.pin.active:before{background:var(--gold);border-color:#ffdc98;box-shadow:0 0 16px #ffbc3c99,0 0 0 5px #ffbc3c15}.pin.active:after{background:var(--gold)}.pin.active{box-shadow:0 0 35px #ffbc3c15}.market{left:10%;top:39%}.industrial{right:9%;top:27%}.underground{left:43%;top:59%}.district-intel{position:absolute;z-index:4;left:27px;bottom:65px;max-width:360px;pointer-events:none}.district-intel>span{font:8px monospace;letter-spacing:2px;color:var(--gold)}.district-intel h3{font-size:32px;letter-spacing:-1px;margin:10px 0}.district-intel p{font-size:12px;line-height:1.6;color:#b5becb;max-width:310px}.district-intel>div{font:8px monospace;color:#7f92a4;display:grid;gap:12px;letter-spacing:.5px}.district-intel b{color:var(--teal);font-weight:400}.map-bottom{bottom:22px;left:27px;right:27px;border-top:1px solid #4b596444;padding-top:13px;font-size:8px}.grid-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(#a9c9e605 1px,transparent 1px),linear-gradient(90deg,#a9c9e605 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent 55%)}.rain{position:absolute;inset:-100% -30%;z-index:2;pointer-events:none;opacity:.2;background-image:repeating-linear-gradient(110deg,transparent 0,transparent 52px,#9fbdda33 52px,#9fbdda33 53px,transparent 54px,transparent 100px);mask-image:repeating-linear-gradient(0deg,#000 0,#000 18px,transparent 25px,transparent 70px);animation:rainfall 3s linear infinite}.energy-flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 30% 45%,#ffc35390,transparent 55%);mix-blend-mode:screen}.map[data-focus="1"] .energy-flash{background:radial-gradient(ellipse at 75% 35%,#ffc35390,transparent 55%)}.map[data-focus="2"] .energy-flash{background:radial-gradient(ellipse at 50% 75%,#46e2d790,transparent 55%)}.map.energized .energy-flash{animation:energize 2.5s ease-out}.map.energized .map-world{filter:brightness(1.2)}.activation{border:0;border-left:1px solid #3c454c;background:linear-gradient(135deg,#17202a,#0c141e);padding:24px 22px;position:relative}.activation h2{font-size:25px;letter-spacing:-.8px}.activation>.muted{font-size:11px}.panel-top{font-size:8px;letter-spacing:1.2px;margin-bottom:22px}.fuse-stage{height:230px;margin:20px 0 17px;border-color:#34424e;background:radial-gradient(ellipse at center,#b8781d20,transparent 68%),repeating-linear-gradient(0deg,transparent 0,transparent 24px,#9eb4c405 25px),repeating-linear-gradient(90deg,transparent 0,transparent 24px,#9eb4c405 25px),#0b131d;box-shadow:inset 0 0 50px #0004}.fuse{transform:rotate(0);width:57px;z-index:2;animation:hoverFuse 5s ease-in-out infinite}.glass{height:98px;border-color:#ad926066;box-shadow:inset 4px 0 8px #fff1,inset -4px 0 8px #0007}.cap{border-color:#ca9a4c;border-radius:2px}.top{font-size:7px;letter-spacing:1px}.terminal-corner{position:absolute;width:9px;height:9px;border-color:#9bacba99;border-style:solid;z-index:2}.tl{top:7px;left:7px;border-width:1px 0 0 1px}.tr{top:7px;right:7px;border-width:1px 1px 0 0}.bl{bottom:7px;left:7px;border-width:0 0 1px 1px}.br{bottom:7px;right:7px;border-width:0 1px 1px 0}.terminal-state{position:absolute;top:13px;left:0;right:0;text-align:center;font:7px monospace;letter-spacing:2px;color:#8a9cab}.asset-tag{font-size:7px;letter-spacing:1.7px;bottom:15px}.socket-lines{position:absolute;left:12%;right:12%;top:50%;height:1px;background:linear-gradient(90deg,#90744866,transparent 30%,transparent 70%,#90744866)}.socket-lines:before,.socket-lines:after{content:'';position:absolute;top:-24px;height:49px;width:12px;border:1px solid #6a634277}.socket-lines:before{left:0;border-right:0}.socket-lines:after{right:0;border-left:0}.activation.activating .fuse{animation:insertFuse 1.8s ease-in-out both}.activation.activating .glass span{animation:glow .3s 6}.activation.activating .fuse-stage{box-shadow:inset 0 0 60px #ffbc3c25,0 0 20px #ffbc3c15}.activation.activating .socket-lines{background:#ffbc3c;box-shadow:0 0 20px #ffbc3c}.activation.activating .terminal-state{color:var(--gold)}.item-title{font-size:10px}.activation select{padding:12px 10px;border-color:#3b4a57}.reward{margin-top:11px;padding:18px 0}.primary{letter-spacing:1px;min-height:46px;font-size:10px;box-shadow:inset 0 1px 0 #ffedbc77}.fine{font-size:9px;line-height:1.7}.districts{gap:0;margin-top:0;border:1px solid #35404a;border-top:0;grid-template-columns:repeat(3,1fr)}.district-card{border:0;border-right:1px solid #35404a;padding:22px 25px;position:relative;background:#101821;transition:background .3s}.district-card:last-child{border-right:0}.district-card.selected{background:linear-gradient(105deg,#c08c2614,#111923)}.district-card.selected:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold)}.district-card h3{font-size:17px;margin:12px 0}.district-number{font-size:8px;letter-spacing:1.5px}.district-card p{font-size:11px;max-width:350px}.progress{margin-top:19px;height:2px}.district-card small{font-size:8px}.section{padding-top:100px}.section-heading h2{font-size:32px;letter-spacing:-1.2px}.badge{font-size:8px;border-color:#2e4b4d}.inventory-grid{padding:30px;border:1px solid #33404b;background:linear-gradient(110deg,#15202b,#101822);gap:45px;position:relative}.inventory-grid:before,.inventory-grid:after{content:'+';position:absolute;color:#6d7c88;font:12px monospace;top:10px}.inventory-grid:before{left:10px}.inventory-grid:after{right:10px}.inventory-copy h3{font-size:26px;letter-spacing:-.8px}.inventory-copy p{font-size:12px;max-width:410px}.inventory-items{background:#070e16;padding:14px;gap:12px;box-shadow:inset 0 0 20px #0006;border:1px solid #273743;align-items:stretch}.inventory-item{color:var(--text);background:radial-gradient(ellipse,#3e331530,#0d1721 65%);border-color:#303e49;padding:16px 8px;position:relative;box-shadow:inset 0 0 20px #0005;text-align:center;transition:border-color .3s,transform .3s}.inventory-item:hover{border-color:var(--gold);transform:translateY(-3px)}.inventory-item .mini-fuse{font-size:56px;height:106px;border:1px solid #31404a55;margin:0 0 16px;color:var(--gold)}.inventory-item .mini-fuse:before{content:'';position:absolute;top:25px;width:36px;height:86px;background:linear-gradient(#b68d44 0,#f9c776 12%,#fff1 13%,#a6803122 85%,#dfae54 86%,#ad7730 100%);border:1px solid #c8a16277;box-shadow:0 0 30px #ffbc3c12}.inventory-item .mini-fuse span{position:relative;font-size:38px}.inventory-item.used{opacity:.55}.inventory-item.used .mini-fuse:before{filter:grayscale(1)}.inventory-item strong{font-size:10px}.inventory-item small{font-size:8px}.ticket{background:#101e24;border-color:#385355;font-size:10px;margin-top:16px}.passport-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}.passport{border:1px solid #446463;padding:23px;background:radial-gradient(ellipse at right,#4b96851c,transparent 70%),#101b24;display:grid;grid-template-columns:1fr auto;gap:10px;position:relative;overflow:hidden}.passport:after{content:'BD';position:absolute;right:75px;top:10px;font-size:85px;font-weight:900;color:#a8d4c708;pointer-events:none}.passport small{font:8px monospace;letter-spacing:2px;color:var(--teal)}.passport h3{font-size:21px;margin:5px 0}.passport p{font:9px monospace;color:var(--muted);margin:3px 0}.passport-stamp{grid-row:1/4;grid-column:2;align-self:center;transform:rotate(-10deg);border:1px solid #679e97;color:#77bab0;padding:11px 7px;font:8px monospace;text-align:center;line-height:1.8}.building-demo{grid-template-columns:1fr 1fr;border-color:#35414b}.building-visual{min-height:550px;display:block;background:#060f1e}.art-window{position:absolute;width:100%;height:100%;overflow:hidden;inset:0}.art-window img{position:absolute;top:0;left:0;width:300%;height:100%;object-fit:fill;max-width:none;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.level-0 .art-window img{transform:translateX(0)}.level-1 .art-window img{transform:translateX(-33.333333%)}.level-2 .art-window img{transform:translateX(-66.666667%)}.building-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(#030a1333,transparent 25%,transparent 65%,#050c18 96%);pointer-events:none}.visual-caption{z-index:2;font-size:8px;letter-spacing:1.5px}.art-status{position:absolute;top:48px;left:23px;color:var(--gold);font:8px monospace;border:1px solid #a07d4844;padding:7px 9px;z-index:2}.art-caption{position:absolute;bottom:23px;left:23px;right:20px;z-index:2;display:grid;gap:10px}.art-caption span:first-child{color:var(--gold);font:8px monospace;letter-spacing:2px}.art-caption strong{font-size:21px;letter-spacing:-.5px}.art-caption span:last-child{font:8px monospace;color:#7e92a5}.building-controls{padding:47px;background:linear-gradient(130deg,#14202b,#0d1721);display:flex;flex-direction:column;justify-content:center}.building-controls h3{font-size:30px;letter-spacing:-1px}.building-controls>p{font-size:13px;line-height:1.8}.stage-tabs button{line-height:1.6}.building-controls .fine{font-size:9px}.launch-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #32404a;background:#101a24}.launch-stats>div{padding:28px;border-right:1px solid #32404a;display:grid;gap:15px}.launch-stats>div:last-child{border:0}.launch-stats span{font:8px monospace;letter-spacing:1.5px;color:#96a6b8}.launch-stats strong{font-size:38px;letter-spacing:-1px;color:#eadac1}.launch-stats small{font:9px monospace;color:#8093a6;line-height:1.6}.steps article{border-color:#445365}.steps h3{font-size:18px}.steps p{font-size:12px}.callout{background:linear-gradient(100deg,#bf8f2620,transparent);border-color:#84724d66}.faq{max-width:1050px;margin:40px auto 0}.faq details{padding:22px 0}.faq summary{list-style:none;display:flex;justify-content:space-between;font-size:14px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';color:var(--gold);font:20px monospace;margin-left:20px}.faq details[open] summary:after{content:'−'}.faq p{padding-right:35px;font-size:12px}dialog{background:radial-gradient(ellipse at top,#2c413b88,transparent 70%),#101a25;border-color:#59706a;box-shadow:0 30px 100px #0008}.success-icon{width:60px;height:60px;display:grid;place-items:center;color:var(--gold);border:1px solid #ae884955;background:#ffbc3c0a;margin:20px 0;font-size:40px}.success-ticket{border:1px dashed #688e87;display:grid;gap:12px;padding:20px;margin:25px 0;background:#6be0c706}.success-ticket span{font:9px monospace;color:var(--teal);letter-spacing:1px}.success-ticket strong{font-size:27px}.success-ticket small{font:8px/1.6 monospace;color:var(--muted)}.item-preview{font-size:80px;color:var(--gold);text-align:center;padding:20px;background:radial-gradient(#ffbc3c12,transparent 70%)}body.effects-off .rain{display:none}body.effects-off .fuse,body.effects-off .glass span{animation:none}@keyframes rainfall{to{transform:translate(-45px,160px)}}@keyframes hoverFuse{50%{transform:translateY(-5px)}}@keyframes insertFuse{0%{transform:translateY(0) scale(1)}40%{transform:translateY(5px) scale(.85);filter:drop-shadow(0 0 8px #ffbc3c)}75%{filter:drop-shadow(0 0 40px #ffcd74);opacity:1}100%{transform:scale(.9);opacity:.2}}@keyframes energize{0%{opacity:0}20%{opacity:.9}40%{opacity:.25}65%{opacity:.6}100%{opacity:0}}@media(min-width:1600px){.map{min-height:690px}.fuse-stage{height:245px}}@media(max-width:1150px){.game-grid{grid-template-columns:minmax(0,1fr) 300px}.activation{padding:22px 18px}.district-intel{bottom:65px}.pin{font-size:8px;padding:11px}.underground{left:39%;top:57%}.building-controls{padding:29px}.building-visual{min-height:520px}.inventory-grid{padding:25px;gap:25px}.launch-stats>div{padding:22px}}@media(max-width:850px){.game-grid{grid-template-columns:1fr}.map{min-height:540px}.activation{border-left:0;border-top:1px solid #3c454c;display:grid;grid-template-columns:170px 1fr;column-gap:25px;padding:25px}.activation .panel-top,.activation h2,.activation>.muted{grid-column:2}.panel-top{margin-bottom:13px}.activation h2{font-size:28px}.activation .fuse-stage{grid-column:1;grid-row:1/10;height:100%;min-height:260px;margin:0}.activation .item-title,.activation label,.activation select,.activation .reward,.activation>.primary,.activation>.fine,.activation>.result{grid-column:2}.activation .item-title{margin:18px 0 0}.activation label{margin-top:16px}.activation .reward{padding:13px 0}.chapter{display:none}.building-visual{min-height:480px}.inventory-grid{grid-template-columns:1fr}.inventory-items{min-height:205px}.inventory-copy{max-width:none}.inventory-copy p{max-width:none}}@media(max-width:760px){header{height:auto;min-height:100px;padding:13px 5%}.brand{font-size:12px;letter-spacing:1px}.brandmark{width:24px;height:27px;font-size:23px}nav{font-size:11px}main{padding:0 4%}.intro{margin:27px 0 23px}h1{font-size:clamp(29px,6.8vw,45px);letter-spacing:-1.3px}.intro .lead{font-size:11px}.intro .eyebrow{font-size:8px;margin-bottom:13px}.map{min-height:490px}.map-world{transform:scale(1)}.map-world>img{object-fit:cover}.map-status{top:15px;left:15px;font-size:8px;gap:7px;padding:9px}.map-status strong{font-size:17px}.map-tools{top:15px;right:15px;gap:5px}.map-tools button{width:30px;height:31px;font-size:18px}.pin{font-size:7px;padding:10px 8px;letter-spacing:.4px}.pin span{margin-right:5px}.market{left:5%;top:31%}.industrial{right:5%;top:22%}.underground{left:42%;top:47%}.district-intel{left:20px;bottom:58px}.district-intel h3{font-size:28px;margin:9px 0}.district-intel p{font-size:11px;max-width:260px}.district-intel>span{font-size:7px}.district-intel>div{font-size:7px;gap:8px}.map-bottom{left:20px;right:20px;font-size:6px;bottom:18px}.activation{grid-template-columns:100px 1fr;column-gap:17px;padding:20px 17px}.activation .fuse-stage{min-height:210px;grid-row:1/7}.activation h2{font-size:23px}.activation .panel-top{font-size:7px;letter-spacing:.5px}.activation>.muted{font-size:10px}.activation .item-title{font-size:8px;gap:7px}.activation label{font-size:8px}.activation select{font-size:10px;padding:10px 6px}.activation .reward{grid-column:1/-1;margin-top:16px}.activation>.primary,.activation>.fine,.activation>.result{grid-column:1/-1}.terminal-state{font-size:5px;letter-spacing:.8px}.asset-tag{font-size:5px;letter-spacing:.4px}.fuse{width:45px}.glass{height:83px}.glass span{font-size:49px}.top{font-size:6px;padding-top:8px}.socket-lines{left:5%;right:5%}.districts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.district-card{min-width:78%;scroll-snap-align:start;padding:20px}.district-card h3{font-size:18px}.district-card p{max-width:250px}.district-card small{font-size:8px}.section{padding-top:62px}.section-heading h2{font-size:28px}.inventory-grid{padding:22px 14px;gap:20px}.inventory-copy{padding:0 6px}.inventory-copy h3{font-size:24px}.inventory-items{padding:9px;gap:7px}.inventory-item{padding:10px 5px}.inventory-item .mini-fuse{height:85px;margin-bottom:13px}.inventory-item .mini-fuse:before{top:21px;height:63px;width:29px}.inventory-item .mini-fuse span{font-size:29px}.inventory-item strong{font-size:8px}.inventory-item small{font-size:7px}.passport-list{grid-template-columns:1fr}.passport{padding:20px}.passport h3{font-size:20px}.ticket{font-size:9px}.building-demo{grid-template-columns:1fr}.building-visual{height:570px;min-height:0;max-height:145vw}.art-window{width:100%;height:100%}.art-window img{object-fit:fill}.building-controls{padding:27px 23px}.building-controls h3{font-size:27px}.building-controls>p{font-size:12px}.stage-tabs button{font-size:8px;padding:10px 5px}.launch-stats{grid-template-columns:1fr 1fr}.launch-stats>div{padding:20px 16px;border-bottom:1px solid #32404a}.launch-stats>div:nth-child(2){border-right:0}.launch-stats>div:nth-child(3){border-bottom:0}.launch-stats strong{font-size:32px}.launch-stats span{font-size:7px;letter-spacing:1px}.launch-stats small{font-size:8px}.steps h3{font-size:16px}.steps p{font-size:11px}.callout h3{font-size:16px}.callout p{font-size:12px}.faq summary{font-size:13px}.rain{opacity:.1;animation-duration:4s}dialog{padding:25px}.success-ticket strong{font-size:24px}.dialog-actions .primary{font-size:9px}.section-heading>.muted{margin:0;font-size:12px}footer{margin-top:60px}}@media(prefers-reduced-motion:reduce){.rain{display:none}.map-world{transition:none!important}.activation.activating .fuse{opacity:.7}.energy-flash{display:none}}
/* Preserve the native proportions of each panel in the evolution artwork. */
.art-window{width:auto;height:100%;aspect-ratio:1 / 2;left:50%;right:auto;transform:translateX(-50%)}
@media(max-width:760px){.art-window{width:auto;height:100%;aspect-ratio:1 / 2;left:50%}}