/* Citadot site: the plain pages (Support, Privacy, 404). Same pixel look as the home page (look E, Classic map by day),
   but with solid, easy-to-read panels. Builds on pixel.css (buttons, panels, icons, logo, fonts). */

body.doc {
  --sky: #8fd0ff; --sky2: #99d6ff; --panel: #fff6dc; --panel2: #ffe9b8; --panel-hi: #ffffff; --panel-lo: #f0dcb0;
  --text: #2a2032; --mute: #5d5470; --line: #2a2032; --link: #1b4fc4;
  --accent: #ffcc4d; --acc-hi: #fff0a8; --acc-lo: #e39a1c; --on-acc: #2a2032; --accent2: #ff6b81; --bar: #2a2032;
  --font-game: "Press Start 2P", "Silkscreen", ui-monospace, Menlo, monospace;
}
html { background: #2a2032; }
body.doc {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  color: var(--text); font: 400 19px/1.55 var(--font-body);
  background-color: var(--sky); background-image: repeating-conic-gradient(var(--sky2) 0% 25%, transparent 0% 50%); background-size: 8px 8px;
}
.skip { position: absolute; left: 8px; top: 8px; z-index: 99; background: #fff; color: #000; padding: 8px 10px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- the top bar (same dark bar and little road as the home page) ---------- */
.docbar { position: relative; z-index: 2; background: var(--bar); color: #fff; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 3px 0 0 #fff, 0 8px 0 0 rgba(0,0,0,.18); }
.docbar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: 980px; margin: 0 auto; padding: 12px 16px; }
.home { display: block; flex: none; line-height: 0; text-decoration: none; }
.docbar nav { display: flex; flex-wrap: wrap; gap: 8px; }
.docbar nav a { display: block; padding: 8px 10px; font: 400 12px/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: #fff; background: #3b2f4a;
  box-shadow: -3px 0 0 #0b0812, 3px 0 0 #0b0812, 0 -3px 0 #0b0812, 0 3px 0 #0b0812; margin: 3px; }
.docbar nav a:hover { color: var(--accent); }
.docbar nav a[aria-current="page"] { background: var(--accent); color: var(--on-acc); box-shadow: -3px 0 0 #0b0812, 3px 0 0 #0b0812, 0 -3px 0 #0b0812, 0 3px 0 #0b0812, inset 3px 3px 0 var(--acc-hi), inset -3px -3px 0 var(--acc-lo); }
.road { position: relative; height: 10px; overflow: hidden; pointer-events: none; background: #1b1524 repeating-linear-gradient(90deg, transparent 0 10px, #ffd84d 10px 18px) 0 4px / 100% 2px no-repeat; }
.roadcar { position: absolute; left: 0; top: 0; width: 24px; height: 10px; background-size: 100% 100%; image-rendering: pixelated; animation: drive 26s linear infinite; }
@keyframes drive { from { transform: translateX(-30px); } to { transform: translateX(100vw); } }

/* ---------- the page ---------- */
.docmain { position: relative; z-index: 1; flex: 1 0 auto; width: 100%; max-width: 820px; margin: 0 auto; padding: 28px 16px 40px; }
.backrow { margin: 0 0 22px; }
.backrow:last-child { margin: 26px 0 0; }
.paper { --face: var(--panel); --edge: var(--line); --hi: var(--panel-hi); --lo: var(--panel-lo); color: var(--text);
  margin: var(--px); padding: calc(var(--px) * 6) calc(var(--px) * 6) calc(var(--px) * 7); overflow-wrap: break-word; }
.paper h1, .paper h2 { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.paper h1 { font-size: clamp(22px, 6.4vw, 34px); line-height: 1.15; margin-bottom: 18px; }
.paper h2 { display: block; font-size: clamp(15px, 4.2vw, 20px); line-height: 1.2; margin: 38px 3px 14px; padding: 9px 12px 8px; background: var(--accent); color: var(--on-acc);
  box-shadow: -3px 0 0 var(--line), 3px 0 0 var(--line), 0 -3px 0 var(--line), 0 3px 0 var(--line), inset 0 -3px 0 var(--acc-lo); }
.paper p { margin: 0 0 14px; }
.paper ul { margin: 0 0 14px; padding-left: 1.3em; list-style: square; }
.paper li { margin: 0 0 6px; padding-left: 4px; }
.paper li::marker { color: var(--accent2); }
.paper strong { font-weight: 700; }
.paper a:not(.pbtn) { color: var(--link); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.paper a:not(.pbtn):hover { background: var(--accent); color: var(--on-acc); text-decoration-style: dotted; }
.paper .faq { margin: 18px 0; padding: 2px 0 2px 14px; border-left: 4px solid var(--accent2); }
.paper .q { font-weight: 700; margin-bottom: 2px; }
.paper .box { margin: 18px 3px; padding: 14px 16px 14px 24px; background: var(--panel2);
  box-shadow: -3px 0 0 var(--line), 3px 0 0 var(--line), 0 -3px 0 var(--line), 0 3px 0 var(--line), inset 6px 0 0 0 var(--accent); }

/* ---------- footer ---------- */
.docfoot { position: relative; z-index: 1; margin: 0; padding: 22px 16px calc(26px + env(safe-area-inset-bottom, 0px)); background: var(--bar); color: #fff4e0; text-align: center; font: 400 16px/1.5 var(--font-body); box-shadow: 0 -3px 0 0 #fff; }
.docfoot p { max-width: 720px; margin: 0 auto; }
.docfoot a { color: #fff4e0; }

/* ---------- 404: the lost block ---------- */
.lost { text-align: center; }
.lost .logo-wrap { display: block; margin: 0 auto 26px; }
.lostblock { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 8px 0 26px; background: var(--accent); color: var(--on-acc);
  font: 400 44px/1 var(--font-game); text-shadow: 3px 3px 0 var(--acc-hi);
  box-shadow: inset 6px 6px 0 var(--acc-hi), inset -6px -6px 0 var(--acc-lo), -4px 0 0 var(--line), 4px 0 0 var(--line), 0 -4px 0 var(--line), 0 4px 0 var(--line), 0 16px 0 rgba(20,14,30,.25);
  animation: lostbob 1.6s steps(4) infinite; }
@keyframes lostbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.lost h1 { margin-bottom: 12px; }
.lost p { max-width: 30em; margin-left: auto; margin-right: auto; }
.lost .pbtn { margin-top: 8px; }

@media (max-width: 480px) {
  body.doc { font-size: 18px; }
  .docmain { padding-top: 22px; }
  .paper { padding: calc(var(--px) * 5) calc(var(--px) * 4) calc(var(--px) * 6); }
  .paper h2 { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .roadcar, .lostblock { animation: none !important; }
}