:root {
  --bg: #0a1017;
  --panel: #111b26;
  --panel-2: #172433;
  --line: #24384b;
  --text: #dbe5ee;
  --muted: #7e93a6;
  --amber: #ffb020;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Segoe UI", system-ui, sans-serif;
  --mono: "Consolas", "SF Mono", monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.4 var(--body); overflow: hidden; }
.hidden { display: none !important; }

/* ---------- Welcome overlay ---------- */
.welcome {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: #05090e; overflow: hidden;
  opacity: 1; transition: opacity .9s ease;
}
.welcome.fade { opacity: 0; pointer-events: none; }
.welcome.gone { display: none; }
.ember-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ember {
  position: absolute; bottom: -10px; border-radius: 50%; background: #f0902a;
  box-shadow: 0 0 6px 2px rgba(240,144,42,.55);
  opacity: 0; animation-name: ember-rise; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes ember-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .85; }
  75% { opacity: .4; }
  100% { transform: translate(var(--drift), -105vh); opacity: 0; }
}
.welcome-layout {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: 100%; height: 100vh; height: 100dvh;
  padding: .4rem clamp(1rem, 4vw, 3rem);
}
.welcome-about {
  position: relative; z-index: 2;
  flex: 0 1 17rem; min-width: 0;
  color: var(--text); font: 400 .95rem/1.6 var(--body);
}
.welcome-about p { margin: 0 0 1rem; }
.welcome-about p:last-child { margin-bottom: 0; }
.welcome-about b { color: var(--amber); font-weight: 700; }
.cover {
  display: block; flex: 0 1 auto; min-height: 0; min-width: 0;
  position: relative; z-index: 1;
  height: calc(100% + 55px); max-height: calc(100% + 55px); width: auto; max-width: 70vw; object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.welcome-controls {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.75rem, 2vh, 1.25rem);
}
.start-btn {
  flex: none; padding: .85rem 2.4rem; font: 700 1.2rem var(--head); letter-spacing: .2em; text-align: center;
  color: #1a1200; background: var(--amber); border: 2px solid var(--amber);
  box-shadow: 0 0 0 0 rgba(255,176,32,.5), 0 8px 30px rgba(0,0,0,.5);
  cursor: pointer; transition: transform .15s, box-shadow .25s, background .15s;
}
.start-btn:hover { background: #ffc44d; transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(255,176,32,.25), 0 8px 30px rgba(0,0,0,.5); }
.playerselect { flex: none; display: flex; align-items: center; gap: .6rem; color: var(--text); font: 600 .95rem var(--body); }
.playerselect select {
  padding: .4rem .6rem; font: 600 1rem var(--mono); color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
}
.playerselect select:hover { border-color: var(--amber); }
.name-inputs { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.name-input {
  padding: .4rem .6rem; font: 600 .95rem var(--mono); color: var(--text); width: 11rem; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line);
}
.name-input::placeholder { color: var(--muted); }
.name-input:hover, .name-input:focus { border-color: var(--amber); outline: none; }
.resume-btn {
  flex: none; padding: .7rem 2rem; font: 700 1.05rem var(--head); letter-spacing: .1em; text-align: center;
  color: var(--amber); background: transparent; border: 2px solid var(--amber);
  cursor: pointer; transition: background .15s, color .15s;
}
.resume-btn:hover { background: var(--amber); color: #1a1200; }
.resumenote { flex: none; margin: 0; max-width: 14rem; color: var(--muted); font-size: .8rem; text-align: center; }

/* ---------- App shell ---------- */
.app { height: 100%; display: flex; flex-direction: column; opacity: 0; transition: opacity .9s ease; }
.app.visible { opacity: 1; }

/* Top navigation bar */
.topbar {
  display: flex; align-items: center; gap: 2.5rem;
  padding: .6rem 1.25rem; background: var(--panel); border-bottom: 2px solid var(--amber);
}
.brand { font: 700 1.1rem var(--head); letter-spacing: .05em; color: var(--amber); white-space: nowrap; }
.topcashchart { display: flex; align-items: center; }
.topcashchart svg { display: block; }
/* Small captions under the two half-donut gauges (drawn with CSS so they survive the gauges re-rendering) */
.topcashchart, .toppartsbank { flex-direction: column; justify-content: center; gap: 2px; }
.topcashchart::after, .toppartsbank::after { font: 600 .7rem var(--head); letter-spacing: .06em; color: var(--text); line-height: 1; }
.topcashchart::after { content: 'Cash'; }
.toptrend { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-right: auto; margin-left: -1.2rem; }
.toptrend .mute-btn { margin-left: 0; }
.toptrend::after { content: 'Trends'; font: 600 .7rem var(--head); letter-spacing: .06em; color: var(--text); line-height: 1; }
.toppartsbank::after { content: 'Parts'; }
.stat { display: flex; align-items: baseline; gap: .6rem; }
.label { color: var(--muted); font-size: .8rem; }
.mono { font: 600 1.25rem var(--mono); font-variant-numeric: tabular-nums; }
.chip { display: inline-block; width: .8rem; height: .8rem; margin-right: .5rem; border-radius: 50%; background: var(--amber); }
.phase { color: var(--amber); font-size: .9rem; }
.mute-btn {
  flex: none; margin-left: .5rem; width: 2.2rem; height: 2.2rem; padding: 0;
  font-size: 1.2rem; line-height: 1; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.mute-btn:hover { border-color: var(--amber); }
.mute-btn[aria-pressed="true"] { color: var(--muted); }
.pinbadge { font: 600 1rem var(--head); color: var(--muted); }

/* Roster strip: shows every player's colour, cash and turn/elimination state */
.roster { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.25rem; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.map-overlay-left {
  position: absolute; left: 1rem; top: 1rem; z-index: 85;
  display: flex; flex-direction: column; gap: .75rem; max-width: 360px;
  max-height: calc(100% - 2rem); overflow-y: auto; padding-right: 2px;
}
.roster-overlay { display: flex; flex-direction: column; gap: .5rem; }
.routehover {
  position: absolute; right: 1rem; top: 1rem; z-index: 6;
  background: rgba(14,38,28,.96); border: 2px solid #7ee2a8; box-shadow: 0 0 18px rgba(126,226,168,.5), 0 6px 16px rgba(0,0,0,.45);
  padding: .7rem 1rem; font-size: .95rem; pointer-events: none;
  animation: routehover-pop .18s ease-out;
}
.routehover.hidden { display: none; }
.momentbanner {
  position: absolute; left: 50%; bottom: 1.2rem; z-index: 86; transform: translateX(-50%);          /* above the roster overlay (85), below popup windows (90) */
  width: max-content; max-width: min(640px, calc(100% - 2rem));
  display: flex; align-items: center; gap: .6rem;
  background: linear-gradient(135deg, rgba(40,28,8,.96), rgba(23,17,6,.96)); border: 2px solid var(--amber);
  box-shadow: 0 0 26px rgba(255,176,32,.55), 0 10px 30px rgba(0,0,0,.55);
  padding: .8rem 1.4rem; pointer-events: none;
  animation: moment-in .4s cubic-bezier(.2,.9,.3,1.3);
}
.momentbanner.hidden { display: none; }
.momentbanner.leaving { animation: moment-out .4s ease-in forwards; }
.momenticon { font-size: 1.4rem; line-height: 1; }
.momenttext { font: 700 1.1rem var(--head); letter-spacing: .02em; color: var(--amber); line-height: 1.25; }   /* wraps inside the banner's max width, so long messages can't run off the map */
@keyframes moment-in { from { transform: translateX(-50%) translateY(24px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes moment-out { from { transform: translateX(-50%) translateY(0); opacity: 1; } to { transform: translateX(-50%) translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .momentbanner, .momentbanner.leaving { animation: none; }
}
.routehover b { color: #7ee2a8; font-size: 1rem; }
@keyframes routehover-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.toppartsbank { display: flex; align-items: center; margin-left: -1.5rem; }
.toppartsbank svg { display: block; }
.rchip {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; flex: none; padding: .5rem .8rem;
  background: rgba(17,27,38,.92); border: 1px solid var(--line); font-size: .9rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .4s ease;
}
.rchip i { width: .85rem; height: .85rem; border-radius: 50%; background: var(--c); flex: none; }
.rchip span { font: 600 .9rem var(--head); }
.rchip b { margin-left: .3rem; font: 700 .9rem var(--mono); color: var(--text); }
.rchip.active { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.rchip.out { opacity: .45; }
.rchip.out span { text-decoration: line-through; }
.rchip-toggle { cursor: pointer; }
.rchip-toggle:hover { border-color: var(--amber); }
.chip-chevron { margin-left: auto; color: var(--muted); font-size: .75rem; }
.rchip-toggle:hover .chip-chevron { color: var(--amber); }
.pboard { display: flex; flex-direction: column; transition: transform .4s ease; }
.pboard.active .fleet-table { border-color: var(--amber); }
.fleet-table {
  border-collapse: collapse; background: rgba(17,27,38,.92); border: 1px solid var(--line); border-top: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); font-size: .85rem; min-width: 230px;
}
.fleet-table th {
  background: var(--panel-2); color: var(--muted); font: 600 .68rem var(--head); text-transform: uppercase;
  letter-spacing: .06em; padding: .35rem .45rem; text-align: left; border-bottom: 1px solid var(--line);
}
.fleet-table td { padding: .35rem .45rem; border-bottom: 1px solid var(--line); color: var(--text); font: 600 .85rem var(--mono); }
.fleet-table td.route-cell { white-space: nowrap; }
.fleet-table td.route-cell.none { color: var(--muted); }
.fleet-table tr:last-child td { border-bottom: none; }
.fleet-icon { font-size: 1rem; }
.fleet-table td.pos { color: #7ee2a8; }
.fleet-table td.neg { color: #e5484d; }
.fleet-table tr.fleet-active { background: rgba(255,176,32,.14); }
.fleet-table tr.fleet-active td { color: var(--amber); font-weight: 700; }
.fleet-table tr.fleet-active td.pos { color: #7ee2a8; }
.fleet-table tr.fleet-active td.neg { color: #e5484d; }
.fleet-table tr.fleet-clickable { cursor: pointer; }
.fleet-table tr.fleet-clickable:hover { background: rgba(255,255,255,.06); }
.fleet-table tr.fleet-clickable.fleet-active:hover { background: rgba(255,176,32,.22); }
.fleet-table td.status-clickable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.fleet-table td.status-clickable:hover { color: var(--amber); }
.od-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.od-slot {
  display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: var(--panel);
  border: 1px solid var(--line); font-size: .85rem; white-space: nowrap;
}
.od-label { color: var(--muted); font: 600 .78rem var(--head); text-transform: uppercase; letter-spacing: .08em; }
.od-value { font: 700 .85rem var(--mono); color: var(--text); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-select {
  background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer;
  padding: .1rem .3rem; max-width: 170px; font-size: .85rem;
}
.od-select:disabled { color: var(--muted); cursor: not-allowed; opacity: .7; }
.od-select:not(:disabled):hover { border-color: var(--amber); }
.od-btn {
  padding: .55rem 1rem; font: 600 .8rem var(--body); border: 1px solid var(--line); cursor: pointer;
  background: var(--panel); color: var(--text); white-space: nowrap;
}
.od-btn:disabled { opacity: .35; cursor: not-allowed; }
.od-confirm:not(:disabled) { background: var(--amber); color: #1a1200; border-color: var(--amber); }
.od-clear:not(:disabled):hover { border-color: #e5484d; color: #e5484d; }

/* Layout: map viewport + sidebar */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.viewport { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: .4rem; gap: .5rem; }
.mapwrap { position: relative; flex: 1; min-height: 0; min-width: 0; }
#globeViz {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, #12202e, #0a1017 75%);
  border: 1px solid #3a5670;
}
#globeViz canvas { border-radius: 0; }
.globeError {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 2rem; text-align: center; color: var(--muted); font: 600 1rem/1.6 var(--body);
}
.tutorialbox {
  display: flex; align-items: baseline; gap: .55rem; flex: 1; min-width: 0; overflow: hidden;
  padding: .55rem 1rem; background: rgba(14,38,28,.96); border: 2px solid #7ee2a8;
  box-shadow: 0 0 18px rgba(126,226,168,.5), 0 6px 16px rgba(0,0,0,.45);
}
.tutorial-label { flex: none; font: 700 .78rem var(--head); letter-spacing: .04em; text-transform: uppercase; color: #7ee2a8; white-space: nowrap; }
.tutorial-viewport { flex: 1; min-width: 0; overflow: hidden; }
#tutorialText { display: inline-block; margin: 0; font-size: .85rem; line-height: 1.25; color: var(--text); white-space: nowrap; }
#tutorialText.marquee { animation: tutorial-marquee 9s ease-in-out infinite; }
@keyframes tutorial-marquee {
  0%, 12% { transform: translateX(0); }
  50%, 62% { transform: translateX(calc(-1 * var(--overflow-px, 0px))); }
  100% { transform: translateX(0); }
}
.hint { margin: 0; color: var(--muted); font-size: .9rem; }

/* Right sidebar */
.sidebar {
  display: flex; flex-direction: column; gap: .75rem; min-height: 0;
  padding: 1rem; background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto;
}
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.controls .wide { grid-column: 1 / -1; }
.controls button {
  padding: .55rem .7rem; font: 600 .9rem var(--body); text-align: left;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
}
.controls button[data-act="buy"], .controls button[data-act="repair"] { padding-top: .3rem; padding-bottom: .3rem; }
.controls button.act-green { background: #1f7a45; border-color: #2a9959; color: #eafff2; }
.controls button.act-red { background: #9c2b2b; border-color: #c23b3b; color: #ffefef; }
.controls button.act-green:hover:not(:disabled), .controls button.act-red:hover:not(:disabled) { border-color: var(--amber); }
.controls button:hover:not(:disabled) { border-color: var(--amber); }
.controls button.on { border-color: var(--amber); color: var(--amber); }
.controls button.primary { background: var(--amber); color: #1a1200; border-color: var(--amber); }
.controls button:disabled { opacity: .35; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.logtitle { margin: .5rem 0 0; font: 600 1.1rem var(--head); color: var(--muted); }
.log {
  flex: 1; min-height: 140px; margin: 0; padding: 0; overflow-y: auto; list-style: none;
  background: var(--bg); border: 1px solid var(--line); font-size: .85rem;
}
.log li { padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.log li.bad { color: #ff8a80; }
.log li.good { color: #7ee2a8; }

/* Target selection panel */
.targetbox, .spinbox { display: grid; gap: .5rem; padding: .75rem; background: var(--bg); border: 1px solid var(--line); }
.targetbox .logtitle, .spinbox .logtitle { margin: 0; }
.targetbody { font-size: .9rem; color: var(--muted); min-height: 4.5rem; }
.targetbody.empty { min-height: 0; }
.targetbody .cityname { display: block; margin-bottom: .2rem; font: 700 1.3rem var(--head); color: var(--text); letter-spacing: .04em; }
.targetbody .row { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; border-bottom: 1px solid var(--line); }
.targetbody .row b { color: var(--text); font-weight: 600; text-align: right; }
.targetbody .mro { color: #ff8a3d; }
.tier-short { color: #e5484d; }
.tier-medium { color: #9aa7b2; }
.tier-long { color: #3fb970; }
#flyBtn {
  padding: .6rem .8rem; font: 600 .95rem var(--body); text-align: left;
  color: #1a1200; background: var(--amber); border: 1px solid var(--amber); cursor: pointer;
}
#flyBtn:disabled { opacity: .35; cursor: not-allowed; }
#flyAllBtn {
  padding: .6rem .8rem; font: 600 .95rem var(--body); text-align: left;
  color: var(--amber); background: transparent; border: 1px solid var(--amber); cursor: pointer;
}
#flyAllBtn:hover:not(:disabled) { background: rgba(255,176,32,.12); }
#flyAllBtn:disabled { opacity: .35; cursor: not-allowed; }

/* Event spinner */
.spinrow { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; align-items: center; }
.wheelbox { position: relative; width: 160px; height: 160px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.55)); }
.wheel {
  width: 100%; height: 100%; border-radius: 50%; border: 3px solid #dbe5ee; position: relative;
  box-shadow:
    inset 0 5px 11px rgba(255,255,255,.24),
    inset 0 -7px 15px rgba(0,0,0,.55),
    inset 7px 0 13px rgba(0,0,0,.22),
    inset -7px 0 13px rgba(255,255,255,.08),
    0 0 0 3px #16222e,
    0 0 0 7px #3a5670,
    0 8px 18px rgba(0,0,0,.5);
  transition: transform 3.2s cubic-bezier(.12, .6, .15, 1);
}
.wheel::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.38), rgba(255,255,255,.08) 32%, transparent 58%);
}
.hub {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #5a7186, #0a1017 72%); border: 2px solid #5a7186;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.65), 0 2px 5px rgba(0,0,0,.55);
}
.pointer {
  position: absolute; left: 50%; top: -13px; margin-left: -10px; z-index: 2; width: 20px; height: 17px;
  background: linear-gradient(160deg, #ffe19b, var(--amber) 55%, #b8790a);
  clip-path: polygon(50% 100%, 0 0, 100% 0); border-radius: 2px 2px 0 0;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.7));
}
.legend { margin: 0; padding: 0; list-style: none; font-size: .72rem; display: grid; gap: .2rem; }
.legend li { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.legend i { flex: none; width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid #dbe5ee; }
.legend b { margin-left: auto; color: var(--muted); font-weight: 600; }
.spinresult { font: 600 1rem var(--head); color: var(--amber); letter-spacing: .03em; }
.spinresult.empty { display: none; }

.fleetswitcher { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.fleet-tab { padding: .35rem .6rem; font: 600 .78rem var(--body); background: var(--panel); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.fleet-tab.on { border-color: var(--amber); color: var(--amber); }
.fleet-tab:hover:not(.on) { border-color: var(--text); color: var(--text); }


/* MEL / AD flashcard */
.cardmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(4, 8, 12, .8); }
.cardwrap { display: grid; gap: 1rem; justify-items: center; }
.flipcard {
  position: relative; width: min(360px, 88vw); height: min(470px, 62vh);
  transform-style: preserve-3d; transition: transform .7s; cursor: pointer;
  perspective: none;
}
.flipcard.flipped { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; overflow: hidden;
  background: #f4f6f7; color: #14202b; border: 3px solid #dbe5ee; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.face.back { transform: rotateY(180deg); }
.band { padding: .8rem 1rem; font: 700 1.25rem var(--head); letter-spacing: .12em; text-align: center; }
.cardbody { flex: 1; padding: 1.1rem 1.2rem; overflow-y: auto; }
.cardbody h3 { margin: .3rem 0 .6rem; font: 700 1.9rem/1.1 var(--head); }
.cardbody p { margin: 0 0 .7rem; }
.cardbody .ata { font: 600 .95rem var(--body); color: #4b5d6b; }
.cardbody .cardid { font: 600 .85rem var(--mono); color: #6b7d8a; }
.cardbody .flipnote { margin-top: 1.2rem; font-size: .8rem; color: #6b7d8a; }
.cardbody dt { font: 700 .95rem var(--head); letter-spacing: .1em; color: #4b5d6b; margin-top: .9rem; }
.cardbody dd { margin: .15rem 0 0; }
.cardbtns { display: flex; gap: .75rem; }
.cardbtns button { padding: .6rem 1.4rem; font: 600 1rem var(--body); color: var(--text); background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; }
.cardbtns button:hover { border-color: var(--amber); }
.cardbtns button.primary { background: var(--amber); color: #1a1200; border-color: var(--amber); }

/* Victory screen */
.vicwrap {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  width: min(420px, 90vw); max-height: 90vh; overflow-y: auto; padding: 2rem 1.5rem;
  background: var(--panel); border: 1px solid var(--amber); box-shadow: 0 20px 60px rgba(0,0,0,.7);
  text-align: center;
}
.vicchip { width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,176,32,.25); }
#vicTitle { margin: 0; font: 700 2.2rem var(--head); letter-spacing: .04em; color: var(--amber); }
.vicreason { margin: 0; color: var(--text); }
.vicstandings { width: 100%; display: grid; gap: .4rem; margin: .5rem 0; }
.vicrow { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: var(--panel-2); border: 1px solid var(--line); font-size: .9rem; }
.vicrow i { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.vicrow b { margin-left: auto; font-family: var(--mono); }
.vicrow.out { opacity: .5; }
.vicrow.out span { text-decoration: line-through; }

/* New turn announcement: a lighter-weight cousin of the victory card */
.turnwrap {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  width: min(360px, 90vw); padding: 2rem 1.5rem;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.7);
  text-align: center;
}
.turnchip { width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
#turnTitle { margin: 0; font: 700 1.9rem var(--head); letter-spacing: .04em; color: var(--text); }
.turnsub { margin: 0; color: var(--muted); font-size: .9rem; }
#helpModal { z-index: 110; }
.fulldesc-link { margin-top: .4rem; font-size: .85rem; color: var(--muted); }
.fulldesc-link a { color: var(--amber); text-decoration: underline; cursor: pointer; }
.fulldesc-link a:hover { color: #ffc44d; }
.fulldescwrap { width: min(640px, 92vw); text-align: left; max-height: 85vh; }
.readaloud-btn {
  align-self: center; padding: .5rem 1.1rem; font: 700 .85rem var(--head); letter-spacing: .05em;
  color: var(--amber); background: transparent; border: 1px solid var(--amber); cursor: pointer;
  transition: background .15s, color .15s;
}
.readaloud-btn:hover { background: var(--amber); color: #1a1200; }
.readaloud-btn.reading { color: #1a1200; background: var(--amber); }
.fulldesc-body { overflow-y: auto; max-height: 65vh; padding-right: .5rem; color: var(--text); font-size: .9rem; line-height: 1.5; }
.fulldesc-body h3 { margin: 1.1rem 0 .3rem; font: 700 1rem var(--head); color: var(--amber); }
.fulldesc-body h3:first-child { margin-top: 0; }
.fulldesc-body p { margin: 0 0 .5rem; }
.fulldesc-body ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.fulldesc-body li { margin-bottom: .3rem; }
.tradewrap { width: min(380px, 90vw); text-align: left; }
.tradewrap h2 { margin: 0 0 .3rem; font: 700 1.5rem var(--head); color: var(--text); text-align: center; }
.tradefield { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.tradefield label { font: 600 .78rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tradefield select, .tradefield input {
  padding: .5rem .6rem; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font: 600 .95rem var(--mono);
}
.tradeerror { margin: 0; color: #e5484d; font-size: .85rem; text-align: center; }
.tradenote { margin: 0; color: var(--amber); font-size: .78rem; }
.tradenote2 { margin: 0; color: var(--muted); font-size: .85rem; text-align: center; }
.tradebtns { display: flex; gap: .6rem; width: 100%; }
.tradebtns .start-btn { flex: 1; padding: .7rem; font-size: .95rem; }
.tradebtns .od-btn { flex: none; }


@media (max-width: 900px) {
  body { overflow: auto; }
  .topbar { flex-wrap: wrap; gap: .8rem 1.5rem; }
  .layout { grid-template-columns: 1fr; }
  .mapwrap { min-height: 260px; }
  .tutorialbox { max-width: min(280px, 70vw); }
  #tutorialText { font-size: .75rem; }
}
/* A shorter effective viewport - typically a smaller, higher-DPI screen at higher Windows display scaling -
   fits meaningfully less vertical content than its physical size on screen might suggest. This compacts the
   sidebar's spacing and shrinks the event wheel so everything stays visible without needing to scroll. */
@media (max-height: 1100px) {
  .sidebar { padding: .55rem; gap: .4rem; }
  .controls { gap: .3rem; }
  .controls button { padding: .35rem .55rem; font-size: .8rem; }
  .logtitle { margin: .2rem 0 0; font-size: .95rem; }
  .targetbox, .spinbox { padding: .45rem; gap: .3rem; }
  .targetbody { min-height: 2.6rem; font-size: .83rem; }
  .targetbody .cityname { font-size: 1.05rem; }
  #flyBtn { padding: .4rem .65rem; }
  .spinrow { grid-template-columns: 105px 1fr; gap: .9rem; }
  .wheelbox { width: 105px; height: 105px; }
  .hub { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .legend { font-size: .7rem; }
  .spinresult { font-size: .85rem; }
  .log { min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome, .app, .start-btn, .wheel, .flipcard { transition: none; }
  #tutorialText.marquee { animation: none; transform: none; }
  .tutorial-viewport { text-overflow: ellipsis; }
}

/* Trends & projection window */
.trendwrap { display: flex; flex-direction: column; gap: .8rem; width: min(960px, 96vw); max-height: 94vh; overflow: auto; padding: 1.1rem 1.4rem 1.2rem;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.7); text-align: left; }
.trendwrap > * { flex-shrink: 0; }                                  /* let the window scroll as a whole instead of squashing the table */
.trendhead { display: flex; justify-content: space-between; align-items: center; }
.trendhead h2 { margin: 0; font: 700 1.6rem var(--head); letter-spacing: .02em; color: var(--text); }
.trendx { width: 2rem; height: 2rem; padding: 0; font-size: 1rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.trendx:hover { color: var(--text); border-color: var(--amber); }
.trendverdict { margin: 0; font-size: 1rem; line-height: 1.5; }
.trendverdict b { color: var(--amber); font-weight: 600; }
.trendchart svg { display: block; width: 100%; height: auto; background: var(--panel-2); border: 1px solid var(--line); }
.tc-grid { stroke: #24384b; stroke-width: 1; }
.tc-axis { fill: #7e93a6; font: 11px var(--body); }
.tc-win { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 3 4; }
.tc-wintext { fill: var(--amber); font: 600 11px var(--body); }
.tc-now { stroke: #7e93a6; stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.trendlegend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; color: var(--muted); }
.trendlegend span { display: inline-flex; align-items: center; gap: .4rem; }
.trendlegend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.trendlegend .tl-key i { border-radius: 2px; width: 1.6rem; }
.trendtablewrap { overflow-x: auto; }
.trendtable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.trendtable th { padding: .35rem .45rem; text-align: left; font: 600 .72rem var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.trendtable td { padding: .45rem .45rem; border-bottom: 1px solid #1a2a3a; vertical-align: top; }
.trendtable small { display: block; color: var(--muted); font-size: .72rem; }
.trendtable td:first-child { white-space: nowrap; }
.trendtable .tt-me td { background: rgba(255, 176, 32, .07); }
.trendtable .tt-out td { color: var(--muted); }
.trendtable .tt-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .45rem; border-radius: 50%; }
.trendtable .pos { color: #5fd38d; } .trendtable .neg { color: #ff7a6b; }
.trendtable em { color: var(--muted); font-style: normal; font-size: .75rem; }
.trendtip { margin: 0; padding: .6rem .8rem; font-size: .9rem; background: var(--panel-2); border-left: 3px solid var(--amber); }
.trendnote { margin: 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }
.trendwrap .tradebtns { justify-content: flex-end; }
.trendwrap .tradebtns .start-btn { flex: none; padding: .55rem 2rem; }

.diversion-text { text-align: left; white-space: pre-line; color: var(--text); font-size: .95rem; line-height: 1.5; }
#diversionModal .tradewrap { width: min(440px, 92vw); }

/* Difficulty: welcome-screen note and the badge beside the event spinner heading */
.difficulty-note { max-width: 15rem; margin: -.2rem 0 0; text-align: center; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.diffbadge { margin-left: .5rem; padding: .1rem .5rem; font: 700 .72rem var(--head); letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px; vertical-align: middle; }
.diffbadge[data-level="easy"] { color: #5fd38d; } .diffbadge[data-level="medium"] { color: #ffb020; } .diffbadge[data-level="hard"] { color: #ff7a6b; }

/* Searchable origin / destination pickers (the native selects stay in the page, hidden) */
.picker-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.picker { position: relative; }
.picker-btn { min-width: 11rem; max-width: 15rem; padding: .15rem 1.5rem .15rem .4rem; text-align: left; font: 700 .85rem var(--mono); color: var(--text); background: var(--panel); border: 1px solid var(--line);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.picker-btn::after { content: '\25BE'; position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.picker-btn.placeholder { color: var(--muted); }
.picker-btn:not(:disabled):hover, .picker-btn[aria-expanded="true"] { border-color: var(--amber); }
.picker-btn:disabled { opacity: .55; cursor: not-allowed; }
.picker-panel { position: fixed; z-index: 95; width: max-content; min-width: 16rem; max-width: min(440px, 92vw); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--amber); box-shadow: 0 14px 40px rgba(0,0,0,.65); }
.picker-panel.hidden { display: none; }
.picker-search { margin: .5rem; padding: .5rem .65rem; font: 600 .9rem var(--body); color: var(--text); background: var(--bg); border: 1px solid var(--line); outline: none; }
.picker-search:focus { border-color: var(--amber); }
.picker-list { overflow-y: auto; padding-bottom: .35rem; }
.picker-group { position: sticky; top: 0; padding: .3rem .75rem; font: 700 .72rem var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: #0d1620; border-bottom: 1px solid var(--line); }
.picker-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .42rem .75rem; cursor: pointer; font-size: .88rem; }
.picker-row.active { background: rgba(255,176,32,.16); }
.picker-row .pr-name { font-weight: 600; color: var(--text); }
.picker-row .pr-meta { font: 600 .76rem var(--mono); color: #7ee2a8; white-space: nowrap; }
.picker-row.pricey .pr-meta { color: #ff9b6b; }
.picker-row.owned .pr-meta { color: var(--amber); }
.picker-row.disabled { cursor: not-allowed; opacity: .5; }
.picker-row.disabled .pr-meta { color: var(--muted); }
.picker-empty { padding: .9rem .75rem; color: var(--muted); font-size: .85rem; }

/* Route revenue report (click a route in the fleet table) */
.fleet-table td.route-clickable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.fleet-table td.route-clickable:hover { color: var(--amber); }
.routewrap { width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; text-align: left; }
.routewrap h2 small { display: block; font: 500 .8rem var(--mono); color: var(--muted); letter-spacing: 0; margin-top: .15rem; }
.routewrap h3 { margin: 1rem 0 .3rem; font: 700 .95rem var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.ri-meta { margin: .5rem 0 .7rem; font-size: .85rem; color: var(--muted); }
.ri-meta b { color: var(--text); }
.ri-bar { height: .7rem; border-radius: .4rem; background: var(--line); overflow: hidden; }
.ri-bar i { display: block; height: 100%; border-radius: .4rem; }
.ri-big { margin-top: .4rem; font: 700 2rem var(--head); }
.ri-big span { font: 500 .85rem var(--body, inherit); color: var(--muted); margin-left: .5rem; }
.ri-verdict { margin: .5rem 0; padding: .5rem .7rem; border-radius: .4rem; font-weight: 600; font-size: .9rem; }
.ri-verdict.good { background: rgba(63,185,112,.15); color: #7ee2a8; }
.ri-verdict.bad { background: rgba(255,201,51,.12); color: var(--amber); }
.ri-dirs { width: 100%; border-collapse: collapse; margin-top: .4rem; font: 600 .8rem var(--mono); }
.ri-dirs th { text-align: left; color: var(--muted); font-weight: 600; padding: .25rem .3rem; border-bottom: 1px solid var(--line); }
.ri-dirs td { padding: .3rem; border-bottom: 1px solid var(--line); }
.ri-list { list-style: none; margin: 0; padding: 0; }
.ri-list li { padding: .45rem .6rem .45rem 1.6rem; margin: .25rem 0; position: relative; font-size: .88rem; line-height: 1.45; border-radius: .35rem; background: rgba(255,255,255,.03); }
.ri-list li::before { position: absolute; left: .5rem; top: .45rem; }
.ri-list li.ok::before { content: '\2713'; color: #7ee2a8; }
.ri-list li.warn::before { content: '!'; color: #ffc933; font-weight: 800; }
.ri-list li.info::before { content: 'i'; color: var(--muted); font-style: italic; }
.ri-list li.todo { background: rgba(255,201,51,.08); }
.ri-list li.todo::before { content: '\2192'; color: var(--amber); }
.ri-sub { color: var(--muted); font-size: .82rem; }
.routewrap .tradebtns { margin-top: 1rem; }
.routewrap .tradebtns .start-btn { flex: none; padding: .55rem 2rem; }

/* Long MEL descriptions: first paragraph on the card, the rest behind a Read more toggle */
.cardmore.hidden { display: none; }
.cardmorebtn { margin: 0 0 .7rem; padding: .2rem .6rem; font: 600 .8rem var(--body); color: #4b5d6b; background: transparent; border: 1px solid #9aa7b2; border-radius: 3px; cursor: pointer; }
.cardmorebtn:hover { color: #111; border-color: #111; }

/* Two separate audio switches at the far right of the top bar: sound effects and the spoken voice */
.topaudio { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: .5rem; }
.topaudio .mute-btn { margin-left: 0; }
.topaudio::after { content: attr(data-cap); font: 600 .7rem var(--head); letter-spacing: .06em; color: var(--text); line-height: 1; }
.voice-btn { position: relative; }
.voice-btn.off { color: var(--muted); opacity: .6; }
.voice-btn.off::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: #e5484d; transform: rotate(-45deg); }
.voice-btn.key { border-color: var(--amber); }

/* Voice setting menu (opens under the Voice button) */
.voice-menu { position: fixed; z-index: 96; width: 17rem; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--amber); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.voice-menu.hidden { display: none; }
.voice-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .55rem .8rem; text-align: left; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; }
.voice-menu button:last-child { border-bottom: 0; }
.voice-menu button b { font: 700 .9rem var(--head); letter-spacing: .04em; }
.voice-menu button span { font-size: .78rem; color: var(--muted); }
.voice-menu button:hover { background: rgba(255,176,32,.14); }
.voice-menu button.on { background: rgba(255,176,32,.2); }
.voice-menu button.on b::before { content: '\2713  '; color: var(--amber); }

/* ---------- STAR deals ---------- */
#starModal .starwrap { width: min(460px, 94vw); }
.starwho { margin: 0 0 .5rem; text-align: center; color: var(--muted); font-size: .85rem; }
.starbody { text-align: left; }
.stardealicon { margin: 0 0 .2rem; text-align: center; font-size: 2.2rem; line-height: 1; }
.starbody dl { margin: .4rem 0 .6rem; display: grid; grid-template-columns: 5.5rem 1fr; gap: .35rem .6rem; font-size: .92rem; }
.starbody dt { color: var(--muted); }
.starbody dd { margin: 0; color: var(--text); line-height: 1.4; }
.starest { margin: .3rem 0; font-size: .9rem; color: var(--text); }
.starest b { color: #ffc933; }
.starrule { margin: .2rem 0 .6rem; font-size: .8rem; color: var(--muted); }
.starchips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .3rem; }
.starchips .od-btn { padding: .3rem .7rem; font-size: .8rem; }
#starErr { min-height: 1.2em; margin: .2rem 0 .4rem; }
.dealstrip { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 .1rem; }
.dealtag { padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; color: #ffc933; background: rgba(255, 201, 51, .12); border: 1px solid rgba(255, 201, 51, .4); white-space: nowrap; }

.credits-line { margin: .6rem 0 0; font-size: .72rem; color: var(--muted); text-align: center; }
.credits-line a { color: inherit; text-decoration: underline; }

.starbreak { margin: .1rem 0 .3rem; font-size: .8rem; color: var(--muted); min-height: 1.1em; }

/* Fuel (Hard only) */
.topfuel { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: 1rem; }
.topfuel .mute-btn { margin-left: 0; }
.fuelchip { font: 700 .72rem var(--head); letter-spacing: .04em; color: var(--text); line-height: 1; }
.fuelchip.up { color: #ff6b5b; } .fuelchip.down { color: #5bd68a; }
.fuelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 760px) { .fuelgrid { grid-template-columns: 1fr; } }
.fuelbox { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.fuelbox h3, #fuelBody > h3 { margin: .2rem 0; font: 700 1.05rem var(--head); letter-spacing: .04em; color: var(--text); }
.fuelbig { font: 700 1.9rem var(--head); color: var(--text); } .fuelbig small { font-size: .85rem; color: var(--muted); font-weight: 500; }
.fuelsub { font-size: .85rem; color: var(--muted); margin: 0; } .fuelsub.pos, .fueltable .pos { color: #5bd68a; } .fuelsub.neg, .fueltable .neg { color: #ff6b5b; }
.fuelspark { width: 100%; height: auto; }
.fuelbtns { display: flex; flex-wrap: wrap; gap: .4rem; } .fuelbtns .start-btn { flex: 1 1 auto; padding: .45rem .7rem; font-size: .8rem; }
.fuelbtns .start-btn:disabled { opacity: .4; cursor: not-allowed; }
.fueltable { width: 100%; margin-bottom: .6rem; } .fueltable td, .fueltable th { text-align: left; }
.fueltag { background: rgba(242,169,0,.15); }

/* Help window */
.helpbtn { font: 800 1.3rem var(--head); color: var(--amber); }
.helpwrap { width: min(860px, 96vw); }
.helptabs { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.helptab { flex: 1 1 auto; padding: .5rem 1rem; font: 700 .95rem var(--head); letter-spacing: .05em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.helptab:hover { color: var(--text); border-color: var(--amber); }
.helptab.on { color: #1a1200; background: var(--amber); border-color: var(--amber); }
.helpbody h3 { margin: 1rem 0 .3rem; font: 700 1.1rem var(--head); letter-spacing: .04em; color: var(--text); }
.helpbody p, .helpbody li { color: var(--text); line-height: 1.5; font-size: .93rem; }
.helpbody ul, .helpbody ol { padding-left: 1.3rem; margin: .3rem 0; }
.helpodds { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.04); font-size: .85rem !important; }
.helpscen { margin: .5rem 0; padding: .6rem .8rem; border-left: 3px solid var(--amber); background: rgba(242,169,0,.07); border-radius: 0 8px 8px 0; font-size: .92rem; line-height: 1.5; }
.helptable { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .9rem; }
.helptable th, .helptable td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.helptable th { color: var(--muted); font-weight: 600; } .helptable small { font-weight: 400; }
.helptable .pos { color: #5bd68a; }
.helpnote { font-size: .85rem !important; color: var(--muted) !important; }
.helpread { margin: 0 .6rem 0 auto; }
.helpwrap .trendhead { gap: .4rem; }
.helpbody a { color: var(--amber); } .helpbody a:hover { color: #ffc44d; }
@media (max-width: 1400px) { .topbar { gap: 1.5rem; } .stat { gap: .4rem; } .topcashchart, .toppartsbank, .topfuel, .toptrend { flex-shrink: 0; } .toptrend { margin-left: 0; } }
@media (max-width: 1100px) { .topbar { gap: .9rem; padding-left: .8rem; padding-right: .8rem; } }

/* account line and Medium/Hard gate on the title screen */
.acct-line { max-width: 15rem; margin: 0;  font-size: .9rem; color: #8fa3b8; text-align: center; }
.acct-line a { color: #ffb020; }
.gate-msg { max-width: 15rem; margin: -.2rem 0 0; text-align: center; padding: .6rem .8rem; border: 1px solid #ffb020; border-radius: 10px; background: rgba(255,176,32,.08); color: #ffe2a8; font-size: .9rem; line-height: 1.35; }
.gate-msg a { color: #ffb020; }
.gate-msg.hidden { display: none; }