@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--cyan:#4cdbff;--cyan2:#16aee0;--teal:#38e4aa;--gold:#f2bd67;--orange:#dc7f37;--red:#ff6475;--muted:#88a8bc;--white:#edf8ff;--panel:#03111bda;--line:#287296;--heading:Rajdhani,Arial,sans-serif;--body:'Space Grotesk',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#00040a;color:var(--white);font-family:var(--body);overflow:hidden}button{font:inherit}.page-shell{width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#173241,#02070c 58%,#000 100%)}
.deck-frame{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);aspect-ratio:16/9;overflow:hidden;background:#02070c;box-shadow:0 0 100px #000;isolation:isolate;perspective:1500px}
.fantasy-view{position:absolute;z-index:-8;left:3.4%;right:3.4%;top:5.5%;height:70%;background:url('assets/fantasy-vista-v23.webp?v=2.3') center 42%/cover no-repeat;filter:saturate(1.12) contrast(1.07) brightness(.92);transform:scale(1.015)}
.fantasy-view:after{content:"";position:absolute;inset:0;background:linear-gradient(#00101e22,#00101e00 52%,#02070dbc 100%),radial-gradient(ellipse at 50% 36%,transparent 28%,#02070d33 72%,#02070da5 100%)}
.cockpit-frame{position:absolute;inset:0;z-index:-5;pointer-events:none;background:linear-gradient(180deg,#02070df2 0 5.4%,transparent 5.4% 72%,#02070df3 82% 100%)}
.cockpit-frame:before,.cockpit-frame:after{content:"";position:absolute;top:4.7%;bottom:15%;width:6.2%;background:linear-gradient(90deg,#01050df6,#0c1822ee 48%,transparent);border-right:2px solid #d47a3345;clip-path:polygon(0 0,100% 6%,68% 28%,77% 72%,100% 94%,0 100%)}.cockpit-frame:before{left:0}.cockpit-frame:after{right:0;transform:scaleX(-1)}
.cockpit-frame i{position:absolute;background:linear-gradient(90deg,#5fdfff00,#5fdfff88,#ef8a3b9e,#5fdfff00);filter:blur(.2px)}.cockpit-frame i:nth-child(1){left:5%;right:5%;top:6.1%;height:2px}.cockpit-frame i:nth-child(2){left:4%;right:4%;bottom:18.5%;height:2px}.cockpit-frame i:nth-child(3){left:2.8%;top:23%;width:2px;height:43%;transform:rotate(3deg)}.cockpit-frame i:nth-child(4){right:2.8%;top:23%;width:2px;height:43%;transform:rotate(-3deg)}
.scene-vignette{position:absolute;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,transparent 15%,#0000 55%,#01050a80 88%),linear-gradient(180deg,#0008 0 6%,transparent 15% 65%,#01050ac4 80% 100%)}
.topbar{position:absolute;left:2.8%;right:2.8%;top:1.1%;height:5.7%;display:grid;grid-template-columns:19% auto 1fr 12% auto auto;align-items:center;gap:.7%;padding:0 1%;background:#020811d9;border:1px solid #1e5068;border-top-color:#49809b;clip-path:polygon(.6% 0,99.4% 0,100% 22%,100% 100%,0 100%,0 22%);backdrop-filter:blur(12px);box-shadow:0 8px 28px #0008;z-index:20}.brand{display:flex;align-items:center;gap:4%;color:white;text-decoration:none}.brand img{width:17%;max-width:42px;min-width:27px}.brand span{display:flex;flex-direction:column;line-height:.85}.brand b{font:700 clamp(19px,1.7vw,31px) var(--heading);letter-spacing:.08em}.brand small{font:700 clamp(4px,.36vw,6px) var(--heading);letter-spacing:.26em;color:#70dfff;margin-top:7%}.deck-nav{display:flex;gap:.3vw}.deck-nav button{border:0;background:transparent;color:#85a8bb;font:700 clamp(5px,.43vw,8px) var(--heading);letter-spacing:.12em;padding:.5vw;cursor:pointer}.deck-nav button:hover{color:#60ddff}.realm-summary{justify-self:center;font:700 clamp(6px,.5vw,9px) var(--heading);letter-spacing:.18em;color:#a5bbc8;white-space:nowrap}.realm-summary b{color:#65ddff}.realm-summary i{display:inline-block;width:3px;height:3px;border-radius:50%;background:#3b7898;margin:0 .55vw;vertical-align:middle}.top-status{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:center;gap:0 .32vw;text-align:right}.status-dot{width:6px;height:6px;border-radius:50%;background:#39e6aa;box-shadow:0 0 10px #39e6aa}.top-status b{color:#71efbf;font:700 clamp(6px,.49vw,9px) var(--heading);letter-spacing:.1em}.top-status small{grid-column:1/3;font-size:clamp(5px,.38vw,7px);color:#748b9b}.hud-button{height:58%;min-height:26px;padding:0 .85vw;border:1px solid #2c7da5;background:#061826e8;color:#c7efff;font:700 clamp(6px,.49vw,9px) var(--heading);letter-spacing:.12em;cursor:pointer}.hud-button.operator{border-color:#be853a;color:#ffd18b;background:#21170ddf;box-shadow:0 0 14px #c5822e24}.hud-button:hover{filter:brightness(1.18)}
.realm-zone{position:absolute;left:6.1%;right:6.1%;top:14.1%;height:53.5%;z-index:8;display:grid;grid-template-rows:9% 1fr 4.5%;gap:1%}.realm-zone-head{display:flex;align-items:end;justify-content:space-between;padding:0 1.2%}.realm-zone-head small{font:700 clamp(5px,.42vw,7px) var(--heading);letter-spacing:.2em;color:#6adfff;text-shadow:0 2px 8px #000}.realm-zone-head h1{margin:.2% 0 0;font:700 clamp(18px,1.75vw,31px)/.92 var(--heading);letter-spacing:.03em;text-shadow:0 2px 12px #000}.realm-zone-head h1 span{color:#45d6ff}.feed-state{text-align:right}.feed-state b{font:700 clamp(5px,.4vw,7px) var(--heading);letter-spacing:.14em;color:#84dfff}.feed-state small{display:block;color:#9db4c1;font-size:clamp(4px,.34vw,6px);margin-top:2px}.feed-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#40dfff;box-shadow:0 0 9px #40dfff;margin-right:.3vw}
.carousel-shell{position:relative;min-height:0;display:flex;align-items:center}.world-carousel{width:100%;height:100%;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding:1.3% .5% 2.2%;touch-action:pan-y}.world-carousel::-webkit-scrollbar{display:none}.world-carousel.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.world-track{height:100%;display:flex;gap:1.6%;width:max-content;min-width:100%;align-items:center;perspective:1400px}.world-card{position:relative;flex:0 0 calc((100% - 3.2%)/3);min-width:0;height:90%;scroll-snap-align:center;border:1px solid color-mix(in srgb,var(--card-line,#2a82aa) 82%,white 18%);background:linear-gradient(180deg,#071824d9 0,#03101aee 62%,#030b12f4 100%);box-shadow:0 22px 38px #000b,0 5px 0 #01050b,0 0 0 1px #5ce0ff18,inset 0 1px 0 #ffffff22,inset 0 0 28px #0f8db71d;overflow:hidden;clip-path:polygon(2.5% 0,97.5% 0,100% 6%,100% 94%,97.5% 100%,2.5% 100%,0 94%,0 6%);transform:perspective(1200px) rotateX(1.5deg) translateY(1.2%);transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;transform-style:preserve-3d}.world-card:nth-child(3n+1){transform:perspective(1200px) rotateY(3.2deg) rotateX(1deg) translateY(1.5%)}.world-card:nth-child(3n+2){transform:perspective(1200px) translateY(-1.3%)}.world-card:nth-child(3n){transform:perspective(1200px) rotateY(-3.2deg) rotateX(1deg) translateY(1.5%)}.world-card:hover{transform:perspective(1200px) rotateX(0) rotateY(0) translateY(-2.5%) scale(1.015);filter:brightness(1.08);box-shadow:0 30px 55px #000d,0 0 30px color-mix(in srgb,var(--card-line,#2a82aa) 32%,transparent),inset 0 1px 0 #ffffff33}.world-card:before{content:"";position:absolute;z-index:5;left:4%;right:4%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--card-line,#2a82aa),#fff,var(--card-line,#2a82aa),transparent);opacity:.72}.world-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#fff0 5%,#fff0 36%,#9eeaff12 43%,#fff0 52%),linear-gradient(90deg,#42dfff08,transparent 35%,transparent 70%,#42dfff05)}.world-art{position:absolute;left:0;right:0;top:0;height:49%;background-image:linear-gradient(180deg,#02070a05,#04101915 60%,#06141df6 100%),var(--card-art);background-size:cover;background-position:center;filter:saturate(1.08) contrast(1.02);z-index:0;transform:translateZ(-1px)}.world-content{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:40% 18% 22% 20%;padding:3.6% 4% 3.5%}.world-top{display:flex;justify-content:space-between;align-items:flex-start}.world-kicker{font:700 clamp(5px,.42vw,7px) var(--heading);letter-spacing:.18em;color:#8fe7ff}.world-state{padding:2% 3%;border:1px solid #7b4d57;background:#260c12df;color:#ff8390;font:700 clamp(5px,.42vw,8px) var(--heading);letter-spacing:.12em;box-shadow:0 0 15px #ff647519}.world-state.online{border-color:#2e9f7d;background:#07261ddf;color:#68efbd;box-shadow:0 0 15px #38e4aa1f}.world-state.starting{border-color:#bf8a3d;background:#251a08df;color:#ffd17a}.world-title{align-self:end}.world-title h2{font:700 clamp(20px,1.85vw,33px)/.92 var(--heading);letter-spacing:.02em;margin:0;text-shadow:0 3px 12px #000}.world-title small{display:block;margin-top:1.2%;font:700 clamp(5px,.42vw,7px) var(--heading);letter-spacing:.14em;color:#6adfff}.world-title p{font-size:clamp(6px,.5vw,9px);color:#c2d4df;margin:1.2% 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.world-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5%;align-self:center}.metric{border:1px solid #1f5673;background:#04101ad9;padding:6% 6%;min-width:0;box-shadow:inset 0 0 14px #0c729817}.metric small{display:block;color:#6f8da0;font:700 clamp(4px,.34vw,6px) var(--heading);letter-spacing:.1em}.metric strong{display:block;color:#dff7ff;font:700 clamp(8px,.68vw,12px) var(--heading);margin-top:4%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.world-strip{align-self:center;border-top:1px solid #23536c;border-bottom:1px solid #173d52;padding:2% 0;display:flex;justify-content:space-between;color:#6e8fa2;font:700 clamp(4px,.34vw,6px) var(--heading);letter-spacing:.08em}.join-row{display:flex;align-items:end;justify-content:space-between;gap:3%}.join-button{flex:1;height:52%;border:1px solid #31b9e5;background:#071c2be8;color:#5fdcff;font:700 clamp(6px,.54vw,9px) var(--heading);letter-spacing:.1em;cursor:pointer;box-shadow:inset 0 0 18px #1c95bd18,0 0 16px #29b8e512}.join-button:hover{background:#0b2a3d}.join-button.offline{border-color:#6f5960;color:#9aa7ae;box-shadow:none}.details-chip{font:700 clamp(4px,.34vw,6px) var(--heading);color:#7795a7;letter-spacing:.08em;white-space:nowrap}.theme-palworld{--card-line:#3a958e}.theme-enshrouded{--card-line:#7754a5}.carousel-arrow{display:none;position:absolute;top:43%;z-index:12;width:2.1vw;height:4.2vw;min-width:28px;min-height:44px;max-width:42px;max-height:70px;border:1px solid #2c84ad;background:#061522eb;color:#56d8ff;font:700 clamp(22px,2.2vw,40px) var(--heading);cursor:pointer;align-items:center;justify-content:center;box-shadow:0 10px 22px #0009}.carousel-shell.overflowing .carousel-arrow{display:flex}.carousel-arrow.prev{left:-3.5%}.carousel-arrow.next{right:-3.5%}.carousel-meta{display:flex;align-items:center;justify-content:center;color:#8aa7b8;font:700 clamp(4px,.34vw,6px) var(--heading);letter-spacing:.14em;text-shadow:0 2px 8px #000}.carousel-dots{display:flex;gap:6px;margin-left:.8vw}.carousel-dots i{width:5px;height:5px;border-radius:50%;background:#294c61}.carousel-dots i.active{background:#50dfff;box-shadow:0 0 7px #50dfff}
.console-deck{position:absolute;z-index:11;left:4.7%;right:4.7%;bottom:3.9%;height:21%;display:grid;grid-template-columns:31% 44% 25%;gap:1.2%;align-items:stretch;padding:1.2% 1.4%;background:linear-gradient(180deg,#02070d20,#02070dcc 14%,#02070df8 100%);border-top:1px solid #24566f;clip-path:polygon(2% 0,98% 0,100% 17%,100% 100%,0 100%,0 17%)}.console-deck:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#c76f2c0e,#23bce711 45%,#23bce711 55%,#c76f2c0e);box-shadow:inset 0 18px 28px #0005}.quick-apps,.mission-panel{border:1px solid #1e4c65;background:linear-gradient(160deg,#03131eea,#020a12f2);padding:3.4%;box-shadow:inset 0 0 20px #0c729516,0 12px 25px #0007;clip-path:polygon(3% 0,97% 0,100% 11%,100% 100%,0 100%,0 11%)}.console-label{font:700 clamp(5px,.4vw,7px) var(--heading);letter-spacing:.18em;color:#63dfff;margin-bottom:2.5%}.app-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2%}.app-chip{min-width:0;display:grid;place-items:center;align-content:center;text-decoration:none;border:1px solid #24556e;background:#06131de0;color:#d9f2ff;padding:7% 3%;cursor:pointer;box-shadow:inset 0 0 14px #0a8db216}.app-chip:hover{border-color:#42bfe8;background:#08202ee8}.app-chip span{font-size:clamp(15px,1.5vw,27px);color:#55d9ff;line-height:1}.app-chip b{font:700 clamp(5px,.46vw,8px) var(--heading);margin-top:8%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.app-chip small{font-size:clamp(4px,.31vw,6px);color:#7592a4;margin-top:2%;white-space:nowrap}.instrument-cluster{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5%;align-items:stretch}.gauge-card{--pct:0;position:relative;display:grid;grid-template-columns:42% 1fr;align-items:center;gap:2%;border:1px solid #1e4f68;background:linear-gradient(160deg,#03131ee8,#020a12f0);padding:6%;box-shadow:inset 0 0 20px #0a7ba019,0 12px 25px #0007;clip-path:polygon(7% 0,93% 0,100% 10%,100% 100%,0 100%,0 10%)}.gauge{position:relative;width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) calc(var(--pct)*1%),#102a39 0);box-shadow:0 0 13px #27c8f321}.gauge:before{content:"";width:73%;height:73%;border-radius:50%;background:#03111b;box-shadow:inset 0 0 12px #000}.gauge span{position:absolute;width:3px;height:31%;background:linear-gradient(#f5bf6b,#ff7e3a);transform-origin:50% 100%;transform:translateY(-50%) rotate(var(--deg,-125deg));border-radius:4px;box-shadow:0 0 8px #e58b44}.gauge-card small{display:block;color:#6f91a6;font:700 clamp(4px,.32vw,6px) var(--heading);letter-spacing:.08em}.gauge-card strong{display:block;color:#58dcff;font:700 clamp(10px,.92vw,16px) var(--heading);white-space:nowrap;margin:4% 0}.gauge-card em{display:block;font:700 clamp(4px,.3vw,5px) var(--heading);font-style:normal;color:#718d9d;letter-spacing:.08em}.pulse-gauge:after{content:"⌁";position:absolute;color:#5edcff;font:700 clamp(11px,1.1vw,20px) var(--heading)}.mission-panel{display:flex;flex-direction:column;justify-content:center}.mission-panel strong{font:700 clamp(8px,.72vw,13px) var(--heading);color:#eaf7ff;letter-spacing:.05em}.mission-panel span{font-size:clamp(5px,.4vw,7px);color:#7895a7;margin:.4vw 0}.mission-panel button{align-self:flex-start;border:0;background:transparent;color:#62dfff;padding:0;font:700 clamp(5px,.42vw,7px) var(--heading);letter-spacing:.1em;cursor:pointer}
.deck-footer{position:absolute;left:4.5%;right:4.5%;bottom:1.4%;height:2.3%;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;border-top:1px solid #1e4a61;color:#708ea0;font:700 clamp(4px,.31vw,6px) var(--heading);letter-spacing:.1em;z-index:14}.deck-footer span:first-child{color:#63dfff}.deck-footer span:nth-child(2){text-align:center}
.dialog{border:1px solid #3c8cb4;background:#071522;color:var(--white);padding:0;width:min(680px,92vw);box-shadow:0 25px 90px #000d}.dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-inner{position:relative;padding:28px 30px 30px}.close{position:absolute;right:14px;top:10px;border:0;background:none;color:#d7efff;font-size:26px;cursor:pointer}.overline{font:700 10px var(--heading);letter-spacing:.25em;color:#5edcff}.dialog h2{font:700 34px var(--heading);letter-spacing:.04em;margin:9px 0 16px}.dialog h2 span{color:#52d9ff}.quiet{color:#8da6b6;font-size:12px;line-height:1.6}.join-status{margin:0 0 14px;padding:9px 11px;border:1px solid #315a70;color:#bcd3df;font-size:12px}.join-status.online{border-color:#2b8f71;color:#71e9bb}.join-status.offline{border-color:#794d56;color:#ff8a94}.join-grid{display:grid;grid-template-columns:1fr 120px;gap:10px}.join-grid>div{border:1px solid #28566f;background:#04101a;padding:12px}.join-grid small{display:block;color:#7694a7;font:700 8px var(--heading);letter-spacing:.15em}.join-grid strong{display:block;margin-top:7px;font:700 18px var(--heading);color:#eaf9ff;overflow-wrap:anywhere}.join-copy{display:flex;gap:10px;margin-top:11px}.join-copy code{flex:1;border:1px solid #28566f;background:#020b12;padding:12px;color:#58dfff}.btn{border:1px solid #377ea3;background:#0a2031;color:#d9f4ff;padding:10px 14px;font:700 10px var(--heading);letter-spacing:.08em;cursor:pointer}.btn.primary{border-color:#43b8df}.btn.secondary{border-color:#677b89}.notice{border:1px solid #846b43;background:#261d0d;padding:12px;color:#ffd17c;font-size:11px;margin:15px 0}.operator-auth{display:flex;gap:10px;margin-bottom:14px}.control-list{display:grid;gap:10px}.control-game{border:1px solid #28566f;background:#061522;padding:12px}.control-game h3{font:700 20px var(--heading);margin:0 0 9px}.control-buttons{display:flex;gap:7px;flex-wrap:wrap}.control-buttons button{border:1px solid #33789b;background:#0a2030;color:#d9f2ff;padding:8px 10px;font:700 9px var(--heading);cursor:pointer}.control-result{display:block;margin-top:8px;color:#86a2b4;font-size:10px}.software-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:15px 0}.software-project{display:grid;text-decoration:none;border:1px solid #28566f;background:#04101a;padding:14px;color:#dff7ff}.software-project>span{font-size:28px;color:#57d9ff}.software-project small{font:700 8px var(--heading);letter-spacing:.15em;color:#7597aa;margin-top:6px}.software-project b{font:700 18px var(--heading);margin-top:5px}.software-project p{font-size:11px;color:#98adba;line-height:1.5}.software-project em{font:700 9px var(--heading);font-style:normal;color:#59d8ff}.github-link{color:#61dfff;font:700 10px var(--heading);text-decoration:none;letter-spacing:.12em}
@media(max-width:900px){html,body{overflow:auto}.page-shell{height:auto;min-height:100vh;place-items:start center}.deck-frame{width:100vw;height:auto;min-height:100vh;aspect-ratio:auto;overflow:visible;background:#030a12}.fantasy-view{position:fixed;inset:0;height:auto;opacity:.42}.cockpit-frame{display:none}.topbar{position:relative;left:auto;right:auto;top:auto;height:72px;grid-template-columns:1fr auto auto;padding:0 16px;clip-path:none}.deck-nav,.realm-summary,.top-status{display:none}.brand{min-width:0}.hud-button{height:38px}.realm-zone{position:relative;left:auto;right:auto;top:auto;height:auto;margin:14px 16px;grid-template-rows:auto 390px auto}.world-card{flex-basis:min(84vw,390px);height:95%;transform:none!important}.console-deck{position:relative;left:auto;right:auto;bottom:auto;height:auto;margin:16px;grid-template-columns:1fr;padding:12px;clip-path:none}.instrument-cluster{grid-template-columns:repeat(2,1fr)}.app-strip{grid-template-columns:repeat(2,1fr)}.deck-footer{position:relative;left:auto;right:auto;bottom:auto;margin:16px;height:44px;padding:0 8px}.software-grid{grid-template-columns:1fr}}

/* ===== v2.1 immersion + readability pass ===== */
.topbar{grid-template-columns:22% 1fr 15%;height:5.4%;padding:0 1.25%;background:linear-gradient(180deg,#020811ed,#040d15df);box-shadow:0 10px 34px #000a,inset 0 -1px 0 #2c6d8a}
.realm-summary{justify-self:center;font-size:clamp(8px,.58vw,11px)}
.top-status{justify-self:end}.top-status b{font-size:clamp(8px,.56vw,11px)}.top-status small{font-size:clamp(7px,.48vw,9px)}

.fantasy-view{left:4.6%;right:4.6%;top:5.1%;height:77%;background-position:center 44%;filter:saturate(1.12) contrast(1.08) brightness(.92);transform:scale(1.02)}
.cockpit-frame{background:
  linear-gradient(180deg,#01050bf7 0 4.7%,transparent 4.7% 73%,#01050bf8 85% 100%),
  radial-gradient(ellipse at 50% 37%,transparent 0 58%,#01050b36 71%,#01050bbd 100%)}
.cockpit-frame:before,.cockpit-frame:after{top:4.2%;bottom:8%;width:8.4%;background:linear-gradient(90deg,#01050b 0 18%,#0b151ff6 43%,#17242ddd 63%,transparent 100%);border-right:2px solid #d47a336e;box-shadow:inset -18px 0 30px #0008,10px 0 28px #0007;clip-path:polygon(0 0,100% 5%,72% 23%,82% 47%,71% 73%,100% 93%,0 100%)}
.cockpit-frame i:nth-child(1){left:7%;right:7%;top:5.4%;height:4px;box-shadow:0 10px 24px #000}
.cockpit-frame i:nth-child(2){left:5.6%;right:5.6%;bottom:16.4%;height:4px;box-shadow:0 -10px 26px #000}
.cockpit-frame i:nth-child(3){left:5.1%;top:16%;width:4px;height:61%;transform:rotate(4deg);box-shadow:8px 0 22px #000}
.cockpit-frame i:nth-child(4){right:5.1%;top:16%;width:4px;height:61%;transform:rotate(-4deg);box-shadow:-8px 0 22px #000}
.scene-vignette{background:radial-gradient(ellipse at 50% 38%,transparent 15%,#0000 60%,#01050a8f 91%),linear-gradient(180deg,#0008 0 5%,transparent 12% 70%,#01050ae0 84% 100%)}
.deck-frame:before,.deck-frame:after{content:"";position:absolute;z-index:7;pointer-events:none;bottom:13.7%;width:23%;height:16%;background:linear-gradient(165deg,#111d25f0,#02070df8 58%,#000b);border-top:2px solid #9156237d;box-shadow:0 -16px 34px #0008,inset 0 2px 0 #4ad8ff16}
.deck-frame:before{left:-2%;clip-path:polygon(0 29%,81% 0,100% 30%,90% 100%,0 100%)}
.deck-frame:after{right:-2%;transform:scaleX(-1);clip-path:polygon(0 29%,81% 0,100% 30%,90% 100%,0 100%)}

.realm-zone{left:7.1%;right:7.1%;top:13.2%;height:55.5%;grid-template-rows:2% 1fr 3%;gap:.5%}
.realm-zone-head{min-height:0}.carousel-meta{min-height:0}.world-carousel{padding:2.2% 1.6% 4.3%;overflow-y:visible}
.world-track{gap:2.27%;perspective:1800px}
.world-card{flex-basis:calc((100% - 4.5%)/3);height:79%;transform:perspective(1500px) rotateX(4deg) translateY(4%);border-width:1px;box-shadow:0 26px 45px #000d,0 9px 12px #0009,0 0 0 1px #5ce0ff20,inset 0 1px 0 #ffffff2b,inset 0 0 30px #0f8db724;transition:transform .24s cubic-bezier(.2,.75,.25,1),filter .24s ease,box-shadow .24s ease;transform-origin:center 65%}
.world-card:nth-child(3n+1){transform:perspective(1500px) rotateY(5deg) rotateX(3deg) translateY(5%)}
.world-card:nth-child(3n+2){transform:perspective(1500px) rotateX(2deg) translateY(1%)}
.world-card:nth-child(3n){transform:perspective(1500px) rotateY(-5deg) rotateX(3deg) translateY(5%)}
.world-card:hover{z-index:30;transform:perspective(1500px) rotateX(0) rotateY(0) translateY(-4%) scale(1.09);filter:brightness(1.12) saturate(1.07);box-shadow:0 42px 70px #000e,0 0 42px color-mix(in srgb,var(--card-line,#2a82aa) 44%,transparent),inset 0 1px 0 #ffffff40}
.world-art{height:48%}.world-content{grid-template-rows:39% 19% 23% 19%;padding:4% 4.2% 3.7%}
.world-kicker{font-size:clamp(7px,.48vw,9px)}.world-state{font-size:clamp(7px,.48vw,9px)}
.world-title h2{font-size:clamp(24px,1.95vw,35px)}.world-title small{font-size:clamp(7px,.47vw,9px)}.world-title p{font-size:clamp(8px,.56vw,10px)}
.metric{padding:6% 6.5%;background:#04101aeb}.metric small{font-size:clamp(7px,.43vw,8px)}.metric strong{font-size:clamp(10px,.75vw,14px)}
.join-button{font-size:clamp(9px,.61vw,11px);height:57%}.details-chip{font-size:clamp(7px,.43vw,8px)}
.carousel-dots i{width:7px;height:7px}

.console-deck{left:8.7%;right:8.7%;bottom:2.8%;height:16.2%;grid-template-columns:16% 58% 26%;gap:1.1%;padding:1.05% 1.15%;background:linear-gradient(180deg,#0c1826b0,#02070dec 16%,#01050bfd 100%);border:1px solid #1b455d;border-top:2px solid #af632a75;clip-path:polygon(3% 0,97% 0,100% 22%,98.5% 100%,1.5% 100%,0 22%);box-shadow:0 -20px 40px #0008,inset 0 14px 24px #1430442b,inset 0 -10px 20px #0009}
.console-deck:before{background:linear-gradient(90deg,#c76f2c16,#23bce70c 43%,#23bce70c 57%,#c76f2c16);box-shadow:inset 0 12px 26px #0008}
.control-pod,.instrument-cluster,.mission-panel{position:relative;z-index:2;border:1px solid #244f67;background:linear-gradient(165deg,#111d26f4,#06111aef 52%,#02070cf8);box-shadow:inset 0 1px 0 #ffffff16,inset 0 -12px 24px #0008,0 10px 18px #0008;clip-path:polygon(7% 0,93% 0,100% 12%,100% 88%,93% 100%,7% 100%,0 88%,0 12%)}
.control-pod{display:grid;grid-template-columns:1.45fr 1fr 1fr;align-items:center;gap:5%;padding:8% 8%;overflow:visible}
.control-pod:before{content:"BRIDGE CONTROL";position:absolute;top:6%;left:8%;font:700 clamp(7px,.45vw,9px) var(--heading);letter-spacing:.16em;color:#657e8d}
.cockpit-button{position:relative;align-self:end;aspect-ratio:1;border-radius:50%;border:2px solid #304f60;background:radial-gradient(circle at 38% 32%,#284657,#07121b 48%,#01060a 72%);color:#d9f6ff;cursor:pointer;box-shadow:inset 0 0 0 4px #02070c,inset 0 0 20px #000,0 4px 0 #000,0 8px 12px #0008;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.cockpit-button span{display:grid;place-items:center;width:100%;height:100%;font:700 clamp(11px,.92vw,16px) var(--heading);letter-spacing:.06em}
.cockpit-button:after{content:attr(data-tip);position:absolute;left:50%;bottom:118%;transform:translateX(-50%) translateY(4px);padding:6px 8px;border:1px solid #4c6e80;background:#020911ee;color:#eaf8ff;white-space:nowrap;font:700 10px var(--heading);letter-spacing:.08em;opacity:0;pointer-events:none;transition:.16s ease;box-shadow:0 8px 22px #000b}
.cockpit-button:hover:after,.cockpit-button:focus-visible:after{opacity:1;transform:translateX(-50%) translateY(0)}
.cockpit-button:hover{transform:translateY(-3px) scale(1.08);filter:brightness(1.25)}
.op-control{border-color:#b8343e;background:radial-gradient(circle at 38% 32%,#ff727b,#9f121f 35%,#37050a 62%,#090204 75%);box-shadow:inset 0 0 0 4px #180306,inset 0 0 22px #ff64754d,0 4px 0 #210205,0 0 20px #ff43515c;animation:opPulse 2.2s ease-in-out infinite}
.op-control span{font-size:clamp(14px,1.15vw,21px);text-shadow:0 0 9px #fff7}.software-control{border-color:#2b91b5;box-shadow:inset 0 0 0 4px #020a10,inset 0 0 18px #26cfff50,0 4px 0 #001118,0 0 12px #20bde43d}.about-control{border-color:#a67825;background:radial-gradient(circle at 38% 32%,#ffd47f,#9b6617 38%,#332006 63%,#080602 76%);color:#fff0bf;box-shadow:inset 0 0 0 4px #151006,inset 0 0 18px #ffbf4055,0 4px 0 #1a1002,0 0 13px #f8b43c42;animation:amberPulse 3.4s ease-in-out infinite}
@keyframes opPulse{0%,100%{box-shadow:inset 0 0 0 4px #180306,inset 0 0 18px #ff647545,0 4px 0 #210205,0 0 12px #ff435145}50%{box-shadow:inset 0 0 0 4px #180306,inset 0 0 26px #ff64757d,0 4px 0 #210205,0 0 28px #ff435180}}
@keyframes amberPulse{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.18)}}

.instrument-cluster{grid-template-columns:repeat(4,1fr);gap:1%;padding:3.6% 2.2%;align-items:stretch}
.instrument-cluster:before{content:"SYSTEM INSTRUMENTS";position:absolute;top:4%;left:3%;font:700 clamp(7px,.45vw,9px) var(--heading);letter-spacing:.16em;color:#657e8d}
.gauge-card{grid-template-columns:44% 1fr;gap:3%;border:0;border-right:1px solid #173d50;background:transparent;padding:8% 5% 3%;box-shadow:none;clip-path:none}
.gauge-card:last-child{border-right:0}.gauge{box-shadow:0 0 14px #27c8f32e,inset 0 0 0 2px #173445,0 0 0 5px #02070b,0 0 0 6px #2c4856}.gauge:before{background:radial-gradient(circle,#051522 0,#02080d 72%);box-shadow:inset 0 0 12px #000,0 0 0 1px #23475a}.gauge-card small{font-size:clamp(7px,.42vw,8px)}.gauge-card strong{font-size:clamp(12px,.88vw,16px)}.gauge-card em{font-size:clamp(6px,.37vw,7px)}
.mission-panel{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;width:100%;color:inherit;padding:7% 8%;cursor:pointer}.mission-panel:hover{border-color:#3d86a8;filter:brightness(1.08)}.mission-panel strong{font-size:clamp(11px,.82vw,15px)}.mission-panel span{font-size:clamp(8px,.5vw,10px);margin:.35vw 0}.mission-panel em{font:700 clamp(7px,.45vw,9px) var(--heading);font-style:normal;color:#61dfff;letter-spacing:.1em}.console-label{font-size:clamp(7px,.44vw,9px)}
.about-network{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.about-network>div{border:1px solid #28566f;background:#04101a;padding:12px}.about-network small{display:block;color:#7596a9;font:700 8px var(--heading);letter-spacing:.14em}.about-network strong{display:block;color:#e9f8ff;font:700 14px var(--heading);margin-top:4px}

/* Improve readability at normal desktop resolutions without making 4K oversized. */
@media (min-width:901px) and (max-width:1700px){
  .brand b{font-size:24px}.brand small{font-size:7px}.realm-summary{font-size:9px}.top-status b{font-size:9px}.top-status small{font-size:8px}
  .world-kicker,.world-state,.world-title small{font-size:8px}.world-title h2{font-size:28px}.world-title p{font-size:9px}.metric small{font-size:7px}.metric strong{font-size:11px}.join-button{font-size:10px}.details-chip{font-size:7px}
  .gauge-card small{font-size:7px}.gauge-card strong{font-size:13px}.gauge-card em{font-size:6px}.console-label{font-size:8px}.mission-panel strong{font-size:12px}.mission-panel span{font-size:8px}.mission-panel em{font-size:7px}
}

@media(max-width:900px){
  .topbar{grid-template-columns:1fr auto;height:68px}.realm-summary{display:none}.top-status{display:grid}.brand b{font-size:24px}.brand small{font-size:7px}
  .realm-zone{margin:10px 12px;grid-template-rows:0 400px 18px}.world-card{height:90%;flex-basis:min(86vw,410px);transform:none!important}.world-card:hover{transform:scale(1.02)!important}
  .console-deck{grid-template-columns:1fr;margin:10px 12px;padding:12px;height:auto}.control-pod{min-height:120px}.instrument-cluster{grid-template-columns:repeat(2,1fr);min-height:220px}.mission-panel{min-height:120px}
  .cockpit-frame{display:block;position:fixed}.deck-frame:before,.deck-frame:after{display:none}
}


/* ============================================================
   v2.2 — viewport, cockpit-depth, readability and MFD refinement
   ============================================================ */
:root{--look-x:0;--look-y:0}
.page-shell{display:block;background:#00040a;overflow:hidden}
.deck-frame{width:100vw;height:100vh;max-width:none;max-height:none;aspect-ratio:auto;box-shadow:none;background:#01060b}
.fantasy-view{left:1.5%;right:1.5%;top:3.6%;height:82.5%;background-position:center 45%;transform:translate(calc(var(--look-x)*-9px),calc(var(--look-y)*-5px)) scale(1.045);transition:transform .22s ease-out;will-change:transform}
.cockpit-frame{transform:translate(calc(var(--look-x)*5px),calc(var(--look-y)*3px));transition:transform .18s ease-out;will-change:transform;background:linear-gradient(180deg,#01050bf8 0 4.4%,transparent 4.4% 76%,#01050bfa 91% 100%),radial-gradient(ellipse at 50% 38%,transparent 0 62%,#01050b38 73%,#01050bcf 100%)}
.cockpit-frame:before,.cockpit-frame:after{top:3.2%;bottom:1%;width:10.2%;border-right:3px solid #d47a3380;box-shadow:inset -25px 0 45px #000b,15px 0 38px #000a,0 0 0 1px #42dfff10;clip-path:polygon(0 0,100% 4%,73% 19%,84% 45%,75% 76%,100% 94%,0 100%)}
.cockpit-frame i:nth-child(1){left:8.5%;right:8.5%;top:4.7%;height:5px;box-shadow:0 12px 30px #000}
.cockpit-frame i:nth-child(2){left:7%;right:7%;bottom:17.5%;height:5px;box-shadow:0 -13px 28px #000}
.cockpit-frame i:nth-child(3){left:6.6%;top:13%;width:5px;height:70%;box-shadow:10px 0 25px #000}
.cockpit-frame i:nth-child(4){right:6.6%;top:13%;width:5px;height:70%;box-shadow:-10px 0 25px #000}
.scene-vignette{background:radial-gradient(ellipse at 50% 39%,transparent 10%,#0000 65%,#01050a9a 94%),linear-gradient(180deg,#0007 0 4%,transparent 9% 73%,#01050adf 91% 100%)}
.deck-frame:before,.deck-frame:after{bottom:0;width:29%;height:24%;background:linear-gradient(166deg,#16242df7,#050c13fa 55%,#000d);border-top:3px solid #a9652d89;box-shadow:0 -22px 44px #000c,inset 0 2px 0 #55ddff18,inset 0 24px 28px #102a3826}
.deck-frame:before{left:-3%;clip-path:polygon(0 25%,77% 0,100% 29%,91% 100%,0 100%)}
.deck-frame:after{right:-3%;clip-path:polygon(0 25%,77% 0,100% 29%,91% 100%,0 100%)}
.topbar{left:2.2%;right:2.2%;top:1.1%;height:6.2%;padding:0 1.15%;background:linear-gradient(180deg,#07131de8,#020810ee);box-shadow:0 10px 35px #000b,inset 0 -1px 0 #4bdcff16}
.brand b{font-size:clamp(24px,1.55vw,36px)}.brand small{font-size:clamp(8px,.48vw,11px);letter-spacing:.22em}.realm-summary{font-size:clamp(9px,.52vw,12px)}.top-status b{font-size:clamp(9px,.52vw,12px)}.top-status small{font-size:clamp(8px,.45vw,10px)}
.realm-zone{left:6.2%;right:6.2%;top:14.2%;height:55.5%;grid-template-rows:1% 1fr 2%;gap:.25%}
.world-carousel{padding:1.5% 1.9% 4.8%}.world-track{gap:2.2%}
.world-card{flex-basis:calc((100% - 4.4%)/3);height:77%;transform-origin:center 68%;box-shadow:0 28px 48px #000e,0 10px 16px #000a,0 0 0 1px #5ce0ff24,inset 0 1px 0 #ffffff30,inset 0 0 34px #0f8db72b}
.world-card:nth-child(3n+1){transform:perspective(1600px) rotateY(6deg) rotateX(4deg) translateY(6%)}.world-card:nth-child(3n+2){transform:perspective(1600px) rotateX(3deg) translateY(2%)}.world-card:nth-child(3n){transform:perspective(1600px) rotateY(-6deg) rotateX(4deg) translateY(6%)}
.world-card:hover{z-index:40;transform:perspective(1600px) rotateX(0) rotateY(0) translateY(-7%) scale(1.13);filter:brightness(1.15) saturate(1.1);box-shadow:0 52px 82px #000f,0 0 55px color-mix(in srgb,var(--card-line,#2a82aa) 55%,transparent),0 0 0 1px #c9f7ff44,inset 0 1px 0 #ffffff55}
.world-art{height:49%}.world-content{grid-template-rows:39% 19% 23% 19%;padding:4% 4.2% 3.9%}
.world-kicker,.world-state{font-size:clamp(10px,.52vw,12px)}.world-title h2{font-size:clamp(29px,1.85vw,42px)}.world-title small{font-size:clamp(10px,.5vw,12px)}.world-title p{font-size:clamp(11px,.58vw,14px);line-height:1.25}.metric small{font-size:clamp(9px,.46vw,11px)}.metric strong{font-size:clamp(13px,.72vw,17px)}.join-button{font-size:clamp(11px,.58vw,14px)}.details-chip{font-size:clamp(9px,.45vw,11px)}
.carousel-dots i{width:8px;height:8px}
.console-deck{left:7.7%;right:7.7%;bottom:.9%;height:20.7%;grid-template-columns:15.5% 58.5% 26%;gap:1%;padding:1.2% 1.3% 1.05%;background:linear-gradient(180deg,#15232dbd 0,#08121bf3 15%,#02070d 52%,#010409 100%);border:1px solid #285770;border-top:3px solid #b96e328c;clip-path:polygon(3% 0,97% 0,100% 19%,99% 100%,1% 100%,0 19%);box-shadow:0 -28px 52px #000c,inset 0 3px 0 #ffffff0c,inset 0 22px 34px #1735482f,inset 0 -20px 28px #000b;transform:translate(calc(var(--look-x)*3px),calc(var(--look-y)*2px));transition:transform .18s ease-out}
.console-deck:after{content:"";position:absolute;left:2.5%;right:2.5%;top:13%;height:5px;border-top:1px solid #d77f3e7a;border-bottom:1px solid #2fc9f55e;box-shadow:0 0 15px #18bfe62a;pointer-events:none}
.control-pod,.instrument-cluster,.mission-panel{border-color:#315e75;background:linear-gradient(165deg,#182630f5,#08131cf5 45%,#03080dfc);box-shadow:inset 0 2px 0 #ffffff1a,inset 0 -15px 28px #000a,0 13px 20px #000a,0 0 0 1px #0007}
.control-pod:before,.instrument-cluster:before{font-size:clamp(9px,.48vw,11px);color:#7795a7}
.op-control{border-width:3px;box-shadow:inset 0 0 0 5px #180306,inset 0 0 28px #ff647572,0 5px 0 #210205,0 0 28px #ff43517a,0 0 52px #ff1f3540;animation:opPulse22 1.8s ease-in-out infinite}
.op-control span{font-size:clamp(17px,1vw,24px)}
@keyframes opPulse22{0%,100%{filter:brightness(.92);box-shadow:inset 0 0 0 5px #180306,inset 0 0 22px #ff64755c,0 5px 0 #210205,0 0 20px #ff43515d,0 0 36px #ff1f352c}50%{filter:brightness(1.24);box-shadow:inset 0 0 0 5px #250309,inset 0 0 34px #ff9aa0a1,0 5px 0 #210205,0 0 40px #ff4351aa,0 0 65px #ff1f3552}}
.instrument-cluster{padding:3.9% 2.1% 2.6%;background:linear-gradient(180deg,#0c1923f7,#040b11fa);box-shadow:inset 0 8px 16px #1e42572b,inset 0 -12px 24px #000a,0 12px 20px #0008}
.gauge-card{position:relative;padding:8% 4% 3%;border-right:1px solid #24485c}.gauge-card:before{content:"";position:absolute;inset:7% 4%;border:1px solid #16394b;border-radius:8px;box-shadow:inset 0 0 18px #0008;pointer-events:none}.gauge{background:repeating-conic-gradient(from -130deg,#89e9ff 0 1deg,transparent 1deg 10deg),conic-gradient(var(--cyan) calc(var(--pct)*1%),#0a2432 0);box-shadow:0 0 18px #27c8f33b,inset 0 0 0 3px #1c3e50,0 0 0 6px #02070b,0 0 0 8px #365969,0 7px 15px #000b}.gauge:before{width:70%;height:70%;background:radial-gradient(circle at 45% 40%,#102633,#031018 48%,#01070b 100%);box-shadow:inset 0 0 18px #000,0 0 0 1px #2b566b}.gauge span{height:34%;width:4px;box-shadow:0 0 9px #ff9a50,0 0 16px #e58b4466}
.gauge-card small{font-size:clamp(9px,.47vw,11px)}.gauge-card strong{font-size:clamp(15px,.82vw,20px)}.gauge-card em{font-size:clamp(8px,.41vw,10px)}
.mission-panel{position:relative;overflow:hidden;padding:8% 8% 7%;background:linear-gradient(165deg,#0b1e2bea,#04111bee 62%,#02070cf8);border-color:#2d6079}.mission-panel:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,#72dfff08 0 1px,transparent 1px 5px),radial-gradient(circle at 88% 15%,#1ad5ff20,transparent 31%);opacity:.8;pointer-events:none}.mission-panel:after{content:"";position:absolute;left:7%;right:7%;bottom:12%;height:2px;background:linear-gradient(90deg,#4adfff,#4adfff20 68%,transparent);box-shadow:0 0 10px #4adfff55;pointer-events:none}.mission-panel>*{position:relative;z-index:1}.mfd-head{position:absolute;top:6%;left:7%;right:7%;display:flex;align-items:center;gap:6px;font:700 clamp(8px,.43vw,10px) var(--heading);letter-spacing:.14em;color:#7397aa}.mfd-head b{margin-left:auto;color:#f4c16a}.mfd-dot{width:7px;height:7px;border-radius:50%;background:#44e8b2;box-shadow:0 0 10px #44e8b2}.mission-panel .console-label{margin-top:8%;font-size:clamp(9px,.48vw,11px)}.mission-panel strong{font-size:clamp(14px,.82vw,19px)}.mission-panel span{font-size:clamp(10px,.52vw,12px);margin:.45vw 0}.mission-panel em{font-size:clamp(8px,.43vw,10px)}.mfd-status{display:flex;gap:5px;flex-wrap:wrap;margin:.1vw 0 .45vw}.mfd-status i{font:700 clamp(7px,.38vw,9px) var(--heading);font-style:normal;letter-spacing:.08em;color:#7de6ff;border:1px solid #24546b;padding:3px 5px;background:#03101a99}.mission-panel:hover{border-color:#58bee8;filter:brightness(1.13);box-shadow:inset 0 0 30px #1b8eb12b,0 13px 25px #0009,0 0 28px #21c6f326}
.cockpit-button:after{font-size:12px;padding:7px 10px}

/* Desktop readability: target 1080p and 1440p explicitly. */
@media (min-width:901px) and (max-height:1500px){
  .world-kicker,.world-state{font-size:11px}.world-title small{font-size:10px}.world-title p{font-size:12px}.metric small{font-size:9px}.metric strong{font-size:14px}.join-button{font-size:12px}.details-chip{font-size:9px}
  .realm-summary{font-size:10px}.top-status b{font-size:10px}.top-status small{font-size:9px}.brand small{font-size:9px}
  .gauge-card small{font-size:10px}.gauge-card strong{font-size:16px}.gauge-card em{font-size:8px}.mission-panel span{font-size:10px}.mission-panel em{font-size:9px}
}
@media (min-width:901px) and (max-height:1120px){
  .world-card{height:75%}.world-title h2{font-size:30px}.world-title p{font-size:11px}.metric strong{font-size:13px}.console-deck{height:21.5%}
}
@media (prefers-reduced-motion:reduce){.fantasy-view,.cockpit-frame,.console-deck{transition:none!important;transform:none!important}.op-control{animation:none!important}}


/* ============================================================
   v2.3 — sharp panorama + instrument alignment polish
   ============================================================ */
.fantasy-view{
  background-image:url('assets/fantasy-vista-v23.webp?v=2.3');
  background-position:center 48%;
  filter:saturate(1.1) contrast(1.055) brightness(.96);
  transform:translate(calc(var(--look-x)*-5px),calc(var(--look-y)*-3px)) scale(1.018);
  image-rendering:auto;
}
.instrument-cluster{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  padding:3.8% 2.1% 2.8%;
}
.gauge-card{
  min-width:0;
  grid-template-columns:minmax(56px,41%) minmax(0,1fr);
  grid-template-rows:1fr;
  align-items:center;
  gap:5%;
  padding:8% 5% 4%;
}
.gauge-card>div:last-child{
  min-width:0;
  height:72%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-content:center;
  align-items:center;
}
.gauge{
  width:min(100%,86px);
  justify-self:center;
  align-self:center;
}
.gauge-card small,
.gauge-card strong,
.gauge-card em{
  width:100%;
  margin:0;
  line-height:1.05;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.gauge-card small{align-self:end;padding-bottom:5px;}
.gauge-card strong{align-self:center;overflow:hidden;text-overflow:clip;}
.gauge-card em{align-self:start;padding-top:5px;}
#memoryGauge strong{font-size:clamp(13px,.72vw,17px);letter-spacing:-.02em;}
#serversGauge strong{font-size:clamp(14px,.76vw,18px);}
#playersGauge strong,#loadGauge strong{font-size:clamp(15px,.82vw,20px);}
@media (min-width:901px) and (max-height:1500px){
  #memoryGauge strong{font-size:14px}
  #serversGauge strong{font-size:15px}
  #playersGauge strong,#loadGauge strong{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.fantasy-view{transform:none!important}}

/* ============================================================
   v2.4 — full-frame cockpit target + mobile stage scaling
   ============================================================ */

/* Use the complete approved cinematic composition. Never crop/cover it. */
.deck-frame{
  --stage-ratio:1.7777777778;
  background:#02070b url('assets/cockpit-shell-v211.webp?v=2.11') center center/100% 100% no-repeat;
}
.fantasy-view{
  display:none!important;
}
/* The full background already supplies the detailed cockpit structure; these
   layers now only add subtle live depth instead of replacing/cropping it. */
.cockpit-frame{
  opacity:.22;
  mix-blend-mode:screen;
}
.scene-vignette{
  background:linear-gradient(180deg,#00000014 0 8%,transparent 17% 69%,#01050a45 89% 100%);
}

/* Make the live panels visually sit inside the rendered bridge. */
.topbar{
  background:linear-gradient(180deg,#03101be6,#020811e6);
  border-color:#2a647f;
  backdrop-filter:blur(5px);
}
.realm-zone{top:20.7%;height:49.5%;left:5.7%;right:5.7%;}
.world-carousel{padding:1% 1.4% 2.7%;}
.world-track{gap:2.2%;}
.world-card{
  flex-basis:calc((100% - 4.4%)/3);
  height:78%;
  background:linear-gradient(180deg,#071824d5 0,#04131fe8 56%,#020b13f3 100%);
  backdrop-filter:blur(2px);
  box-shadow:0 24px 48px #000d,0 8px 18px #000b,0 0 0 1px #5ce0ff29,inset 0 1px 0 #ffffff30;
}
.world-card:hover{
  transform:perspective(1500px) rotateX(0) rotateY(0) translateY(-8%) scale(1.12);
  filter:brightness(1.12) saturate(1.08);
  box-shadow:0 58px 88px #000f,0 0 54px color-mix(in srgb,var(--card-line,#2a82aa) 58%,transparent),0 0 0 1px #d6f9ff4a,inset 0 1px 0 #ffffff55;
}
.world-card:nth-child(3n+1){transform:perspective(1500px) rotateY(5deg) rotateX(2deg) translateY(4%)}
.world-card:nth-child(3n+2){transform:perspective(1500px) rotateX(1.5deg) translateY(0)}
.world-card:nth-child(3n){transform:perspective(1500px) rotateY(-5deg) rotateX(2deg) translateY(4%)}

/* Position the live physical console over the console area in the full image. */
.console-deck{
  left:5.2%;right:5.2%;bottom:1.6%;height:22.5%;
  grid-template-columns:18% 56% 26%;
  padding:1.15% 1.2% 1%;
  background:linear-gradient(180deg,#0d1c27df,#07111aef 30%,#02070df7 100%);
  border-color:#2d6079;
  border-top-color:#d97d3d99;
  box-shadow:0 -18px 35px #000a,inset 0 3px 0 #ffffff11,inset 0 18px 28px #16364b2e,inset 0 -18px 28px #000b;
}
.instrument-cluster{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:3.2% 1.5% 2.2%;
}
.gauge-card{
  display:grid;
  grid-template-columns:44% 56%;
  grid-template-rows:1fr;
  align-items:center;
  gap:0;
  padding:7% 5% 4%;
  min-width:0;
}
.gauge-card .gauge{
  width:min(86%,92px);
  aspect-ratio:1;
  justify-self:center;
}
.gauge-card>div:last-child{
  height:68%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  align-content:center;
  min-width:0;
  padding-left:5%;
}
.gauge-card small,.gauge-card strong,.gauge-card em{
  margin:0!important;padding:0!important;line-height:1.05!important;text-align:left!important;
}
.gauge-card small{align-self:end;margin-bottom:5px!important;}
.gauge-card strong{align-self:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:visible;}
.gauge-card em{align-self:start;margin-top:5px!important;}
#memoryGauge strong{font-size:clamp(13px,.70vw,17px)!important;letter-spacing:-.025em;}

/* Top-right status is intentionally simple: ONLINE or OFFLINE. */
.top-status b{letter-spacing:.14em;}

/* Mobile / Android: preserve the complete 16:9 cockpit instead of reflowing
   the deck into disconnected blocks. Landscape gets a true full-cockpit view. */
@media (max-width:900px){
  html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:#000;}
  body{overscroll-behavior:none;touch-action:pan-x pan-y pinch-zoom;}
  .page-shell{width:100vw;height:100dvh;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;}
  .deck-frame{
    position:relative;
    width:min(100vw,177.7778dvh)!important;
    height:min(100dvh,56.25vw)!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    flex:0 0 auto;
  }
  .topbar,.realm-zone,.console-deck{position:absolute!important;margin:0!important;}
  .topbar{left:2.2%!important;right:2.2%!important;top:1.1%!important;height:6.2%!important;grid-template-columns:19% 1fr 18%!important;padding:0 1.15%!important;clip-path:polygon(.6% 0,99.4% 0,100% 22%,100% 100%,0 100%,0 22%)!important;}
  .brand b{font-size:clamp(9px,2.5vw,18px)!important}.brand small{font-size:clamp(3px,.8vw,6px)!important}.brand img{min-width:0!important;width:18%!important}
  .realm-summary{display:block!important;font-size:clamp(4px,1vw,7px)!important}.top-status{display:grid!important}.top-status b{font-size:clamp(4px,1vw,8px)!important}.top-status small{font-size:clamp(3px,.8vw,6px)!important}
  .realm-zone{left:5.7%!important;right:5.7%!important;top:20.7%!important;height:49.5%!important;grid-template-rows:1% 1fr 2%!important;gap:.25%!important;}
  .world-carousel{height:100%!important;padding:1% 1.4% 2.7%!important;overflow-x:auto!important;overflow-y:visible!important;}
  .world-track{height:100%!important;display:flex!important;gap:2.2%!important;min-width:100%!important;}
  .world-card{flex:0 0 calc((100% - 4.4%)/3)!important;height:78%!important;min-width:0!important;transform-origin:center 68%!important;}
  .world-card:nth-child(3n+1){transform:perspective(1500px) rotateY(5deg) rotateX(2deg) translateY(4%)!important}.world-card:nth-child(3n+2){transform:perspective(1500px) rotateX(1.5deg)!important}.world-card:nth-child(3n){transform:perspective(1500px) rotateY(-5deg) rotateX(2deg) translateY(4%)!important}
  .world-title h2{font-size:clamp(8px,2.27vw,18px)!important}.world-title p{font-size:clamp(4px,1vw,8px)!important}.world-title small,.world-kicker,.world-state{font-size:clamp(3px,.85vw,6px)!important}.metric small{font-size:clamp(3px,.68vw,5px)!important}.metric strong{font-size:clamp(4px,1vw,8px)!important}.join-button{font-size:clamp(4px,1vw,8px)!important}.details-chip{font-size:clamp(3px,.72vw,5px)!important}
  .console-deck{left:5.2%!important;right:5.2%!important;bottom:1.6%!important;height:22.5%!important;display:grid!important;grid-template-columns:18% 56% 26%!important;gap:1%!important;padding:1.15% 1.2% 1%!important;clip-path:polygon(3% 0,97% 0,100% 19%,99% 100%,1% 100%,0 19%)!important;}
  .instrument-cluster{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;padding:3.2% 1.5% 2.2%!important}.gauge-card{padding:7% 5% 4%!important;grid-template-columns:44% 56%!important}.gauge-card .gauge{width:min(86%,60px)!important}.gauge-card small{font-size:clamp(3px,.72vw,5px)!important}.gauge-card strong{font-size:clamp(5px,1.1vw,9px)!important}.gauge-card em{font-size:clamp(3px,.65vw,5px)!important}
  .control-pod,.mission-panel{display:block!important}.cockpit-button{min-width:0!important}.mission-panel strong{font-size:clamp(5px,1.1vw,9px)!important}.mission-panel span,.mission-panel em,.mfd-status i,.mfd-head,.mission-panel .console-label{font-size:clamp(3px,.65vw,5px)!important}
}

/* Portrait phones still show the whole cockpit, but allow pinch zoom and
   horizontal inspection rather than destroying the desktop composition. */
@media (max-width:900px) and (orientation:portrait){
  .page-shell{justify-content:flex-start;align-items:center;overflow:auto hidden;}
  .deck-frame{
    width:177.7778dvh!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .deck-frame,.console-deck,.cockpit-frame{transform:none!important}
}

/* ============================================================
   v2.5 — clean cinematic shell + live-card/live-gauge integration
   ============================================================ */
.deck-frame{
  background:#02070b url('assets/cockpit-shell-v211.webp?v=2.11') center center/100% 100% no-repeat;
}
.fantasy-view{display:none!important}
.cockpit-frame{opacity:.08!important;mix-blend-mode:screen}
.scene-vignette{background:linear-gradient(180deg,#0000000b 0 8%,transparent 18% 68%,#02060b35 88% 100%)}

/* Cover the baked-in instrument art completely. Only the real live console is visible. */
.console-deck{
  left:3.35%;right:3.35%;bottom:0;height:29%;
  grid-template-columns:22% 53% 25%;gap:.8%;
  padding:2.2% 1.35% 1.15%;
  background:linear-gradient(180deg,#0b1822 0,#06111a 18%,#02070d 56%,#010408 100%);
  border:1px solid #244f68;border-top:3px solid #bd6f32aa;
  clip-path:polygon(2.6% 0,97.4% 0,100% 13%,99.25% 100%,.75% 100%,0 13%);
  box-shadow:0 -20px 48px #000e,inset 0 3px 0 #ffffff12,inset 0 18px 28px #12354a33,inset 0 -22px 36px #000d;
  transform:none;
}
.console-deck:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,#da793511,transparent 18%,#20c6ef0b 50%,transparent 82%,#da793511),
    repeating-linear-gradient(90deg,transparent 0 12%,#31586a18 12.1% 12.2%,transparent 12.3% 25%);
}
.console-deck:after{
  content:"";position:absolute;left:2%;right:2%;top:10%;height:4px;
  border-top:1px solid #ed8c4b94;border-bottom:1px solid #35c8ef79;
  box-shadow:0 0 14px #31c8ef42;pointer-events:none;
}

/* Match the target bridge: cards float in one row over the clear windshield. */
.realm-zone{left:5.5%;right:5.5%;top:29.1%;height:40.7%;}
.world-carousel{padding:.4% .45% 1.1%;overflow-y:visible}
.world-track{gap:1.35%;align-items:center}
.world-card{
  flex-basis:calc((100% - 2.7%)/3);height:90%;
  background:linear-gradient(180deg,#061723e8 0,#03121ded 54%,#020a12fa 100%);
  border:1px solid color-mix(in srgb,var(--card-line,#2a82aa) 78%,#9cecff 22%);
  clip-path:polygon(2.8% 0,97.2% 0,100% 7%,100% 93%,97.2% 100%,2.8% 100%,0 93%,0 7%);
  backdrop-filter:blur(1.2px);
  box-shadow:0 22px 36px #000d,0 0 0 2px #1ed8ff18,inset 0 1px 0 #ffffff45,inset 0 0 38px #0fa7d329;
  transform:perspective(1500px) translateY(0) rotateX(1deg);
}
.world-card:nth-child(3n+1){transform:perspective(1500px) rotateY(1.7deg) rotateX(1deg)}
.world-card:nth-child(3n+2){transform:perspective(1500px) rotateX(.5deg)}
.world-card:nth-child(3n){transform:perspective(1500px) rotateY(-1.7deg) rotateX(1deg)}
.world-card:hover{
  z-index:40;transform:perspective(1500px) rotateX(0) rotateY(0) translateY(-4%) scale(1.075);
  filter:brightness(1.11) saturate(1.06);
  box-shadow:0 48px 78px #000f,0 0 50px color-mix(in srgb,var(--card-line,#2a82aa) 60%,transparent),0 0 0 2px #79eaff47,inset 0 1px 0 #ffffff66;
}
.world-art{height:51%}
.world-content{grid-template-rows:41% 18% 22% 19%;padding:3.4% 3.8% 3.2%}
.world-title h2{font-size:clamp(22px,1.75vw,36px)}
.world-title small{font-size:clamp(7px,.48vw,10px)}
.world-title p{font-size:clamp(8px,.57vw,12px)}
.world-kicker,.world-state{font-size:clamp(7px,.46vw,10px)}
.metric small{font-size:clamp(6px,.4vw,8px)}
.metric strong{font-size:clamp(10px,.72vw,15px)}
.join-button{font-size:clamp(8px,.55vw,11px)}
.details-chip{font-size:clamp(6px,.4vw,8px)}

/* Physical bridge control pod. */
.control-pod,.instrument-cluster,.mission-panel{
  position:relative;border:1px solid #315f78;
  background:linear-gradient(165deg,#0d1f2b 0,#07131d 48%,#02070c 100%);
  box-shadow:inset 0 2px 0 #ffffff1a,inset 0 -18px 30px #000c,0 11px 22px #000b,0 0 0 1px #000a;
}
.control-pod{padding:17% 8% 6%;display:flex;align-items:flex-end;justify-content:center;gap:8%}
.control-pod:before{content:"BRIDGE CONTROL";position:absolute;top:6%;left:8%;font:700 clamp(8px,.47vw,11px) var(--heading);letter-spacing:.15em;color:#75a5ba}
.op-control{width:38%;aspect-ratio:1;min-width:0;height:auto;border-width:3px;box-shadow:0 0 0 5px #2c1114,0 0 22px #ff334e9e,inset 0 0 24px #ff1f3c69}
.software-control,.about-control{width:24%;aspect-ratio:1;min-width:0;height:auto}

/* Rebuild the live gauges to look like the rendered ship instruments. */
.instrument-cluster{padding:12% 1.5% 4%;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.instrument-cluster:before{content:"SYSTEM INSTRUMENTS";position:absolute;top:5%;left:3%;font:700 clamp(8px,.47vw,11px) var(--heading);letter-spacing:.15em;color:#75a5ba}
.gauge-card{
  display:grid;grid-template-columns:48% 52%;align-items:center;gap:1%;min-width:0;
  padding:5.5% 4% 3%;border:0;border-right:1px solid #1b465e;background:transparent;box-shadow:none;clip-path:none;
}
.gauge-card:last-child{border-right:0}
.gauge-card:before{content:none}
.gauge{
  width:min(88%,104px)!important;aspect-ratio:1;border-radius:50%;justify-self:center;
  background:
    repeating-conic-gradient(from -132deg,#7fe8ff 0 1deg,transparent 1.25deg 8.5deg),
    conic-gradient(from -132deg,var(--cyan) calc(var(--pct)*.72%),#0d2b3b calc(var(--pct)*.72%) 72%,#09131a 72% 100%);
  box-shadow:0 0 18px #24d2ff55,inset 0 0 0 2px #244e63,0 0 0 5px #02070b,0 0 0 7px #497084,0 8px 18px #000c;
}
.gauge:before{width:68%;height:68%;background:radial-gradient(circle at 45% 40%,#102733 0,#041018 48%,#01070b 100%);box-shadow:inset 0 0 18px #000,0 0 0 1px #2b566b}
.gauge span{height:35%;width:4px;background:linear-gradient(#ffd27a,#ff7f2d);box-shadow:0 0 8px #ff9e4e,0 0 18px #ff7c2e77}
.gauge-card>div:last-child{height:68%;display:grid;grid-template-rows:auto 1fr auto;align-items:center;align-content:center;min-width:0;padding-left:3%}
.gauge-card small{font-size:clamp(8px,.48vw,11px);color:#a8c3d2;letter-spacing:.1em}
.gauge-card strong{font-size:clamp(16px,.88vw,22px);color:#43deff;font-variant-numeric:tabular-nums;white-space:nowrap}
.gauge-card em{font-size:clamp(7px,.4vw,9px);color:#87a7b8;letter-spacing:.08em}
#memoryGauge strong{font-size:clamp(13px,.70vw,18px)!important}

.mission-panel{padding:13% 7% 6%;overflow:hidden;background:linear-gradient(165deg,#09202de8,#04121cec 62%,#02070cf8)}
.mfd-head{top:5%;left:7%;right:7%}
.mission-panel .console-label{margin-top:0}
.mission-panel strong{font-size:clamp(13px,.84vw,20px)}
.mission-panel span{font-size:clamp(9px,.52vw,12px)}
.mission-panel em{font-size:clamp(7px,.42vw,10px)}

/* The top bar fully covers the baked-in header in the shell. */
.topbar{left:2.4%;right:2.4%;top:1%;height:6.4%;background:linear-gradient(180deg,#05131ef9,#020811fb);backdrop-filter:none;border-color:#285c75;box-shadow:0 8px 28px #000c,inset 0 -1px 0 #4bdcff1c}
.brand b{font-size:clamp(20px,1.65vw,34px)}
.brand small{font-size:clamp(5px,.4vw,8px)}
.realm-summary{font-size:clamp(7px,.54vw,11px)}
.top-status b{font-size:clamp(8px,.55vw,11px)}
.top-status small{font-size:clamp(6px,.42vw,9px)}

/* Android / narrow displays: preserve the complete cockpit stage. */
@media (max-width:900px){
  .realm-zone{left:5.5%!important;right:5.5%!important;top:29.1%!important;height:40.7%!important}
  .world-card{height:90%!important}
  .console-deck{left:3.35%!important;right:3.35%!important;bottom:0!important;height:29%!important;grid-template-columns:22% 53% 25%!important;padding:2.2% 1.35% 1.15%!important}
  .gauge-card{grid-template-columns:48% 52%!important;padding:5.5% 4% 3%!important}.gauge-card .gauge{width:min(88%,62px)!important}
}

/* ============================================================
   v2.6 — exposed cockpit hardware / functional inset controls
   Keep the artwork visible. Cover only stale baked-in data areas.
   ============================================================ */

/* The painted upper bridge is the header. The DOM header only supplies
   dynamic/live pieces and click targets instead of a dark replacement bar. */
.topbar{
  left:2.9%;right:2.9%;top:.85%;height:6.15%;
  padding:0 1.15%;
  background:transparent;
  border:0;
  clip-path:none;
  backdrop-filter:none;
  box-shadow:none;
  grid-template-columns:20% 1fr 19%;
  gap:1%;
}
.brand{
  opacity:0;
  height:100%;
  width:100%;
  pointer-events:auto;
}
.realm-summary{
  justify-self:center;
  padding:.48em 1.45em .42em;
  border:1px solid #2f7698aa;
  border-top-color:#72ddff88;
  background:linear-gradient(180deg,#061725ed,#020a12ef);
  box-shadow:0 0 16px #20cfff20,inset 0 1px 0 #ffffff24;
  clip-path:polygon(3% 0,97% 0,100% 28%,100% 100%,0 100%,0 28%);
  color:#bdd9e7;
  text-shadow:0 1px 6px #000;
}
.top-status{
  justify-self:end;
  min-width:7.8vw;
  padding:.5em .78em .45em;
  border:1px solid #1f604daa;
  background:linear-gradient(180deg,#041914ed,#020c0bef);
  box-shadow:0 0 16px #31e0a52a,inset 0 1px 0 #ffffff18;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 26%);
}
.status-dot{width:8px;height:8px}
.top-status b{font-size:clamp(9px,.66vw,14px);color:#59f0b5}
.top-status small{font-size:clamp(7px,.46vw,10px);color:#9cb4c0}

/* Do not draw a replacement lower deck. The full cockpit art remains visible.
   Individual live modules cover only the old painted controls/data. */
.console-deck{
  left:3.1%;right:3.1%;bottom:.25%;height:27.4%;
  grid-template-columns:22% 53% 25%;gap:.85%;
  padding:1.1% .8% 1.25%;
  background:transparent;
  border:0;
  clip-path:none;
  box-shadow:none;
  overflow:visible;
}
.console-deck:before,.console-deck:after{display:none!important}

/* Each pod is inset glass sitting inside the painted metal recesses. */
.control-pod,.instrument-cluster,.mission-panel{
  border:1px solid #2f6f8eaa;
  border-top-color:#6ddfff99;
  background:
    linear-gradient(180deg,#071722f0 0,#041019f2 48%,#02080df6 100%);
  box-shadow:
    inset 0 1px 0 #ffffff2e,
    inset 0 -15px 28px #0009,
    0 0 0 2px #01070b99,
    0 8px 18px #0009,
    0 0 22px #16bdeb12;
  clip-path:polygon(2.4% 0,97.6% 0,100% 9%,100% 94%,97.6% 100%,2.4% 100%,0 94%,0 9%);
}

.control-pod{
  padding:18% 6% 6%;
  gap:7%;
  background:
    linear-gradient(180deg,#0b1721f2,#060d13f5 46%,#020507f8),
    linear-gradient(90deg,#4adfff10,transparent 36%,transparent 66%,#ee8b3612);
}
.control-pod:before{
  top:5%;left:7%;
  color:#7fdcff;
  text-shadow:0 0 8px #2bd6ff55;
}
.control-pod:after{
  content:"";position:absolute;left:6%;right:6%;top:13%;height:3px;
  background:linear-gradient(90deg,#ef5a45 0 22%,#283d49 22% 100%);
  box-shadow:0 0 10px #ff634855;
}
.op-control{
  width:40%;
  border-color:#ff4a58;
  background:radial-gradient(circle at 50% 42%,#ff6674 0,#c51c34 38%,#4a0913 72%,#160307 100%);
  box-shadow:0 0 0 4px #351016,0 0 0 6px #ff3c4a77,0 0 28px #ff344bc7,inset 0 0 25px #ffb0b055;
}
.software-control{
  background:radial-gradient(circle at 45% 38%,#69e6ff,#1686ad 44%,#052738 75%,#021019);
  border-color:#48d8ff;
  box-shadow:0 0 0 3px #082331,0 0 20px #31cfff66,inset 0 0 18px #85efff35;
}
.about-control{
  background:radial-gradient(circle at 45% 38%,#ffd067,#c78b18 44%,#4a2a05 75%,#1b0d01);
  border-color:#ffc24b;
  box-shadow:0 0 0 3px #2b1b06,0 0 20px #ffad2f66,inset 0 0 18px #ffe7a935;
}

.instrument-cluster{
  padding:11% 1.3% 3.5%;
  background:linear-gradient(180deg,#071722f2,#041019f6 58%,#02070bf9);
}
.instrument-cluster:before{
  top:4.2%;left:2.5%;
  color:#7fdcff;
  text-shadow:0 0 8px #2bd6ff55;
}
.instrument-cluster:after{
  content:"";position:absolute;left:2.5%;right:2.5%;top:12.3%;height:2px;
  background:linear-gradient(90deg,#3ccfffa0,transparent 28%,transparent 72%,#f1933b91);
  box-shadow:0 0 9px #28cfff44;
}
.gauge-card{
  margin:0 .7%;
  padding:6% 3.5% 3%;
  border:1px solid #1d455b;
  border-right:1px solid #2a6a86;
  background:linear-gradient(180deg,#061520f0,#02090ff4);
  box-shadow:inset 0 0 16px #0a7fa31a,0 3px 8px #0009;
  clip-path:polygon(3% 0,97% 0,100% 9%,100% 91%,97% 100%,3% 100%,0 91%,0 9%);
}
.gauge-card:last-child{border-right:1px solid #2a6a86}
.gauge{
  width:min(90%,112px)!important;
  background:
    repeating-conic-gradient(from -132deg,#9aefff 0 1.1deg,transparent 1.25deg 7.9deg),
    conic-gradient(from -132deg,#23d8ff calc(var(--pct)*.72%),#123849 calc(var(--pct)*.72%) 72%,#071119 72% 100%);
  box-shadow:
    0 0 0 3px #081923,
    0 0 0 6px #2a667f,
    0 0 0 8px #071219,
    0 0 22px #23d8ff66,
    inset 0 0 18px #000;
}
.gauge:before{
  width:65%;height:65%;
  background:radial-gradient(circle at 42% 36%,#183647 0,#06131d 48%,#010608 100%);
  box-shadow:inset 0 0 16px #000,0 0 0 1px #4f7a8c;
}
.gauge span{
  width:4px;height:36%;
  background:linear-gradient(#ffe29a,#ff8b31);
  box-shadow:0 0 8px #ffad61,0 0 18px #ff7e2f99;
}
.gauge-card small{color:#b3cbd7}
.gauge-card strong{color:#55e0ff;text-shadow:0 0 8px #34d5ff33}
.gauge-card em{color:#8eacba}

.mission-panel{
  padding:12% 6% 5.5%;
  background:
    linear-gradient(180deg,#07202df2,#04131ef6 62%,#02080df9),
    repeating-linear-gradient(0deg,#40dfff08 0 1px,transparent 1px 4px);
}
.mission-panel:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#60e7ff08 4px);
  mix-blend-mode:screen;
}
.mfd-head{color:#8ee8ff}
.mission-panel strong{color:#e9f9ff;text-shadow:0 0 8px #46d9ff25}
.mfd-status i{border-color:#2d94b9;background:#052333;color:#7fe6ff}

/* The live cards already match the target well; just give the edge hardware a
   brighter cockpit-like bezel without changing layout. */
.world-card{
  box-shadow:0 24px 40px #000d,0 0 0 2px #1ed8ff22,inset 0 1px 0 #ffffff52,inset 0 0 34px #0fa7d326;
}
.world-card:hover{
  box-shadow:0 48px 78px #000f,0 0 48px color-mix(in srgb,var(--card-line,#2a82aa) 66%,transparent),0 0 0 2px #8beaff66,inset 0 1px 0 #ffffff77;
}

@media (max-width:900px){
  .topbar{left:2.9%!important;right:2.9%!important;top:.85%!important;height:6.15%!important;grid-template-columns:20% 1fr 19%!important;background:transparent!important;border:0!important;box-shadow:none!important;clip-path:none!important}
  .realm-summary{font-size:clamp(4px,1vw,7px)!important;padding:.42em 1em .38em!important}
  .console-deck{left:3.1%!important;right:3.1%!important;bottom:.25%!important;height:27.4%!important;grid-template-columns:22% 53% 25%!important;padding:1.1% .8% 1.25%!important;background:transparent!important;border:0!important;box-shadow:none!important;clip-path:none!important}
  .gauge-card .gauge{width:min(90%,66px)!important}
}


/* ============================================================
   v2.7 — painted header + invisible refresh hit target
   Let the cockpit artwork supply the upper-left and center header.
   ============================================================ */
.topbar{
  left:2.9%;right:2.9%;top:.85%;height:6.15%;
  display:block;
  padding:0;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  backdrop-filter:none!important;
}
/* Invisible click target over the painted ZuEs mark/title. */
.brand{
  position:absolute;
  left:0;top:0;
  width:25%;height:100%;
  display:block;
  opacity:0!important;
  cursor:pointer;
  pointer-events:auto;
  z-index:3;
}
.brand:focus-visible{
  opacity:1!important;
  outline:2px solid #59dcff;
  outline-offset:-2px;
  background:#07172466;
}
/* The center legend is already painted into the cockpit art. */
.realm-summary{display:none!important;}
/* Small live status mask precisely occupies the painted status display. */
.top-status{
  position:absolute;
  right:.45%;top:8%;
  width:10.2%;height:78%;
  min-width:0;
  display:grid;
  grid-template-columns:auto auto;
  align-content:center;
  justify-content:end;
  column-gap:.36vw;
  padding:0 .7vw;
  border:1px solid #1f604d99;
  background:linear-gradient(180deg,#041914f4,#020c0bf6);
  box-shadow:inset 0 1px 0 #ffffff16,0 0 12px #2ee2a21e;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 26%);
}
.top-status .status-dot{align-self:center}
.top-status b{align-self:center;font-size:clamp(9px,.66vw,14px)}
.top-status small{grid-column:1/3;justify-self:end;line-height:1.05;font-size:clamp(7px,.46vw,10px)}
@media (max-width:900px){
  .topbar{display:block!important;left:2.9%!important;right:2.9%!important;top:.85%!important;height:6.15%!important}
  .brand{left:0!important;top:0!important;width:25%!important;height:100%!important}
  .realm-summary{display:none!important}
  .top-status{display:grid!important;right:.45%!important;top:8%!important;width:10.2%!important;height:78%!important;padding:0 .7vw!important}
}


/* ============================================================
   v2.8 — artwork-as-interface cockpit controls
   Keep the painted cockpit controls visible. Only dynamic values
   and the OP glow are drawn by the live page.
   ============================================================ */

/* The painted upper-right display is left completely untouched. */
.top-status{display:none!important}

/* The lower cockpit art is the control surface. Do not cover the
   painted left or right pods with replacement web panels. */
.control-pod,
.mission-panel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  backdrop-filter:none!important;
}
.control-pod:before,
.control-pod:after,
.mission-panel:before,
.mission-panel:after{display:none!important}

/* Bridge-control pod: transparent hotspots placed over the painted
   OP / Software Lab / About controls. */
.control-pod{
  display:block!important;
  position:relative!important;
  padding:0!important;
  overflow:visible!important;
}
.cockpit-button{
  position:absolute!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  cursor:pointer;
  transform:none!important;
}
.cockpit-button span{opacity:0!important}
.cockpit-button:hover{transform:none!important;filter:none!important}

/* OP: only a live red halo/pulse over the painted red lamp. */
.op-control{
  left:8.5%!important;
  top:45%!important;
  width:34%!important;
  aspect-ratio:1!important;
  border:2px solid #ff536480!important;
  background:radial-gradient(circle at 50% 50%,#ff53641c 0 45%,transparent 70%)!important;
  box-shadow:0 0 0 2px #5c0d1738,0 0 18px #ff344b90,0 0 34px #ff344b50,inset 0 0 18px #ff7d8935!important;
  animation:v28-op-pulse 2.15s ease-in-out infinite!important;
}
@keyframes v28-op-pulse{
  0%,100%{box-shadow:0 0 0 2px #5c0d1738,0 0 15px #ff344b78,0 0 28px #ff344b3d,inset 0 0 14px #ff7d892b}
  50%{box-shadow:0 0 0 3px #ff536477,0 0 26px #ff344bd0,0 0 48px #ff344b72,inset 0 0 23px #ff9ca955}
}

/* These two controls are invisible hit areas; the painted buttons remain
   the only visible control until their tooltip appears. */
.software-control,
.about-control{
  width:24%!important;
  aspect-ratio:1!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.software-control{left:47%!important;top:57%!important}
.about-control{left:72.5%!important;top:57%!important}
.software-control:focus-visible,
.about-control:focus-visible{
  outline:2px solid #64dcff;
  outline-offset:2px;
}

/* Keep tooltips useful without drawing controls over the artwork. */
.cockpit-button:after{
  z-index:20;
  bottom:110%!important;
  background:#020911f4!important;
  border-color:#4e839a!important;
  color:#ecfbff!important;
}

/* Right-side painted network/About MFD is also the live button. */
.mission-panel{
  display:block!important;
  position:relative!important;
  padding:0!important;
  color:transparent!important;
  cursor:pointer!important;
}
.mission-panel>*{visibility:hidden!important}
.mission-panel:hover,
.mission-panel:focus-visible{
  filter:none!important;
  outline:0!important;
}
.mission-panel:focus-visible{
  box-shadow:inset 0 0 0 2px #56dfff99!important;
}

/* Only the real gauges need an opaque replacement because those values
   genuinely change. Leave neighboring painted hardware exposed. */
.instrument-cluster{
  margin:.35% 0 .2%!important;
}

@media (max-width:900px){
  .top-status{display:none!important}
  .control-pod,.mission-panel{background:transparent!important;border:0!important;box-shadow:none!important}
  .op-control{left:8.5%!important;top:45%!important;width:34%!important}
  .software-control{left:47%!important;top:57%!important;width:24%!important}
  .about-control{left:72.5%!important;top:57%!important;width:24%!important}
}

/* ============================================================
   v2.9 — expose painted lower pods + move OP to unused square module
   The cockpit artwork itself is now the left/right control surface.
   Only the center live gauges remain opaque.
   ============================================================ */

/* Let the painted lower cockpit hardware show through completely. */
.console-deck{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.console-deck:before,.console-deck:after{display:none!important}

/* Left/right pods become transparent interaction layers only. */
.control-pod,.mission-panel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  backdrop-filter:none!important;
}

/* Move OP into the unused square equipment bay above the painted round controls. */
.op-control{
  left:12%!important;
  top:17%!important;
  width:34%!important;
  height:38%!important;
  aspect-ratio:auto!important;
  border-radius:9%!important;
  border:2px solid #ff4b5f99!important;
  background:linear-gradient(180deg,#34101688,#13060a77)!important;
  box-shadow:
    0 0 0 2px #4d0c153d,
    0 0 18px #ff304a8a,
    0 0 36px #ff304a50,
    inset 0 0 22px #ff6f7f38!important;
  animation:v29-op-panel-pulse 2.15s ease-in-out infinite!important;
}
.op-control span{
  opacity:1!important;
  color:#fff!important;
  font:800 clamp(12px,.95vw,20px) var(--heading)!important;
  letter-spacing:.12em!important;
  text-shadow:0 0 8px #fff,0 0 14px #ff3e55!important;
}
@keyframes v29-op-panel-pulse{
  0%,100%{box-shadow:0 0 0 2px #4d0c153d,0 0 14px #ff304a70,0 0 28px #ff304a3b,inset 0 0 18px #ff6f7f30}
  50%{box-shadow:0 0 0 3px #ff536477,0 0 26px #ff304acc,0 0 48px #ff304a72,inset 0 0 28px #ff87945c}
}

/* Keep the lower painted blue/yellow buttons as invisible hotspots. */
.software-control{left:43%!important;top:61%!important;width:24%!important}
.about-control{left:69%!important;top:61%!important;width:24%!important}

/* Center live instruments intentionally cover only the painted gauge bank. */
.instrument-cluster{
  background:linear-gradient(180deg,#07131ceb,#02080df5)!important;
  border:1px solid #285a72!important;
  border-top-color:#62dfff88!important;
  box-shadow:inset 0 1px 0 #ffffff18,inset 0 -14px 24px #0009,0 8px 18px #0008!important;
  clip-path:polygon(2% 0,98% 0,100% 10%,100% 100%,0 100%,0 10%)!important;
}

/* Preserve the painted right-side ZuEs Network / About display entirely. */
.mission-panel{
  color:transparent!important;
  cursor:pointer!important;
}
.mission-panel>*{visibility:hidden!important}

@media (max-width:900px){
  .console-deck{background:transparent!important;border:0!important;box-shadow:none!important;clip-path:none!important}
  .op-control{left:12%!important;top:17%!important;width:34%!important;height:38%!important}
  .software-control{left:43%!important;top:61%!important;width:24%!important}
  .about-control{left:69%!important;top:61%!important;width:24%!important}
}


/* ============================================================
   v2.10 — compact instrument bank + clean upper bridge plate
   Keep only the four live gauge modules; remove the oversized
   dark surround so the painted cockpit hardware stays visible.
   ============================================================ */
.instrument-cluster{
  background:transparent!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  padding:0!important;
  margin:0!important;
  gap:1.1%!important;
  align-items:stretch!important;
}
.instrument-cluster:before,
.instrument-cluster:after{display:none!important}
.gauge-card{
  background:linear-gradient(180deg,#07141ee8,#02080df2)!important;
  border:1px solid #245a73!important;
  border-top-color:#55dcff8f!important;
  border-radius:4px!important;
  box-shadow:inset 0 1px 0 #ffffff18,inset 0 -10px 20px #0008,0 7px 14px #0007!important;
  clip-path:polygon(4% 0,96% 0,100% 8%,100% 100%,0 100%,0 8%)!important;
  padding:5.5% 4% 3%!important;
}
@media (max-width:900px){
  .instrument-cluster{padding:0!important;gap:1%!important}
}

/* ============================================================
   v2.11 — artwork-first cockpit cleanup
   - clean top cockpit hardware (no slogan/status/clock overlays)
   - painted lower pods remain visible
   - round painted OP is the real hit target with only a red center LED
   - compact live gauges cover only the four dynamic instrument faces
   ============================================================ */
.deck-frame{
  background:#02070b url('assets/cockpit-shell-v211.webp?v=2.11') center center/100% 100% no-repeat!important;
}

/* The artwork itself is the header.  Keep only a transparent refresh hotspot. */
.topbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  clip-path:none!important;
  padding:0!important;
  pointer-events:none!important;
}
.topbar .brand{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:25%!important;
  height:100%!important;
  opacity:0!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.topbar .realm-summary,
.topbar .top-status{display:none!important}

/* Expose the painted console hardware around the live instruments. */
.console-deck{
  left:3.35%!important;
  right:3.35%!important;
  bottom:1.7%!important;
  height:20.8%!important;
  grid-template-columns:22% 53% 25%!important;
  gap:.8%!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  align-items:stretch!important;
}
.console-deck:before,
.console-deck:after{display:none!important}
.control-pod,
.mission-panel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  backdrop-filter:none!important;
}

/* Painted round OP button is reused.  Only a small live red LED marks it. */
.op-control{
  left:8.2%!important;
  top:39%!important;
  width:34%!important;
  height:auto!important;
  aspect-ratio:1!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  animation:none!important;
  opacity:1!important;
}
.op-control span{display:none!important}
.op-control:before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:8%!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  background:#ff2f3e!important;
  box-shadow:0 0 5px #fff,0 0 11px #ff3045,0 0 20px #ff3045!important;
  animation:v211-op-led 1.9s ease-in-out infinite!important;
}
@keyframes v211-op-led{
  0%,100%{opacity:.72;box-shadow:0 0 4px #fff,0 0 9px #ff3045,0 0 16px #ff3045}
  50%{opacity:1;box-shadow:0 0 6px #fff,0 0 15px #ff3045,0 0 28px #ff3045}
}
.op-control:hover:before,
.op-control:focus-visible:before{transform:translate(-50%,-50%) scale(1.35)!important}

/* Painted blue/yellow controls are interaction zones only. */
.software-control,
.about-control{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}
.software-control{left:43%!important;top:59%!important;width:24%!important;height:30%!important}
.about-control{left:69%!important;top:59%!important;width:24%!important;height:30%!important}

/* Painted right MFD stays visible and is the About / Network hotspot. */
.mission-panel{
  color:transparent!important;
  cursor:pointer!important;
  opacity:0!important;
}
.mission-panel>*{visibility:hidden!important}

/* Only four compact live instrument modules cover the changing painted values. */
.instrument-cluster{
  position:relative!important;
  align-self:end!important;
  height:72%!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:.65%!important;
  padding:0!important;
  margin:0 1.2% 1.4%!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  align-items:stretch!important;
}
.instrument-cluster:before,
.instrument-cluster:after{display:none!important}
.gauge-card{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:43% 1fr!important;
  align-items:center!important;
  gap:2%!important;
  padding:5% 4%!important;
  background:linear-gradient(180deg,#07131de8,#02080df3)!important;
  border:1px solid #235b73!important;
  border-top-color:#4fdfff91!important;
  border-radius:3px!important;
  clip-path:none!important;
  box-shadow:inset 0 1px 0 #ffffff18,inset 0 -10px 20px #0009,0 3px 8px #0007!important;
}
.gauge-card .gauge{
  width:88%!important;
  justify-self:center!important;
}
.gauge-card small{font-size:clamp(7px,.42vw,9px)!important}
.gauge-card strong{font-size:clamp(12px,.72vw,16px)!important}
.gauge-card em{font-size:clamp(6px,.34vw,8px)!important}

@media(max-width:900px){
  .topbar{position:absolute!important;height:6.5%!important}
  .topbar .brand{width:34%!important;height:100%!important}
  .console-deck{position:absolute!important;left:3.35%!important;right:3.35%!important;bottom:1.7%!important;height:20.8%!important;display:grid!important;grid-template-columns:22% 53% 25%!important;margin:0!important;padding:0!important}
  .instrument-cluster{grid-template-columns:repeat(4,1fr)!important;height:72%!important;margin:0 1.2% 1.4%!important}
  .gauge-card{padding:4% 3%!important}
  .op-control{left:8.2%!important;top:39%!important;width:34%!important}
  .software-control{left:43%!important;top:59%!important;width:24%!important;height:30%!important}
  .about-control{left:69%!important;top:59%!important;width:24%!important;height:30%!important}
}

@media(prefers-reduced-motion:reduce){.op-control:before{animation:none!important}}

/* ============================================================
   v2.12 — remove obsolete synthetic cockpit overlay
   The v2.11 shell already contains the complete cockpit artwork.
   The legacy .cockpit-frame layer only darkened the painted lower pods.
   ============================================================ */
.cockpit-frame{
  display:none!important;
}
.control-pod{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  backdrop-filter:none!important;
  filter:none!important;
  opacity:1!important;
}
.control-pod:before,
.control-pod:after{display:none!important}
.mission-panel{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  backdrop-filter:none!important;
  filter:none!important;
  opacity:0!important;
}

/* ============================================================
   v2.13 — expose painted lower side pods completely
   The old deck-frame pseudo panels were still shading the lower-left
   and lower-right cockpit artwork even after the cockpit-frame removal.
   ============================================================ */
.deck-frame:before,
.deck-frame:after{
  display:none!important;
  content:none!important;
}

/* ============================================================
   v2.14 — expose lower cockpit artwork / minimal live gauges
   Remove the legacy global lower vignette that was dimming the painted
   bridge controls and network MFD. Keep only a subtle edge vignette.
   ============================================================ */
.scene-vignette{
  background:radial-gradient(ellipse at 50% 38%,transparent 18%,#0000 68%,#01050a45 100%)!important;
}

/* Side pods are artwork-only interaction surfaces. */
.control-pod,
.mission-panel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}

/* Keep the live instrument bank compact and let painted hardware show around it. */
.instrument-cluster{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.gauge-card{
  background:rgba(2,9,14,.26)!important;
  border:1px solid rgba(67,197,232,.28)!important;
  border-top-color:rgba(99,225,255,.46)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 7px rgba(0,0,0,.32)!important;
  backdrop-filter:none!important;
}

/* ============================================================
   v2.15 — tooltips for painted lower-left hotspots
   Keep the Software Lab / About controls visually transparent,
   but do not use opacity:0 because that also hides ::after tooltips.
   ============================================================ */
.software-control,
.about-control{
  opacity:1!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
}
.software-control span,
.about-control span{display:none!important}
.software-control:after,
.about-control:after{
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  left:50%!important;
  bottom:112%!important;
  transform:translateX(-50%) translateY(4px)!important;
  padding:7px 10px!important;
  border:1px solid #63dfff99!important;
  border-radius:3px!important;
  background:#020a10f2!important;
  color:#effcff!important;
  font:700 clamp(9px,.58vw,12px) var(--heading)!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
  box-shadow:0 6px 18px #000b,0 0 10px #38cfff35!important;
  pointer-events:none!important;
  z-index:50!important;
}
.software-control:hover:after,
.software-control:focus-visible:after,
.about-control:hover:after,
.about-control:focus-visible:after{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0)!important;
}

/* ============================================================
   v2.16 — live instrument replacement bank
   Cover each painted/static gauge cell completely with its live
   counterpart. Keep the surrounding cockpit artwork exposed.
   ============================================================ */
.instrument-cluster{
  height:100%!important;
  margin:0!important;
  padding:0!important;
  gap:.65%!important;
  align-self:stretch!important;
  align-items:stretch!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.gauge-card{
  position:relative!important;
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:48% 52%!important;
  align-items:center!important;
  gap:0!important;
  padding:5.5% 4.5%!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 24% 48%,rgba(10,38,51,.98) 0 31%,transparent 32%),
    linear-gradient(180deg,#071823 0%,#04121b 52%,#020b11 100%)!important;
  border:1px solid #2b7694!important;
  border-top-color:#63dfff!important;
  border-bottom-color:#15465d!important;
  border-radius:0!important;
  clip-path:polygon(6% 0,94% 0,100% 8%,100% 92%,94% 100%,6% 100%,0 92%,0 8%)!important;
  box-shadow:
    inset 0 1px 0 rgba(171,239,255,.18),
    inset 0 -10px 22px rgba(0,0,0,.34),
    inset 0 0 24px rgba(29,176,218,.08),
    0 2px 8px rgba(0,0,0,.4)!important;
}
.gauge-card:before{
  content:""!important;
  position:absolute!important;
  inset:3px!important;
  pointer-events:none!important;
  border:1px solid rgba(71,207,243,.16)!important;
  clip-path:inherit!important;
}
.gauge-card .gauge{
  width:82%!important;
  max-width:none!important;
  justify-self:center!important;
  background:
    repeating-conic-gradient(from -132deg,#91eaff 0 1deg,transparent 1deg 5deg),
    conic-gradient(var(--cyan) calc(var(--pct)*1%),#123345 0)!important;
  border:2px solid #1e7695!important;
  box-shadow:
    0 0 0 5px #06121a,
    0 0 0 7px #1d4d61,
    0 0 17px rgba(49,214,255,.30),
    inset 0 0 14px #000!important;
}
.gauge-card .gauge:before{
  width:68%!important;
  height:68%!important;
  background:radial-gradient(circle at 45% 38%,#0a2430,#020a0f 72%)!important;
  box-shadow:inset 0 0 15px #000,0 0 7px rgba(59,218,255,.13)!important;
}
.gauge-card .gauge span{
  width:3px!important;
  height:29%!important;
  background:linear-gradient(#fff2bd,#ff9d3d 45%,#ff6f2e)!important;
  box-shadow:0 0 6px #ffd28b,0 0 10px #ff8737!important;
}
.gauge-card>div:last-child{
  min-width:0!important;
  align-self:center!important;
  padding-left:3%!important;
}
.gauge-card small{
  color:#b9d8e5!important;
  font-size:clamp(7px,.44vw,10px)!important;
  letter-spacing:.08em!important;
}
.gauge-card strong{
  color:#59e5ff!important;
  font-size:clamp(13px,.83vw,18px)!important;
  line-height:1.05!important;
  margin:5% 0 4%!important;
  text-shadow:0 0 9px rgba(63,219,255,.28)!important;
}
.gauge-card em{
  color:#9cb7c3!important;
  font-size:clamp(6px,.36vw,8px)!important;
}
#memoryGauge strong{font-size:clamp(11px,.68vw,15px)!important}

@media(max-width:900px){
  .instrument-cluster{height:100%!important;margin:0!important;gap:.5%!important}
  .gauge-card{padding:4.5% 3%!important;grid-template-columns:47% 53%!important}
  .gauge-card .gauge{width:78%!important}
}

/* ============================================================
   v2.17 — integrated live instrument pod
   One cockpit panel masks the four baked/static gauges. Individual
   live gauge cells are transparent so the bank reads as one console.
   ============================================================ */
.instrument-cluster{
  position:relative!important;
  height:76%!important;
  align-self:end!important;
  margin:0 1.2% 1.3%!important;
  padding:1.2% 1.25%!important;
  gap:0!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(12,29,40,.98),rgba(3,12,18,.99) 56%,rgba(1,7,11,.99)),
    repeating-linear-gradient(90deg,rgba(81,211,244,.035) 0 1px,transparent 1px 22px)!important;
  border:1px solid #2d6c86!important;
  border-top:2px solid #78e8ff!important;
  border-bottom:2px solid #244d60!important;
  clip-path:polygon(2.2% 0,97.8% 0,100% 10%,100% 90%,97.8% 100%,2.2% 100%,0 90%,0 10%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 10px 24px rgba(49,179,215,.07),
    inset 0 -14px 26px rgba(0,0,0,.42),
    0 8px 18px rgba(0,0,0,.45)!important;
}
.instrument-cluster:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:4px!important;
  pointer-events:none!important;
  border:1px solid rgba(73,210,243,.13)!important;
  clip-path:inherit!important;
}
.instrument-cluster:after{display:none!important;content:none!important}
.gauge-card{
  position:relative!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:46% 54%!important;
  align-items:center!important;
  gap:0!important;
  padding:2.5% 4%!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-right:1px solid rgba(66,134,160,.32)!important;
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
}
.gauge-card:last-child{border-right:0!important}
.gauge-card:before{display:none!important;content:none!important}
.gauge-card .gauge{
  width:72%!important;
  max-width:none!important;
  justify-self:center!important;
  background:
    repeating-conic-gradient(from -132deg,#94edff 0 1deg,transparent 1deg 5deg),
    conic-gradient(var(--cyan) calc(var(--pct)*1%),#113447 0)!important;
  border:2px solid #207895!important;
  box-shadow:
    0 0 0 4px #05121a,
    0 0 0 6px #1d4f62,
    0 0 16px rgba(55,216,255,.34),
    inset 0 0 14px #000!important;
}
.gauge-card .gauge:before{
  width:69%!important;
  height:69%!important;
  background:radial-gradient(circle at 45% 38%,#0b2633,#020a0f 72%)!important;
  box-shadow:inset 0 0 15px #000,0 0 7px rgba(59,218,255,.12)!important;
}
.gauge-card .gauge span{
  width:3px!important;
  height:30%!important;
  background:linear-gradient(#fff0b9,#ff9b3b 46%,#ff6d2b)!important;
  box-shadow:0 0 6px #ffd289,0 0 11px #ff8435!important;
}
.gauge-card>div:last-child{
  min-width:0!important;
  align-self:center!important;
  padding-left:1%!important;
}
.gauge-card small{
  color:#c1dce7!important;
  font-size:clamp(7px,.45vw,10px)!important;
  letter-spacing:.08em!important;
}
.gauge-card strong{
  color:#5ae6ff!important;
  font-size:clamp(13px,.84vw,18px)!important;
  line-height:1.05!important;
  margin:4% 0 3%!important;
  text-shadow:0 0 9px rgba(63,219,255,.28)!important;
}
.gauge-card em{
  color:#99b5c2!important;
  font-size:clamp(6px,.36vw,8px)!important;
}
#memoryGauge strong{font-size:clamp(11px,.69vw,15px)!important}

@media(max-width:900px){
  .instrument-cluster{height:74%!important;margin:0 1% 1.2%!important;padding:1%!important}
  .gauge-card{padding:2% 2.5%!important;grid-template-columns:45% 55%!important}
  .gauge-card .gauge{width:68%!important}
}

/* ============================================================
   v2.19 — artwork-native live gauge faces + indicator LEDs
   Keep the painted cockpit hardware/labels. Mask only the four baked
   circular gauge faces and place the live bands/values in those openings.
   ============================================================ */
.instrument-cluster{
  position:relative!important;
  height:76%!important;
  align-self:end!important;
  margin:0 1.1% 1.2%!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.instrument-cluster:before,
.instrument-cluster:after{display:none!important;content:none!important}

.gauge-card{
  --ring-color:#50ddff;
  position:relative!important;
  min-width:0!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.gauge-card:last-child{--ring-color:#ffac36}
.gauge-card:before{display:none!important;content:none!important}

/* This circle is the surgical mask over the old painted face. */
.gauge-card .gauge{
  position:relative!important;
  width:76%!important;
  max-width:none!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
  align-self:center!important;
  background:
    radial-gradient(circle at 50% 50%,#06131c 0 58%,transparent 59%),
    conic-gradient(from -90deg,var(--ring-color) calc(var(--pct)*1%),#17313d calc(var(--pct)*1%) 100%)!important;
  border:2px solid rgba(78,206,239,.72)!important;
  box-shadow:
    0 0 0 5px #061018,
    0 0 0 7px rgba(53,122,148,.88),
    inset 0 0 18px #000,
    0 0 16px color-mix(in srgb,var(--ring-color) 42%,transparent)!important;
}
.gauge-card:last-child .gauge{border-color:rgba(255,176,66,.8)!important}
.gauge-card .gauge:before{
  content:""!important;
  position:absolute!important;
  inset:14%!important;
  width:auto!important;
  height:auto!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 46% 38%,#0a2633,#02090e 72%)!important;
  box-shadow:inset 0 0 15px #000,0 0 0 1px rgba(73,170,201,.38)!important;
}
/* Level is communicated by the ring fill; no live needle is needed. */
.gauge-card .gauge span{display:none!important}

/* Put only the exact live value in the center of the painted instrument. */
.gauge-card>div:last-child{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  pointer-events:none!important;
  z-index:3!important;
}
.gauge-card small,
.gauge-card em{display:none!important}
.gauge-card strong{
  display:block!important;
  width:auto!important;
  max-width:72%!important;
  margin:0!important;
  padding:0!important;
  color:#69e9ff!important;
  font:700 clamp(10px,.70vw,16px) var(--heading)!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-shadow:0 0 8px rgba(74,224,255,.44)!important;
  transform:translateY(1%)!important;
}
#memoryGauge strong{font-size:clamp(8px,.55vw,13px)!important;letter-spacing:-.035em!important}
#loadGauge strong{color:#ffc65e!important;text-shadow:0 0 8px rgba(255,174,58,.42)!important}

/* Artwork-only cockpit buttons: tiny live LEDs are the only visible overlays. */
.op-control,
.software-control,
.about-control{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
  filter:none!important;
}
.op-control span,
.software-control span,
.about-control span{display:none!important}

.op-control:before,
.software-control:before,
.about-control:before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:9%!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  pointer-events:none!important;
  z-index:20!important;
}
.op-control:before{
  background:#50ff78!important;
  box-shadow:0 0 5px #eaffef,0 0 12px #50ff78,0 0 23px #18d94a!important;
  animation:v218-op-led 1.7s ease-in-out infinite!important;
}
.software-control:before{
  background:#55e8ff!important;
  box-shadow:0 0 5px #ecfdff,0 0 12px #55e8ff,0 0 23px #17bcd8!important;
  animation:v218-software-led 2.1s ease-in-out infinite!important;
}
.about-control:before{
  background:#d86bff!important;
  box-shadow:0 0 5px #fff0ff,0 0 12px #d86bff,0 0 23px #a530d6!important;
  animation:v218-about-led 2.45s ease-in-out infinite!important;
}
@keyframes v218-op-led{0%,100%{opacity:.62;transform:translate(-50%,-50%) scale(.82)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes v218-software-led{0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.78)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}}
@keyframes v218-about-led{0%,100%{opacity:.56;transform:translate(-50%,-50%) scale(.78)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}

@media(max-width:900px){
  .instrument-cluster{height:76%!important;margin:0 1.1% 1.2%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .gauge-card .gauge{width:74%!important}
  .gauge-card strong{font-size:clamp(7px,1.25vw,12px)!important}
  #memoryGauge strong{font-size:clamp(6px,1vw,10px)!important}
}
@media(prefers-reduced-motion:reduce){
  .op-control:before,.software-control:before,.about-control:before{animation:none!important;opacity:1!important}
}

/* ============================================================
   v2.19 — final gauge-face masking + cockpit indicator alignment
   Mask the full painted circular instrument face, then draw only the
   live ring/value inside that opening. Recenter and strengthen the
   three bridge-control indicator LEDs.
   ============================================================ */
.instrument-cluster{
  height:76%!important;
  margin:0 1.1% 1.2%!important;
  padding:0!important;
  gap:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.gauge-card{
  position:relative!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
/* Full circular mask over each baked/static gauge face. */
.gauge-card::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:53%!important;
  width:86%!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 48% 42%,#0b1a22 0 55%,#061119 72%,#02080d 100%)!important;
  box-shadow:
    inset 0 0 22px #000,
    0 0 0 2px rgba(36,89,109,.85),
    0 0 0 5px rgba(2,10,15,.96)!important;
  z-index:1!important;
  pointer-events:none!important;
}
.gauge-card .gauge{
  width:80%!important;
  left:auto!important;
  top:auto!important;
  z-index:2!important;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 61%,#06131c 62% 64%,transparent 65%),
    conic-gradient(from -90deg,var(--ring-color) calc(var(--pct)*1%),rgba(29,65,80,.62) calc(var(--pct)*1%) 100%)!important;
  border:1px solid rgba(102,224,255,.72)!important;
  box-shadow:
    0 0 0 2px rgba(6,20,29,.95),
    0 0 0 4px rgba(42,107,131,.72),
    inset 0 0 14px rgba(0,0,0,.88),
    0 0 14px color-mix(in srgb,var(--ring-color) 44%,transparent)!important;
}
.gauge-card .gauge:before{
  inset:22%!important;
  background:radial-gradient(circle at 46% 38%,#0a202b,#02080d 73%)!important;
  box-shadow:inset 0 0 13px #000,0 0 0 1px rgba(70,174,207,.38)!important;
}
.gauge-card>div:last-child{z-index:4!important}
.gauge-card strong{
  font-size:clamp(11px,.74vw,17px)!important;
  max-width:68%!important;
}
#memoryGauge strong{font-size:clamp(8px,.56vw,13px)!important}

/* Re-anchor invisible cockpit hotspots on the painted round controls. */
.op-control{
  left:8.0%!important;
  top:40.5%!important;
  width:34%!important;
}
.software-control{
  left:45.0%!important;
  top:61.5%!important;
  width:22%!important;
  height:28%!important;
}
.about-control{
  left:70.5%!important;
  top:61.5%!important;
  width:22%!important;
  height:28%!important;
}
.op-control:before,
.software-control:before,
.about-control:before{
  left:50%!important;
  top:50%!important;
  width:16%!important;
  min-width:8px!important;
  max-width:15px!important;
  border:1px solid rgba(255,255,255,.78)!important;
}
.op-control:before{
  background:#55ff73!important;
  box-shadow:0 0 6px #fff,0 0 16px #55ff73,0 0 30px #11d849!important;
  animation:v219-op-led 1.25s ease-in-out infinite!important;
}
.software-control:before{
  background:#39dcff!important;
  box-shadow:0 0 6px #fff,0 0 16px #39dcff,0 0 30px #009ee8!important;
  animation:v219-software-led 1.45s ease-in-out infinite!important;
}
.about-control:before{
  background:#e97aff!important;
  box-shadow:0 0 6px #fff,0 0 16px #e97aff,0 0 30px #b735ed!important;
  animation:v219-about-led 1.65s ease-in-out infinite!important;
}
@keyframes v219-op-led{
  0%,100%{opacity:.38;transform:translate(-50%,-50%) scale(.68)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}
}
@keyframes v219-software-led{
  0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.66)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.32)}
}
@keyframes v219-about-led{
  0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.66)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.32)}
}
@media(max-width:900px){
  .gauge-card::after{width:88%!important;top:53%!important}
  .gauge-card .gauge{width:81%!important}
  .software-control{left:45%!important;top:61.5%!important;width:22%!important;height:28%!important}
  .about-control{left:70.5%!important;top:61.5%!important;width:22%!important;height:28%!important}
}
@media(prefers-reduced-motion:reduce){
  .op-control:before,.software-control:before,.about-control:before{animation:none!important;opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
}


/* ============================================================
   v2.20 — precise painted-gauge replacement + real cockpit LEDs
   The v2.19 masks were much larger than the painted instrument faces.
   These dimensions cover only the existing circular gauge art and put
   the live ring/value directly in that opening. Button indicators are
   real child LEDs so legacy pseudo-element rules cannot move them.
   ============================================================ */
.gauge-card::after{
  left:50%!important;
  top:53%!important;
  width:65%!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 48% 42%,#08161e 0 58%,#041018 76%,#01070b 100%)!important;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.96),
    0 0 0 2px rgba(32,83,102,.92),
    0 0 8px rgba(0,0,0,.7)!important;
  z-index:1!important;
}
.gauge-card .gauge{
  width:58%!important;
  aspect-ratio:1!important;
  z-index:2!important;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 61%,#06131c 62% 65%,transparent 66%),
    conic-gradient(from -90deg,var(--ring-color) calc(var(--pct)*1%),rgba(27,62,76,.68) calc(var(--pct)*1%) 100%)!important;
  border:1px solid rgba(105,229,255,.76)!important;
  box-shadow:
    0 0 0 2px rgba(4,15,22,.96),
    0 0 0 3px rgba(48,121,146,.72),
    inset 0 0 12px rgba(0,0,0,.9),
    0 0 12px color-mix(in srgb,var(--ring-color) 48%,transparent)!important;
}
.gauge-card .gauge:before{
  inset:25%!important;
  background:radial-gradient(circle at 44% 38%,#0b202a,#02080c 75%)!important;
}
.gauge-card>div:last-child{z-index:4!important}
.gauge-card strong{
  font-size:clamp(10px,.68vw,15px)!important;
  max-width:56%!important;
}
#memoryGauge strong{font-size:clamp(7px,.50vw,12px)!important}

/* Disable all old pseudo LEDs; v2.20 uses a real .control-led element. */
.op-control:before,
.software-control:before,
.about-control:before{display:none!important;content:none!important;animation:none!important}

/* Re-anchor the painted-button hit zones to the actual three controls. */
.op-control{left:8%!important;top:40%!important;width:34%!important;height:45%!important}
.software-control{left:36%!important;top:58%!important;width:20%!important;height:29%!important}
.about-control{left:62%!important;top:58%!important;width:20%!important;height:29%!important}

.control-led{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:12px!important;
  height:12px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  pointer-events:none!important;
  z-index:30!important;
  transform:translate(-50%,-50%) scale(.7);
  border:1px solid rgba(255,255,255,.9)!important;
}
.op-control .control-led{
  background:#55ff73!important;
  box-shadow:0 0 6px #fff,0 0 14px #55ff73,0 0 28px #18dc4d!important;
  animation:v220-op-led 1.15s ease-in-out infinite!important;
}
.software-control .control-led{
  background:#44e8ff!important;
  box-shadow:0 0 6px #fff,0 0 14px #44e8ff,0 0 28px #00bfe9!important;
  animation:v220-soft-led 1.35s ease-in-out infinite!important;
}
.about-control .control-led{
  background:#ee70ff!important;
  box-shadow:0 0 6px #fff,0 0 14px #ee70ff,0 0 28px #bd36ef!important;
  animation:v220-about-led 1.55s ease-in-out infinite!important;
}
@keyframes v220-op-led{
  0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.55);filter:brightness(.8)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.45);filter:brightness(1.5)}
}
@keyframes v220-soft-led{
  0%,100%{opacity:.24;transform:translate(-50%,-50%) scale(.52);filter:brightness(.8)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.4);filter:brightness(1.5)}
}
@keyframes v220-about-led{
  0%,100%{opacity:.24;transform:translate(-50%,-50%) scale(.52);filter:brightness(.8)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.4);filter:brightness(1.5)}
}
@media(max-width:900px){
  .gauge-card::after{width:66%!important;top:53%!important}
  .gauge-card .gauge{width:59%!important}
  .software-control{left:36%!important;top:58%!important;width:20%!important;height:29%!important}
  .about-control{left:62%!important;top:58%!important;width:20%!important;height:29%!important}
}
@media(prefers-reduced-motion:reduce){
  .control-led{animation:none!important;opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
}

/* ============================================================
   v2.21 — transparent artwork-native gauge rings
   No large circular masks. The live conic ring overlays only the
   painted gauge band; a small center value plate hides stale center
   text while leaving the cockpit instrument housing visible.
   ============================================================ */
.gauge-card::after{
  display:none!important;
  content:none!important;
}
.gauge-card .gauge{
  width:58%!important;
  aspect-ratio:1!important;
  background:conic-gradient(from -90deg,var(--ring-color) calc(var(--pct)*1%),rgba(18,54,68,.78) calc(var(--pct)*1%) 100%)!important;
  border:0!important;
  box-shadow:
    0 0 0 1px rgba(95,217,244,.45),
    0 0 10px color-mix(in srgb,var(--ring-color) 38%,transparent)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px));
}
.gauge-card .gauge:before{
  display:none!important;
  content:none!important;
}
.gauge-card>div:last-child{
  z-index:5!important;
}
.gauge-card strong{
  position:relative!important;
  z-index:6!important;
  min-width:34%!important;
  max-width:58%!important;
  padding:.36em .52em!important;
  border-radius:999px!important;
  background:rgba(2,10,15,.88)!important;
  border:1px solid rgba(52,145,174,.34)!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.72),0 0 8px rgba(39,201,239,.12)!important;
}
#memoryGauge strong{min-width:52%!important;max-width:72%!important}
#loadGauge strong{border-color:rgba(255,174,58,.36)!important;box-shadow:inset 0 0 10px rgba(0,0,0,.72),0 0 8px rgba(255,174,58,.12)!important}

/* Final cockpit LED placement: centered over the painted controls. */
.op-control{left:7.7%!important;top:40.5%!important;width:34%!important;height:45%!important}
.software-control{left:35.4%!important;top:58.5%!important;width:20%!important;height:29%!important}
.about-control{left:59.8%!important;top:58.5%!important;width:20%!important;height:29%!important}
.control-led{
  width:10px!important;
  height:10px!important;
}
.op-control .control-led{animation:v221-op-led 1.05s ease-in-out infinite!important}
.software-control .control-led{animation:v221-soft-led 1.25s ease-in-out infinite!important}
.about-control .control-led{animation:v221-about-led 1.45s ease-in-out infinite!important}
@keyframes v221-op-led{
  0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.55)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.55)}
}
@keyframes v221-soft-led{
  0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.55)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}
}
@keyframes v221-about-led{
  0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.55)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}
}
@media(max-width:900px){
  .gauge-card .gauge{width:59%!important}
  .control-led{width:8px!important;height:8px!important}
}

/* ============================================================
   v2.22 — real clean instrument bays + live gauges only
   The cockpit shell itself has the four baked/static gauges removed.
   Live gauges are now the only instruments in those four bays.
   ============================================================ */
.deck-frame{
  background:#02070b url('assets/cockpit-shell-v222.webp?v=2.22') center center/100% 100% no-repeat!important;
}

.instrument-cluster{
  position:relative!important;
  height:76%!important;
  align-self:end!important;
  margin:0 1.1% 1.2%!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.instrument-cluster:before,
.instrument-cluster:after{display:none!important;content:none!important}

.gauge-card{
  --ring-color:#52e4ff;
  position:relative!important;
  min-width:0!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.gauge-card:last-child{--ring-color:#ffb13f}
.gauge-card:before,
.gauge-card:after{display:none!important;content:none!important}

.gauge-card .gauge{
  position:relative!important;
  width:68%!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:conic-gradient(from -90deg,var(--ring-color) calc(var(--pct)*1%),rgba(26,64,80,.56) calc(var(--pct)*1%) 100%)!important;
  border:1px solid rgba(93,221,250,.74)!important;
  box-shadow:
    0 0 0 2px rgba(2,12,18,.88),
    0 0 0 4px rgba(35,100,124,.52),
    inset 0 0 16px rgba(0,0,0,.78),
    0 0 14px color-mix(in srgb,var(--ring-color) 42%,transparent)!important;
  -webkit-mask:none!important;
  mask:none!important;
  z-index:2!important;
}
.gauge-card .gauge:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:18%!important;
  width:auto!important;
  height:auto!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 45% 38%,#0b2530,#02090e 74%)!important;
  box-shadow:inset 0 0 16px #000,0 0 0 1px rgba(63,169,202,.34)!important;
}
.gauge-card .gauge span{display:none!important}

.gauge-card>div:last-child{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  pointer-events:none!important;
  z-index:4!important;
}
.gauge-card small{
  display:block!important;
  position:absolute!important;
  top:7%!important;
  left:0!important;
  right:0!important;
  color:#9bc1d2!important;
  font:700 clamp(6px,.38vw,8px) var(--heading)!important;
  letter-spacing:.1em!important;
  text-align:center!important;
}
.gauge-card strong{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  min-width:0!important;
  max-width:78%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#6deaff!important;
  font:700 clamp(11px,.76vw,17px) var(--heading)!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 0 9px rgba(74,224,255,.48)!important;
}
#memoryGauge strong{font-size:clamp(8px,.55vw,13px)!important;letter-spacing:-.035em!important}
#loadGauge strong{color:#ffc35a!important;text-shadow:0 0 9px rgba(255,176,55,.48)!important}
.gauge-card em{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:7%!important;
  color:#829ead!important;
  font:700 clamp(5px,.32vw,7px) var(--heading)!important;
  font-style:normal!important;
  letter-spacing:.08em!important;
  text-align:center!important;
}

/* Keep the painted cockpit controls as the visuals; only LEDs are live. */
.op-control,
.software-control,
.about-control{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
  filter:none!important;
}
.op-control span,
.software-control span,
.about-control span{display:none!important}
.op-control:before,.software-control:before,.about-control:before,
.op-control:after,.software-control:after,.about-control:after{display:none!important;content:none!important}
.control-led{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  z-index:30!important;
  transform:translate(-50%,-50%) scale(.65)!important;
  border:1px solid rgba(255,255,255,.88)!important;
}
.op-control .control-led{
  background:#52ff73!important;
  box-shadow:0 0 6px #fff,0 0 14px #52ff73,0 0 28px #18db4d!important;
  animation:v222-op-led 1.08s ease-in-out infinite!important;
}
.software-control .control-led{
  background:#45eaff!important;
  box-shadow:0 0 6px #fff,0 0 14px #45eaff,0 0 28px #00bfe9!important;
  animation:v222-soft-led 1.28s ease-in-out infinite!important;
}
.about-control .control-led{
  background:#ef73ff!important;
  box-shadow:0 0 6px #fff,0 0 14px #ef73ff,0 0 28px #bd36ef!important;
  animation:v222-about-led 1.48s ease-in-out infinite!important;
}
@keyframes v222-op-led{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.55)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes v222-soft-led{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.55)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes v222-about-led{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.55)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}}

@media(max-width:900px){
  .instrument-cluster{height:76%!important;margin:0 1.1% 1.2%!important}
  .gauge-card .gauge{width:68%!important}
  .gauge-card strong{font-size:clamp(7px,1.18vw,12px)!important}
  #memoryGauge strong{font-size:clamp(6px,.98vw,10px)!important}
  .control-led{width:8px!important;height:8px!important}
}
@media(prefers-reduced-motion:reduce){
  .control-led{animation:none!important;opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
}

/* ============================================================
   v2.23 — seamless instrument surface + fixed cockpit LEDs
   ============================================================ */
.deck-frame{
  background:#02070b url('assets/cockpit-shell-v223.webp?v=2.23') center center/100% 100% no-repeat!important;
}

/* No gauge cards/boxes: only the live circular instruments and text. */
.instrument-cluster{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  padding:0!important;
  gap:0!important;
  margin:0 1.1% 1.2%!important;
  height:76%!important;
  overflow:visible!important;
}
.instrument-cluster:before,
.instrument-cluster:after{display:none!important;content:none!important}
.gauge-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  overflow:visible!important;
  padding:0!important;
}
.gauge-card:before,
.gauge-card:after{display:none!important;content:none!important}
.gauge-card .gauge{
  width:58%!important;
  max-width:none!important;
  background:conic-gradient(from -90deg,var(--ring-color,#52e4ff) calc(var(--pct)*1%),rgba(24,61,76,.34) calc(var(--pct)*1%) 100%)!important;
  border:1px solid rgba(93,221,250,.76)!important;
  box-shadow:0 0 0 2px rgba(3,13,19,.72),0 0 10px color-mix(in srgb,var(--ring-color,#52e4ff) 32%,transparent)!important;
}
.gauge-card:last-child .gauge{border-color:rgba(255,177,63,.8)!important}
.gauge-card .gauge:before{
  inset:22%!important;
  background:radial-gradient(circle at 45% 38%,rgba(11,37,48,.92),rgba(2,9,14,.96) 74%)!important;
  box-shadow:inset 0 0 12px #000,0 0 0 1px rgba(63,169,202,.28)!important;
}
.gauge-card small{top:6%!important}
.gauge-card strong{top:50%!important;max-width:76%!important}
.gauge-card em{bottom:6%!important}

/* Old nested LEDs are disabled; the pod-level LEDs have fixed coordinates. */
.control-led{display:none!important}
.control-pod{position:relative!important}
.pod-led{
  position:absolute!important;
  width:12px!important;
  height:12px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  z-index:40!important;
  border:1px solid rgba(255,255,255,.92)!important;
  transform:translate(-50%,-50%) scale(.68)!important;
}
.pod-led-op{
  left:25%!important; top:63%!important;
  background:#55ff73!important;
  box-shadow:0 0 7px #fff,0 0 16px #55ff73,0 0 30px #1ed950!important;
  animation:v223-led-green 1.1s ease-in-out infinite!important;
}
.pod-led-software{
  left:51%!important; top:73%!important;
  background:#46efff!important;
  box-shadow:0 0 7px #fff,0 0 16px #46efff,0 0 30px #00bfe9!important;
  animation:v223-led-cyan 1.3s ease-in-out infinite!important;
}
.pod-led-about{
  left:74%!important; top:73%!important;
  background:#f06cff!important;
  box-shadow:0 0 7px #fff,0 0 16px #f06cff,0 0 30px #bd36ef!important;
  animation:v223-led-violet 1.5s ease-in-out infinite!important;
}
@keyframes v223-led-green{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.62)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.34)}}
@keyframes v223-led-cyan{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.62)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.32)}}
@keyframes v223-led-violet{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.62)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.32)}}
@media(max-width:900px){
  .gauge-card .gauge{width:58%!important}
  .pod-led{width:9px!important;height:9px!important}
}
@media(prefers-reduced-motion:reduce){
  .pod-led{animation:none!important;opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
}

/* ============================================================
   v2.24 — clean native instrument bays + live gauges only
   The cockpit shell now contains four empty framed instrument bays.
   Live gauges sit directly in those original cockpit frames.
   ============================================================ */
.deck-frame{
  background:#02070b url('assets/cockpit-shell-v224.webp?v=2.24') center center/100% 100% no-repeat!important;
}

.instrument-cluster{
  position:relative!important;
  height:76%!important;
  align-self:end!important;
  margin:0 1.1% 1.2%!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.instrument-cluster:before,
.instrument-cluster:after{display:none!important;content:none!important}

.gauge-card{
  --ring-color:#4fe6ff;
  position:relative!important;
  height:100%!important;
  min-width:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.gauge-card:last-child{--ring-color:#ffb23f}
.gauge-card:before,
.gauge-card:after{display:none!important;content:none!important}

.gauge-card .gauge{
  position:relative!important;
  width:62%!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:conic-gradient(from -90deg,
    var(--ring-color) calc(var(--pct)*1%),
    rgba(30,69,84,.42) calc(var(--pct)*1%) 100%)!important;
  border:1px solid rgba(95,224,252,.72)!important;
  box-shadow:
    0 0 0 2px rgba(4,16,23,.88),
    0 0 0 4px rgba(35,101,126,.52),
    inset 0 0 15px rgba(0,0,0,.9),
    0 0 14px color-mix(in srgb,var(--ring-color) 42%,transparent)!important;
  -webkit-mask:none!important;
  mask:none!important;
  z-index:2!important;
}
.gauge-card:last-child .gauge{border-color:rgba(255,181,70,.8)!important}
.gauge-card .gauge:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:18%!important;
  width:auto!important;
  height:auto!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 45% 38%,#0a2632,#02090e 74%)!important;
  box-shadow:inset 0 0 15px #000,0 0 0 1px rgba(69,178,211,.32)!important;
}
.gauge-card .gauge span{display:none!important}

.gauge-card>div:last-child{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  pointer-events:none!important;
  z-index:4!important;
}
.gauge-card small{
  display:block!important;
  position:absolute!important;
  top:9%!important;
  left:0!important;
  right:0!important;
  color:#9bbdcb!important;
  font:700 clamp(6px,.38vw,8px) var(--heading)!important;
  letter-spacing:.12em!important;
  text-align:center!important;
  text-shadow:0 1px 3px #000!important;
}
.gauge-card strong{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:51%!important;
  transform:translate(-50%,-50%)!important;
  min-width:0!important;
  max-width:72%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#69eaff!important;
  font:700 clamp(12px,.78vw,18px) var(--heading)!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 0 9px rgba(74,224,255,.48)!important;
}
#memoryGauge strong{font-size:clamp(8px,.55vw,13px)!important;letter-spacing:-.03em!important}
#loadGauge strong{color:#ffc35a!important;text-shadow:0 0 9px rgba(255,176,55,.48)!important}
.gauge-card em{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:9%!important;
  color:#829ead!important;
  font:700 clamp(5px,.32vw,7px) var(--heading)!important;
  font-style:normal!important;
  letter-spacing:.1em!important;
  text-align:center!important;
  text-shadow:0 1px 3px #000!important;
}

/* v2.23 bridge LEDs were correct; keep them unchanged. */
.control-led{display:none!important}
.control-pod{position:relative!important}
.pod-led{display:block!important}

@media(max-width:900px){
  .instrument-cluster{height:76%!important;margin:0 1.1% 1.2%!important}
  .gauge-card .gauge{width:62%!important}
  .gauge-card strong{font-size:clamp(8px,1.18vw,12px)!important}
  #memoryGauge strong{font-size:clamp(6px,.98vw,10px)!important}
}

/* ============================================================
   v2.27 — final instrument alignment + remnant cleanup
   The v2.27 shell removes the last baked cyan gauge fragments.
   All four live gauges share the same geometry; no legacy Load icon.
   ============================================================ */
.deck-frame{
  background:#02070b url('assets/cockpit-shell-v225.webp?v=2.27') center center/100% 100% no-repeat!important;
}
.instrument-cluster{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  padding:0!important;
  gap:0!important;
  overflow:visible!important;
}
.instrument-cluster:before,.instrument-cluster:after{
  display:none!important;content:none!important;
}
.gauge-card{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-right:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  overflow:visible!important;
}
.gauge-card:before,.gauge-card:after{
  display:none!important;content:none!important;
}
.gauge-card .gauge{
  --ring-color:#4fe6ff;
  position:absolute!important;
  left:50%!important;
  top:48%!important;
  transform:translate(-50%,-50%)!important;
  width:66%!important;
  height:auto!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:conic-gradient(from -90deg,
    var(--ring-color) calc(var(--pct)*1%),
    rgba(20,58,74,.34) calc(var(--pct)*1%) 100%)!important;
  border:1px solid rgba(92,223,252,.72)!important;
  box-shadow:0 0 0 2px rgba(4,15,22,.9),0 0 0 4px rgba(36,96,119,.52),inset 0 0 14px #000,0 0 13px rgba(70,224,255,.26)!important;
  -webkit-mask:none!important;
  mask:none!important;
}
#loadGauge .gauge{--ring-color:#ffb23f!important;border-color:rgba(255,183,74,.82)!important;box-shadow:0 0 0 2px rgba(4,15,22,.9),0 0 0 4px rgba(120,82,30,.52),inset 0 0 14px #000,0 0 13px rgba(255,178,63,.26)!important}
.gauge-card .gauge:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:18%!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 46% 40%,#0a2632,#02090e 74%)!important;
  box-shadow:inset 0 0 15px #000,0 0 0 1px rgba(69,178,211,.30)!important;
}
.gauge-card .gauge:after,
.pulse-gauge:after{
  display:none!important;content:none!important;
}
.gauge-card .gauge span{display:none!important}
.gauge-card>div:last-child{
  position:absolute!important;inset:0!important;display:block!important;pointer-events:none!important;z-index:4!important;
}
.gauge-card small{
  position:absolute!important;top:7%!important;left:0!important;right:0!important;
  text-align:center!important;color:#9bbdcb!important;font:700 clamp(6px,.38vw,8px) var(--heading)!important;letter-spacing:.12em!important;
}
.gauge-card strong{
  position:absolute!important;left:50%!important;top:48%!important;transform:translate(-50%,-50%)!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
  color:#69eaff!important;font:700 clamp(12px,.78vw,18px) var(--heading)!important;line-height:1!important;text-align:center!important;white-space:nowrap!important;
  text-shadow:0 0 9px rgba(74,224,255,.48)!important;z-index:5!important;
}
#memoryGauge strong{font-size:clamp(8px,.55vw,13px)!important;letter-spacing:-.03em!important}
#loadGauge strong{color:#ffc35a!important;font-size:clamp(12px,.78vw,18px)!important;letter-spacing:0!important;text-shadow:0 0 9px rgba(255,176,55,.48)!important}
.gauge-card em{
  position:absolute!important;left:0!important;right:0!important;bottom:7%!important;text-align:center!important;
  color:#829ead!important;font:700 clamp(5px,.32vw,7px) var(--heading)!important;font-style:normal!important;letter-spacing:.1em!important;
}
@media(max-width:900px){
  .gauge-card .gauge{width:66%!important;top:48%!important}
  .gauge-card strong{top:48%!important;font-size:clamp(8px,1.18vw,12px)!important}
  #memoryGauge strong{font-size:clamp(6px,.98vw,10px)!important}
}

/* ============================================================
   v2.27 — gauge positioning / readability polish
   Keep v2.27 gauge size, move bank left/down, enlarge text,
   and normalize the Load slot geometry with the other three.
   ============================================================ */
.instrument-cluster{
  transform:translate(-5.2%,2.6%)!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.gauge-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
#loadGauge{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
}
.gauge-card .gauge{
  top:51%!important;
}
.gauge-card strong{
  top:51%!important;
  font-size:clamp(17px,1.02vw,25px)!important;
  line-height:1!important;
}
#memoryGauge strong{
  font-size:clamp(13px,.80vw,19px)!important;
  letter-spacing:-.02em!important;
}
#loadGauge strong{
  font-size:clamp(17px,1.02vw,25px)!important;
}
.gauge-card small{
  top:5%!important;
  font-size:clamp(8px,.50vw,11px)!important;
}
.gauge-card em{
  bottom:4.5%!important;
  font-size:clamp(7px,.42vw,9px)!important;
}
@media(max-width:900px){
  .instrument-cluster{transform:translate(-4.4%,2.2%)!important}
  .gauge-card .gauge{top:51%!important}
  .gauge-card strong{top:51%!important;font-size:clamp(10px,1.55vw,15px)!important}
  #memoryGauge strong{font-size:clamp(8px,1.22vw,12px)!important}
}


/* ============================================================
   v2.27 — final gauge-bay width + load normalization polish
   Keep current gauge diameter/vertical placement. Tighten each
   visible instrument slot on the right, especially LOAD.
   ============================================================ */
.instrument-cluster{
  width:96.2%!important;
  margin-left:0!important;
  margin-right:auto!important;
  transform:translate(-5.2%,2.6%)!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:0!important;
}
.gauge-card{
  width:94%!important;
  justify-self:start!important;
  overflow:visible!important;
}
.gauge-card:last-child{
  width:88%!important;
}
.gauge-card small{
  font-size:clamp(9px,.56vw,12px)!important;
}
.gauge-card strong{
  font-size:clamp(18px,1.08vw,27px)!important;
}
#memoryGauge strong{
  font-size:clamp(14px,.84vw,21px)!important;
}
#loadGauge strong{
  font-size:clamp(18px,1.08vw,27px)!important;
}
.gauge-card em{
  font-size:clamp(8px,.47vw,10px)!important;
}
@media(max-width:900px){
  .instrument-cluster{width:98%!important;transform:translate(-4.4%,2.2%)!important}
  .gauge-card{width:96%!important}
  .gauge-card:last-child{width:92%!important}
}

/* ============================================================
   v2.28 — fix bay widths without moving the live gauges
   Restore v2.26 gauge geometry. Shorten only the visible painted
   bay on its right side with cockpit-metal separator masks.
   ============================================================ */
.instrument-cluster{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:translate(-5.2%,2.6%)!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:0!important;
}
.gauge-card,
.gauge-card:last-child{
  width:100%!important;
  justify-self:stretch!important;
  overflow:visible!important;
}
/* Keep all four gauges exactly where v2.26 placed them. */
.gauge-card .gauge{
  left:50%!important;
  top:51%!important;
}
.gauge-card strong{
  left:50%!important;
  top:51%!important;
}

/* Visually shorten only the painted instrument bay to the right.
   This mask is cockpit hardware, not a gauge/card background. */
.gauge-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:2.5%!important;
  right:-.5%!important;
  bottom:2.5%!important;
  width:10.5%!important;
  border-radius:2px!important;
  background:
    linear-gradient(90deg,
      rgba(7,17,23,.12) 0%,
      rgba(12,26,34,.96) 24%,
      rgba(6,14,20,.99) 72%,
      rgba(2,7,11,1) 100%)!important;
  border-left:1px solid rgba(71,157,189,.22)!important;
  box-shadow:
    inset 2px 0 0 rgba(0,0,0,.48),
    -1px 0 6px rgba(29,114,145,.08)!important;
  pointer-events:none!important;
  z-index:1!important;
}
.gauge-card:last-child::after{
  width:18%!important;
}
.gauge-card .gauge{z-index:3!important}
.gauge-card>div:last-child{z-index:4!important}

@media(max-width:900px){
  .instrument-cluster{width:100%!important;transform:translate(-4.4%,2.2%)!important}
  .gauge-card,.gauge-card:last-child{width:100%!important}
  .gauge-card::after{width:9.5%!important}
  .gauge-card:last-child::after{width:16%!important}
}

/* ============================================================
   v2.30 — physical instrument-bay trim
   Gauge positions/sizes stay exactly as v2.29. The cockpit shell
   itself now has shorter right edges for all four instrument bays.
   ============================================================ */
.deck-frame{
  background:#02070b url('assets/cockpit-shell-v230.webp?v=2.30') center center/100% 100% no-repeat!important;
}
/* v2.28/v2.29 trim masks are no longer needed; the artwork is fixed. */
.gauge-card::after,
.gauge-card:last-child::after{
  display:none!important;
  content:none!important;
}

/* ============================================================
   v2.33 — restore pre-v2.31 mobile behavior, keep tooltips
   Mobile/desktop-site override from v2.31 removed because normal
   Android layout already worked and the override broke the phone view.
   ============================================================ */
.op-control::after,
.software-control::after,
.about-control::after{
  content:attr(data-tip)!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:auto!important;
  bottom:112%!important;
  width:auto!important;
  height:auto!important;
  transform:translateX(-50%) translateY(4px)!important;
  padding:7px 10px!important;
  border:1px solid rgba(99,223,255,.62)!important;
  border-radius:3px!important;
  background:rgba(2,10,16,.96)!important;
  color:#effcff!important;
  font:700 clamp(9px,.58vw,12px) var(--heading)!important;
  letter-spacing:.08em!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  box-shadow:0 6px 18px rgba(0,0,0,.72),0 0 10px rgba(56,207,255,.21)!important;
  z-index:120!important;
}
.op-control:hover::after,
.op-control:focus-visible::after,
.software-control:hover::after,
.software-control:focus-visible::after,
.about-control:hover::after,
.about-control:focus-visible::after{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0)!important;
}
@media (hover:none), (pointer:coarse){
  .op-control::after,
  .software-control::after,
  .about-control::after{display:none!important}
}

/* v2.34 — 7 Days to Die card accent only; no layout changes. */
.theme-7days{--card-line:#b55f32}

.join-password{display:flex;align-items:center;gap:10px;margin:11px 0 0;color:#8ba8b8}.join-password small{font:700 8px var(--heading);letter-spacing:.15em}.join-password strong{font:700 11px var(--heading);letter-spacing:.08em;color:#ffd17c}