/* The small static pages in the shared village look (theme "village", the home's Hidden Leaf at night; no own theme
   block: naruto.css's defaults are the village theme). Privacy, Terms, Support, 404 and My account
   (docs/design-system.md "Naruto theme layer"). Built from the shared components' tokens: the legal pages are parchment
   scrolls, the support tiers are mission scrolls, the 404 is a lost scroll, My account gets headband marks and
   stitched cloth edges on its tiles. Textures are CSS; game art as it is. */

/* a wider metric fallback for the brush font (Shojumaru runs about 20 % wider than Arial Black), so brush titles take
   the same lines before and after the web font arrives (no layout shift); naruto.css's own fallback is narrower */
@font-face { font-family: "Shojumaru Fallback Wide"; src: local("Arial Black"), local("Arial Bold"), local("Arial"); size-adjust: 120%; ascent-override: 80%; descent-override: 22%; line-gap-override: 0%; }
body:is([data-page="privacy"], [data-page="terms"], [data-page="support"], [data-page="404"], [data-page="account"]) { --nk-brush: "Shojumaru", "Shojumaru Fallback Wide", var(--head); }

/* ---------- Privacy / Terms: the text on a parchment scroll with wooden rods ---------- */
:is([data-page="privacy"], [data-page="terms"]) .news-post { position: relative; max-width: 860px; margin: 14px 0 26px; padding: 34px 34px 30px; border: 0; border-radius: 2px;
  background: var(--nk-parchment); color: var(--nk-ink-2);
  box-shadow: inset 0 0 40px rgba(120, 70, 20, 0.28), inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 18px 34px -16px rgba(0, 0, 0, 0.85); }
:is([data-page="privacy"], [data-page="terms"]) .news-post::before, :is([data-page="privacy"], [data-page="terms"]) .news-post::after {
  content: ""; position: absolute; left: -9px; right: -9px; height: 14px; border-radius: 7px; background: var(--nk-rod); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); }
:is([data-page="privacy"], [data-page="terms"]) .news-post::before { top: -7px; }
:is([data-page="privacy"], [data-page="terms"]) .news-post::after { bottom: -7px; }
:is([data-page="privacy"], [data-page="terms"]) .news-body { color: var(--nk-ink-2); }
:is([data-page="privacy"], [data-page="terms"]) .news-body h2 { display: flex; align-items: center; gap: 10px; color: var(--nk-red-ink); font: 400 var(--fs-lg)/1.25 var(--nk-brush); letter-spacing: 0.01em; scroll-margin-top: 90px; }
:is([data-page="privacy"], [data-page="terms"]) .news-body h2::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--nk-red); -webkit-mask: var(--nk-shuriken-url) center / contain no-repeat; mask: var(--nk-shuriken-url) center / contain no-repeat; }
:is([data-page="privacy"], [data-page="terms"]) .news-body > h2:first-child { margin-top: 0; }
:is([data-page="privacy"], [data-page="terms"]) .news-body :is(h3, strong, b, em) { color: var(--nk-ink); }
:is([data-page="privacy"], [data-page="terms"]) .news-body li::marker { color: var(--nk-red); font-weight: 700; }
:is([data-page="privacy"], [data-page="terms"]) .news-body a { color: var(--nk-red-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
:is([data-page="privacy"], [data-page="terms"]) .news-body a:hover { color: var(--nk-ink); }
:is([data-page="privacy"], [data-page="terms"]) .news-body :is(.muted, .faint) { color: var(--nk-ink-3); }
:is([data-page="privacy"], [data-page="terms"]) .news-body code { background: rgba(90, 53, 25, 0.12); color: var(--nk-ink); border-radius: 2px; padding: 1px 5px; }
@media (max-width: 600px) {
  :is([data-page="privacy"], [data-page="terms"]) .news-post { padding: 26px 18px 22px; }
  :is([data-page="privacy"], [data-page="terms"]) .news-post::before, :is([data-page="privacy"], [data-page="terms"]) .news-post::after { left: -6px; right: -6px; }
}

/* ---------- Support: the tiers as mission scrolls (a rod on top, brush names), the featured one with a gold ring ---------- */
[data-page="support"] .tiers { gap: 24px 18px; padding-top: 8px; }
[data-page="support"] .tier { position: relative; border: 0; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink-2);
  box-shadow: inset 0 0 30px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 16px 28px -16px rgba(0, 0, 0, 0.85); }
[data-page="support"] .tier::before { content: ""; position: absolute; left: -7px; right: -7px; top: -7px; height: 12px; border-radius: 6px; background: var(--nk-rod); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
[data-page="support"] .tier.featured { box-shadow: inset 0 0 30px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 0 0 2px var(--gold), 0 16px 34px -14px rgba(255, 201, 74, 0.25); }
[data-page="support"] .tier h3 { color: var(--nk-red-ink); font: 400 1.5rem/1.15 var(--nk-brush); letter-spacing: 0.01em; }
[data-page="support"] .tier .price { color: var(--nk-ink); }
[data-page="support"] .tier .price small, [data-page="support"] .tier li { color: var(--nk-ink-2); }
[data-page="support"] .tier li::marker { color: var(--nk-red); }
[data-page="support"] .tier .badge { color: var(--nk-ink-2); background: rgba(90, 53, 25, 0.12); box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.35); }
[data-page="support"] .tier .badge.b-ok { color: #17663a; background: rgba(23, 102, 58, 0.12); box-shadow: inset 0 0 0 1px rgba(23, 102, 58, 0.45); }
[data-page="support"] .tier .btn-ghost { background: rgba(90, 53, 25, 0.1); color: var(--nk-ink); box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.45); }
[data-page="support"] .tier .btn { min-height: 44px; }
[data-page="support"] .info-cards .info { position: relative; overflow: hidden; padding-top: 26px; }
[data-page="support"] .info-cards .info::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 7px, transparent 7px 12px) 0 4px / 100% 1px no-repeat, linear-gradient(180deg, var(--theme-cloth-hi), var(--theme-cloth-lo)); }

/* ---------- 404: a lost scroll in the middle of the page ---------- */
.vp-lost { position: relative; max-width: 560px; margin: 0 auto; padding: 34px 26px 32px; text-align: center; }
[data-page="404"] .page-hero > .wrap { background: none; }
[data-page="404"] .vp-lost h1 { color: var(--nk-red-ink); text-shadow: none; }
[data-page="404"] .vp-lost p { color: var(--nk-ink-2); }
[data-page="404"] .vp-lost .nk-cta { justify-content: center; }
.vp-lost-plate { margin: 0 auto 16px; }
@media (max-width: 600px) { .vp-lost { padding: 28px 18px 26px; } }

/* ---------- My account: headband marks on the section titles, stitched cloth edges on the tiles ---------- */
[data-page="account"] .acct-who h2, [data-page="account"] .acct-who h1 { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; color: #fff3d6; }
[data-page="account"] .acct-sec > h2:not(.sr-only) { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.02em; color: #fff3d6; }
[data-page="account"] .acct-sec > h2:not(.sr-only)::before { width: 15px; height: 15px; border-radius: 0; background: var(--theme-accent);
  -webkit-mask: var(--nk-shuriken-url) center / contain no-repeat; mask: var(--nk-shuriken-url) center / contain no-repeat; }
[data-page="account"] .acct-tiles .stat, [data-page="account"] .acct-mode { position: relative; overflow: hidden; }
[data-page="account"] .acct-tiles .stat::before, [data-page="account"] .acct-mode::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 6px, transparent 6px 10px) 0 2px / 100% 1px no-repeat, linear-gradient(180deg, var(--theme-cloth-hi), var(--theme-cloth-lo)); }
[data-page="account"] .acct-state { position: relative; overflow: hidden; }