/* Truck Kicker site — comic road-poster identity.
   Tokens derived from the game itself: sky, ink outlines, coin gold, truck red. */
@font-face {
  font-family: 'Titan One';
  src: url('fonts/titan-one-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #8fd0ee;
  --sky-hi: #c9ecfb;
  --ink: #12222e;
  --ink-soft: #33475538;
  --gold: #ffcf3f;
  --gold-deep: #e8a814;
  --truck: #ff5340;
  --night: #16212c;
  --night-2: #1e2c3a;
  --paper: #f6fbfe;
  --body: #2b3d4a;
  --link: #0e639c;
  --display: 'Titan One', 'Arial Black', sans-serif;
  --round: ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--round);
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--truck);
  outline-offset: 2px;
  border-radius: 4px;
}
.display { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
}

/* Sticker: the site's one structural motif — ink border + hard offset shadow. */
.sticker {
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--ink);
  background: #fff;
}

/* Hazard stripe divider (road shoulder) */
.hazard {
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 22px, var(--ink) 22px 44px);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

/* ============ Doc pages (privacy / support / terms) ============ */
.doc-header {
  background: linear-gradient(180deg, var(--sky-hi), var(--sky));
  border-bottom: 3px solid var(--ink);
  padding: 30px 24px 26px;
}
.doc-header .wrap { max-width: 720px; margin: 0 auto; }
.doc-header a.home {
  font-family: var(--display); font-size: 14px; color: var(--ink);
  text-decoration: none; letter-spacing: .04em;
}
.doc-header a.home:hover { color: var(--truck); }
.doc-header h1 {
  font-family: var(--display); color: var(--ink); font-size: clamp(30px, 5vw, 42px);
  margin-top: 10px; text-transform: uppercase; letter-spacing: .06em; transform: rotate(-1deg);
  text-shadow: 3px 3px 0 rgba(255,255,255,.55);
}
.doc-header .meta { font-size: 13.5px; color: #29455a; margin-top: 8px; font-weight: 600; }

.doc-main { max-width: 768px; margin: 0 auto; padding: 42px 24px 80px; }   /* 768 = 720 内容宽 + 两侧 24 padding,与 doc-header .wrap 对齐 */
.doc-main > p, .doc-main li { font-size: 16px; line-height: 1.7; }
.doc-main p { margin: 12px 0; }
.doc-main h2 {
  font-family: var(--display); font-size: 20px; color: var(--ink); text-transform: uppercase;
  letter-spacing: .06em; margin: 44px 0 10px; padding-bottom: 6px;
  border-bottom: 3px solid var(--gold);
  display: table;   /* shrink underline to text width */
}
.doc-main h3 { font-size: 17px; color: var(--ink); margin: 26px 0 6px; }
.doc-main ul, .doc-main ol { padding-left: 24px; margin: 10px 0; }
.doc-main li { margin: 7px 0; }
.doc-main a { color: var(--link); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.doc-main a:hover { color: var(--truck); }
.doc-main strong { color: var(--ink); }

.doc-main table {
  border-collapse: separate; border-spacing: 0; width: 100%; margin: 18px 0; font-size: 14.5px;
  border: 3px solid var(--ink); border-radius: 12px; overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink-soft);
}
.doc-main th, .doc-main td { text-align: left; padding: 10px 13px; vertical-align: top; }
.doc-main th {
  background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 400;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 3px solid var(--ink);
}
.doc-main td { border-bottom: 1px solid #dbe7ef; background: #fff; }
.doc-main tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

.contact-card {
  border: 3px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--gold);
  background: #fff; padding: 22px 24px; margin: 20px 0 8px;
}
.contact-card .mail { font-size: 20px; font-weight: 800; }
.contact-card p { font-size: 14.5px; margin-top: 8px; }

.doc-main details {
  border: 3px solid var(--ink); border-radius: 14px; background: #fff;
  padding: 15px 20px; margin: 12px 0; box-shadow: 4px 4px 0 var(--ink-soft);
}
.doc-main details[open] { box-shadow: 4px 4px 0 var(--gold); }
.doc-main summary { font-weight: 800; font-size: 16px; color: var(--ink); cursor: pointer; }
.doc-main details p, .doc-main details ul, .doc-main details ol { margin-top: 10px; }

.doc-footer {
  background: var(--night); color: #b9cddc; padding: 26px 24px 34px; font-size: 14px;
}
.doc-footer .wrap { max-width: 720px; margin: 0 auto; }
.doc-footer a { color: var(--gold); font-weight: 700; margin-right: 22px; text-decoration: none; }
.doc-footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}