/* OldOrbit website — "Reloaded" era internal pages */
@font-face { font-family: 'EurostileT'; src: url('/fonts/EurostileT.ttf?v=2') format('truetype'); }
@font-face { font-family: 'EurostileTHea'; src: url('/fonts/EurostileTHea.ttf?v=2') format('truetype'); }
@font-face { font-family: 'EurostileTHeaCon'; src: url('/fonts/EurostileTHeaCon.ttf?v=2') format('truetype'); }

:root {
  --bg: #03060a;
  --panel: rgba(8, 14, 21, 0.92);
  --panel-2: #0d1620;
  --line: #22323f;
  --line-hi: #3a5367;
  --txt: #b9c8d6;
  --txt-dim: #7288a0;
  --white: #eef4fa;
  --cyan: #62c0ff;
  --gold: #f0b43c;
  --green-a: #74d64a;
  --green-b: #2a7d16;
  --red: #ff6a5a;
  --font: 'EurostileT', 'Trebuchet MS', sans-serif;
  --font-hea: 'EurostileTHea', 'EurostileT', sans-serif;
  --font-con: 'EurostileTHeaCon', 'EurostileTHea', sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--txt); font: 13px/1.45 var(--font);
  background: #03060a url('/assets/bg_standard_1.jpg') center top / 1980px auto no-repeat fixed;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }
.dim { color: var(--txt-dim); }
.center { text-align: center; }
img { max-width: 100%; }

/* ---------------------------------------------------------------- shared bits */
.oo-logo {
  display: inline-block; border: 0; background: none; padding: 0;
  font: italic 34px/1 var(--font-hea); letter-spacing: 1px; color: #cfd8e0;
  background: linear-gradient(180deg, #fff 0%, #d7e0e8 40%, #6f7f8f 52%, #e6edf3 70%, #8a99a8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #06090d) drop-shadow(0 0 14px rgba(98, 192, 255, .28));
}
.oo-logo b { font-weight: normal; }
/* italic glyphs lean out of the box and background-clip:text only paints inside it: pad, then pull back */
.oo-logo { padding: 0 .16em 0 .06em; margin: 0 -.16em 0 -.06em; }
.oo-logo.big { font-size: 52px; }
.oo-emblem {
  display: inline-block; width: 44px; height: 44px; margin-right: 10px; vertical-align: middle;
  background: url(/icons/mark-128.png?v=2) center / contain no-repeat;
}

.panel {
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 6px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.panel-head {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 0 10px 0 16px;
  font: 12px var(--font-hea); letter-spacing: 1px; color: var(--white);
  background: linear-gradient(180deg, #243241 0%, #121b25 100%);
  border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.panel-head::before { content: ''; position: absolute; left: 6px; top: 9px; width: 4px; height: 10px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.ph-tabs { margin-left: auto; display: flex; gap: 2px; }
.ph-tab { border: 1px solid #2c3d4d; background: #0c141c; padding: 2px 10px; font: 11px var(--font); color: var(--txt-dim); letter-spacing: 0; }
.ph-tab.active, .ph-tab:hover { color: var(--white); border-color: var(--cyan); background: #13212e; }
.ph-right { margin-left: auto; font: 11px var(--font); color: var(--txt-dim); letter-spacing: 0; }
.ph-right b { color: var(--gold); font-weight: normal; }
.panel-body { padding: 12px; }
.panel-body.tight { padding: 4px; }
.panel.narrow { max-width: 620px; margin: 0 auto; }

.btn-metal {
  position: relative; padding: 7px 16px; border: 1px solid #455b6f; border-radius: 2px;
  background: linear-gradient(180deg, #34495c 0%, #1b2733 55%, #131c25 100%);
  color: #dbe7f2; font: 12px var(--font-hea); letter-spacing: .6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 #000;
}
.btn-metal:hover { border-color: var(--cyan); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 8px rgba(98, 192, 255, .35); }
.btn-metal:active { transform: translateY(1px); }
.btn-metal.green { background: linear-gradient(180deg, #6cc944, #3a8f22 55%, #2a7016); border-color: #8fe064; color: #fff; text-shadow: 0 1px 0 #1d4d0e; }
.btn-metal.small { padding: 4px 10px; font-size: 11px; }
.btn-metal:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.btn-col { display: grid; gap: 5px; margin-top: 10px; }
.link-btn { border: 0; background: none; color: var(--cyan); padding: 4px 0; font: 12px var(--font); }
.link-btn:hover { text-decoration: underline; }

.btn-start {
  position: relative; display: inline-block; min-width: 240px; padding: 12px 34px; border: 0; border-radius: 26px;
  font: 26px/1 var(--font-hea); letter-spacing: 3px; color: #fff; text-shadow: 0 2px 0 #1a4a0b, 0 0 10px rgba(180, 255, 140, .5);
  background: linear-gradient(180deg, #a8f070 0%, #5fc132 38%, #2f8a17 62%, #43a824 100%);
  box-shadow: 0 0 0 2px #0b1a06, 0 0 0 4px #3f6b2a, 0 0 22px rgba(110, 230, 70, .55), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(0, 0, 0, .35);
  animation: startPulse 2.4s ease-in-out infinite;
}
.btn-start:hover { filter: brightness(1.12); }
@keyframes startPulse { 50% { box-shadow: 0 0 0 2px #0b1a06, 0 0 0 4px #5a9a3c, 0 0 34px rgba(120, 240, 80, .8), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(0, 0, 0, .35); } }

dl.spec { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; }
dl.spec dt { color: var(--txt-dim); }
dl.spec dd { margin: 0; text-align: right; color: var(--white); font-variant-numeric: tabular-nums; }
dl.spec.small { font-size: 12px; }
dl.spec.wide { gap: 7px 30px; }

.data-table, .rank-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .rank-table th { text-align: left; padding: 6px 8px; color: var(--txt-dim); font: 11px var(--font-hea); letter-spacing: .5px; border-bottom: 1px solid var(--line); background: #0a1219; }
.data-table td, .rank-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .04); vertical-align: middle; }
.data-table tr:hover td, .rank-table tr:hover td { background: rgba(98, 192, 255, .05); }
.rank-table .pos { width: 34px; color: var(--gold); font-family: var(--font-hea); }
.rank-table .me td { background: rgba(240, 180, 60, .08); }
.rank-table img { vertical-align: middle; margin-right: 4px; }
.rank-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table img.icon { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.data-table input { width: 120px; padding: 4px 6px; background: #03070b; border: 1px solid var(--line-hi); color: #fff; }

/* ---------------------------------------------------------------- landing */
#landing { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(3, 6, 10, .35), rgba(3, 6, 10, .85) 75%); }
.ld-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 28px; background: linear-gradient(180deg, rgba(10, 17, 24, .95), rgba(10, 17, 24, .6)); border-bottom: 1px solid var(--line); }
.ld-brand { display: flex; align-items: center; }
.ld-login { display: flex; gap: 6px; align-items: center; }
.ld-login input, .ld-register input, .inline-form input {
  padding: 8px 10px; background: #03070b; border: 1px solid var(--line-hi); color: #fff; outline: 0; min-width: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}
.ld-login input:focus, .ld-register input:focus, .inline-form input:focus { border-color: var(--cyan); }
.ld-hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 50px; align-items: center; max-width: 1180px; width: 100%; margin: 0 auto; padding: 50px 28px; }
.ld-pitch h1 { margin: 0 0 16px; font: italic 54px/1.05 var(--font-hea); color: #fff; text-shadow: 0 3px 0 #000, 0 0 30px rgba(98, 192, 255, .35); }
.ld-pitch p { max-width: 520px; font-size: 16px; color: #c6d4e0; }
.ld-points { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 8px; }
.ld-points li { padding-left: 18px; position: relative; font-size: 14px; }
.ld-points li::before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 6px var(--cyan); }
.ld-points b { color: var(--gold); font-weight: normal; font-family: var(--font-hea); }
.ld-online { color: var(--txt-dim); }
.ld-online b { color: #fff; font-weight: normal; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5fe03a; box-shadow: 0 0 8px #5fe03a; }
.ld-register .panel-body { display: grid; gap: 10px; }
.ld-register label { display: grid; gap: 4px; font-size: 12px; color: var(--txt-dim); }
.ld-company-label { font-size: 12px; color: var(--txt-dim); margin-top: 4px; }
.company-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.company-card {
  position: relative; height: 170px; padding: 0; border: 1px solid var(--line-hi); overflow: hidden; text-align: left;
  background: #000 var(--art) center 12% / cover no-repeat; filter: grayscale(.7) brightness(.7); transition: filter .2s, border-color .2s;
}
.company-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .9)); }
.company-card:hover { filter: grayscale(.2) brightness(.95); }
.company-card.selected { filter: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(240, 180, 60, .5); }
.cc-name { position: absolute; left: 8px; bottom: 32px; z-index: 1; font: 18px var(--font-hea); color: #fff; }
.cc-desc { position: absolute; left: 8px; right: 6px; bottom: 6px; z-index: 1; font-size: 10px; line-height: 1.2; color: #c0cedb; }
.ld-register .btn-start { width: 100%; margin-top: 6px; font-size: 22px; }
.ld-foot { text-align: center; padding: 16px; color: var(--txt-dim); font-size: 11px; border-top: 1px solid var(--line); background: rgba(3, 6, 10, .8); }
.toast-error { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 50; padding: 10px 18px; background: #2a0f0d; border: 1px solid #a33a30; color: #ffb3aa; }

/* ---------------------------------------------------------------- internal frame */
.frame { width: 1000px; max-width: 100%; margin: 0 auto; padding-bottom: 30px; }

/* ---------------------------------------------------------------- original 2016 header
   The header is laid out at its native 860x230 size (sprite coordinates from the
   original stylesheet) and scaled to the page width with --hs. */
.hdr-wrap { --hs: 1.1628; width: calc(860px * var(--hs)); height: calc(230px * var(--hs)); margin: 0 auto; position: relative; overflow: hidden; }
.hdr {
  position: absolute; left: 0; top: 0; width: 860px; height: 230px; transform: scale(var(--hs)); transform-origin: 0 0;
  background: url(/assets/site/header/header_background_02.png) no-repeat 0 0;
  font-family: Verdana, Arial, sans-serif; text-align: left; overflow: hidden;
}
.hdr button, .hdr a { font-family: Verdana, Arial, sans-serif; cursor: pointer; }

.hdr-topbar { position: absolute; left: 50px; right: 50px; top: 0; height: 15px; font-size: 9px; font-weight: bold; color: #546b77; }
/* every value sits centred in its own box of header_background_02.png's top strip (x in the 860px header:
   52-186, 194-307, middle piece 311-551, 555-668, 675-809; the bar starts at 50px) */
.ht-item { position: absolute; top: 1px; height: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden; box-sizing: border-box; padding: 0 4px; }
.ht-item b { font-weight: bold; color: #8fb1c4; overflow: hidden; text-overflow: ellipsis; }
.ht-id { left: 2px; width: 134px; }
.ht-level { left: 144px; width: 113px; }
.ht-pilot { left: 263px; width: 236px; top: 0; height: 15px; gap: 5px; }
.ht-pilot b { color: #cfe3f1; font-size: 10px; min-width: 0; }
.ht-pilot img { flex: none; max-height: 12px; }
.ht-pilot .is-company { height: 13px; max-height: 13px; width: auto; }
.ht-exp { left: 505px; width: 113px; }
.ht-hnr { left: 625px; width: 134px; }
.ht-id img { flex: none; }
.ht-ico { display: inline-block; width: 11px; height: 11px; }
.ht-ico.lvl { background: linear-gradient(0deg, #546b77 0 30%, transparent 30% 40%, #6d8796 40% 65%, transparent 65% 75%, #8fb1c4 75%); clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.ht-ico.exp { background: #8fb1c4; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 77%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.ht-ico.hnr { background: #8fb1c4; clip-path: polygon(15% 0, 85% 0, 85% 45%, 50% 100%, 15% 45%); }

.hico { position: absolute; top: 18px; width: 34px; height: 22px; padding: 0; border: 0; background: url(/assets/site/header/global_header_icon_sprite_34x22.png) no-repeat; }
.ico-home { left: 64px; background-position: 0 0; }
.ico-server { left: 99px; background-position: -34px 0; }
.ico-account { left: 691px; background-position: -136px 0; }
.ico-help { left: 725px; background-position: -68px 0; }
.ico-logout { left: 759px; background-position: -102px 0; }
.ico-home:hover { background-position: 0 -22px; } .ico-home:active { background-position: 0 -44px; }
.ico-server:hover { background-position: -34px -22px; } .ico-server:active { background-position: -34px -44px; }
.ico-account:hover { background-position: -136px -22px; } .ico-account:active { background-position: -136px -44px; }
.ico-help:hover { background-position: -68px -22px; } .ico-help:active { background-position: -68px -44px; }
.ico-logout:hover { background-position: -102px -22px; } .ico-logout:active { background-position: -102px -44px; }

.hmail { position: absolute; left: 137px; top: 19px; width: 24px; height: 20px; padding: 0; border: 0; background: url(/assets/site/header/icons_mail_sprite.png) no-repeat 0 0; }
.hmail:hover { background-position: 0 -40px; }
/* new mail: the orange frame and the normal one take turns (step-end jumps, so no half-way frame shows) */
.hmail.has-new { background-position: 0 -20px; animation: mailBlink 1.2s step-end infinite; }
.hmail.has-new:hover { animation: none; background-position: 0 -40px; }
@keyframes mailBlink { 0% { background-position: 0 -20px; } 50% { background-position: 0 0; } 100% { background-position: 0 -20px; } }
.hmail b { position: absolute; left: 19px; top: -3px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: #d93a2b; color: #fff; font: bold 8px/13px Verdana, sans-serif; }
.hadmin { position: absolute; left: 652px; top: 20px; height: 18px; padding: 0 5px; border: 1px solid #b08a2c; border-radius: 2px; background: linear-gradient(180deg, #4a3a14, #221a08); color: #ffd36a; font: bold 9px Verdana, sans-serif; }

.hdr-logo { position: absolute; left: 305px; top: -3px; width: 250px; height: 90px; padding: 0; border: 0; z-index: 2; background: none; display: grid; place-items: center; }
.hdr-logo .oo-logo { font-size: 40px; transition: filter .15s; }
.hdr-logo:hover .oo-logo { filter: brightness(1.12) drop-shadow(0 2px 0 #06090d) drop-shadow(0 0 16px rgba(110, 190, 255, .6)); }

.hbtn {
  position: absolute; width: 129px; padding: 0 0 0 5px; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: 0 center;
  color: #fff; font-size: 12px; font-weight: bold; line-height: 13px; text-align: center; text-shadow: 0 1px 1px #000;
}
.hbtn.std { height: 34px; }
.hbtn.big { height: 56px; }
.hbtn.l.std { background-image: url(/assets/site/header/small_button_left_sprite.png); }
.hbtn.r.std { background-image: url(/assets/site/header/small_button_right_sprite.png); padding: 0 5px 0 0; }
.hbtn.l.big { background-image: url(/assets/site/header/big_button_left_sprite.png); }
.hbtn.r.big { background-image: url(/assets/site/header/big_button_right_sprite.png); padding: 0 5px 0 0; }
.hbtn:hover { background-position: -129px center; }
.hbtn:active { background-position: -258px center; }
.hbtn.active { background-position: -387px center; color: #fff; }
.hbtn.r.std.upsell { background-position: -516px center; color: #fff; }
.hbtn.r.std.upsell:hover { background-position: -645px center; }
.hbtn.uri { color: #bfe6ff; }

.hdr-start {
  position: absolute; left: 335px; top: 131px; width: 190px; height: 50px; padding: 0 0 0 5px; border: 0; z-index: 1;
  background: url(/assets/site/header/button_start_sprite.png) no-repeat center top;
  color: #fff; font: bold 20px Verdana, Arial, sans-serif; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.hdr-start:hover { background-position: center -50px; }
.hdr-start:active { background-position: center -100px; }
.hdr-premium { position: absolute; left: 372px; top: 186px; width: 115px; height: 16px; padding: 0; border: 0; background: url(/assets/site/header/icon_member_premium.png) no-repeat center; }

.hdr-ticker { position: absolute; left: 45px; top: 207px; width: 490px; height: 16px; overflow: hidden; font-size: 10px; color: #cae0f7; }
.hdr-ticker .ticker-track { position: absolute; white-space: nowrap; line-height: 16px; padding-left: 100%; animation: ticker 40s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.hdr-money { position: absolute; top: 208px; width: 104px; height: 15px; font-size: 10px; font-weight: bold; line-height: 15px; text-decoration: none; }
.hdr-money.cred { left: 578px; color: #bcd3e3; }
.hdr-money.uri { left: 702px; color: #82d1ff; }
.hdr-money b { font-weight: bold; }
.hdr-money:hover b { color: #fff; }

.content { margin-top: 4px; }
.page { display: none; }
.page.active { display: block; animation: pageIn .25s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } }
.site-foot { margin-top: 14px; text-align: center; font-size: 11px; color: var(--txt-dim); }

/* ---------------------------------------------------------------- home */
.home-grid { display: grid; grid-template-columns: 380px 1fr; grid-template-areas: 'lic news' 'rec cal' 'rec hof'; gap: 8px; }
.license { grid-area: lic; }
.news { grid-area: news; position: relative; min-height: 300px; overflow: hidden; }
.records { grid-area: rec; }
.calendar { grid-area: cal; }
.hof { grid-area: hof; }
.lic-top { display: flex; gap: 12px; align-items: flex-start; }
.lic-avatar { width: 84px; height: 96px; flex: none; border: 1px solid var(--line-hi); background: #000 center 15% / cover no-repeat; box-shadow: inset 0 0 12px rgba(0, 0, 0, .8); }
.lic-avatar.big { width: 140px; height: 170px; margin: 0 auto 10px; }
.lic-info { flex: 1; min-width: 0; }
.lic-name { font: 16px var(--font-hea); color: #fff; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-row { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.lic-row.center { justify-content: center; }
.lic-row img { max-height: 18px; }
.lic-level { text-align: center; padding: 4px 8px; border: 1px solid var(--line-hi); background: #070c11; }
.lic-level small { display: block; font-size: 9px; color: var(--txt-dim); letter-spacing: 1px; }
.lic-level b { font: 24px var(--font-hea); color: var(--gold); font-weight: normal; }
.lic-xp { position: relative; height: 14px; margin: 12px 0 4px; border: 1px solid #2b3b4b; background: #03070c; }
.lic-xp > div { height: 100%; width: 0; background: linear-gradient(180deg, #ffd66b, #c48a12); }
.lic-xp span { position: absolute; inset: 0; font-size: 10px; line-height: 12px; text-align: center; color: #fff; text-shadow: 0 0 2px #000; }
.lic-stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0; font-size: 12px; }
.lic-stats dt { color: var(--txt-dim); }
.lic-stats dd { margin: 0; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }

.news-slides { position: absolute; inset: 0; }
.news-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; background: #000 center / cover no-repeat; }
.news-slide.active { opacity: 1; }
.news-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 55%, transparent); }
.news-text { position: absolute; left: 22px; top: 22px; bottom: 44px; z-index: 1; max-width: 360px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.news-text small { font: 11px var(--font-hea); letter-spacing: 2px; color: var(--gold); }
.news-text h2 { margin: 0; font: italic 28px/1.1 var(--font-hea); color: #fff; text-shadow: 0 2px 0 #000; }
.news-text p { margin: 0; color: #cad8e5; }
.news-text .btn-metal { align-self: flex-start; }
.news-dots { position: absolute; left: 22px; bottom: 14px; z-index: 2; display: flex; gap: 6px; }
.news-dots button { width: 22px; height: 5px; border: 0; padding: 0; background: rgba(255, 255, 255, .25); }
.news-dots button.active { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

.cal-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.cal-row:last-child { border-bottom: 0; }
.cal-date { width: 46px; text-align: center; border: 1px solid var(--line-hi); background: #070c11; padding: 2px 0; }
.cal-date b { display: block; font: 18px var(--font-hea); color: #fff; font-weight: normal; line-height: 1.1; }
.cal-date small { font-size: 9px; color: var(--gold); letter-spacing: 1px; }
.cal-info b { display: block; color: #fff; font-weight: normal; font-family: var(--font-hea); font-size: 12px; }
.cal-info small { color: var(--txt-dim); }
.cal-tag { margin-left: auto; font-size: 10px; padding: 2px 6px; border: 1px solid #3b6a2b; color: #9be27a; }
.cal-tag.soon { border-color: #6b5520; color: var(--gold); }

.hof-card { display: flex; align-items: center; gap: 12px; }
.hof-card img.ship { width: 110px; height: 70px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(98, 192, 255, .3)); }
.hof-card b { display: block; font: 15px var(--font-hea); color: var(--gold); font-weight: normal; }
.hof-card small { color: var(--txt-dim); }

/* ---------------------------------------------------------------- hangar */
.subtabs { display: flex; gap: 3px; margin-bottom: 6px; }
.subtab { padding: 6px 18px; border: 1px solid var(--line-hi); border-bottom: 0; background: linear-gradient(180deg, #1d2a36, #0c131a); font: 11px var(--font-hea); letter-spacing: 1px; color: var(--txt-dim); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); padding-left: 22px; padding-right: 22px; }
.subtab:hover { color: var(--white); border-color: var(--line-hi); background: linear-gradient(180deg, #273847, #121d28); }
.subtab.active { color: #fff; background: linear-gradient(180deg, #33546e, #152332); border-color: var(--cyan); }

.hangar-overview { display: grid; grid-template-columns: 1fr 320px; gap: 8px; }
.ship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; max-height: 540px; overflow-y: auto; padding-right: 4px; }
.hangar-ship-card { position: relative; padding: 8px 6px; border: 1px solid var(--line); background: linear-gradient(180deg, #111c26, #070c11); text-align: center; cursor: pointer; }
.hangar-ship-card:hover { border-color: var(--line-hi); }
.hangar-ship-card.is-active-ship { border-color: var(--gold); }
.hangar-ship-card img { width: 72px; height: 72px; object-fit: contain; margin: 0 auto; display: block; filter: drop-shadow(0 0 6px rgba(0, 140, 255, 0.2)); }
.hangar-ship-card-name { font: 11px var(--font-hea); color: #fff; margin-top: 4px; }
.hangar-ship-card-desc { font-size: 10px; color: var(--txt-dim); line-height: 1.25; height: 26px; overflow: hidden; }
.ship-card-status-badge { position: absolute; left: 4px; top: 4px; font-size: 9px; padding: 1px 4px; border: 1px solid #334556; color: var(--txt-dim); background: #060a0e; }
.ship-card-status-badge.active { color: var(--gold); border-color: var(--gold); }
.ship-card-fav { position: absolute; right: 6px; top: 3px; color: var(--gold); }
.showcase .panel-head { justify-content: space-between; }
.fav-btn { margin-left: auto; border: 0; background: none; color: var(--gold); font-size: 16px; }
.showcase-img { height: 150px; display: grid; place-items: center; background: radial-gradient(circle, rgba(98, 192, 255, .12), transparent 70%); }
.showcase-img img { max-height: 140px; }
.status-badge { text-align: center; font: 11px var(--font-hea); letter-spacing: 1px; padding: 4px; border: 1px solid #334556; color: var(--txt-dim); margin-top: 6px; }
.status-badge.active { color: var(--gold); border-color: var(--gold); }
.ability { font-size: 12px; color: #9fcff5; border-left: 2px solid var(--cyan); padding-left: 8px; white-space: pre-line; }      /* a ship with several abilities has one line each */

.equip { display: grid; grid-template-columns: 1fr 340px; gap: 8px; }
.equip-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: linear-gradient(180deg, #1c2935, #0b1219); border-bottom: 1px solid #000; }
.cfg-switch { display: flex; align-items: center; gap: 3px; font: 10px var(--font-hea); color: var(--txt-dim); letter-spacing: 1px; }
.cfg { width: 26px; height: 24px; border: 1px solid #3f5467; background: linear-gradient(180deg, #2c3c4b, #121a22); font: 13px var(--font-hea); color: var(--txt-dim); }
.cfg.active { color: #111; background: linear-gradient(180deg, #ffd66b, #c48a12); border-color: #ffe7a0; }
.equip-tabs { display: flex; gap: 2px; margin-right: auto; }
.etab { padding: 5px 14px; border: 1px solid #2c3d4d; background: #0c141c; font: 11px var(--font-hea); letter-spacing: .6px; color: var(--txt-dim); }
.etab:hover { color: var(--white); border-color: #3d5670; }
.etab.active { color: #fff; border-color: var(--cyan); background: #173043; box-shadow: inset 0 -2px 0 var(--cyan); }
.equip-body { display: grid; grid-template-columns: 260px 1fr; min-height: 490px; }
.equip-ship { padding: 12px; border-right: 1px solid var(--line); background: radial-gradient(ellipse at 50% 22%, rgba(98, 192, 255, .1), transparent 60%); }
.equip-ship-img { height: 150px; display: grid; place-items: center; }
.equip-ship-img img { max-height: 145px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)); }
.equip-ship-name { text-align: center; font: 14px var(--font-hea); color: #fff; letter-spacing: 1px; }
.equip-slots { padding: 10px 12px; }
.slot-group { margin-bottom: 12px; }
.sg-title { font: 11px var(--font-hea); color: var(--gold); letter-spacing: 1px; margin-bottom: 6px; }
.slots { display: flex; flex-wrap: wrap; gap: 4px; }
.bp-slot {
  position: relative; width: 46px; height: 46px; border: 1px solid #2c3d4d; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #182533, #060a0e 75%); box-shadow: inset 0 0 6px rgba(0, 0, 0, .9);
}
.bp-slot img { width: 40px; height: 40px; object-fit: contain; pointer-events: none; }
.bp-slot.empty { opacity: .8; }
.bp-slot.equipped { border-color: #3c5870; }
.bp-slot:hover { border-color: var(--cyan); }
.bp-slot.active { border-color: var(--gold); box-shadow: 0 0 6px rgba(240, 180, 60, .6), inset 0 0 6px rgba(0, 0, 0, .9); }
.bp-slot.slot-dragover { border-color: #fff; background: #1d3347; }
.bp-upgrade-tag { position: absolute; right: 2px; top: 1px; font: 9px var(--font-hea); color: var(--gold); text-shadow: 0 0 2px #000; }
.drone-list { display: grid; gap: 4px; }
.drone-row-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 4px 8px; border: 1px solid var(--line); background: #080e14; }
/* the name and the level line keep a readable width; on a narrow screen the slots and the sell button wrap under them */
.drone-info-side { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }
.drone-info-side > div { min-width: 0; }
.drone-info-side img { width: 36px; height: 36px; }
.drone-title { font: 11px var(--font-hea); color: #fff; }
.drone-subinfo { font-size: 10px; color: var(--txt-dim); }
.drone-slots-side { display: flex; gap: 4px; }
.drone-equip-slot, .drone-design-slot { width: 40px; height: 40px; border: 1px solid #2c3d4d; background: #060a0e; position: relative; display: grid; place-items: center; }
.drone-design-slot { border-color: #5a4a2a; }
.drone-equip-slot img, .drone-design-slot img { width: 34px; height: 34px; }
.pet-card { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); background: #080e14; margin-bottom: 10px; }
.pet-card img { width: 60px; }
.pet-card b { display: block; color: #fff; font-family: var(--font-hea); font-weight: normal; }
.pet-card small { color: var(--txt-dim); }
.pet-card > div:first-of-type { flex: 1; min-width: 0; }
.pet-card { flex-wrap: wrap; }
.pet-card small { display: block; }
.pet-card-btns { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }      /* four buttons now (hull, rename, fit all, remove all): they wrap on a narrow screen instead of running out of the card */
/* slots the hull has brought into view but not yet bought: a lock, the first one opens for uridium */
.bp-slot.locked { position: relative; background: #070b0f; border-style: dashed; border-color: #2a3947; cursor: default; }
.bp-slot.locked img { width: 22px; height: 22px; opacity: .45; }
.bp-slot.locked.can { cursor: pointer; border-style: solid; border-color: #6a5320; }
.bp-slot.locked.can img { opacity: .95; }
.bp-slot.locked.can:hover { border-color: var(--gold); box-shadow: 0 0 6px rgba(240, 180, 60, .45); }
.bp-slot.locked em { position: absolute; left: 0; right: 0; bottom: 1px; font: bold 8px Verdana, sans-serif; font-style: normal; color: #ffcf5a; text-align: center; text-shadow: 0 0 2px #000; }

.equip-inv { display: flex; flex-direction: column; }
.inv-filters { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.inv-filter-tab { padding: 3px 8px; border: 1px solid #2c3d4d; background: #0c141c; font-size: 11px; color: var(--txt-dim); }
.inv-filter-tab:hover { color: var(--white); border-color: #3d5670; }
.inv-filter-tab.active { color: #fff; border-color: var(--cyan); }
.inv-grid { display: grid; grid-template-columns: repeat(6, 46px); gap: 4px; padding: 8px; max-height: 360px; overflow-y: auto; justify-content: center; align-content: start; flex: 1; }
.inv-detail { margin: 0 8px; padding: 6px 8px; min-height: 44px; font-size: 11px; border: 1px solid var(--line); background: #060a0e; }
.equip-inv .btn-row { padding: 0 8px 8px; }

/* ---------------------------------------------------------------- shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.shop-grid.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bp-shop-card { padding: 10px; border: 1px solid var(--line); background: linear-gradient(180deg, #0f1922, #070c11); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.bp-shop-card:hover { border-color: var(--line-hi); }
.bp-shop-card img { height: 70px; object-fit: contain; margin: 0 auto; }
.bp-shop-name { font: 12px var(--font-hea); color: #fff; }
.bp-shop-desc { font-size: 11px; color: var(--txt-dim); min-height: 30px; }
.bp-shop-price { font: 13px var(--font-hea); }
.bp-shop-price.c { color: var(--gold); }
.bp-shop-price.u { color: #7fd0ff; }
.bp-shop-card .btn-metal { margin-top: auto; }

/* ---------------------------------------------------------------- gates */
.gates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gate-list { display: grid; gap: 6px; }
.gate-card { text-align: left; padding: 10px 12px; border: 1px solid var(--line); background: #080e14; }
.gate-card b { font: 14px var(--font-hea); color: #fff; font-weight: normal; letter-spacing: 1px; }
.gate-card.active { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.gbar { height: 8px; margin: 6px 0 4px; border: 1px solid #25333f; background: #02060a; }
.gbar div { height: 100%; width: 0; background: linear-gradient(90deg, #1b6fb0, #7fd0ff); }
.gate-card small { color: var(--txt-dim); }
.gen-visual { display: grid; place-items: center; height: 170px; }
.gen-visual img { max-height: 160px; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rotate-ring { to { transform: rotate(360deg); } }
.gen-log { margin-top: 10px; max-height: 150px; overflow-y: auto; font-size: 12px; border: 1px solid var(--line); background: #060a0e; padding: 6px 8px; }
.gg-log-item { padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }

/* ---------------------------------------------------------------- pilot / misc */
.pilot { display: grid; grid-template-columns: 260px 1fr; gap: 8px; }
.pilot h3 { margin: 4px 0 6px; font: 18px var(--font-hea); color: #fff; font-weight: normal; }
.clan-logo { width: 90px; border: 1px solid var(--line-hi); margin-bottom: 8px; }
.inline-form { display: flex; gap: 6px; margin: 12px 0; }
.inline-form input { flex: 1; letter-spacing: 2px; text-transform: uppercase; }
.form-result { min-height: 20px; }
.form-result.ok { color: #9be27a; }
.form-result.err { color: var(--red); }
.skylab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sky-module { padding: 12px; text-align: center; border: 1px solid var(--line-hi); background: linear-gradient(180deg, #0f1a24, #060a0e); }
.sky-module small { display: block; font-size: 10px; letter-spacing: 1px; color: var(--txt-dim); }
.sky-module b { font: 22px var(--font-hea); color: var(--gold); font-weight: normal; }
.bullets { padding-left: 18px; line-height: 1.9; }

/* ---------------------------------------------------------------- modals */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, .6); }
.modal-card { width: min(640px, 94vw); background: var(--panel); border: 1px solid var(--line-hi); box-shadow: 0 12px 40px rgba(0, 0, 0, .8); }
.modal-x { margin-left: auto; border: 0; background: none; font-size: 18px; color: var(--txt); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; display: grid; gap: 6px; justify-items: center; pointer-events: none; }
#toast div { padding: 8px 18px; background: rgba(8, 16, 26, .96); border: 1px solid var(--cyan); color: #fff; box-shadow: 0 0 14px rgba(98, 192, 255, .35); animation: toastIn 3s forwards; }
#toast div.err { border-color: var(--red); box-shadow: 0 0 14px rgba(255, 106, 90, .35); }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(8px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #04080d; }
::-webkit-scrollbar-thumb { background: #2c3d4e; border: 1px solid #04080d; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1100px) {
  .frame { padding: 0 8px 30px; }
  .nav-head { grid-template-columns: 1fr; }
  .nav-head::before, .nav-head::after { display: none; }
  .nav-center { order: -1; }
  .home-grid, .hangar-overview, .equip, .gates, .pilot { grid-template-columns: 1fr; grid-template-areas: none; }
  .home-grid > * { grid-area: auto; }
  .equip-body { grid-template-columns: 1fr; }
  .ld-hero { grid-template-columns: 1fr; }
  .info-strip { height: auto; flex-wrap: wrap; gap: 6px; padding: 6px; }
}
@media (max-width: 1015px) {
  .hdr-wrap { max-width: 100%; }
}
@media (max-width: 560px) {
  .ld-top { flex-direction: column; }
  .ld-login { width: 100%; }
  .ld-login input { flex: 1; }
  .ld-pitch h1 { font-size: 38px; }
  .nav-side { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- shop (2016 layout: categories | items | details) */
.shop { display: grid; grid-template-columns: 214px 1fr 300px; gap: 10px; align-items: start; }
#shop-cats { display: flex; flex-direction: column; padding: 4px 0; }
.shop-cat { text-align: left; padding: 8px 14px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .04); background: none; font: 13px var(--font-hea); color: var(--txt); letter-spacing: .4px; }
.shop-cat:hover { color: #fff; background: rgba(98, 192, 255, .06); }
.shop-cat.active { color: #fff; background: linear-gradient(90deg, rgba(98, 192, 255, .22), transparent); box-shadow: inset 3px 0 0 var(--cyan); }
.shop-sub { text-align: left; padding: 5px 14px 5px 26px; border: 0; background: none; font-size: 12px; color: var(--txt-dim); }
.shop-sub:hover, .shop-sub.active { color: var(--gold); }
.shop-main .shop-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.bp-shop-card { cursor: pointer; position: relative; }
.bp-shop-card.selected { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 14px rgba(98, 192, 255, .35); }
.bp-shop-card.owned { opacity: .75; }
.sc-img { position: relative; }
.sc-owned { position: absolute; left: 0; right: 0; bottom: 4px; font: 10px var(--font-hea); color: #9be27a; text-shadow: 0 0 3px #000; }
.bp-shop-price s, .sd-price s { color: var(--txt-dim); font-size: 11px; }
.bp-shop-price small { color: var(--txt-dim); font-size: 10px; }
.shop-detail { position: sticky; top: 8px; }
.sd-img { height: 150px; display: grid; place-items: center; background: radial-gradient(circle, rgba(60, 110, 160, .35), transparent 70%); }
.sd-img img { max-height: 140px; }
.sd-img.ship img { max-height: 150px; }
.sd-name { margin: 8px 0 4px; font: 16px var(--font-hea); color: #fff; }
.sd-desc { margin: 0 0 8px; font-size: 12px; }
.sd-buy { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.sd-amount { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sd-amount input { width: 120px; padding: 5px 7px; border: 1px solid var(--line-hi); background: #03070b; color: #fff; text-align: right; }
.sd-quick { display: flex; gap: 3px; }
.sd-price { font: 18px var(--font-hea); text-align: right; }
.sd-price .c { color: var(--gold); } .sd-price .u { color: var(--cyan); }
.disc-badge { padding: 2px 8px; font: 11px var(--font-hea); color: #1a1000; background: linear-gradient(180deg, #ffe08a, #d69a1c); border-radius: 2px; }

/* ---------------------------------------------------------------- premium / VIP */
.is-vip { padding: 2px 8px; border: 1px solid #fff2c0; border-radius: 2px; font: 12px var(--font-hea); letter-spacing: 1px; color: #1a1000; background: linear-gradient(180deg, #ffe08a, #d69a1c); box-shadow: 0 0 8px rgba(255, 200, 80, .5); }
.vip-chip { display: inline-block; margin-top: 8px; padding: 2px 10px; font: 12px var(--font-hea); color: #1a1000; background: linear-gradient(180deg, #ffe08a, #d69a1c); border-radius: 2px; }
.premium-hero { display: flex; align-items: center; gap: 20px; min-height: 170px; overflow: hidden; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(4, 8, 14, .95) 35%, rgba(4, 8, 14, .4)), url('/assets/maps/bg/background6.jpg?v=oo3') center / cover; }
.ph-art { width: 200px; height: 150px; flex: none; background: url('/assets/ships_top/goliath_top.png') center / contain no-repeat; filter: drop-shadow(0 0 16px rgba(255, 200, 80, .35)); }
.ph-text small { font: 11px var(--font-hea); color: var(--gold); letter-spacing: 2px; }
.ph-text h2 { margin: 4px 0 6px; font: 24px var(--font-hea); color: #fff; }
.ph-text p { margin: 0 0 10px; }
.prem-chip { display: inline-block; margin: 0 6px 4px 0; padding: 3px 8px; font-size: 11px; border: 1px solid var(--line-hi); color: var(--txt-dim); }
.prem-chip.on { border-color: #d69a1c; color: #ffe08a; background: rgba(214, 154, 28, .12); }
.premium-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.prem-card { position: relative; display: flex; flex-direction: column; padding: 14px; background: var(--panel); border: 1px solid var(--line-hi); transition: transform .2s, box-shadow .2s; }
.prem-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .6), 0 0 0 1px var(--cyan); }
.prem-card.best { border-color: #d69a1c; box-shadow: 0 0 18px rgba(214, 154, 28, .3); }
.prem-ribbon { position: absolute; top: 10px; right: -1px; padding: 2px 8px; font: 10px var(--font-hea); color: #1a1000; background: linear-gradient(180deg, #ffe08a, #d69a1c); }
.prem-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.prem-head img { width: 54px; height: 54px; border: 1px solid var(--line-hi); }
.prem-head h3 { margin: 0; font: 15px var(--font-hea); color: #fff; }
.prem-head small { color: var(--txt-dim); }
.prem-card ul { flex: 1; margin: 0 0 12px; padding-left: 16px; font-size: 12px; }
.prem-card li { margin-bottom: 3px; }
.prem-price { font: 26px var(--font-hea); color: #ffe08a; text-align: center; margin-bottom: 8px; text-shadow: 0 0 10px rgba(255, 200, 80, .35); }
.btn-start.small { padding: 8px 10px; font-size: 14px; width: 100%; }
.premium-lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.logbook-panel { margin-bottom: 10px; }
.logbook-panel .panel-head { display: flex; align-items: center; }
.lb-body { max-height: 340px; overflow-y: auto; }
.lb-body td.lb-time { width: 96px; color: var(--txt-dim); white-space: nowrap; border-left: 2px solid #33485a; }
.lb-body tr.lb-kill td.lb-time { border-left-color: #6d8fa8; }
.lb-body tr.lb-death td.lb-time { border-left-color: #a2463c; }
.lb-body tr.lb-loot td.lb-time { border-left-color: #b89344; }
.lb-body tr.lb-quest td.lb-time, .lb-body tr.lb-gate td.lb-time { border-left-color: #4d86b8; }
.lb-body tr.lb-death td:last-child { color: #d9968c; }
.lb-body td b { color: #e3edf5; font-weight: normal; }
.bullets.num { list-style: decimal; }
.ok { color: #9be27a; } .err, .bad { color: var(--red); } .gold { color: var(--gold); }
.order-code { margin: 6px auto 12px; padding: 8px 16px; display: inline-block; font: 22px var(--font-hea); letter-spacing: 2px; color: #ffe08a; border: 1px dashed #d69a1c; user-select: all; }
#tab-admin select { padding: 5px; background: #03070b; color: #fff; border: 1px solid var(--line-hi); }

/* ---------------------------------------------------------------- clan */
.clan-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; align-items: start; }
.clan-side { display: grid; gap: 10px; }
.clan-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.clan-top h3 { margin: 0 0 4px; font: 18px var(--font-hea); color: #fff; }
.clan-top p { margin: 0 0 4px; }
.clan-logo.small { width: 72px; height: 72px; }
.stack-form { display: grid; gap: 8px; margin-top: 10px; }
.stack-form label { display: grid; gap: 3px; font-size: 12px; color: var(--txt-dim); }
.stack-form label.check { display: flex; align-items: center; gap: 6px; }
.stack-form input:not([type=checkbox]), .stack-form textarea { padding: 6px 8px; border: 1px solid var(--line-hi); background: #03070b; color: #fff; font: 13px var(--font); resize: vertical; }
.ph-search { padding: 2px 6px; border: 1px solid var(--line-hi); background: #03070b; color: #fff; font: 12px var(--font); }
#cm-news .cal-row { display: block; }

/* ---------------------------------------------------------------- pilot sheet */
.skills-panel { margin-top: 10px; }
.pilot-badges { min-height: 10px; }
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.skill { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); background: rgba(13, 22, 32, .7); }
.skill.max { border-color: #d69a1c; }
.skill img { width: 44px; height: 44px; }
.sk-info { flex: 1; }
.sk-info b { color: #fff; font-weight: normal; font-family: var(--font-hea); }
.sk-info small { display: block; color: var(--txt-dim); font-size: 11px; }
.sk-pips { display: flex; gap: 3px; margin-top: 4px; }
.sk-pips i { width: 16px; height: 5px; background: #1b2733; border: 1px solid #2d3f50; }
.sk-pips i.on { background: linear-gradient(180deg, #ffd66b, #c48a12); border-color: #ffd66b; }

/* ---------------------------------------------------------------- skylab */
.skylab { grid-template-columns: repeat(4, 1fr); }
.sky-module img { width: 40px; height: 40px; display: block; margin: 0 auto 4px; }
.sky-module em { display: block; font-style: normal; font-size: 11px; color: var(--txt-dim); }
.sky-module.ore::before { content: ''; display: block; width: 26px; height: 26px; margin: 4px auto 8px; transform: rotate(45deg); }
.sky-module.prometium::before { background: #ff4a3a; box-shadow: 0 0 10px #ff4a3a; }
.sky-module.endurium::before { background: #3a8cff; box-shadow: 0 0 10px #3a8cff; }
.sky-module.terbium::before { background: #ffd23a; box-shadow: 0 0 10px #ffd23a; }
.sky-storage { margin: 12px 0; padding: 10px; border: 1px solid var(--line); background: rgba(3, 7, 11, .6); }
.sky-store-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.sky-store-row b { color: #fff; font-weight: normal; }
.ore-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; transform: rotate(45deg); }
.ore-dot.prometium { background: #ff4a3a; } .ore-dot.endurium { background: #3a8cff; } .ore-dot.terbium { background: #ffd23a; }
.sg-title { font: 12px var(--font-hea); color: var(--gold); margin-bottom: 6px; }

@media (max-width: 1100px) {
  .shop { grid-template-columns: 160px 1fr; }
  .shop-detail { grid-column: 1 / -1; position: static; }
  .premium-grid { grid-template-columns: repeat(2, 1fr); }
  .clan-grid, .premium-lower { grid-template-columns: 1fr; }
}
.sk-icon { flex: none; width: 74px; height: 85px; transform: scale(.7); margin: -12px -10px; background: url('/assets/ui/skills/oo_skills.png?v=oo1') no-repeat; }
.skill:not(.max) .sk-icon { filter: saturate(.85); }

/* ---------------------------------------------------------------- skylab (module station) */
.sky-hero { display: flex; align-items: center; gap: 24px; min-height: 190px; margin-bottom: 10px; overflow: hidden;
  background: linear-gradient(90deg, rgba(4, 8, 14, .2), rgba(4, 8, 14, .95) 45%), url('/assets/maps/bg/background13.jpg?v=oo3') center / cover; }
.sky-station { position: relative; width: 260px; height: 180px; flex: none; }
.sky-station i { position: absolute; display: block; }
.st-core { left: 105px; top: 65px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d7e6f2, #5d7285 55%, #1b2631); box-shadow: 0 0 22px rgba(120, 190, 255, .55); }
.st-ring { left: 70px; top: 30px; width: 120px; height: 120px; border-radius: 50%; border: 6px solid #3d5163; box-shadow: inset 0 0 0 2px #7d95aa, 0 0 12px rgba(0, 0, 0, .8); animation: skySpin 40s linear infinite; }
.st-ring::after { content: ''; position: absolute; left: 50%; top: -9px; width: 10px; height: 10px; margin-left: -5px; background: #7fd0ff; border-radius: 50%; box-shadow: 0 0 10px #7fd0ff; }
.st-arm { height: 6px; background: linear-gradient(180deg, #8ea3b6, #2c3b48); top: 87px; }
.st-arm.a1 { left: 10px; width: 70px; } .st-arm.a2 { left: 180px; width: 70px; }
.st-arm.a3 { left: 127px; top: 0; width: 6px; height: 40px; background: linear-gradient(90deg, #8ea3b6, #2c3b48); }
.st-panel { top: 62px; width: 34px; height: 56px; background: repeating-linear-gradient(90deg, #1d4d86 0 7px, #0b2140 7px 9px), #0b2140; border: 1px solid #6fa8e0; box-shadow: 0 0 10px rgba(80, 160, 255, .4); }
.st-panel.p1 { left: 0; } .st-panel.p2 { left: 226px; }
@keyframes skySpin { to { transform: rotate(360deg); } }
.sky-hero-info { flex: 1; }
.sky-hero-info small { font: 11px var(--font-hea); color: var(--gold); letter-spacing: 2px; }
.sky-hero-info h2 { margin: 4px 0 12px; font: 22px var(--font-hea); color: #fff; }
.sky-energy { display: flex; align-items: center; gap: 10px; max-width: 520px; }
.sky-energy span { font: 11px var(--font-hea); color: var(--txt-dim); width: 60px; }
.sky-energy b { color: #fff; font-weight: normal; white-space: nowrap; }
.sky-ebar { flex: 1; height: 10px; background: #03070b; border: 1px solid var(--line-hi); }
.sky-ebar div { height: 100%; background: linear-gradient(90deg, #2aa9ff, #9be2ff); transition: width .4s; }
.sky-ebar div.over { background: linear-gradient(90deg, #d0402f, #ff9a6a); }
.sky-ebar.build { margin: 4px 0 6px; max-width: 520px; }
.sky-ebar.build div { background: linear-gradient(90deg, #c48a12, #ffd66b); }
.sky-build { margin-top: 12px; max-width: 520px; }
.sb-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; }
.sb-row b { color: #fff; font-weight: normal; white-space: nowrap; }
.sky-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; align-items: start; }
.sky-side { display: grid; gap: 10px; }
.sky-mod { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.sky-mod:hover { background: rgba(98, 192, 255, .04); }
.sky-mod.off { opacity: .6; }
.sky-mod.building { background: linear-gradient(90deg, rgba(240, 180, 60, .12), transparent); }
.sm-icon { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-hi); background: radial-gradient(circle, #1a2a3a, #05090e); }
.sm-icon img { max-width: 46px; max-height: 46px; }
.sm-icon b { position: absolute; right: -1px; bottom: -1px; min-width: 18px; padding: 0 3px; font: 11px/16px var(--font-hea); color: #1a1000; background: var(--gold); text-align: center; }
.sm-info { flex: 1; min-width: 0; }
.sm-info b { font: 13px var(--font-hea); color: #fff; font-weight: normal; }
.sm-info small { display: block; color: var(--txt-dim); font-size: 11px; }
.sm-stat { font-size: 12px; color: #9be27a; margin-top: 2px; }
.sm-stat .en { color: #7fd0ff; }
.sk-pips i.lock { opacity: .3; }
.sm-act { display: grid; justify-items: end; gap: 4px; flex: none; text-align: right; }
.sm-act small { font-size: 11px; color: var(--txt); }
.sky-ore { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.sky-ore img { width: 34px; height: 34px; }
.sky-ore > div { flex: 1; }
.so-head { display: flex; justify-content: space-between; font-size: 12px; }
.so-head b { color: #fff; font-weight: normal; }
.sky-bar { height: 7px; margin-top: 3px; background: #03070b; border: 1px solid var(--line); }
.sky-bar div { height: 100%; }
.sky-bar.prometium div { background: #ff4a3a; } .sky-bar.endurium div { background: #3a8cff; } .sky-bar.terbium div { background: #ffd23a; }
.sky-bar.prometid div { background: #ff6ad5; } .sky-bar.duranium div { background: #4aff6a; } .sky-bar.promerium div { background: #ff9a2a; }
.sky-dir { display: flex; gap: 4px; margin: 6px 0 4px; }
.sky-dir .ph-tab { flex: 1; padding: 5px 8px; }
.sky-tr { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.sky-tr small { color: var(--txt-dim); font-size: 10px; }
.sky-tr img { width: 24px; height: 24px; }
.sky-tr span { flex: 1; }
.sky-tr input { width: 90px; padding: 3px 6px; border: 1px solid var(--line-hi); background: #03070b; color: #fff; text-align: right; }
#sky-transports { margin-top: 8px; }
@media (max-width: 1100px) { .sky-grid { grid-template-columns: 1fr; } .sky-station { display: none; } }
.gate-card.ready { border-color: #9be27a; box-shadow: 0 0 14px rgba(155, 226, 122, .45); }
#gg-complete { margin-top: 10px; }

/* ---------------------------------------------------------------- galaxy gates page */
.gg { display: grid; grid-template-columns: 230px 1fr 270px; gap: 12px; }
.gg > div { border: 1px solid var(--line); background: linear-gradient(180deg, #0b1219, #060a0f); }
.gg-list { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.gg-item { display: flex; align-items: center; gap: 8px; padding: 6px; text-align: left; border: 1px solid #1c2a36; background: #070c11; cursor: pointer; }
.gg-item:hover { border-color: #3b5569; }
.gg-item.active { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.gg-item.ready { box-shadow: 0 0 10px rgba(155, 226, 122, .35); }
.gg-item.ready.active { box-shadow: inset 3px 0 0 var(--gold), 0 0 10px rgba(155, 226, 122, .35); }
.gg-thumb { width: 44px; height: 54px; flex: none; background-size: 924px 54px; background-position: 0 0; background-repeat: no-repeat; }
.gg-item-txt { flex: 1; min-width: 0; }
.gg-item-txt b { font: 13px var(--font-hea); color: #fff; font-weight: normal; letter-spacing: 1px; }
.gg-item-txt small { color: var(--txt-dim); font-size: 11px; }
.gg-main { display: flex; flex-direction: column; }
.gg-stage { position: relative; min-height: 330px; display: flex; flex-direction: column; align-items: center; padding: 12px; background: radial-gradient(ellipse at 50% 45%, rgba(40, 90, 140, .25), transparent 65%), url(/assets/maps/bg/background51.jpg) center/cover; }
.gg-stage-title { align-self: stretch; display: flex; justify-content: space-between; align-items: baseline; }
.gg-stage-title b { font: 18px var(--font-hea); color: #fff; font-weight: normal; letter-spacing: 2px; text-shadow: 0 0 8px #000; }
.gg-stage-title span { font-size: 12px; color: #9fd0ff; }
.gg-anim { width: 177px; height: 217px; margin: 6px 0; background-repeat: no-repeat; background-position: 0 0; animation: gg-frames 1.6s steps(21) infinite; filter: grayscale(.6) brightness(.8); opacity: .85; transition: filter .4s, opacity .4s; }
.gg-anim.built { filter: none; opacity: 1; }
@keyframes gg-frames { to { background-position: -3717px 0; } }
.gg-parts { width: 70%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gg-parts-bar { width: 100%; height: 12px; border: 1px solid #2b4152; background: #02060a; }
.gg-parts-bar div { height: 100%; width: 0; background: linear-gradient(90deg, #1b6fb0, #7fd0ff); box-shadow: 0 0 8px #3aa0ff; transition: width .4s; }
.gg-parts span { font-size: 12px; color: #cfe6ff; text-shadow: 0 0 4px #000; }
.gg-run { margin-top: 6px; font-size: 12px; color: #ffcf6a; }
.gg-run b { color: #ff6a6a; letter-spacing: 2px; }
.gg-stage #gg-complete { margin-top: 10px; }
.gg-machine-body { display: flex; gap: 12px; padding: 10px; }
.gg-energy { position: relative; width: 120px; height: 120px; flex: none; display: grid; place-items: center; }
.gg-ring { max-width: 118px; animation: spin 18s linear infinite; }
.gg-ring.spin-fast { animation: spin 18s linear infinite, gg-flash .8s ease-out; }
@keyframes gg-flash { from { filter: brightness(2.2) drop-shadow(0 0 12px #6cf); } to { filter: none; } }
.gg-multi { position: absolute; font: 20px var(--font-hea); color: #556; }
.gg-multi.on { color: #ffd24a; text-shadow: 0 0 8px #f90; }
.gg-spin-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gg-spin-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.gg-check { font-size: 12px; color: #cfe6ff; display: flex; gap: 6px; align-items: center; }
.gg-info-body { padding: 8px 10px; font-size: 12px; color: #cfd8e0; }
.gg-info-body h4 { margin: 8px 0 2px; font: 12px var(--font-hea); color: var(--gold); letter-spacing: 1px; font-weight: normal; }
.gg-info-body p { margin: 0; }
.gg-info-body ul { margin: 0; padding-left: 16px; }
.gg-note { color: #9fd0ff; }
.gg-info .gen-log { margin: 6px; max-height: 220px; }
.gg-log-item span { color: #f0b43c; font-size: 10px; margin-right: 4px; }
.gg-log-item.part span { color: #7fd0ff; }
.gg-log-item.multi span { color: #ffd24a; }
@media (max-width: 1100px) { .gg { grid-template-columns: 1fr; } .gg-list { flex-direction: row; flex-wrap: wrap; } .gg-item { flex: 1 1 180px; } }

/* original resource icons instead of coloured dots */
.ore-dot { width: 20px !important; height: 20px !important; transform: none !important; vertical-align: middle; background: center/contain no-repeat !important; }
.ore-dot.prometium { background-image: url(/assets/do_items/resource/ore/prometium_30x30.png) !important; }
.ore-dot.endurium { background-image: url(/assets/do_items/resource/ore/endurium_30x30.png) !important; }
.ore-dot.terbium { background-image: url(/assets/do_items/resource/ore/terbium_30x30.png) !important; }
.ore-dot.prometid { background-image: url(/assets/do_items/resource/ore/prometid_30x30.png) !important; }
.ore-dot.duranium { background-image: url(/assets/do_items/resource/ore/duranium_30x30.png) !important; }
.ore-dot.promerium { background-image: url(/assets/do_items/resource/ore/promerium_30x30.png) !important; }
.ore-dot.palladium { background-image: url(/assets/do_items/resource/ore/palladium_30x30.png) !important; }
.ore-dot.xenomit { background-image: url(/assets/do_items/resource/ore/xenomit_30x30.png) !important; }
.ore-dot.seprom { background-image: url(/assets/do_items/resource/ore/seprom_30x30.png) !important; }

/* ---------------------------------------------------------------- Skylab (original window layout) */
.sky-ui { position: relative; width: 792px; margin: 0 auto 12px; padding: 0 7px 8px; border: 1px solid #3a4652; border-radius: 3px;
  background: linear-gradient(180deg, #2a3138, #15191e); box-shadow: 0 6px 24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sky-titlebar { display: flex; align-items: center; height: 30px; margin: 0 -7px 6px; padding: 0 10px;
  background: linear-gradient(90deg, #2c5c86 0, #1d3c58 180px, #1a222a 181px, #1a222a); border-bottom: 1px solid #0a0d10; }
.sky-titlebar span { font: 13px var(--font-hea); color: #fff; letter-spacing: 1px; }
.sky-refresh { margin-left: auto; width: 22px; height: 22px; border: 1px solid #4b5b69; border-radius: 3px; background: #1a2229 center / 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 0 6 6h-2a4 4 0 1 1-1.2-2.8L9 7h5V2l-1.8 1.8A6 6 0 0 0 8 2z' fill='%23cfe2f0'/%3E%3C/svg%3E"); }
.sky-ores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 4px; }
.sky-orebox { padding: 2px 5px 3px; background: #050607; border: 1px solid #2f3942; text-align: center; font-size: 11px; line-height: 13px; }
.sky-orebox b { display: block; font-weight: normal; font-size: 11px; }
.sky-orebox span { display: block; color: #fff; font-variant-numeric: tabular-nums; }
.sky-cap { position: relative; height: 11px; margin-top: 2px; background: #3a3f45; }
.sky-cap div { height: 100%; background: linear-gradient(180deg, #b9c2c9, #7d868d); }
.sky-cap i { position: absolute; inset: 0; font-style: normal; font-size: 9px; line-height: 11px; color: #111; }
.sky-scene { position: relative; width: 778px; height: 350px; background: #000 url('/assets/skylab_scene.jpg') no-repeat; border: 1px solid #0d1114; }
.sky-lbl { position: absolute; padding: 1px 4px; border: 1px solid transparent; background: none; text-align: left; cursor: pointer; white-space: nowrap; }
.sky-lbl b { display: block; font: 12px var(--font-hea); color: #fff; font-weight: normal; text-shadow: 0 1px 2px #000; }
.sky-lbl div { display: flex; gap: 8px; margin-top: 1px; font: 11px var(--font-hea); }
.sky-lbl .lv { color: #8fd0ff; padding-left: 16px; background: no-repeat 0 50% / 12px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Crect x='0' y='7' width='3' height='4' fill='%237fc6ff'/%3E%3Crect x='4' y='4' width='3' height='7' fill='%237fc6ff'/%3E%3Crect x='8' y='0' width='3' height='11' fill='%237fc6ff'/%3E%3C/svg%3E"); }
.sky-lbl .en { color: #ffe04a; padding-left: 11px; background: no-repeat 0 50% / 8px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M5 0L0 7h3l-1 5 6-8H5z' fill='%23ffe04a'/%3E%3C/svg%3E"); }
.sky-lbl .eff { color: #fff; padding-left: 13px; background: no-repeat 0 50% / 11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm6.5 4-1.6-.4a5 5 0 0 1-.5 1.2l.8 1.4-1.4 1.4-1.4-.8a5 5 0 0 1-1.2.5L8.8 14H7.2l-.4-1.6a5 5 0 0 1-1.2-.5l-1.4.8-1.4-1.4.8-1.4a5 5 0 0 1-.5-1.2L1.5 9V7l1.6-.4a5 5 0 0 1 .5-1.2l-.8-1.4 1.4-1.4 1.4.8a5 5 0 0 1 1.2-.5L7.2 2h1.6l.4 1.6a5 5 0 0 1 1.2.5l1.4-.8 1.4 1.4-.8 1.4a5 5 0 0 1 .5 1.2L14.5 7z' fill='%23fff'/%3E%3C/svg%3E"); }
.sky-lbl:hover { border-color: rgba(143, 208, 255, .45); background: rgba(10, 30, 50, .45); }
.sky-lbl.sel { border-color: #ffcf5a; background: rgba(40, 30, 5, .45); }
.sky-lbl.off b { color: #9aa5ae; }
.sky-lbl.building b { color: #ffcf5a; }
.sky-lbl.locked { cursor: default; opacity: .55; }
.sky-foot { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.sky-foot .sky-energy { flex: 1; }
.sky-foot .sky-build { flex: 1; }
.sky-det { display: flex; gap: 14px; align-items: flex-start; }
.sd-lv { width: 64px; text-align: center; padding: 6px 0; border: 1px solid #2f3a44; background: #070b0f; }
.sd-lv b { display: block; font: 26px var(--font-hea); color: #8fd0ff; }
.sd-lv small { color: #7f93a6; }
.sd-info { flex: 1; }
.sd-info p { margin: 0 0 6px; color: #c9d7e4; }
.sd-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 12px; }
.sd-row span { color: #7f93a6; }
.sd-row b { color: #fff; font-weight: normal; }
.sd-row b.en { color: #ffe04a; }
.sd-act { align-self: center; }
@media (max-width: 860px) { .sky-ui { width: auto; overflow-x: auto; } }

/* ---------------------------------------------------------------- galaxy gates (original gatebuilder layout) */
.ggx-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.ggx { position: relative; width: 786px; height: 395px; flex: none; background: url('/assets/galaxy_gates/ui/main_bg.png') no-repeat; font-family: var(--font-hea); zoom: 1.35; }
@media (max-width: 1100px) { .ggx { zoom: 1; } }
@media (max-width: 800px) { .ggx-wrap { overflow-x: auto; justify-content: flex-start; } }
.ggx-sel { position: absolute; left: 0; top: 20px; width: 180px; max-height: 366px; overflow-y: auto; scrollbar-width: thin; }      /* eleven gates (Hades and Cryo were cut off the frame); more would scroll */
.ggx-selbtn { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 180px; height: 34px; padding: 0 26px 0 18px; border: 0;
  background: url('/assets/galaxy_gates/ui/sel_btn_1.png') no-repeat 0 0 / 180px 34px; color: #b9c9d6; cursor: pointer; }
.ggx-selbtn:hover { background-image: url('/assets/galaxy_gates/ui/sel_btn_2.png'); background-size: 180px 34px; color: #fff; }
.ggx-selbtn.active { background-image: url('/assets/galaxy_gates/ui/sel_btn_3.png'); background-size: 180px 34px; color: #06121c; }
.ggx-selbtn b { font-size: 11px; font-weight: normal; letter-spacing: 1px; white-space: nowrap; }
.ggx-selbtn small { font-size: 9px; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ggx-selbtn.ready:not(.active) b { color: #9fff7d; }
.ggx-sep { display: block; width: 180px; height: 15px; margin: -5px 0 -5px; background: url('/assets/galaxy_gates/ui/sel_sep.png') no-repeat; }
.ggx-title { position: absolute; left: 245px; top: 14px; width: 220px; text-align: center; font-size: 13px; color: #bcd3e3; letter-spacing: 1px; }
.ggx-gate { position: absolute; left: 190px; top: 54px; width: 329px; height: 288px; }
.ggx-finished { position: absolute; left: 200px; top: 62px; width: 280px; font-size: 12px; line-height: 1.35; color: #ffcf5a; text-shadow: 0 0 4px #000, 0 1px 3px #000; }
.ggx-lives, .ggx-waves { position: absolute; left: 198px; font-size: 11px; color: #ccc; text-shadow: 0 1px 2px #000; }
.ggx-lives { top: 290px; } .ggx-waves { top: 308px; }
.ggx-progress { position: absolute; left: 390px; top: 300px; width: 120px; text-align: right; font-size: 20px; color: #ccc; text-shadow: 0 1px 3px #000; }
.ggx-jump { position: absolute; left: 400px; top: 336px; width: 118px; height: 52px; border: 0; padding: 0 14px 0 8px; background: url('/assets/galaxy_gates/ui/jump_btn_1.png') no-repeat;
  color: #fff; font: 10px/1.1 var(--font-hea); text-shadow: 0 1px 1px #000; cursor: pointer; }
.ggx-jump:hover { background-image: url('/assets/galaxy_gates/ui/jump_btn_2.png'); }
.ggx-jump:active { background-image: url('/assets/galaxy_gates/ui/jump_btn_3.png'); }
.ggx-diff { position: absolute; left: 198px; top: 328px; display: flex; gap: 3px; }
.ggx-diff button { width: 60px; height: 20px; border: 1px solid #3a4c5c; background: linear-gradient(#27333f, #121a22); color: #9fb4c4; font: 10px var(--font-hea); cursor: pointer; }
.ggx-diff button:hover { color: #fff; }
.ggx-diff button.active { border-color: #c9a13c; color: #ffcf5a; background: linear-gradient(#3a3322, #1c170c); }
.ggx-jump:disabled { background-image: url('/assets/galaxy_gates/ui/jump_btn_4.png'); color: #9aa3aa; cursor: default; }
.ggx-stats { position: absolute; left: 524px; top: 0; width: 262px; height: 43px; padding: 24px 18px 0; line-height: 15px; background: url('/assets/galaxy_gates/ui/stats_bg.png') no-repeat;
  display: flex; justify-content: space-between; font-size: 10px; color: #9fb4c4; }
.ggx-stats b { color: #fff; font-weight: normal; }
.ggx-multi { position: absolute; left: 524px; top: 43px; width: 262px; height: 84px; background: url('/assets/galaxy_gates/ui/multiplier_bg.png') no-repeat; }
.ggx-head { width: 136px; height: 22px; margin: 6px auto 0; background: url('/assets/galaxy_gates/ui/headline_bg.png') no-repeat; text-align: center; font-size: 10px; line-height: 22px; color: #bcd3e3; letter-spacing: 1px; }
.ggx-mval { position: absolute; left: 22px; top: 30px; font-size: 20px; line-height: 22px; color: #556270; }
.ggx-mval.on { color: #ffcf5a; text-shadow: 0 0 8px #f90; }
.ggx-check { position: absolute; left: 80px; top: 33px; display: flex; gap: 5px; align-items: center; font: 10px var(--font); color: #cfe0ec; }
.ggx-machine { position: absolute; left: 524px; top: 127px; width: 262px; height: 78px; background: url('/assets/galaxy_gates/ui/machine_bg.png') no-repeat; }
.ggx-energy { position: absolute; left: 37px; top: 9px; width: 178px; height: 40px; border: 0; background: url('/assets/galaxy_gates/ui/energy_btn_1.png') no-repeat;
  color: #fff; font: 13px var(--font-hea); letter-spacing: 1px; text-shadow: 0 1px 2px #000; cursor: pointer; }
.ggx-energy:hover { background-image: url('/assets/galaxy_gates/ui/energy_btn_2.png'); }
.ggx-energy:active { background-image: url('/assets/galaxy_gates/ui/energy_btn_3.png'); }
.ggx-energy:disabled { background-image: url('/assets/galaxy_gates/ui/energy_btn_4.png'); }
.ggx-amount { position: absolute; left: 22px; top: 44px; width: 215px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; color: #cfe0ec; }
.ggx-arrow { width: 21px; height: 16px; border: 0; background: url('/assets/galaxy_gates/ui/spin_arrow_1.png') no-repeat; cursor: pointer; }
.ggx-arrow.prev { transform: rotate(90deg); }
.ggx-arrow.next { transform: rotate(-90deg); }
.ggx-arrow:hover { background-image: url('/assets/galaxy_gates/ui/spin_arrow_2.png'); }
.ggx-log { position: absolute; left: 524px; top: 205px; width: 262px; height: 190px; }
.ggx-lines { height: 158px; margin: 4px 10px 0 12px; overflow-y: auto; font: 10px var(--font); }
.ggx-line { padding: 2px 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: #cfe0ec; }
.ggx-line.part { color: #7fd0ff; }
.ggx-line.multi { color: #ffcf5a; }
.gg-info-panel { max-width: 1060px; margin: 0 auto; }
.gg-info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gg-info-body h4 { margin: 8px 0 2px; font: 12px var(--font-hea); color: var(--gold); letter-spacing: 1px; font-weight: normal; }
.gg-info-body p { margin: 0; }

/* hall of fame */
.hof-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.hof-tabs, .hof-comp { display: flex; flex-wrap: wrap; gap: 3px; }
.hof-comp img { width: 12px; height: 12px; vertical-align: -2px; }
.rank-table tr.sep td { text-align: center; color: var(--txt-dim); }

.auc-tabs { display: flex; gap: 3px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.auc-note { margin: 8px 10px; font-size: 11px; }

/* message box */
.is-mail { position: relative; }
.is-mail b { position: absolute; right: -5px; top: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #d93a2b; color: #fff; font: 9px/15px var(--font-hea); }
.mail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.mail-list { max-height: 520px; overflow-y: auto; }
.hs-bonus { color: #ffd37a; font-size: 11px; }
.equip-bonus { margin: 8px 0 4px; padding: 5px 8px; border-left: 3px solid #f0b43c; background: rgba(240,180,60,.14); color: #ffe3a0; font-size: 12px; line-height: 1.35; }
.equip-bonus.hidden { display: none; }
.mail-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
.mail-tools .hidden { display: none; }
.mail-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: #b9c8d6; cursor: pointer; }
.mail-row:hover { background: rgba(255, 255, 255, .04); }
.mail-row.unread b { color: #ffcf5a; }
.mail-row.unread span { color: #fff; }
.mail-row small { color: var(--txt-dim); font-size: 10px; }
.mail-side { display: flex; flex-direction: column; gap: 12px; }
.mail-meta { font-size: 11px; color: var(--txt-dim); margin-bottom: 8px; }
.mail-text { white-space: normal; line-height: 1.5; color: #dfe9f2; }
.cm-log { max-height: 140px; overflow-y: auto; margin-top: 6px; }
.clan-main { display: grid; gap: 10px; align-content: start; }
.cbs-card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 32, 44, .7), rgba(6, 12, 18, .7)); padding: 8px; margin-bottom: 8px; }
.cbs-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cbs-card-head b { font: 13px var(--font-hea); color: #c8e4ff; }
.cbs-state { padding: 1px 6px; border: 1px solid var(--line); font-size: 10px; text-transform: uppercase; color: var(--txt-dim); }
.cbs-state.active { border-color: #4f8f3a; color: #9fe07a; }
.cbs-state.building { border-color: #8f7a2a; color: #ffd25a; }
.cbs-line { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 11px; }
.cbs-line > span:first-child { width: 78px; color: var(--txt-dim); }
.cbs-line small { flex: 1; color: var(--txt-dim); }
.cbs-line .cbs-bar { flex: 1; }
.cbs-bar { height: 4px; margin-top: 2px; background: #02060a; border: 1px solid #1c2a36; }
.cbs-bar div { height: 100%; }
.cbs-bar.hp div { background: #2fd24f; }
.cbs-bar.sh div { background: #2aa3ff; }
.cbs-bar.build div { background: linear-gradient(90deg, #c48a12, #ffd66b); }
.cbs-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; margin-top: 6px; }
.cbs-slot { position: relative; padding: 4px 6px; border: 1px solid #22313f; background: #0a1118; min-height: 46px; font-size: 11px; }
.cbs-slot b { color: var(--gold, #f2b640); font-weight: normal; }
.cbs-slot small { display: block; font-size: 10px; }
.cbs-slot.empty { border-style: dashed; }
.cbs-slot select { max-width: 96px; padding: 1px 2px; background: #03070b; color: #fff; border: 1px solid var(--line-hi); font-size: 10px; }
.cbs-x { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; padding: 0; border: 1px solid #3b4d5f; background: #16202a; color: #b9cbdc; font-size: 11px; line-height: 13px; cursor: pointer; }
.cbs-x:hover { border-color: #6fc2ff; color: #fff; }
.cbs-h { margin: 10px 0 5px; font: 11px var(--font-hea); color: #9fb7cc; letter-spacing: .5px; }
.cbs-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; }
.cbs-mod { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; column-gap: 5px; align-items: center; padding: 3px; border: 1px solid #22313f; background: #0a1118; font-size: 10px; }
.cbs-mod img { grid-row: span 2; width: 30px; height: 30px; }
.cbs-mod small { grid-column: 2; color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbs-mod span { grid-row: 1 / span 2; grid-column: 3; color: #fff; }
.cbs-mod.none { opacity: .45; }
@media (max-width: 900px) { .mail-grid { grid-template-columns: 1fr; } }

/* galaxy gates: scaled stage, icon popups, materializer flash */
.ggx { zoom: 1; box-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.ggx-wrap { overflow: hidden; }
.ggx-icons { position: absolute; left: 492px; top: 60px; display: flex; flex-direction: column; gap: 4px; }
.ggx-ic { width: 19px; height: 20px; border: 0; padding: 0; background: no-repeat center; cursor: pointer; }
.ggx-ic.reward { background-image: url('/assets/galaxy_gates/ui/ic_reward_1.png'); } .ggx-ic.reward:hover { background-image: url('/assets/galaxy_gates/ui/ic_reward_2.png'); }
.ggx-ic.info { background-image: url('/assets/galaxy_gates/ui/ic_info_1.png'); } .ggx-ic.info:hover { background-image: url('/assets/galaxy_gates/ui/ic_info_2.png'); }
.ggx-ic.help { background-image: url('/assets/galaxy_gates/ui/ic_help_1.png'); } .ggx-ic.help:hover { background-image: url('/assets/galaxy_gates/ui/ic_help_2.png'); }
.ggx-ic.chance { background-image: url('/assets/galaxy_gates/ui/ic_chance_1.png'); } .ggx-ic.chance:hover { background-image: url('/assets/galaxy_gates/ui/ic_chance_2.png'); }
.ggx-popup { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.ggp-win { position: relative; width: 360px; height: 262px; background: url('/assets/galaxy_gates/ui/popup_bg.png') no-repeat; box-shadow: 0 0 30px #000; }
.ggp-head { display: flex; align-items: center; height: 38px; padding: 0 10px 0 16px; font-size: 12px; color: #fff; letter-spacing: 1px; }
.ggp-close { margin-left: auto; width: 26px; height: 27px; border: 0; background: url('/assets/galaxy_gates/ui/pop_close_1.png') no-repeat; cursor: pointer; }
.ggp-close:hover { background-image: url('/assets/galaxy_gates/ui/pop_close_2.png'); }
.ggp-body { height: 210px; overflow-y: auto; padding: 6px 18px; font: 11px/1.45 var(--font); color: #cfe0ec; }
.ggp-body h4 { margin: 6px 0 2px; color: #ffcf5a; font: 11px var(--font-hea); letter-spacing: 1px; font-weight: normal; }
.ggp-body p { margin: 0 0 6px; }
.ggp-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ggp-rw { padding: 5px 8px; border: 1px solid #2c4254; background: rgba(10, 25, 40, .7); color: #fff; }
.ggp-note { margin-top: 8px; color: #8fd0ff; }
.ggp-table { width: 100%; border-collapse: collapse; }
.ggp-table td { padding: 4px 2px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ggp-table td:last-child { text-align: right; color: #ffcf5a; }
.ggx-materializer { position: absolute; left: 536px; top: 209px; width: 238px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: url('/assets/galaxy_gates/ui/materializer_bg.png') no-repeat; font: 11px var(--font-hea); color: #fff; text-shadow: 0 0 6px #3af, 0 1px 2px #000; opacity: 0; pointer-events: none; }
.ggx-materializer .part { color: #8fe0ff; } .ggx-materializer .multi { color: #ffcf5a; }
.ggx-materializer.show { animation: ggMat 2.2s ease-out; }
@keyframes ggMat { 0% { opacity: 0; filter: brightness(3); } 10% { opacity: 1; filter: brightness(1.6); } 75% { opacity: 1; filter: none; } 100% { opacity: 0; } }

/* Skylab: full width station window with pop-up module windows */
.sky-wrap { display: flex; justify-content: center; overflow: hidden; margin-bottom: 12px; }
.sky-ui { flex: none; margin: 0; }
.sky-titlebar { gap: 6px; }
.sky-tb-btns { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.sky-tb-btns .sky-refresh { margin-left: 0; }
.sky-tbtn { height: 22px; padding: 0 10px; border: 1px solid #4b6b86; border-radius: 3px; background: linear-gradient(180deg, #2f5577, #1a3148); color: #dff0ff; font: 10px var(--font-hea); letter-spacing: 1px; cursor: pointer; }
.sky-tbtn:hover { filter: brightness(1.25); }
.sky-pop { position: absolute; inset: 30px 0 0; z-index: 5; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.sky-win { width: 470px; max-height: 390px; display: flex; flex-direction: column; border: 1px solid #4a5866; border-radius: 3px;
  background: linear-gradient(180deg, #2b3239, #161a1f); box-shadow: 0 10px 40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sky-win-head { display: flex; align-items: center; height: 26px; padding: 0 6px 0 10px; background: linear-gradient(90deg, #2c5c86 0, #1d3c58 60%, #1a222a); border-bottom: 1px solid #0a0d10; font: 12px var(--font-hea); color: #fff; letter-spacing: 1px; }
.sky-win-x { margin-left: auto; width: 20px; height: 20px; border: 1px solid #5d6b78; border-radius: 3px; background: #1a2229; color: #cfe2f0; font-size: 14px; line-height: 16px; cursor: pointer; }
.sky-win-x:hover { background: #7a2a22; }
.sky-win-body { padding: 10px 12px; overflow-y: auto; }
.sky-cap-line { margin-bottom: 6px; font-size: 11px; color: #9fb4c4; }
.sky-cap-line b { color: #fff; font-weight: normal; }
.sd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .07); }
.sd-prog { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 11px; color: #ffcf5a; }
.sd-prog .sky-ebar { grid-column: 1 / -1; }
.sky-win .sky-tr { display: grid; grid-template-columns: 24px 1fr 110px auto; gap: 6px; align-items: center; margin-bottom: 4px; }
.sky-win .sky-tr img { width: 22px; height: 22px; }
.sky-win .sky-tr input { width: 100%; }
.sky-win .sky-ore { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.sky-win .sky-ore img { width: 30px; height: 30px; }
.sky-win .sky-ore > div { flex: 1; }

/* ---------------------------------------------------------------- pilot sheet views */
.pview.hidden { display: none; }
.subtabs.small .subtab { padding: 5px 14px; font-size: 10px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-grid dl.spec { margin: 0; }
.pf-status { min-height: 70px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); background: #060a0e; color: #cfe0ee; white-space: pre-wrap; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.stack-form select, .form-2col select { padding: 7px 8px; background: #03070b; border: 1px solid var(--line-hi); color: #fff; }
.small { font-size: 11px; }
.good { color: #9be27a; }

.invite-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.istep { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(90deg, #13202c, #070c11); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.istep b { display: grid; place-items: center; width: 34px; height: 34px; font: 22px var(--font-hea); color: var(--gold); background: #0a0f15; border: 1px solid #3b4d5e; }
.istep span { color: #e6eef6; font-size: 12px; }
.invite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#inv-link { width: 100%; }

/* ---------------------------------------------------------------- daily login bonus */
.daily-card { width: min(800px, 96vw); }
.dbar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 14px 0 10px; padding-top: 18px; }
.dbar-line { position: absolute; left: 4%; right: 4%; top: 4px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #9fe0ff, #2e7fc0); box-shadow: 0 0 10px rgba(98, 192, 255, .6); }
.dbonus { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border: 1px solid var(--line); background: #070c11; text-align: center; }
.dbonus b { font: 13px var(--font-hea); color: #ffd35a; }
.dbonus img { width: 70px; height: 70px; object-fit: contain; filter: saturate(.7) brightness(.8); }
.dbonus small { color: #b9d2e6; font-size: 10px; line-height: 1.35; }
.dbonus .dcheck { height: 16px; color: #ffd35a; font-size: 14px; }
.dbonus.done { border-color: #5a4a1c; }
.dbonus.done img { filter: none; }
.dbonus.next { border-color: var(--gold); box-shadow: 0 0 12px rgba(240, 180, 60, .45); }
.dbonus.next img { filter: none; animation: dailyPulse 1.6s ease-in-out infinite; }
@keyframes dailyPulse { 50% { transform: scale(1.08); } }
.dinfo { padding: 8px 12px; border: 1px solid #3b4d5e; background: #0b141c; color: #ffd98a; font-size: 12px; }
.btn-row.center { justify-content: center; }

/* ---------------------------------------------------------------- download / account / help */
.dl-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.dl-hero h3 { margin: 0 0 6px; font: 18px var(--font-hea); color: #fff; font-weight: normal; }
.dl-icon { flex: none; width: 110px; height: 110px; border: 1px solid var(--line-hi); background: #03060a url(/icons/icon-192.png) center / cover; box-shadow: 0 0 20px rgba(98, 192, 255, .25); }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.help-page details { border-bottom: 1px solid var(--line); padding: 8px 2px; }
.help-page summary { cursor: pointer; font: 13px var(--font-hea); color: #e6eef6; }
.help-page summary:hover { color: var(--cyan); }
.help-page p { margin: 8px 0 2px; color: #b9c8d6; }

@media (max-width: 900px) {
  .profile-grid, .form-2col, .invite-grid, .invite-steps, .account-grid { grid-template-columns: 1fr; }
  .dbar { grid-template-columns: repeat(2, 1fr); }
  .dbar-line { display: none; }
}

/* hangar slots strip under the header */
.hangar-slots { display: flex; align-items: center; gap: 4px; margin: 4px 0 6px; padding: 4px 8px; border: 1px solid #22313d; background: linear-gradient(180deg, rgba(20, 30, 40, .92), rgba(6, 10, 14, .92)); overflow-x: auto; }
.hangar-slots:empty { display: none; }
.hs-label { font: 10px Verdana, Arial, sans-serif; font-weight: bold; color: #546b77; letter-spacing: 1px; margin-right: 6px; white-space: nowrap; }
.hs-slot { position: relative; flex: none; width: 96px; height: 42px; padding: 0 4px 0 18px; border: 1px solid #2b3c49; border-radius: 2px; background: linear-gradient(180deg, #16222c, #0a1016);
  display: flex; align-items: center; gap: 4px; color: #9fb4c4; cursor: pointer; overflow: hidden; }
.hs-slot i { position: absolute; left: 4px; top: 3px; font: bold 10px Verdana, sans-serif; font-style: normal; color: #5f7a8c; }
.hs-slot img { width: 34px; height: 34px; object-fit: contain; }
.hs-slot small { font-size: 9px; line-height: 10px; max-width: 42px; overflow: hidden; }
.hs-slot span { font-size: 9px; color: #53697a; }
.hs-slot:hover { border-color: #5e8aa8; filter: brightness(1.15); }
.hs-slot.on { border-color: #f0b43c; box-shadow: inset 0 0 10px rgba(240, 180, 60, .35); color: #fff; }
.hs-slot.on i { color: #f0b43c; }
.hs-slot.empty { border-style: dashed; }
.hs-slot.buy { width: 70px; padding: 0; flex-direction: column; justify-content: center; gap: 0; }
.hs-slot.buy b { font-size: 18px; line-height: 18px; color: #7fd0ff; }
.cal-tag.live { background: #2c8a1c; border-color: #8be35f; color: #fff; animation: livePulse 1.5s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 10px #8be35f; } }
/* achievements */
.achv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.achv-points small, .achv-title small { display: block; font-size: 10px; color: var(--txt-dim); letter-spacing: 1px; }
.achv-points b { font: 26px var(--font-hea); color: #ffcf5a; }
.achv-title select { min-width: 220px; height: 26px; margin-top: 3px; background: #05090d; color: #f5d76e; border: 1px solid #4a3a14; }
.achv-cats { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; }
.achv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.achv { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 30, 40, .9), rgba(8, 12, 16, .9)); }
.achv.done { border-color: #6a5320; }
.achv-medal { display: flex; flex-direction: column; gap: 2px; }
.achv-medal i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #3a4652; background: #0b1117; }
.achv-medal i.on { background: radial-gradient(circle at 40% 35%, #fff2b0, #f0b43c 55%, #8a5a10); border-color: #ffd97a; }
.achv-info { flex: 1; min-width: 0; }
.achv-info b { color: #fff; font: 13px var(--font-hea); font-weight: normal; }
.achv-info small { display: block; color: var(--txt-dim); }
.achv-bar { position: relative; height: 12px; margin: 4px 0 2px; border: 1px solid #25333f; background: #02060a; }
.achv-bar div { height: 100%; background: linear-gradient(90deg, #c48a12, #ffd66b); }
.achv-bar span { position: absolute; inset: 0; text-align: center; font-size: 9px; line-height: 11px; color: #fff; text-shadow: 0 0 2px #000; }
.achv-titles { display: flex; flex-wrap: wrap; gap: 4px; }
.achv-titles span { font-size: 10px; color: #6d7780; }
.achv-titles span.on { color: #f5d76e; }
.achv-titles em { font-style: normal; color: #53697a; }
.achv-rw { width: 120px; text-align: right; font-size: 11px; }
.achv-rw small { display: block; color: var(--txt-dim); font-size: 9px; }
.achv-rw b { color: #ffcf5a; font-weight: normal; }
@media (max-width: 900px) { .achv-list { grid-template-columns: 1fr; } }

.sky-ores { grid-template-columns: repeat(8, 1fr); }

/* skill tree (original three rows) */
.st-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 10px; }
.st-points small { display: block; font-size: 10px; letter-spacing: 1px; color: var(--txt-dim); }
.st-points b { font: 28px var(--font-hea); color: #7fd0ff; margin-right: 8px; }
.st-points span { font-size: 11px; color: var(--txt-dim); }
.st-research { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.st-research small { color: var(--txt-dim); }
.st-tree { display: flex; flex-direction: column; gap: 8px; }
.st-row { padding: 6px 10px 8px; border: 1px solid var(--line); background: rgba(8, 12, 18, .8); }
.st-row.blue { box-shadow: inset 3px 0 0 #2f8fd8; } .st-row.purple { box-shadow: inset 3px 0 0 #9b4fe0; } .st-row.red { box-shadow: inset 3px 0 0 #d8342f; }
.st-row-title { font: 11px var(--font-hea); letter-spacing: 1px; color: #9fb4c4; margin-bottom: 4px; }
.st-row-skills { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.st-skill { position: relative; width: 60px; height: 68px; padding: 0; border: 0; background: none; cursor: pointer; }
.st-ico { position: absolute; left: -7px; top: -8px; width: 74px; height: 85px; transform: scale(.81); background: url('/assets/ui/skills/oo_skills.png?v=oo1') no-repeat; }
.st-skill.locked .st-ico { filter: grayscale(1) brightness(.45); }
.st-skill.sel .st-ico, .st-skill:hover .st-ico { filter: brightness(1.25) drop-shadow(0 0 5px #7fd0ff); }
.st-skill.max .st-ico { filter: drop-shadow(0 0 5px #ffcf5a); }
.st-lv { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: bold 10px Verdana, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.st-link { width: 12px; height: 2px; background: #2a3844; }
.st-link.on { background: #7fd0ff; box-shadow: 0 0 4px #7fd0ff; }
.st-info { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(8, 12, 18, .8); min-height: 64px; }
.st-info b { color: #fff; font: 13px var(--font-hea); font-weight: normal; }
.st-info small { color: var(--txt-dim); margin-left: 6px; }
.st-levels { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; font-size: 11px; color: #5d6f7c; }
.st-levels .on { color: #7fd0ff; }

/* P.E.T. gear/protocol level badges */
.sc-img { position: relative; }
.sc-lv, .bp-slot.pet-lv b { position: absolute; right: 4px; top: 2px; min-width: 14px; padding: 0 3px; font: bold 11px Verdana, sans-serif; color: #ffcc00; background: rgba(0, 0, 0, .7); border: 1px solid #6a5320; text-align: center; }
.bp-slot.pet-lv { position: relative; }
.pet-slot-note { flex-basis: 100%; margin-top: 2px; }
.pet-spare { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.pet-spare small { flex-basis: 100%; }
.bp-slot[data-petgear] { cursor: pointer; }
.pet-spare .bp-slot { opacity: .7; }
.pet-spare .bp-slot:hover { opacity: 1; }

/* Uridium page: four package cards always fit the page width */
.premium-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prem-card { min-width: 0; }
.prem-card .btn-start { min-width: 0; }
.premium-lower { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .premium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .premium-lower { grid-template-columns: minmax(0, 1fr); } }

/* hangar activation dialog */
.hs-modal { width: min(560px, 94vw); }
.hs-modal .panel-head { display: flex; align-items: center; }
.hm-ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; margin: 8px 0; }
.hm-ship { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid #2b3c49; background: linear-gradient(180deg, #16222c, #0a1016); color: var(--txt); cursor: pointer; }
.hm-ship img { width: 64px; height: 48px; object-fit: contain; }
.hm-ship span { font-size: 11px; }
.hm-ship:hover { border-color: var(--line-hi); }
.hm-ship.sel { border-color: #7fd0ff; box-shadow: 0 0 8px rgba(127, 208, 255, .5); }
.hm-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.hm-act button:disabled { opacity: .45; cursor: default; }

/* hangar slots: bigger ship pictures, active (gold) vs. edited (blue) */
.hangar-slots { gap: 6px; padding: 6px 10px; }
.hs-slot { width: 150px; height: 66px; padding: 0 6px 0 20px; gap: 6px; }
.hs-slot img { width: 60px; height: 56px; }
.hs-slot small { font-size: 11px; line-height: 13px; max-width: 64px; }
.hs-slot span { font-size: 11px; }
.hs-slot i { font-size: 11px; }
.hs-slot em { position: absolute; left: 3px; bottom: 3px; font: bold 8px Verdana, sans-serif; font-style: normal; color: #f0b43c; letter-spacing: .5px; }
.hs-slot.view { border-color: #7fd0ff; box-shadow: 0 0 0 1px #7fd0ff, inset 0 0 12px rgba(127, 208, 255, .3); color: #fff; }
.hs-slot.on.view { box-shadow: 0 0 0 1px #7fd0ff, inset 0 0 10px rgba(240, 180, 60, .35); }
.hs-slot.buy { width: 80px; }
.hs-side { margin-left: auto; padding-left: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.hs-side small { font-size: 10px; color: #7f97a8; text-align: right; }
/* the fitting of a same-hull design in another hangar moves onto the ship on screen (one button, or a select with many) */
.hs-side .hs-transfer { max-width: 250px; white-space: normal; line-height: 1.2; text-align: right; }
.hs-transfer-row { display: flex; align-items: center; gap: 4px; }
.hs-transfer-row small { text-align: left; }
.hs-transfer-row select { max-width: 150px; padding: 2px 3px; background: #03070b; color: #fff; border: 1px solid var(--line-hi); font-size: 10px; }

/* auction house */
.auc-tabs { align-items: center; }
.auc-filter { margin-left: auto; font-size: 11px; color: var(--txt-dim); }
.auc-filter select { margin-left: 4px; background: #0b1218; color: var(--txt); border: 1px solid var(--line); padding: 2px 4px; }
.auc-mailopt { display: block; margin: 0 10px 10px; font-size: 11px; color: var(--txt-dim); }
tr.auc-lead td:first-child { box-shadow: inset 3px 0 0 #f0b43c; }
tr.auc-outbid td:first-child { box-shadow: inset 3px 0 0 #ff8a6a; }

/* ---------------------------------------------------------------- arena */
.arena-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 900px) { .arena-grid { grid-template-columns: 1fr; } }
.ar-queue { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 8px 0; border: 1px solid var(--line-hi); background: linear-gradient(180deg, rgba(40, 30, 12, .6), rgba(12, 9, 4, .6)); }
.ar-queue span { flex: 1; }
.ar-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; }
.ar-stats div { padding: 6px; border: 1px solid var(--line); background: #0a1118; text-align: center; }
.ar-stats small { display: block; font-size: 10px; color: var(--txt-dim); text-transform: uppercase; }
.ar-stats b { font: 16px var(--font-hea); color: #fff; }
#ar-top tr.me td { color: var(--gold); }

/* admin: alien gallery and asset browser */
.adm-npcs, .adm-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.adm-npc, .adm-asset { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 1px solid var(--line); background: #0a1118; text-align: center; font-size: 11px; color: var(--txt); text-decoration: none; }
.adm-npc img, .adm-asset img { max-width: 130px; max-height: 110px; object-fit: contain; }
.adm-npc small, .adm-asset small { color: var(--txt-dim); word-break: break-all; }
.adm-npc.missing { border-color: var(--red); }
.adm-asset.dir { cursor: pointer; font: inherit; }

/* ?embed=gates: only the gate materializer, inside the game's window */
body.embed { min-height: 0; background: #05090e; overflow: hidden; }
body.embed .hdr-wrap, body.embed .site-foot, body.embed #landing, body.embed .page:not(.active) { display: none !important; }
body.embed .frame { width: auto; padding: 0; }
body.embed .content { margin: 0; }
body.embed .page.active { animation: none; }
body.embed .ggx-wrap { margin: 0; }
body.embed .ggx { box-shadow: none; }
body.embed #toast { bottom: 8px; }
/* phones: the game's windows (login rewards, calendar, Battle Pass, gates…) show the page without the site's own top bar and menu; it took 46 px of a 440 px screen and pushed the claim button out of reach */
html.mobile body.embed .m-top, html.mobile body.embed .m-drawer, html.mobile body.embed .m-drawer-bg { display: none !important; }

/* shop categories: bevelled steel buttons like the header's, with the category's first item as its icon */
.shop-nav .panel-head { letter-spacing: 1px; }
#shop-cats { gap: 5px; padding: 8px 8px 10px; }
.shop-cat { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 6px; border: 0; border-bottom: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: linear-gradient(180deg, #3a4c5e 0%, #1f2d3b 48%, #141e28 52%, #1b2835 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .6);
  font: bold 11px var(--font-hea); color: #c9dbe9; letter-spacing: .3px; text-transform: uppercase; text-shadow: 0 1px 1px #000; }
.shop-cat::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  border: 1px solid rgba(143, 190, 225, .35); }
.shop-cat .sc-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: radial-gradient(circle, rgba(98, 192, 255, .18), rgba(0, 0, 0, .35) 70%); border-radius: 50%; }
.shop-cat .sc-ico img { max-width: 28px; max-height: 28px; filter: drop-shadow(0 1px 2px #000); }
.shop-cat span { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-cat small { flex: none; min-width: 18px; padding: 1px 4px; border-radius: 8px; background: rgba(0, 0, 0, .45); font: 10px var(--font); color: #8fa7b9; text-align: center; text-shadow: none; }
.shop-cat:hover { color: #fff; background: linear-gradient(180deg, #4b6379 0%, #2a3d4f 48%, #1c2a37 52%, #253646 100%); }
.shop-cat.active { color: #06121c; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  background: linear-gradient(180deg, #dff3ff 0%, #8fd0ff 45%, #5cb2ec 55%, #9fdcff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(98, 192, 255, .55); }
.shop-cat.active small { background: rgba(6, 18, 28, .75); color: #bfe6ff; }
.shop-cat.active::before { border-color: rgba(255, 255, 255, .8); }
.shop-sub { margin: -2px 0 0 14px; padding: 5px 10px 5px 14px; border-left: 2px solid rgba(98, 192, 255, .25); font-size: 11px; }
.shop-sub.active { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(255, 207, 90, .1), transparent); }

/* clan tax and diplomacy */
.cm-tax { margin: 8px 0 4px; font-size: 12px; }
.cm-tax-v { color: var(--gold); font-size: 14px; }
.cm-tax-l { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 12px; color: var(--txt-dim); }
.cm-tax-l input { width: 70px; }
.dip-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.dip-row > span { flex: 1; min-width: 0; }
.dip-row.in { padding: 7px 8px; margin-bottom: 4px; border: 1px solid rgba(255, 207, 90, .35); background: linear-gradient(90deg, rgba(255, 207, 90, .12), transparent); }
.dip-row.out { opacity: .8; }
.dip-badge { flex: none; min-width: 86px; padding: 2px 8px; border-radius: 2px; text-align: center; font: bold 10px var(--font-hea); letter-spacing: .6px; text-transform: uppercase; }
.dip-badge.war { background: linear-gradient(180deg, #c8513e, #7a2014); color: #fff; }
.dip-badge.nap { background: linear-gradient(180deg, #8a8f96, #4a5058); color: #fff; }
.dip-badge.alliance { background: linear-gradient(180deg, #4f8fc4, #1d4e78); color: #fff; }
.dip-badge.peace { background: linear-gradient(180deg, #6fc23e, #2f7016); color: #fff; }
.cm-diplo-form { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.cm-diplo-form select { width: 100%; }
.cm-diplo-acts { display: grid; grid-template-columns: 1fr; gap: 4px; }
.dip-btn { height: 28px; border: 1px solid; border-radius: 2px; font: bold 11px var(--font-hea); letter-spacing: .6px; color: #fff; text-shadow: 0 1px 1px #000; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.dip-btn.war { border-color: #ff8a6a; background: linear-gradient(180deg, #c8513e, #7a2014); }
.dip-btn.nap { border-color: #b9c2cc; background: linear-gradient(180deg, #7a828c, #3c434b); }
.dip-btn.ally { border-color: #8fd0ff; background: linear-gradient(180deg, #4f8fc4, #1d4e78); }
.dip-btn:hover { filter: brightness(1.15); }
.cm-diplo-note { display: block; margin-top: 8px; font-size: 11px; }

/* hangar order: drag handles and arrows */
.hs-slot[draggable="true"] { cursor: grab; }
.hs-slot.dragging { opacity: .45; }
.hs-slot.drop { border-color: #8fd0ff; box-shadow: 0 0 10px rgba(98, 192, 255, .6); }
.hs-slot .hs-move { position: absolute; right: 2px; bottom: 1px; display: none; gap: 2px; }
.hs-slot:hover .hs-move { display: flex; }
.hs-move b { width: 13px; height: 12px; display: grid; place-items: center; border-radius: 2px; background: rgba(0, 0, 0, .7); color: #8fd0ff; font: 8px Verdana, sans-serif; cursor: pointer; }
.hs-move b:hover { background: #1d4e78; color: #fff; }
/* the ✕ on a parked hangar takes its ship out (the items go to the inventory); the active hangar has none */
.hs-slot .hs-x { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 2px; background: rgba(0, 0, 0, .65); color: #7f93a3; font: bold 9px Verdana, sans-serif; cursor: pointer; }
.hs-slot .hs-x:hover { background: #7a2424; color: #fff; }
/* drones: the hint under the group title; an empty drone slot is clickable (takes the picked inventory item) */
.sg-hint { display: block; margin: -2px 0 6px; font-size: 10px; }
.drone-equip-slot:empty, .drone-design-slot:empty { cursor: pointer; }

/* the site's question box (replaces the browser confirm / prompt) */
#modal-ask { z-index: 95; background: rgba(0, 0, 0, .5); }
#modal-ask .ask-card { width: min(400px, 92vw); border-color: #3f6f94; box-shadow: 0 0 0 1px #000, 0 14px 44px rgba(0, 0, 0, .85), 0 0 26px rgba(60, 150, 220, .2); animation: pageIn .18s ease-out; }
#modal-ask p { margin: 4px 0 14px; font-size: 13px; line-height: 1.5; }
#modal-ask #ask-input { width: 100%; margin-bottom: 12px; }
#modal-ask .btn-row { margin-top: 0; }
#modal-ask .btn-metal { min-width: 110px; }
.btn-metal.red { background: linear-gradient(180deg, #d0583f, #8a2716 55%, #6a1a0c); border-color: #ff8a6a; color: #fff; text-shadow: 0 1px 0 #4a0c06; }
body.embed-rankings, body.embed-uridium { overflow-y: auto; }
body.embed-rankings .content { padding: 6px; }

/* uridium packs and the evening bonus */
.uri-panel { margin-bottom: 10px; }
.uri-bonus { display: flex; align-items: center; gap: 14px; margin: 10px 12px 0; padding: 10px 14px; border: 1px solid var(--line-hi); background: rgba(0, 0, 0, .3); }
.uri-bonus.on { border-color: #d69a1c; background: linear-gradient(90deg, rgba(214, 154, 28, .28), rgba(214, 154, 28, .04)); box-shadow: 0 0 18px rgba(214, 154, 28, .25); animation: uriPulse 2s ease-in-out infinite; }
@keyframes uriPulse { 50% { box-shadow: 0 0 28px rgba(255, 190, 60, .45); } }
.uri-bonus > span { display: flex; flex-direction: column; }
.uri-bonus b { font: 14px var(--font-hea); color: #fff; letter-spacing: .5px; }
.uri-bonus small { color: var(--txt-dim); }
.uri-bonus.on small { color: #ffe08a; }
.uri-x { font: 34px/1 var(--font-hea) !important; color: #ffd24a !important; text-shadow: 0 0 14px rgba(255, 190, 60, .6); }
.uri-x.dim { color: #6d7f8f !important; text-shadow: none; }
.uri-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.uri-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; background: linear-gradient(180deg, rgba(40, 70, 100, .35), rgba(8, 14, 22, .6)); border: 1px solid var(--line-hi); transition: transform .2s, box-shadow .2s; }
.uri-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .6), 0 0 0 1px var(--cyan); }
.uri-card.best { border-color: #d69a1c; box-shadow: 0 0 18px rgba(214, 154, 28, .3); }
.uri-card img { width: 64px; height: 64px; filter: drop-shadow(0 0 10px rgba(98, 192, 255, .45)); }
.uri-amt { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.uri-amt s { color: var(--txt-dim); font-size: 12px; }
.uri-amt b { font: 22px var(--font-hea); color: #8fd4ff; text-shadow: 0 0 10px rgba(98, 192, 255, .4); }
.uri-card.boost .uri-amt b { color: #ffe08a; text-shadow: 0 0 12px rgba(255, 200, 80, .5); }
.uri-amt small { font-size: 10px; letter-spacing: 1px; color: var(--txt-dim); }
.uri-tag { padding: 2px 8px; font: 10px var(--font-hea); letter-spacing: .5px; color: #1a1000; background: linear-gradient(180deg, #ffe08a, #d69a1c); }
.uri-tag.dim { color: var(--txt-dim); background: none; border: 1px solid var(--line); }
.uri-card .prem-price { margin: 2px 0 4px; font-size: 22px; }
/* the big green button keeps inside the card (its 240px minimum is wider than a card) */
.uri-card .btn-start { min-width: 0; max-width: calc(100% - 8px); letter-spacing: 2px; }
.uri-note { margin: 0 12px 12px; font-size: 11px; }
@media (max-width: 1100px) { .uri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* multiplier progress in the panel's bar (x0 - x6) and an empty log that says so */
.ggx-mbar { position: absolute; left: 21px; top: 60px; width: 214px; height: 8px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(120, 150, 170, .25); }
.ggx-mbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c98a12, #ffd24a); box-shadow: 0 0 6px rgba(255, 200, 80, .6); transition: width .4s; }
.ggx-mbar > b { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 1px; pointer-events: none; }
.ggx-mbar > b > span { width: 1px; background: rgba(255, 255, 255, .15); }
.ggx-lines:empty { height: 0; margin: 0; }
.ggx-empty { display: block; box-sizing: border-box; min-height: 158px; margin: 4px 10px 0 12px; padding: 8px 6px; font: 10px var(--font); color: #6f8597; line-height: 1.4; text-align: center; }
.ggx-lines:not(:empty) + .ggx-empty { display: none; }

/* the energy button shows what the spin costs */
.ggx-energy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.ggx-energy b { font: 13px var(--font-hea); font-weight: normal; letter-spacing: 1px; }
.ggx-energy small { font: 9px var(--font); letter-spacing: 0; color: #eaffd8; opacity: .95; }
.ggx-energy small.short { color: #ffb0a0; }

/* desktop client download */
.dl-desktop .dl-icon { background-image: url(/icons/icon-512.png); background-size: 100%; background-repeat: no-repeat; background-position: center; }
.dl-hero h3 small { font: 12px var(--font); margin-left: 6px; }
.dl-meta { align-self: center; margin-left: 10px; font-size: 12px; color: var(--txt-dim); }
.dl-desktop .btn-start { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- help pop-up (2016 'Selam Uzay Pilotu!' window with the hazard frame) */
.hazard-card { width: min(520px, 94vw); padding: 7px; border-radius: 4px; background: repeating-linear-gradient(-45deg, #f2c200 0 12px, #111 12px 24px); box-shadow: 0 12px 40px rgba(0, 0, 0, .85), 0 0 0 1px #000; }
.hazard-inner { background: linear-gradient(180deg, #16222d, #0a1118 60%, #070c11); border: 1px solid #000; box-shadow: inset 0 0 0 1px #2f4456; }
.hazard-head { display: flex; align-items: center; padding: 7px 10px; font: 15px var(--font-hea); letter-spacing: .5px; color: var(--white); background: linear-gradient(180deg, #25384a, #142230); border-bottom: 1px solid #000; text-transform: uppercase; }
.hazard-body { display: flex; gap: 16px; padding: 16px 18px 6px; }
.help-q { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font: bold 50px/1 Arial, sans-serif; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
  background: radial-gradient(circle at 35% 30%, #b9ff8a, #57c52b 40%, #226c0e 75%, #123d06); border: 3px solid #0b1f05; box-shadow: 0 0 0 2px #6fd64a, 0 0 16px rgba(116, 214, 74, .55), inset 0 -6px 10px rgba(0, 0, 0, .35); }
.help-text { color: var(--txt); line-height: 1.6; font-size: 13px; }
.help-text h3 { margin: 0 0 6px; font: 18px var(--font-hea); color: var(--gold); font-weight: normal; }
.help-text p { margin: 0 0 8px; }
.help-text b { color: var(--white); }
.help-text ul { margin: 0 0 8px; padding-left: 18px; }
.help-text a { color: var(--cyan); cursor: pointer; text-decoration: underline; }
.help-text .help-luck { color: var(--white); font-weight: bold; }
.hazard-foot { display: flex; justify-content: center; padding: 8px 0 16px; }
.hazard-foot .btn-metal { min-width: 120px; }

/* ---------------------------------------------------------------- footer links: Künye | Kredi | Forum | Çerez Ayarları */
.legal-links { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; }
.legal-links a { color: var(--txt); cursor: pointer; text-decoration: none; }
.legal-links a:hover { color: var(--white); text-decoration: underline; }
.legal-links span { color: var(--txt-dim); }
.foot-note { margin-top: 6px; font-size: 11px; color: var(--txt-dim); }
.site-foot { padding: 12px 0 18px; }
.legal-card { width: min(560px, 94vw); }
.legal-card .panel-body { max-height: 70vh; overflow: auto; line-height: 1.6; }
.legal-card h4 { margin: 12px 0 4px; color: var(--gold); font: 14px var(--font-hea); font-weight: normal; }
.legal-card h4:first-child { margin-top: 0; }
.legal-card p { margin: 0 0 6px; }
.cookie-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cookie-row input { margin-top: 3px; }
.cookie-row b { color: var(--white); }
.cookie-row small { display: block; color: var(--txt-dim); }
.legal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* hangar: an item the other configuration of this ship also uses */
.bp-cfg-tag { position: absolute; left: 2px; bottom: 1px; padding: 0 2px; font: 8px/10px var(--font-hea); color: #0b1a10; background: #8fe064; border-radius: 2px; }
.auc-hist-sel { margin-left: auto; display: flex; gap: 4px; }
.auc-hist-sel select { background: #0b1218; color: var(--txt); border: 1px solid var(--line); padding: 2px 4px; font-size: 11px; }

/* ---------------------------------------------------------------- skill tree: three brushed-metal panels joined by arrows (2016 Pilot Sheet) */
.st-panels { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 0; }
.st-panel-box { display: grid; grid-template-columns: repeat(var(--cols), 62px); grid-auto-rows: 72px; gap: 8px 6px; padding: 10px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0 18%, transparent 18% 60%, rgba(255, 255, 255, .04) 60% 64%, transparent 64%),
    linear-gradient(180deg, #3b4146, #25292d 55%, #1c1f22);
  border: 1px solid #5b6268; border-radius: 3px; box-shadow: inset 0 0 0 1px #15181a, inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 10px rgba(0, 0, 0, .6); }
.st-arrow { flex: none; width: 18px; position: relative; }
.st-arrow::before, .st-arrow::after { content: ''; position: absolute; left: 5px; width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid #39c6ff; border-right: 0; filter: drop-shadow(0 0 4px #39c6ff); }
.st-arrow::before { top: 36px; } .st-arrow::after { bottom: 36px; }
.st-panel-box .st-skill { width: 62px; height: 72px; }
.st-panel-box .st-ico { left: -6px; top: -7px; transform: scale(.84); }
.st-empty { width: 62px; height: 72px; }
.st-skill.locked .st-lv { color: #8a949c; }
.st-skill.max .st-lv { color: #ffcf5a; }
.st-legend { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font: 10px var(--font-hea); letter-spacing: 1px; color: var(--txt-dim); }
.st-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.st-legend .blue::before { background: #2f8fd8; } .st-legend .purple::before { background: #9b4fe0; } .st-legend .red::before { background: #d8342f; }
.st-req { font-size: 11px; margin: 2px 0 6px; color: var(--txt-dim); }
.st-req .ok { color: #8fe064; } .st-req .no { color: #ff8a6a; } .st-req i { color: var(--txt-dim); } .st-req b { color: #fff; font: inherit; }
@media (max-width: 760px) { .st-arrow { width: 100%; height: 14px; } .st-arrow::before, .st-arrow::after { display: none; } }

/* ---------------------------------------------------------------- download: one card per platform */
.dl-intro { margin: 0 0 12px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 32, 44, .85), rgba(8, 13, 19, .9)); }
.dl-card.mine { border-color: var(--cyan); box-shadow: 0 0 14px rgba(98, 192, 255, .25); }
.dl-mine { display: none; margin-left: 8px; padding: 1px 5px; font: 9px var(--font-hea); letter-spacing: .5px; color: #04121c; background: var(--cyan); border-radius: 2px; vertical-align: 3px; }
.dl-card.mine .dl-mine { display: inline-block; }
.dl-card .btn-row { margin-top: 0; }
.dl-card p { margin: 0; line-height: 1.5; }
.dl-test { font-size: 12px; line-height: 1.5; }
.dl-test b { color: var(--cyan); }
.dl-test ol { margin: 4px 0 0; padding-left: 18px; }
.dl-test li { margin: 2px 0; }
.dl-card code { padding: 0 4px; background: #03070b; border: 1px solid var(--line); color: #cfe7f5; font-size: 11px; }
.dl-card .dl-meta { margin-left: 0; font-size: 11px; }
.dl-os { display: flex; align-items: center; gap: 10px; }
.dl-os h3 { margin: 0; font: 17px var(--font-hea); color: #fff; font-weight: normal; }
.dl-os small { color: var(--txt-dim); font-size: 11px; }
.dl-logo { flex: none; width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; font: bold 17px/1 Arial, sans-serif; font-style: normal; color: #fff;
  background: linear-gradient(180deg, #2a4c68, #13263a); border: 1px solid #3f6f94; }
.dl-logo.win { background: linear-gradient(#56b4ff, #56b4ff) 7px 7px / 10px 10px no-repeat, linear-gradient(#56b4ff, #56b4ff) 19px 7px / 10px 10px no-repeat,
  linear-gradient(#56b4ff, #56b4ff) 7px 19px / 10px 10px no-repeat, linear-gradient(#56b4ff, #56b4ff) 19px 19px / 10px 10px no-repeat, linear-gradient(180deg, #16324b, #0c1c2c); }
.dl-logo.mac::before { content: '⌘'; font-size: 20px; }
.dl-logo.linux::before { content: '>_'; font: bold 14px Consolas, monospace; color: #9be27a; }
.dl-logo.android { background: linear-gradient(180deg, #2f5a2a, #16301a); border-color: #5fa84d; }
.dl-logo.android::before { content: ''; width: 18px; height: 10px; border-radius: 9px 9px 0 0; background: #8fe064; box-shadow: 0 5px 0 -1px #8fe064; }
.dl-logo.ios::before { content: ''; width: 12px; height: 20px; border: 2px solid #dbe6ef; border-radius: 3px; }
/* store badges (coming soon) */
.dl-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dl-stores p { flex-basis: 100%; margin: 4px 0 0; }
.dl-store { display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 7px 16px 7px 12px; border: 1px solid #5d6b77; border-radius: 9px; background: #000; opacity: .8; cursor: default; }
.dl-store small { display: block; font: 9px var(--font-hea); letter-spacing: 1px; color: #ffcf5a; }
.dl-store b { display: block; font: 19px/1.1 var(--font-hea); color: #fff; font-weight: normal; }
.dl-store i { width: 26px; height: 28px; flex: none; }
.dl-store.play i { background: conic-gradient(from 225deg at 30% 50%, #00d7fe 0 25%, #ffce00 25% 50%, #ff3a44 50% 75%, #00f076 75%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dl-store.apple i { background: radial-gradient(circle at 50% 62%, #e9edf1 0 44%, transparent 45%), radial-gradient(ellipse at 62% 12%, #e9edf1 0 17%, transparent 18%); }
/* the apps are out: the badges are links */
.dl-store svg { width: 26px; height: 28px; flex: none; }
/* server list: the one that opens on a date */
.srv-row.soon b { color: #ffcf5a; }
.srv-row.soon .srv-dot { background: #ffcf5a; box-shadow: 0 0 8px #ffcf5a; }
.srv-row.soon em { background: #5a4410; color: #ffe08a; }
/* the phone install windows */
.mob-how ol { padding-left: 22px; margin: 10px 0; display: grid; gap: 10px; }
.mob-how li { line-height: 1.5; }
.mob-how li a { margin-left: 8px; vertical-align: middle; }
.mob-how p { margin: 6px 0; line-height: 1.5; }
.dl-store.live { opacity: 1; cursor: pointer; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.dl-store.live:hover { border-color: var(--cyan); box-shadow: 0 0 12px rgba(111, 194, 255, .35); }
.ld-stores { margin-top: 14px; }
.news-text .news-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* clan page: dark fields and a steel (not white) non-aggression button, like the rest of the site */
#tab-clan input[type=number], #tab-clan input[type=text], #tab-clan input[type=search], #tab-clan input:not([type]), #tab-clan select, #tab-clan textarea {
  height: 28px; padding: 4px 8px; background: #03070b; color: #fff; border: 1px solid var(--line-hi); border-radius: 0; outline: none; font: 12px var(--font); }
#tab-clan textarea { height: auto; }
#tab-clan input:focus, #tab-clan select:focus, #tab-clan textarea:focus { border-color: var(--cyan); box-shadow: 0 0 6px rgba(98, 192, 255, .3); }
#tab-clan input::placeholder, #tab-clan textarea::placeholder { color: #5d7185; }
#tab-clan select option { background: #0b1218; color: #fff; }
.dip-btn.nap { border-color: #6f7b86; background: linear-gradient(180deg, #4d5660, #23292f); }
.dip-badge.nap { background: linear-gradient(180deg, #4d5660, #23292f); }
/* store builds of the mobile apps: no real-money shop */
.store-app .hbtn[data-tab="premium"] { display: none; }
.store-app .hdr-money[data-tab="premium"], .store-app #is-vip, .store-app .m-top-money[data-tab="premium"], .store-app .m-d-uri, .store-app .bp-shopplus { pointer-events: none; cursor: default; }
.store-app .m-d-uri, .store-app .bp-shopplus, .store-app .link-btn[data-tab="premium"], .store-app .pay-logos, .store-app .legal-links a[href*="teslimat"], .store-app .legal-links a[href*="mesafeli"], .store-app .legal-links a[href*="on-bilgilendirme"] { display: none; }
/* e-mail & pilot name in the account page, forgotten password on the landing page */
.ld-forgot { margin-left: 4px; font-size: 11px; color: var(--txt-dim); cursor: pointer; white-space: nowrap; }
.ld-forgot:hover { color: var(--cyan); text-decoration: underline; }
.warn { color: #f0b43c; }
.acc-mail-state { margin-bottom: 8px; line-height: 1.7; }
.acc-mail-state .btn-metal { margin-left: 4px; }
#acc-mail-panel.attention { box-shadow: 0 0 0 1px #f0b43c, 0 0 14px rgba(240, 180, 60, .25); }

/* ---------------------------------------------------------------- start page: in-game pictures around a gameplay clip */
.ld-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); gap: 18px; align-items: center;
  max-width: 1180px; margin: 6px auto 46px; padding: 0 20px; }
.ld-media-col { display: flex; flex-direction: column; gap: 18px; }
.ld-shot, .ld-video { position: relative; padding: 4px; border: 1px solid #3a5367; background: linear-gradient(180deg, #111c26, #05090e);
  box-shadow: inset 0 0 0 1px #000, 0 6px 22px rgba(0, 0, 0, .75); }
/* the cyan corner marks of the 2016 frames */
.ld-shot::before, .ld-video::before { content: ''; position: absolute; right: -4px; top: -4px; width: 12px; height: 12px;
  border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); pointer-events: none; }
.ld-shot::after, .ld-video::after { content: ''; position: absolute; left: -4px; bottom: -4px; width: 12px; height: 12px;
  border-bottom: 2px solid var(--cyan); border-left: 2px solid var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); pointer-events: none; }
.ld-shot { display: block; width: 100%; cursor: zoom-in; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ld-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ld-shot:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: inset 0 0 0 1px #000, 0 0 18px rgba(98, 192, 255, .45); }
.ld-video { padding: 6px; }
.ld-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.ld-video-tag { position: absolute; left: 14px; top: 12px; padding: 3px 9px; font: 11px var(--font-hea); letter-spacing: 1.5px; color: #cfe7f5;
  background: rgba(3, 8, 14, .72); border: 1px solid rgba(98, 192, 255, .45); pointer-events: none; }
.ld-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .88); }
.ld-lightbox img { max-width: 94vw; max-height: 86vh; border: 1px solid #3a5367; box-shadow: 0 0 40px rgba(0, 0, 0, .9); }
.ld-lightbox button { position: absolute; border: 0; background: rgba(8, 16, 26, .8); color: #fff; font: 34px/1 Verdana, sans-serif; cursor: pointer; }
.ld-lightbox .lb-prev, .ld-lightbox .lb-next { top: 50%; width: 48px; height: 64px; margin-top: -32px; }
.ld-lightbox .lb-prev { left: 14px; } .ld-lightbox .lb-next { right: 14px; }
.ld-lightbox .lb-x { right: 14px; top: 12px; width: 42px; height: 42px; font-size: 26px; }
.ld-lightbox button:hover { background: rgba(98, 192, 255, .35); }
.ld-lightbox .lb-n { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font: 12px var(--font-hea); color: var(--txt-dim); letter-spacing: 1px; }
@media (max-width: 900px) {
  .ld-media { grid-template-columns: 1fr 1fr; }
  .ld-video { grid-column: 1 / -1; grid-row: 1; }
  .ld-media-col { flex-direction: row; grid-column: span 2; }
  .ld-media-col .ld-shot { flex: 1; min-width: 0; }
}

/* quick buy: the list scrolls inside the window */
#modal-quickbuy .modal-card { width: min(720px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
#modal-quickbuy .panel-body { overflow-y: auto; min-height: 0; }
/* download buttons are links: no underline under the spaced letters */
a.btn-start, a.btn-start:hover, a.btn-metal, a.btn-metal:hover { text-decoration: none; }
/* invite milestones */
.inv-miles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 12px; }
.inv-mile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border: 1px solid var(--line); background: rgba(8, 12, 18, .8); text-align: center; }
.inv-mile b { color: #fff; font-size: 12px; }
.inv-mile span { color: #ffcf5a; font-size: 11px; }
.inv-mile small { color: var(--txt-dim); font-size: 10px; }
.inv-mile.got { border-color: #4e8a2e; box-shadow: inset 0 0 10px rgba(125, 255, 125, .15); }
.inv-mile.got small { color: #7dff7d; }

/* company backgrounds once logged in */
body[data-company="EIC"] { background-image: url('/assets/bg_standard_2.jpg'); }
body[data-company="VRU"] { background-image: url('/assets/bg_standard_3.jpg'); }

/* company change (clan tab) */
.company-change { margin-top: 10px; }
.cc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cc-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--line); background: rgba(8, 12, 18, .8); text-align: center; }
.cc-card img { height: 46px; object-fit: contain; }
.cc-card b { color: #fff; font: 14px var(--font-hea); }
.cc-card small { color: var(--txt-dim); font-size: 10px; min-height: 26px; }
.cc-card.mine { border-color: #d69a1c; box-shadow: inset 0 0 12px rgba(214, 154, 28, .2); }
.cc-now { color: #ffcf5a; font: 11px var(--font-hea); letter-spacing: 1px; padding: 4px 0; }
@media (max-width: 700px) { .cc-list { grid-template-columns: minmax(0, 1fr); } }

/* profile picture buttons under the pilot picture */
.av-btns { display: flex; justify-content: center; gap: 4px; margin: 6px 0 2px; }
.av-btns label.btn-metal { cursor: pointer; }

/* clan window (2016 site): header with logo and tabs */
.clan-head .panel-body { display: flex; align-items: center; gap: 14px; }
.ch-logo img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line-hi); background: #0a1118; }
.ch-main { flex: 1; min-width: 0; }
.ch-main h2 { margin: 0 0 4px; font: 20px var(--font-hea); color: #fff; }
.ch-tag { color: #7fd0ff; }
.ch-meta { font-size: 11px; color: var(--txt-dim); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ch-meta b { color: #cfe3f1; font-weight: normal; }
.ch-stats { display: flex; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.ch-stats div { display: flex; flex-direction: column; }
.ch-stats small { font-size: 9px; letter-spacing: 1px; color: var(--txt-dim); text-transform: uppercase; }
.ch-stats b { font: 14px var(--font-hea); color: #ffcf5a; font-weight: normal; }
.ch-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ch-myrank { font-size: 11px; color: var(--txt-dim); }
.ch-myrank b { color: #ffcf5a; }
.ch-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 10px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .3); }
.ch-tab { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: #8aa5ba; font: 11px var(--font-hea); letter-spacing: .5px; }
.ch-tab:hover { color: #fff; }
.ch-tab.active { color: #fff; border-bottom-color: #7fd0ff; background: linear-gradient(180deg, transparent, rgba(127, 208, 255, .12)); }
.ch-tab b { color: #ffcf5a; font-weight: normal; }
.ch-page { margin-top: 10px; }
.ch-desc { white-space: pre-wrap; margin: 0 0 10px; }
.kv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kv-table td { padding: 5px 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.kv-table td:first-child { color: var(--txt-dim); width: 34%; }
.cr-badge { display: inline-block; padding: 1px 7px; border: 1px solid #2b3c49; border-radius: 2px; font-size: 10px; color: #9fb4c4; }
.cr-badge.lead { border-color: #d69a1c; color: #ffcf5a; }
.cr-badge.rank { border-color: #3f7fb0; color: #7fd0ff; }
.cr-sel { background: #0b1218; color: var(--txt); border: 1px solid var(--line); padding: 2px 4px; font-size: 11px; }
.cr-card { padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--line); background: rgba(8, 12, 18, .8); }
.cr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cr-name { flex: 1; background: #0b1218; color: #fff; border: 1px solid var(--line); padding: 4px 6px; font: 12px var(--font-hea); }
.cr-rights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; margin-bottom: 6px; }
.cr-right { font-size: 11px; color: #cfe3f1; display: flex; align-items: center; gap: 5px; }
.ch-logo-edit { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ch-logo-edit img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line-hi); background: #0a1118; }
.ch-logo-edit label.btn-metal { cursor: pointer; }
#cm-rename { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.cl-logo { width: 22px; height: 22px; object-fit: cover; vertical-align: middle; margin-right: 6px; border: 1px solid #2b3c49; }
@media (max-width: 700px) { .clan-head .panel-body { flex-wrap: wrap; } .cr-rights { grid-template-columns: minmax(0, 1fr); } }

.sd-levels { display: flex; gap: 3px; margin: 4px 0 8px; }

/* Uridium page: starter packs above the memberships */
.prem-sec { margin: 12px 0 6px; }
.prem-sec small { font-size: 10px; letter-spacing: 0; }
.premium-grid.starter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prem-card.owned { opacity: .6; }
@media (max-width: 1100px) { .premium-grid.starter { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Uridium page (2016 payment page, OldOrbit style) */
.pay-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.pay-side { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 30, 40, .92), rgba(6, 10, 15, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.pay-nav { height: 28px; padding: 0 10px; text-align: left; border: 1px solid #3a4a58; border-radius: 3px; background: linear-gradient(180deg, #3a4550, #1a2129 55%, #121820); color: #dbe7f2;
  font: 11px var(--font-hea); letter-spacing: .6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .6); cursor: pointer; }
.pay-nav:hover { border-color: var(--cyan); color: #fff; }
.pay-nav.active { border-color: #9fd6ff; background: linear-gradient(180deg, #e9f5ff, #9fd0f2); color: #0b2233; box-shadow: 0 0 10px rgba(120, 200, 255, .5); }
.pay-main { min-width: 0; }
.pay-stage { position: relative; padding: 16px 16px 14px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(circle at 68% 105%, rgba(90, 150, 220, .25), transparent 45%), url('/assets/maps/bg/background22.jpg') center / cover; }
.pay-stage::before { content: ''; position: absolute; right: -120px; bottom: -170px; width: 460px; height: 460px; opacity: .8; background: url('/assets/maps/planets/planet1.png') center / contain no-repeat; pointer-events: none; }
.pay-stage > * { position: relative; }
.pay-promo { display: flex; align-items: center; gap: 14px; width: min(560px, 100%); margin: 0 auto 14px; padding: 12px 16px; text-align: left; cursor: pointer;
  border: 1px solid #4a5a66; border-radius: 4px; background: linear-gradient(180deg, rgba(34, 44, 54, .92), rgba(10, 14, 19, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 14px rgba(0, 0, 0, .5); }
.pay-promo:hover { border-color: var(--gold); }
.pp-text { flex: 1; }
.pay-promo b { display: block; margin-bottom: 6px; font: 17px var(--font-hea); color: var(--gold); }
.pay-promo small { color: #e6edf3; font-size: 12px; }
.pay-promo img { width: 70px; height: 70px; flex: none; filter: drop-shadow(0 0 10px rgba(140, 255, 110, .45)); }
.pay-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border: 1px solid #3a2e14; background: rgba(0, 0, 0, .35); }
.pay-cat { position: relative; min-height: 172px; padding: 14px 14px 34px; border: 2px solid #8a6a24; border-radius: 3px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, rgba(20, 38, 54, .92), rgba(6, 18, 28, .92)); box-shadow: inset 0 0 18px rgba(0, 0, 0, .6); color: #e6edf3; }
.pay-cat:hover { border-color: var(--gold); box-shadow: inset 0 0 18px rgba(0, 0, 0, .6), 0 0 12px rgba(240, 180, 60, .35); }
.pay-cat b { display: block; padding-bottom: 8px; margin-bottom: 12px; font: 16px var(--font-hea); color: var(--gold); border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, #8a6a24, transparent) 1; }
.pay-cat span { font-size: 12px; line-height: 1.5; }
.pay-cat i { position: absolute; right: 10px; bottom: 10px; border: 7px solid transparent; border-left: 10px solid var(--gold); filter: drop-shadow(0 0 4px rgba(240, 180, 60, .7)); }
.pay-buy { display: flex; align-items: center; justify-content: center; gap: 26px; width: min(300px, 90%); height: 40px; margin: 12px auto 10px; cursor: pointer;
  border: 2px solid #1d3a0f; border-radius: 4px; background: linear-gradient(180deg, #8ee05a, #3d9a1c 55%, #2a7512); color: #11300a; font: 17px var(--font-hea); letter-spacing: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px rgba(120, 230, 80, .35); }
.pay-buy:hover { filter: brightness(1.1); }
.pay-buy i { border: 7px solid transparent; border-left: 10px solid #f0b43c; filter: drop-shadow(8px 0 0 #f0b43c); margin-right: 8px; }
.pay-stage .uri-bonus { margin: 0; }
/* shop */
.ps-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-bottom: 0; background: linear-gradient(180deg, #1a232c, #0a0f14); }
.ps-brand { display: flex; align-items: center; gap: 8px; }
.ps-brand .oo-logo { font-size: 24px; }
.ps-top-btns { display: flex; gap: 6px; }
.ps-hbtn { height: 30px; padding: 0 12px; border: 1px solid #5a8fb8; border-radius: 3px; background: linear-gradient(180deg, #2a4a64, #13263a); color: #e8f4ff; font: 12px var(--font-hea); cursor: pointer; text-decoration: underline; }
.ps-hbtn:hover { border-color: var(--cyan); }
.ps-body { display: grid; grid-template-columns: 1fr 250px; gap: 12px; padding: 12px; border: 1px solid var(--line); background: rgba(6, 10, 15, .94); }
.ps-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ps-tab { padding: 6px 14px; border: 1px solid #3a4a58; border-bottom: 0; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #33404c, #161d24); color: #cfdbe6; font: 12px var(--font-hea); cursor: pointer; text-decoration: underline; }
.ps-tab.on { background: linear-gradient(180deg, #151a1f, #06090c); color: var(--gold); border-color: var(--gold); text-decoration: none; }
.ps-gridwrap { display: flex; align-items: center; gap: 8px; padding: 12px 8px; border: 1px solid #2a3642; background: #080d12; }
.ps-arrows { display: flex; flex-direction: column; gap: 6px; }
.ps-arr { width: 28px; height: 30px; border: 1px solid #5a6a78; border-radius: 3px; background: linear-gradient(180deg, #d8dee4, #8a96a2); color: #1a232c; font-size: 11px; cursor: pointer; }
.ps-arr:disabled { opacity: .35; cursor: default; }
.ps-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ps-card { position: relative; display: flex; flex-direction: column; min-height: 176px; padding: 8px; border: 1px solid #3b5670; border-radius: 3px;
  background: radial-gradient(circle at 50% 45%, rgba(70, 140, 200, .25), transparent 60%), linear-gradient(180deg, #16283a, #0b1622); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.ps-card.empty { border-color: #1c2630; background: #0b1117; }
.ps-card.owned { opacity: .6; }
.sc-name { text-align: center; font: 12px var(--font-hea); color: #eef4fa; min-height: 30px; }
.sc-badge { position: absolute; right: -5px; top: 30px; padding: 3px 8px; background: linear-gradient(180deg, #54c42a, #2a7d12); color: #fff; font: 12px var(--font-hea); clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.sc-badge.gold { background: linear-gradient(180deg, #ffd36a, #c98a1a); color: #2a1a00; }
.sc-pic { flex: 1; display: grid; place-items: center; min-height: 74px; }
.ps-pic { max-width: 80px; max-height: 70px; filter: drop-shadow(0 0 8px rgba(120, 200, 255, .35)); }
.uri-pic { display: block; width: 69px; height: 73px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; }
.sc-price { color: #8fd0ff; font: 13px var(--font-hea); }
.sc-info { position: relative; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffb04a, #c85a0a); color: #fff; font: bold 11px/18px Georgia, serif; cursor: help; }
.sc-tip { display: none; position: absolute; left: 0; bottom: 24px; z-index: 5; width: 210px; padding: 8px 10px; border: 1px solid var(--line-hi); background: #0a1219; color: var(--txt); font: 11px/1.45 var(--font); text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); }
.sc-tip span { display: block; }
.sc-tip span + span { margin-top: 3px; }
.sc-info:hover .sc-tip, .sc-info:focus .sc-tip { display: block; }
.sc-add { height: 28px; border: 1px solid #6e9ac0; border-radius: 3px; background: linear-gradient(180deg, #5f8fb9, #34597d); color: #fff; font: 16px var(--font-hea); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.sc-add:hover:not(:disabled) { filter: brightness(1.15); }
.sc-add:disabled { font-size: 11px; background: #1c2a36; border-color: #2c3e4e; color: #8aa0b2; cursor: default; }
.cart-ico { display: inline-block; width: 18px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 1h4l3 11h12l3-8H7' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3Ccircle cx='18' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 1h4l3 11h12l3-8H7' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3Ccircle cx='18' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.ps-cart { display: flex; flex-direction: column; gap: 6px; }
/* beside the shop the shopping list stays in view while the long Premium page scrolls (below 860 px it sits under the shop and scrolls with it) */
@media (min-width: 861px) { .ps-cart { position: sticky; top: 12px; align-self: start; } }
.cart-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0; color: #eef4fa; font: 14px var(--font-hea); }
.cart-list { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid #2a3642; background: #0b1117; max-height: 290px; overflow-y: auto; }
.cart-row { display: grid; grid-template-columns: 26px 1fr auto 18px; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px; border: 1px solid #243240; background: linear-gradient(180deg, #121c26, #0c141c); font-size: 11px; color: #dbe7f2; }
.cart-row.empty { border-color: #1a242e; background: #0d141b; }
.cart-row img { width: 26px; height: 26px; object-fit: contain; }
.cart-row small { color: #8fd0ff; }
.cart-x { width: 18px; height: 18px; padding: 0; border: 1px solid #5a3a3a; background: #2a1414; color: #ff9a8a; cursor: pointer; line-height: 14px; }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 3px; background: #eef2f5; color: #6a7a88; font: 13px var(--font-hea); }
.cart-total b { color: #0b1620; font-size: 17px; }
.cart-go { height: 40px; border: 1px solid #1d3a0f; border-radius: 3px; background: linear-gradient(180deg, #6cc540, #2f8a16); color: #fff; font: 15px var(--font-hea); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.cart-go i { display: inline-block; border: 6px solid transparent; border-left: 8px solid #fff; filter: drop-shadow(6px 0 0 #fff); margin-left: 6px; vertical-align: -1px; }
.cart-go:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
/* Premium & Abonelik: one card per kind with its three lengths as purchase rows of their own, the bundle of the three below */
.ps-gridwrap.pm .ps-arrows { display: none; }
.ps-gridwrap.pm .ps-grid { display: block; min-width: 0; }
.pm-intro { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #2a3642; border-left: 3px solid var(--gold); background: rgba(10, 18, 26, .85); font-size: 12px; line-height: 1.45; color: #cfdbe6; }
.pm-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pm-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px solid #3b5670; border-top: 3px solid var(--pm-c, #5f8fb9); border-radius: 3px;
  background: radial-gradient(circle at 50% 0, rgba(70, 140, 200, .22), transparent 55%), linear-gradient(180deg, #16283a, #0b1622); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.pm-vip { --pm-c: #e0a92a; }
.pm-rebate { --pm-c: #62c0ff; }
.pm-doubler { --pm-c: #6fd34a; }
.pm-head, .pm-bhead { display: flex; align-items: flex-start; gap: 10px; }
.pm-head img { width: 52px; height: 52px; flex: none; object-fit: contain; filter: drop-shadow(0 0 8px rgba(120, 200, 255, .35)); }
.pm-title { flex: 1; min-width: 0; }
.pm-title b { display: block; font: 14px var(--font-hea); color: #eef4fa; }
.pm-title small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: #9fb4c6; }
.pm-head .sc-tip, .pm-bhead .sc-tip { left: auto; right: 0; bottom: auto; top: 24px; }
.pm-active { padding: 3px 8px; border: 1px solid #2e5a22; background: rgba(40, 90, 30, .35); color: #9be27a; font-size: 11px; line-height: 1.4; }
.pm-rows { display: grid; gap: 9px; margin-top: 2px; }
.pm-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 10px; padding: 8px 8px 8px 10px; border: 1px solid #2a3f54; border-radius: 3px; background: #0b1520; }
.pm-row.best { border-color: #d69a1c; background: linear-gradient(180deg, rgba(214, 154, 28, .16), #0b1520); box-shadow: 0 0 10px rgba(214, 154, 28, .25); }
.pm-row.incart, .pm-tick.incart { border-color: #3e7a2c; }
.pm-len b { display: block; font: 15px var(--font-hea); letter-spacing: .6px; color: #fff; }
.pm-len small { color: #8aa0b2; font-size: 11px; }
.pm-price { font: 15px var(--font-hea); color: #8fd0ff; white-space: nowrap; }
.pm-row.best .pm-price { color: #ffd36a; }
.pm-row .sc-add { width: 50px; }
.pm-best { position: absolute; right: 8px; top: -8px; padding: 1px 7px; background: linear-gradient(180deg, #ffd36a, #c98a1a); color: #2a1a00; font: 10px/14px var(--font-hea); letter-spacing: .4px; white-space: nowrap; }
.pm-in { grid-column: 1 / -1; color: #9be27a; font-size: 11px; }
.pm-bundle { margin-top: 14px; padding: 12px; border: 2px solid #d69a1c; border-radius: 3px; background: radial-gradient(circle at 10% 0, rgba(214, 154, 28, .22), transparent 50%), linear-gradient(180deg, #1e2230, #0d1118); box-shadow: 0 0 18px rgba(214, 154, 28, .28); }
.pm-bhead img { width: 62px; height: 62px; flex: none; object-fit: contain; filter: drop-shadow(0 0 10px rgba(240, 180, 60, .45)); }
.pm-bhead .pm-title b { font-size: 18px; color: var(--gold); }
.pm-bhead .pm-title small { font-size: 12px; }
.pm-tix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pm-tick { position: relative; display: grid; gap: 5px; justify-items: center; text-align: center; padding: 16px 10px 10px; border: 1px solid #5a4a20; border-radius: 3px; background: #0b1017; }
.pm-tick.best { border-color: #d69a1c; background: linear-gradient(180deg, rgba(214, 154, 28, .16), #0b1017); box-shadow: 0 0 12px rgba(214, 154, 28, .35); }
.pm-tick .pm-best { right: auto; left: 50%; transform: translateX(-50%); }
.pm-tlen b { font: 17px var(--font-hea); letter-spacing: .8px; color: #fff; }
.pm-tprice { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.pm-tprice b { font: 20px var(--font-hea); color: #ffd36a; white-space: nowrap; }
.pm-tprice s { color: #8a96a2; font-size: 12px; white-space: nowrap; }
.pm-save { color: #9be27a; font-size: 12px; line-height: 1.35; }
.pm-per { color: #8aa0b2; font-size: 11px; }
.pm-tick .sc-add { width: 100%; margin-top: 3px; }
.dur-pill { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid #d69a1c; border-radius: 2px; background: rgba(214, 154, 28, .16); color: #ffd36a; font: 10px/16px var(--font-hea); letter-spacing: .4px; vertical-align: 1px; white-space: nowrap; }
/* the shop's room depends on the window AND on the shopping list beside it, so the layout follows the width of the grid itself (container query)
   with the viewport query as the fallback for a browser without it. A 1366 px window with a scrollbar leaves the grid about 830 px, a 1280 px one
   about 740 px: three kinds side by side from 690 px (the lengths as two-line rows while the cards are narrow, below 800 px), one kind per line
   below that; the bundle's lengths in a row from 560 px. Where subgrid exists the three cards share their rows (name, "active" bar, 3 / 7 / 30). */
.ps-gridwrap.pm .ps-grid { container-type: inline-size; }
@container (max-width: 689px) { .pm-kinds { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 690px) and (max-width: 799px) {
  .pm-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .pm-len { display: contents; }
  .pm-len b { grid-column: 1; grid-row: 1; }
  .pm-price { grid-column: 2; grid-row: 1; justify-self: end; }
  .pm-len small { grid-column: 1; grid-row: 2; align-self: center; }
  .pm-row .sc-add { grid-column: 2; grid-row: 2; }
  .pm-row.best { padding-top: 13px; }
}
@container (min-width: 690px) {
  @supports (grid-template-rows: subgrid) {
    .pm-kinds { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .pm-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
    .pm-head { grid-row: 1; margin-bottom: 8px; }
    .pm-active { grid-row: 2; margin-bottom: 8px; }
    .pm-rows { grid-row: 3 / span 3; grid-template-rows: subgrid; row-gap: 9px; }
  }
}
@container (max-width: 559px) {
  .pm-tix { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pm-tick { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "len add" "price add" "save save" "per per"; justify-items: start; text-align: left; align-items: center; }
  .pm-tick .pm-tlen { grid-area: len; }
  .pm-tick .pm-tprice { grid-area: price; justify-content: flex-start; }
  .pm-tick .sc-add { grid-area: add; width: 56px; margin-top: 0; }
  .pm-tick .pm-save { grid-area: save; }
  .pm-tick .pm-per { grid-area: per; }
  .pm-tick .pm-best { left: 10px; transform: none; }
  .pm-tick .pm-in { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pm-kinds { grid-template-columns: minmax(0, 1fr); }
  .pm-tix { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pm-tick { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "len add" "price add" "save save" "per per"; justify-items: start; text-align: left; align-items: center; }
  .pm-tick .pm-tlen { grid-area: len; }
  .pm-tick .pm-tprice { grid-area: price; justify-content: flex-start; }
  .pm-tick .sc-add { grid-area: add; width: 56px; margin-top: 0; }
  .pm-tick .pm-save { grid-area: save; }
  .pm-tick .pm-per { grid-area: per; }
  .pm-tick .pm-best { left: 10px; transform: none; }
  .pm-tick .pm-in { grid-column: 1 / -1; }
}
/* balance / subscriptions */
.bal-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bal-card { display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 10px 14px; border: 1px solid var(--line-hi); background: #0a1219; }
.bal-card img { width: 26px; height: 26px; }
.bal-card small { display: block; color: var(--txt-dim); font-size: 11px; }
.bal-card b { font: 18px var(--font-hea); color: #fff; }
.subs-list { display: grid; gap: 6px; margin-bottom: 10px; }
.subs-row { display: flex; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--line); background: #0a1219; }
.subs-row b { font: 13px var(--font-hea); color: #dbe7f2; }
.subs-row.on { border-color: #5a4a20; background: #1c180d; }
.subs-row.on span { color: var(--gold); }
.mo-list { display: grid; gap: 8px; margin-bottom: 8px; }
.mo-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; text-align: left; }
.mo-row .order-code { grid-column: 1 / -1; margin: 0; }
@media (max-width: 860px) {
  .pay-wrap { grid-template-columns: 1fr; }
  .pay-side { flex-direction: row; flex-wrap: wrap; }
  .pay-cats { grid-template-columns: 1fr; }
  .pay-cat { min-height: 0; }
  .ps-body { grid-template-columns: 1fr; }
  .ps-grid { grid-template-columns: repeat(2, 1fr); }
  .ps-arrows { display: none; }
  .ps-card.empty { display: none; }
}

/* ---------------------------------------------------------------- phones (the Android / iOS apps, html.mobile)
   A compact top bar replaces the big 2016 header; every page is in the menu. */
.m-top, .m-drawer { display: none; }
html.mobile .hdr-wrap { display: none; }
html.mobile .m-top {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px;
  padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right));
  background: linear-gradient(180deg, #16222e, #0a121a); border-bottom: 1px solid var(--line-hi); box-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.m-top-menu { position: relative; flex: none; display: grid; align-content: center; gap: 4px; width: 42px; height: 36px; padding: 0 9px; border: 1px solid #455b6f; border-radius: 3px; background: linear-gradient(180deg, #34495c, #131c25); }
.m-top-menu i { display: block; height: 3px; background: #dbe7f2; border-radius: 1px; }
.m-top-dot { position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); }
.m-top-logo { flex: none; padding: 0; border: 0; background: none; }
.m-top-logo .oo-logo { font-size: 20px; }
.m-top-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 13px var(--font-hea); letter-spacing: .6px; color: var(--cyan); }
.m-top-money { flex: none; display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border: 1px solid var(--line); border-radius: 3px; background: rgba(0, 0, 0, .4); text-decoration: none; font: bold 12px Verdana, Arial, sans-serif; color: #bcd3e3; }
.m-top-money::before { content: ''; width: 20px; height: 20px; background: url(/assets/ui/hud/icons/credits.png?v=oo3) no-repeat center / contain; }
.m-top-money.uri { color: #82d1ff; }
.m-top-money.uri::before { background-image: url(/assets/ui/hud/icons/uridium.png?v=oo3); }
.m-top-start { flex: none; height: 36px; padding: 0 18px; border: 1px solid #8fe064; border-radius: 3px; background: linear-gradient(180deg, #6cc944, #3a8f22 55%, #2a7016); color: #fff; font: bold 15px Verdana, Arial, sans-serif; letter-spacing: 1px; text-shadow: 0 1px 0 #1d4d0e; }
html.mobile .m-drawer { position: fixed; inset: 0; z-index: 65; display: flex; justify-content: flex-start; background: rgba(0, 0, 0, .6); }
html.mobile .m-drawer.hidden { display: none !important; }
.m-drawer-card { width: min(560px, 100vw); height: 100%; overflow-y: auto; padding: 10px; padding-left: max(10px, env(safe-area-inset-left)); background: var(--panel-2); border-right: 1px solid var(--line-hi); box-shadow: 6px 0 24px rgba(0, 0, 0, .8); }
.m-drawer-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; color: var(--txt); }
.m-drawer-head img { height: 18px; }
.m-drawer-head > b { font: 15px var(--font-hea); color: var(--white); }
.m-d-vip { padding: 1px 6px; border: 1px solid var(--gold); color: var(--gold); font-size: 11px; }
.m-drawer-x { margin-left: auto; width: 38px; height: 38px; border: 1px solid #455b6f; border-radius: 3px; background: #131c25; font-size: 24px; line-height: 1; }
.m-drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.m-drawer-grid button { min-height: 44px; padding: 6px 10px; border: 1px solid #455b6f; border-radius: 3px; background: linear-gradient(180deg, #2b3d4e, #131c25); color: #dbe7f2; font: 13px var(--font-hea); letter-spacing: .5px; text-align: left; }
.m-drawer-grid button.active { border-color: var(--cyan); color: #fff; box-shadow: inset 0 0 12px rgba(98, 192, 255, .25); }
.m-drawer-grid .m-d-out { color: #ffb3aa; border-color: #7a3a33; }
.m-d-mail { float: right; min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font: bold 11px/18px Verdana, sans-serif; text-align: center; }
html.mobile .frame { width: 100%; padding: 0 0 20px; }
html.mobile .content { padding: 8px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
html.mobile body { background-size: auto 100vh; background-attachment: scroll; -webkit-text-size-adjust: 100%; }
@media (min-width: 760px) {
  html.mobile .home-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-areas: 'lic news' 'rec cal' 'rec hof'; }
  html.mobile .home-grid > .license { grid-area: lic; }
  html.mobile .home-grid > .news { grid-area: news; }
  html.mobile .home-grid > .records { grid-area: rec; }
  html.mobile .home-grid > .calendar { grid-area: cal; }
  html.mobile .home-grid > .hof { grid-area: hof; }
}
.m-only { display: none; }
html.mobile .m-only { display: inline; }
html.mobile .d-only { display: none; }
.inv-fit { display: block; margin-top: 6px; min-width: 120px; min-height: 34px; }
@media (min-width: 760px) {
  html.mobile .shop { grid-template-columns: 138px minmax(0, 1fr) 270px; }
  html.mobile .shop-detail { grid-column: auto; position: sticky; top: 54px; max-height: calc(100vh - 62px); overflow-y: auto; }
  html.mobile .shop-cat { padding: 8px 8px; font-size: 12px; }
}
html.mobile .page.active { animation: none; }
/* phones held upright */
@media (max-width: 759px) {
  html.mobile .m-top { gap: 6px; }
  html.mobile .m-top-logo { display: none; }
  html.mobile .m-top-money { padding: 2px 6px 2px 3px; font-size: 11px; }
  html.mobile .m-top-start { padding: 0 12px; font-size: 14px; }
  html.mobile .subtabs { overflow-x: auto; scrollbar-width: none; }
  html.mobile .subtabs::-webkit-scrollbar { display: none; }
  html.mobile .subtab { flex: none; }
  html.mobile .panel-body:has(> .data-table), html.mobile .panel-body:has(> table) { overflow-x: auto; }
  html.mobile .equip-bar { flex-wrap: wrap; }
  html.mobile .shop { grid-template-columns: minmax(0, 1fr); }
  html.mobile #shop-cats { flex-direction: row; overflow-x: auto; }
  html.mobile .shop-cat { flex: none; }
}
/* landscape phones: the inventory stays beside the slots while they scroll */
@media (min-width: 760px) {
  html.mobile .equip { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  html.mobile .equip-inv { position: sticky; top: 54px; display: flex; flex-direction: column; max-height: calc(100vh - 62px); }
  html.mobile .equip-inv .inv-grid { grid-template-columns: repeat(5, 46px); max-height: none; min-height: 100px; }
  html.mobile .equip-body { grid-template-columns: 200px minmax(0, 1fr); }
}
/* phones: the landing page (logged out) */
html.mobile .ld-top { padding: 8px 12px; gap: 10px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
html.mobile .ld-top .oo-logo { font-size: 26px; }
html.mobile .ld-login input, html.mobile .ld-register input { padding: 9px 10px; font-size: 15px; }
html.mobile .ld-login .btn-metal { padding: 10px 14px; }
html.mobile .ld-hero { gap: 16px; padding: 16px 12px; }
html.mobile .ld-pitch h1 { font-size: 32px; margin-bottom: 8px; }
html.mobile .ld-pitch p { font-size: 14px; margin: 6px 0; }
html.mobile .ld-points { margin: 10px 0; gap: 4px; }
html.mobile .company-card { height: 112px; }
html.mobile .cc-name { bottom: 26px; font-size: 16px; }
html.mobile .ld-register .btn-start { font-size: 18px; }
html.mobile .ld-media { padding-left: 12px; padding-right: 12px; gap: 10px; }
@media (min-width: 760px) {
  html.mobile .ld-hero { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
}
@media (max-width: 759px) {
  html.mobile .ld-top { flex-direction: column; align-items: stretch; }
  html.mobile .ld-brand { justify-content: center; }
  html.mobile .ld-login { flex-wrap: wrap; }
  html.mobile .ld-login input { flex: 1 1 140px; }
  html.mobile .ld-forgot { width: 100%; text-align: right; }
}
html.mobile .m-top { height: calc(46px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
html.mobile .ld-top { padding-top: max(8px, env(safe-area-inset-top)); }
.hdr-start.back { font-size: 16px; }
/* the apps: daily reminder */
.acc-app-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.acc-app-row small { display: block; font-size: 11px; }
.acc-app-row select { padding: 4px 6px; background: #03070b; border: 1px solid var(--line-hi); color: #fff; }
/* moderation: blocked pilots (account), reports (admin) */
.acc-blocked { display: grid; gap: 4px; }
.acc-blk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
#adm-reports tr.rep-open td { background: rgba(255, 106, 90, .06); }
#adm-reports .rep-text { max-width: 260px; word-break: break-word; }
#adm-reports .rep-acts { display: flex; flex-wrap: wrap; gap: 3px; min-width: 160px; }
/* footers: every legal page (Paycell criteria) and the payment logos */
.legal-links { flex-wrap: wrap; row-gap: 2px; max-width: 1240px; margin: 0 auto; }
/* wide screens: every link on one line (Çerez Ayarları used to drop to a second line) */
/* (the row is about 1020 px wide at 12 px, 900 px at 11 px with smaller gaps; narrower screens keep wrapping) */
@media (min-width: 1000px) { html:not(.mobile) .legal-links { flex-wrap: nowrap; white-space: nowrap; gap: 5px; font-size: 11px; } }
@media (min-width: 1080px) { html:not(.mobile) .legal-links { gap: 7px; font-size: 12px; } }
.pay-logos { margin: 8px 0 6px; }
.pay-logos img { height: 28px; max-width: 100%; }
.pay-txt { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--txt); font-size: 12px; }
.co-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 12px; line-height: 1.5; cursor: pointer; }
.co-check input { margin-top: 3px; flex: none; }
.co-check a, .legal-card a { color: var(--cyan); }
.m-drawer-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.m-drawer-legal a { color: var(--txt-dim); text-decoration: none; padding: 4px 0; }
/* phones: the footer's links get room for a finger */
html.mobile .legal-links { gap: 4px 10px; font-size: 13px; }
html.mobile .legal-links a { padding: 4px 0; }
html.mobile .legal-links span { display: none; }
.pay-logos img { height: 24px; width: auto; }
.co-pay { text-align: center; margin: 4px 0; }
.co-pay img { height: 26px; width: auto; }
.reg-terms { display: flex !important; grid-template-columns: none; flex-direction: row; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--txt); cursor: pointer; }
.reg-terms input { margin-top: 2px; flex: none; }
.reg-terms a { color: var(--cyan); }
/* pop-ups never taller than the screen: the head stays, the body scrolls (phones, small windows) */
.modal { padding: 8px; }
.modal-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); display: flex; flex-direction: column; }
.modal-card > .panel-head { flex: none; }
.modal-card > .panel-body { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
/* the daily bonus on a phone: compact steps, the button always in reach */
@media (max-height: 560px) {
  #modal-daily .panel-body > div > p.dim { display: none; }
  .dbar { margin: 6px 0; padding-top: 12px; gap: 4px; }
  .dbonus { padding: 4px; gap: 2px; }
  .dbonus img { width: 44px; height: 44px; }
  .dbonus small { font-size: 9px; }
  .dbonus .dcheck { height: 12px; font-size: 12px; }
  .dinfo { margin: 4px 0; }
  #modal-daily .btn-row { margin-top: 6px; }
}
@media (max-width: 560px) {
  .dbar { grid-template-columns: repeat(3, 1fr); }
  .dbar-line { display: none; }
}

/* Paycell: payment badges (footers) and the card step of the checkout window */
.pay-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.pay-badges small { color: var(--txt-dim); margin-right: 2px; }
.pay-badge { display: inline-block; padding: 2px 8px; font: bold 10px/14px Verdana, sans-serif; letter-spacing: .5px; color: #dfe8f0; border: 1px solid #3a4c5c; background: linear-gradient(180deg, #1c2833, #0c1218); border-radius: 2px; }
.pay-badge.paycell { color: #ffd84a; border-color: #6b5a1c; }
.pay-badge.visa { color: #b8c8ff; font-style: italic; }
.pay-badge.mastercard { color: #ffb36b; }
.pay-badge.troy { color: #8fd8d0; }
.co-card { width: min(560px, 94vw); }
.co-steps { flex: none; display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); background: #070c11; counter-reset: co; }
.co-steps li { flex: 1; padding: 6px 4px; text-align: center; font: 11px var(--font-hea); color: #5c7183; letter-spacing: .5px; counter-increment: co; }
.co-steps li::before { content: counter(co) '. '; }
.co-steps li.on { color: var(--white); background: linear-gradient(180deg, #16222d, #0b1219); box-shadow: inset 0 -2px 0 var(--cyan); }
.co-steps li.done { color: #8fb4cf; }
.co-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#co-form label:not(.co-check) { display: block; margin-bottom: 8px; color: #9db3c6; font-size: 11px; }
#co-form input:not([type=checkbox]) { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; font: 14px Verdana, sans-serif; letter-spacing: 1px; color: var(--white); background: #04080c; border: 1px solid #2c3d4d; }
#co-form input:focus { outline: none; border-color: var(--cyan); }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-num { position: relative; display: block; }
.cc-brand { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-top: 1px; font: bold 10px Verdana, sans-serif; color: #dfe8f0; }
.cc-brand.visa { color: #b8c8ff; font-style: italic; } .cc-brand.mastercard { color: #ffb36b; } .cc-brand.troy { color: #8fd8d0; }
#modal-checkout a { color: #8fd0ff; }
.co-err { margin: 6px 0; padding: 5px 8px; color: #ffb0a6; border: 1px solid #7a2c24; background: rgba(60, 12, 8, .6); }
.co-test { margin-bottom: 10px; padding: 5px 8px; color: #e8d39a; border: 1px solid #6b5a1c; background: rgba(40, 32, 8, .6); font-size: 11px; }
.co-secure { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.co-secure small { color: var(--txt-dim); }
@media (max-width: 700px) { .co-row { grid-template-columns: 1fr; } }

/* payment marks: Paycell + card schemes (white logos) */
.pay-marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.pay-marks small { color: #8aa0b2; font-size: 11px; }
.pay-marks img { height: 20px; width: auto; opacity: .9; }
.pay-marks img.pm-paycell { height: 24px; opacity: 1; }
.pm-troy { font: bold 13px/1 Verdana, sans-serif; letter-spacing: 1px; color: #fff; opacity: .9; }
.co-secure img.pm-paycell { height: 24px; width: auto; flex: none; }
.pay-marks img[src*="visa"] { height: 34px; margin: -6px -4px; }
.pay-marks img[src*="mastercard"] { height: 26px; }

/* 3D ship viewer (hangar / shop): laid over the picture */
.showcase-img, .equip-ship-img, .sd-img { position: relative; }
.showcase-img.has3d, .equip-ship-img.has3d { height: 250px; }
.sd-img.has3d { height: 230px; }
model-viewer.oo3d { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; outline: none; cursor: grab; }
model-viewer.oo3d:active { cursor: grabbing; }

.drone-row-card .drone-sell { margin-left: 10px; white-space: nowrap; }
.drone-row-card .drone-sell:disabled { opacity: .45; cursor: not-allowed; }

/* hangar depot: all ammunition, ores and materials with their exact amounts */
.dp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dp-g .panel-body { padding: 8px; }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dp-c { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px 8px; border: 1px solid #1f3650; background: linear-gradient(180deg, #0f1c30, #0a1322); border-radius: 3px; }
.dp-c.zero { opacity: .45; }
.dp-i { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; }
.dp-i img { max-width: 36px; max-height: 36px; object-fit: contain; }
.dp-n { font-size: 11px; color: #8aa1b6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-c b { font: 700 14px var(--font-hea, sans-serif); color: #ffd27a; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .dp { grid-template-columns: 1fr; } }

.cookie-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9000; width: min(720px, calc(100vw - 24px)); display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(8, 16, 28, 0.96); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6); color: var(--txt, #cfd8e3); font-size: 13px; line-height: 1.45; }
.cookie-bar p { margin: 0; }
.cookie-bar a { color: #ffc44d; }
.cookie-bar-btns { display: flex; gap: 8px; flex: none; }
@media (max-width: 600px) { .cookie-bar { flex-direction: column; align-items: stretch; bottom: 8px; } .cookie-bar-btns { justify-content: flex-end; } .cookie-bar-btns .btn-metal { min-height: 40px; } }

/* the hangar: clicks, Ctrl / Shift clicks and double clicks select items, never text (the browser painted it blue); typing fields stay selectable */
#hangar-manage-view, #hangar-overview-view, #hangar-depot-view, #hangar-slots { -webkit-user-select: none; user-select: none; }
#hangar-manage-view input, #hangar-manage-view textarea, #hangar-overview-view input, #hangar-depot-view input { -webkit-user-select: text; user-select: text; }