/*
 * PlayNinja site theme — shared layer over every non-game page.
 *
 * Introduced with the 2026-10-12 homepage redesign (index.html, which inlines
 * its own copy of these choices). Each page keeps its own inline stylesheet;
 * this file is linked AFTER it, so equal-specificity rules here win. It does
 * three things, and only these, so pages can be redesigned one at a time
 * without fighting it:
 *
 *   1. Sora replaces Fraunces for display type. The pages' own CSS was
 *      rewritten to name 'Sora' directly; the face is declared here once.
 *   2. Emphasis inside headings is upright saffron, not Fraunces italic green
 *      (Sora has no italic; a synthesized oblique looks broken).
 *   3. The shared site header, .pn-top — the homepage's nav, as a fixed 64px
 *      bar so it occupies exactly the space the old fixed nav did and no
 *      page's hero padding has to change. Prefixed classes and a div rather
 *      than <nav>, because every page carries bare `nav { … }` rules.
 *
 * Not long-cached (only /fonts and images are immutable), so edits here reach
 * every page on the next load.
 */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --pn-saff: #f4772b; --pn-saff-d: #d95f17; --pn-peac: #0e8c7f;
  --pn-ink: #141a2b; --pn-mute: #66708a; --pn-line: #e6e2d6; --pn-bg: #fbfaf6;
  --pn-display: 'Sora', 'Trebuchet MS', system-ui, sans-serif;
}

/* 2 — heading emphasis. Upright everywhere; saffron only on site pages
   (body[data-pn="site"]). Game landing pages keep their own accent colour —
   that colour is the game's identity. */
h1 em, h2 em, h3 em, .section-title em, .hero-title em { font-style: normal; }
body[data-pn="site"] h1 em, body[data-pn="site"] h2 em, body[data-pn="site"] h3 em,
body[data-pn="site"] .section-title em { color: var(--pn-saff); }

/* Wordmark in the game landing pages' own nav. */
.nav-logo .logo-name, .logo-name { font-family: var(--pn-display); font-weight: 800; letter-spacing: -.02em; }
.nav-logo .logo-name em, .logo-name em { font-style: normal; color: var(--pn-saff); }

/* 3 — shared header */
.pn-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px;
  background: color-mix(in srgb, var(--pn-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pn-line);
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}
.pn-top-in {
  max-width: 1160px; height: 100%; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
}
.pn-logo { text-decoration: none; color: var(--pn-ink); font-family: var(--pn-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; justify-self: start; }
.pn-logo em { font-style: normal; color: var(--pn-saff); }
.pn-links { display: flex; justify-content: center; gap: 22px; }
.pn-links a { text-decoration: none; color: var(--pn-mute); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.pn-links a:hover, .pn-links a[aria-current="page"] { color: var(--pn-ink); }
.pn-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pn-saff); }
.pn-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.pn-top .pn-search { height: 38px; width: 38px; padding: 0 9px; font-size: 14px; }
.pn-top .pn-search span { display: none; }
@media (max-width: 1240px) { .pn-links a.o1 { display: none; } }
@media (max-width: 1040px) { .pn-links a.o2 { display: none; } }
/* Phones: a second row of pills you swipe sideways, so every link stays one
   tap away. The bar grows from 64 to 108px; the body is pushed down by the
   difference so each page's hero padding (sized for 64) still clears it. */
@media (max-width: 780px) {
  .pn-top { height: 108px; }
  body[data-pn="site"] { padding-top: 44px; }
  .pn-top-in { grid-template-columns: auto 1fr; grid-template-rows: 58px 50px; row-gap: 0; }
  .pn-right { justify-self: stretch; justify-content: flex-end; grid-row: 1; grid-column: 2; }
  .pn-logo { grid-row: 1; }
  .pn-top .pn-search { width: 100%; max-width: 300px; padding: 0 14px; }
  .pn-top .pn-search span { display: block; }
  .pn-links { grid-row: 2; grid-column: 1 / -1; align-self: start; justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .pn-links::-webkit-scrollbar { display: none; }
  .pn-links a, .pn-links a.o1, .pn-links a.o2 { display: inline-flex; flex: none; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--pn-line); color: var(--pn-ink); font-size: 13.5px; }
  .pn-links a[aria-current="page"] { box-shadow: none; background: var(--pn-saff); border-color: var(--pn-saff); color: #fff; }
}
@media (max-width: 520px) { .pn-links { margin: 0 -16px; padding-left: 16px; } }
@media (max-width: 780px) { .pn-links { padding-right: 64px; } }
@media (max-width: 520px) { .pn-top-in { padding: 0 16px; } }
@media (max-width: 420px) { .pn-logo { font-size: 19px; } }
