/* =========================================================
   PIXELPORT — pixel airport tycoon UI
   ========================================================= */
@font-face {
  font-family: 'PixelCN';
  src: url('../assets/font/fusion-pixel.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #070b12;
  --bg2: #0b121c;
  --panel: #101a26;
  --panel2: #152230;
  --panel3: #1b2b3b;
  --line: #2a3d50;
  --line2: #456179;
  --cream: #f1e6cc;
  --muted: #93a6b8;
  --dim: #66798b;
  --gold: #f2b544;
  --gold2: #ffd98a;
  --teal: #4fd1c5;
  --green: #7bd88f;
  --red: #e8654f;
  --blue: #7ab8ff;
  --purple: #c7a5ef;
  --shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.4);
  --font: 'PixelCN', 'Microsoft YaHei', 'PingFang SC', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  overflow: hidden;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
button, input { font-family: var(--font); }
button { color: inherit; }
img { image-rendering: pixelated; }
::selection { background: var(--gold); color: #101722; }
:focus-visible { outline: 2px dashed var(--gold2); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--muted) !important; }
.pos { color: var(--green) !important; }
.neg { color: var(--red) !important; }
.warn { color: #eac56d; }
.danger { color: var(--red); }
.nowrap { white-space: nowrap; }
.ico { display: inline-flex; width: 1.35em; height: 1.35em; align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: -0.18em; }
.ico img { width: 100%; height: 100%; display: block; }

.screen { position: fixed; inset: 0; overflow: hidden; }
.screen-title { background: #060a11; }
.screen-select { background: radial-gradient(circle at 55% 45%, #0d1a24 0%, #070c13 70%); display: flex; flex-direction: column; }
.screen-game { background: #05080d; }

/* =========================== buttons & common =========================== */
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #172433; border: 2px solid #354a5e; color: var(--cream);
  min-height: 36px; padding: 7px 12px; font-size: 12px; line-height: 1.2;
  box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none;
  transition: transform 0.08s, background 0.08s, border-color 0.08s;
  position: relative;
}
.pbtn:hover:not(:disabled) { background: #203448; border-color: #5e7b91; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.pbtn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,.5); }
.pbtn:disabled, .pbtn.disabled { opacity: 0.38; cursor: not-allowed; filter: grayscale(0.4); }
.pbtn.primary { background: var(--gold); border-color: var(--gold2); color: #121820; text-shadow: none; }
.pbtn.primary:hover:not(:disabled) { background: #ffd063; border-color: #ffeab4; }
.pbtn.ghost { background: rgba(13,22,32,.75); }
.pbtn.danger { background: #3a1d1d; border-color: #8e3c34; color: #ffd9d0; }
.pbtn.small { min-height: 28px; padding: 5px 9px; font-size: 10px; }
.pbtn.tiny { min-height: 23px; padding: 3px 7px; font-size: 9.5px; box-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.pbtn.big { width: 100%; min-height: 46px; font-size: 14px; justify-content: space-between; padding: 10px 14px; }
.pbtn span { font-size: 9px; opacity: 0.72; letter-spacing: 0.06em; }
.pbtn kbd { border: 1px solid #4b6174; background: #0d1620; padding: 0 4px; font-size: 8px; color: var(--muted); box-shadow: none; }
kbd { font-family: var(--font); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #09111a; }
::-webkit-scrollbar-thumb { background: #354b5e; border: 1px solid #09111a; }
::-webkit-scrollbar-thumb:hover { background: #4f6c82; }

/* =========================== TITLE =========================== */
#title-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.16;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 1px, transparent 1px, transparent 3px); }
.title-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 62% 35%, rgba(0,0,0,0) 10%, rgba(2,5,10,0.45) 70%),
    linear-gradient(90deg, rgba(3,7,12,0.92) 0%, rgba(3,7,12,0.58) 38%, rgba(3,7,12,0.05) 70%),
    linear-gradient(0deg, rgba(3,7,12,0.9) 0%, rgba(3,7,12,0.05) 46%); }
.title-inner {
  position: absolute; inset: 0; z-index: 5;
  padding: clamp(22px, 4.5vw, 60px);
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto 1fr auto;
  gap: 18px 30px; pointer-events: none;
}
.title-inner > * { pointer-events: auto; }
.title-logo { grid-column: 1; grid-row: 1; align-self: start; }
.logo-tag { font-size: 9px; color: var(--gold); letter-spacing: 0.3em; border-left: 4px solid var(--gold); padding-left: 8px; margin-bottom: 12px; }
.title-logo h1 { margin: 0; font-size: clamp(46px, 7.6vw, 108px); line-height: 0.82; letter-spacing: -3px; font-weight: normal;
  text-shadow: 4px 4px 0 #05080d, 8px 8px 0 rgba(0,0,0,0.4); }
.logo-pix { color: var(--cream); }
.logo-port { color: var(--gold); }
.logo-cn { margin-top: 15px; font-size: clamp(15px, 2vw, 24px); letter-spacing: 0.42em; color: #f1d79a; text-shadow: 2px 2px 0 #05080d; }
.logo-rule { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 8px; letter-spacing: 0.25em; }
.logo-rule i { width: 44px; height: 2px; background: #55677a; display: block; }
.logo-rule b { font-weight: normal; }
.title-menu { grid-column: 1; grid-row: 2; align-self: end; width: min(360px, 100%); display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.title-menu .pbtn { justify-content: space-between; text-align: left; padding: 11px 13px 11px 16px; border-left: 4px solid #40566a; background: linear-gradient(90deg, rgba(21,34,47,.94), rgba(12,20,29,.8)); }
.title-menu .pbtn.primary { background: var(--gold); border-color: var(--gold2); border-left-color: #ffe6a0; color: #111820; }
.title-menu .pbtn.primary:hover:not(:disabled) { background: #ffd063; border-color: #ffeab4; }
.title-menu .pbtn:hover:not(:disabled) { border-left-color: var(--gold); }
.pbtn-main { font-size: 16px; letter-spacing: 0.06em; }
.pbtn-sub { font-size: 8px !important; letter-spacing: 0.16em !important; opacity: 0.6 !important; }
.title-side { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: 260px; padding: 13px 14px; background: rgba(9,16,24,0.72); border: 2px solid #2b4154; box-shadow: var(--shadow); }
.title-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed #273a4b; }
.title-stat small { color: var(--muted); font-size: 9px; }
.title-stat b { color: var(--gold2); font-size: 15px; font-weight: normal; display: inline-flex; align-items: center; gap: 4px; }
.title-stat b .ico { width: 11px; height: 11px; }
.title-tip { margin-top: 10px; color: var(--muted); font-size: 8px; letter-spacing: 0.12em; text-align: right; }
.title-footer { position: absolute; left: clamp(22px, 4.5vw, 60px); right: clamp(22px, 4.5vw, 60px); bottom: 16px; z-index: 6; display: flex; justify-content: space-between; color: #7f92a4; font-size: 8px; letter-spacing: 0.12em; pointer-events: none; }
.blink { animation: blink 2.2s steps(2, end) infinite; }
@keyframes blink { 0%, 55% { opacity: 0.9; } 56%, 100% { opacity: 0.35; } }

/* =========================== AIRPORT SELECT =========================== */
.select-head { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 2px solid #223446; background: rgba(9,15,23,.92); flex-wrap: wrap; position: relative; z-index: 6; }
.select-title { font-size: 20px; letter-spacing: 0.06em; }
.select-title span { display: block; font-size: 8px; color: var(--muted); letter-spacing: 0.22em; margin-top: 2px; }
.region-tabs { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.rtab { background: #0f1b28; border: 1px solid #2b4053; padding: 4px 9px; color: var(--muted); font-size: 10px; cursor: pointer; box-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.rtab span { display: block; font-size: 6.5px; letter-spacing: 0.09em; opacity: 0.65; }
.rtab:hover { background: #17283a; color: var(--cream); }
.rtab.on { background: var(--gold); color: #111820; border-color: var(--gold2); }
.rtab.on span { opacity: 0.7; }
.select-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding: 16px 22px; }
.map-frame { position: relative; align-self: center; justify-self: center; width: 100%; max-width: calc((100vh - 190px) * 1.7778); aspect-ratio: 896 / 504; border: 3px solid #2d4356; box-shadow: 6px 6px 0 rgba(0,0,0,.45), inset 0 0 0 2px #0a141f; overflow: hidden; background: #08121b; }
#select-map { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.map-pins { position: absolute; inset: 0; z-index: 3; }
.map-pin { position: absolute; transform: translate(-50%, -50%); background: transparent; border: 0; width: 18px; height: 18px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
.map-pin .pin-dot { width: 8px; height: 8px; background: #7bd88f; border: 2px solid #071018; box-shadow: 0 0 0 1px rgba(255,255,255,.22); display: block; transition: transform .12s; }
.map-pin.d1 .pin-dot { background: #7bd88f; }
.map-pin.d2 .pin-dot { background: #4fd1c5; }
.map-pin.d3 .pin-dot { background: #f2b544; }
.map-pin.d4 .pin-dot { background: #e8654f; }
.map-pin.featured .pin-dot { width: 10px; height: 10px; box-shadow: 0 0 0 2px #071018, 0 0 0 3px var(--gold); animation: pinPulse 1.9s steps(2,end) infinite; }
.map-pin:hover .pin-dot, .map-pin.on .pin-dot { transform: scale(1.55); background: var(--gold2); }
.map-pin.on { z-index: 8; }
.map-pin.on .pin-label { opacity: 1; transform: translateY(0); }
.pin-label { position: absolute; left: 16px; top: -8px; background: #0a1622; border: 1px solid #4e6b7f; padding: 2px 6px; font-size: 9px; white-space: nowrap; color: var(--cream); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s, transform .12s; z-index: 5; box-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.pin-label b { color: var(--gold2); font-weight: normal; }
.map-pin:hover .pin-label { opacity: 1; transform: translateY(0); }
.pin-stars { position: absolute; right: -4px; top: -8px; font-size: 7px; color: var(--gold); background: #0a1420; padding: 0 2px; border: 1px solid #3c5366; }
.map-pin.hide { display: none; }
@keyframes pinPulse { 0%,100% { box-shadow: 0 0 0 2px #071018, 0 0 0 3px #f2b544; } 50% { box-shadow: 0 0 0 2px #071018, 0 0 0 6px rgba(242,181,68,.18); } }
.map-legend { position: absolute; left: 10px; bottom: 9px; z-index: 4; display: flex; gap: 10px; align-items: center; background: rgba(7,14,21,.75); border: 1px solid #2b4053; padding: 4px 8px; font-size: 8px; color: var(--muted); }
.map-legend .dot { width: 6px; height: 6px; display: inline-block; margin-right: 3px; }
.dot.rec { background: var(--gold); }
.dot.d1 { background: #7bd88f; }
.dot.d3 { background: #f2b544; }
.dot.d4 { background: #e8654f; }
.map-coord { position: absolute; right: 10px; top: 9px; z-index: 4; font-size: 7px; color: #7f97a9; letter-spacing: 0.15em; background: rgba(7,14,21,.55); padding: 2px 5px; border: 1px solid rgba(50,72,90,.5); }
.airport-card { background: rgba(13,23,34,.94); border: 2px solid #2a4053; box-shadow: var(--shadow); padding: 15px; overflow-y: auto; max-height: 100%; min-height: 0; }
.abc-top { display: flex; gap: 12px; align-items: flex-start; }
.abc-code { font-size: 46px; line-height: .9; color: var(--gold); text-shadow: 3px 3px 0 #05090e; letter-spacing: -1px; }
.abc-title { flex: 1; min-width: 0; }
.abc-city { font-size: 9px; color: var(--muted); letter-spacing: 0.08em; }
.abc-title h2 { margin: 3px 0 1px; font-size: 19px; line-height: 1.2; font-weight: normal; }
.abc-en { font-size: 8px; color: var(--muted); letter-spacing: 0.12em; }
.abc-rec { background: var(--gold); color: #111820; font-size: 8px; line-height: 1.3; padding: 4px 5px; text-align: center; border: 1px solid var(--gold2); }
.abc-diff { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-bottom: 8px; border-bottom: 1px solid #263b4d; }
.abc-diff span { color: var(--gold); letter-spacing: 1px; font-size: 11px; }
.abc-diff b { font-size: 9px; color: var(--muted); font-weight: normal; }
.abc-diff .flag { margin-left: auto; display: flex; border: 1px solid #0a1118; }
.abc-diff .flag span { display: block; width: 14px; height: 9px; }
.abc-desc { font-size: 11px; color: #c5c9c4; margin: 9px 0 10px; line-height: 1.7; }
.abc-traits { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.trait { display: flex; gap: 8px; background: #0e1a25; border: 1px solid #263d50; padding: 7px 8px; }
.trait-ico { width: 19px; height: 19px; flex: 0 0 auto; }
.trait b { color: var(--gold2); font-size: 10.5px; font-weight: normal; }
.trait p { margin: 1px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.abc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #263b4d; border: 1px solid #263b4d; margin-bottom: 10px; }
.abc-grid > div { background: #0e1a25; padding: 5px 7px; }
.abc-grid small { display: block; color: var(--muted); font-size: 8px; }
.abc-grid b { color: var(--cream); font-size: 10px; font-weight: normal; }
.abc-landmark { display: flex; gap: 8px; padding: 8px; background: #131f2a; border: 1px solid #334d61; margin-bottom: 10px; }
.abc-landmark > span { width: 22px; height: 22px; flex: 0 0 auto; }
.abc-landmark small { color: var(--muted); font-size: 8px; display: block; }
.abc-landmark b { color: var(--gold2); font-size: 11px; font-weight: normal; }
.abc-landmark p { margin: 2px 0 0; font-size: 9px; color: var(--muted); line-height: 1.5; }
.abc-mastery { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; margin-bottom: 8px; border-top: 1px solid #263b4d; border-bottom: 1px solid #263b4d; }
.abc-mastery small { display: block; font-size: 8px; color: var(--muted); }
.abc-mastery b { color: var(--gold2); font-weight: normal; font-size: 12px; }
.stars-row { display: flex; gap: 2px; }
.star { display: inline-flex; width: 17px; height: 17px; opacity: 0.25; filter: grayscale(1); }
.star.on { opacity: 1; filter: none; }
.abc-pager { display: flex; gap: 6px; margin-bottom: 8px; }
.abc-pager .pbtn { flex: 1; }
.select-foot { padding: 7px 22px; border-top: 2px solid #1c2c3c; display: flex; justify-content: space-between; color: #718595; font-size: 8px; letter-spacing: 0.06em; background: #070d14; }

/* =========================== GAME =========================== */
.game-bg { position: absolute; inset: 0; background:
  radial-gradient(circle at 50% 42%, rgba(24,47,55,.22), transparent 55%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 9px),
  #05090f; }
.world-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; box-shadow: 0 0 0 2px #172630, 0 0 60px rgba(0,0,0,.65); background: #091017; }
#world { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.world-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 4px); mix-blend-mode: soft-light; }

/* HUD */
.hud-top { position: absolute; left: 0; right: 0; top: 0; z-index: 30; height: 76px; display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px 0; background: linear-gradient(180deg, rgba(5,10,16,.97) 0%, rgba(5,10,16,.88) 80%, rgba(5,10,16,0) 100%); }
.hud-left { display: flex; align-items: center; gap: 12px; min-width: 250px; }
.airport-id { display: flex; align-items: center; gap: 9px; }
.airport-id .code { display: flex; align-items: center; justify-content: center; width: 56px; height: 44px; border: 2px solid #3d5a6e; background: #0d1924; color: var(--gold); font-size: 20px; box-shadow: inset 0 0 0 2px #061019; }
.id-text b { display: block; font-size: 12px; font-weight: normal; color: var(--cream); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.id-text small { display: block; font-size: 7px; letter-spacing: .12em; color: #7f93a5; white-space: nowrap; }
.hud-clock { border-left: 1px solid #2b4052; padding-left: 12px; }
.hud-clock b { display: block; font-size: 20px; font-weight: normal; color: var(--gold2); line-height: 1.1; letter-spacing: 0.03em; }
.hud-clock small { display: block; font-size: 8px; color: var(--muted); }
.hud-mid { display: flex; align-items: flex-start; gap: 6px; flex: 1; justify-content: center; }
.hud-stat { display: flex; align-items: center; gap: 7px; background: rgba(13,24,35,.9); border: 1px solid #2b4052; min-height: 44px; padding: 5px 9px; box-shadow: 2px 2px 0 rgba(0,0,0,.25); position: relative; }
.hud-stat .ico { width: 19px; height: 19px; }
.hud-stat small { display: block; font-size: 7px; color: #8599aa; letter-spacing: .06em; white-space: nowrap; }
.hud-stat b { display: block; font-size: 15px; font-weight: normal; line-height: 1.15; color: var(--cream); white-space: nowrap; }
.hud-stat.wide { min-width: 166px; }
.hud-stat em { font-style: normal; margin-left: auto; font-size: 8px; color: #8094a6; }
.hud-stat em.pos { color: var(--green); }
.hud-stat em.neg { color: var(--red); }
.hud-stat.negative b { color: var(--red); }
.rep-stars { display: flex; gap: 1px; position: absolute; right: 7px; bottom: 4px; }
.rep-star .ico, .star .ico { width: 100%; height: 100%; }
.rep-star { width: 9px; height: 9px; display: inline-flex; opacity: .18; filter: grayscale(1); }
.rep-star.on { opacity: 1; filter: none; }
.hud-stat.lvl { min-width: 138px; }
.hud-stat.lvl > div:first-child { flex: 1; }
.hud-stat.lvl b { color: var(--gold2); font-size: 16px; }
.hud-stat.lvl small em { font-style: normal; color: var(--muted); font-size: 7px; margin-left: 4px; }
.xp-bar { width: 100%; height: 5px; background: #061019; border: 1px solid #2a4053; position: absolute; left: 0; bottom: 0; }
.xp-bar i { display: block; height: 100%; background: var(--teal); width: 0%; transition: width .3s; }
.hud-stat.streak .ico { width: 16px; height: 16px; }
.hud-stat.streak b { color: var(--gold); }
.hud-stat.streak.dim { opacity: .55; }
.hud-right { display: flex; align-items: flex-start; gap: 7px; }
.weather-chip { display: flex; align-items: center; gap: 7px; background: rgba(13,24,35,.9); border: 1px solid #2b4052; min-height: 44px; padding: 5px 9px; min-width: 138px; cursor: pointer; text-align: left; }
.weather-chip:hover { border-color: #4e6b7e; }
.weather-chip .ico { width: 24px; height: 24px; }
.weather-chip b { display: block; font-size: 11px; font-weight: normal; color: var(--cream); }
.weather-chip small { display: block; font-size: 7px; color: var(--muted); white-space: nowrap; }
.speed-controls { display: flex; gap: 2px; background: #0b1621; border: 1px solid #2b4052; padding: 2px; }
.speed-controls button { width: 31px; height: 34px; background: #142332; border: 1px solid transparent; color: #a9bac9; cursor: pointer; font-size: 11px; padding: 0; }
.speed-controls button:hover { background: #203549; color: var(--cream); }
.speed-controls button.on { background: var(--gold); color: #111820; border-color: var(--gold2); }
.icon-btn { width: 43px; height: 44px; background: rgba(13,24,35,.9); border: 1px solid #2b4052; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: #1c2f41; }
.hamburger { width: 16px; display: flex; flex-direction: column; gap: 3px; }
.hamburger i { display: block; height: 2px; background: #c8d3db; }
.ops-strip { position: absolute; top: 78px; left: 14px; z-index: 25; display: flex; align-items: center; gap: 4px; background: rgba(8,15,23,.75); border: 1px solid #253a4b; padding: 3px; backdrop-filter: blur(1px); }
.chip { display: flex; align-items: center; gap: 4px; background: transparent; border: 1px solid transparent; color: #8fa4b5; font-size: 9px; padding: 3px 6px; cursor: pointer; }
.chip .ico { width: 13px; height: 13px; }
.chip b { color: var(--cream); font-weight: normal; }
.chip:hover { background: #152535; border-color: #2d4559; color: var(--cream); }
.chip.danger b { color: var(--red); }
.chip.warn b { color: #e8c66e; }
.weather-now { border-left: 1px solid #2a3e4e; padding: 0 8px; font-size: 8px; color: #7f95a6; white-space: nowrap; }

/* dock / ticker / abilities */
.dock { position: absolute; left: 14px; bottom: 41px; z-index: 32; display: flex; gap: 5px; }
.dock-btn { display: flex; align-items: center; gap: 7px; min-width: 90px; height: 50px; background: rgba(11,21,31,.94); border: 2px solid #2b4153; color: #bfcbd4; padding: 5px 8px; cursor: pointer; box-shadow: 2px 2px 0 rgba(0,0,0,.35); text-align: left; }
.dock-btn:hover { background: #172a3b; border-color: #4b687d; color: var(--cream); }
.dock-btn.on { background: #23303d; border-color: var(--gold); color: var(--cream); }
.dock-btn.on .dock-ico { filter: brightness(1.2); }
.dock-ico { width: 23px; height: 23px; flex: 0 0 auto; }
.dock-btn b { display: block; font-size: 10.5px; line-height: 1.3; font-weight: normal; white-space: nowrap; }
.dock-btn small { display: block; font-size: 6.5px; color: #748a9c; letter-spacing: .08em; white-space: nowrap; }
.dock-btn kbd { position: absolute; opacity: 0; }
.dock-btn { position: relative; }
.tut-target { animation: tutTarget 1.2s steps(2,end) infinite; }
@keyframes tutTarget { 0%,100% { outline: 2px solid rgba(242,181,68,.35); outline-offset: 2px; } 50% { outline: 3px solid var(--gold2); outline-offset: 3px; } }
.ability-bar { position: absolute; right: 14px; bottom: 41px; z-index: 32; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ability-group { display: flex; gap: 5px; }
.ability { display: flex; align-items: center; gap: 7px; width: 210px; min-height: 46px; background: rgba(12,23,33,.95); border: 2px solid #3e5568; padding: 4px 8px; color: var(--cream); cursor: pointer; text-align: left; position: relative; box-shadow: var(--shadow-sm); }
.ability:hover { background: #1b3043; border-color: #65849a; }
.ability.alt { width: 154px; }
.ability .ability-ico { width: 23px; height: 23px; flex: 0 0 auto; }
.ability b { display: block; font-size: 10.5px; font-weight: normal; line-height: 1.3; }
.ability small { display: block; font-size: 6.5px; color: #7e94a5; letter-spacing: .04em; }
.ability kbd { position: absolute; right: 5px; top: 4px; font-size: 7px; color: #6d8496; border: 1px solid #3a5162; padding: 0 3px; }
.ability .ability-cd { display: block; font-size: 7px; color: var(--gold); margin-top: 1px; }
.ability.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,181,68,.18); }
.ability.active .ability-cd { color: var(--gold2); }
.ability.cooling { opacity: .72; }
.ability-note { color: #8095a6; font-size: 7px; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }

.ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; z-index: 28; display: flex; align-items: center; gap: 9px; background: rgba(6,12,19,.96); border-top: 2px solid #223748; padding: 0 14px; font-size: 10px; }
.ticker-label { color: var(--gold); font-size: 8px; letter-spacing: .08em; display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.ticker-label i { display: block; width: 5px; height: 5px; background: var(--red); animation: blink 1.5s steps(2,end) infinite; }
.ticker-track { flex: 1; overflow: hidden; white-space: nowrap; color: #b9c4cc; }
.ticker-text { overflow: hidden; text-overflow: ellipsis; }
.ticker-track.swap .ticker-text { animation: tickerIn .35s linear; }
@keyframes tickerIn { 0% { transform: translateY(7px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.ticker-time { flex: 0 0 auto; color: #6f8394; font-size: 8px; letter-spacing: .06em; }

/* panel */
.panel { position: absolute; right: 14px; top: 83px; bottom: 86px; width: 396px; z-index: 36; background: #0e1824; border: 2px solid #2d4659; box-shadow: 6px 6px 0 rgba(0,0,0,.45); display: flex; flex-direction: column; transform: translateX(calc(100% + 20px)); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s; }
.panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.panel-head { padding: 11px 13px 9px; border-bottom: 2px solid #273e50; position: relative; background: linear-gradient(180deg,#142231,#0e1925); flex: 0 0 auto; }
.ph-kicker { font-size: 7px; letter-spacing: .16em; color: var(--gold); }
.ph-titles { display: flex; align-items: baseline; gap: 7px; }
.ph-titles h2 { margin: 2px 0 0; font-size: 18px; font-weight: normal; letter-spacing: .05em; }
.ph-titles span { font-size: 7px; color: #7e93a5; letter-spacing: .13em; }
.panel-x { position: absolute; right: 9px; top: 9px; width: 26px; height: 26px; background: #0a131c; border: 1px solid #3a5265; color: #a9bac7; font-size: 16px; line-height: 1; cursor: pointer; }
.panel-x:hover { background: #23394c; color: var(--cream); }
.panel-scroll { overflow-y: auto; flex: 1; padding: 10px 12px 16px; }
.panel-note { color: #7e94a5; font-size: 8.5px; line-height: 1.7; border-top: 1px dashed #2b4053; margin-top: 10px; padding-top: 8px; }
.panel-note .pbtn { margin-right: 6px; }

.flight-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #273f52; border: 1px solid #273f52; margin-bottom: 10px; }
.flight-summary > div { background: #0f1d29; padding: 6px 7px; }
.flight-summary small { display: block; font-size: 7px; color: #7f94a5; }
.flight-summary b { font-size: 15px; font-weight: normal; color: var(--cream); }
.flight-list { display: flex; flex-direction: column; gap: 5px; }
.flight-row { display: flex; gap: 8px; background: #111f2c; border: 1px solid #2a4052; padding: 7px 7px 6px; }
.flight-row.danger { border-color: #684439; background: #1b1d25; }
.flight-row.priority { border-color: #7b6538; }
.fl-time { width: 49px; flex: 0 0 auto; border-right: 1px solid #263c4e; padding-right: 6px; }
.fl-time b { display: block; font-size: 13px; font-weight: normal; color: var(--gold2); }
.fl-time small { display: block; font-size: 7px; color: #8297a8; line-height: 1.4; }
.fl-main { flex: 1; min-width: 0; }
.fl-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.airline-dot { width: 6px; height: 6px; display: inline-block; border: 1px solid rgba(255,255,255,.25); flex: 0 0 auto; }
.airline-dot.big { width: 9px; height: 9px; }
.fl-top b { font-size: 10.5px; color: var(--cream); font-weight: normal; }
.fl-airline { color: #8599aa; font-size: 8px; }
.fl-tag { font-size: 7px; padding: 0 4px; border: 1px solid #3a5265; color: #a4b5c1; }
.fl-tag.bad { border-color: #7a473e; color: #f09080; }
.fl-tag.gold { border-color: #806b3c; color: var(--gold2); }
.fl-dest { font-size: 11px; color: #d8d8cc; margin-top: 2px; }
.fl-dest small { color: #788e9f; font-size: 8px; }
.fl-ac { float: right; color: #8196a6; font-size: 8px; }
.fl-status { display: flex; gap: 7px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.state-chip { border: 1px solid; font-size: 8px; padding: 0 4px; line-height: 1.5; }
.fl-pax { display: inline-flex; align-items: center; gap: 2px; color: #9eb0bc; font-size: 8px; }
.fl-pax .ico { width: 11px; height: 11px; }
.fl-gate { color: #93a7b5; font-size: 8px; margin-left: auto; }
.mini-progress { height: 3px; background: #07111a; margin-top: 4px; }
.mini-progress i { display: block; height: 100%; background: #4d8290; }
.fl-actions { display: flex; align-items: center; }
.fl-actions .pbtn { font-size: 8px; padding: 3px 5px; }
.empty-block { border: 1px dashed #2b4053; color: #7f94a5; text-align: center; padding: 20px 10px; font-size: 10px; line-height: 1.7; margin: 10px 0; }

.build-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: #283f52; border: 1px solid #283f52; margin: 8px 0 3px; }
.build-tab { background: #0f1d29; border: 0; color: #8fa3b1; font-size: 9.5px; padding: 6px 3px; cursor: pointer; }
.build-tab span { display: block; font-size: 6px; opacity: .55; letter-spacing: .05em; }
.build-tab:hover { background: #172a3a; color: var(--cream); }
.build-tab.on { background: #1d2b37; color: var(--gold2); box-shadow: inset 0 -2px 0 var(--gold); }
.build-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #283f52; border: 1px solid #283f52; margin-bottom: 10px; }
.build-summary > div { background: #0f1d29; padding: 5px 6px; }
.build-summary small { display: block; font-size: 7px; color: #7f94a5; }
.build-summary b { display: block; font-size: 10.5px; font-weight: normal; color: var(--cream); }
.sec-label { display: flex; align-items: baseline; gap: 6px; font-size: 10px; color: var(--gold2); margin: 10px 0 6px; letter-spacing: .06em; }
.sec-label span { font-size: 7px; color: #718898; letter-spacing: .1em; }
.gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gate-card { background: #101f2c; border: 1px solid #2a4153; padding: 5px 6px; }
.gate-card.built { border-color: #345367; }
.gc-top { display: flex; justify-content: space-between; align-items: baseline; }
.gc-top b { color: var(--gold2); font-size: 11px; font-weight: normal; }
.gc-top span { color: #7e94a5; font-size: 7px; }
.gc-info { font-size: 8.5px; color: #c2cbc9; margin-top: 1px; }
.gc-fx { font-size: 7.5px; color: #758b9c; margin: 1px 0 4px; }
.gate-card .pbtn { width: 100%; font-size: 8px; padding: 3px 4px; min-height: 20px; }
.lock { display: block; color: #a97f6a; font-size: 7px; margin-top: 2px; }
.special-list { display: flex; flex-direction: column; gap: 5px; }
.special-card { display: flex; gap: 8px; background: #101e2a; border: 1px solid #2b4356; padding: 7px; }
.special-card.done { border-color: #3e6650; background: #0f1f1b; }
.special-ico { width: 24px; height: 24px; flex: 0 0 auto; }
.special-card b { display: block; font-size: 11px; color: var(--gold2); font-weight: normal; }
.special-card small { display: block; color: #7f94a5; font-size: 7.5px; }
.special-card p { color: #9aaeba; font-size: 8px; margin: 2px 0 5px; line-height: 1.6; }
.done-tag { display: inline-block; font-size: 8px; color: var(--green); border: 1px solid #3d6353; padding: 1px 5px; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 6px; }
.cat-tab { display: flex; align-items: center; gap: 4px; background: #101e2a; border: 1px solid #2b4254; color: #9baeba; padding: 4px 6px; font-size: 9px; cursor: pointer; }
.cat-tab .ico { width: 13px; height: 13px; }
.cat-tab span { font-size: 6px; opacity: .6; letter-spacing: .04em; }
.cat-tab:hover { border-color: #516d80; color: var(--cream); }
.cat-tab.on { border-color: var(--gold); color: var(--gold2); background: #1e2b32; }
.cat-desc { color: #7e94a5; font-size: 8px; margin-bottom: 7px; line-height: 1.6; }
.upgrade-list { display: flex; flex-direction: column; gap: 5px; }
.up-card { background: #101e2a; border: 1px solid #2a4052; padding: 7px 8px; }
.up-card.maxed { border-color: #3b5340; }
.up-head { display: flex; align-items: center; gap: 7px; }
.up-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.up-head > div { flex: 1; }
.up-head b { display: block; font-size: 10.5px; color: var(--cream); font-weight: normal; }
.up-head small { display: block; color: #738999; font-size: 7px; letter-spacing: .04em; }
.up-lvl { color: var(--gold2); font-size: 10px; }
.up-lvl i { color: #718898; font-style: normal; font-size: 7px; }
.up-pips { display: flex; gap: 2px; margin: 4px 0 3px; }
.up-pips i { width: 7px; height: 3px; display: block; background: #253b4d; }
.up-pips i.on { background: var(--teal); }
.up-card p { margin: 2px 0 5px; color: #8fa3b1; font-size: 8px; line-height: 1.6; }
.up-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.up-req { color: #6f8798; font-size: 7px; }
.up-foot .pbtn { font-size: 8px; min-height: 21px; padding: 2px 6px; }

.net-head { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #283f52; border: 1px solid #283f52; margin-bottom: 10px; }
.net-head > div { background: #0f1d29; padding: 6px; }
.net-head small { display: block; color: #7e94a5; font-size: 7px; }
.net-head b { font-size: 12px; font-weight: normal; color: var(--cream); }
.route-list, .offer-list { display: flex; flex-direction: column; gap: 5px; }
.route-card, .offer-card { display: flex; align-items: center; gap: 7px; background: #101f2c; border: 1px solid #2a4153; padding: 7px; }
.offer-card { border-style: dashed; }
.route-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.route-main b { font-size: 11px; font-weight: normal; color: var(--cream); }
.route-main b small { color: #7f94a5; font-size: 8px; }
.route-main span { color: #8398a8; font-size: 8px; }
.route-main span i { color: var(--gold); font-style: normal; }
.route-main em { color: #bd8f72; font-size: 7.5px; font-style: normal; margin-top: 1px; }
.route-card .pbtn, .offer-card .pbtn { flex: 0 0 auto; font-size: 8px; min-height: 22px; }

.goal-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.goal-title b { font-size: 11px; color: var(--gold2); font-weight: normal; }
.goal-title span { color: #7f94a5; font-size: 8px; }
.goal-list { display: flex; flex-direction: column; gap: 5px; }
.goal-card { display: flex; align-items: center; gap: 8px; background: #101f2c; border: 1px solid #2a4153; padding: 7px; }
.goal-card.done { border-color: #3e6650; }
.goal-card.failed { opacity: .6; }
.goal-ico { width: 19px; height: 19px; flex: 0 0 auto; }
.goal-main { flex: 1; }
.goal-main > div:first-child { display: flex; justify-content: space-between; gap: 6px; }
.goal-main b { font-size: 10px; color: var(--cream); font-weight: normal; }
.goal-main span { color: var(--gold2); font-size: 8px; }
.goal-main small { display: block; color: #788e9f; font-size: 7.5px; margin-top: 1px; }
.progress { height: 5px; background: #07111a; border: 1px solid #263c4e; margin-top: 4px; }
.progress i { display: block; height: 100%; background: var(--teal); transition: width .3s; }
.progress.small { height: 4px; margin-top: 3px; }
.goal-check { width: 20px; height: 20px; flex: 0 0 auto; }
.goal-bonus { color: #8197a8; font-size: 8px; margin: 7px 0 2px; }
.mastery-list { display: flex; flex-direction: column; gap: 5px; }
.mastery-row { display: flex; align-items: center; gap: 7px; background: #101f2c; border: 1px solid #2b4153; padding: 6px 7px; }
.mstar { width: 18px; height: 18px; flex: 0 0 auto; filter: grayscale(1); opacity: .4; }
.mastery-row.done .mstar { filter: none; opacity: 1; }
.mastery-row.done { border-color: #3e6650; }
.mastery-row > div { flex: 1; }
.mastery-row b { display: block; font-size: 9.5px; color: var(--cream); font-weight: normal; }
.mastery-row small { display: block; color: #7c91a1; font-size: 7.5px; }
.mastery-row > span:last-child { font-size: 8px; }
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ach { background: #0e1b26; border: 1px solid #253b4d; padding: 5px 4px; text-align: center; opacity: .45; }
.ach.on { opacity: 1; border-color: #5a563a; background: #1b231f; }
.ach-ico { display: block; width: 18px; height: 18px; margin: 0 auto 3px; }
.ach b { display: block; font-size: 7px; color: #a9bac4; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach.on b { color: var(--gold2); }

.stat-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px; }
.stat-block { background: #0f1d29; border: 1px solid #2a4052; padding: 7px 8px; }
.stat-block h3 { margin: 0 0 4px; font-size: 9px; color: var(--gold2); font-weight: normal; letter-spacing: .05em; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 8px; color: #8196a6; padding: 1px 0; }
.kv b { font-weight: normal; color: #d1d6cc; font-size: 8.5px; text-align: right; }
.diag-box { background: #101e26; border: 1px solid #314a5a; padding: 7px 8px; margin-bottom: 7px; }
.diag-box h3 { margin: 0 0 3px; font-size: 9px; color: var(--gold2); font-weight: normal; }
.diag-box p { margin: 2px 0; font-size: 8px; color: #9fb0bc; line-height: 1.6; }

/* toasts / tutorial / rotate */
.panel-open .toasts { right: 424px; }
body.panel-open .ability-bar { right: 424px; }
.toasts { position: absolute; right: 14px; top: 82px; z-index: 46; display: flex; flex-direction: column; gap: 5px; width: 318px; pointer-events: none; }
.toast { display: flex; gap: 7px; background: rgba(12,23,33,.97); border: 1px solid #31495c; border-left: 4px solid #4b6a7e; padding: 6px 8px; box-shadow: var(--shadow-sm); color: #cdd5d2; font-size: 9px; line-height: 1.55; animation: toastIn .18s linear; pointer-events: auto; cursor: pointer; }
.toast.out { animation: toastOut .25s linear forwards; }
.toast.good { border-left-color: var(--green); }
.toast.bad { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--gold); }
.toast.money { border-left-color: var(--gold2); }
.toast.event { border-left-color: var(--red); background: #24191b; }
.toast-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.toast-text { flex: 1; }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(20px); opacity: 0; } }
.tutorial { position: absolute; left: 14px; bottom: 100px; z-index: 44; width: 342px; background: rgba(15,25,35,.98); border: 2px solid var(--gold); box-shadow: 4px 4px 0 rgba(0,0,0,.5); padding: 9px 11px; }
.tut-head { display: flex; justify-content: space-between; font-size: 7px; color: var(--gold); letter-spacing: .08em; }
.tut-head button { background: none; border: 0; color: #7d93a4; font-size: 7px; cursor: pointer; text-decoration: underline; }
.tut-title { display: block; margin: 3px 0 2px; font-size: 12px; color: var(--gold2); font-weight: normal; }
.tutorial p { margin: 0 0 7px; color: #aebdc5; font-size: 9px; line-height: 1.7; }
.tut-foot { text-align: right; }
.rotate-hint { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 70; background: #182735; border: 2px solid var(--gold); padding: 7px 12px; color: var(--gold2); font-size: 10px; }

/* =========================== MODALS =========================== */
.modal-root { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,11,.78); backdrop-filter: blur(2px); }
.modal { position: relative; width: min(740px, 95vw); max-height: 92vh; display: flex; flex-direction: column; background: #0e1924; border: 2px solid #3e5a6d; box-shadow: 8px 8px 0 rgba(0,0,0,.55); animation: modalIn .18s ease-out; }
.modal.report-modal { width: min(880px, 96vw); }
.modal.event-modal { width: min(720px, 95vw); }
.modal.event-modal.urgent { border-color: #805349; }
@keyframes modalIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-head { padding: 14px 18px 11px; border-bottom: 2px solid #2a4355; background: linear-gradient(180deg,#17293a,#101c28); position: relative; flex: 0 0 auto; }
.modal-kicker { color: var(--gold); font-size: 7px; letter-spacing: .18em; }
.modal-head h2 { margin: 3px 40px 0 0; font-size: 20px; font-weight: normal; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-en { font-size: 8px; color: #7d93a3; letter-spacing: .12em; font-weight: normal; }
.modal-ico { width: 24px; height: 24px; }
.modal-x { position: absolute; right: 12px; top: 13px; width: 28px; height: 28px; background: #0a151f; border: 1px solid #3c5669; color: #b6c4cc; font-size: 18px; cursor: pointer; }
.modal-x:hover { background: #243b4c; color: var(--cream); }
.modal-body { padding: 15px 18px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 10px 18px; display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; border-top: 2px solid #2a4355; background: #0b1620; flex: 0 0 auto; }
.modal-body p { color: #b3c0c7; font-size: 10px; line-height: 1.8; margin: 0 0 8px; }
.modal-warning { color: #e9b36f; font-size: 10px; border-left: 3px solid #9c6636; padding-left: 7px; }

.event-story { color: #c7d1cd; font-size: 12px; line-height: 1.9; border-left: 3px solid #5b4d3a; background: #121e28; padding: 10px 12px; }
.timer-wrap { margin: 12px 0 10px; }
.timer-bar { height: 8px; background: #071018; border: 1px solid #2d4558; }
.timer-bar i { display: block; height: 100%; width: 100%; background: var(--red); transition: width .2s linear; }
.timer-wrap span { display: block; text-align: right; color: #d58f78; font-size: 8px; margin-top: 3px; }
.event-options { display: flex; flex-direction: column; gap: 6px; }
.event-opt { text-align: left; background: #12212e; border: 1px solid #2d475b; color: var(--cream); padding: 9px 10px; cursor: pointer; }
.event-opt:hover:not(:disabled) { background: #1b3042; border-color: #54758a; }
.event-opt:disabled { opacity: .45; cursor: not-allowed; }
.eo-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eo-top b { font-size: 12px; font-weight: normal; color: var(--gold2); }
.eo-top span { color: #7e94a5; font-size: 8px; }
.eo-meta { color: #91a6b4; font-size: 8px; margin-top: 3px; }
.event-warn { color: #9d8c78; font-size: 8px; margin-right: auto; align-self: center; }
.event-result { display: flex; gap: 10px; align-items: flex-start; background: #10211f; border: 1px solid #3e6650; padding: 11px; }
.er-ico { width: 26px; height: 26px; flex: 0 0 auto; }
.event-result p { color: #cfdad3; font-size: 12px; line-height: 1.9; margin: 0; }

.report-top { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; }
.report-grade { width: 108px; height: 108px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid currentColor; background: #0d1a24; box-shadow: 5px 5px 0 rgba(0,0,0,.3); }
.report-grade b { font-size: 58px; line-height: .9; font-weight: normal; }
.report-grade span { font-size: 9px; color: #a9b6bb; }
.grade-S { color: var(--gold); }
.grade-A { color: var(--green); }
.grade-B { color: var(--blue); }
.grade-C { color: #eac56d; }
.grade-D { color: var(--red); }
.report-headline small { color: #7e94a5; font-size: 8px; letter-spacing: .1em; }
.report-headline h3 { margin: 2px 0 0; font-size: 21px; font-weight: normal; }
.report-headline p { margin: 1px 0; color: #9fb0b9; font-size: 10px; }
.new-stars { display: inline-block; margin-top: 5px; color: #151d13; background: var(--gold); font-size: 9px; padding: 2px 7px; }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2b4355; border: 1px solid #2b4355; margin-bottom: 13px; }
.report-grid > div { background: #101e2a; padding: 7px 9px; }
.report-grid small { display: block; color: #7e94a5; font-size: 8px; }
.report-grid b { font-size: 15px; font-weight: normal; }
.report-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.report-goals { display: flex; flex-direction: column; gap: 4px; }
.rg-item { display: flex; gap: 7px; align-items: baseline; padding: 4px 6px; background: #101e2a; border: 1px solid #273d4e; font-size: 9px; }
.rg-item span { color: var(--green); width: 12px; }
.rg-item.failed span { color: var(--red); }
.rg-item b { font-weight: normal; color: #ced5d0; }
.rg-item small { margin-left: auto; color: #798e9e; font-size: 8px; }
.report-notes { margin-top: 8px; }
.report-notes p { font-size: 9px; color: #97aab6; line-height: 1.7; margin: 2px 0; padding-left: 9px; border-left: 2px solid #344e5f; }
.report-stars { display: flex; flex-direction: column; gap: 5px; }
.rs-row { display: flex; gap: 7px; align-items: flex-start; padding: 6px; border: 1px solid #2a4052; background: #101e2a; }
.rs-row > span { width: 16px; height: 16px; filter: grayscale(1); opacity: .25; }
.rs-row.done > span { filter: none; opacity: 1; }
.rs-row b { display: block; font-size: 9px; font-weight: normal; color: #cdd5d0; }
.rs-row small { display: block; color: #7d92a2; font-size: 7.5px; }
.loan-box { display: flex; align-items: center; gap: 10px; background: #241c1b; border: 1px solid #765045; padding: 8px 10px; margin-top: 12px; }
.loan-box b { color: #efb58f; font-weight: normal; font-size: 11px; }
.loan-box p { margin: 1px 0; font-size: 8.5px; color: #ae9a8d; }
.loan-box .pbtn { margin-left: auto; flex: 0 0 auto; }
.bankrupt-box { background: #251918; border: 1px solid #7b4039; color: #e8b5a9; padding: 12px; font-size: 11px; line-height: 1.8; margin-top: 12px; }

.levelup { text-align: center; }
.lv-badge { width: 116px; height: 116px; margin: 2px auto 12px; border: 3px solid var(--gold); background: #101b25; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold2); box-shadow: 5px 5px 0 rgba(0,0,0,.35); }
.lv-badge { font-size: 11px; letter-spacing: .15em; }
.lv-badge b { font-size: 52px; line-height: .9; font-weight: normal; }
.lv-unlocks { background: #101f2a; border: 1px solid #2c4052; padding: 7px; margin: 8px auto; max-width: 440px; text-align: left; }
.lv-unlocks small { display: block; color: #7f94a5; font-size: 8px; margin-bottom: 4px; }
.lv-unlocks div { display: flex; flex-wrap: wrap; gap: 4px; }
.lv-unlocks span { border: 1px solid #385264; padding: 1px 5px; color: var(--gold2); font-size: 8px; }

.gate-modal-top { display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.big-gate { width: 82px; height: 66px; border: 2px solid #3f5b6f; display: flex; align-items: center; justify-content: center; color: var(--gold2); font-size: 27px; background: #0c1823; }
.gate-modal-top h3 { margin: 0; font-size: 17px; font-weight: normal; }
.gate-modal-top p { margin: 2px 0 0; font-size: 9px; color: #8ca0af; }
.gate-flight { display: flex; align-items: center; gap: 6px; padding: 7px; border: 1px solid #2b4254; background: #101f2c; font-size: 10px; color: #cbd4cf; }
.gate-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2a4254; border: 1px solid #2a4254; margin-top: 9px; }
.gate-stats > div { background: #101e2a; padding: 6px 8px; }
.gate-stats small { display: block; color: #7e94a5; font-size: 8px; }
.gate-stats b { font-size: 11px; font-weight: normal; }

.pause-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2a4254; border: 1px solid #2a4254; margin-bottom: 13px; }
.pause-summary > div { background: #101e2a; padding: 8px; }
.pause-summary small { display: block; color: #7e94a5; font-size: 8px; }
.pause-summary b { font-size: 12px; font-weight: normal; }
.pause-actions { display: flex; flex-direction: column; gap: 5px; }
.pause-actions .pbtn { justify-content: space-between; }

.settings-form { display: flex; flex-direction: column; gap: 1px; background: #2a4254; border: 1px solid #2a4254; }
.set-row { display: flex; align-items: center; gap: 12px; background: #101e2a; padding: 8px 10px; }
.set-row > span { flex: 1; }
.set-row b { display: block; font-size: 10px; font-weight: normal; color: #d3dad5; }
.set-row small { display: block; color: #7d92a2; font-size: 7.5px; }
.set-row input[type=range] { accent-color: var(--gold); width: 150px; }
.range-val { color: var(--gold2); font-size: 10px; width: 24px; text-align: right; font-weight: normal; }
.switch { width: 38px; height: 20px; border: 2px solid #405a6e; background: #0a131c; position: relative; cursor: pointer; flex: 0 0 auto; }
.switch i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: #667b8c; display: block; transition: transform .12s, background .12s; }
.switch.on { border-color: var(--gold); background: #2d2e22; }
.switch.on i { transform: translateX(18px); background: var(--gold); }
.set-danger { margin-top: 13px; padding: 9px; border: 1px dashed #6b413b; display: flex; align-items: center; gap: 10px; }
.set-danger small { color: #a78f89; font-size: 8px; }
.set-version { color: #6e8495; font-size: 7.5px; margin-top: 12px; text-align: center; }

.help-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-sections section { background: #101e2a; border: 1px solid #2a4052; padding: 9px 10px; }
.help-sections h3, .help-controls h3 { margin: 0 0 5px; font-size: 11px; color: var(--gold2); font-weight: normal; }
.help-sections p, .help-controls p { margin: 0 0 7px; font-size: 9px; line-height: 1.8; color: #9fb1bd; }
.help-sections b { color: var(--cream); font-weight: normal; }
.help-controls { margin-top: 12px; padding-top: 9px; border-top: 1px dashed #2b4354; }

.save-lead { color: #8ea2b1; font-size: 9px; line-height: 1.7; }
.save-list { display: flex; flex-direction: column; gap: 5px; }
.save-row { display: flex; align-items: center; gap: 9px; background: #101f2c; border: 1px solid #2a4254; padding: 8px; }
.save-row.empty { opacity: .65; border-style: dashed; }
.save-slot { width: 76px; flex: 0 0 auto; color: var(--gold2); font-size: 9px; }
.save-meta { flex: 1; min-width: 0; }
.save-meta b { display: block; font-size: 10.5px; font-weight: normal; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-meta small { display: block; color: #7d92a2; font-size: 8px; }
.save-actions { display: flex; gap: 4px; flex: 0 0 auto; }

.profile-top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.profile-avatar { width: 74px; height: 74px; border: 2px solid #405a6e; background: #0c1823; display: flex; align-items: center; justify-content: center; }
.profile-avatar .ico { width: 44px; height: 44px; }
.profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #2a4254; border: 1px solid #2a4254; flex: 1; }
.profile-stats > div { background: #101e2a; padding: 6px 8px; }
.profile-stats small { display: block; color: #7e94a5; font-size: 8px; }
.profile-stats b { font-size: 12px; font-weight: normal; color: var(--gold2); }
.profile-list { display: flex; flex-direction: column; gap: 4px; }
.profile-air { display: flex; align-items: center; gap: 8px; background: #101f2c; border: 1px solid #2a4052; padding: 6px 8px; }
.profile-air > b { color: var(--gold2); font-weight: normal; width: 38px; }
.profile-air > span { font-size: 9px; color: #c6d0cb; width: 90px; }
.profile-air > div { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.profile-air small { color: #7f94a5; font-size: 7.5px; }
.profile-ach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.pach { display: flex; align-items: center; gap: 5px; background: #0e1b26; border: 1px solid #253b4d; padding: 5px 6px; opacity: .4; }
.pach.on { opacity: 1; border-color: #5a563a; background: #1b231f; }
.pach .ico { width: 16px; height: 16px; flex: 0 0 auto; }
.pach span { font-size: 7.5px; color: #9fb0bb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
.noscript { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0a1018; color: #f1e6cc; z-index: 99999; font-size: 18px; }

.intro-grid { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; }
.intro-scene { aspect-ratio: 1/1; background: #0a1620; border: 2px solid #354e61; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; overflow: hidden; }
.intro-scene::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px); }
.intro-scene .ico { width: 52px; height: 52px; z-index: 1; }
.intro-scene b { font-size: 26px; color: var(--gold2); font-weight: normal; z-index: 1; }
.intro-scene span { font-size: 9px; color: var(--muted); z-index: 1; }
.intro-lead { font-size: 12px; color: #d2d8d2; line-height: 1.9; }
.intro-list { padding-left: 16px; margin: 6px 0 0; }
.intro-list li { color: #92a6b3; font-size: 9px; line-height: 1.8; margin-bottom: 3px; }

/* =========================== WORLD OVERLAYS =========================== */
.map-overlays { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.gate-mark { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; background: rgba(6,14,21,.94); border: 1px solid #547187; color: #e2ded0; min-width: 31px; height: 19px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 9.5px; cursor: pointer; padding: 0 5px; box-shadow: 1px 1px 0 rgba(0,0,0,.45); }
.gate-mark:hover { background: #1b3042; border-color: var(--gold); z-index: 12; }
.gate-mark .gate-dot { width: 5px; height: 5px; display: block; background: #6a7f8b; }
.gate-mark.unbuilt { border-style: dashed; color: #cfad6d; background: rgba(36,28,16,.74); }
.gate-mark.busy { border-color: #6fa8b3; }
.gate-mark.delayed { border-color: #da6d5d; background: rgba(52,22,21,.85); }
.gate-mark.locked { opacity: .55; }
.zone-mark { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; background: rgba(6,14,21,.8); border: 1px solid rgba(120,160,178,.6); color: #d6d7ca; display: flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: 9.5px; height: 18px; cursor: pointer; white-space: nowrap; box-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.zone-mark .ico { width: 12px; height: 12px; }
.zone-mark b { color: var(--gold2); font-weight: normal; font-size: 9px; }
.zone-mark:hover { background: #182a39; border-color: var(--gold); }
.zone-mark b.warn { color: var(--red); }
.runway-mark { background: rgba(7,15,23,.75); }
.hold-badge { position: absolute; right: 8px; top: 7px; pointer-events: none; background: rgba(46,26,18,.9); border: 1px solid #a26b4a; color: #f0c38c; font-size: 8px; padding: 2px 6px; }
.hold-badge b { color: #ffdd9c; font-weight: normal; }

/* =========================== CRT / motion =========================== */
body.crt-on::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.085) 0px, rgba(255,255,255,.085) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: soft-light; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1240px) {
  .hud-stat.streak { display: none; }
  .hud-stat.wide { min-width: 148px; }
  .id-text b { max-width: 130px; }
  .panel { width: 370px; }
  .ability { width: 192px; }
  .ability.alt { width: 138px; }
}
@media (max-width: 1000px) {
  .title-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .title-side { grid-column: 1; grid-row: 3; justify-self: start; width: 100%; max-width: 360px; }
  .title-menu { width: min(360px, 100%); }
  .select-body { grid-template-columns: 1fr; overflow-y: auto; }
  .map-frame { max-width: 100%; max-height: 52vh; }
  .airport-card { max-height: none; }
  .select-foot { display: none; }
  .hud-top { height: auto; min-height: 66px; flex-wrap: wrap; padding-bottom: 6px; }
  .hud-mid { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .hud-right { margin-left: auto; }
  .hud-stat { min-height: 38px; padding: 4px 7px; flex: 1; }
  .hud-stat.wide { min-width: 0; }
  .ops-strip { display: none; }
  .dock { bottom: 37px; left: 8px; gap: 3px; }
  .dock-btn { min-width: 0; width: 58px; height: 46px; flex-direction: column; gap: 1px; padding: 3px; justify-content: center; }
  .dock-btn b { font-size: 8px; }
  .dock-btn small, .dock-btn kbd { display: none; }
  .dock-ico { width: 20px; height: 20px; }
  .ability-bar { right: 8px; bottom: 37px; }
  .ability { width: 158px; min-height: 42px; }
  .ability.alt { display: none; }
  .ability small { display: none; }
  .ability-note { display: none; }
  .panel { left: 8px; right: 8px; top: auto; bottom: 84px; width: auto; height: min(66vh, 520px); transform: translateY(calc(100% + 20px)); }
  .panel.open { transform: translateY(0); }
  body.panel-open .ability-bar { right: 8px; }
  .toasts { top: auto; bottom: 90px; right: 8px !important; width: min(300px, calc(100vw - 16px)); }
  .tutorial { bottom: 94px; left: 8px; width: min(320px, calc(100vw - 16px)); }
  .weather-chip { min-width: 0; }
  .weather-chip small { display: none; }
  .hud-clock b { font-size: 17px; }
  .id-text b { display: none; }
  .id-text small { display: block; }
  .airport-id .code { width: 46px; height: 38px; font-size: 17px; }
  .hud-stat em { display: none; }
  .modal { max-height: 94vh; }
  .report-columns { grid-template-columns: 1fr; }
  .help-sections { grid-template-columns: 1fr; }
  .profile-ach { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 680px) {
  .title-logo h1 { font-size: 46px; }
  .logo-cn { letter-spacing: .22em; }
  .title-menu { margin-bottom: 40px; }
  .title-footer { font-size: 7px; }
  .select-head { gap: 8px; padding: 10px; }
  .select-title { font-size: 15px; }
  .region-tabs { margin-left: 0; width: 100%; }
  .rtab { font-size: 9px; }
  .select-body { padding: 8px; gap: 8px; }
  .abc-code { font-size: 36px; }
  .abc-title h2 { font-size: 16px; }
  .hud-mid { gap: 3px; }
  .hud-stat { flex: 1; min-width: 0; }
  .hud-stat .ico { display: none; }
  .hud-stat b { font-size: 13px; }
  .hud-stat.lvl { display: none; }
  .hud-stat.wide { flex: 1.3; }
  .weather-chip { display: none; }
  .hud-right { gap: 3px; }
  .speed-controls button { width: 27px; }
  .icon-btn { width: 34px; }
  .toasts { width: calc(100vw - 16px); bottom: 88px; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .pbtn { width: 100%; }
  .report-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .report-grade { width: 82px; height: 82px; }
  .report-grade b { font-size: 42px; }
  .report-grid { grid-template-columns: repeat(2,1fr); }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-scene { aspect-ratio: 2/1; }
  .profile-ach { grid-template-columns: repeat(3, 1fr); }
  .save-slot { width: 56px; }
  .save-actions { flex-direction: column; }
  .dock-btn { width: 48px; }
  .ability { width: 116px; padding: 3px 5px; }
  .ability .ability-ico { width: 18px; height: 18px; }
  .ability b { font-size: 8px; }
}