/* ===== Menu console, after the 2006 original: riveted metal frame, tab bar, green data panels =====
   --brushed (metal) and --data (scrolling green text) are canvas tiles generated at startup. */
:root{--brushed:linear-gradient(#9aa0a2,#9aa0a2);--data:linear-gradient(transparent,transparent);--g-hi:#3cf03c;--g-link:#41e436;--g-txt:#e6ece6;
  --f-tab:'Orbitron','Russo One','Arial Black',sans-serif;--f-ui:Verdana,Tahoma,'DejaVu Sans',Arial,sans-serif;
  --steelbar:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 32%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.42));
  --screw:radial-gradient(circle at 50% 50%,transparent 0 2px,transparent 2px),linear-gradient(45deg,transparent 44%,#3a3f41 44% 58%,transparent 58%),radial-gradient(circle at 35% 32%,#f6f7f7,#a3a8aa 45%,#50565a 78%,#2b2f31 80%)}
#ui{position:fixed;inset:0;display:flex;flex-direction:column;font-family:var(--f-ui);color:var(--g-txt)}
/* The console around the pages is built from Krea renders in the style of the LOADOUT wrist computer and the alliance
   tablet (assets/console/: tools/gen_console.sh, tools/prep_console.py), all drawn as border images: the header bar the
   tabs and the status display sit in, the button rim every tab and console button shares (its face is painted here so
   it can light up green), the BATTLE button, the window frame around the pages and the bottom bar with the nameplate. */
#cTop{flex:none;position:relative;background:#101211;padding:calc(4px + env(safe-area-inset-top,0px)) max(4px,env(safe-area-inset-right,0px)) 2px max(4px,env(safe-area-inset-left,0px))}
.cpTop::before,.cpTop::after{content:'';position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--screw);box-shadow:0 0 0 1px #24282a,0 1px 1px rgba(255,255,255,.5)}
.cpTop::before{left:12px}.cpTop::after{right:12px}
#rail{position:relative;height:56px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 4px;
  border:solid transparent;border-width:0 57px;border-image:url(../assets/console/bar.webp) 0 115 fill / 0 57px / 0 round stretch;border-image-repeat:round stretch}
#tabs{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px;touch-action:pan-x}
#tabs::-webkit-scrollbar{display:none}
/* one rim for every button: the tab's (18 15 14 15 px of the image around its face), drawn at half size */
.tab,#topLcd,#cbPlate,#ui .mbtn{border:solid transparent;border-width:9px 7.5px 7px;border-image:url(../assets/console/tab.webp) 18 15 14 15 stretch;border-radius:12px;background:#3f3936 padding-box}
.tab{flex:1 0 auto;min-width:84px;height:38px;box-sizing:border-box;padding:0 5px;font:700 11px var(--f-tab);letter-spacing:1px;color:#c9cfb8;text-shadow:0 1px 1px #000;cursor:pointer}
.tab:hover,.tab:focus-visible{color:#e9f5d9;background-color:#4a4440;outline:none}
.tab.on{color:#0d2a0b;text-shadow:0 1px 0 rgba(255,255,255,.35);background:radial-gradient(ellipse at 50% 50%,#b6e3a0 0%,#86ac7c 55%,#6d826c 100%) padding-box}
/* the BATTLE button: its own render, shown whole, its green face lit; it stays in view when the tabs have to scroll. On
   the face, under the glowing letters, the LOADOUT screen's CRT effect (css/pip.css): scanlines, the rolling band and the flicker */
#tabs .tab.battle{position:sticky;right:0;z-index:1;flex:0 0 auto;width:118px;height:40px;border:0;border-radius:0;padding:0 0 1px;background:url(../assets/console/go.webp) center/100% 100% no-repeat;color:#7cfd5e;text-shadow:0 0 6px rgba(124,253,94,.75),0 0 14px rgba(124,253,94,.25);letter-spacing:2px}
.tab.battle::after{content:'';position:absolute;z-index:-1;inset:20% 7.6% 22.5%;border-radius:3px;pointer-events:none;box-shadow:inset 0 0 2px rgba(124,253,94,.18);
  background:linear-gradient(180deg,transparent 0,rgba(124,253,94,.08) 48%,transparent 52%) 0 -120%/100% 240% no-repeat,repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px);
  animation:pipRoll 7s linear infinite,pipFlick 4s infinite steps(1)}
.tab.battle:hover,.tab.battle:focus-visible{color:#a8ff92;filter:brightness(1.12)}
.tab.battle:disabled{filter:grayscale(.7) brightness(.8);cursor:default}
#railTxt{display:none;flex:1;text-align:center;font:700 12px var(--f-tab);letter-spacing:4px;color:#c9cfb8;text-shadow:0 1px 1px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ui.notabs #tabs{display:none}#ui.notabs #railTxt{display:block}
/* the status display (pilots online, music, log out) at the right end of the bar: a lit green screen in the same rim */
#topLcd{flex:none;height:36px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 10px;font:12px var(--f-lcd);color:var(--lcd);text-shadow:0 0 6px rgba(134,242,106,.55);background:#0b170b padding-box;pointer-events:auto}
#cMid{flex:1;min-height:0;display:flex;padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
.cSide{display:none}
/* the window the pages are shown in (its rim 41 45 41 43 px of the image), drawn at half size; see-through, since the
   title and mech select pages show the 3D hangar behind it */
#cBody{flex:1;min-width:0;position:relative;overflow:hidden;background:transparent;border:solid transparent;border-width:20.5px 22.5px 20.5px 21.5px;border-image:url(../assets/console/frame.webp) 41 45 41 43 round}
#cBody::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 18px rgba(0,0,0,.8)}
/* the bottom: the header bar again, thinner, with the nameplate in the middle and the small print under it */
#cBot{flex:none;position:relative;height:calc(58px + env(safe-area-inset-bottom,0px));background:#101211;display:flex;flex-direction:column;align-items:center}
#cBot::before{content:'';position:absolute;left:max(4px,env(safe-area-inset-left,0px));right:max(4px,env(safe-area-inset-right,0px));top:7px;height:28px;box-sizing:border-box;
  border:solid transparent;border-width:0 29px;border-image:url(../assets/console/bar.webp) 0 115 fill / 0 29px / 0 round stretch;border-image-repeat:round stretch}
#cbPlate{position:relative;margin-top:1px;height:36px;box-sizing:border-box;padding:0 26px;display:flex;align-items:center;font:900 13px var(--f-tab);letter-spacing:4px;color:#c9cfb8;text-shadow:0 1px 1px #000}
#cBot .foot{position:relative;margin-top:2px;max-width:100%;text-align:center;font:10px var(--f-ui);color:#7d8486;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}
#cBot .foot a{color:#9aa2a4}#cBot .foot a:hover{color:var(--lcd)}
#topLcd b{font-weight:normal;color:#d8ffd0}
/* music and log out: phosphor pictograms (assets/console/i_*.png, black screened away) on the status display */
.sndBtn,.outBtn{display:flex;align-items:center;padding:0;border:0;background:none;cursor:pointer}
.sndBtn img,.outBtn img{width:18px;height:18px;display:block;mix-blend-mode:screen}
.sndBtn:hover img,.outBtn:hover img{filter:brightness(1.35)}
.page{position:absolute;inset:0;overflow:auto;display:none;touch-action:pan-y;-webkit-overflow-scrolling:touch}
*,*::before,*::after{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none}
.page.on{display:block}
.page.v3d.on{display:flex;flex-direction:column}
.green{background:var(--data) 0 0/512px 512px,radial-gradient(ellipse 85% 70% at 50% 30%,#67875f,#4a6646 60%,#38503a);animation:dscroll 90s linear infinite}
@keyframes dscroll{from{background-position:0 0,0 0}to{background-position:0 -512px,0 0}}

/* building blocks */
.pin{max-width:1080px;margin:0 auto;padding:16px 20px 28px}
.pin.narrow{max-width:660px}
.sh{position:relative;margin:18px 0 10px;padding:4px 12px;font:bold 13px var(--f-ui);color:#fff;background:linear-gradient(180deg,rgba(5,20,5,.94),rgba(14,38,14,.94));border:2px solid var(--g-hi);border-right-width:0;box-shadow:0 0 8px rgba(60,240,60,.3),inset 0 0 8px rgba(60,240,60,.12)}
.sh:first-child{margin-top:0}
.sh small{float:right;font-weight:normal;font-size:11px;color:#9fd79a;line-height:18px}
.lnk{color:var(--g-link);cursor:pointer;text-decoration:none;background:none;border:0;font:inherit;padding:0}
.lnk:hover{text-decoration:underline;color:#8dff7a}
.lnk.off{color:#869486;cursor:not-allowed;text-decoration:none}
.gbox{background:rgba(26,38,26,.86);border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.06)}
.mbtn{pointer-events:auto;cursor:pointer;font:700 12px var(--f-tab);letter-spacing:1px;color:#1d2122;padding:8px 18px;border:1px solid #16191a;border-radius:3px;line-height:1.25;
  background:linear-gradient(180deg,#e6e8e8 0%,#bec2c3 45%,#9ea3a4 55%,#c6c9ca 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.25),0 2px 3px rgba(0,0,0,.55);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.mbtn:hover,.mbtn:focus-visible{color:#0d5f0d;filter:brightness(1.06);outline:none}
.mbtn:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.mbtn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1);transform:none}
.mbtn.sm{font-size:10px;padding:5px 9px;letter-spacing:.5px}
.mbtn.big{font-size:14px;padding:10px 22px}
/* the console's buttons share the tabs' rim (above): a dark face with pale lettering, red or lit green where they say so */
#ui .mbtn{color:#d6dcc6;text-shadow:0 1px 1px #000;padding:4px 14px;box-shadow:none;line-height:1.25}
#ui .mbtn:hover,#ui .mbtn:focus-visible{color:#fff;background-color:#4a4440;filter:none}
#ui .mbtn:active{transform:translateY(1px);box-shadow:none}
#ui .mbtn.sm{padding:1px 8px;border-width:6px 5px 5px;border-radius:9px}
#ui .mbtn.big{padding:6px 20px}
#ui .mbtn.red,#ui .mbtn.confirm{color:#ffe1d8;background-color:#7c2a1e}#ui .mbtn.red:hover{background-color:#913325}
#ui .mbtn.on{color:#0d2a0b;text-shadow:0 1px 0 rgba(255,255,255,.35);background:radial-gradient(ellipse at 50% 50%,#b6e3a0 0%,#86ac7c 55%,#6d826c 100%) padding-box}
.lcdbox{min-width:118px;padding:3px 10px 4px;background:#0b170b;border:2px solid #2b3133;border-radius:3px;box-shadow:inset 0 0 10px #000,0 0 0 1px #6d7477;color:var(--lcd);font-family:var(--f-lcd);text-shadow:0 0 6px rgba(134,242,106,.55)}
.lcdbox small{display:block;font-size:9px;color:#5fae4c;letter-spacing:1px}
.lcdbox b{font-weight:normal;font-size:17px;font-variant-numeric:tabular-nums}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.bul{list-style:none;padding:10px 14px;font-size:12px;line-height:1.75}
.bul li:before{content:'+ ';color:var(--g-hi)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{font:700 10px var(--f-tab);letter-spacing:1px;color:#9fd79a;text-align:left;padding:7px 8px;border-bottom:1px solid #2f8f2f}
.tbl td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.07);color:#e6ece6}
.ico{width:14px;height:14px;vertical-align:-2px;margin-right:3px;filter:drop-shadow(0 0 2px rgba(0,0,0,.8))}
#topLcd .ico{width:12px;height:12px;margin:0 3px 0 6px}
.lcdbox small .ico{width:11px;height:11px;vertical-align:-1px}
#gCr::before,#gSp::before,#gSc::before{content:'';display:inline-block;width:18px;height:18px;margin-right:4px;vertical-align:1px;background:url(../assets/items/icon_cr.png) center/contain no-repeat}
#gSp::before,#gSc::before{width:15px;height:15px;background-image:url(../assets/items/icon_rp.png)}
#gSc::before{background-image:url(../assets/items/icon_scrap.png)}
.rkb{width:32px;height:16px;vertical-align:-3px;margin-right:4px}
.rkProg{display:flex;align-items:center;gap:6px}.rkProg .lgProg{flex:1;margin:2px 0}.rkProg .rkb{width:48px;height:24px;margin:0}
.tbl tr.me td{color:#6dff5a;background:rgba(60,240,60,.12)}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.note{font-size:11px;color:#a9c3a5;line-height:1.6}