/* The parchment every page outside a game is drawn on, and what sits on it
   everywhere: the page's own colour, the nav, flash messages and buttons.

   Each page used to carry its own copy under body:has(.its-container) — four
   copies of the nav and buttons, seven of this background — and a page that
   missed one got the dark game theme's version. The selectors keep that form,
   folded together with :is(), so every rule weighs exactly what it did and
   nothing a page still sets for itself is outranked. A page joins by adding
   its container to the lists below. */

/* The quiet ink for labels, hints and small print. It was #9a8568, about
   2.4:1 on the paper; this is 5:1 on its middle tone. The darker inks
   (#3a2a14 body, #4a4030 and #5a4a30 between) are still written out. */
:root { --ink-muted: #65523a; }

/* ── The surface ── */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select),
        :has(.signin-screen), :has(.legal-page), :has(.demo-hub), :has(.demo-wall-screen)) {
  background:
    repeating-conic-gradient(
      rgba(120, 90, 50, 0.03) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px,
    radial-gradient(ellipse at 0% 0%, rgba(90, 60, 30, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(100, 65, 25, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgba(95, 60, 30, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(90, 55, 25, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 40%, #efe3cd 0%, #e2d3b8 40%, #d4c4a4 80%);
}

/* The vignette (base.css, body::after) is drawn over everything, so at the
   edges it greyed the words along with the paper, and the footer and a
   phone's lower corners read at under 3:1. Here it darkens only the paper.
   .container and .site-footer carry z-index: 1. */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select),
        :has(.signin-screen), :has(.legal-page), :has(.demo-hub), :has(.demo-wall-screen))::after { z-index: 0; }

body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select),
        :has(.signin-screen), :has(.legal-page), :has(.demo-hub), :has(.demo-wall-screen)) .site-footer a {
  color: var(--ink-muted);
  opacity: 1;
}
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select),
          :has(.signin-screen), :has(.legal-page), :has(.demo-hub), :has(.demo-wall-screen)) .site-footer a:hover { color: #3a2a14; }
}

/* ── Signed-in pages: ink, no theme image, the nav ── */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) { color: #3a2a14; }
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select))::before { display: none; }

body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav { border-bottom: 1px solid rgba(138, 115, 84, 0.3); }
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-home { color: #7a6548; }
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-home:hover { color: #3a2a14; }
}
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-user { color: #7a6548; }
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-tokens { color: var(--ink-muted); }
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-signout { border-color: #b5a382; color: #7a6548; }
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-signout:hover { color: #3a2a14; border-color: #8a7354; }
}
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-locale { border-color: #b5a382; color: #7a6548; }
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-locale:hover { color: #3a2a14; border-color: #8a7354; }
}
/* The demo bar's Sign in to save (pages/demo.css draws it in the game's
   teal): on parchment, Sign out's look. */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-demo-cta {
  padding: 0.2rem 0.4rem;
  border: 1px solid #b5a382;
  border-radius: 0;
  color: #7a6548;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .app-nav-demo-cta:hover { color: #3a2a14; border-color: #8a7354; }
}

/* ── Flash messages ── */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .flash-notice {
  background: rgba(138, 115, 84, 0.12);
  border: 1px solid rgba(138, 115, 84, 0.4);
  color: #3a2a14;
  font-family: 'Lora', Georgia, serif;
}
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select)) .flash-alert {
  background: rgba(154, 90, 74, 0.12);
  border: 1px solid rgba(154, 90, 74, 0.4);
  color: #7a3a2a;
  font-family: 'Lora', Georgia, serif;
}

/* ── Buttons ──
   .btn is the ordinary one. One per screen is the seal (.btn--primary): the
   thing the screen is for, in ink with parchment words. .btn--quiet steps
   back, .btn--danger loses something, .btn--sm fits a card's row. The
   suspension page is parchment with the game's teal buttons unless it is
   listed here. */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn {
  border-color: #b5a382;
  color: #5a4a30;
  background: transparent;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.45rem 1rem;
  transition: all 0.3s ease;
}
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn:hover {
    background: rgba(138, 115, 84, 0.12);
    border-color: #8a7354;
    color: #3a2a14;
  }
}
/* Ink, 10.9:1 with its words. */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--primary {
  background: #3a2a14;
  border-color: #3a2a14;
  color: #efe3cd;
  font-weight: 600;
  padding: 0.55rem 1.3rem;
  box-shadow: inset 0 0 0 1px rgba(239, 227, 205, 0.18), 0 1px 3px rgba(58, 42, 20, 0.25);
}
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--primary:hover { background: #5a4a30; border-color: #5a4a30; color: #efe3cd; }
}
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--quiet { border-color: rgba(138, 115, 84, 0.35); color: #65523a; }
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--quiet:hover { background: rgba(138, 115, 84, 0.08); border-color: #8a7354; color: #3a2a14; }
}
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--danger { border-color: rgba(122, 58, 42, 0.45); color: #7a3a2a; }
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--danger:hover { background: rgba(138, 64, 58, 0.1); border-color: #7a3a2a; color: #7a3a2a; }
}
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--sm { font-size: 0.65rem; padding: 0.3rem 0.7rem; }
/* Waiting, not refused: dimmed, and nothing lights up under the pointer. */
body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) {
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn:disabled:hover { background: transparent; border-color: #b5a382; color: #5a4a30; }
  body:is(:has(.dashboard), :has(.profile-screen), :has(.setup-header), :has(.story-page), :has(.mode-select), :has(.suspension)) .btn--primary:disabled:hover { background: #3a2a14; border-color: #3a2a14; color: #efe3cd; }
}