/* Generated sub-pages (/privacy, /terms, /support and the SEO pages): the landing page's palette and type, one column. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/fonts/Barlow-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/fonts/Barlow-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 600; font-display: swap; src: url('/fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2'); }

:root { --bg: #0E0F11; --line: #26292E; --text: #ECEDEF; --text2: #A2A7AE; --text3: #7D828A; --accent: #5CC4E0; --gutter: clamp(20px, 4vw, 48px); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { font-family: 'Barlow', -apple-system, system-ui, sans-serif; color: var(--text); font-size: 17px; line-height: 1.6;
       padding: 0 max(var(--gutter), env(safe-area-inset-left)) env(safe-area-inset-bottom); }
.bar { max-width: 44rem; margin: 0 auto; padding: 20px 0; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand .mark { width: 28px; height: auto; }
.brand-name { font-family: 'Barlow SC'; font-weight: 600; font-size: 20px; }
main { max-width: 44rem; margin: 0 auto; padding: 40px 0 56px; display: grid; gap: 14px; }
h1 { font-family: 'Barlow SC'; font-weight: 600; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; }
h2 { font-weight: 600; font-size: 20px; line-height: 1.3; margin-top: 18px; }
p, li { color: var(--text2); }
ul { padding-left: 1.2em; display: grid; gap: 8px; }
.meta { color: var(--text3); font-size: 15px; }
a { color: var(--accent); }
footer { max-width: 44rem; margin: 0 auto; padding: 32px 0 48px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
footer nav a { color: var(--text2); font-size: 15px; text-decoration: none; }
footer nav a:hover { color: var(--text); text-decoration: underline; }
footer p { color: var(--text3); font-size: 14px; line-height: 1.55; }

/* SEO pages (/army-builder, /game-tracker, /rules, /terran, /zerg, /protoss; site/src/seo.ts). */
:root { --s2: #1E2125; --s3: #272A2F; --edge: #2F3339; }
ol { padding-left: 1.4em; display: grid; gap: 8px; }
ul.cols { columns: 2 14rem; column-gap: 32px; display: block; }
ul.cols li { break-inside: avoid; margin-bottom: 6px; }
ul.cols .n { color: var(--text3); font-size: 15px; margin-left: 4px; }
.scroll { overflow-x: auto; margin: 4px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
thead th { color: var(--text3); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
tbody th { font-weight: 600; color: var(--text); }
td { color: var(--text2); }
tbody th small { display: block; font-weight: 400; font-size: 13px; color: var(--text3); margin-top: 2px; }
tr.group th { font-family: 'Barlow SC'; font-size: 17px; color: var(--accent); padding-top: 20px; }
table.units td { white-space: nowrap; }
td small { display: block; font-size: 13px; color: var(--text3); margin-top: 2px; }
.get { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.get h2 { margin-top: 0; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.store { --cut: 10px; background: var(--edge); padding: 1px; text-decoration: none; transition: background .2s;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.store-in { --c2: 9.6px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 176px; height: 56px; padding: 0 22px; background: var(--s2); text-align: center; transition: background .2s;
  clip-path: polygon(var(--c2) 0, 100% 0, 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, 0 100%, 0 var(--c2)); }
.store small { font-size: 12px; color: var(--text2); line-height: 1.1; }
.store b { font-family: 'Barlow SC'; font-size: 22px; font-weight: 600; line-height: 1.05; color: var(--text); }
.store:hover { background: var(--text3); }
.store:hover .store-in { background: var(--s3); }
.store:focus-visible { outline-offset: 2px; clip-path: none; border-radius: 4px; }
.also { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 15px; }
.also a { color: var(--text2); text-decoration: none; }
.also a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 480px) {
  .store-in { min-width: 0; width: 158px; height: 52px; padding: 0 14px; }
  .store b { font-size: 19px; }
  .store small { font-size: 11px; }
}