/* Shared by every page: tokens, header, footer, droid tiles, tier chips, static pages. */
:root {
  --bg: #020407;
  --panel: rgba(7, 13, 20, .96);
  --panel-2: #101b26;
  --line: rgba(0, 179, 250, .32);
  --text: #faf8f6;
  --muted: #b6bfc8;
  --accent: #00b3fa;
  --accent-ink: #0f1921;
  --gold: #f5c542;
  --glow: 0 0 6px rgba(0, 179, 250, .55), 0 0 16px rgba(0, 179, 250, .26);
  --glow-text: 0 0 6px rgba(0, 179, 250, .6), 0 0 18px rgba(0, 179, 250, .34);
  --frame: rgba(0, 179, 250, .85);
  --ok: #35f29a;
  --warn: #ffab5e;
  --radius: 14px;
  --t-default: #9aa3ad;
  --t-gold: #e8b931;
  --t-diamond: #5fd3f3;
  --t-beskar: #b9c4cf;
  --t-galactic: #a77bff;
  --t-stellar: #ff7a59;
  --t-kyber: #39e07f;
  --c-worker: #f5b942;
  --c-astromech: #5fb4ff;
  --c-battle: #ff6b6b;
  --c-protocol: #d59bff;
  --head-h: 112px;
}
@media (min-width: 1000px) { :root { --head-h: 68px; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--head-h) + 12px); }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#stars { position: fixed; inset: 0; z-index: -1; background-color: var(--bg); pointer-events: none; opacity: .5; }
a { color: var(--accent); }
main { flex: 1; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 1000px) { .wrap { padding: 0 32px; } }
.display { font-family: "Chakra Petch", Inter, sans-serif; font-weight: 700; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(3, 6, 11, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.head-in {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo tip" "menu menu";
  align-items: center;
  gap: 8px 12px;
  padding-top: 10px; padding-bottom: 10px;
}
/* One row from 1000px. Narrower, the logo and tip squeeze the five menu labels onto two lines. */
@media (min-width: 1000px) {
  .head-in { grid-template-columns: auto 1fr auto; grid-template-areas: "logo menu tip"; gap: 24px; }
}
.logo { grid-area: logo; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--accent); min-width: 0; }
.logo img { width: 40px; height: 40px; flex: none; }
.logo span { font: 700 21px/1.1 "Chakra Petch", Inter, sans-serif; text-shadow: var(--glow-text); white-space: nowrap; }
.logo span b { color: var(--text); text-shadow: none; }
.menu {
  grid-area: menu;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background: var(--panel); border: 1px solid var(--frame); border-radius: 12px; padding: 4px;
}
@media (min-width: 1000px) { .menu { grid-template-columns: repeat(5, auto); max-width: 680px; width: 100%; justify-self: center; } }
.menu a {
  display: grid; place-items: center; min-height: 42px; padding: 2px 4px; border-radius: 9px;
  color: var(--muted); text-decoration: none; text-align: center;
  font: 700 16px/1.1 "Chakra Petch", Inter, sans-serif;
}
@media (max-width: 759px) { .menu a { font-size: 14px; } }
@media (min-width: 1000px) { .menu a { padding: 2px 12px; } }
.menu a:hover { color: var(--text); }
.menu a[aria-current="page"] { background: var(--panel-2); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.tip {
  grid-area: tip;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 0 16px; min-height: 42px; border-radius: 10px;
  box-shadow: var(--glow); white-space: nowrap;
}
.tip:hover { filter: brightness(1.1); }
@media (max-width: 420px) {
  .logo { gap: 8px; }
  .logo img { width: 34px; height: 34px; }
  .logo span { font-size: 18px; }
  .tip { font-size: 14px; padding: 0 12px; min-height: 40px; }
}
@media (max-width: 359px) {
  .logo span { font-size: 15px; }
  .tip { font-size: 13px; padding: 0 10px; }
}

/* ---------- footer ---------- */
.site-foot { margin-top: 48px; border-top: 1px solid var(--line); background: rgba(3, 6, 11, .94); color: var(--muted); font-size: 14px; }
.foot-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; padding-top: 28px; padding-bottom: 8px; }
@media (min-width: 760px) { .foot-cols { grid-template-columns: repeat(4, 1fr); } }
.foot-cols h2 { font: 700 13px Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin: 0 0 10px; text-shadow: none; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot-cols a, .foot-cols button { color: var(--muted); text-decoration: none; display: inline-block; padding: 4px 0; font: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.foot-cols a:hover, .foot-cols button:hover { color: var(--accent); }
.fine { display: grid; gap: 8px; padding-top: 16px; padding-bottom: 32px; border-top: 1px solid rgba(0, 179, 250, .14); margin-top: 16px; font-size: 13px; }
.fine p { margin: 0; }

/* ---------- droid tiles ---------- */
.thumb {
  flex: none; display: grid; place-items: center; overflow: hidden;
  width: 48px; height: 48px; border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, #15283b, #09111a 70%);
  border: 1px solid var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.sm { width: 28px; height: 28px; border-radius: 8px; }
.thumb.lg { width: 76px; height: 76px; border-radius: 16px; }
.thumb.xl { width: 128px; height: 128px; border-radius: 22px; }
.thumb .ini { font: 700 14px "Chakra Petch", Inter, sans-serif; color: var(--muted); }
.droid { display: flex; align-items: center; gap: 12px; min-width: 0; }
.droid .dn { font: 700 18px/1.15 "Chakra Petch", Inter, sans-serif; color: var(--text); overflow-wrap: break-word; }
.droid .dc { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cls { display: inline-flex; align-items: center; gap: 5px; }
.cls::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--muted)); }
.cls-Worker { --cc: var(--c-worker); }
.cls-Astromech { --cc: var(--c-astromech); }
.cls-Battle { --cc: var(--c-battle); }
.cls-Protocol { --cc: var(--c-protocol); }
/* In a heading the dot sits inline, so "Worker" keeps the heading's baseline. */
h2 .cls { display: inline; }
h2 .cls::before { display: inline-block; margin-right: 8px; vertical-align: .2em; }

/* ---------- tier chips ---------- */
.tier { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #0b0f17; white-space: nowrap; }
.t-Default { background: var(--t-default); }
.t-Gold { background: var(--t-gold); }
.t-Diamond { background: var(--t-diamond); }
.t-Rainbow { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b06bff); }
.t-Beskar { background: var(--t-beskar); }
.t-Galactic { background: var(--t-galactic); }
.t-Stellar { background: var(--t-stellar); }
.t-Kyber { background: var(--t-kyber); }

/* ---------- shared blocks ---------- */
h1, h2, h3 { font-family: "Chakra Petch", Inter, sans-serif; font-weight: 700; text-wrap: balance; }
/* No single word left alone on a paragraph's last line, where the browser can manage it. */
p, li, .sub, .hint { text-wrap: pretty; }
h2 { font-size: 24px; margin: 0 0 6px; color: var(--accent); }
.sub { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.panel { background: var(--panel); border: 2px solid var(--frame); border-radius: 18px; padding: 18px; box-shadow: var(--glow); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 600 15px Inter, sans-serif; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: var(--glow); }
.btn:disabled { opacity: .4; cursor: default; }
.flag { background: rgba(43, 29, 11, .95); border: 1px solid #6a4616; color: #ffd2a0; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.two { display: grid; gap: 14px; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; } }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: "\2713"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.ticks.lose li::before { content: "\00D7"; color: var(--warn); }
.buys { display: grid; gap: 8px; }
.buy { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.buy .cost { color: var(--accent); font-weight: 700; white-space: nowrap; }
.buy small { display: block; color: var(--muted); }

/* ---------- static pages ---------- */
.page { padding-top: 28px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.page h1 { font-size: 32px; line-height: 1.15; margin: 0 0 10px; color: var(--accent); text-shadow: var(--glow-text); }
.lead { font-size: 17px; color: var(--text); max-width: 760px; margin: 0 0 18px; }
.page .sub { max-width: 760px; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 28px; }
.prose p, .prose li { color: var(--text); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.fact { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.fact b { color: var(--gold); font-weight: 600; }
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(0, 179, 250, .18); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
tr:target td { background: rgba(0, 179, 250, .14); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; }
.shop td small { display: block; color: var(--muted); font-size: 13px; }
.rq { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rq a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.rq a:hover span.n { text-decoration: underline; }
.rq .pair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
td.nw { white-space: nowrap; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dcard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); }
.dcard:hover { border-color: var(--frame); }
.dcard b { font: 700 15px/1.15 "Chakra Petch", Inter, sans-serif; display: block; }
.dcard small { color: var(--muted); font-size: 12px; }

/* ---------- income ranking (/droids/) ---------- */
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pick button { font: 600 13px/1 Inter, sans-serif; min-height: 44px; padding: 0 13px; border-radius: 999px; cursor: pointer; }
.pick button:not(.tier) { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.pick button:not(.tier)[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pick .tier { border: 0; opacity: .45; }
.pick .tier[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #020407, 0 0 0 4px var(--accent); }
.rkn { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 600; }
.rkn:hover .n { text-decoration: underline; }
#rank td small { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 0 34px; }
#rank td.rk { width: 1%; color: var(--muted); }
#rank .warn { color: var(--warn); }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.qa { border-bottom: 1px solid rgba(0, 179, 250, .18); padding: 14px 0; }
.qa h2 { font-size: 19px; color: var(--text); margin: 0 0 6px; }
.qa p { margin: 0; color: var(--muted); }

/* ---------- page transitions (/fx.js) ---------- */
/* The head snippet sets html.fx-intro (first page in a tab) or html.fx-in + fx-l|fx-r (came by a link that played
   fx-out). fx-l: the page and stars move left, toward a page further right on the menu. fx-r: the other way.
   Opacity and transform only, so phones run them off the main thread. Reduced motion: no classes, none of this. */
/* The veil: the page colour over everything but the header. It only exists during a transition. */
html.fx-out body::before, html.fx-in body::before, html.fx-intro body::before {
  content: ""; position: fixed; inset: 0; z-index: 19; background: var(--bg); pointer-events: none;
}
/* The stars, drawn by /fx.js. Above the veil, under the header (z 20). */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 19; pointer-events: none; }
/* The sliding page must not widen the page on a phone. Clip on html too, or body hands its value to the viewport
   and clips nothing. clip, never hidden: hidden would make body a scroller and unstick the header. The header's
   blur would redraw every frame. */
html.fx-out, html.fx-in, html.fx-out body, html.fx-in body { overflow-x: clip; }
html.fx-out .site-head, html.fx-in .site-head, html.fx-intro .site-head { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.fx-out body::before { animation: fx-veil-out .16s ease-in forwards; }
html.fx-in body::before { animation: fx-veil-in .3s ease-out forwards; }
html.fx-out.fx-l main { animation: fx-out-l .16s ease-in forwards; }
html.fx-out.fx-r main { animation: fx-out-r .16s ease-in forwards; }
/* Never from opacity 0: the page counts as painted from its first frame. */
html.fx-in.fx-l main { animation: fx-in-l .3s cubic-bezier(.2, .7, .3, 1) backwards; }
html.fx-in.fx-r main { animation: fx-in-r .3s cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes fx-veil-out { from { opacity: 0; } to { opacity: .9; } }
@keyframes fx-veil-in { from { opacity: .9; } to { opacity: 0; } }
@keyframes fx-out-l { to { transform: translateX(-6vw); opacity: .4; } }
@keyframes fx-out-r { to { transform: translateX(6vw); opacity: .4; } }
@keyframes fx-in-l { from { transform: translateX(6vw); opacity: .4; } }
@keyframes fx-in-r { from { transform: translateX(-6vw); opacity: .4; } }
/* The intro: the veil covers the header too and takes taps (a tap skips ahead), while the stars speed up. If the
   script never runs, it fades by itself after 2.5 s. Then fx-reveal: the veil lifts and the page zooms in from
   the middle of the screen (both origins are the same screen point, so header and page stay joined). */
html.fx-intro body::before { z-index: 40; pointer-events: auto; animation: fx-veil-safety .4s 2.5s forwards; }
html.fx-intro #fx { z-index: 41; }
html.fx-reveal body::before { pointer-events: none; animation: fx-veil-reveal .45s ease-out forwards; }
html.fx-reveal .site-head { transform-origin: 50% 50vh; animation: fx-zoom .45s cubic-bezier(.2, .7, .3, 1) backwards; }
html.fx-reveal main { transform-origin: 50% calc(50vh - var(--head-h)); animation: fx-zoom .45s cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes fx-veil-safety { to { opacity: 0; visibility: hidden; } }
@keyframes fx-veil-reveal { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes fx-zoom { from { transform: scale(.94); } }