/* King's Court — shared visual language.
   An illuminated manuscript: vellum pages, iron-gall ink, gold leaf, rubrication
   in vermilion, lapis skies at night, and drolleries misbehaving in the margins.
   Art direction lives in docs/art-direction.md. No emoji anywhere: all pictures
   come from public/shared/icons.js. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=UnifrakturMaguntia&display=swap');

:root {
  color-scheme: light;

  /* pigments */
  --vellum: #eedfbd;
  --vellum-light: #f7eed6;
  --vellum-shadow: #d9c393;
  --iron-gall: #2b1b10;
  --faded-ink: #6d5638;
  --sepia-line: #a3844f;
  --vermilion: #b0362a;
  --vermilion-deep: #7e2219;
  --lapis: #23408e;
  --lapis-night: #152655;   /* our lapis darkened to 60% (art direction, decision 10) */
  --verdigris: #3f7a5a;
  --murrey: #7a2e4a;
  --ochre: #b8862f;
  --bone: #ece3cf;
  --gold-leaf: #c9a23c;
  --gold-leaf-hi: #f2d77e;
  --gold-leaf-lo: #7d5a17;
  /* Gold leaf: flat metal, mottled and grainy. No chrome gradients (art direction rule 5). */
  /* Baked PNG tiles, not live SVG noise: phone browsers (iOS Safari above all) can crash rasterising feTurbulence
     page backgrounds. The noise they were baked from: docs/proposals/art-workbench/tiles/ (bake-textures.ps1). */
  --gold-grain: url('/shared/tile-gilt.png');
  --gilt: var(--gold-grain), var(--gold-leaf);
  /* Wax: flat pigment with a hard-edged pressed centre. No glossy highlight. */
  --wax: radial-gradient(circle at 50% 50%, #8f2219 0 52%, #a3271d 53% 100%);

  /* the four estates (realm meters) */
  --meter-treasury: var(--ochre);
  --meter-army: var(--vermilion);
  --meter-faith: var(--lapis);
  --meter-commons: var(--verdigris);

  /* type: blackletter for big titles only, never for body or small text; IM Fell small caps for
     labels and buttons; EB Garamond for everything people read (art direction, decision 7). */
  --font-blackletter: 'UnifrakturMaguntia', 'Old English Text MT', 'Goudy Text MT', serif;
  --font-rubric: 'IM Fell English SC', 'EB Garamond', Georgia, serif;
  --font-fell: 'IM Fell English', 'EB Garamond', Georgia, serif;
  --font-body: 'EB Garamond', Garamond, Georgia, serif;
  --font-title: var(--font-body);   /* names and headings: kept as a token, currently the same face */

  --vellum-texture: -webkit-image-set(url('/shared/tile-vellum.png') 2x);   /* a 480 px tile drawn at 240 px, sharp on phones
     (the 2x is the tile's pixel density, not a repeat) */
  --night-texture:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--gold-leaf-hi) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 12%, var(--gold-leaf-hi) 50%, transparent 51%),
    radial-gradient(2px 2px at 82% 46%, var(--gold-leaf) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 64%, var(--gold-leaf-hi) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 86%, var(--gold-leaf) 50%, transparent 51%);

  /* semantic roles (overridden inside .night) */
  --page: var(--vellum);
  --page-raised: var(--vellum-light);
  --text: var(--iron-gall);
  --muted: var(--faded-ink);
  --rule: var(--sepia-line);
  --rubric: var(--vermilion);

  /* Legacy aliases from the first (dark) theme, kept so nothing breaks
     mid-migration. Prefer the names above in new code. */
  --ink: var(--page);
  --ink-2: var(--page-raised);
  --ink-3: var(--vellum-shadow);
  --line: var(--rule);
  --faint: var(--sepia-line);
  --gold: var(--gold-leaf);
  --gold-hi: var(--gold-leaf-hi);
  --gold-lo: var(--gold-leaf-lo);
  --blood: var(--vermilion);
  --emerald: var(--verdigris);
  --violet: var(--murrey);
  --night: var(--lapis-night);
  --parchment: var(--vellum-light);
  --parchment-edge: var(--sepia-line);
  --parchment-ink: var(--iron-gall);
  --font-display: var(--font-blackletter);
  --font-ui: var(--font-rubric);
  --radius: 3px;
  --radius-sm: 2px;
  --shadow: none; /* nothing casts a shadow on a manuscript page */
}

/* Night falls: the page turns to lapis and gold stars. */
.night {
  --page: var(--lapis-night);
  --page-raised: #1b3169;   /* our lapis at 75%: a leaf laid on the night page */
  --text: var(--bone);
  --muted: #b9ab8b;
  --rule: #4a5a94;
  --rubric: var(--gold-leaf-hi);
  --meter-faith: #6f7fad;   /* lapis's light tone: lapis pips would vanish on a lapis page */
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* The page background scrolls with the content: a fixed, textured background forces a full repaint on
   every scroll frame and made pages lag. */
body {
  background: var(--vellum-texture), var(--page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: oldstyle-nums;
}
body.night { background: var(--night-texture), var(--lapis-night); }

h1, h2, .blackletter { font-family: var(--font-blackletter); font-weight: 400; letter-spacing: 0.01em; margin: 0; line-height: 1.05; }
h3, h4, .rubric { font-family: var(--font-rubric); font-weight: 400; letter-spacing: 0.06em; margin: 0; }
.rubric { color: var(--rubric); }

button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-leaf-hi); color: var(--iron-gall); }

/* A plain button: a painted slip of darker vellum. No outlines anywhere (art direction rule 4). */
.btn {
  appearance: none;
  border: none;
  background: var(--vellum-texture), var(--vellum-shadow);
  color: var(--iron-gall);
  border-radius: 2px;
  padding: 0.55em 1.1em 0.6em;
  font-family: var(--font-rubric);
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.08s ease, color 0.15s ease;
}
.btn:hover { color: var(--vermilion); }
.btn:active { filter: brightness(0.9); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Gilded: for the crown's own actions and the one thing to do next. */
.btn-gold, .btn-gilt {
  background: var(--gilt);
  color: var(--iron-gall);
}
.btn-danger { background: var(--vermilion-deep); color: var(--bone); }
button:focus-visible, .btn:focus-visible { outline: none; background: var(--gold-leaf-hi); }
.seal:focus-visible { outline: none; filter: brightness(1.18); }

/* Wax seal: the press-to-commit control ("Seal it"). Put a short label inside. */
.seal {
  appearance: none;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50% 47% 52% 49% / 49% 52% 47% 51%;
  border: none;
  background: var(--wax);
  color: #f6dcc9;
  font-family: var(--font-rubric);
  font-size: 0.95rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease;
  touch-action: manipulation;
}
.seal:active { transform: scale(0.92) rotate(-4deg); }
.seal:disabled { filter: grayscale(0.7); opacity: 0.6; }

input[type='text'], textarea, select {
  width: 100%;
  background: linear-gradient(var(--sepia-line), var(--sepia-line)) bottom / 100% 1px no-repeat, rgba(255, 250, 235, 0.45);
  border: none;
  padding: 0.45em 0.3em;
  font-family: var(--font-fell);
  font-size: max(16px, 1.05rem);
  color: var(--text);
}
textarea {
  background: repeating-linear-gradient(transparent 0 1.55em, rgba(163, 132, 79, 0.35) 1.55em calc(1.55em + 1px)), rgba(255, 250, 235, 0.45);
  line-height: 1.55em;
  padding: 0.2em 0.5em;
  resize: vertical;
}
input:focus, textarea:focus, select:focus { outline: none; background-color: rgba(242, 215, 126, 0.35); }
::placeholder { color: var(--faded-ink); font-style: italic; opacity: 0.8; }

/* A leaf: a lighter sheet laid on the page, made by tone and shadow alone (no frame). */
.leaf, .card {
  background: var(--vellum-texture), var(--page-raised);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow);
}
.night .leaf, .night .card { background: var(--page-raised); }

/* A charter or scrap of parchment pinned up (petitions, letters). */
.parchment {
  background: var(--vellum-texture), linear-gradient(180deg, #faf2dc, var(--vellum-light));
  color: var(--iron-gall);
  box-shadow: var(--shadow);
}

/* Illuminated drop cap for the first letter of a passage. */
.drop-cap::first-letter {
  float: left;
  font-family: var(--font-blackletter);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.08em 0.12em 0.02em;
  margin: 0.06em 0.12em 0 0;
  color: var(--gold-leaf-hi);
  background: var(--vellum-texture), var(--lapis);
}

/* A small rubricated label (replaces generic "pills"). */
.tag, .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-rubric);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--rubric);
  padding: 0 0.1em;
  white-space: nowrap;
}

/* A painted band between sections: vermilion with a gold fillet. */
.rule { border: none; height: 5px; margin: 0.8rem 0; background:
  linear-gradient(var(--vermilion), var(--vermilion)) top / 100% 3px no-repeat,
  linear-gradient(var(--gold-leaf), var(--gold-leaf)) bottom / 100% 1px no-repeat; }

.muted { color: var(--muted); }
.gold, .gilded-text {
  background: var(--gilt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Realm meter, drawn as a pen-hatched bar: <div class="meter" data-k="army" style="--v:5"><span></span></div> */
.meter { --v: 5; position: relative; height: 12px; background: rgba(110, 80, 35, 0.16); }
.meter > span {
  display: block;
  height: 100%;
  width: calc(var(--v) * 10%);
  background: repeating-linear-gradient(-55deg, var(--c, var(--gold-leaf)) 0 2px, transparent 2px 4.5px), color-mix(in srgb, var(--c, var(--gold-leaf)) 35%, transparent);
  transition: width 0.8s ease;
}
.meter[data-k='treasury'] { --c: var(--meter-treasury); }
.meter[data-k='army'] { --c: var(--meter-army); }
.meter[data-k='faith'] { --c: var(--meter-faith); }
.meter[data-k='commons'] { --c: var(--meter-commons); }
.meter.danger { animation: meter-tremble 0.9s ease-in-out infinite; background: rgba(176, 54, 42, 0.22); }
@keyframes meter-tremble { 25% { transform: translateX(-1px) rotate(-0.3deg); } 75% { transform: translateX(1px) rotate(0.3deg); } }

/* A player's identity color as a heraldic roundel: style="--c: #b0362a" */
.dot { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--c, var(--gold-leaf)); flex: none; }

/* Icons from icons.js are inline SVG; size them with font-size. */
.ico { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }

/* Motion: ink soaking into the page, and gold catching the light. */
/* Opacity and transform only: an animated blur filter is costly when many lines ink in at once (art rule 7). */
@keyframes ink-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ink-in { animation: ink-in 0.7s ease both; }
@keyframes gild-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}