/* OldOrbit's own look for the site (loaded after site.css and shop2016.css).
   Identity: deep navy glass, a thin amber "orbit" accent with its small satellite dot, cyan light, chamfered corners, Oxanium headings and Rajdhani text.
   Nothing here changes markup, ids or behaviour; it only replaces the 2016 client's pictures and type. */
@font-face { font-family: 'Oxanium'; src: url('/fonts/Oxanium-var.woff2?v=1') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/fonts/Rajdhani-Medium.woff2?v=1') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/fonts/Rajdhani-SemiBold.woff2?v=1') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('/fonts/Rajdhani-Bold.woff2?v=1') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #04070d;
  --panel: rgba(9, 15, 25, .93);
  --panel-2: #0e1827;
  --line: #1f3347;
  --line-hi: #38597a;
  --txt: #bccbdb;
  --txt-dim: #7c92aa;
  --white: #f0f6fc;
  --cyan: #43d3ff;
  --gold: #ffb23e;
  --amber: #ffb23e;
  --amber-2: #ff8a1f;
  --font: 'Rajdhani', 'Trebuchet MS', sans-serif;
  --font-hea: 'Oxanium', 'Rajdhani', sans-serif;
  --font-con: 'Oxanium', 'Rajdhani', sans-serif;
  --cham: 8px;
}

body {
  font: 500 14.5px/1.4 var(--font); letter-spacing: .15px;
  background: #04070d url('/assets/oo_site/oo_bg.jpg?v=1') center top / cover no-repeat fixed;
}
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(4, 7, 13, 0) 0, rgba(4, 7, 13, .55) 100%), linear-gradient(180deg, rgba(4, 7, 13, .35), rgba(4, 7, 13, .1) 40%, rgba(4, 7, 13, .5)); }
body[data-company="MMO"], body[data-company="EIC"], body[data-company="VRU"] { background: #04070d url('/assets/oo_site/oo_bg.jpg?v=1') center top / cover no-repeat fixed; }
/* each company lights the sky in its own colour */
body[data-company="MMO"]::after, body[data-company="EIC"]::after, body[data-company="VRU"]::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .55; }
body[data-company="MMO"]::after { background: radial-gradient(ellipse at 20% 85%, rgba(255, 70, 40, .55), transparent 55%), radial-gradient(ellipse at 90% 80%, rgba(255, 150, 40, .35), transparent 50%); }
body[data-company="EIC"]::after { background: radial-gradient(ellipse at 20% 85%, rgba(50, 130, 255, .55), transparent 55%), radial-gradient(ellipse at 90% 80%, rgba(80, 200, 255, .3), transparent 50%); }
body[data-company="VRU"]::after { background: radial-gradient(ellipse at 20% 85%, rgba(60, 220, 120, .5), transparent 55%), radial-gradient(ellipse at 90% 80%, rgba(220, 220, 60, .3), transparent 50%); }
b, strong { font-weight: 700; }
input, select, textarea, button { font-family: var(--font); }

/* ---- logo: our wordmark, a thin orbit around the emblem ---- */
.oo-logo { font: italic 700 34px/1 var(--font-hea); letter-spacing: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #cfe6f7 42%, #6fa2c8 52%, #e7f4ff 74%, #8fb6d4 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #040810) drop-shadow(0 0 16px rgba(67, 211, 255, .35)); }
.oo-logo b { font-weight: 700; background: linear-gradient(180deg, #fff6df 0%, #ffd27a 45%, #ff9c2a 55%, #ffe3a6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- panels: glass with a notched corner and an amber tick ---- */
.panel { background: linear-gradient(180deg, rgba(14, 24, 39, .94), rgba(7, 12, 20, .95)); border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(120, 190, 255, .07); position: relative; }
.panel::after { content: ''; position: absolute; right: -1px; top: -1px; width: 14px; height: 14px; pointer-events: none;
  background: linear-gradient(225deg, var(--amber) 0 2px, transparent 2px) , linear-gradient(225deg, transparent 0 50%, rgba(255, 178, 62, .18) 50%); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.panel-head { min-height: 30px; font: 700 12.5px var(--font-hea); letter-spacing: 1.6px; text-transform: uppercase; color: #eaf4ff;
  background: linear-gradient(90deg, rgba(34, 58, 86, .9) 0%, rgba(14, 24, 38, .9) 62%, rgba(10, 16, 26, .9) 100%); border-bottom: 1px solid #02050a;
  box-shadow: inset 0 1px 0 rgba(150, 210, 255, .1); }
.panel-head::before { left: 7px; top: 9px; width: 3px; height: 12px; background: var(--amber); box-shadow: 0 0 8px rgba(255, 178, 62, .8); }
.ph-tab { font: 600 12px var(--font); border-color: #28425b; background: #0b1420; }
.ph-tab.active, .ph-tab:hover { border-color: var(--amber); background: #16222f; color: #fff; }
.ph-right { font: 600 12px var(--font); }

/* ---- buttons ---- */
.btn-metal { font: 700 12.5px var(--font-hea); letter-spacing: 1px; text-transform: uppercase; border-radius: 0; border: 1px solid #4a6a8a;
  background: linear-gradient(180deg, #2b4560 0%, #172636 55%, #101b27 100%); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  box-shadow: inset 0 1px 0 rgba(160, 215, 255, .18); }
.btn-metal:hover { border-color: var(--amber); color: #fff; box-shadow: inset 0 0 12px rgba(255, 178, 62, .22); }
.btn-metal.green { background: linear-gradient(180deg, #ffcf6d 0%, #ff9c2a 52%, #d56d0c 100%); border-color: #ffd98c; color: #2a1500; text-shadow: 0 1px 0 rgba(255, 235, 190, .5); }
.btn-metal.green:hover { filter: brightness(1.08); box-shadow: 0 0 14px rgba(255, 150, 40, .5); color: #1a0d00; }
.btn-metal.red { background: linear-gradient(180deg, #ff6a5a, #b8321f 55%, #7e1e10); border-color: #ff9a8a; }
a.btn-start, .btn-start { font: 800 22px var(--font-hea); letter-spacing: 2px; }

/* ---- header: our own plate (assets/oo_site/oo_header.svg) instead of the 2016 sprites ---- */
.hdr { background: url('/assets/oo_site/oo_header.svg?v=10') no-repeat 0 0; font-family: var(--font); }
.hdr button, .hdr a { font-family: var(--font-hea); }
.hdr-topbar { font: 700 10.5px var(--font); letter-spacing: .6px; color: #7d98b3; }
.ht-item b { color: #cfe3f5; }
.ht-pilot b { font-size: 11.5px; color: #fff; }
.ht-ico.lvl, .ht-ico.exp, .ht-ico.hnr { background: var(--amber); }
.ht-ico.lvl { background: linear-gradient(0deg, #ffb23e 0 30%, transparent 30% 40%, #ffc563 40% 65%, transparent 65% 75%, #ffd896 75%); }
.hdr-logo .oo-logo { font-size: 44px; }

.hico { background: center / 22px 22px no-repeat; width: 34px; height: 22px; opacity: .9; transition: opacity .12s, transform .12s; }
.hico:hover { opacity: 1; transform: translateY(-1px); filter: drop-shadow(0 0 5px rgba(67, 211, 255, .75)); }
.ico-home { background-image: url('/assets/oo_site/hi_home.svg?v=2'); } .ico-server { background-image: url('/assets/oo_site/hi_server.svg?v=2'); }
.ico-account { background-image: url('/assets/oo_site/hi_user.svg?v=2'); } .ico-help { background-image: url('/assets/oo_site/hi_help.svg?v=2'); }
.ico-logout { background-image: url('/assets/oo_site/hi_logout.svg?v=2'); }
/* the website's sound switch (site.js): header icon, landing header and the phone drawer */
.ico-sound { background: url('/assets/oo_site/hi_sound.svg?v=1') center / 22px 22px no-repeat; }
.ico-sound.off { background-image: url('/assets/oo_site/hi_mute.svg?v=1'); opacity: .6; }
.ld-sound { flex: none; width: 34px; height: 30px; margin-left: 14px; padding: 0; border: 0; cursor: pointer; opacity: .85; }
.ld-sound:hover { opacity: 1; filter: drop-shadow(0 0 5px rgba(67, 211, 255, .75)); }
.ico-home:hover, .ico-server:hover, .ico-account:hover, .ico-help:hover, .ico-logout:hover,
.ico-home:active, .ico-server:active, .ico-account:active, .ico-help:active, .ico-logout:active { background-position: center; }
.hmail { background: url('/assets/oo_site/hi_mail.svg?v=2') center / 22px 22px no-repeat; width: 26px; height: 22px; top: 18px; opacity: .9; }
.hmail:hover { background-position: center; opacity: 1; filter: drop-shadow(0 0 5px rgba(67, 211, 255, .75)); }
.hmail.has-new { background-position: center; animation: mailPulse 1.2s ease-in-out infinite; }
.hmail.has-new:hover { animation: none; background-position: center; }
@keyframes mailPulse { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 178, 62, .4)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 178, 62, 1)); } }
.hadmin { font: 800 10px var(--font-hea); border-color: var(--amber); color: #ffd98c; background: linear-gradient(180deg, #4a3210, #20150a); }

/* nav buttons: chamfered glass keys; the sprite is gone, the label is ours */
.hbtn { background: none !important; color: #e4f0fb; font: 700 12px/13px var(--font-hea); letter-spacing: 1px; text-transform: uppercase; padding: 0 6px; isolation: isolate; display: flex; align-items: center; justify-content: center; text-align: center;
  text-shadow: 0 1px 2px #000; transition: color .12s, transform .12s; }
.hbtn::before, .hbtn::after { content: ''; position: absolute; z-index: -1; }
.hbtn::before { inset: 0; background: linear-gradient(180deg, #5a86ad, #28425c); }
.hbtn::after { inset: 1px; background: linear-gradient(180deg, rgba(34, 58, 86, .96) 0%, rgba(14, 24, 38, .97) 55%, rgba(9, 16, 27, .98) 100%); }
.hbtn.l::before, .hbtn.l::after { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.hbtn.r::before, .hbtn.r::after { clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.hbtn.l.std::after, .hbtn.r.std::after { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.hbtn.r.std::after { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.hbtn:hover { color: #fff; transform: translateY(-1px); }
.hbtn:hover::before { background: linear-gradient(180deg, #ffd27a, #ff9c2a); }
.hbtn:active { transform: translateY(0); }
.hbtn.active { color: #1d1000; }
.hbtn.active::before { background: linear-gradient(180deg, #ffe0a0, #ffa93d); }
.hbtn.active::after { background: linear-gradient(180deg, #ffc863 0%, #ff9c2a 55%, #e07410 100%); }
.hbtn.r.std.upsell { color: #ffe3a6; }
.hbtn.r.std.upsell::before { background: linear-gradient(180deg, #ffd27a, #c9741a); }
.hbtn.uri { color: #bff0ff; }
.hbtn.uri::before { background: linear-gradient(180deg, #7be0ff, #1f7fa8); }
.hbtn.big { font-size: 12.5px; }
.nav-sub { font-family: var(--font-hea); }

.hdr-start { background: none !important; font: 800 21px var(--font-hea); letter-spacing: 3px; color: #2a1500; text-shadow: 0 1px 0 rgba(255, 238, 200, .6); isolation: isolate; padding: 0; }
.hdr-start::before, .hdr-start::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.hdr-start::before { inset: 0; background: linear-gradient(180deg, #fff1c8, #ff9c2a); }
.hdr-start::after { inset: 2px; background: linear-gradient(180deg, #ffd470 0%, #ffa42f 52%, #e27a10 100%); box-shadow: inset 0 0 18px rgba(255, 255, 255, .25); }
.hdr-start:hover::after { background: linear-gradient(180deg, #ffe08c 0%, #ffb64a 52%, #f28a1a 100%); }
.hdr-start { filter: drop-shadow(0 0 14px rgba(255, 150, 40, .45)); }
.hdr-start:active { transform: translateY(1px); }
.hdr-premium { background: none; font: 800 9px var(--font-hea); letter-spacing: 3px; color: var(--amber); text-align: center; line-height: 16px; }
.hdr-premium::before { content: 'PREMIUM'; }
.hdr-ticker { font: 600 11px var(--font); color: #cfe3f5; }
.hdr-money { font: 700 12px/15px var(--font-hea); letter-spacing: .5px; text-align: center; }
.hdr-money.cred { color: #ffd98c; } .hdr-money.uri { color: #8fe3ff; }

/* ---- shop (OldOrbit's own scheme: amber selection) ---- */
.bp-shop-card.selected { border-color: var(--amber); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1px var(--amber), 0 0 12px rgba(255, 178, 62, .35); }
.shop-cat { font: 700 11px var(--font-hea); letter-spacing: .2px; }
.shop-cat.active { color: #1d1000; text-shadow: 0 1px 0 rgba(255, 240, 210, .5); background: linear-gradient(180deg, #ffe0a0 0%, #ffb23e 45%, #f08a14 55%, #ffd27a 100%); box-shadow: inset 0 1px 0 #fff3d6, 0 0 14px rgba(255, 150, 40, .5); }
.shop-cat.active small { background: rgba(26, 14, 0, .75); color: #ffd98c; }
.shop-cat.active::before { border-color: rgba(255, 245, 220, .85); }
.sd-title b { font-family: var(--font-hea); font-weight: 800; }
.sb-name { font-family: var(--font-hea); }

/* ---- tables, inputs, scrollbars ---- */
.data-table th { font: 700 12px var(--font-hea); letter-spacing: .8px; text-transform: uppercase; }
input, select, textarea { border-radius: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber) !important; box-shadow: 0 0 0 1px rgba(255, 178, 62, .35); }
* { scrollbar-width: thin; scrollbar-color: #2a4560 #070c14; }
::selection { background: rgba(255, 178, 62, .35); color: #fff; }
.site-foot, .ld-foot { font: 600 12px var(--font); text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.site-foot a, .legal-links a { color: #a9c6e2; }

/* landing */
.ld-pitch h1 { font: 800 44px/1.05 var(--font-hea); letter-spacing: .5px; }
.ld-points b { color: var(--amber); }
.ld-register .panel-head { font-size: 13px; }

@media (max-width: 760px) { body { background-attachment: scroll; } }

/* ---- room to breathe: the pages stretch with the window (the 2016 pages were 1000 px wide) ---- */
@media (min-width: 1100px) {
  .frame { width: min(1420px, calc(100% - 48px)); padding-bottom: 48px; }
  .content { margin-top: 12px; }
  .panel-body { padding: 16px 18px; }
  .panel-head { min-height: 34px; font-size: 13px; padding-left: 20px; }
  .panel-head::before { top: 11px; height: 12px; }
  .home-grid { grid-template-columns: 460px minmax(0, 1fr); gap: 14px; }
  .news { min-height: 360px; }
  .hangar-overview { grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; }
  .ship-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 620px; }
  .equip { grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; }
  .equip-body { grid-template-columns: 300px minmax(0, 1fr); min-height: 560px; }
  .inv-grid { grid-template-columns: repeat(6, 52px); gap: 6px; padding: 12px; max-height: 420px; }
  .bp-slot { width: 52px; height: 52px; }
  .bp-slot img { width: 44px; height: 44px; }
  .shop { grid-template-columns: 200px 330px minmax(0, 1fr) 200px; gap: 14px; }
  .shop-main .shop-grid { gap: 8px; padding: 10px 12px 12px; }
  .shop-main .panel-body { height: 470px; }
  .sd-show { height: 420px; }
  .sd-box { padding: 12px 14px; min-height: 100px; }
  .pilot { grid-template-columns: 300px minmax(0, 1fr); gap: 14px; }
  .skylab { gap: 14px; }
  .premium-grid, .premium-lower { gap: 14px; }
  .clan-grid { gap: 14px; }
  .gates { gap: 14px; }
  .data-table th, .data-table td { padding: 9px 12px; }
  .cal-row { padding: 10px 0; }
  .lic-stats { gap: 6px 14px; font-size: 13.5px; }
  .site-foot { margin-top: 26px; }
  .ps-body { gap: 18px; }
}
@media (min-width: 1500px) {
  .frame { width: min(1560px, calc(100% - 80px)); }
  .home-grid { grid-template-columns: 500px minmax(0, 1fr); }
  .shop { grid-template-columns: 210px 360px minmax(0, 1fr) 210px; }
}

/* company emblems (round badges): the small ones sit in text and tables */
img[src*="/logo_"][src*="_mini.png"], img[src*="/companies/label_"] { width: auto; height: 16px; vertical-align: -3px; }
.ht-pilot .is-company { height: 15px; max-height: 15px; }
.lic-row img#lic-company-img { height: 16px; }
.cc-card img, .cc-card > img { width: 54px; height: 54px; object-fit: contain; }
.company-card .cc-name { font-family: var(--font-hea); font-weight: 800; letter-spacing: 1px; }

/* ---- header at 1412 x 230 (the width of the page stays, the height is 15 % lower than it was at 1200 x 230): every part has its own roomy slot (the plate is oo_header.svg) ---- */
.hdr-wrap { width: calc(1412px * var(--hs)); height: calc(230px * var(--hs)); }
.hdr { width: 1412px; height: 230px; }
.hdr-topbar { left: 34px; right: 34px; height: 19px; font-size: 11px; }
.ht-item { top: 1px; height: 17px; padding: 0 6px; }
.ht-id { left: 12px; width: 168px; }
.ht-level { left: 184px; width: 124px; }
.ht-pilot { left: 422px; width: 468px; top: 0; height: 19px; gap: 8px; }
.ht-pilot b { font-size: 12.5px; }
.ht-pilot img { max-height: 15px; }
.ht-exp { left: 1034px; width: 150px; }
.ht-hnr { left: 1192px; width: 150px; }
.ht-item b { overflow: visible; text-overflow: clip; }
.ico-home { left: 52px !important; } .ico-server { left: 92px !important; } .hmail { left: 134px !important; }
.hadmin { left: 1174px !important; top: 26px !important; height: 18px; padding: 0 6px; line-height: 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }      /* the icons' middle line (top 24 + 11) */
.ico-sound { left: 1222px !important; } .ico-account { left: 1262px !important; } .ico-help { left: 1302px !important; } .ico-logout { left: 1342px !important; }
.hico, .hmail { top: 24px; }
.hdr-logo { left: 546px; top: 20px; width: 320px; height: 108px; z-index: 6; }      /* centred on the header's axis (x = 706) */
.hdr-logo .oo-logo { font-size: 42px; }
/* nav buttons 25 % smaller (190x36 / 190x58 -> 143x27 / 143x44), kept centred on their old spot by the margins */
.hbtn { width: 143px !important; font-size: 10px; letter-spacing: .8px; margin-left: 24px; }
.hbtn.std { height: 27px; margin-top: 4px; } .hbtn.big { height: 44px; margin-top: 7px; font-size: 9.5px; line-height: 11px; }
.hbtn.l::before, .hbtn.l::after, .hbtn.r::before, .hbtn.r::after { --c: 7px; }
.hbtn[data-tab="hangar"] { left: 40px !important; top: 66px !important; }
.hbtn[data-tab="klan"], .hbtn[data-tab="clan"] { left: 52px !important; top: 100px !important; }
.hbtn[data-tab="vouchers"] { left: 64px !important; top: 134px !important; }
.hbtn[data-tab="skylab"] { left: 323px !important; top: 100px !important; }
.hbtn[data-tab="pilot"] { left: 337px !important; top: 134px !important; }
.hbtn[data-tab="download"] { left: 1182px !important; top: 66px !important; }
.hbtn[data-tab="shop"] { left: 1170px !important; top: 100px !important; }
.hbtn[data-tab="auction"] { left: 1158px !important; top: 134px !important; }
.hbtn[data-tab="premium"] { left: 899px !important; top: 100px !important; }
.hbtn[data-tab="gates"] { left: 885px !important; top: 134px !important; }
.hdr-start { left: 586px; top: 134px; width: 240px; height: 52px; }
.hdr-premium { left: 646px; top: 187px; width: 120px; }
.nav-sub { left: 526px; }
.hdr-ticker { left: 52px; top: 207px; width: 960px; font-size: 12px; }
.hdr-money { top: 206px; width: 140px; font-size: 13px; }
.hdr-money.cred { left: 1039px; } .hdr-money.uri { left: 1213px; }

/* ================= Skylab: OldOrbit glass window and our own station picture ================= */
.sky-ui { border: 1px solid rgba(84, 134, 190, .5); border-radius: 0; background: linear-gradient(180deg, rgba(15, 27, 44, .96), rgba(8, 14, 24, .97));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(130, 190, 255, .1); }
.sky-ui::before { content: ''; position: absolute; right: -1px; top: -1px; width: 22px; height: 22px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); pointer-events: none; z-index: 2; }
.sky-titlebar { height: 34px; background: linear-gradient(90deg, rgba(36, 66, 100, .9), rgba(14, 26, 42, .6) 72%, transparent); border-bottom: 1px solid rgba(0, 0, 0, .55); }
.sky-titlebar span { font: 700 14px var(--font-hea); letter-spacing: 2.2px; color: #eaf5ff; }
.sky-tbtn { height: 24px; border: 1px solid #4a6a8a; border-radius: 0; background: linear-gradient(180deg, #2b4560, #14212f); color: #eaf5ff; font: 700 10px var(--font-hea); letter-spacing: .8px;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.sky-tbtn:hover { filter: none; border-color: var(--amber); box-shadow: inset 0 0 10px rgba(255, 178, 62, .25); }
.sky-refresh { border-radius: 0; border-color: #4a6a8a; }
.sky-orebox { background: rgba(5, 10, 18, .82); border: 1px solid rgba(84, 134, 190, .35); }
.sky-orebox b { font: 700 11px var(--font-hea); letter-spacing: .3px; }
.sky-cap { background: #14212f; }
.sky-cap div { background: linear-gradient(180deg, #7fd8ff, #2a86b8); }
.sky-scene { background: #000 url('/assets/oo_site/oo_skylab2.jpg?v=1') center / 100% 100% no-repeat; border: 1px solid rgba(84, 134, 190, .4); }
.sky-lbl { padding: 2px 8px 3px 7px; border: 0; border-left: 2px solid rgba(67, 211, 255, .75); background: linear-gradient(90deg, rgba(6, 12, 22, .74), rgba(6, 12, 22, .22)); }
.sky-lbl b { font: 700 12.5px var(--font-hea); letter-spacing: .3px; }
.sky-lbl:hover { border-left-color: #fff; background: linear-gradient(90deg, rgba(10, 30, 50, .85), rgba(10, 30, 50, .3)); }
.sky-lbl.sel { border-left-color: var(--amber); background: linear-gradient(90deg, rgba(48, 32, 6, .85), rgba(30, 20, 4, .3)); }
.sky-lbl.locked { border-left-color: rgba(120, 140, 160, .5); }
.sky-lbl .en { color: #ffcf6a; }

/* ================= Galaxy gates: OldOrbit glass panels instead of the 2016 metal frames (same layout and ids) ================= */
.ggx { background: radial-gradient(120% 90% at 50% 0%, rgba(24, 44, 70, .55), transparent 60%), linear-gradient(180deg, #0c1727, #060b14); border: 1px solid rgba(84, 134, 190, .5);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(130, 190, 255, .1); }
.ggx::before { content: ''; position: absolute; right: -1px; top: -1px; width: 24px; height: 24px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); pointer-events: none; z-index: 4; }
.ggx::after { content: ''; position: absolute; left: -1px; bottom: -1px; width: 18px; height: 18px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); pointer-events: none; z-index: 4; }
.ggx-selbtn { height: 29px; padding: 0 14px 0 16px; background: linear-gradient(180deg, rgba(34, 58, 86, .92), rgba(14, 24, 38, .95)) !important; color: #c9dbec;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); box-shadow: inset 0 0 0 1px rgba(84, 134, 190, .45); position: relative; }
.ggx-selbtn::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: rgba(67, 211, 255, .55); }
.ggx-selbtn b { font: 700 12px var(--font-hea); letter-spacing: 1.4px; }
.ggx-selbtn small { font: 600 10px var(--font); color: #8fb3d3; }
.ggx-selbtn:hover { background: linear-gradient(180deg, rgba(44, 76, 112, .95), rgba(18, 32, 50, .95)) !important; color: #fff; }
.ggx-selbtn:hover::before { background: #fff; }
.ggx-selbtn.active { background: linear-gradient(180deg, #ffc863 0%, #ff9c2a 55%, #e07410 100%) !important; color: #1d1000; box-shadow: 0 0 14px rgba(255, 150, 40, .35); }
.ggx-selbtn.active::before { background: #fff3d1; }
.ggx-selbtn.active small { color: #4a2a05; }
.ggx-selbtn.ready:not(.active) b { color: #8fe9a8; }
.ggx-sep { height: 8px; margin: -2px 0 -2px; background: none; }
.ggx-title { font: 700 15px var(--font-hea); letter-spacing: 3px; color: #eaf5ff; text-shadow: 0 0 10px rgba(67, 211, 255, .5); }
.ggx-gate { box-sizing: border-box; border: 1px solid rgba(84, 134, 190, .45); background: #02050a; box-shadow: inset 0 0 30px rgba(0, 0, 0, .7); }
.ggx-finished { color: #ffcf6a; }
.ggx-lives, .ggx-waves { font: 700 12px var(--font-hea); letter-spacing: .6px; color: #c9dbec; }
.ggx-progress { font: 800 22px var(--font-hea); color: #eaf5ff; letter-spacing: 1px; }
.ggx-jump { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); background: linear-gradient(180deg, #5fd9ff, #1f86ad 60%, #145f80); color: #04202c; font: 800 10px/1.15 var(--font-hea); letter-spacing: .6px; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); padding: 0 12px; }
.ggx-jump:hover { background: linear-gradient(180deg, #8fe6ff, #34a5cf 60%, #1b7aa0); }
.ggx-jump:active { filter: brightness(.9); }
.ggx-jump:disabled { background: linear-gradient(180deg, #34424f, #1c252e); color: #7d8c9a; text-shadow: none; }
.ggx-diff button { border-radius: 0; border: 1px solid #4a6a8a; background: linear-gradient(180deg, #2b4560, #14212f); color: #b9d3ea; font: 700 10px var(--font-hea); letter-spacing: .6px; }
.ggx-diff button:hover { border-color: var(--amber); color: #fff; }
.ggx-diff button.active { border-color: #ffd98c; color: #2a1500; background: linear-gradient(180deg, #ffcf6d, #ff9c2a 55%, #d56d0c); }
.ggx-stats, .ggx-multi, .ggx-machine, .ggx-log { box-sizing: border-box; background: linear-gradient(180deg, rgba(20, 36, 56, .88), rgba(9, 16, 27, .92)); border: 1px solid rgba(84, 134, 190, .4); }
.ggx-stats { padding: 12px 16px 0; height: 43px; font: 600 11px var(--font); color: #9db8d2; align-items: flex-start; }
.ggx-stats b { color: #fff; font: 700 12px var(--font-hea); }
.ggx-head { background: none; width: auto; height: auto; margin: 7px 0 0; font: 800 11px var(--font-hea); letter-spacing: 2.4px; color: #eaf5ff; line-height: 14px; }
.ggx-head::before, .ggx-head::after { content: ''; display: inline-block; width: 26px; height: 1px; vertical-align: middle; margin: 0 8px; background: linear-gradient(90deg, transparent, var(--accent)); }
.ggx-head::after { background: linear-gradient(90deg, var(--accent), transparent); }
.ggx-mval { font: 800 22px var(--font-hea); color: #4a5a6b; }
.ggx-mval.on { color: #ffcf6a; text-shadow: 0 0 10px rgba(255, 160, 40, .8); }
.ggx-check { font: 600 11px var(--font); }
.ggx-mbar { background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(84, 134, 190, .35); }
.ggx-mbar > i { background: linear-gradient(90deg, #1f86ad, #5fd9ff); box-shadow: 0 0 8px rgba(67, 211, 255, .7); }
.ggx-energy { background: linear-gradient(180deg, #ffcf6d, #ff9c2a 55%, #d56d0c); color: #2a1500; font: 800 14px var(--font-hea); letter-spacing: 2px; text-shadow: 0 1px 0 rgba(255, 235, 190, .5);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.ggx-energy small { display: block; font: 700 9px var(--font); letter-spacing: .3px; color: #4a2a05; }
.ggx-energy:hover { background: linear-gradient(180deg, #ffe08c, #ffb64a 55%, #f28a1a); }
.ggx-energy:active { filter: brightness(.9); }
.ggx-energy:disabled { background: linear-gradient(180deg, #34424f, #1c252e); color: #7d8c9a; text-shadow: none; }
.ggx-energy:disabled small { color: #6a7886; }
.ggx-amount { font: 700 11px var(--font-hea); color: #c9dbec; }
.ggx-arrow { width: 22px; height: 18px; border: 1px solid #4a6a8a; --a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 8l3-3.5' fill='none' stroke='%23b9d3ea' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background: var(--a) center no-repeat, linear-gradient(180deg, #2b4560, #14212f); }
.ggx-arrow:hover { border-color: var(--amber); background: var(--a) center no-repeat, linear-gradient(180deg, #2b4560, #14212f); }
.ggx-line { border-bottom: 1px solid rgba(84, 134, 190, .18); font: 600 11px var(--font); }
.ggx-line.part { color: #7fe0ff; } .ggx-line.multi { color: #ffcf6a; }
.ggx-ic { width: 24px; height: 24px; background-size: 20px 20px; background-color: rgba(8, 16, 28, .8); border: 1px solid rgba(84, 134, 190, .5); }
.ggx-ic:hover { border-color: var(--accent); }
.ggx-ic.reward { background-image: url('/assets/oo_site/gg_reward_1.svg'); } .ggx-ic.reward:hover { background-image: url('/assets/oo_site/gg_reward_2.svg'); }
.ggx-ic.info { background-image: url('/assets/oo_site/gg_info_1.svg'); } .ggx-ic.info:hover { background-image: url('/assets/oo_site/gg_info_2.svg'); }
.ggx-ic.help { background-image: url('/assets/oo_site/gg_help_1.svg'); } .ggx-ic.help:hover { background-image: url('/assets/oo_site/gg_help_2.svg'); }
.ggx-ic.chance { background-image: url('/assets/oo_site/gg_chance_1.svg'); } .ggx-ic.chance:hover { background-image: url('/assets/oo_site/gg_chance_2.svg'); }
.ggx-icons { left: 487px; gap: 5px; }
.ggx-popup { background: rgba(2, 6, 12, .66); }
.ggp-win { background: linear-gradient(180deg, rgba(18, 32, 50, .98), rgba(8, 14, 24, .98)); border: 1px solid rgba(84, 134, 190, .55); box-shadow: 0 0 30px #000; }
.ggp-win::before { content: ''; position: absolute; right: -1px; top: -1px; width: 18px; height: 18px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); }
.ggp-head { background: linear-gradient(90deg, rgba(36, 66, 100, .9), transparent); font: 700 12px var(--font-hea); letter-spacing: 1.4px; color: #eaf5ff; }
.ggp-close { border: 1px solid #4a6a8a; background: rgba(8, 16, 28, .8) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%23b9d3ea' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); width: 24px; height: 22px; }
.ggp-close:hover { border-color: var(--amber); background-color: rgba(60, 40, 10, .8); }
.ggp-body h4 { color: var(--amber); font: 700 11px var(--font-hea); }
.ggp-rw { border: 1px solid rgba(84, 134, 190, .4); background: rgba(10, 25, 40, .75); }
.ggx-materializer { background: radial-gradient(closest-side, rgba(67, 211, 255, .25), transparent); }

/* language picker (oo-i18n.js mounts it into .oo-lang-slot) */
select.oo-lang { margin-left: 8px; padding: 2px 6px; font: 600 11px var(--font, Rajdhani, sans-serif); color: #cfe3f5; background: rgba(8, 16, 28, .85); border: 1px solid rgba(84, 134, 190, .55); border-radius: 0; outline: none; cursor: pointer; }
select.oo-lang:hover { border-color: #ffb23e; }

/* ================= hangar: OldOrbit style tabs, slots, selection marks and the bulk toolbar ================= */
.etab { text-transform: uppercase; font: 700 12px var(--font-hea); letter-spacing: 1.2px; padding: 6px 16px; border-radius: 0; background: linear-gradient(180deg, #14263a, #0a131f); border: 1px solid #2f4a66; color: #9db8d2; }
.etab:hover { color: #fff; border-color: var(--accent); }
.etab.active { color: #fff; border-color: var(--accent); background: linear-gradient(180deg, #1c3a55, #0e1c2b); box-shadow: inset 0 -2px 0 var(--accent); }
.bp-slot { position: relative; border-radius: 0; background: linear-gradient(180deg, rgba(20, 36, 56, .9), rgba(8, 15, 25, .95)); border: 1px solid #2f4a66; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.bp-slot.equipped { border-color: #4b7191; }
.bp-slot.empty { background: rgba(6, 12, 20, .6); border-style: dashed; border-color: #263a4f; opacity: 1; }
.bp-slot:hover { border-color: var(--accent); }
.bp-slot.sel, .inv-grid .bp-slot.sel, .slots .bp-slot.sel { border-color: var(--amber) !important; background: linear-gradient(180deg, rgba(86, 56, 10, .8), rgba(30, 19, 6, .94)) !important; box-shadow: inset 0 0 0 2px var(--amber), inset 0 0 16px rgba(255, 178, 62, .4) !important; }
.bp-slot.sel::after { content: '✓'; position: absolute; left: 0; bottom: 0; width: 15px; height: 15px; line-height: 15px; text-align: center; font: 800 11px var(--font-hea); color: #1d1000; background: var(--amber); clip-path: polygon(0 0, 100% 100%, 0 100%); padding: 4px 0 0 0; box-sizing: border-box; text-indent: -3px; }
.bp-slot.sel img { filter: drop-shadow(0 0 4px rgba(255, 178, 62, .6)); }
.inv-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); }
.inv-tools .btn-metal { min-width: 0; padding: 0 9px; }
.inv-count { margin-left: auto; font: 700 11px var(--font-hea); letter-spacing: .6px; color: var(--amber); }
.sg-title { display: flex; align-items: center; }
.sg-clear { margin-left: 12px; padding: 1px 9px; font: 700 10px var(--font-hea); letter-spacing: 1px; color: #9db8d2; background: rgba(20, 36, 56, .85); border: 1px solid #2f4a66; cursor: pointer; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.sg-clear:hover { color: #fff; border-color: var(--amber); }
#btn-unequip-sel:disabled { opacity: .45; cursor: default; }

/* the currency symbols that oo-i18n.js puts behind amounts, and in the header's money boxes */
img.oo-cur { width: 1.1em; height: 1.1em; min-width: 12px; min-height: 12px; vertical-align: -0.2em; margin: 0 0 0 .25em; display: inline-block; object-fit: contain; }
.hdr-money::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 7px; vertical-align: -4px; background: center / contain no-repeat; }
.hdr-money.cred::before { background-image: url('/assets/ui/hud/icons/credits.png?v=oo3'); }
.hdr-money.uri::before { background-image: url('/assets/ui/hud/icons/uridium.png?v=oo3'); }

.bp-slot.over { border: 1px dashed #ff6a5a !important; box-shadow: inset 0 0 12px rgba(255, 80, 60, .35) !important; }

/* server selection (the original client's list: the test server is live, the others cannot be picked yet) */
.srv-list { display: grid; gap: 4px; margin-bottom: 12px; }
.srv-row { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(84, 134, 190, .4); background: linear-gradient(180deg, rgba(20, 36, 56, .9), rgba(9, 16, 27, .92)); }
.srv-row b { font: 700 13px var(--font-hea, sans-serif); letter-spacing: .6px; color: #eaf5ff; }
.srv-row small { font-size: 11px; color: #9db8d2; }
.srv-row em { font: 800 10px var(--font-hea, sans-serif); letter-spacing: 1px; font-style: normal; color: #1d1000; background: var(--amber, #ffb23e); padding: 2px 7px; }
.srv-dot { width: 9px; height: 9px; border-radius: 50%; background: #5a6a7a; }
.srv-row.on { border-color: var(--amber, #ffb23e); box-shadow: inset 0 0 14px rgba(255, 178, 62, .15); }
.srv-row.on .srv-dot { background: #5dff8a; box-shadow: 0 0 8px #5dff8a; }
.srv-row.off { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
.srv-sub { font: 700 11px var(--font-hea, sans-serif); letter-spacing: 1.4px; color: var(--amber, #ffb23e); margin: 4px 0 6px; text-transform: uppercase; }

/* Skylab: leader lines from the labels to the modules of the new picture */
.sky-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.sky-lines line { stroke: rgba(130, 200, 255, .55); stroke-width: 1; stroke-dasharray: 3 3; }
.sky-lines circle { fill: #43d3ff; stroke: rgba(0, 0, 0, .6); stroke-width: 1; }

/* rank insignia: one size wherever they stand next to a name (the pictures themselves are 32 / 64 px) */
img[src*="/ranks/"] { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.lic-row img[src*="/ranks/"] { width: 20px; height: 20px; }

/* Galaxy Gates: the last reward has a strip of its own above the log (it used to flash over the log lines) */
.ggx-materializer { left: 524px; top: 207px; width: 262px; height: 48px; box-sizing: border-box; padding: 3px 8px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
  background: linear-gradient(180deg, rgba(20, 44, 70, .92), rgba(8, 16, 28, .92)); border: 1px solid #2f5a82; border-radius: 2px; opacity: 1; z-index: 2; text-shadow: none; }
.ggx-materializer:empty { display: none; }
.ggx-materializer small { flex: none; font: 9px var(--font-hea); color: #ffb23e; letter-spacing: .6px; writing-mode: horizontal-tb; }
.ggx-materializer .ggx-last { flex: 1; min-width: 0; font: 600 10.5px var(--font); line-height: 12px; color: #fff; overflow: hidden; }
.ggx-materializer .ggx-last div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ggx-materializer .ggx-last .more { font-size: 9px; color: #8fa7b9; }
.ggx-materializer.show { animation: ggLast .9s ease-out; }
@keyframes ggLast { 0% { filter: brightness(2.4); box-shadow: 0 0 12px #43d3ff; } 100% { filter: none; box-shadow: none; } }
.ggx-log { top: 257px; height: 140px; }
.ggx-lines { height: 110px; }

/* the OldOrbit wordmark (chrome letters, orbit ring and sparkle of the app icon) */
.oo-logo-img { display: block; width: auto; height: auto; max-width: 100%; user-select: none; -webkit-user-drag: none; }
/* the wordmark stands free, in front: hard dark layers under it give it thickness, a soft shadow the depth, a cold glow the light */
.hdr-logo .oo-logo-img { width: 300px; max-width: 300px; max-height: 98px; object-fit: contain; margin: 0 auto;
  filter: drop-shadow(0 1px 0 #020509) drop-shadow(0 2px 0 #03070c) drop-shadow(0 4px 0 #040a10) drop-shadow(0 10px 8px rgba(0, 0, 0, .65)) drop-shadow(0 0 26px rgba(74, 170, 255, .5));
  transition: filter .15s, transform .15s; }
.hdr-logo:hover .oo-logo-img { filter: drop-shadow(0 1px 0 #020509) drop-shadow(0 2px 0 #03070c) drop-shadow(0 4px 0 #040a10) drop-shadow(0 10px 8px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(110, 190, 255, .75)) brightness(1.1); transform: translateY(-1px); }
.ld-brand .oo-logo-img { height: 46px; width: auto; }
.m-top-logo .oo-logo-img { height: 24px; width: auto; }
.ps-brand .oo-logo-img { height: 34px; width: auto; }

/* the owner of the game (Nety Digital): its mark in the footers and in the imprint */
.foot-owner { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 11px; color: var(--txt-dim); }
.foot-owner .nety-logo, .legal-owner .nety-logo { opacity: .9; }
.legal-owner { margin: 2px 0 6px; }
.legal-owner .nety-logo { width: 120px; height: auto; }

/* the Wiki icon of the site header, next to the mail icon (wiki.oldorbit.com) */
.ico-wiki { background-image: url('/assets/oo_site/hi_wiki.svg?v=1'); left: 176px !important; display: block; }
.ico-wiki:hover { background-position: center; }

/* ---- maintenance notice (public/js/site.js applyMaintenance): a full-page card; for a server that lets the staff in a slim bar stays after the button */
.maint { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 30%, rgba(14, 42, 66, .96), rgba(3, 8, 14, .985) 70%); }
.maint.hidden { display: none; }
.maint-card { width: min(560px, 100%); padding: 34px 30px 30px; text-align: center; border: 1px solid #2f6a94; border-radius: 4px; background: linear-gradient(180deg, rgba(20, 38, 58, .95), rgba(8, 15, 24, .95)); box-shadow: 0 0 60px rgba(60, 170, 240, .2); }
.maint-card .oo-logo-img { width: min(330px, 80%); margin: 0 auto 18px; filter: drop-shadow(0 1px 0 #020509) drop-shadow(0 3px 0 #040a10) drop-shadow(0 8px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(74, 170, 255, .45)); }
.maint-card h2 { margin: 0 0 10px; font: 800 24px var(--font-hea, sans-serif); letter-spacing: 2px; color: #ffb43a; }
.maint-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #cfe3f1; }
.maint-count { min-height: 34px; margin-bottom: 14px; font: 800 30px var(--font-hea, sans-serif); letter-spacing: 3px; color: #8fe3ff; text-shadow: 0 0 14px rgba(110, 200, 255, .55); }
.maint-card .hidden { display: none; }
.maint-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 1900; padding: 5px 12px; text-align: center; font: 700 12px var(--font-hea, sans-serif); letter-spacing: 1.5px; color: #1c1000; background: linear-gradient(180deg, #ffd27a, #ffa326); }
.maint-bar.hidden { display: none; }

/* server list rows (the Sunucu window) */
.srv-row.maint { border-color: #b08a2c; }
.srv-row.maint .srv-dot { background: #ffb23e; }
.srv-row.soon .srv-dot { background: #6aa8ff; }
.srv-row[data-srv] { cursor: pointer; }
.srv-row[data-srv]:hover { filter: brightness(1.15); }
.srv-row em.none { visibility: hidden; }
.srv-row.cur { box-shadow: inset 0 0 14px rgba(255, 178, 62, .15); }