/* PikuBots site, the game's own tokens (Game/Ui/HudStyles.cs): Ink, the HUD greys, Halcyon cyan, Cinder ember,
   one gold accent. Mobile first: every rule below 640 px is the phone layout, the wider screens only widen it.
   Type is Titillium Web (SemiBold 600, Bold 700, Black 900), the same family the game draws. */

@font-face { font-family: "Titillium Web"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/TitilliumWeb-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/TitilliumWeb-Bold.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("/fonts/TitilliumWeb-Black.woff2") format("woff2"); }

:root {
  --ground: #0a0e14;      /* HudStyles.Ground */
  --panel: #0f141c;       /* HudStyles.PanelSolid */
  --panel-2: #1a2330;
  --ink: #ebf2f7;         /* HudStyles.Ink */
  --dim: #9fadba;         /* Ink at the Dim alpha, flattened on the ground */
  --line: #2a374a;
  --halcyon: #3ab8ff;
  --cinder: #ff7a3d;
  --gold: #ffd14d;
  --radius: 8px;
  --sans: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-weight: 600;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: var(--halcyon); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--halcyon); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 20; background: var(--panel); padding: 8px 14px; border-radius: 8px; }

h1, h2, h3 { font-weight: 900; line-height: 1.12; letter-spacing: 0.01em; }
h1 { font-size: 40px; letter-spacing: -1px; }
h2 { font-size: 28px; font-weight: 700; letter-spacing: 0; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
p { color: var(--dim); }
.lead { color: var(--ink); font-size: 18px; }
.eyebrow { color: var(--halcyon); font-weight: 700; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 10px; }

/* header */
header.top { position: sticky; top: 0; z-index: 10; background: rgba(10, 14, 20, 0.92);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand b { font-weight: 900; font-size: 17px; letter-spacing: 0.08em; }
.brand b i { font-style: normal; color: var(--halcyon); }
.top nav { display: none; gap: 20px; }
.top nav a { color: var(--dim); text-decoration: none; font-size: 15px; font-weight: 700; }
.top nav a:hover { color: var(--ink); }
.top .cta { background: var(--cinder); color: #14100c; text-decoration: none; font-weight: 900; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; letter-spacing: 0.04em; white-space: nowrap; }

/* sections */
section { padding: 64px 0; border-bottom: 1px solid var(--line); }
section > .wrap > p { max-width: 62ch; }
.head { margin-bottom: 26px; }
.head p { margin-top: 10px; }

/* hero */
.hero { padding: 40px 0 48px; border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 0%, #16212e 0%, var(--ground) 62%); }
.hero h1 { font-size: 40px; }
.hero .lead { margin-top: 14px; }
.hero-art { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--panel); }
.hero-art img { width: 100%; height: auto; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.facts li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px;
  font-weight: 700; color: var(--dim); background: var(--panel); }

/* buttons */
.btn { display: inline-block; text-decoration: none; font-weight: 900; letter-spacing: 0.04em;
  padding: 13px 22px; border-radius: 999px; font-size: 15px; }
.btn.primary { background: var(--cinder); color: #14100c; }
.btn.ghost { border: 1px solid var(--line); color: var(--ink); background: var(--panel); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* grids */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.wide { grid-template-columns: 1fr; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card .pad { padding: 16px; }
.card h3 { margin-bottom: 4px; }
.card p { font-size: 14px; line-height: 1.5; }
.card .meta { color: var(--halcyon); font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 8px; }
.card.cinder .meta { color: var(--cinder); }
.card.gold .meta { color: var(--gold); }
/* the art already carries the card gradient (tools/site_build.py draws it in), so the tag only holds the box */
.shot { background: #0f1620; display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.weapons .shot { aspect-ratio: 4 / 3; }

/* arenas */
.arena img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--panel-2); }

/* effects: every clip is hidden until css/clips.css (written by tools/site_build.py) reveals the ones
   whose mp4 and poster are on disk. A site with no captured media shows no empty frames. */
#effects { display: none; }
.clip { display: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0c1119; }
.clip figcaption { padding: 10px 14px 14px; font-size: 14px; color: var(--dim); }
.clip figcaption b { display: block; color: var(--ink); font-size: 15px; }

/* get the game */
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.badge { display: flex; flex-direction: column; justify-content: center; min-width: 220px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 10px 18px; color: var(--ink); }
.badge small { color: var(--dim); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.badge b { font-size: 16px; font-weight: 900; }

/* prose pages */
.prose { padding: 32px 0 56px; }
.prose h1 { font-size: 30px; }
.prose h2 { font-size: 21px; margin: 30px 0 8px; }
.prose h3 { font-size: 17px; margin: 20px 0 6px; }
.prose p, .prose li { color: var(--dim); max-width: 74ch; }
.prose p { margin-bottom: 12px; }
.prose h2, .prose h3, .prose table, .prose .note { max-width: 78ch; }
.prose ul { margin: 0 0 14px 20px; }
.prose li { margin-bottom: 6px; }
.prose .updated { color: var(--dim); font-size: 14px; margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--dim);
  vertical-align: top; }
.prose th { color: var(--ink); font-weight: 700; }
.note { border: 1px solid var(--line); border-left: 3px solid var(--halcyon); background: var(--panel);
  border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.note p { margin: 0; }

/* footer */
footer { padding: 28px 0 40px; }
footer .wrap { display: flex; flex-direction: column; gap: 12px; }
footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
footer a { color: var(--dim); text-decoration: none; font-weight: 700; font-size: 15px; }
footer a:hover { color: var(--ink); }
footer small { color: var(--dim); font-size: 13px; line-height: 1.5; }

/* the 404 */
.gone { text-align: center; padding: 80px 0; }
.gone p { margin: 12px auto 22px; max-width: 46ch; }

@media (min-width: 720px) {
  body { font-size: 18px; }
  .wrap { padding: 0 24px; }
  .top nav { display: flex; }
  section { padding: 64px 0; }
  .hero { padding: 64px 0 72px; }
  .hero h1 { font-size: 56px; max-width: 16ch; }
  .hero .lead { font-size: 21px; max-width: 58ch; }
  h2 { font-size: 34px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 1024px) {
  h1 { font-size: 56px; } h2 { font-size: 36px; } h3 { font-size: 24px; } body { font-size: 18px; }
  section { padding: 120px 0; } .grid { gap: 24px; } .card .pad { padding: 24px; } .wrap { padding: 0 32px; }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .weapons .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .effects .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero h1 { font-size: 64px; }
}