: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-wrap {
  position: relative; z-index: 1; flex: 0 1 auto; min-width: 0;
  height: calc(100% + 55px); max-height: calc(100% + 55px); aspect-ratio: 1199 / 896; max-width: 70vw;
  perspective: 1100px;
}
/* The picture has its own soft edges (cover_soft.webp), so it blends into the black on all four sides. It tilts a few degrees toward the pointer. */
.cover-wrap .cover {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .35s ease-out; will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .cover-wrap .cover { transition: none; transform: none !important; } }
.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; text-decoration: none; }
a.brand:hover { text-decoration: underline; }
.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(--c, var(--amber)); box-shadow: 0 0 0 1px var(--c, var(--amber)) inset, 0 0 12px -4px var(--c, var(--amber)); }   /* the player whose turn it is is outlined in their own color */
.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(--c, 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); background: color-mix(in srgb, var(--c, #ffb020) 16%, transparent); }
.fleet-table tr.fleet-active td { color: var(--amber); color: color-mix(in srgb, var(--c, #ffb020) 85%, #fff); 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); background: color-mix(in srgb, var(--c, #ffb020) 26%, transparent); }
.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%; position: relative; }   /* the wheel itself is an SVG drawn by drawWheel() */
.wheel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel .wsl, .wheel .wsym { transition: opacity .25s; }
.wheel .wsym { font-family: "Segoe UI", system-ui, sans-serif; pointer-events: none; }
.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));
  transform-origin: 50% 0;                                              /* it kicks back each time a peg passes (spinWheel) */
}
.legend li { transition: opacity .25s, transform .25s; }
.legend li.dim { opacity: .4; }
.legend li.hit { transform: translateX(3px); font-weight: 700; }
.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: .6rem; font-size: 1.15rem; line-height: 1.5; color: var(--text); }
.fulldesc-link a { color: var(--amber); font-weight: 700; 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"], .diffbadge[data-level="quick"] { 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 { display: flex; overflow-y: auto; padding: 1rem 0 4rem; }                       /* tall card on a phone: scroll instead of cutting it off */
#starModal.hidden { display: none; }
#starModal .starwrap { width: min(460px, 94vw); margin: auto; }
.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: 1600px) { .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; }

/* Title screen on narrow screens (phones, tablets held upright): stack the cover, the controls and the intro text in one column and let the page scroll,
   instead of squeezing three columns side by side. */
@media (max-width: 900px) {
  .welcome { overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; }
  .welcome-layout { flex-direction: column; justify-content: flex-start; height: auto; min-height: 100vh; min-height: 100dvh; gap: 1.1rem; padding: 1rem 1rem 2.5rem; }
  .cover-wrap { order: 1; height: auto; max-height: none; width: min(100%, 30rem); max-width: 100%; }
  .welcome-controls { order: 2; width: 100%; }
  .welcome-about { order: 3; flex: none; width: min(100%, 30rem); text-align: center; }
  .welcome-about p { margin-bottom: .8rem; }
}

/* Game board on narrow screens (phones, folded foldables, tablets held upright): let the page grow and scroll
   instead of locking everything to the screen height, give the globe its own block, and un-squeeze the top bar. */
@media (max-width: 900px) {
  html, body { height: auto; min-height: 100%; }
  .app { height: auto; min-height: 100dvh; }
  .topbar { gap: .6rem 1rem; padding: .5rem .8rem; }
  .topcashchart, .toppartsbank { flex: none; margin-left: 0; }
  .toppartsbank { margin-left: .2rem; }
  .toptrend { margin-right: 0; margin-left: .2rem; }
  .roster { flex-wrap: wrap; padding: .6rem .8rem; gap: .6rem; }
  .od-bar { width: 100%; }
  .od-slot { flex: 1 1 100%; min-width: 0; }
  .od-select, .od-value { max-width: none; flex: 1; min-width: 0; }
  .tutorialbox { flex: 1 1 100%; max-width: none; }
  #tutorialText { font-size: .8rem; }
  .layout { display: block; }
  .viewport { padding: .4rem; }
  .mapwrap { display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
  .map-overlay-left { position: static; max-width: none; max-height: none; overflow: visible; }
  #globeViz { position: relative; inset: auto; height: min(100vw, 460px); min-height: 280px; }
  .routehover { top: auto; bottom: .5rem; right: .5rem; max-width: 70%; }
  .momentbanner { position: fixed; bottom: 4.5rem; }                       /* phone: stay in the visible part of the screen however far the page is scrolled */
  .sidebar { border-left: none; border-top: 1px solid var(--line); overflow: visible; }
  .controls button { padding: .6rem .7rem; font-size: .9rem; }
  .log { min-height: 160px; max-height: 260px; }
}
@media (max-width: 420px) {
  .brand { font-size: 1rem; }
  .topbar { gap: .5rem .7rem; }
  .fleet-table { min-width: 0; width: 100%; }
  .rchip { padding: .4rem .6rem; }
}

/* ---- help guide figures: top bar buttons and the online steps ---- */
.helpkeys { display: flex; flex-wrap: wrap; gap: .7rem; margin: .6rem 0; padding: .7rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.helpkey { display: flex; flex-direction: column; align-items: center; width: 6.4rem; text-align: center; font-size: .78rem; line-height: 1.3; color: var(--muted); }
.helpkey i { font-style: normal; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .35rem; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-size: 1.2rem; color: var(--text); }
.helpkey.q i { color: var(--amber); font: 800 1.3rem var(--head); border-color: var(--amber); }
.helpsteps { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0; }
.helpstep { flex: 1 1 9rem; padding: .6rem .7rem; font-size: .85rem; line-height: 1.4; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.helpstep > b:first-child { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-bottom: .3rem; border-radius: 50%; background: var(--amber); color: #111; font: 800 .95rem var(--head); }
.helpstep > b:not(:first-child) { color: var(--amber); }

/* welcome page: online window (open rooms, what you missed, rankings) */
.boardbox { margin-top: 1rem; border: 1px solid var(--line, #24384b); border-radius: 10px; background: rgba(10,16,23,.72); padding: .7rem .8rem; font-size: .88rem; }
.boardbox .bb-head { font-weight: 700; color: var(--amber); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .45rem; }
.boardbox .bb-tabs { display: flex; gap: .3rem; margin-bottom: .5rem; flex-wrap: wrap; }
.boardbox .bb-tabs button { background: transparent; color: inherit; border: 1px solid var(--line, #24384b); border-radius: 6px; padding: .25rem .55rem; cursor: pointer; font: inherit; }
.boardbox .bb-tabs button[aria-selected="true"] { border-color: var(--amber); color: var(--amber); }
.boardbox .bb-list { max-height: 11rem; overflow-y: auto; }
.boardbox .bb-row { display: flex; flex-direction: column; gap: .1rem; padding: .35rem 0; border-top: 1px solid rgba(255,255,255,.08); color: inherit; text-decoration: none; }
.boardbox .bb-row:first-child { border-top: 0; }
.boardbox a.bb-row:hover b { color: var(--amber); }
.boardbox .bb-row span { opacity: .7; font-size: .82rem; }
.boardbox .bb-empty { opacity: .7; margin: .3rem 0; }
.boardbox .bb-go { display: inline-block; margin-top: .5rem; color: var(--amber); }
.boardbox .bb-nudge { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; background: rgba(255,176,32,.1); border-radius: 6px; padding: .4rem .5rem; margin-bottom: .5rem; }
.boardbox .bb-mini { background: var(--amber); color: #1a1200; border: 0; border-radius: 6px; padding: .2rem .55rem; font: 700 .8rem inherit; cursor: pointer; }
.boardbox .bb-mini.ghost { background: transparent; color: inherit; border: 1px solid var(--line, #24384b); font-weight: 400; }

/* welcome page on a computer: everything fits one screen. The right column has a fixed width (so the online window can never squeeze the cover art) and is compact. */
@media (min-width: 901px) {
  .welcome-controls { width: 22rem; max-width: 30vw; gap: clamp(.35rem, 1.2vh, .7rem); }
  .welcome-controls .acct-line { margin: 0; font-size: .85rem; }
  .welcome-controls .modehead { font-size: .95rem; }
  .welcome-controls .modehead small { font-size: .74rem; }
  .welcome-controls .playerselect { font-size: .88rem; }
  .welcome-controls .difficulty-note { font-size: .72rem; line-height: 1.3; margin: 0; max-width: 100%; }
  .welcome-controls .name-input { padding: .3rem .6rem; font-size: .85rem; }
  .welcome-controls .start-btn { padding: .45rem 1rem; font-size: .95rem; min-width: 0; width: 100%; box-sizing: border-box; }
  .welcome-controls .modeor { margin: 0; font-size: .75rem; }
  .welcome-controls .boardbox { width: 100%; box-sizing: border-box; margin-top: .2rem; padding: .5rem .6rem; font-size: .8rem; }
  .welcome-controls .boardbox .bb-head { margin-bottom: .3rem; font-size: .8rem; }
  .welcome-controls .boardbox .bb-tabs { margin-bottom: .3rem; }
  .welcome-controls .boardbox .bb-tabs button { padding: .15rem .4rem; }
  .welcome-controls .boardbox .bb-nudge { padding: .25rem .4rem; margin-bottom: .3rem; }
  .welcome-controls .boardbox .bb-list { max-height: 5.5rem; }
  .welcome-controls .boardbox .bb-go { display: none; }
  .welcome-controls .credits-line { margin: 0; font-size: .66rem; }
}

/* welcome page: the two ways to play get equal weight */
.modehead { margin: 0; text-align: center; font: 700 1.05rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.modehead small { display: block; margin-top: .15rem; font: 400 .8rem var(--body); letter-spacing: 0; text-transform: none; color: var(--muted, #7e93a6); }
.modeor { margin: .2rem 0 0; text-align: center; color: var(--muted, #7e93a6); font: 600 .85rem var(--body); text-transform: uppercase; letter-spacing: .2em; }
a.start-btn { display: inline-block; text-decoration: none; }
.welcome-controls .start-btn { min-width: 16rem; }

.howbox { margin-top: 1rem; }
.howbox .fulldesc-link { margin: 0; }
.howbox .fulldesc-link + .fulldesc-link { margin-top: .35rem; }
.howbox .fulldesc-link { font-size: 1.05rem; overflow-wrap: anywhere; }


/* Victory screen: the summary button sits above Play again as a quieter secondary choice */
#summaryBtn { display: block; width: 100%; font-size: 1rem; letter-spacing: .12em; margin: 0 0 .6rem; background: transparent; color: var(--amber, #f5a623); border: 2px solid var(--amber, #f5a623); box-shadow: none; }
#summaryBtn:hover { background: rgba(245,166,35,.15); transform: none; box-shadow: none; }
#playAgainBtn { display: block; width: 100%; }

/* home: How to play + guided tour side by side */
.howrow { display: flex; gap: .7rem; flex-wrap: wrap; align-items: stretch; margin-top: 1rem; }
.howrow .howbox { flex: 1 1 11rem; margin-top: 0; }

/* home: tournament announcement bar */
.tourney-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .5rem 2.4rem .5rem 1rem; background: linear-gradient(90deg, rgba(245,166,35,.18), rgba(245,166,35,.08)), #0b141d; border-bottom: 1px solid var(--amber, #f5a623); color: var(--text, #e8eef5); font-size: .95rem; line-height: 1.3; text-align: center; flex-wrap: wrap; }
.tourney-bar[hidden] { display: none; }
.tourney-bar .tb-tag { font: 700 .72rem var(--head, inherit); letter-spacing: .14em; text-transform: uppercase; color: #111b26; background: var(--amber, #f5a623); padding: .15rem .5rem; border-radius: 3px; white-space: nowrap; }
.tourney-bar .tb-close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--muted, #9fb0c3); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .2rem .5rem; }
.tourney-bar .tb-close:hover { color: var(--text, #fff); }

/* home: about-the-game PDF links */
.about-links { margin: .9rem 0 .3rem; font-size: .9rem; text-align: center; color: var(--muted, #9fb0c3); }
.about-links a { color: var(--amber, #f5a623); font-weight: 600; white-space: nowrap; }

/* ---------- Wheel result flash ---------- */
.resultflash { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; text-align: center; max-width: min(34rem, 92vw);
  padding: 1.1rem 1.6rem 1.2rem; border-radius: 10px; background: color-mix(in srgb, var(--rf, #ffb020) 88%, #000); color: var(--rfink, #fff);
  box-shadow: 0 0 0 3px #0008, 0 0 60px color-mix(in srgb, var(--rf, #ffb020) 70%, transparent), 0 14px 40px #000a; }
.resultflash.hidden { display: none; }
.rf-head { font: 800 clamp(1.5rem, 5vw, 2.6rem) var(--head); letter-spacing: .06em; line-height: 1.05; text-transform: uppercase; }
.rf-line { margin-top: .5rem; font: 600 clamp(.95rem, 2.6vw, 1.15rem) var(--body); line-height: 1.35; opacity: .95; }
.resultflash[data-kind="bad"] { border: 2px solid #fff6; }
.resultflash.rf-in { animation: rf-pop .42s cubic-bezier(.2, 1.4, .4, 1) both; }
.resultflash.rf-out { animation: rf-away .5s ease-in both; }
@keyframes rf-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes rf-away { to { opacity: 0; transform: translate(-50%, -62%) scale(.96); } }
body.rf-shake { animation: rf-shake .6s linear; }
@keyframes rf-shake { 0%, 100% { transform: translate(0); } 10% { transform: translate(-7px, 3px); } 20% { transform: translate(6px, -4px); } 30% { transform: translate(-5px, -3px); } 40% { transform: translate(5px, 4px); } 55% { transform: translate(-3px, 2px); } 70% { transform: translate(3px, -2px); } 85% { transform: translate(-1px, 1px); } }
@media (prefers-reduced-motion: reduce) { .resultflash.rf-in, .resultflash.rf-out { animation: none; } body.rf-shake { animation: none; } }

/* laptops: smaller text on the left, tighter right column */
@media (min-width: 901px) {
  .welcome-about { font-size: .8rem; line-height: 1.45; flex-basis: 15rem; }
  .welcome-about p { margin-bottom: .6rem; }
  .welcome-about .fulldesc-link { font-size: .95rem; margin-top: .35rem; line-height: 1.35; }
  .welcome-about .boardbox { padding: .5rem .7rem; }
  .welcome-about .howrow { gap: .5rem; }
  .welcome-controls .difficulty-note { font-size: .7rem; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .welcome-about { font-size: .74rem; }
  .welcome-about .fulldesc-link { font-size: .85rem; }
  .welcome-controls .start-btn { padding: .35rem 1rem; font-size: .88rem; letter-spacing: .15em; }
  .welcome-controls .modehead small { display: none; }
}

/* more breathing room at the sides of the home page on computers */
@media (min-width: 901px) {
  .welcome-layout { padding: 1.2rem clamp(1.5rem, 4.5vw, 6rem) .4rem; gap: clamp(1rem, 2.5vw, 2.5rem); }
}

/* use the free space: wider left column, one-line saved-game warning */
@media (min-width: 901px) {
  .welcome-about { flex: 0 0 17rem; width: 17rem; font-size: .85rem; }
  .welcome-about .howrow { flex-direction: column; gap: .5rem; }
  .welcome-about .howrow .howbox { flex: none; width: 100%; box-sizing: border-box; }
  .welcome-about .bb-head { white-space: nowrap; font-size: .8rem; letter-spacing: .08em; }
  .welcome-controls .resumenote { margin: 0; font-size: .68rem; white-space: nowrap; max-width: none; }
}

/* the About / credits lines now sit in the left column on computers */
@media (min-width: 901px) {
  .welcome-about .about-links { margin: 1.1rem 0 .4rem; font-size: .85rem; text-align: left; }
  .welcome-about .credits-line { margin: 0; font-size: .66rem; text-align: left; line-height: 1.5; }
}

/* Invite a friend */
.invitelink { align-self: center; margin: .3rem 0 0; text-align: center; perspective: 600px; }
.invitelink a {
  display: inline-block; box-sizing: border-box; padding: .22rem 1.1rem; border-radius: 999px;
  font: 700 .85rem var(--head); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #4aa8ff 0%, #1f6fe0 55%, #1656b8 100%);
  border: 1px solid #7cc0ff; border-bottom-color: #0d3d85;
  box-shadow: 0 3px 0 #0d3d85, 0 5px 10px rgba(31,111,224,.45), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.4); cursor: pointer;
  transform: translateY(0) rotateX(0deg); transition: transform .15s ease, box-shadow .15s ease;
  animation: invGlow 2.4s ease-in-out infinite;
}
.invitelink a:hover { transform: translateY(-2px) rotateX(8deg); color: #fff; box-shadow: 0 4px 0 #0d3d85, 0 7px 12px rgba(31,111,224,.6), inset 0 1px 0 rgba(255,255,255,.5); }
.invitelink a:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d3d85, 0 2px 5px rgba(31,111,224,.4), inset 0 1px 0 rgba(255,255,255,.3); }
@keyframes invGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@media (prefers-reduced-motion: reduce) { .invitelink a { animation: none; transition: none; } }
#inviteBtn { background: linear-gradient(180deg, #4aa8ff, #1656b8); border-color: #7cc0ff; box-shadow: 0 0 0 0 rgba(74,168,255,.6); animation: invPulse 2.4s ease-out infinite; }
@keyframes invPulse { 0% { box-shadow: 0 0 0 0 rgba(74,168,255,.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(74,168,255,0); } }
@media (prefers-reduced-motion: reduce) { #inviteBtn { animation: none; } }
#inviteWinBtn { display: block; width: 100%; }
#inviteWinBtn { font-size: 1rem; letter-spacing: .12em; margin: 0 0 .6rem; background: transparent; color: var(--amber, #f5a623); border: 2px solid var(--amber, #f5a623); box-shadow: none; }
#inviteWinBtn:hover { background: rgba(245,166,35,.15); transform: none; box-shadow: none; }

/* Logo */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-logo { width: 1.9rem; height: 1.9rem; flex: none; }
.home-brand { margin: 0 0 1.2rem; }
.home-brand img { display: block; width: min(100%, 17.5rem); height: auto; }
@media (max-width: 760px) { .brand-logo { width: 1.6rem; height: 1.6rem; } .home-brand img { margin: 0 auto; width: min(80%, 15rem); } }

/* ---------- Live bidding (10-second round after sealed STAR bids and aircraft offers) ---------- */
#liveModal { z-index: 95; }
#liveModal .livewrap { width: min(470px, 94vw); text-align: center; }
#liveModal .livetitle { margin-bottom: .2rem; }
#liveModal .livesub { color: var(--muted, #9aa7b2); font-size: .85rem; margin: 0 0 .7rem; }
#liveModal .liveclock { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 .6rem; width: 100%; align-self: stretch; box-sizing: border-box; }
#liveModal .livebar { flex: 1 1 auto; min-width: 120px; height: 10px; border-radius: 6px; background: #1d2a38; overflow: hidden; }
#liveModal .livebar i { display: block; height: 100%; width: 100%; background: var(--amber); transition: width .1s linear; }
#liveModal .livesecs { font: 800 2.2rem/1 system-ui, sans-serif; color: var(--amber); min-width: 2.6ch; text-align: right; font-variant-numeric: tabular-nums; }
#liveModal .liveclock.urgent .livebar i { background: #e5484d; }
#liveModal .liveclock.urgent .livesecs { color: #e5484d; animation: livepulse .5s ease-in-out infinite alternate; }
@keyframes livepulse { from { transform: scale(1); } to { transform: scale(1.12); } }
#liveModal .livelabel { margin: .2rem 0 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #9aa7b2); }
#liveModal .livehigh { margin: .05rem 0 0; font: 800 2.4rem/1.1 system-ui, sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
#liveModal .livehigh.bump { animation: livebump .45s ease-out; }
@keyframes livebump { 0% { transform: scale(1.25); color: var(--amber); } 100% { transform: scale(1); } }
#liveModal .liveleader { margin: 0 0 .7rem; font-weight: 700; min-height: 1.2em; }
#liveModal .liverows { display: grid; gap: .45rem; margin-bottom: .5rem; }
#liveModal .liverow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }
#liveModal .livename { font-weight: 700; padding-left: .45rem; border-left: 4px solid; min-width: 5.5em; text-align: left; }
#liveModal .livebtn { padding: .45rem .8rem; font-weight: 700; }
#liveModal .livebtn:not(:disabled):hover { background: var(--amber); color: #1a1200; }
#liveModal .livecash { font-size: .78rem; color: var(--muted, #9aa7b2); min-width: 6.5em; text-align: left; }
#liveModal .livewatch { color: var(--muted, #9aa7b2); font-size: .85rem; margin: .2rem 0; }
#liveModal .liveticker { list-style: none; margin: .2rem 0 .4rem; padding: 0; max-height: 6.2rem; overflow: hidden; font-size: .82rem; color: var(--muted, #9aa7b2); }
#liveModal .liveticker li:first-child { color: var(--text); font-weight: 700; }
#liveModal .livenote { font-size: .72rem; color: var(--muted, #9aa7b2); margin: .3rem 0 0; }
#liveModal .livebadge { display: inline-block; margin: 0 0 .35rem; padding: .25rem .75rem; border-radius: 999px; background: var(--amber); color: #1a1200; font: 800 .78rem/1.2 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
#liveModal.liveintro .livebadge { animation: livepulse .5s ease-in-out infinite alternate; }
#liveModal.liveintro .livesecs { color: var(--text); }
#liveModal .livestatus { margin: 0 0 .6rem; padding: .55rem .7rem; border-radius: 8px; font: 800 1.05rem/1.25 system-ui, sans-serif; background: #1d2a38; color: var(--text); }
#liveModal .livestatus.lead { background: #12351f; color: #7ee2a8; border: 1px solid #2f8a52; }
#liveModal .livestatus.out { background: #3a1416; color: #ff8a8d; border: 1px solid #b33a3e; animation: liveshake .35s ease-in-out 2; }
#liveModal .livestatus.behind { background: #2c2410; color: #ffd27a; border: 1px solid #8a6a1f; }
#liveModal .livestatus.hidden { display: none; }
@keyframes liveshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
#liveModal .livetag { font-size: .78rem; font-weight: 800; min-width: 4.5em; text-align: left; }
#liveModal .livetag.lead { color: #7ee2a8; }
#liveModal .livetag.out { color: #ff8a8d; }

/* Cash and Parts gauges: clickable, with a detail window */
.topcashchart, .toppartsbank { cursor: pointer; border-radius: 8px; padding: 2px 4px; transition: background .15s; }
.topcashchart:hover, .toppartsbank:hover, .topcashchart:focus-visible, .toppartsbank:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.gaugewrap { width: min(680px, 96vw); }
.gm-sub { margin: 0; color: var(--muted); font-size: .9rem; }
.gm-mut { color: var(--muted); }
.gm-bars { display: flex; flex-direction: column; gap: .4rem; }
.gm-bar { display: flex; align-items: center; gap: .6rem; font-size: .8rem; }
.gm-bar > span { width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-bar > div { flex: 1; height: 10px; background: #24384b; border-radius: 5px; position: relative; }
.gm-bar > div i { display: block; height: 100%; border-radius: 5px; min-width: 4px; }
.gm-bar > div b { position: absolute; left: 50%; top: -3px; width: 1px; height: 16px; background: #55697e; }
.gm-bar em { font: 600 .72rem var(--mono); color: var(--muted); font-style: normal; }
.gm-note { margin: 0; background: var(--panel-2); border-radius: 8px; padding: .55rem .7rem; font-size: .88rem; line-height: 1.45; }
.gm-tag { display: inline-block; font: 700 .7rem var(--head); letter-spacing: .06em; background: var(--amber); color: #1a1200; border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
.gm-links { display: flex; }
@media (max-width: 900px) { .topcashchart svg, .toppartsbank svg { width: 72px; height: 39px; } }   /* phones and small tablets: the gauges at their old size */

/* live bidding: a late bid put the clock back to 10 seconds */
.liveclock.liveext .livesecs { animation: liveext .9s ease; }
.liveclock.liveext .livebar i { animation: liveextbar .9s ease; }
@keyframes liveext { 0% { transform: scale(1); color: inherit; } 30% { transform: scale(1.45); color: #7ee2a8; } 100% { transform: scale(1); } }
@keyframes liveextbar { 0%, 40% { box-shadow: 0 0 10px 2px #7ee2a8; } 100% { box-shadow: none; } }

/* Event spinner: the title sits above the legend (right column), so it never covers the wheel's pointer */
.spinside { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.spinbox .spintitle { margin: 0; white-space: nowrap; }
.spinbox .spinrow { padding-top: 12px; }                      /* room for the pointer above the wheel */

/* Status board under the wheel: an airport split-flap display */
.flapboard { display: flex; align-items: center; gap: .55rem; background: #05080c; border: 1px solid #1d2b39; border-radius: 6px; padding: .4rem .55rem; font: inherit; color: inherit; letter-spacing: 0; }
.flapboard .fb-k { font: 600 .72rem var(--head); letter-spacing: .1em; color: var(--muted); }
.flapboard .fb-dot { width: 12px; height: 12px; border-radius: 50%; background: #2b3d50; flex: none; transition: background .2s, box-shadow .2s; }
.flapboard .fb-dot.dark { border: 1px solid #9aa7b4; }
.flapboard .fb-flaps { display: flex; gap: 2px; }
.flapboard .fb-c { position: relative; width: 17px; height: 25px; background: #141c25; border-radius: 3px; color: #f2f2f2; font: 700 15px var(--mono);
  display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 -1px 0 #000; }
.flapboard .fb-c::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000; opacity: .8; }
.flapboard .fb-c { perspective: 80px; }
.flapboard .fb-ch { position: relative; z-index: 1; }
.flapboard .fb-leaf { position: absolute; left: 0; right: 0; top: 0; height: 50%; overflow: hidden; z-index: 2; background: #1a2430; border-radius: 3px 3px 0 0;
  display: flex; justify-content: center; align-items: flex-start; line-height: 25px; color: #f2f2f2; transform-origin: 50% 100%; animation: fbleaf 60ms ease-in forwards; }
@keyframes fbleaf { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }   /* the top half falls toward the viewer */
@media (max-width: 900px) { .flapboard .fb-c { width: 12px; height: 19px; font-size: 11px; } .flapboard .fb-leaf { line-height: 19px; } .flapboard { gap: .4rem; padding: .3rem .4rem; } }
@media (prefers-reduced-motion: reduce) { .flapboard .fb-leaf { display: none; } }
/* a quieter second button next to Close (the Trends window's Progress report) */
.start-btn.ghost-btn { background: transparent; color: var(--amber); border: 1px solid var(--amber); }
.start-btn.ghost-btn:hover { background: rgba(255,176,32,.12); }