/* World Aviation — layout, panels and the touch controls */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0e141c;
  color: #e6edf4;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#scene3d, #ui {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#ui { pointer-events: none; }

kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 1px;
  border: 1px solid #55606c;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #1c232c;
  color: #dfe7ee;
  font: 600 11px ui-monospace, monospace;
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 25; }

/* the left column: the contract strip, under it the phase prompt and the messages, all off the
   view ahead (the runway, the ILS on the right) */
#hudLeft {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  width: min(330px, 30vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#strip {
  min-width: 190px;
  padding: 7px 10px;
  border: 1px solid rgba(140, 165, 190, 0.28);
  border-radius: 9px;
  background: rgba(9, 14, 20, 0.72);
  backdrop-filter: blur(3px);
  font-size: 11px;
  line-height: 1.5;
}
#strip .stripRow { display: flex; justify-content: space-between; gap: 12px; }
#strip .stripApt { max-width: 280px; color: #c9d6e2; }
#strip .stripApt span { color: #8fa3b6; }
#strip .stripRow.big { font-size: 16px; font-weight: 700; letter-spacing: 0.4px; }
#strip b { color: #ffd97a; }
#strip .good { color: #7de08a; }
#strip .warn { color: #ffb03a; }
#strip .bad { color: #ff7a5c; }

#messages {
  width: 100%;
  font-size: 13px;
}
#messages .msg {
  display: table;
  margin: 0 0 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(9, 14, 20, 0.66);
  color: #dfe7ee;
}
#messages .msg.warn { color: #ffb8a4; border: 1px solid rgba(255, 122, 92, 0.35); }
#messages .msg.info { color: #a9c6dd; }
#messages kbd { font: 700 11px ui-monospace, monospace; padding: 0 4px; border-radius: 4px; border: 1px solid #4a5868; background: #0f151c; color: #cfe0ef; }
#messages b { color: #ffd97a; }

#prompt {
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid rgba(140, 165, 190, 0.22);
  border-radius: 8px;
  background: rgba(9, 14, 20, 0.72);
  font-size: 13px;
  line-height: 1.55;
}
#prompt b { color: #ffd97a; }
#prompt b.bad, #strip b.bad { color: #ff7a5c; }

#taxiArrow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 60px;
  margin-left: -30px;
  text-align: center;
}
#taxiArrow svg { width: 38px; height: 38px; fill: #ffd97a; opacity: 0.92; filter: drop-shadow(0 1px 2px #000); }
#taxiArrow.near svg { fill: #7de08a; }
#taxiArrow b { display: block; font-size: 11px; color: #e6edf4; text-shadow: 0 1px 2px #000; }
#taxiArrow.noArrow svg, #taxiArrow.noArrow > b { display: none; }
/* the ground speed and the limit under the arrow: green, amber over the limit, red well over it */
#taxiArrow .taxiSpd {
  display: inline-block;
  margin: 4px -60px 0;
  padding: 2px 8px 3px;
  border-radius: 7px;
  background: rgba(9, 14, 20, 0.62);
  white-space: nowrap;
  line-height: 1.2;
}
#taxiArrow .taxiSpd[hidden] { display: none; }
#taxiArrow .taxiSpd strong { display: block; font-size: 15px; color: #7de08a; }
#taxiArrow .taxiSpd small { display: block; font-size: 10px; color: #c8d2dc; }
#taxiArrow .taxiSpd.lv1 strong { color: #ffb03a; }
#taxiArrow .taxiSpd.lv2 strong { color: #ff4d3d; }

#fps {
  position: absolute;
  left: calc(6px + env(safe-area-inset-left));
  bottom: calc(4px + env(safe-area-inset-bottom));
  font: 600 10px ui-monospace, monospace;
  color: rgba(190, 205, 220, 0.5);
}

.panelBox {
  position: absolute;
  border: 1px solid rgba(150, 175, 200, 0.3);
  border-radius: 12px;
  background: rgba(11, 17, 24, 0.93);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

#checklist {
  right: calc(10px + env(safe-area-inset-right));
  top: calc(18% + env(safe-area-inset-top));
  width: min(340px, 46vw);
  max-height: 58vh;
  overflow: auto;
  padding: 10px 12px;
}
#checklist h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: 0.5px; color: #ff9c7a; }
.qrhHead { display: flex; align-items: center; gap: 8px; }
.qrhTitle { flex: 1; font-weight: 700; font-size: 13px; letter-spacing: 0.6px; color: #ff9c7a; }
.qrhTimer { width: 84px; text-align: right; font: 700 11px ui-monospace, monospace; }
.qrhBar { height: 5px; border-radius: 3px; background: #2a323b; overflow: hidden; margin-bottom: 3px; }
.qrhBar i { display: block; height: 100%; background: #7de08a; }
.qrhWhat { margin: 4px 0 7px; font-size: 12px; line-height: 1.4; color: #e9d6cf; }
.qrhSub { margin: 6px 0 0; font-size: 10px; color: #93a2b1; }
.qrhSub kbd, .qrhStep kbd {
  font: 700 10px ui-monospace, monospace; padding: 1px 5px; border-radius: 4px;
  border: 1px solid #4a5868; background: #0f151c; color: #cfe0ef; white-space: nowrap;
}
.qrhNudge { margin: 6px 0 0; font-size: 11px; color: #ffd97a; }
.qrhStep {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  margin: 3px 0;
  padding: 7px 9px;
  border: 1px solid #33404c;
  border-radius: 7px;
  background: #182029;
  color: #dfe7ee;
  font: 500 12px/1.35 system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.qrhN { font: 700 11px ui-monospace, monospace; color: #93a2b1; text-align: center; }
.qrhWhy { grid-column: 2 / 4; font-size: 11px; color: #ffd97a; }
.qrhStep:hover:not(:disabled) { border-color: #6f8ba6; }
.qrhStep.cur { border-color: #ff9c7a; background: #2a1d1a; color: #ffe3d8; box-shadow: 0 0 0 1px rgba(255, 156, 122, 0.35); }
.qrhStep.cur .qrhN { color: #ff9c7a; }
.qrhStep.cur kbd { border-color: #ff9c7a; color: #ffd9cd; }
.qrhStep.later { opacity: 0.6; }
.qrhStep.done { opacity: 0.5; cursor: default; }
.qrhStep.done .qrhN { color: #7de08a; }
.qrhStep.done .qrhT { text-decoration: line-through; }
#checklist.qrhDone { border-color: #4ac47f; }
#checklist.qrhDone .qrhTitle { color: #7de08a; }
#checklist.qrhLost { border-color: #e0574a; }
#checklist.qrhLost .qrhTitle { color: #ff7a5c; }
/* a result goes away with a click or a tap: a cross in its corner says so */
#checklist.qrhDone, #checklist.qrhLost { cursor: pointer; }
#checklist.qrhDone .qrhTitle, #checklist.qrhLost .qrhTitle { padding-right: 22px; }
#checklist.qrhDone::after, #checklist.qrhLost::after {
  content: '\00d7'; position: absolute; top: 6px; right: 9px; font-size: 18px; line-height: 1; color: #8d99a6;
}

.banner {
  position: absolute;
  left: 50%;
  top: 22%;
  max-width: 92vw;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(60, 20, 12, 0.9);
  border: 1px solid #ff7a5c;
  color: #ffd0c2;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}

/* ---------- map ---------- */
#mapOverlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  background: rgba(6, 10, 14, 0.72);
  z-index: 40;
  pointer-events: none;
}
/* the mini map in the top right corner of a large desktop window */
#miniMap {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  width: clamp(240px, 19vw, 340px);
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(140, 165, 190, 0.32);
  border-radius: 10px;
  background: rgba(11, 20, 32, 0.82);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
/* the cockpit inset on the ground in a view from outside (HUD.updatePip): where the mini map
   goes, a frame over the canvas, which draws the pilot's view into it (Scene3D.renderPip) */
#pipFrame {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  width: clamp(240px, 19vw, 340px);
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(140, 165, 190, 0.45);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
#pipFrame span {
  position: absolute; left: 8px; top: 6px; padding: 1px 7px; border-radius: 8px;
  background: rgba(9, 15, 22, 0.62); color: #dbe7f2; font-size: 11px; font-weight: 700;
}
/* a tablet: under the buttons in the top right corner */
@media (pointer: coarse) {
  #pipFrame { top: calc(var(--buttonsH, 170px) + 18px + env(safe-area-inset-top)); width: clamp(220px, 26vw, 320px); }
}
/* with the mini map up, the checklist card sits under it instead of under its corner */
#hud.miniOn #checklist {
  top: calc(20px + clamp(240px, 19vw, 340px) * 0.625 + env(safe-area-inset-top));
  max-height: calc(100vh - 40px - clamp(240px, 19vw, 340px) * 0.625);
}
/* a phone: the map fits the screen, and a tap anywhere on it closes it */
@media (pointer: coarse) { #mapOverlay { pointer-events: auto; } }
#mapCanvas { max-width: 94vw; max-height: calc(100vh - 44px); border-radius: 10px; background: #0b1420; border: 1px solid #2b3947; }
#mapOverlay p { margin: 0; text-align: center; font-size: 12px; color: #9fb0c3; }

/* ---------- help ---------- */
#helpPanel {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow: auto;
  padding: 14px 18px;
  z-index: 45;
}
#helpPanel h3 { margin: 0 0 8px; }
.keysGrid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
  margin-bottom: 12px;
}

/* ---------- the camera's flights at the start and the end of a flight (render/cinematic.js) ----------
   letterbox bars slide in while the camera is outside, the route as a caption over the lower bar,
   a fade from black at the start; a tap anywhere skips (Game.skipCine) */
#cine { position: fixed; inset: 0; z-index: 30; pointer-events: auto; touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
#cine .cineBar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; transition: transform 0.7s ease; }
#cine .cineBar.top { top: 0; transform: translateY(-100%); }
#cine .cineBar.bottom { bottom: 0; transform: translateY(100%); display: flex; align-items: center; justify-content: flex-end; padding: 0 max(20px, env(safe-area-inset-right)) env(safe-area-inset-bottom) 20px; }
#cine.bars .cineBar { transform: none; }
#cineSkip { color: rgba(255, 255, 255, 0.55); font-size: 12px; letter-spacing: 0.06em; }
/* the look round an airport: its pause (Game.toggleTourPause), left of the skip hint */
#cinePause {
  margin-right: auto; padding: 0 16px; height: 32px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(200, 222, 255, 0.25); background: rgba(13, 27, 42, 0.85); color: #e8eef5;
  font: 600 13px system-ui, sans-serif; letter-spacing: 0.04em;
}
#cinePause[hidden] { display: none; }
#cinePause.on { background: #f2c14e; border-color: #f2c14e; color: #15191d; }
#cinePause kbd { margin-left: 6px; opacity: 0.7; }
#cineSkip kbd { opacity: 0.85; }
#cineCaption {
  position: absolute;
  left: max(24px, env(safe-area-inset-left)); bottom: calc(9vh + 18px);
  color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
#cineCaption.on { opacity: 1; transform: none; }
#cineCaption b { display: block; font-size: clamp(20px, 3.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; }
#cineCaption > span { display: block; margin-top: 4px; font-size: clamp(11px, 1.5vw, 15px); font-weight: 600; color: #cfe0ef; letter-spacing: 0.12em; text-transform: uppercase; }
.ctry { opacity: 0.72; }
#cineCaption img.flag { width: 1.1em; height: 0.74em; vertical-align: 0.04em; margin-right: 0.3em; border-radius: 3px; }
#cineFade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
#cineFade.in { animation: cineFadeIn 1.1s ease-out; }
@keyframes cineFadeIn { from { opacity: 1; } to { opacity: 0; } }
/* after a collision: a fade to black between the shots (ui/incident.js) */
#cineFade.black { opacity: 1; transition: opacity 0.45s ease; }

/* ---------- touch ---------- */
#touch { display: none; }
/* not over the look round an airport (Game.startTour), the camera's flights at a flight's start and
   end (Game.startCine), nor over the shots after a collision (ui/incident.js) */
body.touring #touch, body.incident #touch, body.cineOn #touch { display: none !important; }
@media (pointer: coarse) {
  #touch { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 20; }
  #stickZone {
    position: absolute;
    left: 0; bottom: 0;
    width: 50%; height: 72%;
    pointer-events: auto;
    touch-action: none;
  }
  /* at rest the stick stands in the bottom left corner of the view, mirroring the Brake button
     (8 px from the edge, 10 px over the panel); a touch anywhere in the left half moves it under the thumb */
  #stickBase {
    position: absolute;
    left: calc(66px + env(safe-area-inset-left)); bottom: calc(var(--panelH, 130px) + 10px);
    width: 116px; height: 116px;
    margin: -58px 0 0 -58px;
    border: 2px solid rgba(200, 220, 240, 0.25);
    border-radius: 50%;
    opacity: 0.55;
  }
  #stickKnob {
    position: absolute;
    left: calc(66px + env(safe-area-inset-left)); bottom: calc(var(--panelH, 130px) + 42px);
    width: 52px; height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(220, 235, 250, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  /* the thrust lever stands on the right edge of the panel (the gauges keep out of it,
     PHONE_THROTTLE_W in ui/instruments.js), off the view */
  #throttleZone {
    position: absolute;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: 62px;
    height: calc(var(--panelH, 130px) - 20px);
    border: 1px solid rgba(200, 220, 240, 0.25);
    border-radius: 32px;
    background: rgba(12, 18, 26, 0.5);
    pointer-events: auto;
    touch-action: none;
  }
  #throttleZone span {
    position: absolute;
    left: 0; right: 0; top: 8px;
    text-align: center;
    font: 700 10px system-ui, sans-serif;
    color: #9fb0c3;
  }
  #throttleZone span { transition: opacity 0.2s; }
  #throttleZone.high span { opacity: 0; }
  #throttleKnob {
    position: absolute;
    left: 50%;
    bottom: 20%;
    width: 46px; height: 36px;
    margin-left: -23px;
    border-radius: 10px;
    background: rgba(190, 215, 240, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.45);
  }
  #touchButtons {
    position: absolute;
    right: calc(8px + env(safe-area-inset-right));
    top: calc(8px + env(safe-area-inset-top));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    pointer-events: auto;
  }
  #touchButtons button {
    min-width: 58px;
    min-height: 40px;
    padding: 8px 4px;
    touch-action: none;
    border: 1px solid rgba(180, 205, 230, 0.35);
    border-radius: 9px;
    background: rgba(14, 21, 30, 0.72);
    color: #dfe7ee;
    font: 600 11px system-ui, sans-serif;
  }
  /* the stick rests faint in its corner (settings.touchStick, body.stickRest), or shows only under the thumb */
  #stickZone:not(.active) #stickBase, #stickZone:not(.active) #stickKnob { opacity: 0; }
  body.stickRest #stickZone:not(.active) #stickBase { opacity: 0.3; }
  body.stickRest #stickZone:not(.active) #stickKnob { opacity: 0.45; }
  /* the last row changes with the flight (HUD.updateButtons): Go and the brakes on the ground and
     for the landing, the autopilot and the time in the air, nothing (but its place) just after
     the lift-off */
  #touchButtons[data-show="air"] [data-row="ground"], #touchButtons[data-show="ground"] [data-row="air"],
  #touchButtons[data-show="none"] [data-row="ground"] { display: none; }
  #touchButtons[data-show="none"] [data-row="air"] { visibility: hidden; }
  #touchButtons button.go { background: rgba(60, 120, 70, 0.75); border-color: #7de08a; }
  /* the parking brake on the right of its row, Go on the left */
  #touchButtons [data-act="parkBrake"] { grid-column: 4; }
  /* the wheel brakes: held, over the thrust lever where the ILS is on the approach */
  #brakeBtn {
    position: absolute;
    right: 8px;
    bottom: calc(var(--panelH, 130px) + 10px);
    width: 62px; height: 58px;
    pointer-events: auto;
    touch-action: none;
    border: 1px solid rgba(255, 140, 110, 0.5);
    border-radius: 14px;
    background: rgba(14, 21, 30, 0.72);
    color: #ffd9cf;
    font: 700 12px system-ui, sans-serif;
  }
  #brakeBtn[hidden] { display: none; }
  #brakeBtn.on { background: rgba(255, 110, 80, 0.45); color: #fff; border-color: #ff7a5c; }
  #touchButtons button.on { background: rgba(255, 217, 122, 0.28); color: #fff3d2; }
  /* the prompt sits on the left under the contract strip, off the forward view and the ILS
     scales; a tap folds it to one line */
  #hudLeft { width: min(300px, 34vw); }
  #prompt {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.45;
    pointer-events: auto;
    touch-action: none;
  }
  #prompt::before { content: "▾ "; color: #8d99a6; font-size: 10px; }
  #prompt.collapsed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
  #prompt.collapsed::before { content: "▸ "; }
  #prompt.collapsed .more { display: none; }
  #throttleKnob { font: 700 10px/36px system-ui, sans-serif; color: #e6edf4; text-align: center; }
  /* the messages: at the top, between the left column and the buttons, the last three */
  #messages {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    left: calc(20px + min(300px, 34vw) + env(safe-area-inset-left));
    right: calc(var(--buttonsW, 232px) + 16px + env(safe-area-inset-right));
    width: auto;
    font-size: 11px;
  }
  #messages .msg { margin: 0 auto 3px; text-align: center; }
  #messages .msg:nth-last-child(n+4) { display: none; }
  #checklist {
    left: calc(6px + env(safe-area-inset-left)); right: auto; top: calc(6px + env(safe-area-inset-top));
    width: min(340px, 44vw); max-height: 64vh; padding: 8px 10px; z-index: 3;
  }
  .qrhStep { padding: 6px 8px; font-size: 11px; }
  #fps { display: none; }
}
@media (pointer: coarse) and (max-height: 520px) {
  #strip { font-size: 10px; min-width: 150px; padding: 5px 8px; line-height: 1.4; }
  #strip .stripRow.big { font-size: 13px; }
  #touchButtons button { min-width: 48px; min-height: 34px; padding: 5px 3px; font-size: 10px; }
  #touchButtons { gap: 5px; }
  #taxiArrow { top: 24%; }
}
@media (pointer: coarse) {
  /* the switches that stay set light up on their buttons (green: on; red: the parking brake
     and the spoiler, which must come off before going) */
  #touchButtons button.lit { border-color: #7de08a; color: #d8f7df; box-shadow: inset 0 -3px 0 #7de08a; }
  #touchButtons button[data-act="parkBrake"].lit, #touchButtons button[data-act="spoiler"].lit {
    border-color: #ff7a5c; color: #ffd9cf; box-shadow: inset 0 -3px 0 #ff7a5c;
  }
  /* the strip opens and folds with a tap; folded it keeps the route, and the fuel when it is
     short; held upright only that fuel line (HUD.updateStrip) */
  #strip { pointer-events: auto; touch-action: none; }
  #strip.compact > :not(.big):not(.stripLive), #strip.compact .stripLive .stripRow:not(.key),
  #strip.compact:not(.fuelShort) .stripRow.key, #strip.fuelOnly > .big { display: none; }
  #strip.fuelShort .stripRow.key { color: #ff9c7a; font-weight: 700; }
  #strip.fuelShort.fuelOnly { border-color: rgba(255, 122, 92, 0.55); }
  #strip.compact .stripRow.route::after { content: " ▸"; color: #8d99a6; font-size: 11px; }
}
/* a phone held upright: the buttons across the top, the strip and the prompt under them on the
   left, the messages on the right, the thrust lever on the right of the panel under its
   configuration line */
@media (pointer: coarse) and (orientation: portrait) {
  #touchButtons { left: calc(8px + env(safe-area-inset-left)); gap: 5px; }
  #touchButtons button { min-width: 0; min-height: 36px; padding: 6px 2px; }
  #hud #hudLeft { top: calc(var(--buttonsH, 170px) + 16px + env(safe-area-inset-top)); width: 54vw; }
  #hud #strip { min-width: 0; width: 100%; box-sizing: border-box; }
  #messages {
    top: calc(var(--buttonsH, 170px) + 16px + env(safe-area-inset-top));
    left: calc(54vw + 16px);
    right: calc(8px + env(safe-area-inset-right));
  }
  #messages .msg:nth-last-child(n+3) { display: none; }
  #checklist {
    top: calc(var(--buttonsH, 170px) + 14px + env(safe-area-inset-top));
    right: calc(6px + env(safe-area-inset-right)); width: auto;
    max-height: calc(100vh - var(--buttonsH, 170px) - var(--panelH, 350px) - 30px);
  }
  #throttleZone { height: calc(var(--panelH, 350px) - 40px); }
}
/* a tablet (a touch screen at least 600 px both ways): the messages in the left column under the
   prompt, the last five, as on a desktop */
@media (pointer: coarse) and (min-width: 600px) and (min-height: 600px) {
  #messages { position: static; width: 100%; font-size: 12px; }
  #messages .msg { margin: 0 0 4px; text-align: left; }
  #messages .msg:nth-last-child(n+3), #messages .msg:nth-last-child(n+4) { display: table; }
}

/* ---------- the loader (UI.loading): over the screen, faded in only if the screen takes a while ---------- */
#loader {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(8, 13, 20, 0.55); color: #cfe0ef; font: 600 14px system-ui, sans-serif; letter-spacing: 0.04em;
  opacity: 0; animation: loaderIn 0.25s ease 0.12s forwards; pointer-events: auto;
}
#loader[hidden] { display: none; }
#loader i {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255, 217, 122, 0.2); border-top-color: #ffd97a;
  animation: loaderSpin 0.8s linear infinite;
}
@keyframes loaderIn { to { opacity: 1; } }
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* the new career's start with a Google account (UI.showNewCareer) */
.newCloud { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(140, 170, 200, 0.16); }
.newCloud .btnRow { justify-content: flex-start; flex-wrap: wrap; }

/* ---------- screens ---------- */
#screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  touch-action: pan-y;
  -webkit-user-select: none;
  display: grid;
  /* one column no wider than the screen: a row that scrolls sideways (the hub's tabs on a phone)
     must not stretch the panel past the edge */
  grid-template-columns: minmax(0, 1fr);
  place-items: start center;
  overflow: auto;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: radial-gradient(1200px 700px at 50% 0%, #1a2734 0%, #0b1017 70%);
}
#screen[hidden] { display: none; }
/* the pause: the frozen flight stays in sight — the view and the panel dimmed a little, darker at
   the edges, and the screens on frosted glass in the middle */
#screen[data-view="pause"] {
  place-items: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(4, 8, 14, 0.28) 0%, rgba(4, 8, 14, 0.5) 70%, rgba(4, 8, 14, 0.62) 100%);
}
/* after a touch the choice sits low over the shot of the collision, which goes on circling above it */
#screen[data-view="incident"] {
  place-items: end center;
  background: linear-gradient(to top, rgba(4, 8, 14, 0.6) 0%, rgba(4, 8, 14, 0) 65%);
}
#screen[data-view="incident"] .panel { margin: auto auto 9vh; }
#screen[data-view="pause"] .panel, #screen[data-view="incident"] .panel {
  background: rgba(12, 18, 27, 0.7);
  border-color: rgba(200, 222, 255, 0.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.panel {
  width: min(1080px, 100%);
  margin: auto;
  padding: 18px;
  border: 1px solid rgba(140, 170, 200, 0.16);
  border-radius: 14px;
  background: rgba(13, 19, 26, 0.72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.panel.narrow { width: min(560px, 100%); }
/* the career hub: wide enough on a computer for the four training branches side by side */
.panel.ops { width: min(1240px, 100%); }
/* on a phone (upright, or held sideways) the menus take the whole screen: no frame round the panel
   eating its width — only the glass panels of the title screen and the pause keep theirs */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  #screen:not([data-view="title"]):not([data-view="pause"]):not([data-view="incident"]) {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
  }
  #screen:not([data-view="title"]):not([data-view="pause"]):not([data-view="incident"]) > .panel {
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
}
.pauseApts { margin-top: 14px; }
/* the pause's flight card: the contract strip's live figures, two columns where there is room */
.pauseNowHead { margin: 14px 0 6px; }
.pauseNow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; padding: 9px 12px;
  border: 1px solid rgba(140, 170, 200, 0.16); border-radius: 10px; background: rgba(9, 14, 20, 0.45); font-size: 12px; }
.pauseNow .stripRow { display: flex; justify-content: space-between; gap: 12px; color: #9fb0c3; }
.pauseNow .stripRow > span:last-child { color: #e3edf6; font-variant-numeric: tabular-nums; }
.pauseNow .bad { color: #ff7a5c !important; }
.panel.title { width: min(760px, 100%); }

h1.logo {
  margin: 4px 0 2px;
  font-size: clamp(34px, 7vw, 56px);
  letter-spacing: 1px;
  background: linear-gradient(180deg, #eaf4ff, #8fc0ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 { margin: 0 0 8px; font-size: 22px; }
h3 { margin: 14px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #9fb8d0; }
.tagline { margin: 0 0 18px; color: #a9bacb; }
.lead { color: #bccada; line-height: 1.55; }
.fineprint { color: #7f8fa1; font-size: 12px; line-height: 1.5; }

.cardRow { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.bigBtn {
  flex: 1 1 220px;
  padding: 16px;
  border: 1px solid rgba(140, 180, 220, 0.3);
  border-radius: 12px;
  background: linear-gradient(180deg, #1d2b39, #152030);
  color: #eaf3fb;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.bigBtn small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: #9fb0c3; }
.bigBtn:hover, .btn:hover, .chip:hover, .opt:hover { filter: brightness(1.15); }
.bigBtn.default { border-color: #ffd97a; }

.settingsRow { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.btnRow + .settingsRow { margin-top: 22px; }
/* (the chips of a group wrap on a narrow phone instead of running off the screen) */
.setGroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* the language picker at the top of the title screen: a flag and a code per language, the same
   switcher as the gallery's and the other games' */
.langPick {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 4px;
  border-radius: 22px;
  background: rgba(13, 27, 42, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
}
.langPick button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: #9fb0c3;
  font: 600 12px 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.langPick button:hover { background: rgba(255,255,255,0.08); color: #e8eef5; }
.langPick button[aria-pressed="true"] { background: rgba(255,255,255,0.16); color: #e8eef5; }
.langPick img {
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
  opacity: 0.6;
}
.langPick button:hover img,
.langPick button[aria-pressed="true"] img { opacity: 1; }
/* the departure time on the briefing */
.todPick { flex-wrap: wrap; }
.todPick .chip { white-space: nowrap; }
.setGroup span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8296a8; margin-right: 4px; }
.chip {
  padding: 6px 12px;
  border: 1px solid #34414e;
  border-radius: 20px;
  background: #161e27;
  color: #c3d1de;
  font-size: 12px;
  cursor: pointer;
}
.chip.on { background: #24405a; border-color: #6fb1e8; color: #eaf3fb; }

.btn {
  padding: 9px 16px;
  border: 1px solid #3b4956;
  border-radius: 9px;
  background: #18212b;
  color: #e3ecf4;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.danger { border-color: #ff7a5c; color: #ffc0b0; }
/* the screen's main action: filled gold, as the title's; on a card (a contract, a type, a region,
   a course) the card's action in blue, so a grid of cards does not shout */
.btn.default {
  border-color: #ffe7ad;
  background: linear-gradient(180deg, #ffe08a, #f0a83c);
  color: #1d1406;
  box-shadow: 0 6px 18px rgba(255, 176, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.cFoot .btn.default, .course .btn.default {
  border-color: #79b8ef;
  background: linear-gradient(180deg, #3c86cf, #2a63a2);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn.picked { border-color: rgba(111, 177, 232, 0.55); background: rgba(36, 64, 90, 0.6); color: #cfe6fa; }
.btn.big { padding: 12px 26px; font-size: 16px; }
/* the way on carries an arrow forward, the way back an arrow back: drawn arrows (an SVG mask in
   the text's colour), the same on every phone, not a font's thin arrow characters */
.btn.fwd, .btn.back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.fwd::after, .btn.back::before, .panel.title .bigBtn::after {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform 0.2s;
}
.btn.fwd::after, .panel.title .bigBtn::after {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
  margin-right: -3px;
}
.btn.back::before {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5.5 8.5 12l6.5 6.5'/%3E%3C/svg%3E");
  margin-left: -5px;
}
/* a flight's way, ARN ✈ LED (routeHtml / routeArrow in ui/hud.js): the two ends kept on a line,
   the arrow between them a contrail fading in behind a small aeroplane, sized by the text */
.rt { display: inline-flex; align-items: center; flex-wrap: wrap; }
.rtArrow { flex: none; width: 1.75em; height: 0.875em; margin: 0 0.3em; vertical-align: -0.08em; color: #6fb1e8; overflow: visible; }
.rtTrail { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; opacity: 0.8; }
.rtTrail:first-child { opacity: 0.25; }
.rtTrail:nth-child(2) { opacity: 0.5; }
.rtPlane { fill: currentColor; }
.rtArrow.soft { color: #7f93a6; }
#cineCaption .rtArrow { color: #ffffff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.btn.back { border-color: rgba(140, 170, 200, 0.3); background: transparent; color: #c3d1de; }
.btn.back:hover { background: rgba(140, 170, 200, 0.1); filter: none; }
@media (hover: hover) {
  .btn.fwd:hover::after { transform: translateX(3px); }
  .btn.back:hover::before { transform: translateX(-3px); }
}
.btn.disabled, .btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:focus-visible, .bigBtn:focus-visible, .chip:focus-visible, .opt:focus-visible, .tab:focus-visible { outline: 2px solid #ffd97a; outline-offset: 2px; }
.btn.default:focus-visible, .bigBtn.default:focus-visible { outline-color: #ffffff; }
/* a sub-screen's way back, at its top left */
.screenBar { margin: -4px 0 12px; }
.settingsRow .fineprint { flex-basis: 100%; margin: 0; }
.form input { -webkit-user-select: text; user-select: text; }
.btnRow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btnRow.split { justify-content: space-between; }
.titleFoot, .titleAccount { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.titleAccount { margin: -4px 0 16px; }

/* ---------- the cloud copy of the career (core/cloud.js): the sign-in, the sync's status ---------- */
.btn.cloudIn { display: inline-flex; align-items: center; gap: 8px; }
.gLogo { width: 16px; height: 16px; flex: none; }
.cloudState { display: inline-flex; align-items: center; gap: 7px; color: #c3d1de; font-size: 13px; }
.titleAccount .cloudState { margin-left: auto; }
.cloudState::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6f8193; }
.cloudState.synced::before { background: #7de08a; }
.cloudState.syncing::before { background: #6fb1e8; }
.cloudState.error::before, .cloudState.conflict::before { background: #f0c36a; }
.cloudCard p { margin: 8px 0; }
.cloudCard .btnRow { margin-top: 10px; }
.cloudState.signedOut::before { background: #f0c36a; }

/* ---------- the careers on this device (UI.showCareers) ---------- */
.careerList { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.careerItem {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid rgba(140, 170, 200, 0.16); border-radius: 12px; background: #131b24;
}
.careerItem.cur { border-color: rgba(255, 217, 122, 0.45); }
.careerItem .epaulette { flex: none; }
.ciWho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ciWho b { color: #eef4fa; font-size: 15px; overflow-wrap: anywhere; }
.ciWho .cvChip { margin-left: 6px; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.ciWho small { color: #9fb0c3; font-size: 12px; overflow-wrap: anywhere; }
.ciWho .ciCloud { color: #7f8fa1; }
.careerItem .btn { flex: none; }

/* ---------- the title screen: a glass panel over the moving sky (ui/title.js) ---------- */
#titleSky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 59; display: block; background: #0b1017; }
#titleSky[hidden] { display: none; }
#screen[data-view="title"] { background: transparent; }
.panel.title {
  width: min(640px, 100%);
  padding: 22px 26px 20px;
  border: 1px solid rgba(200, 222, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(18, 28, 44, 0.66), rgba(7, 11, 19, 0.56));
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: titleIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes titleIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
/* a wide screen: the panel on the left, the aeroplanes in the sky on the right */
@media (min-width: 901px) and (orientation: landscape) {
  #screen[data-view="title"] { place-items: center start; }
  #screen[data-view="title"] .panel.title { margin: auto auto auto max(4vw, 16px); }
}
/* held upright: the aeroplanes at the top, the panel under them */
@media (orientation: portrait) {
  #screen[data-view="title"] .panel.title { margin: max(30vh, 150px) auto 0; }
}
.titleTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.titleTop .langPick { margin: 0; }
.titleKicker { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #ffd97a; }
.panel.title h1.logo {
  margin: 6px 0 6px;
  font-size: clamp(40px, 8.4vw, 70px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.5px;
  background: linear-gradient(100deg, #ffffff 0%, #d4e9ff 38%, #ffe2a0 50%, #d4e9ff 62%, #ffffff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(110, 170, 255, 0.35));
  animation: logoShine 9s ease-in-out infinite;
}
.panel.title h1.logo span { font-weight: 300; letter-spacing: 1px; }
@keyframes logoShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.panel.title .tagline { font-size: 15px; line-height: 1.5; color: #c8d6e4; margin-bottom: 14px; }
.titleFacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.titleFacts span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(200, 222, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  color: #a9bdd0; font-size: 12px;
}
.titleFacts b { color: #eaf3fb; font-size: 14px; }
.panel.title .bigBtn {
  position: relative;
  padding: 16px 44px 16px 18px;
  border-color: rgba(200, 222, 255, 0.22);
  background: linear-gradient(180deg, rgba(40, 58, 80, 0.75), rgba(20, 30, 44, 0.75));
  transition: transform 0.18s, box-shadow 0.25s, filter 0.2s;
}
.panel.title .bigBtn::after { position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; margin: 0; transform: translateY(-50%); opacity: 0.75; }
.panel.title .bigBtn.default {
  border-color: #ffe7ad;
  background: linear-gradient(180deg, #ffe08a, #f0a83c);
  color: #1d1406;
  box-shadow: 0 10px 30px rgba(255, 176, 70, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.panel.title .bigBtn.default small { color: rgba(40, 26, 6, 0.72); }
@media (hover: hover) {
  .panel.title .bigBtn:hover { transform: translateY(-2px); filter: brightness(1.08); }
  .panel.title .bigBtn:hover::after { transform: translate(4px, -50%); }
}
.titleSettings { padding-top: 14px; border-top: 1px solid rgba(200, 222, 255, 0.1); }
.titleSettings .settingsRow { margin-bottom: 12px; }
.panel.title .chip { background: rgba(14, 22, 32, 0.7); }
.panel.title .chip.on { background: rgba(48, 92, 136, 0.85); }
.panel.title .btn { background: rgba(20, 30, 42, 0.75); }
.panel.title .fineprint { margin-bottom: 0; color: #8fa3b6; }
@media (max-height: 520px) {
  .panel.title h1.logo { font-size: 44px; }
  .titleFacts { margin-bottom: 12px; }
}
@media (max-width: 640px) {
  .panel.title { padding: 16px 16px 14px; border-radius: 16px; }
  .titleKicker { font-size: 10px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel.title, .panel.title h1.logo { animation: none; }
}

/* ---------- the filter and sort bars over the board and the hangar (ui/filters.js) ---------- */
.filterBar {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(140, 170, 200, 0.14);
  border-radius: 11px;
  background: #101820;
}
.filterBar .setGroup { row-gap: 6px; }
.filterBar .setGroup > span { min-width: 54px; }
.filterBar .chip { white-space: nowrap; }
.chipDot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.filterEmpty { padding: 26px 16px; border: 1px dashed rgba(140, 170, 200, 0.25); border-radius: 11px; text-align: center; }
.filterEmpty .lead { margin-top: 0; }

/* ---------- ops ---------- */
.opsHead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; }
.opsWho { font-size: 18px; font-weight: 700; }
.opsSub { font-size: 12px; color: #8fa1b3; }
.opsMoney { margin-left: auto; font-size: 22px; font-weight: 800; color: #ffd97a; }
.opsReps { display: flex; gap: 10px; }
.rep { display: inline-flex; align-items: center; gap: 5px; font: 700 12px ui-monospace, monospace; }
.rep .use { width: 22px; height: 22px; }

/* the hub's tabs: a row over a line, the open one lit and underlined in gold */
.tabs { position: relative; display: flex; gap: 2px; margin: 0 0 14px; flex-wrap: wrap; border-bottom: 1px solid rgba(140, 170, 200, 0.18); }
.tab {
  margin-bottom: -1px;
  padding: 10px 16px 9px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: #9fb0c3;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tab:hover { background: rgba(140, 170, 200, 0.08); color: #dbe7f2; }
.tab.on { background: rgba(140, 180, 220, 0.1); border-bottom-color: #ffd97a; color: #ffffff; }
.tab { display: inline-flex; align-items: center; gap: 7px; }
/* something to do on that tab: a course to take, traffic rights to buy */
.tabDot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffd97a;
  box-shadow: 0 0 0 0 rgba(255, 217, 122, 0.5);
  animation: tabPulse 2.4s ease-out infinite;
}
@keyframes tabPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 217, 122, 0.5); }
  60%, 100% { box-shadow: 0 0 0 6px rgba(255, 217, 122, 0); }
}
@media (max-width: 520px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 9px 10px 8px; font-size: 13px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .tabDot { animation: none; box-shadow: 0 0 0 3px rgba(255, 217, 122, 0.2); } }
.tabBody { min-height: 260px; }
.hint { margin-bottom: 12px; padding: 8px 10px; border-left: 3px solid #3f6b95; background: #121a23; color: #b3c4d4; font-size: 13px; }

.contracts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.contract {
  padding: 12px 14px;
  border: 1px solid rgba(140, 170, 200, 0.18);
  border-radius: 11px;
  background: #131b24;
}
.contract.sel { border-color: #6fb1e8; }
.cHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cHead b { flex: 1; }
img.logo { width: 28px; height: 28px; border-radius: 6px; flex: none; }
img.logo.big { width: 40px; height: 40px; border-radius: 8px; vertical-align: middle; margin-right: 10px; }
img.flag { width: 18px; height: 12px; vertical-align: -1px; margin-right: 5px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.clientHead { display: flex; align-items: center; }
.tag { padding: 2px 8px; border-radius: 20px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; background: #26323f; color: #b9c8d6; }
.tag.pax { background: #1d3a55; color: #a9d3f5; }
.tag.cargo { background: #4a3a1c; color: #f0d59a; }
.tag.bush { background: #1c4436; color: #a5e8c6; }
/* the client groups' pictures (art/useicons.js): in a contract's tag, a filter chip, a button,
   and as round badges by a type's name in the hangar (what it is built for) */
.useSvg { width: 14px; height: 14px; fill: currentColor; fill-opacity: 0.22; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tag .useSvg { width: 11px; height: 11px; vertical-align: -2px; margin-right: 4px; }
.region .cFoot .useSvg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }   /* the client groups a region asks reputation of */
.chipUse, .btn .chipUse { display: inline-block; margin-right: 6px; line-height: 0; vertical-align: -2px; }
.chipUse .useSvg { width: 13px; height: 13px; }
.chipUse.pax, .use.pax { color: #7fbcff; }
.chipUse.cargo, .use.cargo { color: #f2b55a; }
.chipUse.bush, .use.bush { color: #6fe0b4; }
.btn.default .chipUse { color: inherit; }
.useBadges { display: inline-flex; gap: 5px; flex: none; }
.use { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px currentColor; }
.use.pax { background: rgba(79, 163, 255, 0.14); }
.use.cargo { background: rgba(232, 161, 58, 0.14); }
.use.bush { background: rgba(99, 214, 168, 0.14); }
.use.off { opacity: 0.45; background: none; box-shadow: none; outline: 1px dashed currentColor; outline-offset: -1px; }
/* the codes on one line, the cities and their flags under them: two arrows side by side read as two flights */
.cRoute { margin: 8px 0 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cRoute b { font-size: 19px; }
.cRoute > span { font-size: 12px; color: #8fa1b3; }
.cGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 12px; }
.row2 { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed rgba(140, 170, 200, 0.1); }
.row2 span { color: #8296a8; }
.row2 b { text-align: right; }
.cFoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cFoot .btn { margin-left: auto; }
.diff { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: #1f2a35; color: #9fb0c3; }
.diff.med { background: #4a3a1c; color: #f0d59a; }
.diff.hard { background: #4a1f1c; color: #f5b0a4; }
.need { color: #ff9c7a; font-size: 12px; }
.ok { color: #7de08a; font-size: 12px; }
.row2 .newDest { color: #7de08a; }

/* how the flight starts on the briefing: two option buttons side by side, one under the other on a narrow screen */
.tourPick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tourPick .chip { white-space: nowrap; }
.tourPick .chip::before { content: '\25CE'; margin-right: 6px; color: #7fc4ff; }
.startPick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.startPick .chip { display: block; padding: 10px 14px; border-radius: 11px; text-align: left; line-height: 1.35; }
.startPick .chip b { display: block; font-size: 14px; color: #eaf3fb; }
.startPick .chip small { display: block; margin-top: 3px; font-size: 12px; color: #9fb0c3; }
.startPick .chip.on small { color: #c3d1de; }

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.acCard { padding: 12px 14px; border: 1px solid rgba(140, 170, 200, 0.18); border-radius: 11px; background: #131b24; }
.acCard.sel { border-color: #6fb1e8; }
.acHead { display: flex; justify-content: space-between; align-items: center; }
.acBlurb { font-size: 12px; color: #9fb0c3; margin: 6px 0 8px; }

/* the hangar's aircraft cards: a picture on top (render/preview3d.js), the key figures in tiles */
.cards.planes { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.acCard.plane { padding: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s; }
.acCard.plane.sel { box-shadow: 0 0 0 1px #6fb1e8, 0 10px 30px rgba(60, 140, 220, 0.22); }
.acPic { position: relative; aspect-ratio: 2 / 1; overflow: hidden;
  background:
    radial-gradient(ellipse 62% 30% at 50% 74%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 75% 75% at 50% 62%, var(--glow, rgba(111, 177, 232, 0.4)), transparent 72%),
    linear-gradient(180deg, #2a4058 0%, #18283a 58%, #0f1822 100%); }
.acPic::before { content: ''; position: absolute; left: 0; right: 0; top: 64%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 215, 240, 0.14), transparent); }
.acPic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.4s ease, opacity 0.45s ease, filter 0.3s; }
.acPic.loading img { opacity: 0; }
.acPic.loading::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
  background-size: 200% 100%; animation: acShimmer 1.4s linear infinite; }
@keyframes acShimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.acCard.locked .acPic img { filter: grayscale(0.85) brightness(0.72); }
.acPic .tag, .acMtow, .acBadge { position: absolute; background: rgba(9, 15, 22, 0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.acPic .tag { left: 10px; top: 10px; }
.acMtow { right: 10px; top: 9px; padding: 2px 9px; border-radius: 20px; font: 700 12px ui-monospace, monospace; color: #e6eef6; }
.acBadge { left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.acBadge.sel { background: rgba(29, 79, 122, 0.85); color: #d4ecff; }
.acBadge.lock { color: #ffc2a8; }
/* flights completed in the type, bottom right of its picture */
.acFlights { position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; border-radius: 20px;
  background: rgba(9, 15, 22, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #dbe7f2; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* a free look round a type in flight (ui/showcase.js): a small button under its class (clear of the tail on the right) */
.acLook { position: absolute; left: 10px; top: 38px; z-index: 2; padding: 3px 10px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(200, 222, 255, 0.22); background: rgba(9, 15, 22, 0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #dbe7f2; font: 700 11px system-ui, sans-serif; white-space: nowrap; }
.acLook::before { content: '\25CE'; margin-right: 5px; color: #7fc4ff; }
.acLook:hover, .acLook:focus-visible { background: rgba(29, 79, 122, 0.9); border-color: #7fc4ff; color: #fff; }
/* a type a course has just unlocked: a gold frame and badge until the pilot leaves the hangar */
.acBadge.fresh { background: rgba(255, 217, 122, 0.92); color: #2a1f05; }
.acCard.plane.fresh { border-color: #ffd97a;
  box-shadow: 0 0 0 1px #ffd97a, 0 0 22px rgba(255, 217, 122, 0.28); animation: acFresh 2.4s ease-in-out infinite; }
@keyframes acFresh {
  0%, 100% { box-shadow: 0 0 0 1px #ffd97a, 0 0 14px rgba(255, 217, 122, 0.18); }
  50% { box-shadow: 0 0 0 2px #ffd97a, 0 0 28px rgba(255, 217, 122, 0.4); }
}
@media (prefers-reduced-motion: reduce) { .acCard.plane.fresh { animation: none; } }
.hint.fresh { border-left-color: #ffd97a; background: #1f1c12; color: #f1e3b8; }
.hint.fresh b { color: #ffd97a; }
.acMain { padding: 10px 14px 12px; display: flex; flex-direction: column; flex: 1; }
.acCard.plane .acHead b { font-size: 16px; }
.acStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 10px; }
/* the Network tab's region cards: the region's map in the picture, its countries' flags */
.acPic.map img { object-fit: cover; }
.acCard.region.locked .acPic img { filter: saturate(0.55) brightness(0.8); }
.acCard.region .acBadge { top: 10px; bottom: auto; }
.rgFlags { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 0; }
.rgFlags img.flag { margin: 0; }
.rgCodes { margin: 0 0 4px; font: 600 12.5px/1.6 'Segoe UI', Arial, sans-serif; letter-spacing: 0.6px; color: #a7b9cb; word-spacing: 1px; }
.acStat { padding: 6px 4px 5px; border: 1px solid rgba(140, 170, 200, 0.12); border-radius: 8px; background: #0f161e; text-align: center; min-width: 0; }
.acStat b { display: block; font-size: 14px; color: #e8f0f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acStat span { display: block; font-size: 10px; color: #7f93a6; text-transform: uppercase; letter-spacing: 0.5px; }
.acCard.plane .cGrid { grid-template-columns: 1fr; gap: 2px; }
.acCard.plane .cFoot { margin-top: auto; padding-top: 10px; }
/* a type that does not suit the airport the pilot is at (Career.misfit): it may still be selected */
.fitWarn { flex: 1 0 100%; margin: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 176, 58, 0.35);
  background: rgba(255, 176, 58, 0.1); color: #ffcf8a; font-size: 12px; line-height: 1.4; }
@media (hover: hover) {
  .acCard.plane:hover { transform: translateY(-2px); border-color: rgba(140, 190, 235, 0.4); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
  .acCard.plane.sel:hover { border-color: #6fb1e8; }
  .acCard.plane:hover .acPic img { transform: scale(1.045); }
}
@media (max-width: 400px) {
  .cards.planes { grid-template-columns: 1fr; }
  .acStats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .acPic.loading::after { animation: none; }
  .acCard.plane, .acPic img { transition: none; }
}

/* the Training tab (UI.trainingBody): the progress card on top, a column per branch, the courses
   as cards down a line like the steps of a ladder — passed in green, open in gold, closed dimmed */
.trHead {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 14px 16px;
  border: 1px solid rgba(140, 170, 200, 0.18); border-radius: 14px;
  background: radial-gradient(ellipse 60% 140% at 0% 50%, rgba(125, 224, 138, 0.1), transparent 70%), linear-gradient(135deg, #18242f, #111922);
}
.trRing {
  flex: none; position: relative; display: grid; place-content: center; justify-items: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: conic-gradient(#7de08a calc(var(--p) * 1%), #233040 0);
}
.trRing::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #131c26; }
.trRing b, .trRing span { position: relative; line-height: 1; }
.trRing b { font-size: 24px; font-weight: 800; color: #e8fbe9; }
.trRing span { font-size: 11px; color: #8fa1b3; }
.trHeadText { min-width: 0; flex: 1; }
.trHeadText h3 { margin: 0 0 4px; }
.trOpen { margin: 0 0 6px; font-size: 13px; color: #c3d1de; line-height: 1.45; }
.trOpen b { color: #ffd97a; }
/* an open course's name in the card: a tap brings the course into view */
.trGo {
  margin: 2px 2px 0 0; padding: 2px 9px; border: 1px solid rgba(255, 217, 122, 0.45); border-radius: 20px;
  background: rgba(255, 217, 122, 0.1); color: #ffd97a; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.5; cursor: pointer;
}
.trGo::after { content: ' ↓'; opacity: 0.7; }
.trGo:hover { background: rgba(255, 217, 122, 0.2); }
.trNext { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; color: #9fb0c3; line-height: 1.45; }
.trNext b { color: #e3edf6; }
.trNext .coIcon { width: 34px; height: 34px; opacity: 0.85; }
.trNext .coIcon svg { width: 18px; height: 18px; }

/* the branches by the width they get: one column on a phone, two on a tablet (each a pair of
   branches: general + cargo, passenger + bush), all four side by side on a computer */
.trTree { container-type: inline-size; }
.branches { display: flex; flex-direction: column; gap: 14px; }
.brPair { display: contents; }
@container (min-width: 540px) {
  .branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .brPair { display: flex; flex-direction: column; gap: 14px; }
}
@container (min-width: 1000px) {
  .branches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brPair { display: contents; }
}
.branch { display: flex; flex-direction: column; min-width: 0; }
/* the branch's head folds and unfolds it: its picture, name, passed / all and a chevron; folded,
   a row of the courses' small badges under it shows how far the branch has come */
.brHead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  width: 100%; margin: 0; padding: 7px 8px; border: 1px solid transparent; border-radius: 12px;
  background: none; color: var(--bc); font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 1px;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color 0.15s, border-color 0.15s;
}
.brName { min-width: 0; }
.brHead:focus-visible { outline: 2px solid var(--bc); outline-offset: 2px; }
@media (hover: hover) { .brHead:hover { background: color-mix(in srgb, var(--bc) 9%, transparent); } }
.brHead:active { background: color-mix(in srgb, var(--bc) 14%, transparent); }
.brChev { width: 9px; height: 9px; margin: 0 4px 3px 2px; border: solid currentColor; border-width: 0 2px 2px 0; opacity: 0.8;
  transform: rotate(45deg); transition: transform 0.26s, margin 0.26s; }
.folded .brChev { transform: rotate(-45deg); margin: 0 5px 0 1px; }
.brMini { display: none; grid-column: 1 / -1; flex-wrap: wrap; gap: 5px; }
.folded .brHead { border-color: color-mix(in srgb, var(--bc) 28%, transparent); background: linear-gradient(180deg, #151e28, #111820); }
.folded .brMini { display: flex; }
.miniCo .coIcon { width: 26px; height: 26px; border-width: 1.5px; }
.miniCo .courseSvg { width: 14px; height: 14px; }
.miniCo.done .coIcon { border-color: #7de08a; color: #9be8ac; }
.miniCo.open .coIcon { border-color: #ffd97a; color: #ffd97a; box-shadow: 0 0 8px rgba(255, 217, 122, 0.4); }
.miniCo.locked .coIcon { filter: grayscale(0.7); opacity: 0.5; }
/* the courses slide shut and open (UI_FOLD_MS); they are clipped only while they slide */
.brBody { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.26s ease, visibility 0s; }
.brInner { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-top: 10px; transition: padding-top 0.26s ease; }
.folded .brBody { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.26s ease, visibility 0s 0.26s; }
.folded .brInner { padding-top: 0; }
.folded .brInner, .sliding .brInner { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .brBody, .folded .brBody, .brInner, .brChev { transition: none; } }
.brIcon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--bc) 16%, transparent); box-shadow: inset 0 0 0 1px var(--bc); }
.brIcon svg { width: 15px; height: 15px; fill: currentColor; fill-opacity: 0.2; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* a course's picture: line art in a round badge of its branch's colour (art/courseicons.js) */
.coIcon {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--bc, #8fc0ea); color: var(--bc, #8fc0ea);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--bc, #8fc0ea) 26%, #16212c), #0f161e);
}
.courseSvg { width: 22px; height: 22px; fill: currentColor; fill-opacity: 0.16; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

.course {
  position: relative; padding: 11px 12px 12px; border: 1px solid rgba(140, 170, 200, 0.16); border-radius: 12px;
  background: linear-gradient(180deg, #151e28, #111820);
}
/* the line of the ladder between one course and the next */
.course + .course::before {
  content: ''; position: absolute; left: 31px; top: -11px; width: 2px; height: 10px;
  background: color-mix(in srgb, var(--bc) 45%, transparent);
}
.course.done { border-color: rgba(125, 224, 138, 0.38); background: linear-gradient(180deg, #15241b, #101a14); }
.course.done .coIcon { border-color: #7de08a; color: #9be8ac; }
.course.open { border-color: rgba(255, 217, 122, 0.55); box-shadow: 0 0 0 1px rgba(255, 217, 122, 0.25), 0 8px 24px rgba(255, 217, 122, 0.08); }
.course.open .coIcon { animation: coGlow 2.6s ease-in-out infinite; }
/* a course just brought into view lights up for a moment */
.course.spot { animation: coSpot 1.8s ease-out; }
@keyframes coSpot { 0%, 35% { box-shadow: 0 0 0 3px rgba(255, 217, 122, 0.85), 0 0 28px rgba(255, 217, 122, 0.45); } 100% { box-shadow: 0 0 0 1px rgba(255, 217, 122, 0.25), 0 8px 24px rgba(255, 217, 122, 0.08); } }
@keyframes coGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 122, 0); } 50% { box-shadow: 0 0 14px 2px rgba(255, 217, 122, 0.35); } }
.course.locked .coIcon { filter: grayscale(0.7); opacity: 0.55; }
.course.locked .coTitle b, .course.locked p { opacity: 0.75; }
.coHead { display: flex; align-items: center; gap: 10px; }
.coTitle { flex: 1; min-width: 0; }
.coTitle small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #7f93a6; }
.coTitle b { display: block; font-size: 14px; line-height: 1.25; }
.coState { flex: none; font-size: 11px; color: #8fa1b3; white-space: nowrap; }
.coState.ok { color: #7de08a; font-weight: 700; }
.course p { margin: 7px 0 0; font-size: 12px; color: #a3b3c3; line-height: 1.45; }
.course p.effect { color: #9be8ac; }
.course .btn { margin-top: 10px; }
.price { font: 700 12px ui-monospace, monospace; color: #ffd97a; white-space: nowrap; }
/* the types a course unlocks */
.coTypes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.coTypes span { padding: 2px 8px; border-radius: 20px; background: rgba(140, 180, 220, 0.1); border: 1px solid rgba(140, 180, 220, 0.2); font-size: 11px; color: #cfe0f0; }
/* what a course asks for, ticked off as it is met */
.coNeeds { margin: 9px 0 0; padding: 7px 9px; list-style: none; border-radius: 9px; background: rgba(9, 14, 20, 0.55); font-size: 12px; }
.coNeeds li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 2px 7px; padding: 2px 0; color: #ffb59e; }
.coNeeds li.ok { color: #9be8ac; }
.coNeeds i { font-style: normal; font-weight: 700; text-align: center; }
.coNeeds em { font: 700 11px ui-monospace, monospace; font-style: normal; }
.reqBar { grid-column: 2 / 4; height: 4px; border-radius: 2px; background: #1e2833; overflow: hidden; }
.reqBar i { display: block; height: 100%; border-radius: 2px; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .course.open .coIcon { animation: none; box-shadow: 0 0 10px rgba(255, 217, 122, 0.3); } }
@media (max-width: 520px) {
  .trHead { padding: 12px; gap: 12px; }
  .trRing { width: 64px; height: 64px; }
  .trRing b { font-size: 20px; }
}

/* the Career tab (UI.careerBody): the pilot's card, the records in tiles, cards for the
   reputation, the licences, the unlocks and the log as a timeline */
.cvHero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 16px 18px;
  border: 1px solid rgba(255, 217, 122, 0.28); border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(255, 217, 122, 0.13), transparent 70%),
    radial-gradient(ellipse 50% 140% at 0% 100%, rgba(79, 163, 255, 0.14), transparent 70%),
    linear-gradient(135deg, #1b2a3a, #121b26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* faint diagonal stripes, like the gold braid on a captain's sleeve, fading out behind the balance */
.cvHero::after {
  content: ''; position: absolute; right: -30px; top: 50%; width: 280px; height: 110px; margin-top: -55px;
  background: repeating-linear-gradient(-12deg, transparent 0 10px, rgba(255, 217, 122, 0.07) 10px 13px);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 70%);
  mask: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 70%);
  pointer-events: none;
}
.cvBadge {
  position: relative;
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(from 210deg, #ffd97a, #b8862e, #ffe9ae, #c79a3d, #ffd97a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 217, 122, 0.15);
}
.cvBadge > span:first-child {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b4360, #142131);
  color: #ffe7a8; font: 800 21px/1 'Segoe UI', Arial, sans-serif; letter-spacing: 1px;
}
.cvWho { flex: 1 1 220px; min-width: 0; position: relative; z-index: 1; }
.cvName { font-size: 24px; font-weight: 800; color: #f4f8fc; overflow-wrap: anywhere; }
/* the rank's sleeve on the badge, at its lower right */
.cvBadge .epaulette { position: absolute; right: -14px; bottom: -6px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
/* the name is changed in place: a pencil after it, then a field with a dice, Save and Cancel */
.cvEdit {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; vertical-align: 3px;
  padding: 0; border: 1px solid rgba(140, 170, 200, 0.22); border-radius: 50%; background: rgba(9, 15, 22, 0.45);
  color: #9fb0c3; cursor: pointer;
}
.cvEdit svg { width: 15px; height: 15px; }
.cvEdit:hover { color: #ffd97a; border-color: rgba(255, 217, 122, 0.5); }
.cvEdit:focus-visible { outline: 2px solid #ffd97a; outline-offset: 2px; }
.cvRename { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.cvRename input {
  flex: 1 1 160px; min-width: 0; padding: 7px 10px; border: 1px solid #6fb1e8; border-radius: 8px;
  background: #101820; color: #f4f8fc; font-size: 18px; font-weight: 700; -webkit-user-select: text; user-select: text;
}
.cvRename .chip { font-size: 17px; padding: 0 10px; }

/* a rank's sleeve: a navy patch, its gold stripes across it, the senior captain's star above */
.epaulette {
  display: inline-flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 2px;
  width: 30px; min-height: 22px; padding: 4px; box-sizing: border-box; border-radius: 4px;
  background: linear-gradient(180deg, #1c3150, #0f1c2e); border: 1px solid rgba(255, 217, 122, 0.35);
}
.epaulette i { display: block; height: 3px; border-radius: 1px; background: linear-gradient(90deg, #b8862e, #ffe7a8 50%, #c79a3d); }
.epaulette b { align-self: center; margin-bottom: 1px; font-size: 10px; line-height: 1; color: #ffd97a; text-shadow: 0 0 6px rgba(255, 217, 122, 0.6); }

/* the Career tab's licence and rank: the five ranks down a ladder, the ones passed ticked, the
   held one lit in gold, the rest dimmed; then what the next one asks for */
.rankLadder { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.rankLadder li {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 0 12px;
  padding: 6px 12px; border: 1px solid rgba(140, 170, 200, 0.14); border-radius: 10px; background: #10171f;
}
.rankLadder li + li::before {
  content: ''; position: absolute; left: 26px; top: -7px; width: 2px; height: 6px; background: rgba(255, 217, 122, 0.3);
}
.rankLadder b { font-size: 13px; line-height: 1.25; color: #c3d1de; }
.rankLadder small { font: 600 11px ui-monospace, monospace; color: #7f93a6; white-space: nowrap; }
.rankLadder li.done b { color: #dfeee3; }
.rankLadder li.done small::after { content: '  \2713'; color: #7de08a; font-weight: 700; }
.rankLadder li.cur { border-color: rgba(255, 217, 122, 0.6); background: linear-gradient(90deg, #2a2716, #15140c); box-shadow: 0 0 16px rgba(255, 217, 122, 0.12); }
.rankLadder li.cur b { color: #fff3cf; }
.rankLadder li.cur small { color: #ffd97a; }
.rankLadder li.later .epaulette { filter: grayscale(1); opacity: 0.45; }
.rankLadder li.later b { color: #7f8fa1; }
.rankNext { margin: 0 0 4px; font-size: 13px; color: #c3d1de; }
.rankNext b { color: #ffd97a; }
.rankNext.ok { color: #9be8ac; }
.rankCard .coNeeds { margin-top: 6px; }

/* a promotion, on the debrief or the exam's result */
.promo {
  display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 12px 16px;
  border: 1px solid rgba(255, 217, 122, 0.55); border-radius: 12px;
  background: radial-gradient(ellipse 70% 140% at 0% 50%, rgba(255, 217, 122, 0.18), transparent 70%), linear-gradient(135deg, #2a2716, #15140c);
  animation: promoIn 0.6s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}
.promo .epaulette { width: 42px; min-height: 30px; gap: 3px; padding: 5px; }
.promo .epaulette i { height: 4px; }
.promo small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #ffd97a; }
.promo b { display: block; font-size: 19px; color: #fff3cf; }
.promo span { font: 600 12px ui-monospace, monospace; color: #c9b88a; }
@keyframes promoIn { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .promo { animation: none; } }
.cvChips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cvChip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px;
  background: rgba(9, 15, 22, 0.5); border: 1px solid rgba(140, 170, 200, 0.16);
  font-size: 12px; color: #9fb0c3; white-space: nowrap;
}
.cvChip b { margin-left: 4px; color: #e3edf6; font-weight: 600; }
.cvChip.gold { border-color: rgba(255, 217, 122, 0.45); color: #ffd97a; font-weight: 700; letter-spacing: 0.5px; }
.cvBal { position: relative; z-index: 1; margin-left: auto; text-align: right; }
.cvBal span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8fa1b3; }
.cvBal b { font-size: 26px; font-weight: 800; color: #ffd97a; text-shadow: 0 0 18px rgba(255, 217, 122, 0.25); white-space: nowrap; }

/* the eight tiles in even rows: eight on a wide screen, four by four on a phone held sideways,
   two by two held upright */
.cvStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 1000px) { .cvStats { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.cvStat {
  position: relative; padding: 10px 8px 9px; min-width: 0; text-align: center;
  border: 1px solid rgba(140, 170, 200, 0.14); border-radius: 10px;
  background: linear-gradient(180deg, #16212d, #0f161e);
}
.cvStat b { display: block; font-size: 20px; font-weight: 800; color: #e8f0f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvStat span { display: block; margin-top: 2px; font-size: 10px; color: #7f93a6; text-transform: uppercase; letter-spacing: 0.5px; }
.cvStat small { position: absolute; top: 6px; right: 7px; font: 700 10px ui-monospace, monospace; color: #7de08a; }
.cvStat.good b { color: #9be8ac; }
.cvStat.bad b { color: #ff9c7a; }
.cvStat.warn b { color: #f0c36a; }
.cvStat.money b { font-size: 17px; line-height: 24px; color: #ffd97a; }
.cvStat.grade.top { border-color: rgba(125, 224, 138, 0.45); background: linear-gradient(180deg, #17291f, #0f1a14); }
.cvStat.grade.top b { color: #d6ffe2; }
.cvStat.grade.bad { border-color: rgba(255, 122, 92, 0.4); }

.careerCols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.careerCols > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cvCard { padding: 4px 14px 14px; border: 1px solid rgba(140, 170, 200, 0.16); border-radius: 12px; background: #131b24; }
.cvCard h3 { display: flex; align-items: center; gap: 8px; }
.cvCount { margin-left: auto; padding: 1px 8px; border-radius: 10px; background: rgba(140, 180, 220, 0.14); color: #cfe0f0; font: 700 11px ui-monospace, monospace; letter-spacing: 0; }

/* a client group's reputation: its picture, its name and number, a glowing bar marked in quarters */
.repRow { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.repRow:last-child { margin-bottom: 0; }
.repRow .use { grid-row: 1 / 3; width: 26px; height: 26px; }
.repName { color: #c9d6e2; }
.repRow b { font: 800 15px ui-monospace, monospace; color: var(--c); }
.repRow .bar { grid-column: 2 / 4; }
.bar { position: relative; height: 8px; border-radius: 4px; background: #1e2833; overflow: hidden; }
.bar::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(25% - 1px), rgba(11, 16, 23, 0.7) 0 25%, transparent 0 calc(50% - 1px),
    rgba(11, 16, 23, 0.7) 0 50%, transparent 0 calc(75% - 1px), rgba(11, 16, 23, 0.7) 0 75%, transparent 0); }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--c, #6fb1e8);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, #6fb1e8) 50%, #0b1017), var(--c, #6fb1e8));
  box-shadow: 0 0 10px var(--c, #6fb1e8); }

.cvProgress { height: 5px; margin: 0 0 10px; border-radius: 3px; background: #1e2833; overflow: hidden; }
.cvProgress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3d7a52, #7de08a); }
.licList { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.lic { padding: 4px 10px 4px 8px; border-radius: 20px; border: 1px solid rgba(125, 224, 138, 0.3); background: #14221a; color: #c4f0cf; }
.lic::before { content: '✓'; margin-right: 5px; color: #7de08a; font-weight: 700; }
.cvNone { color: #7f8fa1; }

.unlocks, .log { margin: 0; padding-left: 18px; font-size: 12px; color: #a3b3c3; line-height: 1.6; }
.log { max-height: 220px; overflow: auto; }
/* what the courses have unlocked: a green tick in a circle, or a dimmed lock */
/* (and what a lesson has taught, on its debrief) */
.cvCard .unlocks, .unlocks.learned { padding: 0; list-style: none; line-height: 1.4; }
.cvCard .unlocks li, .unlocks.learned li { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; border-bottom: 1px dashed rgba(140, 170, 200, 0.09); }
.cvCard .unlocks li:last-child, .unlocks.learned li:last-child { border-bottom: 0; }
.cvCard .unlocks i, .unlocks.learned i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-style: normal; }
.cvCard .unlocks li.ok, .unlocks.learned li.ok { color: #dfeee3; }
.cvCard .unlocks li.ok i, .unlocks.learned li.ok i { background: #2f6b45; color: #d6ffe2; font-weight: 700; }
.cvCard .unlocks li.off { color: #6f8193; }
.cvCard .unlocks li.off i { background: #1c2631; filter: grayscale(1); opacity: 0.6; }

/* the log as a timeline: a line down the left, a dot per entry coloured by what happened (logKind) */
.cvCard .log { position: relative; max-height: 420px; padding: 0 4px 0 22px; list-style: none; line-height: 1.4; }
.cvCard .log::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(140, 170, 200, 0.14); }
.cvCard .log li { position: relative; padding: 5px 0; color: #c3d1de; }
.cvCard .log li::before {
  content: ''; position: absolute; left: -19px; top: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: #6f8193; box-shadow: 0 0 0 3px #131b24;
}
.cvCard .log li:first-child { color: #eef4fa; }
.cvCard .log li.flight::before { background: #6fb1e8; }
.cvCard .log li.top::before { background: #7de08a; }
.cvCard .log li.bad::before { background: #f0c36a; }
.cvCard .log li.lost { color: #ffb8a4; }
.cvCard .log li.lost::before { background: #ff7a5c; }
.cvCard .log li.rights::before { background: #b58cff; }
.cvCard .log li.legend { color: #ffe7a8; font-weight: 600; }
.cvCard .log li.legend::before { background: #ffd97a; box-shadow: 0 0 0 3px #131b24, 0 0 10px #ffd97a; }
@media (max-width: 520px) {
  .cvHero { padding: 14px; gap: 12px; }
  .cvBadge { width: 52px; height: 52px; }
  .cvBadge > span:first-child { width: 44px; height: 44px; font-size: 17px; }
  .cvName { font-size: 20px; }
  .cvBadge .epaulette { right: -12px; }
  .cvChip { white-space: normal; }
  .cvBal { margin-left: 0; flex: 1 0 100%; text-align: left; }
  .cvStats { grid-template-columns: repeat(2, 1fr); }
  .careerCols { grid-template-columns: 1fr; }
}

/* ---------- briefing ---------- */
.briefTop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.briefMap { display: block; width: 100%; max-width: 720px; aspect-ratio: 720 / 340; margin: 4px 0 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); background: #0c1a2a; }
.bigRoute { font-size: 30px; font-weight: 800; }
.bigPay { font-size: 24px; font-weight: 800; color: #ffd97a; }
.briefCols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
table.wx { width: 100%; font-size: 12px; border-collapse: collapse; }
table.wx td { padding: 2px 0; border-bottom: 1px dashed rgba(140, 170, 200, 0.1); }
table.wx td:first-child { color: #8296a8; }
table.wx tr:has(td:nth-child(2):last-child) td { color: #ffd97a; }
.form { display: grid; gap: 12px; margin: 4px 0 22px; }
button, input, select { font-family: inherit; }
.form label { display: grid; gap: 4px; font-size: 12px; color: #8296a8; }
.form .nameLine { display: flex; gap: 8px; align-items: stretch; }
.form .nameLine input { flex: 1; min-width: 0; }
.form .nameLine .chip { font-size: 18px; padding: 0 12px; }
.form input, .form select {
  padding: 9px 10px;
  border: 1px solid #34414e;
  border-radius: 8px;
  background: #101820;
  color: #e6edf4;
  font-size: 15px;
}

/* ---------- debrief ---------- */
.debriefTop { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.grade {
  flex: none;
  min-width: 86px;
  padding: 8px 12px;
  border: 2px solid #6fb1e8;
  border-radius: 12px;
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  color: #dbeafe;
}
.grade.top { border-color: #7de08a; color: #d6ffe2; }
.grade.bad { border-color: #ff7a5c; color: #ffd0c2; }
.grade.word { font-size: 20px; padding: 12px 12px; }
.debriefTitle { min-width: 0; font-size: 18px; color: #cfdae5; overflow-wrap: anywhere; }
@media (max-width: 520px) { .debriefTop { gap: 12px; } .debriefTitle { font-size: 16px; } }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
table.money { width: 100%; font-size: 13px; border-collapse: collapse; }
table.money td { padding: 4px 0; border-bottom: 1px dashed rgba(140, 170, 200, 0.12); }
table.money td:last-child { text-align: right; font-family: ui-monospace, monospace; }
table.money td.neg { color: #ff9c7a; }
table.money tr.total td { font-weight: 800; font-size: 16px; border-bottom: 0; padding-top: 8px; color: #ffd97a; }
.repGain { font-size: 14px; color: #9be8ac; }
/* the comic lines after a successful flight: the touchdown, a moment of the flight (ui/landingjoke.js) */
.landingJoke {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #ffd97a;
  border-radius: 0 8px 8px 0;
  background: rgba(255, 217, 122, 0.08);
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
  color: #f1e6c4;
}
.landingJoke .ljIcon { flex: none; font-size: 18px; font-style: normal; line-height: 1.2; }

/* ---------- quiz ---------- */
.quizHead { font-size: 12px; color: #8296a8; }
.qText { margin: 10px 0 14px; font-size: 17px; line-height: 1.5; }
.opt {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 12px;
  border: 1px solid #34414e;
  border-radius: 9px;
  background: #161e27;
  color: #e3ecf4;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.keys { margin: 0; padding-left: 18px; font-size: 13px; color: #b3c4d4; line-height: 1.9; }

/* ---------- boot ---------- */
#bootScreen, #webglError {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: radial-gradient(900px 600px at 50% 30%, #1c2b3a, #080d13 75%);
  text-align: center;
}
.bootInner h1 { margin: 10px 0 4px; font-size: 30px; }
.bootInner p { margin: 0; color: #9fb0c3; font-size: 14px; max-width: 380px; }
#bootStatus { margin-top: 14px; color: #ffd97a; }
#bootScreen img { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }

@media (max-width: 640px) {
  .panel { padding: 12px; }
  .contracts { grid-template-columns: 1fr; }
  .bigRoute { font-size: 24px; }
  .cGrid { grid-template-columns: 1fr; }
  #strip { font-size: 10px; min-width: 150px; }
  #messages { font-size: 11px; }
  #hudLeft { width: min(300px, 46vw); }
}

/* ---------- exams ---------- */
.quizTop { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.quizTop h2 { margin: 0; }
.quizTop .coIcon { width: 46px; height: 46px; }
.quizTop .coIcon svg { width: 26px; height: 26px; }
/* the exam passed: the course's badge, big, in a ring of gold */
.badgeWon { display: grid; justify-items: center; gap: 6px; margin: 6px 0 4px; text-align: center; }
.badgeWon .coIcon { width: 92px; height: 92px; border-width: 3px; animation: badgeIn 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) both; }
.badgeWon .coIcon svg { width: 50px; height: 50px; }
.badgeWon b { font-size: 18px; color: #fff3cf; }
@keyframes badgeIn { from { transform: scale(0.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .badgeWon .coIcon { animation: none; } }

.opt.right { border-color: #4ac47f; background: #183a28; color: #dff7e8; opacity: 1; }
.opt.wrong { border-color: #e0574a; background: #3d1d1b; color: #ffd9d4; opacity: 1; }
.opt.dim { opacity: 0.5; }
.quizNote { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: #16202b; border: 1px solid #2c3b4a; color: #cfdbe6; font-size: 14px; line-height: 1.45; }
.quizNote.good { border-color: #4ac47f; }
.quizNote.bad { border-color: #e8b13a; }


/* the mouse cursor, hidden in fullscreen while it is still (core/cursor.js) */
html.cursor-hidden, html.cursor-hidden * { cursor: none !important; }

/* ---------- the legend's card over the hangar (UI.legendCard): the An-225 as a hologram, gold
   over as much of it as is built ---------- */
.legendCard { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin-bottom: 14px; overflow: hidden;
  border: 1px solid rgba(255, 217, 122, 0.35); border-radius: 14px;
  background: linear-gradient(135deg, #1b1810 0%, #11161d 60%); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35); }
.legendCard .lgPic { background:
    radial-gradient(ellipse 70% 40% at 50% 70%, rgba(255, 200, 100, 0.16), transparent 72%),
    radial-gradient(ellipse 80% 80% at 50% 55%, rgba(80, 150, 220, 0.28), transparent 75%),
    linear-gradient(180deg, #14263a 0%, #0d1824 60%, #0a1018 100%); }
.lgGold { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.lgEdge { position: absolute; top: 10%; bottom: 10%; left: var(--p, 0%); width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, #ffe08a 30%, #ffe08a 70%, transparent); box-shadow: 0 0 14px 2px rgba(255, 217, 122, 0.7); }
.acPic .lgTag { background: rgba(255, 217, 122, 0.92); color: #2a1f05; font-weight: 800; }
.lgMain { padding: 14px 16px 14px; display: flex; flex-direction: column; }
.lgKicker { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #ffd97a; }
h3.lgName { margin: 4px 0 2px; font-size: 22px; letter-spacing: 0; text-transform: none; color: #fff7e0; }
.lgName i { font-style: normal; font-weight: 400; color: #ffd97a; }
.lgBar { height: 9px; margin: 6px 0 6px; border-radius: 6px; background: #252e38; overflow: hidden; }
.lgBar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #b88a2c, #ffe08a);
  box-shadow: 0 0 12px rgba(255, 217, 122, 0.6); }
.lgCount { margin: 0 0 4px; font-size: 13px; color: #e2d3a8; }
.lgCount b { color: #ffd97a; }
.legendCard .cFoot { margin-top: auto; padding-top: 10px; }
.legendCard .cFoot .btn + .btn { margin-left: 0; }
.legendCard.done { border-color: #ffd97a; animation: lgShine 3.2s ease-in-out infinite; }
.legendCard.done .lgPic { background:
    radial-gradient(ellipse 70% 45% at 50% 68%, rgba(255, 200, 100, 0.34), transparent 72%),
    linear-gradient(180deg, #2b2112 0%, #17140e 60%, #0d0b08 100%); }
@keyframes lgShine {
  0%, 100% { box-shadow: 0 0 0 1px #ffd97a, 0 0 16px rgba(255, 217, 122, 0.2); }
  50% { box-shadow: 0 0 0 2px #ffd97a, 0 0 34px rgba(255, 217, 122, 0.45); }
}
@media (prefers-reduced-motion: reduce) { .legendCard.done { animation: none; } }
@media (max-width: 760px) { .legendCard { grid-template-columns: 1fr; } }

/* ---------- the Mriya's assembly hall (ui/mriya.js) ---------- */
.panel.mriya { width: min(1260px, 100%); position: relative; }
.mHead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mPurse { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.mMoney { font-size: 20px; font-weight: 800; color: #ffd97a; }
.mHero { position: relative; height: clamp(300px, 54vh, 580px); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(140, 190, 240, 0.18);
  background:
    radial-gradient(ellipse 60% 35% at 50% 88%, rgba(255, 190, 90, 0.18), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 40%, #13304c 0%, #0a1726 55%, #05090f 100%); }
.panel.mriya.done .mHero { border-color: rgba(255, 217, 122, 0.45);
  background: radial-gradient(ellipse 70% 45% at 50% 80%, rgba(255, 190, 90, 0.32), transparent 72%),
    radial-gradient(ellipse 90% 80% at 50% 40%, #2a2414 0%, #120f0a 60%, #060504 100%); }
.mHero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.mHero.noGl canvas { display: none; }
.mTitle { position: absolute; left: 18px; top: 14px; right: 150px; pointer-events: none; }
.mTitle h2 { margin: 0; font-size: clamp(26px, 4.4vw, 44px); letter-spacing: 1px;
  background: linear-gradient(180deg, #fff6d6, #e8b84f 60%, #a8781e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mTitle h2 i { font-style: normal; font-weight: 400; }
.mTitle p { margin: 4px 0 0; max-width: 520px; color: #c9d8e6; font-size: 14px; text-shadow: 0 1px 6px #000; }
.mProgress { position: absolute; right: 14px; top: 12px; width: 124px; height: 124px; pointer-events: none; }
.mRing { width: 100%; height: 100%; }
.mRing circle { fill: none; stroke-width: 7; }
.mRing .bg { stroke: rgba(150, 190, 230, 0.18); }
.mRing .fg { stroke: #ffd97a; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 217, 122, 0.8)); }
.mPct { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mPct b { font-size: 30px; line-height: 1; color: #fff3cf; }
.mPct b small { font-size: 15px; color: #ffd97a; }
.mPct span { margin-top: 3px; font-size: 10px; line-height: 1.25; color: #b9c9d8; max-width: 92px; }
.mPct .mOnStand { color: #ffd97a; }
.mTurn { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: rgba(200, 220, 240, 0.55); pointer-events: none; }
.mLegend { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin: 14px 0 6px; }
.mStory p { margin: 0 0 8px; color: #c3d1de; line-height: 1.55; font-size: 14px; }
.mStory p:last-child { color: #ffd97a; font-weight: 600; }
.mFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-content: start; font-size: 12px; }
.mFacts div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed rgba(255, 217, 122, 0.15); padding: 2px 0; }
.mFacts span { color: #8296a8; }
.mFacts b { color: #f1e3b8; text-align: right; }
.mLockNote { border-left-color: #ff9c7a; }
.mWork { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mBoard { position: sticky; top: 0; }
.mPlanWrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(120, 180, 240, 0.3);
  background: radial-gradient(ellipse at 50% 40%, #0f3152, #0a2038 70%); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45); }
.mPlan { display: block; width: 100%; height: auto; max-height: 72vh; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.panel.mriya.carrying .mPlan { touch-action: none; cursor: grabbing; }
.mPlan .g1 { fill: none; stroke: rgba(150, 200, 255, 0.09); stroke-width: 0.05; }
.mPlan .g2 { fill: none; stroke: rgba(150, 200, 255, 0.2); stroke-width: 0.1; }
.mLines path { fill: none; stroke: rgba(170, 215, 255, 0.45); stroke-width: 0.13; }
.mDim path { fill: none; stroke: rgba(200, 225, 255, 0.5); stroke-width: 0.1; }
.mDim text { fill: #a9cdf0; font: 600 1.7px ui-monospace, monospace; text-anchor: middle; }
.mDim text.mStamp { text-anchor: start; font-size: 1.5px; letter-spacing: 0.15px; fill: rgba(169, 205, 240, 0.6); }
.slot path { fill: rgba(120, 190, 255, 0.05); stroke: rgba(150, 210, 255, 0.38); stroke-width: 0.12; stroke-dasharray: 0.5 0.35; transition: fill 0.3s; }
.slot.bought path { stroke: rgba(255, 217, 122, 0.6); }
.slot.placed path { fill: url(#mGold); stroke: #6b4a10; stroke-width: 0.1; stroke-dasharray: none; }
.slot.box.placed path { fill: #ffd27a; }
.slot.hover path { fill: rgba(120, 200, 255, 0.28); stroke: #9fe0ff; stroke-width: 0.3; stroke-dasharray: none; }
.slot.placed.hover path { fill: #fff0b8; }
.slot.target path { fill: rgba(255, 215, 120, 0.18); stroke: #ffe08a; stroke-width: 0.35; stroke-dasharray: none; filter: url(#mGlow); animation: mTarget 0.9s ease-in-out infinite alternate; }
.slot.target.ready path { fill: rgba(255, 225, 140, 0.6); stroke: #fff6d6; animation: none; }
.slot.just path { animation: mJust 1.2s ease-out; }
@keyframes mTarget { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes mJust { 0% { fill: #ffffff; } 100% { fill: #d8ad48; } }
.ghost path { fill: rgba(255, 224, 150, 0.55); stroke: #fff3c4; stroke-width: 0.16; }
.ghost.snap { transition: transform 0.16s ease-out; }
.ghost.nope path { animation: mNope 0.5s ease-out; }
@keyframes mNope { 0%, 60% { fill: rgba(255, 90, 70, 0.6); stroke: #ff9c7a; } 100% { fill: rgba(255, 224, 150, 0.55); stroke: #fff3c4; } }
@media (prefers-reduced-motion: reduce) { .slot.target path { animation: none; } }
.mMsg { min-height: 40px; padding: 8px 12px; border-top: 1px solid rgba(120, 180, 240, 0.2); background: rgba(6, 16, 28, 0.75);
  color: #cfe0f0; font-size: 13px; line-height: 1.4; }
.mMsg b { color: #ffd97a; }
.mTray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; }
.mTray .fineprint { margin: 4px 0; }
.mChip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px 5px 5px; border: 1px solid rgba(255, 217, 122, 0.45);
  border-radius: 10px; background: linear-gradient(180deg, #2a2414, #1b170e); color: #f1e3b8; font-size: 12px; font-weight: 600;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.mChip:hover { filter: brightness(1.15); }
.mChip.carried { opacity: 0.5; border-style: dashed; }
.mChip:focus-visible { outline: 2px solid #ffd97a; outline-offset: 2px; }
.mThumb { width: 40px; height: 40px; flex: none; border-radius: 7px; background: rgba(10, 32, 56, 0.9); }
.mThumb path { fill: #d8ad48; stroke: #fff0c0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mPart.shop .mThumb path { fill: rgba(120, 190, 255, 0.25); stroke: rgba(170, 215, 255, 0.8); }
.mFloat { position: fixed; left: 0; top: 0; z-index: 120; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; pointer-events: none;
  border: 1px solid #ffd97a; border-radius: 10px; background: rgba(27, 23, 14, 0.92); color: #f1e3b8; font-size: 12px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.mFloat[hidden] { display: none; }
.mShop h3:first-child, .mBoard h3:first-child { margin-top: 0; }
.mShop .fineprint { margin: 0 0 8px; }
.mList { display: grid; gap: 8px; }
.mPart { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px;
  border: 1px solid rgba(140, 170, 200, 0.16); border-radius: 11px; background: #131b24; }
.mPart .mThumb { width: 52px; height: 52px; }
.mPart.bought { border-color: rgba(255, 217, 122, 0.6); }
.mPart.placed { border-color: rgba(255, 217, 122, 0.25); background: linear-gradient(135deg, #1d1a12, #131b24 70%); }
.mPHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mPHead b { font-size: 14px; color: #eef4fa; }
.mSpec { margin-top: 2px; font-size: 12px; font-weight: 600; color: #ffd97a; }
.mPInfo p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: #9fb0c3; }
.mPBuy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 116px; text-align: right; }
.mPrice { font: 700 15px ui-monospace, monospace; color: #eef4fa; }
.mPart.placed .mPrice { color: #8a99a8; }
.mRep { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #c3d1de; }
.mRep i { width: 8px; height: 8px; border-radius: 50%; }
.mFitted { font-size: 12px; font-weight: 700; color: #ffd97a; }
.mToast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 130;
  padding: 8px 14px; border-radius: 9px; background: rgba(60, 20, 70, 0.92); border: 1px solid #c58cff; color: #f2e4ff; font-size: 13px; }
.mToast[hidden] { display: none; }
.mFinale { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 50%, rgba(40, 28, 6, 0.3), rgba(0, 0, 0, 0.55)); animation: mFade 0.6s ease-out; }
.mFinaleCard { max-width: 560px; padding: 22px 24px 20px; text-align: center; border: 1px solid #ffd97a; border-radius: 18px;
  background: rgba(22, 17, 8, 0.86); box-shadow: 0 0 60px rgba(255, 200, 90, 0.35), 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: mPop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1); }
.mFinaleNative { font-size: clamp(64px, 16vw, 128px); font-weight: 900; line-height: 1; letter-spacing: 6px;
  background: linear-gradient(100deg, #a8781e 0%, #ffe9a8 30%, #fff 45%, #e8b84f 60%, #a8781e 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mGleam 3s linear infinite; }
.mFinaleCard h2 { margin: 6px 0 6px; font-size: 24px; color: #fff3cf; }
.mFinaleCard p { margin: 0; color: #e2d3a8; line-height: 1.5; }
.mFinaleCard .btnRow { justify-content: center; }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes mGleam { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .mFinaleNative, .mFinaleCard, .mFinale { animation: none; } }
canvas.fireworks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 115; pointer-events: none; }
@media (max-width: 900px) {
  .mWork, .mLegend { grid-template-columns: 1fr; }
  .mBoard { position: static; }
}
@media (max-width: 560px) {
  .mHero { height: clamp(260px, 46vh, 420px); }
  .mTitle { right: 104px; left: 12px; }
  .mTitle p { font-size: 12px; }
  .mProgress { width: 92px; height: 92px; right: 8px; top: 8px; }
  .mPct b { font-size: 22px; }
  .mPct span { font-size: 9px; max-width: 70px; }
  .mPart { grid-template-columns: 44px minmax(0, 1fr); }
  .mPart .mThumb { width: 44px; height: 44px; }
  .mPBuy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
  .mPBuy .mPrice { margin-right: auto; }
  .mFacts { grid-template-columns: 1fr; }
}
/* (the catalogue's Buy is a card's action: blue; Fit it stays gold, the thing to do next) */
.mPBuy .btn.default[data-m="buy"] { border-color: #79b8ef; background: linear-gradient(180deg, #3c86cf, #2a63a2); color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.mHead { flex-wrap: wrap; }
.mHead .btn { white-space: nowrap; }

/* the Mriya's finishes: a round swatch each (its body from the roof to the belly, its lines across) */
.mDot { position: relative; display: block; width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4); }
.mDot em { position: absolute; left: 0; right: 0; top: 54%; height: 16%; }
.mFinishes { margin: 8px 0 4px; }
.mSwatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mSwatch { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  padding: 7px 10px; border: 1px solid #34414e; border-radius: 11px; background: #161e27; color: #dbe6f0; text-align: left; cursor: pointer; }
.mSwatch .mDot { grid-row: 1 / 3; }
.mSwatch span { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mSwatch small { font-size: 11px; color: #8fa3b6; }
.mSwatch.own small { color: #c3d1de; }
.mSwatch.on { border-color: #ffd97a; background: #1f1c12; box-shadow: 0 0 0 1px #ffd97a, 0 0 14px rgba(255, 217, 122, 0.25); }
.mSwatch.on small { color: #ffd97a; }
.mSwatch:hover { filter: brightness(1.15); }
.mSwatch:focus-visible { outline: 2px solid #ffd97a; outline-offset: 2px; }
.mFinLine { margin: 8px 0 0; font-size: 13px; color: #c3d1de; line-height: 1.5; }
.mFinLine b { color: #fff3cf; }
.mFinPrice { margin-left: 6px; font: 700 13px ui-monospace, monospace; color: #ffd97a; }
.mFinBtns { display: inline-flex; gap: 8px; margin-left: 10px; vertical-align: middle; flex-wrap: wrap; }
/* ... and on the hangar card: small round buttons, the one it wears ringed in gold */
.lgFinishes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.lgFinishes > span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8296a8; margin-right: 4px; }
.lgSwatch { padding: 2px; border: 1px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.lgSwatch .mDot { width: 22px; height: 22px; }
.lgSwatch.buy .mDot { opacity: 0.55; }
.lgSwatch.on { border-color: #ffd97a; box-shadow: 0 0 10px rgba(255, 217, 122, 0.45); }
.lgSwatch:hover .mDot { opacity: 1; transform: scale(1.1); }
.lgSwatch:focus-visible { outline: 2px solid #ffd97a; outline-offset: 1px; }
.lgFinName { margin-left: 4px; font-size: 12px; color: #e2d3a8; }
@media (max-width: 560px) { .mSwatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mFinBtns { margin: 6px 0 0; } }

/* the legend stands out in the hangar before it is built and after: a gold frame breathing slowly,
   and a gleam of light sweeping across its picture now and then (built: brighter, more often) */
.legendCard { position: relative; border-color: #c9a44a; animation: lgGlow 4.5s ease-in-out infinite; }
@keyframes lgGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 217, 122, 0.55), 0 0 18px rgba(255, 200, 100, 0.14), 0 12px 34px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 0 1px #ffd97a, 0 0 32px rgba(255, 200, 100, 0.3), 0 12px 34px rgba(0, 0, 0, 0.35); }
}
.legendCard .lgPic::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, 0.16) 48%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 236, 190, 0.16) 52%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; animation: lgSweep 7s ease-in-out infinite; }
@keyframes lgSweep { 0%, 62% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.legendCard.done { border-color: #ffd97a; animation: lgShine 3.2s ease-in-out infinite; }
.legendCard.done .lgPic::after { animation-duration: 4.5s; }
.lgOwn { margin: 0 0 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 217, 122, 0.3);
  background: rgba(255, 217, 122, 0.07); font-size: 12px; line-height: 1.45; color: #e9dcb6; }
@media (prefers-reduced-motion: reduce) {
  .legendCard { animation: none; box-shadow: 0 0 0 1px #ffd97a, 0 0 24px rgba(255, 200, 100, 0.25); }
  .legendCard .lgPic::after { animation: none; display: none; }
}
.lgFinName { flex-basis: 100%; margin: 2px 0 0; }
.lgFinishes { gap: 3px; }
.lgSwatch { padding: 1px; }
.lgSwatch .mDot { width: 20px; height: 20px; }

/* ---------- round the world (ui/rtw.js): its screen, its cards, the passport, the finish ---------- */
.banner.rtw { background: rgba(10, 26, 50, 0.92); border-color: #e0bb5a; color: #fbeec4; }
.rtwTitle { color: #fff3cf; }
.rtwHero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: center; margin: 6px 0 14px; }
.rtwGlobeBox { position: relative; aspect-ratio: 1 / 1; max-height: 460px; width: 100%; margin: 0 auto; }
.rtwGlobeBox canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.rtwGlobeBox canvas:active { cursor: grabbing; }
/* Undo on the globe's corner while a route is drawn: by the thumb, not far below on a phone */
.rtwUndo { position: absolute; top: 4px; right: 4px; z-index: 1; background: rgba(13, 27, 42, 0.85); }
.rtwTurn { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 11px; color: #8fa3b8; pointer-events: none; }
.rtwToast { position: absolute; left: 50%; top: 8px; max-width: 90%; transform: translateX(-50%); padding: 5px 12px; border-radius: 8px;
  background: rgba(60, 20, 12, 0.92); border: 1px solid #ff7a5c; color: #ffd0c2; font-size: 12px; font-weight: 600;
  opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.rtwToast.on { opacity: 1; }
.rtwGauges { display: grid; gap: 14px; justify-items: center; }
.rtwRing { --p: 0%; display: grid; place-items: center; width: 168px; height: 168px; border-radius: 50%;
  background: conic-gradient(#f1c75b var(--p), rgba(140, 170, 200, 0.16) 0); box-shadow: 0 0 24px rgba(241, 199, 91, 0.18); }
.rtwRing > div { display: grid; place-items: center; align-content: center; width: 138px; height: 138px; border-radius: 50%; background: #0f1720; text-align: center; }
.rtwRing b { font-size: 34px; color: #ffe7a6; line-height: 1; }
.rtwRing span { margin-top: 4px; max-width: 110px; font-size: 11px; color: #9fb0c3; line-height: 1.3; }
.rtwKm { width: 100%; max-width: 320px; text-align: center; }
.rtwKm b { display: block; margin-top: 6px; font-size: 20px; color: #eaf3fb; }
.rtwKm span { font-size: 12px; color: #9fb0c3; }
.rtwKmBar { position: relative; height: 10px; border-radius: 6px; background: #252e38; }
.rtwKmBar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #b88a2c, #ffe08a); box-shadow: 0 0 10px rgba(255, 217, 122, 0.5); }
.rtwKmBar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #ffffff; border-radius: 1px; }
.rtwKmBar.small { height: 7px; margin: 6px 0; max-width: 320px; }
.rtwVerdict { margin: 0; max-width: 320px; text-align: center; font-size: 13px; color: #ffcfae; line-height: 1.45; }
.rtwVerdict.ok { color: #9be8ac; }
.rtwSec { margin: 4px 0 12px; }
.rtwTypes { display: flex; flex-wrap: wrap; gap: 6px; }
.rtwTypes .chip small { margin-left: 4px; color: #9fb0c3; font-weight: 500; }
.rtwRoutes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.rtwRoute { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px;
  border: 1px solid rgba(140, 170, 200, 0.2); border-radius: 12px; background: #131b24; color: #c3d1de; text-align: left; cursor: pointer; font: inherit; }
.rtwRoute img { grid-row: 1 / 4; width: 64px; height: 64px; }
.rtwRoute b { font-size: 15px; color: #eaf3fb; }
.rtwRoute span { font-size: 12px; color: #ffd97a; }
.rtwRoute small { font-size: 12px; line-height: 1.4; color: #9fb0c3; }
.rtwRoute em { grid-column: 2; font-size: 12px; font-style: normal; color: #ffb59e; }
.rtwRoute.own { grid-template-columns: 1fr; }
.rtwRoute.own img { display: none; }
.rtwRoute.on { border-color: #ffd97a; box-shadow: 0 0 0 1px #ffd97a, 0 0 18px rgba(255, 217, 122, 0.18); background: #1a1d17; }
.rtwRoute.no { opacity: 0.75; }
.rtwRoute:focus-visible { outline: 2px solid #ffd97a; outline-offset: 2px; }
@media (hover: hover) { .rtwRoute:hover { border-color: rgba(255, 217, 122, 0.55); } }
.rtwLegs { margin: 10px 0 6px; padding: 7px 10px; list-style: none; border-radius: 10px; background: rgba(9, 14, 20, 0.55); font-size: 13px; }
.rtwLegs li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 8px; padding: 4px 0; border-bottom: 1px dashed rgba(140, 170, 200, 0.09); color: #c3d1de; }
.rtwLegs li:last-child { border-bottom: 0; }
.rtwLegs li i { font-style: normal; font-weight: 700; text-align: center; color: #8fa3b8; }
.rtwLegs li span { font: 600 12px ui-monospace, monospace; color: #9fb0c3; }
.rtwLegs li em { grid-column: 2 / 4; font-size: 12px; font-style: normal; color: #ffb59e; }
.rtwLegs li.done i { color: #9be8ac; }
.rtwLegs li.next { color: #fff3cf; }
.rtwLegs li.next i { color: #ffd97a; }
.rtwLegs li.later { color: #8fa3b8; }
.rtwLegs li.bad i { color: #ff8a73; }
.rtwAdd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 18px; }
.rtwAdd label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c3d1de; }
.rtwAdd select { max-width: min(340px, 70vw); padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(140, 170, 200, 0.3); background: #0f1720; color: #eaf3fb; font: inherit; font-size: 13px; }
.rtwNext { margin: 4px 0 12px; padding: 10px 14px 12px; border: 1px solid rgba(255, 217, 122, 0.35); border-radius: 12px; background: linear-gradient(135deg, #1b1810 0%, #11161d 70%); }
.rtwNextHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.rtwNextHead b { color: #fff3cf; }
.rtwMode { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; background: rgba(255, 217, 122, 0.16); color: #ffd97a; white-space: nowrap; }
.rtwMode.iron { background: #3b434c; color: #e3e8ee; box-shadow: inset 0 0 0 1px #8a949e; }
.rtwConfirm { margin: 8px 0; padding: 10px 14px; border: 1px solid #ff7a5c; border-radius: 12px; background: rgba(60, 20, 12, 0.5); }
.rtwConfirm p { margin: 0 0 4px; color: #ffd0c2; }
/* the passport: a stamp per leg, tilted a little, the airport's colour round it */
.rtwPassport { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; padding: 12px; border-radius: 12px;
  background: repeating-linear-gradient(0deg, #101923 0 23px, #13202c 23px 24px); }
.rtwStamp { position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 6px 7px; border: 2px solid var(--c); border-radius: 10px;
  background: #152131; transform: rotate(var(--tilt)); box-shadow: inset 0 0 0 3px #152131, inset 0 0 0 4px var(--c); text-align: center; }
.rtwStamp .rtwSym { width: 34px; height: 34px; }
.rtwStamp b { font: 800 17px ui-monospace, monospace; color: #f2f6fa; letter-spacing: 1px; }
.rtwStamp span { font-size: 11px; color: #c3d1de; }
.rtwStamp small { font-size: 10px; color: #8fa3b8; }
.rtwStamp em.g { position: absolute; right: 5px; top: 4px; font: 800 12px system-ui, sans-serif; font-style: normal; color: #c3d1de; }
.rtwStamp em.g.top { color: #9be8ac; }
.rtwStamp em.g.bad { color: #ffb59e; }
.rtwNeptune { position: absolute; left: 6px; top: 4px; font-style: normal; font-size: 13px; }
.rtwTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtwTable th, .rtwTable td { padding: 5px 6px; border-bottom: 1px dashed rgba(140, 170, 200, 0.12); text-align: center; color: #c3d1de; }
.rtwTable th:first-child { text-align: left; color: #eaf3fb; font-weight: 600; }
.rtwTable thead th { font-size: 11px; font-weight: 700; color: #8fa3b8; text-transform: uppercase; letter-spacing: 0.6px; }
.rtwMarks td.on { color: #ffd97a; font-weight: 800; }
.rtwMarks td.on.iron { color: #e3e8ee; }
.rtwMedalLine { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: #e2d3a8; }
.rtwHistory { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.rtwHistory li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(140, 170, 200, 0.12); }
.rtwHistory li:last-child { border-bottom: 0; }
.rtwHistory li b { color: #eaf3fb; }
.rtwHistory li span { grid-column: 1; font-size: 12px; color: #9fb0c3; }
.rtwHistory li .btn { grid-row: 1 / 3; grid-column: 2; }
.rtwHistory li.done b { color: #ffd97a; }
.rtwHistory li.lost b { color: #ffb59e; }
.rtwHistory li.abandoned b { color: #9fb0c3; }
/* the medal: a globe in silver, iron or gold */
.rtwMedal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c9d1d9 45%, #7d8792); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.rtwMedal svg { width: 18px; height: 18px; fill: none; stroke: #2a3440; stroke-width: 1.4; }
.rtwMedal.iron { background: radial-gradient(circle at 35% 30%, #9aa3ad, #4b535c 50%, #23292f); }
.rtwMedal.iron svg { stroke: #dfe5ea; }
.rtwMedal.gold { background: radial-gradient(circle at 35% 30%, #fff4c8, #e6b84a 45%, #9a6d1c); }
.rtwMedal.gold svg { stroke: #4a3208; }
.cvBadge .rtwMedal { position: absolute; left: -10px; bottom: -6px; }
/* its card on top of the Network tab */
.rtwCard { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); margin-bottom: 14px; overflow: hidden;
  border: 1px solid rgba(140, 170, 200, 0.22); border-radius: 14px; background: linear-gradient(135deg, #101b2b 0%, #11161d 65%); }
.rtwCard.open { border-color: #c9a44a; animation: lgGlow 4.5s ease-in-out infinite; }
.rtwCard.fresh { box-shadow: 0 0 0 2px #ffd97a, 0 0 30px rgba(255, 217, 122, 0.35); }
.rtwCardPic { position: relative; display: grid; place-items: center; padding: 10px;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(80, 150, 220, 0.25), transparent 75%), #0b1520; }
.rtwCardPic img { width: 100%; max-width: 180px; aspect-ratio: 1 / 1; }
.rtwCard:not(.open) .rtwCardPic img { filter: grayscale(0.6) brightness(0.8); }
.rtwCardMedal { position: absolute; right: 10px; top: 10px; }
.rtwCardMain { display: flex; flex-direction: column; padding: 14px 16px; }
.rtwCardMain .cFoot { margin-top: auto; padding-top: 10px; }
.rtwChips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.rtwChip { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #6f8193; background: #1c2631; }
.rtwChip.on { color: #2a1f05; background: #ffd97a; }
.rtwChip.iron { color: #f2f5f8; background: #4b535c; box-shadow: inset 0 0 0 1px #9aa3ad; }
@media (max-width: 640px) { .rtwCard { grid-template-columns: 1fr; } .rtwCardPic img { max-width: 160px; } }
@media (max-width: 760px) { .rtwHero { grid-template-columns: 1fr; } .rtwGlobeBox { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .rtwCard.open { animation: none; box-shadow: 0 0 0 1px #c9a44a; } }
/* the next leg pinned over the board */
.contract.rtwPin { border-color: #c9a44a; background: linear-gradient(135deg, #1b1810 0%, #131b24 70%); margin-bottom: 12px; }
/* in a leg's briefing and debrief */
.rtwBrief { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; margin: 10px 0; padding: 10px 12px;
  border: 1px solid rgba(255, 217, 122, 0.3); border-radius: 12px; background: rgba(255, 217, 122, 0.05); }
.rtwBrief img { width: 110px; height: 110px; }
.rtwBrief b { color: #fff3cf; }
.rtwBrief p { margin: 4px 0 0; font-size: 13px; color: #c3d1de; line-height: 1.45; }
.rtwDebrief { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 12px 0; padding: 12px 14px;
  border: 1px solid rgba(255, 217, 122, 0.35); border-radius: 12px; background: rgba(255, 217, 122, 0.06); }
.rtwDebrief.lost, .rtwDebrief:not(:has(.rtwDebriefStamp)) { grid-template-columns: 1fr; }
.rtwDebrief.lost { border-color: #ff7a5c; background: rgba(60, 20, 12, 0.45); }
.rtwDebrief b { color: #fff3cf; }
.rtwDebrief p { margin: 4px 0 0; font-size: 13px; color: #c3d1de; }
.rtwDebriefStamp .rtwStamp { width: 118px; }
/* the finish and the certificate, over the debrief */
.rtwFinale, .rtwCert { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 24, 50, 0.45), rgba(0, 0, 0, 0.65)); animation: mFade 0.6s ease-out; }
.rtwCert { z-index: 120; }
.rtwFinaleCard { position: relative; max-width: 560px; padding: 18px 22px 18px; text-align: center; border: 1px solid #ffd97a; border-radius: 18px;
  background: rgba(10, 20, 38, 0.9); box-shadow: 0 0 60px rgba(255, 200, 90, 0.3), 0 30px 80px rgba(0, 0, 0, 0.6); animation: mPop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1); }
.rtwFinaleGlobe { width: min(260px, 60vw); height: min(260px, 60vw); }
.rtwFinaleMedal { position: absolute; left: 50%; top: calc(min(260px, 60vw) + 6px); transform: translate(-50%, -60%); }
.rtwFinaleMedal .rtwMedal { width: 52px; height: 52px; }
.rtwFinaleMedal .rtwMedal svg { width: 36px; height: 36px; }
.rtwFinaleCard h2 { margin: 18px 0 6px; font-size: 26px; color: #fff3cf; }
.rtwFinaleCard p { margin: 0 0 4px; color: #d6dfe9; line-height: 1.5; }
.rtwFinaleReward { color: #ffd97a !important; font-weight: 600; }
.rtwFinaleCard .btnRow { justify-content: center; }
.rtwCertCard { max-width: min(980px, 100%); text-align: center; }
.rtwCertCard img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.rtwCertCard .btnRow { justify-content: center; }
.rtwCertCard a.btn { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .rtwFinale, .rtwCert, .rtwFinaleCard { animation: none; } }
.stripRow.rtw span:first-child { color: #ffd97a; }

/* ---------- the flight school (ui/coach.js, ui/school.js) ---------- */
/* the coach: the lesson's steps at the top of the left column, in place of the contract strip */
#coach {
  width: 100%;
  padding: 8px 11px 9px;
  border: 1px solid rgba(255, 217, 122, 0.45);
  border-radius: 10px;
  background: rgba(14, 18, 12, 0.8);
  backdrop-filter: blur(3px);
  font-size: 12px;
  line-height: 1.45;
}
#coach .coachHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 5px; }
#coach .coachTag { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: #ffd97a; }
#coach .coachHead b { font-size: 14px; color: #f4ecd2; }
#coach .coachN { margin-left: auto; font-size: 10px; color: #9aa7b4; }
#coach .coachSteps { margin: 0; padding: 0; list-style: none; }
#coach .coachSteps li { position: relative; padding: 2px 0 2px 18px; color: #7f8b97; }
#coach .coachSteps li::before { content: '•'; position: absolute; left: 4px; }
#coach .coachSteps li.done { color: #8fbf98; }
#coach .coachSteps li.done::before { content: '✓'; left: 2px; color: #7de08a; }
#coach .coachSteps li.passed::before { content: '–'; }
#coach .coachSteps li.now { margin: 3px 0; padding: 5px 8px 6px 18px; border-radius: 7px; background: rgba(255, 217, 122, 0.1); color: #f1f5f9; }
#coach .coachSteps li.now::before { content: '▸'; top: 5px; color: #ffd97a; }
#coach .coachSteps li.now > b { display: block; font-size: 13px; color: #fff6dc; }
#coach .coachSteps b b { color: #ffd97a; }
#coach .coachSteps li.now .why { display: block; margin-top: 3px; color: #c5d2de; font-size: 11.5px; }
#coach .coachHelp { margin-top: 5px; color: #9fd8ff; font-size: 11px; }
#coach kbd { font: 700 11px ui-monospace, monospace; padding: 0 4px; border-radius: 4px; border: 1px solid #4a5868; background: #0f151c; color: #cfe0ef; }
/* what the lit step is about: the touch buttons, the taxi arrow, the checklist, the mini map */
.coachHi { animation: coachPulse 1.1s ease-in-out infinite; }
@keyframes coachPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 217, 122, 0.95), 0 0 12px 3px rgba(255, 217, 122, 0.55); }
  50% { box-shadow: 0 0 0 2px rgba(255, 217, 122, 0.35), 0 0 4px 1px rgba(255, 217, 122, 0.2); }
}
#taxiArrow svg.coachHi { animation: coachArrow 1.1s ease-in-out infinite; box-shadow: none; border-radius: 50%; }
@keyframes coachArrow { 0%, 100% { filter: drop-shadow(0 0 6px #ffd97a) drop-shadow(0 1px 2px #000); } 50% { filter: drop-shadow(0 1px 2px #000); } }
#taxiArrow .taxiSpd.coachHi { border-radius: 7px; }
#stickBase.coachHi { border-radius: 50%; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .coachHi, #taxiArrow svg.coachHi { animation: none; box-shadow: 0 0 0 2px rgba(255, 217, 122, 0.9); }
}
/* a phone: the coach shows only the lit step, and the prompt under it only its first line */
@media (pointer: coarse) and (max-height: 520px), (pointer: coarse) and (max-width: 520px) {
  #coach { padding: 5px 8px 6px; font-size: 11px; }
  #coach .coachHead b { font-size: 12px; }
  #coach .coachSteps li.now { margin: 2px 0 0; padding: 3px 6px 4px 16px; }
  #coach .coachSteps li.now > b { font-size: 12px; }
  #coach .coachSteps li.now .why { font-size: 10.5px; }
  body.inLesson #prompt .more { display: none; }
}
/* held upright the coach's card is tall: the taxi arrow lower down the view, clear of it */
@media (pointer: coarse) and (orientation: portrait) { body.inLesson #taxiArrow { top: 52%; } }

/* the school: on the Dispatch tab */
.school { display: flex; flex-direction: column; gap: 14px; }
.schoolHero {
  padding: 14px 16px;
  border: 1px solid rgba(255, 217, 122, 0.3);
  border-radius: 14px;
  background: radial-gradient(ellipse 60% 140% at 0% 30%, rgba(255, 217, 122, 0.12), transparent 70%), linear-gradient(135deg, #1d2430, #121922);
}
.schoolTop { display: flex; gap: 14px; align-items: flex-start; }
.schoolTop h3 { margin: 2px 0 6px; }
.schoolTop p { margin: 0; color: #c3d1de; font-size: 13px; line-height: 1.5; }
.schoolBadge { flex: none; display: grid; place-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: #2b2a1c; box-shadow: 0 0 0 2px rgba(255, 217, 122, 0.5); font-size: 26px; }
.schoolProg { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; font-size: 12px; color: #a9b8c6; }
.schoolBar { flex: 1; max-width: 260px; height: 6px; border-radius: 3px; background: #26313c; overflow: hidden; }
.schoolBar i { display: block; width: var(--p); height: 100%; background: #ffd97a; }
.schoolStage { border: 1px solid rgba(140, 170, 200, 0.16); border-radius: 14px; background: #121a23; overflow: hidden; }
.stHead { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(140, 170, 200, 0.12); }
.stHead .stPic { flex: none; width: 150px; border-radius: 9px; }
.stHead small { display: block; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: #8fa1b3; }
.stHead b { display: block; font-size: 15px; }
.stHead p { margin: 3px 0 0; color: #a9b8c6; font-size: 12.5px; }
.lessons { display: flex; flex-direction: column; }
.lessonCard { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid rgba(140, 170, 200, 0.08); }
.lessonCard:first-child { border-top: 0; }
.lessonCard.next { background: rgba(255, 217, 122, 0.06); }
.lNum { flex: none; display: grid; place-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #1f2a36; color: #c3d1de; font-weight: 800; }
.lessonCard.next .lNum { background: #ffd97a; color: #1a1608; }
.lessonCard.done .lNum { background: #1f3a2a; color: #7de08a; }
.lMain { flex: 1; min-width: 0; }
.lTitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.lTitle b { font-size: 14px; }
.lMin { font-size: 11px; color: #8fa1b3; }
.lMain p { margin: 2px 0 5px; color: #b3c4d4; font-size: 12.5px; }
.lLearn { display: flex; flex-wrap: wrap; gap: 4px; }
.lLearn span { padding: 1px 7px; border-radius: 9px; background: #1c2732; color: #9fb4c8; font-size: 11px; }
.lessonCard .btn { flex: none; }
@media (max-width: 520px) {
  .stHead .stPic { width: 96px; }
  .lessonCard { flex-wrap: wrap; }
  .lessonCard .btn { margin-left: 44px; }
}
/* a line over the board, and the Training tab's card */
.schoolLine { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 7px 10px;
  border: 1px solid rgba(255, 217, 122, 0.25); border-radius: 10px; background: #1a1c16; color: #e7dfc2; font-size: 13px; }
.schoolLine.big { padding: 10px 12px; }
.schoolLine small { color: #a9b8c6; }
/* the graduation's diploma: a cream sheet in a gold frame, the seal on top */
.diploma { position: relative; margin: 22px auto 12px; max-width: 460px; padding: 26px 22px 14px; text-align: center;
  border: 2px solid #c9a24a; border-radius: 6px; outline: 1px solid #c9a24a; outline-offset: -8px;
  background: radial-gradient(ellipse at 50% 0%, #fffaf0, #f3e6c8); color: #3a2f1c; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
.dipSeal { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); display: grid; place-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: #2b2a1c; box-shadow: 0 0 0 2px #e0bb5a; font-size: 21px; }
.diploma small { display: block; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #8a6d2c; }
.diploma h2 { margin: 2px 0 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; letter-spacing: 3px; color: #6b4e16; }
.diploma p { margin: 4px 0; font-size: 13px; line-height: 1.45; color: #5a4a2c; }
.dipName { display: block; margin: 4px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-style: italic; color: #2a2010; }
.dipLessons { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 6px; margin: 10px 0 12px; padding: 0; list-style: none; }
.dipLessons li { padding: 1px 8px; border-radius: 9px; background: rgba(201, 162, 74, 0.18); color: #4f6b2c; font-size: 11.5px; }
.dipFoot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(140, 110, 50, 0.35);
  font-size: 11.5px; color: #7a6538; }