/* The globe (screens/globe.js): a flight-deck read-out over a dark Earth.
   Always dark, in either theme — it is the planet from space at night, and the
   overlays are written for it. One amber, hairlines, upper-case mono labels
   over tabular figures. */
.gl-box{--gl-ink:#f4f6fa;--gl-dim:#7d889c;--gl-faint:#4b5569;--gl-line:rgba(255,255,255,.09);
  --gl-card:rgba(255,255,255,.035);--gl-amber:#ffb020;
  --gl-sans:-apple-system,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,system-ui,sans-serif;
  --gl-mono:"SF Mono","Geist Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  position:relative;border-radius:18px;overflow:hidden;min-height:460px;isolation:isolate;
  background:#04060b;color:var(--gl-ink);font-family:var(--gl-sans)}
.gl-canvas{position:absolute;inset:0;z-index:0}
.gl-canvas canvas{display:block}
/* A vertical swipe scrolls the page. The orbit controls write touch-action:none
   onto their element, and the library lays its own layers over the canvas — so
   the whole globe, every layer of it, is told pan-y, over their inline styles. */
.gl-canvas,.gl-canvas *{touch-action:pan-y!important}
.gl-load{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;
  color:var(--gl-dim);font-size:14px;line-height:1.6}

.gl-head{position:absolute;top:0;left:0;right:0;z-index:1;padding:16px 16px 40px;pointer-events:none;
  background:linear-gradient(#04060bf2 55%,#04060b00)}
.gl-eye{font:600 10.5px/1.3 var(--gl-mono);letter-spacing:.2em;color:var(--gl-amber);text-transform:uppercase}
.gl-big{font-size:25px;font-weight:600;letter-spacing:-.01em;margin:7px 0 2px;line-height:1.15}
.gl-big em{font-style:normal;color:var(--gl-amber);font-variant-numeric:tabular-nums}
.gl-sub{font:500 12px/1.4 var(--gl-mono);color:var(--gl-dim);letter-spacing:.02em}

/* the three figures, in one card */
.gl-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;background:var(--gl-card);
  border:1px solid var(--gl-line);border-radius:14px;max-width:420px}
.gl-grid div{padding:9px 12px 10px;min-width:0}
.gl-grid div + div{border-inline-start:1px solid var(--gl-line)}
.gl-grid span{display:block;font:600 9.5px/1.2 var(--gl-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gl-dim)}
.gl-grid b{display:block;margin-top:5px;font:600 18px/1.1 var(--gl-mono);font-variant-numeric:tabular-nums;color:var(--gl-ink)}

/* the route, as flown — a ticker that fades out at both edges */
.gl-tick{margin-top:10px;max-width:420px;overflow:hidden;font:500 12px/1.9 var(--gl-mono);letter-spacing:.06em;color:var(--gl-ink);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}
.gl-tick-in{display:flex;width:max-content;padding-inline:15%}
.gl-tick-in span{white-space:nowrap;padding-inline-end:28px}
.gl-tick i{font-style:normal;color:var(--gl-faint);margin:0 8px}
.gl-tick.run .gl-tick-in{padding-inline:0;animation:gl-tick calc(var(--n) * 2.4s) linear infinite}
@keyframes gl-tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.gl-tick.run .gl-tick-in{animation:none}}

.gl-share{position:absolute;z-index:2;top:13px;inset-inline-end:13px;font:600 11px/1 var(--gl-mono);letter-spacing:.12em;
  text-transform:uppercase;color:#1c1300;background:var(--gl-amber);border:0;border-radius:999px;padding:9px 13px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .08s,filter .08s}
.gl-share:active{transform:scale(.95);filter:brightness(.88)}
/* The share button sits over the head's first line; that line keeps clear of it.
   Unconditional, not :has(): the button is there in both views. Scoped to the
   globe screen: unscoped it also squeezed the Home card's eyebrow to a word a line. */
.gl-box .gl-eye{padding-inline-end:170px}

.gl-foot{position:absolute;left:12px;right:12px;bottom:64px;z-index:1;pointer-events:none}
.gl-foot > *{pointer-events:auto}
.gl-next{max-width:440px;margin:0 auto;background:rgba(10,14,22,.86);border:1px solid var(--gl-line);border-radius:16px;
  padding:12px 14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px}
.gl-k{font:600 9.5px/1.3 var(--gl-mono);letter-spacing:.18em;color:var(--gl-amber);text-transform:uppercase}
.gl-r{font:600 21px/1.2 var(--gl-mono);margin-top:4px;letter-spacing:.04em}
.gl-w{color:var(--gl-dim);margin-top:2px;font-size:12.5px}
.gl-light{margin-top:8px;color:#ffe3a3;font-weight:500;line-height:1.5}
.gl-fly{display:flex;align-items:center;gap:10px;margin-top:10px}
.gl-fly span{font:500 12px var(--gl-mono);font-variant-numeric:tabular-nums;color:var(--gl-ink);min-width:52px}
.gl-fly input{flex:1;accent-color:var(--gl-amber);height:28px}
.gl-key{font:500 10.5px var(--gl-mono);letter-spacing:.06em;color:var(--gl-dim);margin-top:8px;text-align:center}
.gl-key i{display:inline-block;width:16px;height:2px;border-radius:2px;vertical-align:middle;margin:0 6px 0 12px}
.gl-foot > .gl-key{background:rgba(10,14,22,.7);border:1px solid var(--gl-line);border-radius:999px;padding:5px 12px;width:max-content;margin:0 auto}
.gl-plane{pointer-events:none}
.gl-plane span{display:block;line-height:0;color:#fff;filter:drop-shadow(0 0 6px rgba(255,176,32,.8))}

.gl-seg{position:absolute;z-index:2;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(10,14,22,.86);border:1px solid var(--gl-line);border-radius:999px;padding:4px;display:flex;gap:3px}
.gl-seg button{font:600 10.5px/1 var(--gl-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gl-dim);
  background:none;border:0;border-radius:999px;padding:9px 14px;cursor:pointer}
.gl-seg button.on{background:var(--gl-amber);color:#1c1300}

/* the share sheet (screens/globereel.js), inside the app's modal */
.gl-sheet{display:flex;flex-direction:column;gap:12px}
.gl-sh{font-size:17px;font-weight:700}
.gl-per{align-self:center;max-width:100%;overflow-x:auto;scrollbar-width:none}
.gl-stage{aspect-ratio:9/16;max-height:58vh;margin:0 auto;width:100%;max-width:calc(58vh * 9 / 16);
  border-radius:14px;overflow:hidden;background:#04060b;display:grid;place-items:center}
.gl-reel{width:100%;height:100%;object-fit:contain;display:block}
.gl-hint{color:var(--dim);font-size:13px;line-height:1.55;text-align:center;padding:14px}
.gl-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.gl-acts .rosbtn{flex:1;min-width:130px;text-align:center}
@media (max-width:560px){.gl-big{font-size:21px}.gl-r{font-size:18px}.gl-grid b{font-size:16px}}