/* fareline.live: shared styles. Fonts are served from this site (no third-party requests).
   Source: tools/site/site.css. gen.js copies it to web/site/site.css, so edit it here. */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Silkscreen";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/silkscreen-400.woff2) format("woff2")}
@font-face{font-family:"Silkscreen";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/silkscreen-700.woff2) format("woff2")}

/* tokens: the game's own palette (dark) and a cool chart-paper light theme */
:root{
  --bg:#EEF1F6; --surface:#FFFFFF; --line:#C9D0DD; --ink:#141826; --muted:#4F5869;
  --gold:#8A5E00; --gold-fill:#FFC845; --boss:#7B3FC4; --met:#14804F; --miss:#B5650B; --pax:#1C64C8;
  --bronze:#9A5508;
  --cell-empty:#DCE1EA;
  --shadow:0 12px 32px rgba(20,24,38,.16);
  --px:"Silkscreen","Courier New",monospace;
  --fs:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* layout: the page frame, and the measure of running text */
  --wrap:1280px; --measure:66ch;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12141C; --surface:#1B1F2C; --line:#333A50; --ink:#F0F2F7; --muted:#9AA3B6;
    --gold:#FFC845; --gold-fill:#FFC845; --boss:#C86BFF; --met:#3DD68C; --miss:#F2A33C; --pax:#35A0FF;
    --bronze:#F2A33C;
    --cell-empty:#232839;
    --shadow:0 12px 32px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#12141C; --surface:#1B1F2C; --line:#333A50; --ink:#F0F2F7; --muted:#9AA3B6;
  --gold:#FFC845; --gold-fill:#FFC845; --boss:#C86BFF; --met:#3DD68C; --miss:#F2A33C; --pax:#35A0FF;
  --bronze:#F2A33C;
  --cell-empty:#232839;
  --shadow:0 12px 32px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fs);font-size:17px;line-height:1.55;
     font-variant-numeric:tabular-nums;overflow-x:hidden}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:16px;top:-60px;background:var(--surface);color:var(--ink);padding:8px 12px;border:2px solid var(--gold);z-index:30}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the page frame: one width for header, content and footer, wider on a big screen */
.page{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media (min-width:600px){ .page{padding:0 28px} }
@media (min-width:1280px){ .page{padding:0 40px} }

/* ================= header and menu ================= */
/* the HUB F mark and the wordmark always sit on the game's dark plate */
.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:20px 0 12px;border-bottom:2px solid var(--line);position:relative}
.brand{grid-column:1;grid-row:1;justify-self:start;display:inline-flex;align-items:center;gap:12px;background:#12141C;border-radius:4px;padding:9px 14px 9px 10px;text-decoration:none}
.brand svg{display:block;width:30px;height:30px;flex:none}
.brand span{font-family:var(--px);font-weight:700;font-size:28px;line-height:1;letter-spacing:.06em;color:#FFC845}
.brand:hover{color:inherit}
.theme,.menu{font:600 14px/1 var(--fs);color:var(--muted);background:transparent;border:2px solid var(--line);border-radius:3px;
       padding:9px 12px;min-height:44px;cursor:pointer}
.theme{grid-column:3;grid-row:1;justify-self:end}
.theme:hover,.menu:hover{color:var(--ink);border-color:var(--muted)}
.menu{display:none;grid-column:2;grid-row:1;justify-self:end;align-items:center;gap:9px;color:var(--ink)}
.menu i{display:block;width:18px;height:2px;margin:6px 0;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.menu[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.menu[aria-expanded="true"] i{background:transparent;box-shadow:none;position:relative}
.menu[aria-expanded="true"] i::before,.menu[aria-expanded="true"] i::after{content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:currentColor;transform:rotate(45deg)}
.menu[aria-expanded="true"] i::after{transform:rotate(-45deg)}

/* the nav: without script (and on a narrow screen once opened) a full row under the brand */
.nav{grid-column:1/-1;grid-row:2;padding:4px 0 2px}
.nav ul{list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav .nm{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
.nav a,.refb{display:flex;align-items:center;min-height:44px;padding:4px 10px;border-radius:3px;font:600 15px/1.2 var(--fs);color:var(--ink);text-decoration:none;
       background:transparent;border:0;cursor:pointer;white-space:nowrap}
.nav a:hover,.refb:hover{color:var(--gold)}
.nav a[aria-current="page"],.nav a.on,.refb.on{color:var(--gold);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav a.play{color:var(--gold)}
.nav a.play::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;margin-right:8px}
.nav .ref{flex-basis:100%}
.nav .lab{display:block;font:700 11px/1 var(--px);letter-spacing:.04em;color:var(--muted);padding:12px 10px 2px}
.nav .sub{display:flex;flex-wrap:wrap;gap:2px 4px}
.refb{display:none}

/* narrow screens with script: a Menu button, the nav opens under the header */
@media (max-width:59.99em){
  .js .menu{display:inline-flex}
  .js .nav{display:none}
  .js .top.open .nav{display:block;border-top:2px solid var(--line);margin-top:6px;padding:8px 0 4px}
  .js .nav .nm,.js .nav .sub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:2px 10px}
  .js .nav .ref{grid-column:1/-1}
  .js .nav a{padding:4px 8px}
}
/* the smaller phones: the wordmark gives way first, then the Menu label (the button keeps its name) */
@media (max-width:479px){ .brand{gap:10px;padding:8px 10px 8px 8px} .brand svg{width:26px;height:26px} .brand span{font-size:24px} }
@media (max-width:419px){ .menu .ml{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .menu{padding:9px 11px} .theme{padding:9px 10px} }
@media (max-width:359px){ .top{gap:8px 6px} .brand{gap:8px;padding:7px 8px 7px 7px} .brand svg{width:22px;height:22px} .brand span{font-size:18px} }

/* wide screens with script: one row, Reference opens a panel */
@media (min-width:60em){
  .js .top{gap:0 20px;padding:22px 0 16px}
  .js .nav{grid-column:2;grid-row:1;justify-self:end;padding:0}
  .js .nav .nm{flex-wrap:nowrap;gap:2px}
  .js .nav .lab{display:none}
  .js .nav .ref{flex-basis:auto;position:relative}
  .js .refb{display:flex;gap:9px}
  .js .refb::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
  .js .refb[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .js .nav .sub{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:230px;padding:6px;background:var(--surface);
                border:2px solid var(--line);border-radius:4px;box-shadow:var(--shadow)}
  .js .nav .ref.open .sub{display:grid;gap:2px}
  .js .nav .sub a{padding:4px 12px}
  .js .nav .sub a:hover{background:var(--bg)}
}

/* the privacy page's own nav (kept until it is regenerated): the old two rows */
.site{margin:4px 0 0;padding:8px 0 10px;border-bottom:2px solid var(--line)}
.site ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
.site .refrow{display:flex;flex-wrap:wrap;align-items:center;margin-top:4px}
.site li{display:flex}
.site a{display:inline-flex;align-items:center;min-height:32px;padding:3px 8px;border-radius:3px;font-size:15px;font-weight:600;text-decoration:none;color:var(--ink)}
.site a:hover{color:var(--gold);text-decoration:underline;text-decoration-color:var(--gold)}
.site a[aria-current="page"]{color:var(--gold);text-decoration:underline;text-decoration-thickness:2px}
.site .lab{font:700 11px/1 var(--px);letter-spacing:.04em;color:var(--muted);padding:0 6px 0 8px}
.top+.site{margin-top:0}
.top:has(+ .site){border-bottom:0}

/* breadcrumbs (every inner page) */
.crumbs{margin:0 0 10px;font-size:14px;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--line)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ================= type ================= */
h1{font-weight:600;font-size:clamp(1.85rem,6.6vw,2.7rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 16px;max-width:20ch;text-wrap:balance}
h2{font-family:var(--px);font-weight:700;font-size:16px;line-height:1.3;letter-spacing:.02em;color:var(--gold);margin:0 0 12px;text-wrap:balance}
@media (min-width:600px){ h2{font-size:24px} }
h3{font-size:17px;font-weight:600;margin:18px 0 4px}
section{padding:30px 0 4px}
section p{margin:0 0 12px;max-width:var(--measure)}

/* ================= home ================= */
.hero{padding:28px 0 8px}
.lede{margin:0 0 24px;color:var(--ink);max-width:60ch}
.calls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:0 0 26px}
.call{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 20px;border-radius:4px;background:var(--gold-fill);color:#12141C;
      font:700 15px/1.2 var(--px);letter-spacing:.04em;text-decoration:none;border:2px solid var(--gold-fill);text-align:center}
.call:hover{background:transparent;border-color:var(--gold);color:var(--gold)}
.call~.call{background:transparent;color:var(--ink);border-color:var(--line)}
.call~.call:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:419px){ .calls{flex-direction:column;align-items:stretch} }
/* the Google Play line: a note of its own, apart from the buttons */
.gp{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;width:fit-content;max-width:100%;margin:0 0 34px;padding:10px 14px;
    border:2px dashed var(--line);border-radius:4px;font-size:15px;color:var(--muted)}
.gp b{font:700 12px/1.3 var(--px);letter-spacing:.04em;color:var(--gold)}
@media (min-width:60em){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:center;padding:56px 0 30px}
  .hero h1{font-size:clamp(2.5rem,3.6vw,3.3rem);max-width:15ch}
  .hero .gp{margin-bottom:0}
  .hero .run{margin:0}
}
@media (min-width:1500px){ .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }

/* the run: 25 quarters */
.run{background:var(--surface);border:2px solid var(--line);border-radius:4px;padding:16px 12px 14px;margin:0 0 8px}
@media (min-width:600px){ .run{padding:22px 22px 18px} }
.run figcaption{font-size:15px;color:var(--muted);margin-top:14px}
.yr{display:grid;grid-template-columns:3rem repeat(5,minmax(18px,40px)) minmax(4.2rem,1fr);align-items:center;gap:6px;margin:0 0 6px}
.yr b{font-size:13px;font-weight:600;line-height:1.1;color:var(--muted)}
.yr em{font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--boss);padding-left:6px;line-height:1.2}
.yr em.fin{color:var(--gold)}
.q{display:block;aspect-ratio:1;border-radius:3px;background:var(--cell-empty);border:2px solid transparent;position:relative}
.q.b{border-color:var(--boss)}
.q.f{border-color:var(--gold)}
.q.m{background:var(--met)}
.q.x{background:var(--miss)}
.q.x::after{content:"";position:absolute;left:22%;right:22%;top:46%;height:2px;background:var(--bg);border-radius:1px}
.runEnd{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:14px;padding-top:12px;border-top:2px solid var(--line)}
.runEnd span{font:700 14px/1.2 var(--px);color:var(--gold);letter-spacing:.04em}
.runEnd small{font-size:14px;color:var(--muted)}
.key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.key li{display:flex;align-items:center;gap:7px}
.key i{display:inline-block;width:14px;height:14px;border-radius:2px;border:2px solid transparent}
.key .km{background:var(--met)} .key .kx{background:var(--miss)} .key .kb{border-color:var(--boss)} .key .kf{border-color:var(--gold)}

/* how a quarter works: numbered steps, a grid on wider screens */
.steps{list-style:none;margin:6px 0 0;padding:0;counter-reset:step;display:grid;gap:18px 36px}
@media (min-width:720px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1120px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
.steps>li{counter-increment:step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 14px}
.steps>li::before{content:counter(step);font:700 14px/30px var(--px);text-align:center;width:30px;height:30px;border-radius:3px;
                  background:var(--cell-empty);color:var(--ink);border:2px solid var(--line)}
.steps h3{margin:3px 0 2px}
.steps p{margin:0;color:var(--ink)}

.card{margin:12px 0 2px;background:var(--surface);border:2px solid var(--line);border-left:4px solid var(--gold-fill);border-radius:3px;padding:10px 12px;max-width:420px}
.card .t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;align-items:baseline;font:700 13px/1.3 var(--px);letter-spacing:.03em}
.card .t>span:first-child{white-space:nowrap}
.card .lev{color:var(--muted);font-weight:400;white-space:nowrap}
.card .lev b{color:var(--gold);font-weight:700}
.card .s{font-size:14px;color:var(--muted);margin:3px 0 7px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font:400 11px/1.25 var(--px);letter-spacing:.02em;padding:3px 6px;border:2px solid currentColor;border-radius:2px}
.chip.p{color:var(--pax)} .chip.g{color:var(--gold)} .chip.n{color:var(--met)}

.vary{margin:4px 0 0;display:grid;gap:16px}
@media (min-width:600px){ .vary{grid-template-columns:1fr 1fr;gap:20px 32px} }
@media (min-width:1120px){ .vary{grid-template-columns:repeat(4,minmax(0,1fr))} }
.vary dt{font-weight:600;font-size:17px;margin:0 0 2px;display:flex;align-items:center;gap:10px}
.vary dd{margin:0;color:var(--ink)}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.bars i{display:block;width:4px;background:var(--gold-fill);border-radius:1px}
.bars i:nth-child(1){height:3px} .bars i:nth-child(2){height:6px} .bars i:nth-child(3){height:9px} .bars i:nth-child(4){height:12px} .bars i:nth-child(5){height:14px}
.levels{font-size:15px;color:var(--muted)}

/* short sections side by side on a wide screen */
.duo{display:grid;gap:0 48px}
@media (min-width:860px){ .duo{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1200px){ .duo.three{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ================= link cards: the whole card is one link, title line then description ================= */
ul.lk{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));max-width:none}
ul.lk>li{margin:0;display:flex;min-width:0}
.lk a{display:flex;flex-direction:column;gap:6px;width:100%;padding:14px 16px 15px;background:var(--surface);border:2px solid var(--line);border-radius:4px;
      text-decoration:none;color:var(--ink)}
.lk a:hover{border-color:var(--gold);color:var(--ink)}
.lk .lt{display:block;font:700 13px/1.35 var(--px);letter-spacing:.03em;color:var(--gold)}
.lk .ld{display:block;font-size:15px;line-height:1.45;color:var(--muted)}
.lk a:hover .lt{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
ul.lk.big{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.lk.big a{padding:18px 20px 20px;gap:8px}
.lk.big .lt{font-size:15px}
.lk.big .ld{font-size:16px}
@media (min-width:1120px){ ul.lk.five{grid-template-columns:repeat(5,minmax(0,1fr))} }
.related{margin:34px 0 0;padding:20px 0 0;border-top:2px solid var(--line)}
.related>p{margin:0;font:700 12px/1.3 var(--px);letter-spacing:.04em;color:var(--muted)}

/* ================= text and reference pages ================= */
.doc{padding:24px 0 8px}
.doc h1{font-size:clamp(1.6rem,5.6vw,2.2rem);max-width:none}
@media (min-width:60em){ .doc{padding-top:36px} .doc h1{font-size:2.5rem} }
.doc .date{color:var(--muted);font-size:15px;margin:0 0 20px}
/* plain lists in running text (lists with a class are components and set their own spacing) */
.doc ul:not([class]){margin:0 0 12px;padding-left:1.2em;max-width:var(--measure)}
.doc ul:not([class])>li{margin:0 0 6px}
.lede2{margin:0 0 6px;color:var(--ink);max-width:var(--measure)}
@media (min-width:60em){ .lede2{font-size:18px} }
.meta{color:var(--muted);font-size:14px;margin:6px 0 0;max-width:var(--measure)}
ul.toc{max-width:none;list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
ul.toc>li,ul.tags>li{margin:0}
.toc a{display:inline-flex;min-height:36px;align-items:center;padding:3px 10px;border:2px solid var(--line);border-radius:3px;font-size:14px;font-weight:600;text-decoration:none}
.toc a:hover{border-color:var(--gold);color:var(--gold)}
.note{margin:12px 0;padding:10px 12px;border-left:4px solid var(--line);background:var(--surface);border-radius:3px;font-size:15px;max-width:var(--measure)}
.note p{margin:0 0 6px}
.note p:last-child{margin:0}

/* the top of a reference page: text, then its in-page navigation; side by side on a wide screen */
.ia{margin-top:14px}
.ia .sidelab,.side .sidelab{margin:16px 0 0;font:700 11px/1.3 var(--px);letter-spacing:.04em;color:var(--muted)}
.ia ul.toc,.ia ul.counts{margin-top:8px}
.ia .tblw{margin-top:0}
@media (min-width:68em){
  .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:0 64px;align-items:start}
  .ia{margin-top:6px;padding:16px 18px 18px;background:var(--surface);border:2px solid var(--line);border-radius:4px}
  .ia .sidelab{margin:0}
  .ia ul.counts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ia .counts li{background:var(--bg)}
  .ia .tbl.short{max-width:none}
}

/* the guide and the articles: on a wide screen the "On this page" list stays beside the text */
.side ul.toc{margin-top:8px}
.side{margin-bottom:22px}
.flow{min-width:0}
@media (min-width:68em){
  .withside{display:grid;grid-template-columns:minmax(0,740px) 260px;gap:0 72px;align-items:start;justify-content:start}
  .side{grid-column:2;grid-row:1;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:8px 0 12px;margin-bottom:0}
  .side .sidelab{margin:0}
  .side ul.toc{display:block;margin-top:10px;border-left:2px solid var(--line)}
  .side .toc li{margin:0}
  .side .toc a{display:flex;min-height:36px;padding:4px 12px;margin-left:-2px;border:0;border-left:2px solid transparent;border-radius:0;font-weight:500;color:var(--muted)}
  .side .toc a:hover{border-left-color:var(--gold);color:var(--gold)}
  .flow{grid-column:1;grid-row:1}
}

/* cards: a title, tags and text (workshop upgrades, level rules) */
ul.cards{max-width:none;list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:600px){ .cards.two{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))} }
@media (min-width:860px){ ul.cards.fit{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))} }
.cards>li{margin:0;background:var(--surface);border:2px solid var(--line);border-left:4px solid var(--line);border-radius:3px;padding:10px 12px;min-width:0}
.cards h3{margin:0 0 4px;font:700 14px/1.3 var(--px);letter-spacing:.03em;color:var(--ink)}
.cards p{margin:6px 0 0;font-size:16px}
ul.tags{max-width:none;display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0;padding:0;list-style:none}
.tag{display:inline-block;font:400 11px/1.25 var(--px);letter-spacing:.02em;padding:3px 6px;border:2px solid currentColor;border-radius:2px;color:var(--muted);white-space:nowrap}
.tag.common{color:var(--pax)} .tag.uncommon{color:var(--met)} .tag.rare{color:var(--boss)} .tag.legendary,.tag.gold{color:var(--gold)}
.tag.boss{color:var(--boss)}
.tag.bronze{color:var(--bronze)} .tag.silver{color:var(--pax)}

/* ================= tables ================= */
.tbl{width:100%;border-collapse:collapse;margin:10px 0 0;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:7px 8px 7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:13px;font-weight:600;color:var(--muted)}
.tbl td.n,.tbl th.n{text-align:right;padding-right:0;padding-left:8px;white-space:nowrap}
.tbl caption.cap{caption-side:bottom;text-align:left;color:var(--muted);font-size:14px;padding-top:8px}
.tbl.short{max-width:560px}
/* a table that could be wider than its box scrolls inside the box, never the page; the box also tells the table how wide it is */
.tblw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;container-type:inline-size;container-name:tw;margin:12px 0 0}
.tblw>.tbl{margin:0}

/* the aircraft table */
.tbl .sil{width:52px;color:var(--ink)}
.tbl .sil svg{display:block;width:44px;height:18px}
.tbl.ac th.n{white-space:normal}
.tbl .u{display:block;font-weight:400}
.tbl.ac td{vertical-align:middle}
.tbl.ac{max-width:980px}
@media (min-width:860px){ .tbl.ac{font-size:16px} .tbl.ac .sil{width:110px} .tbl.ac .sil svg{width:88px;height:36px} .tbl.ac td{padding-top:10px;padding-bottom:10px} }
@media (max-width:420px){ .tbl.ac{font-size:14px} .tbl.ac .sil{width:40px} .tbl.ac .sil svg{width:34px;height:14px} .tbl.ac th,.tbl.ac td{padding-right:6px} .tbl.ac td.n,.tbl.ac th.n{padding-left:6px;padding-right:0} }
/* the tier links in the bosses year table: a full-size tap target */
.tbl a.tl{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin:2px 4px 2px 0;border:2px solid var(--line);border-radius:3px;font-weight:600;text-decoration:none}
.tbl a.tl:hover{border-color:var(--gold);color:var(--gold)}
.tbl.yrs td{vertical-align:middle}

/* reference tables (perks, bosses, achievements, levels, airports): a table on a wide box, one card per row on a narrow one */
.rt{width:100%;border-collapse:collapse;font-size:15px}
.rt th,.rt td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--line)}
.rt thead th{font-size:13px;font-weight:600;line-height:1.25;color:var(--muted);border-bottom:2px solid var(--line);vertical-align:bottom}
.rt tbody tr:last-child>*{border-bottom:0}
.rt td.n,.rt th.n{text-align:right;white-space:nowrap;padding-left:10px}
.rt th.n{white-space:normal}
.rt .nm{font:700 13px/1.4 var(--px);letter-spacing:.03em;color:var(--ink)}
.rt .nm a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.rt.lv tbody th{vertical-align:middle;padding-top:0;padding-bottom:0}
.rt .nm a:hover{text-decoration:underline}
.rt .tg{white-space:nowrap}
.rt .d p{margin:0 0 6px;max-width:var(--measure)}
.rt .d p:last-child{margin-bottom:0}
.rt .d .why,.rt .d .alt{font-size:14px;color:var(--muted)}
.rt .d .alt{color:var(--ink)}
.rt .ft{display:block;margin-top:6px}
.rt tr:target>*{background:var(--surface)}
.rt tr:target>:first-child{box-shadow:inset 4px 0 0 var(--gold-fill)}
/* a coloured edge for rarity, bosses and finals, as on the game's cards */
.rt tr.common>:first-child{box-shadow:inset 4px 0 0 var(--pax)} .rt tr.uncommon>:first-child{box-shadow:inset 4px 0 0 var(--met)}
.rt tr.rare>:first-child{box-shadow:inset 4px 0 0 var(--boss)} .rt tr.legendary>:first-child,.rt tr.final>:first-child{box-shadow:inset 4px 0 0 var(--gold-fill)}
.rt tr.boss>:first-child{box-shadow:inset 4px 0 0 var(--boss)}
.rt tr:is(.common,.uncommon,.rare,.legendary,.boss,.final)>:first-child{padding-left:14px}
.rt.lv{max-width:1000px}
.rt .muted{color:var(--muted)}
/* fixed columns, so the tables of one page line up with each other */
.rt.pk,.rt.bs,.rt.ach{table-layout:fixed}
.rt.pk thead th:nth-child(1),.rt.bs thead th:nth-child(1){width:22%} .rt.pk thead th:nth-child(2){width:120px} .rt.pk thead th:nth-child(3){width:240px}
.rt.bs thead th:nth-child(2){width:190px}
.rt.ach thead th:nth-child(1){width:26%} .rt.ach thead th:nth-child(2){width:110px} .rt.ach thead th:nth-child(3){width:130px}
.rt.lv .nm{width:18%}
.rt .nm{overflow-wrap:anywhere}
/* a tag in a table row sits on its own card-coloured fill, so its colour keeps its contrast in the light theme too */
.rt .tag{white-space:normal;background:var(--surface)}
/* a wide box: the perk tags stay on one line, and the level rules keep a gap from the MILES number before them */
@container tw (min-width:761px){ .rt.pk .tg .tag{white-space:nowrap} .rt.lv td.n+td:not(.n),.rt.lv th.n+th:not(.n){padding-left:32px} }
.tblw+p{margin-top:12px}
.secret .nm{color:var(--muted)}
@container tw (max-width:760px){
  .rt:not(.aps) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rt:not(.aps),.rt:not(.aps) tbody{display:block}
  .rt:not(.aps) tbody tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin:0 0 8px;padding:11px 12px 12px;
               background:var(--surface);border:2px solid var(--line);border-left-width:4px;border-radius:3px}
  .rt:not(.aps) tbody tr>*{display:block;flex:0 1 auto;padding:0;border:0;min-width:0;max-width:100%;box-shadow:none!important}
  .rt:not(.aps) tbody tr:is(.common,.uncommon,.rare,.legendary,.boss,.final)>:first-child{padding-left:0}
  .rt:not(.aps) td.n{text-align:left;padding:0}
  .rt:not(.aps) tbody tr>[data-l]{flex:1 0 96px}
  .rt:not(.aps) .full{flex:1 0 100%}
  .rt:not(.aps) [data-l]::before{content:attr(data-l);display:block;font:600 12px/1.3 var(--fs);letter-spacing:0;color:var(--muted);text-transform:none;margin-bottom:1px;white-space:normal}
  .rt:not(.aps) tr.common{border-left-color:var(--pax)} .rt:not(.aps) tr.uncommon{border-left-color:var(--met)}
  .rt:not(.aps) tr.rare,.rt:not(.aps) tr.boss{border-left-color:var(--boss)}
  .rt:not(.aps) tr.legendary,.rt:not(.aps) tr.final{border-left-color:var(--gold-fill)}
  .rt:not(.aps) tr:target{border-color:var(--gold)}
}

/* the airports tables: the card detail opens under its row */
.rt.aps td,.rt.aps th{vertical-align:middle}
.rt.aps .code{font:700 14px/1.3 var(--px);letter-spacing:.03em}
.rt.aps .g{display:flex;align-items:center;gap:6px;font:700 11px/1.2 var(--px);letter-spacing:.03em;color:var(--gold);white-space:nowrap}
.rt.aps .g i{display:inline-flex;gap:2px}
.rt.aps .g i u{display:block;width:6px;height:10px;border-radius:1px;background:var(--cell-empty)}
.rt.aps .g i u.on{background:var(--gold-fill)}
.rt.aps .g.g6 i u{background:var(--miss)}
.rt.aps .chr{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.apb{font:600 13px/1 var(--fs);color:var(--ink);background:transparent;border:2px solid var(--line);border-radius:3px;min-height:36px;padding:6px 10px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.apb::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.apb[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.apb[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.apb:hover{border-color:var(--gold)}
html:not(.js) .apb{display:none}
.rt.aps tr.apd>td{padding:4px 0 14px;background:transparent}
.apd .box{padding:10px 14px;background:var(--surface);border:2px solid var(--line);border-left:4px solid var(--gold-fill);border-radius:3px;font-size:15px}
.apd .box p{margin:0 0 4px;max-width:none}
.apd .box p:last-child{margin:0}
.apd .box .l{color:var(--ink)}
.apd .box .s{color:var(--muted);font-size:14px}
.js .rt.aps tr.apd{display:none}
.js .rt.aps tr.apd.open{display:table-row}
.rt.aps tr.has>*{border-bottom-color:transparent}
/* a narrow box: each airport is a card. Line one: code, city, country. Line two: grade and hub. Then the numbers, then Details */
@container tw (max-width:900px){
  .rt.aps thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rt.aps,.rt.aps tbody{display:block}
  .rt.aps tbody tr.ap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:0 0 8px;padding:11px 12px 12px;
                       background:var(--surface);border:2px solid var(--line);border-radius:3px}
  .rt.aps tbody tr.ap.has{margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .rt.aps tbody tr.ap>*{display:block;padding:0;border:0;min-width:0;text-align:left;box-shadow:none;background:transparent}
  .rt.aps tbody tr.apd>td{display:block;width:100%}
  /* two zero-height line breaks: after the name line and after the grade line */
  .rt.aps tbody tr.ap::before,.rt.aps tbody tr.ap::after{content:"";flex:1 0 100%;height:0;margin-top:-8px}
  .rt.aps tbody tr.ap::before{order:2} .rt.aps tbody tr.ap::after{order:4}
  .rt.aps tbody tr.ap>.code,.rt.aps tbody tr.ap>.city,.rt.aps tbody tr.ap>.ctry{order:1}
  .rt.aps tbody tr.ap>.grade,.rt.aps tbody tr.ap>.chr{order:3}
  .rt.aps tbody tr.ap>td.n{order:5}
  .rt.aps .code{flex:0 0 auto}
  .rt.aps .city{flex:0 1 auto;font-weight:600}
  .rt.aps .ctry{flex:0 1 auto;color:var(--muted)}
  .rt.aps .grade,.rt.aps .chr{flex:0 0 auto}
  .rt.aps td.n{flex:1 0 82px;text-align:left}
  .rt.aps tbody tr.ap>.cardc{flex:1 0 100%;order:6}
  .rt.aps .cardc .apb{width:100%;justify-content:center}
  .rt.aps [data-l]::before{content:attr(data-l);display:block;font:600 12px/1.3 var(--fs);color:var(--muted);margin-bottom:1px;white-space:normal}
  .rt.aps tr.apd>td{padding:0}
  .js .rt.aps tr.apd.open{display:block;margin:0 0 8px}
  html:not(.js) .rt.aps tr.apd{display:block;margin:-8px 0 8px}
  .apd .box{border:2px solid var(--line);border-top:1px dashed var(--line);border-left:2px solid var(--line);border-radius:0 0 3px 3px}
  html:not(.js) .apd .box{border-top:0}
  .rt.aps tbody tr.ap:target{border-color:var(--gold)}
}
/* a tablet-wide box: name, grade and hub on one line, the numbers and Details on the next */
@container tw (min-width:560px) and (max-width:900px){
  .rt.aps tbody tr.ap::before{display:none}
  .rt.aps .chr{margin-right:auto}
  .rt.aps td.n{flex:0 0 92px}
  .rt.aps tbody tr.ap>.cardc{flex:0 0 auto;margin-left:auto;align-self:center}
  .rt.aps .cardc .apb{width:auto}
}
ul.counts{max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin:12px 0 0;padding:0;list-style:none}
.counts li{margin:0;background:var(--surface);border:2px solid var(--line);border-radius:3px;padding:0;font-size:14px}
.counts li a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:4px 10px;text-decoration:none}
.counts li a span{font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:2px}
.counts li a b{font-weight:600;color:var(--muted)}
.counts li:hover{border-color:var(--gold)}
.apn{max-width:var(--measure)}

/* the board target: a table of years and quarters; on a narrow box each year is a row of five */
.tgt{width:100%;max-width:900px;border-collapse:separate;border-spacing:4px;margin:0 -4px}
.tgt th{font-size:13px;font-weight:600;color:var(--muted);text-align:left;padding:2px 4px;white-space:nowrap}
.tgt td{background:var(--surface);border:2px solid var(--line);border-radius:3px;padding:6px 8px;text-align:right;font-size:15px;line-height:20px;white-space:nowrap}
.tgt td.bq{border-color:var(--boss)}
.tgt td i{font-style:normal;font-size:12px;line-height:21px;color:var(--muted);float:left;margin-right:8px}
@container tw (max-width:520px){
  .tgt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tgt,.tgt tbody{display:block;margin:0}
  .tgt tr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 0 8px}
  .tgt tr>th{grid-column:1/-1;padding:0}
  .tgt td{display:block;padding:4px 2px;text-align:center;font-size:13px;line-height:1.25;overflow:hidden}
  .tgt td i{display:block;float:none;margin:0;font-size:11px}
}
@container tw (max-width:330px){ .tgt tr{gap:3px} .tgt td{font-size:11.5px;padding:4px 1px;letter-spacing:-.01em} }

/* ================= articles, news, FAQ, about ================= */
.art p{margin:0 0 14px}
.art h2{margin-top:6px}
.art .flow>h2{margin-top:30px}
.flow>p,.flow>section>p{max-width:var(--measure)}
.art .flow ul:not([class]),.art .flow ol:not([class]){margin:0 0 14px;padding-left:1.25em;max-width:var(--measure)}
.art .flow ul:not([class])>li,.art .flow ol:not([class])>li{margin:0 0 6px}
/* a wide screen: running text a little larger, with the same measure */
@media (min-width:68em){ .flow{font-size:18px} .flow h3{font-size:18px} }
.next{margin:26px 0 0;padding:12px 14px;border:2px dashed var(--line);border-radius:4px;font-size:15px;max-width:var(--measure)}
.next p{margin:0 0 4px}
.news article{padding:24px 0 8px;border-bottom:2px solid var(--line)}
.news article:last-of-type{border-bottom:0}
.news h2{margin-bottom:2px}
.news time{display:block;color:var(--muted);font-size:14px;margin:0 0 10px}
.news article ul{max-width:var(--measure)}
@media (min-width:860px){
  .news article{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0 56px;padding:30px 0 18px}
  .news article>h2,.news article>time{grid-column:1}
  .news article>h2{grid-row:1;font-size:20px}
  .news article>time{grid-row:2}
  .news article>ul,.news article>p{grid-column:2;grid-row:1/span 3;margin-top:0}
  .news article>p+ul{grid-row:auto;margin-top:0}
}
.faq dl{margin:18px 0 0;display:grid;gap:12px}
@media (min-width:860px){ .faq dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px} }
@media (min-width:1500px){ .faq dl{grid-template-columns:repeat(3,minmax(0,1fr))} }
.faq .qa{background:var(--surface);border:2px solid var(--line);border-radius:4px;padding:14px 16px 6px;min-width:0}
.faq dt{font-weight:600;font-size:17px;margin:0 0 6px}
.faq dd{margin:0}
.faq dd p{margin:0 0 8px}
.grid2{display:grid;gap:0 56px}
@media (min-width:860px){ .grid2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.e404{padding:40px 0 10px}
.ex{margin:12px 0;padding:10px 12px;background:var(--surface);border:2px solid var(--line);border-radius:3px;max-width:var(--measure)}
.ex ol,.ex ul{margin:4px 0 0;padding-left:1.25em}
.ex li{margin:0 0 3px;font-variant-numeric:tabular-nums}
.ex b{font:700 12px/1.3 var(--px);letter-spacing:.03em;color:var(--gold)}
.soon{border:2px dashed var(--line);border-radius:4px;padding:14px 14px 4px;margin-top:4px}
.soon h2{color:var(--muted)}
.get{margin:0 0 34px;padding:12px 14px;border-left:4px solid var(--gold-fill);background:var(--surface);border-radius:3px;max-width:60ch}
.get b{font-family:var(--px);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--gold);display:block;margin-bottom:2px}

/* ================= footer ================= */
footer{margin:44px 0 0;padding:24px 0 32px;border-top:2px solid var(--line);font-size:14px;color:var(--muted)}
footer ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:0 18px}
footer li{display:flex}
footer a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
footer p{margin:0 0 6px}
.fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0 0 14px}
@media (min-width:720px){ .fcols{grid-template-columns:repeat(4,minmax(0,1fr))} }
.fcols .fh{margin:0 0 2px;font:700 11px/1.3 var(--px);letter-spacing:.04em;color:var(--muted)}
.fcols ul{display:block;margin:0}
.fcols li{display:block}
.fcols a{min-height:44px;min-width:44px;color:var(--ink);font-weight:500;text-decoration:none}
.fcols a:hover{color:var(--gold);text-decoration:underline}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto!important;transition:none!important;animation:none!important} }

/* the press page: screenshots and logos in a grid that fills the width, each picture as wide as its cell, the trailer as wide as
   its box (every picture carries its own width and height, so nothing moves when it loads) */
.press .shots{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));max-width:none}
.press .shots>li{margin:0;min-width:0}
.press .logos{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.press figure{margin:0 0 12px}
.press figure img,.press figure video{display:block;width:100%;height:auto;border:2px solid var(--line);border-radius:4px;background:#12141C}
.press figure a{display:block}
.press figcaption{font-size:15px;line-height:1.45;color:var(--muted);margin:6px 0 0}
.press .vid{max-width:960px}

/* home: the key facts (a list of label and value pairs, in a grid that fills the width) */
.facts{margin:4px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 32px;border-top:1px solid var(--line)}
.facts>div{padding:10px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 2px}
.facts dd{margin:0;color:var(--ink)}