/* ============================================== THE TECH ATLAS: MAP ====
   A galaxy of sectors drawn in WebGL (atlas-map-scene.js), each one a helmet in
   its own colour. The map sits in a framed window in the page, with a full
   screen button. Everything you read or press is HTML on top: the controls,
   the keyboard targets, the minimap, the vignette and the player card. Every
   colour encodes something: a sector, a kind of relationship, or an OVR tier. */

:root{
  --m-space:#151C2A;
  --m-space-mid:#1C2638;
  --m-space-lift:#27344B;
  --m-panel:#1D2638;
  --m-card-w:min(390px, 40%);
  --m-frame:rgba(226,233,243,.42);
  --m-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* one colour per sector, light enough to read on the dark ground */
.c-silicon{ --c:#A6DB8C; } .c-infra{ --c:#E9B47E; } .c-cloud{ --c:#84D2E3; }
.c-models{ --c:#BCA6F4; } .c-software{ --c:#93B2F6; } .c-security{ --c:#EDA3DA; }
.c-internet{ --c:#F4A9A0; } .c-devices{ --c:#E6DB8C; } .c-fintech{ --c:#8EDCC4; }
.c-backers{ --c:#C9D2DF; }

/* nothing the page scrolls to should land under the sticky control bar */
html{ scroll-padding-top:calc(var(--atlas-bar, 0px) + 8px); }

/* a framed window about 80% of the page wide and 70% of the screen high */
.amap{ width:min(80vw, 1560px); margin:clamp(22px,3vw,36px) auto clamp(30px,4vw,48px); position:relative; z-index:1; }

.amap__stage{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden;
  height:min(70vh, calc(100svh - var(--atlas-bar, 110px) - 40px)); min-height:480px; max-height:920px;
  scroll-margin-top:calc(var(--atlas-bar, 110px) + 16px);
  border:1px solid var(--m-frame); border-radius:3px;
  box-shadow:0 0 0 1px rgba(226,233,243,.05), 0 0 34px rgba(160,190,230,.16), 0 18px 60px rgba(8,12,20,.45);
  background:radial-gradient(ellipse 80% 70% at 50% 42%, var(--m-space-lift) 0%, var(--m-space-mid) 48%, var(--m-space) 100%);
}
/* full screen: the Fullscreen API, or a fixed overlay where there is none */
.amap__stage:fullscreen{ height:100vh; max-height:none; border:0; border-radius:0; }
.amap.is-full .amap__stage{ position:fixed; inset:0; z-index:200; height:100dvh; max-height:none; border:0; border-radius:0; }
.amap-locked, .amap-locked body{ overflow:hidden; }
.amap__view{ position:relative; min-width:0; min-height:0; overflow:hidden; }
.amap__canvas{ position:absolute; inset:0; touch-action:none; cursor:grab; -webkit-tap-highlight-color:transparent; }
.amap__canvas.is-dragging{ cursor:grabbing; }
.amap__canvas canvas{ display:block; width:100%; height:100%; }

/* the spotlight's vignette: clear on the company, dim and slightly blurred beyond it */
.amap__spot{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(circle var(--sr, 300px) at var(--sx, 50%) var(--sy, 50%), transparent 0%, transparent 58%, rgba(10,14,22,.42) 100%);
  -webkit-backdrop-filter:blur(1.6px); backdrop-filter:blur(1.6px);
  -webkit-mask:radial-gradient(circle var(--sr, 300px) at var(--sx, 50%) var(--sy, 50%), transparent 52%, #000 100%);
  mask:radial-gradient(circle var(--sr, 300px) at var(--sx, 50%) var(--sy, 50%), transparent 52%, #000 100%);
}
.amap__spot[hidden]{ display:none; }
/* faint film grain over the whole sky */
.amap__grain{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* one transparent button over each planet or company, for the keyboard */
.amap__keys{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.amap__key{
  position:absolute; left:0; top:0; padding:0; margin:0; border:0; border-radius:50%;
  background:transparent; color:transparent; pointer-events:none; opacity:0;
}
.amap__key:focus-visible{ opacity:1; outline:2px solid var(--silver); outline-offset:3px; }

/* the heads-up layer over the map */
.amap__hud{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:10px 12px; pointer-events:none; z-index:3; }
.amap__hud > *{ pointer-events:auto; }
.amap__crumbs{ display:flex; align-items:center; gap:12px; min-width:0; }
.amap__where{ font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--silver); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 8px var(--m-space); }
.amap__tools{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.amap__back,.amap__tool{
  font-family:var(--m-sans); font-size:14px; line-height:1; min-width:36px; min-height:36px; padding:7px 12px;
  color:var(--silver); background:rgba(15,21,34,.82); border:1px solid rgba(226,233,243,.3); border-radius:3px; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .2s ease, background .2s ease;
}
.amap__tool{ font-size:17px; }
.amap__tool--wide{ font-size:13.5px; letter-spacing:.02em; }
.amap__back:hover,.amap__tool:hover,.amap__tool[aria-expanded="true"],.amap__tool[aria-pressed="true"]{ border-color:rgba(226,233,243,.62); background:rgba(39,52,75,.94); }
.amap__back:focus-visible,.amap__tool:focus-visible,.amap__mini:focus-visible{ outline:2px solid var(--silver); outline-offset:2px; }

.amap__filters,.amap__teams{
  position:absolute; top:56px; right:12px; z-index:4; width:min(290px, calc(100% - 24px)); max-height:calc(100% - 72px); overflow:auto;
  padding:12px 14px 14px; background:rgba(26,34,50,.96); border:1px solid rgba(226,233,243,.3); border-radius:3px;
  box-shadow:0 12px 40px rgba(8,12,20,.5);
}
.amap__teams[hidden],.amap__filters[hidden]{ display:none; }
.amap__fk{ font-family:var(--m-sans); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-faint); margin-bottom:6px; }
.amap__teams ul{ list-style:none; margin:0; padding:0; }
.amap__teams button{
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:10px; width:100%; text-align:left;
  padding:8px 10px; margin:0 0 4px; font:inherit; color:var(--silver); background:transparent; border:1px solid transparent; border-radius:3px; cursor:pointer;
}
.amap__teams button:hover{ border-color:rgba(226,233,243,.3); }
.amap__teams button[aria-pressed="true"]{ border-color:var(--silver); background:rgba(39,52,75,.9); }
.amap__teams button:focus-visible{ outline:2px solid var(--silver); outline-offset:1px; }
.amap__tn{ font-size:17px; }
.amap__tc{ grid-column:1; font-family:var(--m-sans); font-size:12px; color:var(--silver-faint); }
.amap__teams b{ grid-column:2; grid-row:1 / 3; align-self:center; font-size:26px; font-weight:500; }
.amap__teams a{ color:var(--silver-dim); }
.amap__filters fieldset{ border:0; margin:0 0 10px; padding:0; }
.amap__filters legend{ padding:0; margin-bottom:6px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-faint); }
.amap__filters label{ display:flex; align-items:center; gap:8px; padding:3px 0; font-family:var(--m-sans); font-size:14px; color:var(--silver); cursor:pointer; }
.amap__filters input{ accent-color:var(--silver); }
.amap__fnote{ font-family:var(--m-sans); font-size:12.5px; line-height:1.45; color:var(--silver-faint); margin-top:8px; }
.sw{ width:11px; height:11px; border-radius:50%; background:var(--c); flex:none; }
.sw--silicon{ --c:#A6DB8C; } .sw--infra{ --c:#E9B47E; } .sw--cloud{ --c:#84D2E3; }
.sw--models{ --c:#BCA6F4; } .sw--software{ --c:#93B2F6; } .sw--security{ --c:#EDA3DA; }
.sw--internet{ --c:#F4A9A0; } .sw--devices{ --c:#E6DB8C; } .sw--fintech{ --c:#8EDCC4; }

/* legend keys: line kinds and ring kinds */
.amap__legend{
  position:absolute; left:12px; bottom:10px; z-index:2; display:flex; flex-wrap:wrap; gap:4px 14px; max-width:calc(100% - 210px);
  padding:6px 10px; font-family:var(--m-sans); font-size:12.5px; color:var(--silver); pointer-events:none;
  background:rgba(15,21,34,.7); border:1px solid rgba(226,233,243,.16); border-radius:3px;
}
.amap__legend span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.lk{ display:inline-block; width:22px; height:0; border-top:2px solid var(--a-ally); }
.lk--rivals{ border-top:2px dashed var(--a-rival); }
.lk--backers{ border-top:2px solid var(--a-own); position:relative; }
.lk--backers::after{ content:""; position:absolute; right:-2px; top:-5px; border:4px solid transparent; border-left:6px solid var(--a-own); }
.ring{ display:inline-block; width:11px; height:11px; border-radius:50%; border:1.6px solid var(--silver-dim); flex:none; }
.ring--second{ border-style:dashed; }
.ring--rookie{ border-style:dotted; border-width:2px; }

/* the minimap, bottom right */
.amap__mini{
  position:absolute; right:10px; bottom:10px; z-index:2; width:168px; height:116px; cursor:pointer;
  background:rgba(15,21,34,.8); border:1px solid rgba(226,233,243,.26); border-radius:3px;
}

/* the first-visit hint and the hover tooltip */
.amap__hint{
  position:absolute; left:50%; bottom:52px; z-index:3; transform:translateX(-50%); padding:7px 14px;
  font-family:var(--m-sans); font-size:13.5px; letter-spacing:.02em; color:var(--silver); white-space:nowrap;
  background:rgba(15,21,34,.88); border:1px solid rgba(226,233,243,.3); border-radius:3px; pointer-events:none;
}
.amap__hint[hidden]{ display:none; }
/* the galaxy's labels need the corners of a small frame, so the minimap steps aside; with two columns the
   legend does too and the hint drops to the edge */
.amap.tight-galaxy .amap__mini{ display:none; }
.amap.narrow-galaxy .amap__legend{ display:none; }
.amap.narrow-galaxy .amap__hint{ bottom:8px; }
.amap__tip{
  position:absolute; left:0; top:0; z-index:4; max-width:300px; padding:8px 11px;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:13px; line-height:1.45; color:var(--silver);
  background:rgba(21,28,42,.95); border:1px solid var(--silver-faint); pointer-events:none;
}
.amap__tip[hidden]{ display:none; }

.amap__msg{ position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; font-style:italic; font-size:17px; color:var(--silver-dim); z-index:1; pointer-events:none; }
.amap__msg[hidden]{ display:none; }
.amap.is-failed .amap__stage{ height:auto; min-height:0; }
.amap.is-failed .amap__msg{ position:static; }
.amap.is-failed .amap__hud,.amap.is-failed .amap__legend,.amap.is-failed .amap__mini{ display:none; }

/* ------------------------------------------------- the player card */
.pcard{
  position:absolute; z-index:5; top:56px; right:12px; bottom:12px; width:var(--m-card-w); min-width:0;
  overflow-y:auto; overscroll-behavior:contain; padding:18px 20px 26px;
  background:rgba(26,34,50,.95); border:1px solid rgba(226,233,243,.3); border-radius:3px;
  box-shadow:0 16px 50px rgba(8,12,20,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.amap.has-card .amap__mini,.amap.has-card .amap__hint{ display:none; }
.pc__logo{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; overflow:hidden; background:#EEF2F7; box-shadow:0 0 0 1px rgba(226,233,243,.5); }
.pc__logo--dark{ background:#0F1522; }
.pc__logo img{ width:64%; height:64%; object-fit:contain; }
.pc__profile{ display:inline-block; margin:8px 14px 0 0; font-family:var(--m-sans); font-size:14px; color:var(--silver) !important; }
.pcard[hidden]{ display:none; }
.pc__more{ display:none; }
.pc__close{
  position:absolute; top:8px; right:10px; width:34px; height:34px; font:inherit; font-size:24px; line-height:1;
  color:var(--silver); background:transparent; border:1px solid transparent; cursor:pointer;
}
.pc__close:hover{ border-color:var(--a-line); }
.pc__close:focus-visible{ outline:2px solid var(--silver); }
.pc__head{ display:flex; gap:16px; align-items:center; padding-right:34px; }
.pc__ovr{
  flex:none; display:flex; flex-direction:column; align-items:center; min-width:92px; padding:8px 10px 9px;
  color:var(--tier); border:1px solid var(--tier);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tier) 18%, transparent), transparent 85%);
}
.pc__num{ font-size:60px; line-height:.86; font-weight:600; }
.pc__k{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; margin-top:4px; }
.pc__tier{ font-size:13px; letter-spacing:.04em; color:var(--silver); margin-top:2px; white-space:nowrap; }
.pc__draft{ margin-top:6px; padding:1px 7px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--silver); border:1px dashed var(--silver-dim); }
.pc__id{ display:flex; gap:12px; align-items:center; min-width:0; }
.pc__mono{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; font-family:var(--m-sans); font-weight:600; font-size:16px; color:var(--c); box-shadow:inset 0 0 0 1.5px var(--c); background:#0F1522; }
.pc__name{ font-size:27px; line-height:1.05; font-weight:500; overflow-wrap:anywhere; }
.pc__name:focus{ outline:none; }
.pc__meta{ margin-top:3px; font-size:14.5px; line-height:1.3; font-style:italic; color:var(--silver-dim); }
.pc__rank{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.badge--label{ color:var(--a-prem); border-color:var(--a-prem); }

.pc__tabs{ display:flex; margin:16px 0 0; border-bottom:1px solid var(--a-line); }
.pc__tab{
  flex:1; font:inherit; font-size:15px; letter-spacing:.06em; padding:8px 6px 7px; color:var(--silver-dim);
  background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer;
}
.pc__tab[aria-selected="true"]{ color:var(--silver); border-bottom-color:var(--c); }
.pc__tab:focus-visible,.pc__body:focus-visible{ outline:2px solid var(--silver); outline-offset:-2px; }
.pc__body{ padding-top:12px; }
.pcard p{ font-size:15.5px; line-height:1.5; color:var(--silver-dim); }
.pc__lede{ color:var(--silver) !important; }
.pc__note{ margin-top:6px; font-size:13px !important; font-style:italic; color:var(--silver-faint) !important; }
.pc__h{ margin:14px 0 4px; font-size:10.5px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--silver-faint); }

/* six attribute bars, 2K style */
.pc__bars{ list-style:none; margin:12px 0 0; padding:0; }
.pc__bar{
  display:grid; grid-template-columns:96px 1fr 52px; align-items:center; gap:10px; width:100%;
  padding:6px 0; font:inherit; color:var(--silver); background:none; border:0; border-top:1px solid rgba(226,233,243,.07); cursor:pointer; text-align:left;
}
.pc__bar:focus-visible{ outline:2px solid var(--silver); outline-offset:2px; }
.pc__bn{ font-size:14.5px; }
.pc__bt{ height:7px; background:rgba(226,233,243,.09); overflow:hidden; }
.pc__bf{ display:block; height:100%; background:var(--tier); }
.pc__bv{ font-size:17px; font-weight:600; text-align:right; color:var(--tier); }
.pc__bar[data-tier="Unrated"] .pc__bv{ font-size:12px; font-weight:400; font-style:italic; color:var(--silver-faint); }
.pc__bd{ grid-column:3; justify-self:end; margin-top:-4px; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--silver-faint); }
.pc__why{ padding:2px 0 10px; }
.pc__why[hidden]{ display:none; }
.pc__why p{ font-size:14px !important; }

/* the hexagon radar */
.pc__fig{ margin:12px auto 0; max-width:280px; }
.pc__radar{ display:block; width:100%; height:auto; overflow:visible; }
.pc__grid{ fill:none; stroke:rgba(226,233,243,.16); stroke-width:1; }
.pc__shape{ fill:var(--c); fill-opacity:.22; stroke:var(--c); stroke-width:1.8; stroke-linejoin:round; }
.pc__dot{ fill:var(--c); }
.pc__dot--none{ fill:none; stroke:var(--silver-faint); stroke-dasharray:1.5 1.5; }
.pc__rl{ fill:var(--silver-dim); font-size:11.5px; letter-spacing:.08em; font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.pc__badges{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; }
.pc__badge{ padding:8px 10px; border:1px solid var(--a-line); border-left:3px solid var(--silver); }
.pc__badge--chokepoint{ border-left-color:#F2D98D; }
.pc__badge--kingmaker{ border-left-color:#D4B6FF; }
.pc__badge--single_customer_risk{ border-left-color:var(--a-rival); }
.pc__badge--in_play{ border-left-color:var(--a-own); }
.pc__bname{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver); }
.pc__badge .pc__bd{ margin-left:8px; }
.pc__badge p{ font-size:14px !important; margin-top:2px; }

.pc__desc{ font-size:16.5px !important; color:var(--silver) !important; }
.pc__fact{ margin-top:4px; }
.pc__src{ display:block; margin-top:6px; font-size:13px; color:var(--silver-dim); }
.pcard a{ color:var(--silver); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; }
.pc__also{ margin-top:12px; font-size:14px !important; font-style:italic; }
.pc__rel{ margin-top:14px; padding-top:6px; border-top:3px solid var(--a-ally); }
.pc__rel--rivals{ border-top-style:dashed; border-top-color:var(--a-rival); }
.pc__rel--backers{ border-top-color:var(--a-own); }
.pc__rel ul{ list-style:none; margin:0; padding:0; }
.pc__rel li{ padding:8px 0; border-top:1px solid rgba(226,233,243,.08); }
.pc__rel li:first-child{ border-top:0; }
.pc__go{
  font:inherit; font-size:16.5px; color:var(--silver); background:none; border:0; padding:2px 0; cursor:pointer; text-align:left;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em;
}
.pc__go:hover{ color:#fff; }
.pc__go:focus-visible{ outline:2px solid var(--silver); outline-offset:2px; }
.pc__govr{ font-size:13px; font-weight:600; color:var(--silver-dim); text-decoration:none; }
.pc__verb,.pc__in{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver-faint); }
.pc__verb{ display:inline-block; margin-right:5px; }
.pc__x{ margin-top:2px; font-size:14px !important; }

/* phones: the map on top and the card as a sheet below it */
@media (max-width:900px){
  .amap{ width:auto; margin-inline:0; }
  .amap__stage{ height:72svh; min-height:460px; border-left:0; border-right:0; border-radius:0; }
  .pcard{ position:relative; top:auto; right:auto; bottom:auto; width:auto; border-radius:0; box-shadow:none; background:var(--m-panel); border-width:1px 0 0; }
  /* the card opens as a short peek under the map, and its toggle gives it most of the height */
  .amap.has-card .amap__stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .amap.card-open .amap__stage{ grid-template-rows:minmax(0,34%) minmax(0,66%); }
  .pcard{ border-left:0; border-top:1px solid var(--a-line); padding:12px 16px 24px; max-height:150px; overflow:hidden; }
  .amap.card-open .pcard{ max-height:none; overflow-y:auto; }
  .pc__more{ display:block; width:calc(100% - 44px); margin:-4px 0 10px; padding:5px 0; font:inherit; font-size:14px; letter-spacing:.08em; color:var(--silver); background:transparent; border:1px solid var(--a-line); cursor:pointer; }
  .pc__more:focus-visible{ outline:2px solid var(--silver); }
  .amap:not(.card-open) .pc__mono,.amap:not(.card-open) .pc__rank{ display:none; }
  .amap__tool--wide[data-zoom="home"]{ display:none; }
  .amap__legend{ font-size:11.5px; gap:2px 10px; max-width:calc(100% - 130px); }
  .amap.has-card .amap__legend{ display:none; }
  .amap__mini{ width:108px; height:76px; }
  .pc__num{ font-size:48px; }
  .pc__ovr{ min-width:78px; }
  .pc__name{ font-size:24px; }
}
@media (max-width:600px){
  /* on a phone the control bar scrolls away with the page, so the map keeps the screen */
  body.view-map .atlas-bar{ position:relative; }
  .amap__full{ font-size:0 !important; min-width:36px; }
  .amap__full::before{ content:"\2922"; font-size:17px; }
  .amap__full[aria-pressed="true"]::before{ content:"\2715"; }
  .amap__hud{ padding:8px; }
  /* tall enough for five rows of labels with their top three */
  .amap__stage{ min-height:575px; }
  .amap__back{ font-size:0; min-width:38px; }
  .amap__back::before{ content:"\2190"; font-size:18px; }
  .amap__where{ font-size:11.5px; letter-spacing:.14em; }
  .amap__tools{ flex-wrap:nowrap; gap:4px; }
  .amap__tool{ min-width:34px; padding:6px 8px; }
  .amap__tool--wide{ font-size:13px; }
  .amap__legend{ display:none; }
  .amap__hint{ font-size:13px; bottom:96px; }
}

@media (prefers-reduced-motion:reduce){
  .amap__back,.amap__tool{ transition:none; }
}
@media print{
  .amap{ display:none; }
}

/* link from the player card to the company's stats page */
.pc__page{ display:inline-block; margin-top:6px; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }